<!DOCTYPE html> <html> <head> <!-- Required meta tags--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Color theme for statusbar --> <meta name="theme-color" content="#000"> <!-- Your app title --> <title>批注系统</title> <!-- Path to Framework7 Library CSS --> <link rel="stylesheet" href="css/framework7.css"> <link rel="stylesheet" href="css/framework7-icons.css"> <link rel="stylesheet" href="css/style.css"> <style> .ios .searchbar:after { background-color: white; } .ios .card { margin: 0.5rem 0 0 0; } .ios .navbar .left { margin-right: 0px; } .ios .navbar b, .ios .navbar .title { font-weight: 500; } p { font-size: 16px; line-height: 1.5rem; } .ios .navbar .title { font-size: 16px; } .cardcss { padding-bottom: 3px; } .ios .list .item-media+.item-inner { margin-left: 0; } .mark { font-size: 16px; margin-top: 16px; } </style> </head> <body> <!-- App root element --> <div id="app"> <!-- 左侧边栏 --> <div class="panel panel-left panel-cover anpanel annotator"> <div class="block" id="Mynote"> <div id="ancontent"> <div class="texbg">暂无批注</div> </div> </div> </div> <!-- Statusbar overlay --> <!-- Your main view, should have "view-main" class --> <div class="view view-main"> <!-- Initial Page, "data-name" contains page name --> <!-- 头部标题栏 --> <div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="item-link icon" id="back"> <i class="icon f7-icons" style="font-size: 25px">chevron_left</i> </a> </div> <div class="title"> <span id="title">可以失去一切,不能失去理想</span> <div class="stitle"> </div> </div> <div class="right"> <a href="#" class="icon link panel-open" data-panel="right"> </a> </div> </div> </div> <!-- 工具栏 --> <div class="toolbar tabbar-labels"> <div class="toolbar-inner"> <!-- 工具栏标签 --> <a href="#" class="tab-link an-button popup-open" id="button0"> <!-- Different icons for iOS and MD themes --> <i class="icon f7-icons ios-only">chat_fill</i> <span class="tabbar-label">背景高亮</span> </a> <a href="#" class="tab-link an-button popup-open" id="button1"> <i class="icon f7-icons ios-only">help_fill</i> <span class="tabbar-label">文字高亮</span> </a> <a href="#" class="tab-link an-button popup-open" id="button2"> <i class="icon f7-icons ios-only">heart_fill</i> <span class="tabbar-label">加粗</span> </a> <a href="#" class="tab-link an-button popup-open" id="button3"> <i class="icon f7-icons ios-only">mic_fill</i> <span class="tabbar-label">下划线</span> </a> </div> </div> <!-- 内容区域 --> <div class="page-content"> <div class="list media-list annotator"> <ul> <li> <a href="#" class="item-link item-content class"> <div class="item-media"> <img src="images/teacher.jpg" width="44" /> </div> <div class="item-inner"> <div class="item-title"> <div class="item-title size-14" id="person">发布人:张晓飞老师</div> </div> <div class="item-subtitle size-14">教育工作者</div> </div> </a> </li> </ul> </div> <div id="txblock"> <div class="block" id="box" style="color:black"></div> </div> </div> <!-- 弹出页面 --> <div class="popup popup5 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">help_fill</i> 修改批注</p> <blockquote class="blockquote bqcolor1" id="bqcolor"> <p id="old"></p> <p id="sendID" style="display: none"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="mod" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="modadd">修改批注</button> <button class="button col-30 popup-close">取消</button> </p> </div> </div> <div class="popup popup0 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">chat_fill</i> 添加批注</p> <blockquote class="blockquote bqcolor0"> <p id="selectedtxt0" class="text_overflow3"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="note0" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="add0">添加批注</button> <button class="button col-30 popup-close" onclick="getPassage('ture')">取消</button> </p> </div> </div> <div class="popup popup1 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">help_fill</i> 添加批注</p> <blockquote class="blockquote bqcolor1"> <p id="selectedtxt1" class="text_overflow3"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="note1" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="add1">添加批注</button> <button class="button col-30 popup-close" onclick="getPassage('ture')">取消</button> </p> </div> </div> <div class="popup popup2 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">heart_fill</i> 添加批注</p> <blockquote class="blockquote bqcolor2"> <p id="selectedtxt2" class="text_overflow3"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="note2" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="add2">添加批注</button> <button class="button col-30 popup-close" onclick="getPassage('ture')">取消</button> </p> </div> </div> <div class="popup popup3 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">mic_fill</i> 添加批注</p> <blockquote class="blockquote bqcolor3"> <p id="selectedtxt3" class="text_overflow3"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="note3" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="add3">添加批注</button> <button class="button col-30 popup-close" onclick="getPassage('ture')">取消</button> </p> </div> </div> <div class="popup popup4 annotator"> <div class="block annotator"> <p> <i class="icon f7-icons ios-only">compose_fill</i> 添加批注</p> <blockquote class="blockquote bqcolor4"> <p id="selectedtxt4" class="text_overflow3"></p> </blockquote> <p class="content"> <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p> <!-- Close Popup --> <div class="item-media"> <i class="icon demo-list-icon"></i> </div> <textarea placeholder="请输入批注" id="note4" cols="45" rows="6" class="textarea"></textarea> <p class="row"> <button class="col-30 button button-fill panel-open popup-close" id="add4">添加批注</button> <button class="button col-30 popup-close" onclick="getPassage()">取消</button> </p> </div> </div> </div> </div> <script src="js/framework7.min.js"></script> <script src="js/app.js"></script> <script src="js/rangy-core.js"></script> <script src="js/rangy-classapplier.js"></script> <script src="js/jquery.min.js"></script> <script> // 返回按钮 var back = document.getElementById("back"); if (back) { back.addEventListener('touchstart', function () { window.history.back(-1); }) }; var reg = new RegExp("(^|&)id=([^&]*)(&|$)"); var reg2 = new RegExp("(^|&)teacherId=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); var passageId = unescape(r[2]); var g = window.location.search.substr(1).match(reg2); var userId = unescape(g[2]); </script> <script> // 选中并传递到popup var text; function getString(n) { text = rangy.getSelection().toString(); console.log(text); var string = 'selectedtxt' + n; var selectedtxt = document.getElementById(string); selectedtxt.innerText = text; } //将popu中的文字传递到侧边栏 function panel(m) { var leftID; var string = 'note' + m; var textarea = document.getElementById(string).value; //ajax传递数据到后台并获得批注id app.request.post('http://212.64.11.56:8080/EAnnotation/addAnnotation', { content: textarea, paragraph: paragraph, start: start, end: end, type: type, userId: userId, passageId: passageId, selected: text }, function (data) { leftID = jQuery.parseJSON(data); $$('#ancontent').append( '<div class="card cardcss" id="' + leftID + '">' + '<blockquote class="blockquote bqcolor' + m + '" id="bq' + leftID + '">' + '<p>' + text + '</p>' + '</blockquote>' + '<div class="card-content cardct ">' + '<p id="an' + leftID + '">' + textarea + '</p>' + '</div >' + '<div class="card-footer cgdel">' + '<a class="link popup-open" id="change" data-popup=".popup5" onclick="modify(' + leftID + ')">修改</a><a class="link" id="delete" onclick="del(' + leftID + ')">删除</a>' + '</div>' + '</div>'); document.getElementById(string).value = ''; }); } //获取选中文字的位置 var paragraph = 0; var start; var end; var type; function getLocation(n) { var userSelection; var par = 0; if (window.getSelection) { //现代浏览器 userSelection = window.getSelection(); } var getRangeObject = function (selectionObject) { if (selectionObject.getRangeAt) return selectionObject.getRangeAt(0); else { // 较老版本Safari! var range = document.createRange(); range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset); range.setEnd(selectionObject.focusNode, selectionObject.focusOffset); return range; } } var rangeObject = getRangeObject(userSelection); var p = rangeObject.startContainer.parentNode; while (p = p.previousSibling) { par++; } par = par + 1; paragraph = par; start = rangeObject.startOffset; console.log(start); end = rangeObject.endOffset; type = n; } //添加批注样式 function anPaint(bton) { rangy.init(); var classApplierModule = rangy.modules.ClassApplier; if (true) { switch (bton) { case 0: cssApplier = rangy.createClassApplier("Bton0Backgrond",false); cssApplier.toggleSelection(); break; case 1: cssApplier = rangy.createClassApplier("Bton1Backgrond", false); cssApplier.toggleSelection(); break; case 2: cssApplier = rangy.createClassApplier("Bton2Backgrond", false); cssApplier.toggleSelection(); break; case 3: cssApplier = rangy.createClassApplier("Bton3Backgrond", false); cssApplier.toggleSelection(); break; case 4: cssApplier = rangy.createClassApplier("Bton4Backgrond", false); cssApplier.toggleSelection(); break; } } }; var ancount; //统计批注数量,用于数量随时变化 //获取文章id function getPassage(dele) { //dele用来标记是否需要重新渲染侧边栏 $.ajax({ url: 'http://212.64.11.56:8080/EAnnotation/getPassage?id=' + passageId, type: "post", success: function (data) { console.log(data.count); $("#title").html(data.title); $("#allantate").text(data.count); ancount = data.count; $("#box").html(data.content); $("#person").html('发布人:' + data.auth + '老师'); getAnnotator(passageId, userId, dele); }, error: function (e) {} }) }; window.onload = function () { getPassage() } var par, st, ed, type, anID, content, selected; //用于传递数据的参数 //从数据库获得json类型数据并解析 function getAnnotator(passageId, userId, dele) { app.request.get('http://212.64.11.56:8080/EAnnotation/getAnnotations?passageId=' + passageId + '&userId=' + userId, function (data) { var result = jQuery.parseJSON(data); each(result, dele); }, JSON); } // 从数据库取回数据后重新渲染批注 function each(result, dele) { $.each(result, function (i, item) { par = item.paragraph; st = item.start; ed = item.end; type = item.type; anID = item.id; content = item.content; selected = item.selected; annotate(); if (dele != "ture") { rePanel(); } }) } function annotate() { var px = $$("#box p")[par - 1].firstChild; console.log(px); var range = rangy.createRange(); range.setStart(px, st); range.setEnd(px, ed); range.select(); switch (type) { case 0: cssApplier = rangy.createClassApplier("Bton0Backgrond", false); break; case 1: cssApplier = rangy.createClassApplier("Bton1Backgrond", false); break; case 2: cssApplier = rangy.createClassApplier("Bton2Backgrond", false); break; case 3: cssApplier = rangy.createClassApplier("Bton3Backgrond", false); break; case 4: cssApplier = rangy.createClassApplier("Bton4Backgrond", false); break; } cssApplier.toggleSelection(); window.getSelection().removeAllRanges(); } //渲染侧边栏批注 function rePanel() { var string = 'note' + type; var textarea = content; // $$('#ancontent').html('<div id="ancontent"><div class="texbg">暂无批注</div></div>'); $$('#ancontent').append( '<div class="card cardcss" id="' + anID + '">' + '<blockquote class="blockquote bqcolor' + type + '" id="bq' + anID + '">' + '<p>' + selected + '</p>' + '</blockquote>' + '<div class="card-content cardct ">' + '<p id="an' + anID + '">' + textarea + '</p>' + '</div >' + '<div class="card-footer">' + '<a class="link popup-open" id="change" data-popup=".popup5" onclick="modify(' + anID + ')">修改</a><a class="link" id="delete" onclick="del(' + anID + ')">删除</a>' + '</div>' + '</div>'); document.getElementById(string).value = ''; } //删除批注 function del(delID) { $$('#' + delID).remove(); //ajax传输给后台 app.request.post('http://212.64.11.56:8080/EAnnotation/deleteAnnotation', { id: delID }, function (data) { var dele = "ture"; getPassage(dele); }) }; //修改批注 function modify(modId) { var x = $$('#an' + modId).text(); //获取批注的文章内容 var t = $$('#bq' + modId + '>p').text(); //获得原批注 var bqcolor = $$('#bq' + modId).attr('class'); //获得颜色样式 $$('#sendID').text(modId); //传递id $$('#old').text(t); //传递原批注 $$('#mod').val(x); //传递文章内容到popup $$('#bqcolor').attr('class', bqcolor); } var ad = document.getElementById("modadd"); ad.addEventListener('touchstart', function () { add(); }); function add() { var nw = $$('#mod').val(); var getID = $$('#sendID').text(); $$('#an' + getID).text(nw); //ajax传输给后台 app.request.post('http://212.64.11.56:8080/EAnnotation/updateAnnotation', { content: nw, id: getID }, function (data) { if (data.msg == "ture") { console.log("成功") } }); } var user; //获取登录者id $.ajax({ url: 'http://212.64.11.56:8080/EAnnotation/getCurrentUser', type: 'post', dataType: 'jsonp', xhrFields: { withCredentials: true }, crossDomain: true, success: function (data) { user = data; }, error: function () {} }) // 底部工具栏按钮事件 var button0 = document.getElementById("button0"); button0.addEventListener('touchstart', function () { if (user == 0) { goload(); } else { getString(0); anPaint(0); getLocation(0); } if(text && text != null){ app.popup.open(".popup0") } }); var botton1 = document.getElementById("button1"); button1.addEventListener('touchstart', function () { if (user == 0) { goload(); } else { getString(1); anPaint(1); getLocation(1); } if(text && text != null){ app.popup.open(".popup1") } }); var botton2 = document.getElementById("button2"); button2.addEventListener('touchstart', function () { if (user == 0) { goload(); } else { getString(2); anPaint(2); getLocation(2); } if(text && text != null){ app.popup.open(".popup2") } }); var botton3 = document.getElementById("button3"); button3.addEventListener('touchstart', function () { if (user == 0) { goload(); } else { getString(3); anPaint(3); getLocation(3); } if(text && text != null){ app.popup.open(".popup3") } }); //添加批注按钮点击事件 var add0 = document.getElementById("add0"); add0.addEventListener('touchstart', function () { panel(0); }); var add1 = document.getElementById("add1"); add1.addEventListener('touchstart', function () { panel(1); }); var add2 = document.getElementById("add2"); add2.addEventListener('touchstart', function () { panel(2); }); var add3 = document.getElementById("add3"); add3.addEventListener('touchstart', function () { panel(3); }); // var add4 = document.getElementById("add4"); // add4.addEventListener('touchstart', function () { // panel(4); // (); // }); //修改按钮 var change = document.getElementById("change"); change.addEventListener('touchstart', function () { anChange(); }); //删除按钮 var delbutn = document.getElementById("delete"); delbutn.addEventListener('touchstart', function () { del(); refresh(); rdNum(); }); </script> </body> </html>