Mercurial > hg > extraction-interface
changeset 122:a36bb5a48af4 extractapp tip
1. remove redundancy server side code.
2. All pop up sub-windows are made with dialog component of bootstrap v3.3.2
| author | Calvin Yeh <cyeh@mpiwg-berlin.mpg.de> |
|---|---|
| date | Thu, 28 Sep 2017 22:26:48 +0200 |
| parents | 21e89eca0b84 |
| children | |
| files | views/Extractapp/TaggingText.php |
| diffstat | 1 files changed, 559 insertions(+), 499 deletions(-) [+] |
line wrap: on
line diff
--- a/views/Extractapp/TaggingText.php Thu Sep 28 17:51:53 2017 +0200 +++ b/views/Extractapp/TaggingText.php Thu Sep 28 22:26:48 2017 +0200 @@ -17,18 +17,18 @@ * along with Extraction-interface. If not, see <http://www.gnu.org/licenses/>. */ -/*! \file +/*! \file * This is the view for TaggingText. * It shows the extraction-interface application itself. * The input data for this view come from models/extractapp.php which is handled by controllers/extractapp.php. - * Input data for example, are (1)text string (containing tags if there are any), + * Input data for example, are (1)text string (containing tags if there are any), * (2)taglist for the current topic, (3)book and section information, etc. * The output data are passed to backend by controller to corresponding method in model/extractapp.php. * Output data is the tagged text string. - * + * * The user interface contains tagging area on the left side, and toolbox on the right side. * There are popup windows to assist the tagging task, for example RegEx-editors, tag-window, remove-tag-window, etc. - * + * */ // --- initialize config file and input text --- @@ -41,7 +41,7 @@ $topic_name = $viewmodel['topic_name']; // array of names $topic_tag = $viewmodel['topic_tag']; $topic_tag_ch = $viewmodel['topic_tag_ch']; -$info = $viewmodel['info']; +$info = $viewmodel['info']; $messages = $viewmodel['messages']; $taglist_infile = $viewmodel['taglist_infile']; @@ -57,6 +57,8 @@ <meta http-equiv="no-cache"> <meta http-equiv="Expires" content="-1"> <meta http-equiv="Cache-Control" content="no-cache"> + <?php include 'views/maintemplate.php'; ?> + <script src="../js/jquery.bootstrap-growl.min.js"></script> <style> dynasty @@ -71,17 +73,33 @@ { color:orange; } + +body { + overflow: hidden; + padding: 15px; +} + +#editable-area-wraper { + height: 90vh; + overflow: auto; +} + #editable-area { line-height:160%; letter-spacing:1.5px; font-size:21px; + word-wrap: break-word; } + <?php // color on the tags foreach ( $taglistArray as $taglistValue ) { + echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."; cursor: hand;\n}\n"; - + + echo ".EditingMode ".$taglistValue[2]."\n{\ncursor: initial;\n}\n"; + echo ".span_".$taglistValue[2]."\n{\nbackground-color:".$taglistValue[3]."\n}\n"; } @@ -108,7 +126,7 @@ for (var i = 0; i < taglistArray.length; i++) { var taglistValue = taglistArray[i]; - + $(taglistValue[2]).css('color', taglistValue[3]); /*var element = document.querySelectorAll(taglistValue[2]); for (var j = 0; j < element.length; j++) { @@ -119,11 +137,10 @@ } -// ---- use cookie to save text and reload page for the up-to-date taglist +// ---- use cookie to save text and reload page for the up-to-date taglist function updatePage() { var text = getCookie(); //document.forms['receiver'].elements['message'].value = text; - console.log(text); if (text == "reload") { setCookie(""); saveTextToLGService(); @@ -151,13 +168,13 @@ form.setAttribute("action", "./TaggingText"); // hand to controller form.setAttribute("target", "_blank"); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); var topic_id = JSON.parse('<?php echo json_encode($default_topic_id) ?>'); hiddenField.setAttribute("value", topic_id); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "ReloadText"); form.appendChild(hiddenField); @@ -177,7 +194,7 @@ return; } return; - + } // on click on tagged words, call removeTagNewDiv() for the popup window @@ -186,46 +203,35 @@ var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>'); for (var i = 0; i < taglistArray.length; i++) { var taglistValue = taglistArray[i]; - - + + $(document).on("click", taglistValue[2], function (e, taglistValue) { - if ($("#editTextId").html() != "Edit text") return 0; + //if ($("#editTextId").html() != "Edit text") return 0; + if(EditingMode === "editing") return 0; var tag = $(this).prop("tagName").toLowerCase(); //if (tagName != taglistValue[2]) return 0; - + // pop_remove_tag_window is a global variable which indicates if to show the remove-popup-window if (pop_remove_tag_window) { removeTagNewDiv( e, tag , $(this)); - + }; - return false; + return false; }); - + }; -/* -<?php -foreach ( $taglistArray as $taglistValue ) { - echo '$(document).on("click", "'.$taglistValue[2].'", function (e) {'."\n"; - echo "\t".'if ( $(this).prop("tagName").toLowerCase() != "'.$taglistValue[2].'" ) return 0;'."\n"; - echo "\t".'if ( $("#editTextId").html() != "Edit text" ) return 0;'."\n"; - echo "\tremoveTagNewDiv( e, \"".$taglistValue[2]."\", $(this) );\n"; - echo "});\n"; -} -?> -*/ - $(document).ready(function(){ $("#loading").hide(); - // --- for sidebar--- + // --- for sidebar--- //run once var el=$('#follow-scroll'); var originalelpos=el.offset().top; // take it where it originally is on the page - + //run on scroll $(window).scroll(function(){ var el = $('#follow-scroll'); // important! (local) @@ -242,7 +248,7 @@ //run once var el=$('#popups'); var originalelpos=el.offset().top; // take it where it originally is on the page - + //run on scroll $(window).scroll(function(){ var el = $('#popups'); // important! (local) @@ -255,7 +261,7 @@ // --- - // === This case only be possible for developing on local machine ==== + // === This case only be possible for developing on local machine ==== var _GET = JSON.parse('<?php echo json_encode($_GET) ?>'); if (_GET['id']) { var info = JSON.parse('<?php echo json_encode($info) ?>'); @@ -267,7 +273,7 @@ '</form>'); $('body').append(form); $(form).submit(); - } + } // -------- // --- handle file version conflict --- @@ -283,6 +289,7 @@ var taglist_infile = JSON.parse('<?php echo json_encode($taglist_infile) ?>'); var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>'); + /* if (taglist_infile == "") { console.log("Debug: taglist_infile is empty which means taglist_infile is equal to taglist in db."); } else { @@ -294,76 +301,100 @@ // TOOD: ask user to modify/decide tags (?) // showing taglist_infile and taglistArray } - + */ + //prevent user paste rich text which means html tag with attributes + $('[contenteditable]').on('paste', function(e) { + e.preventDefault(); + var text = ''; + if (e.clipboardData || e.originalEvent.clipboardData) { + text = (e.originalEvent || e).clipboardData.getData('text/plain'); + } else if (window.clipboardData) { + text = window.clipboardData.getData('Text'); + } + if (document.queryCommandSupported('insertText')) { + document.execCommand('insertText', false, text); + } else { + document.execCommand('paste', false, text); + } + }); }); $(document).on("mouseup", '#editable-area', function (e) { + $('.questionMarkClass').remove(); $('.tagItemDivClass').remove(); - - if ( $("#editTextId").html() != "Edit text" ) return 0; - + + //if ( $("#editTextId").html() != "Edit text" ) return 0; + if(EditingMode === "editing") return 0; + //var selection = getSelected(); selection = getSelected(); // selection is a global variable range = selection.getRangeAt(0); // range is a global variable - + container = document.createElement("div"); container.appendChild(selection.getRangeAt(0).cloneContents()); + let userTags = {}; + + <?php + foreach ( $taglistArray as $taglistValue ) { + echo "userTags['".$taglistValue[1]."']='".$taglistValue[2]."';\n"; + } + ?> if(selection && (selection_plain = new String(selection).replace(/^\s+|\s+$/g,''))) { - try{ + //try{ var newdiv = document.createElement("div"); //newdiv.id = "tagItemDivId"; //newdiv.setAttribute("class", "tagItemDivClass"); $(newdiv).id = "tagItemDivId"; $(newdiv).addClass("tagItemDivClass"); - newdiv.style.cssText = 'top:'+e.pageY+'; left:'+e.pageX+';'; - //console.log(selection.getRangeAt(0).cloneContents()); + if ( container.innerHTML.indexOf( "br" ) != -1 ) { - // when selected words containing tags (i.e. has 'br' in the selected string), + + // when selected words containing tags (i.e. has 'br' in the selected string), // which means user want to apply Title / or tags all in once at each line // This may not be the best checking solution, since 'br' also appears between not-tagged words var newselect = document.createElement("select"); newselect.id = "TitletagType"; - //console.log(JSON.parse('<?php echo json_encode($taglistArray) ?>')); + let strTagOpts = ''; + + for(let key in userTags){ - <?php - foreach ( $taglistArray as $taglistValue ) { - echo "newselect.innerHTML += \"<option value='".$taglistValue[2]."'>".$taglistValue[1]."</option>\";\n"; - } - ?> + strTagOpts += (`<option value='${userTags[key]}'>${key}</option>`); + } + + newselect.innerHTML = strTagOpts; + newdiv.appendChild(newselect); - + //matchValue = .match(); myRegexp = new RegExp("〈(.*?)〉", "g") matchValue = myRegexp.exec(String(selection)); - - if ( matchValue != null ) { - newdiv.innerHTML += "<input id=\"TitletagName\" value=\""+ matchValue[1] +"\"></br>"; - } else { - newdiv.innerHTML += "<input id=\"TitletagName\" value=\"\"></br>"; - } - newdiv.innerHTML += "<button onclick=\"addTagTitle( range, container )\">Add Title Tag To Each Line</button></br>"; - + + newdiv.innerHTML += `<input id='TitletagName' value='${(matchValue) ? matchValue[1] : ''}'>`; + newdiv.innerHTML += "<div style='text-align:right;margin:3px 0px 8px;'><button class='btn btn-sm btn-primary' onclick=\"addTagTitle(range, container)\">Add Title Tag To Each Line</button><div>"; + /* newdiv.innerHTML += "<button onclick=\"exportTable( range, container )\">Export As A Table</button></br></br>"; */ var newselect = document.createElement("select"); newselect.id = "RemoveTitletagType"; - <?php - foreach ( $taglistArray as $taglistValue ) { - echo "newselect.innerHTML += \"<option value='".$taglistValue[2]."'>".$taglistValue[1]."</option>\";\n"; - } - ?> + newselect.innerHTML = strTagOpts; newdiv.appendChild(newselect); - - newdiv.innerHTML += "<input id=\"RemoveTitletagName\" value=\"\"></br>"; - newdiv.innerHTML += "<button onclick=\"removeTagTitle( range, container )\">Remove</button></br>"; + + newdiv.innerHTML += "<input id=\"RemoveTitletagName\" value=\"\"><br>"; + newdiv.innerHTML += "<div style='text-align:right;margin:3px 0px;'><button class='btn btn-sm btn-default' onclick=\"removeTagTitle( range, container )\">Remove</button></br>"; + + let pageY = e.pageY, + topPosi = pageY - ( (window.innerHeight - pageY < 145 ) ? 145 : 0); + newdiv.style.cssText = 'top:'+ topPosi +'; left:'+e.pageX+';'; + } else { + // for pop up window on edit-area for tag list // newdiv.innerHTML = "Tagging word: "+String(selection)+"<br>"; var tagging_words = document.createElement("div"); @@ -376,57 +407,74 @@ $(tagging_tags).addClass("bg-white"); $(tagging_tags).text("Tag as: "); - tagging_tags.innerHTML += "<button accesskey=\"2\" onclick=\"tagwithtitle( range, '"+String(selection_plain)+"' )\">Title</button></br>"; - + tagging_tags.innerHTML += "<button class='btn btn-sm btn-primary' accesskey=\"2\" onclick=\"tagwithtitle( range, '"+String(selection_plain)+"' )\">Title</button>"; - console.log(selection); + var tagBtns_area = document.createElement("div"); + $(tagBtns_area).addClass("tagBtns-area"); - console.log(JSON.parse('<?php echo json_encode($taglistArray) ?>')); - - console.log(JSON.parse('<?php echo json_encode($topic_tag) ?>')); - + let tagVal, + tagging_btns = {R1:[], R2:[], R3:[], R4:[]}, + aryMainTaggingBtns = [], + aryTaggingBtns = [], + <?php echo "defaultTopicTag='".$topic_tag."';\n" ?>; - <?php + for(let key in userTags){ + + tagVal = userTags[key]; - foreach ( $taglistArray as $taglistValue ) { - if ($taglistValue[2] == $topic_tag) { - echo "tagging_tags.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."2' )\\\">".$taglistValue[1]."</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(without new line)</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection_plain)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n"; - break; - } + if (tagVal == defaultTopicTag) { + aryMainTaggingBtns.push(`<button class='btn btn-primary' accesskey="1" onclick="tagwithOnlytag(range, selection, '${tagVal}2')">${key}</button>`); + aryMainTaggingBtns.push(`<button class='btn btn-default' onclick="tagStringWithTag('${String(selection_plain)}', '${tagVal}')">${key}(ALL)</button>`); + aryMainTaggingBtns.push(`<button class='btn btn-default' accesskey="1" onclick="tagwithOnlytag(range, selection, '${tagVal}')">${key}(without new line)</button>`); + } + else{ + aryTaggingBtns.push(`<button class='btn btn-primary' onclick="tagwithOnlytag(range, selection, '${tagVal}')">${key}</button>`); + aryTaggingBtns.push(`<button class='btn btn-default' onclick="tagStringWithTag('${String(selection)}', '${tagVal}')">${key}(ALL)</button>`); + } } - foreach ( $taglistArray as $taglistValue ) { - if ($taglistValue[2] == $topic_tag) { - // pass - } else if ($taglistValue[2] == "post_time") { - // this case could be deprecated - echo "tagging_tags.innerHTML += \"<button accesskey=\\\"3\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."(ALL)</button></br>\";\n"; - } else if ($taglistValue[2] == "office") { - // this case could be deprecated - echo "tagging_tags.innerHTML += \"<button accesskey=\\\"4\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">".$taglistValue[1]."</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n"; - } else { - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagwithOnlytag(range, selection, '".$taglistValue[2]."')\\\">".$taglistValue[1]."</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n"; + + var remainder, btnRow; + for(let idx = 0, len = aryTaggingBtns.length - 1; idx < len; idx = idx + 2){ + + remainder = (idx / 2 % 4) + 1; + + btnRow = tagging_btns["R" + remainder]; + btnRow.push(aryTaggingBtns[idx]); + btnRow.push(aryTaggingBtns[idx+1]); + } + + var str_tagging_btns = ""; + + if(aryMainTaggingBtns.length > 0){ + str_tagging_btns = "<tr><td>" + + aryMainTaggingBtns[0] + "</td><td>" + + aryMainTaggingBtns[1] + "</td><td colspan='2'>" + + aryMainTaggingBtns[2] + "</td></tr>"; + } + + for(let idx = 1, len = 4; idx <= len; idx++){ - /* testing... backup the original one + btnRow = tagging_btns["R" + idx]; + + if(btnRow.length > 0){ - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagwithOnlytag( range, '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."</button>\";\n"; - echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n"; - */ + str_tagging_btns += ("<tr><td>" + btnRow.join("</td><td>") + "</td></tr>"); + } + } + + str_tagging_btns = "<table>" + str_tagging_btns + "</table>"; - } - } - ?> + tagBtns_area.innerHTML = str_tagging_btns; + + newdiv.appendChild(tagging_tags); + newdiv.appendChild(tagBtns_area); - newdiv.appendChild(tagging_tags); + let tagCnt = aryTaggingBtns.length / 2, + heightLimit = 109 + ( (tagCnt >= 4) ? 4 : ( tagCnt % 4 ) ) * 32, + pageY = e.pageY, + topPosi = pageY - ( (window.innerHeight - pageY < heightLimit ) ? heightLimit : 0); - - // add selected words to generator regex - // remove this feature... - // genRegexBySelection(newdiv, selection); // append button to newdiv and handle the selection words + newdiv.style.cssText = 'top:'+ topPosi +'; left:'+e.pageX+';max-height:280px;'; } @@ -436,11 +484,11 @@ // selected some words, so hide popping up remove-tag-window pop_remove_tag_window = false; // questionMarkID - } - catch(err){ - pop_remove_tag_window = true; // questionMarkID - - } + // } + // catch(err){ + // pop_remove_tag_window = true; // questionMarkID + // + // } } else { // without selecting any word, so pop up remove-tag-window pop_remove_tag_window = true; @@ -456,23 +504,23 @@ form.setAttribute("method", "post"); form.setAttribute("action", "./ExportTable"); form.setAttribute("target", "_blank"); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "exportFromExtractionInterface"); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "content"); hiddenField.setAttribute("value", container.innerHTML); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionid"); hiddenField.setAttribute("value", "<?php echo $section_id; ?>"); form.appendChild(hiddenField); - - var hiddenField2 = document.createElement("input"); + + var hiddenField2 = document.createElement("input"); hiddenField2.setAttribute("name", "topic"); hiddenField2.setAttribute("value", topic_id); form.appendChild(hiddenField2); @@ -481,17 +529,17 @@ var book_meta = JSON.parse( '<?php echo json_encode($book_meta) ?>'); if (info) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookId"); hiddenField.setAttribute("value", info['book_id']); - form.appendChild(hiddenField); + form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookName"); hiddenField.setAttribute("value", info['book_name']); - form.appendChild(hiddenField); - - var hiddenField = document.createElement("input"); + form.appendChild(hiddenField); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionName"); hiddenField.setAttribute("value", info['section_name']); form.appendChild(hiddenField); @@ -506,10 +554,28 @@ document.body.appendChild(form); form.submit(); document.body.removeChild(form); - //form.submit(); // works under IE and Chrome, but not FF + //form.submit(); // works under IE and Chrome, but not FF } } +var exportMode = "all"; + +function onExportModeChanged(ele){ + exportMode = ele.value +} + +function startExport(topic_id){ + + switch(exportMode){ + case "all" : + exportAll(topic_id); + break; + case "pages" : + exportPage(topic_id); + break; + } +} + function exportPage(topic_id) { var startPage = $('#exportPageStart').val(); var endPage = $('#exportPageEnd').val(); @@ -518,53 +584,52 @@ var str="" + el.innerHTML; var regexText="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】"; - + var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", "./ExportTable"); form.setAttribute("target", "_blank"); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "exportFromExtractionInterface"); - form.appendChild(hiddenField); + form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "content"); hiddenField.setAttribute("value", str.match(new RegExp(regexText, "g"))); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); hiddenField.setAttribute("value", topic_id); form.appendChild(hiddenField); _postForContineTagging(form); - + /* var section_id = JSON.parse('<?php echo json_encode($section_id) ?>'); - console.log("section_id: "+section_id+", topic_id: "+topic_id); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionId"); hiddenField.setAttribute("value", section_id); - form.appendChild(hiddenField); - + form.appendChild(hiddenField); + var info = JSON.parse( '<?php echo json_encode($info) ?>'); if (info) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookId"); hiddenField.setAttribute("value", info['book_id']); - form.appendChild(hiddenField); + form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookName"); hiddenField.setAttribute("value", info['book_name']); - form.appendChild(hiddenField); - - var hiddenField = document.createElement("input"); + form.appendChild(hiddenField); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionName"); hiddenField.setAttribute("value", info['section_name']); form.appendChild(hiddenField); @@ -576,7 +641,7 @@ document.body.appendChild(form); form.submit(); } else { - form.submit(); // works under IE and Chrome, but not FF + form.submit(); // works under IE and Chrome, but not FF } */ } @@ -588,20 +653,20 @@ form.setAttribute("method", "post"); form.setAttribute("action", "./ExportTable");//+section_id); // hand to controller form.setAttribute("target", "_blank"); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "exportFromExtractionInterface"); - form.appendChild(hiddenField); - + form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "content"); hiddenField.setAttribute("value", str); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); hiddenField.setAttribute("value", topic_id); form.appendChild(hiddenField); @@ -610,10 +675,7 @@ } - function tagTestX(range, selection, tag) { - console.log("selection string: "); - console.log(String(selection)); var stringSelection = String(selection); @@ -627,23 +689,23 @@ // --- var documentFragment = range.extractContents(); - - + + var tmpStringSelection = "" var childNodes = documentFragment.childNodes for (var i = 0; i < childNodes.length; i++){ if (childNodes[i].outerHTML == undefined) { - + tmpStringSelection += childNodes[i].textContent } else { - + tmpStringSelection += childNodes[i].outerHTML } - + } - stringSelection = tmpStringSelection + stringSelection = tmpStringSelection; range.deleteContents(); @@ -663,95 +725,64 @@ $('.tagItemDivClass').remove(); - - return - - - // --- + return; - console.log("the anchorNode: "); - console.log(selection.anchorNode); + // TODO if no fragment... bug - console.log("the anchorNode's nextSibling"); - console.log(next); - - - // TODO if no fragment... bug - if ( typeof selection !== 'string' ) { var next = selection.anchorNode.nextSibling; - - // TODO fragment at the beginning of selection: anchorNode var tmpStringSelection = "" - var startInx = selection.anchorOffset - var endSelectionInx = startInx + stringSelection.length - var endInx = selection.anchorNode.length - console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx) + var startInx = selection.anchorOffset; + var endSelectionInx = startInx + stringSelection.length; + var endInx = selection.anchorNode.length; - var anchorText = selection.anchorNode.textContent - + var anchorText = selection.anchorNode.textContent; /* - console.log("anchorNode...") - if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { - // if (next != null && selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { + if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { + // if (next != null && selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { // here the anchor node is text - + //tmpStringSelection += anchorText.substring(selection.anchorOffset, selection.anchorNode.length); tmpStringSelection += anchorText.substring(startInx, endSelectionInx); - console.log("append anchorText to tmpStringSelection: " + tmpStringSelection) - endInx += endSelectionInx - startInx; - + //endInx += (selection.anchorNode.length - selection.anchorOffset); - + } */ // TODO when anchorNode is not text, but a node - + /* if (next != null) { - if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { + if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") { var anchorText = selection.anchorNode.textContent // never goes here? tmpStringSelection += anchorText.substring(selection.anchorOffset, selection.anchorNode.length); - console.log("append anchorText to tmpStringSelection: " + tmpStringSelection) - - } + } } */ // TODO parsing stringSelection object in string, with the tagging strucutre - + var checkExtentNode = true - while(next != null && next != undefined && next.nodeName != "BR" && next.nodeName != "br" ) { - - /* - if (endInx >= endSelectionInx) { - console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx) - - console.log("debug: end of traverse. next=") - console.log(next) - - break; - } - */ + while(next != null && next != undefined && next.nodeName != "BR" && next.nodeName != "br" ) { startInx = endInx if (next.nodeType == 3) { // text case - console.log("text case.") + endInx += next.textContent.length @@ -760,8 +791,6 @@ /* tmpStringSelection += next.textContent.substring(0, endSelectionInx-startInx) - console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx) - console.log("appened next.textContent.substring tmpStringSelection (text case): " + tmpStringSelection) */ //checkExtentNode = false @@ -769,27 +798,20 @@ //break; } else { + tmpStringSelection += next.textContent; - tmpStringSelection += next.textContent; - console.log("appened tmpStringSelection (text case): " + tmpStringSelection) - - } - - + + } else if (next.nodeType == 1) { // node case - console.log("node case") - endInx += next.innerHTML.length + endInx += next.innerHTML.length if (endInx > endSelectionInx) { // TODO do something about tmpStringSelection here? - console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx) - - //checkExtentNode = false //break; @@ -797,72 +819,62 @@ tmpStringSelection += next.outerHTML; - console.log("appened tmpStringSelection (node case): " + tmpStringSelection) + // endInx += next.outerHTML.length } } else { - console.log("[debug] case: nodeType=" + next.nodeType) + //console.log("[debug] case: nodeType=" + next.nodeType) } /* } else if (next.innerHTML != undefined) { - + endInx += next.innerHTML.length; if (endInx >= endSelectionInx) { break; } - - + + } else { break } - console.log("startInx= " + startInx + "; endInx= " + endInx) + if (next.outerHTML != undefined) { tmpStringSelection += next.outerHTML; - console.log("appened tmpStringSelection: " + tmpStringSelection) - - } + } */ - console.log("next: "); - console.log(next); next = next.nextSibling; - + } - - // TODO + + // TODO // fragment at the end of selection: extentNode - - console.log("extentNode...") - console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx) - + var extentNode = selection.extentNode - + if (checkExtentNode) { if (endInx < endSelectionInx && startInx < endSelectionInx ) { tmpStringSelection += anchorText.substring(endInx, endSelectionInx); - console.log("append anchorText.substring(endInx, endSelectionInx) to tmpStringSelection: " + tmpStringSelection) - + } else if (extentNode != null) { var extentText = extentNode.textContent - + tmpStringSelection += extentText.substring(startInx, endSelectionInx); - console.log("append extentNode to tmpStringSelection: " + tmpStringSelection) } else { tmpStringSelection += anchorText.substring(startInx, endSelectionInx); - console.log("append anchorText.substring(startInx, endSelectionInx) to tmpStringSelection: " + tmpStringSelection) } } - + /* if (extentNode != null) { if (extentNode.nodeType == 3 ) { // text case @@ -870,25 +882,18 @@ if (endInx >= endSelectionInx) { - console.log("tmpStringSelection: " + tmpStringSelection) - - console.log(extentText.substring(startInx, selection.extentOffset)) tmpStringSelection += extentText.substring(startInx, endSelectionInx); - - console.log("append extentNode to tmpStringSelection: " + tmpStringSelection) } else { tmpStringSelection += anchorText.substring(endInx, endSelectionInx); } - } + } } */ - console.log("tmpStringSelection:") - console.log(tmpStringSelection) stringSelection = tmpStringSelection; - + } range.deleteContents(); @@ -913,7 +918,7 @@ } function tagwithOnlytag( range, selection, tag ) { - + $('#loading').show(); saveUndoText(); @@ -921,8 +926,6 @@ var topic_tag2 = topic_tag+"2"; var documentFragment = range.extractContents(); - - console.log("topic_tag: "+ topic_tag + ", topic_tag2: " + topic_tag2); var stringSelection = "" var childNodes = documentFragment.childNodes @@ -932,13 +935,9 @@ } else { stringSelection += childNodes[i].outerHTML } - + } - - //console.log("stringSelection: " + stringSelection); - - range.deleteContents(); if ( tag==topic_tag2) { @@ -989,11 +988,11 @@ saveUndoText(); var startPage = $('#regexPageStart2').val(); var endPage = $('#regexPageEnd2').val(); - + var el = document.getElementById("editable-area"); var regexText=document.getElementById("regexText").value; - - <?php + + <?php foreach ( $wordlistArray as $wordlistValue ) { echo "\tvar regexText1=\"List ".$wordlistValue[1]."\";\n"; echo "\tregexText1 = preg_quote(regexText1);\n"; @@ -1001,24 +1000,39 @@ echo "\tregexText = regexText.replace(new RegExp(regexText1, \"g\"), replaceText1);\n\n"; } ?> - + var replaceText=document.getElementById("replaceText").value; var str="" + el.innerHTML; - + var objReg1 = new RegExp(regexText, "g"); + var occurrences, info; if ( startPage == "" ) { - alert( "Tagged "+str.match(new RegExp(regexText, "g")).length+" entities!" ); - el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText); + + occurrences = (str.match(objReg1)||[]).length; + + if(occurrences > 0){ + info = "Replaced "+ occurrences +" entities."; + el.innerHTML = str.replace(objReg1, replaceText); + } } else { var regexText2="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】"; - var partString = ""+str.match(new RegExp(regexText2, "g")); - alert(partString); - - alert( "Tagged "+partString.match(new RegExp(regexText, "g")).length+" entities!" ); - var resultString = partString.replace(new RegExp(regexText, "g"), replaceText); - - str="" + el.innerHTML; - el.innerHTML = str.replace(new RegExp(regexText2, "g"), resultString); + var objReg2 = new RegExp(regexText2, "g"); + var partString = "" + str.match(objReg2); + //alert(partString); + + occurrences = (partString.match(objReg1)||[]).length; + + if(occurrences > 0){ + info = "Replaced "+ occurrences +" entities."; + var resultString = partString.replace(objReg1, replaceText); + + str = "" + el.innerHTML; + el.innerHTML = str.replace(objReg2, resultString); + } } + + if(occurrences == 0) info = "Found 0 occurrence."; + + $.bootstrapGrowl(info); //document.styleSheets[0].addRule("tag001", "color:green;") } @@ -1026,7 +1040,7 @@ // clean editable-area $('.questionMarkClass').remove(); $('.tagItemDivClass').remove(); - + // ------------- var info = JSON.parse('<?php echo json_encode($info) ?>'); var topic_id = JSON.parse('<?php echo json_encode($default_topic_id) ?>'); @@ -1042,10 +1056,10 @@ if(dd<10) { dd='0'+dd - } + } if(mm<10) { mm='0'+mm - } + } today = dd+'.'+mm+'.'+yyyy; var book_name = info['book_name']; var section_name = info['section_name']; @@ -1057,38 +1071,38 @@ } else { default_label = book_name + "(" + cjst.chineseToPinyin(book_name).join(' ') + ")_" + period + "(" + cjst.chineseToPinyin(period).join(' ') + ")_" - + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_" + + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_" + today; } - + var label = prompt("Please enter your label for this new task", default_label); while (label == null) { alert("You haven't saved your editing."); return; - } + } }; - + var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", "./TaggingText"); // hand to controller form.setAttribute("target", "_self"); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "SaveFullTextToLGService"); - form.appendChild(hiddenField); - + form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "label"); hiddenField.setAttribute("value", label); form.appendChild(hiddenField); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); hiddenField.setAttribute("value", topic_id); - form.appendChild(hiddenField); + form.appendChild(hiddenField); _postForContineTagging(form); @@ -1096,8 +1110,6 @@ var value = 1; document.cookie = "saveTextToLGService=" + value + "; path=/LGServices/pages"; - console.log("complete saving to LGService"); - } function createTopic(default_topic_id) { @@ -1109,52 +1121,52 @@ } var newtopic = document.getElementById("newTopicSubmit"); - + newtopic.onclick = function(){ // check if all fields are filled in - if ($("#newTopicNameEn").val()==""|| $("#newTopicNameCh").val()=="" || $("#newTopicNamePi").val()=="" || + if ($("#newTopicNameEn").val()==""|| $("#newTopicNameCh").val()=="" || $("#newTopicNamePi").val()=="" || $("#newTopicTag").val()=="" || $("#newTopicTagName").val()=="") { alert("Please fill in all the fields for the new topic."); return; - } + } var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", "./TaggingText"); // hand to controller - form.setAttribute("target", "_self"); + form.setAttribute("target", "_self"); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "CreateNewTopic"); form.appendChild(hiddenField); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "new_topic_name_en"); hiddenField.setAttribute("value", $("#newTopicNameEn").val()); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "new_topic_name_ch"); hiddenField.setAttribute("value", $("#newTopicNameCh").val()); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "new_topic_name_pi"); hiddenField.setAttribute("value", $("#newTopicNamePi").val()); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "new_topic_tag"); hiddenField.setAttribute("value", $("#newTopicTag").val()); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "new_topic_tag_name"); hiddenField.setAttribute("value", $("#newTopicTagName").val()); form.appendChild(hiddenField); - + _postForContineTagging(form); } - + $("#newTopicCancel").attr("onclick", "$('#new_topic_div').css(\"display\", \"none\");"); } @@ -1189,7 +1201,6 @@ if (changeConfirm) { selected_topic = topic_select.options[topic_select.selectedIndex]; - console.log(selected_topic.text); var topic_id = selected_topic.value; @@ -1198,22 +1209,22 @@ form.setAttribute("action", "./TaggingText"); // hand to controller form.setAttribute("target", "_self"); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); hiddenField.setAttribute("value", topic_id); form.appendChild(hiddenField); - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "func"); hiddenField.setAttribute("value", "ContinueTagging"); form.appendChild(hiddenField); - + _postForContineTagging(form); - + } else { - return - } + return + } }; @@ -1228,19 +1239,18 @@ topic_select.appendChild(option); } - $('#load_topic_div').append(topic_select); - var newbutton = document.createElement("button"); - $(newbutton).html("Close"); - $(newbutton).addClass("btn btn-xs btn-default"); + $(newbutton).html('<span aria-hidden=\"true\">×</span>'); + $(newbutton).addClass("btn btn-xs btn-default close-btn"); $(newbutton).attr("onclick", "$('#load_topic_div').css(\"display\", \"none\");"); $('#load_topic_div').append(newbutton); - + + $('#load_topic_div').append(topic_select); + } - function _postForContineTagging(form) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "text"); var el = document.getElementById("editable-area"); var text = el.innerHTML; @@ -1248,9 +1258,9 @@ form.appendChild(hiddenField); // pass taglist - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "taglistArray"); - + // use json_encode($taglistArray), which is the up-to-date taglist (in db) instead, // so replace the follwoing code /* @@ -1263,103 +1273,135 @@ } taglistArray = JSON.stringify(taglistObj); */ - + var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>'); hiddenField.setAttribute("value", taglistArray); form.appendChild(hiddenField); // pass book_meta - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "book_meta"); var book_metaObj = JSON.parse('<?php echo json_encode($book_meta) ?>'); book_metaArray = JSON.stringify(book_metaObj); hiddenField.setAttribute("value", book_metaArray); - form.appendChild(hiddenField); + form.appendChild(hiddenField); var info = JSON.parse( '<?php echo json_encode($info) ?>'); if (info) { if (info['file_id']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "fileId"); hiddenField.setAttribute("value", info['file_id']); form.appendChild(hiddenField); }; if (info['branch_id']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "branchId"); hiddenField.setAttribute("value", info['branch_id']); form.appendChild(hiddenField); }; if (info['user_id']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "userId"); hiddenField.setAttribute("value", info['user_id']); form.appendChild(hiddenField); }; if (info['section_id']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionId"); hiddenField.setAttribute("value", info['section_id']); form.appendChild(hiddenField); }; if (info['book_id']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookId"); hiddenField.setAttribute("value", info['book_id']); form.appendChild(hiddenField); }; if (info['section_name']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "sectionName"); hiddenField.setAttribute("value", info['section_name']); form.appendChild(hiddenField); }; if (info['book_name']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "bookName"); hiddenField.setAttribute("value", info['book_name']); form.appendChild(hiddenField); }; if (info['current_fileId']) { - var hiddenField = document.createElement("input"); + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "currentFileId"); hiddenField.setAttribute("value", info['current_fileId']); form.appendChild(hiddenField); }; } - if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - } else { + document.body.appendChild(form); form.submit(); document.body.removeChild(form); - //form.submit(); // works under IE and Chrome, but not FF - } + } function configTagsInTopic(topic_id) { var form = document.createElement("form"); - + form.setAttribute("method", "post"); form.setAttribute("action", "./ConfigTagsInTopic"); // hand to controller form.setAttribute("target", "_blank"); - - var hiddenField = document.createElement("input"); + + var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", "topic"); hiddenField.setAttribute("value", topic_id); form.appendChild(hiddenField); _postForContineTagging(form); - - + + +} + +var toolPanelPosition = "right"; + +function moveToolPanel(toWhere){ + + if(toolPanelPosition == toWhere) return; + + var oldAreaId, newAreaId, oldBtn, newBtn; + if(toWhere == "left"){ + oldAreaId = 'right-tool-bar-area'; + newAreaId = 'left-tool-bar-area'; + oldBtn = 'toLeft'; + newBtn = 'toRight'; + } + else{ + oldAreaId = 'left-tool-bar-area'; + newAreaId = 'right-tool-bar-area'; + oldBtn = 'toRight'; + newBtn = 'toLeft'; + } + + var oldParent = document.getElementById(oldAreaId), + newParent = document.getElementById(newAreaId); + + while (oldParent.hasChildNodes()){ + newParent.appendChild(oldParent.firstChild); + } + + newParent.style.display = "block"; + oldParent.style.display = "none"; + + document.getElementById(newBtn).firstChild.style.display = "block"; + document.getElementById(oldBtn).firstChild.style.display = "none"; + + toolPanelPosition = toWhere; + } $(document).on("change", '#smartRegexPopUpSelectWord', function (e) { @@ -1367,7 +1409,7 @@ for (var i = 0; i < wordlistArray.length; i++) { var wordlistValue = wordlistArray[i]; // wordlistValue is array(id, name, listString) - if ($('#smartRegexPopUpSelectWord').val() == wordlistValue[0]) { + if ($('#smartRegexPopUpSelectWord').val() == wordlistValue[0]) { var textarea_text = $('#smartRegexPopUpText').val(); // insert selected wordlist into textarea at cursor position var cursorPosition = $('#smartRegexPopUpText').prop("selectionStart"); @@ -1381,43 +1423,29 @@ } }); - </script> - -<!-- -<fieldset class="info-board"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#info_board">Information <span class="caret"></span></h5></legend> - <div id="info_board" class="collapse in"> - <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div> - <div class="bg-warning"> <?php echo $messages['warning']; ?> - <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button> - </div> - <div class="bg-info"> <?php echo $messages['info']; ?> </div> - <div class="bg-default"> <?php echo $messages['debug']; ?> </div> - </div> -</fieldset> - ---> <div id="loading">...</div> -<div class="info-board"> - <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div> - <div class="bg-warning"> <?php echo $messages['warning']; ?> - <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button> +<div class="container-fluid info-board"> + <div class="row"> + <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div> + <div class="bg-warning"> <?php echo $messages['warning']; ?> + <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button> + </div> + <div class="bg-info"> <?php echo $messages['info']; ?> </div> </div> - <div class="bg-info"> <?php echo $messages['info']; ?> </div> - <!-- - <div class="bg-default"> <?php echo $messages['debug']; ?> </div> - --> </div> -<table border="1" style="margin:10 30 30 30; width:100%; max-width:1270px; min-width:680px"> - <tr> - <td style="padding:0 5 0 5; margin: 0 5 0 5;"> - <div id="editable-area" class="area" style="max-width:980px; min-width:400px"><?php echo $stringInput; ?></div> - </td> - <td valign="top" style="min-width:280px; padding:0 5 0 5; margin:0 5 0 5;"> +<div class="container-fluid"> + <div class="row"> + <div id="left-tool-bar-area" class="col-md-3 tool-col" style="display:none"></div> + <div class="col-md-9 content-col"> + <div id="editable-area-wraper"> + <div id="editable-area" class="area" contenteditable="false"><?php echo $stringInput; ?></div> + </div> + </div> + <div id="right-tool-bar-area" class="col-md-3 tool-col"> <div id="popups" style="position:absolute; width:300px; "> <div id="load_topic_div" class="popup-topic popup-frame"></div> <div id="new_topic_div" class="popup-newtopic popup-frame"> @@ -1441,7 +1469,7 @@ <input type="text" class="form-control" id="newTopicNamePi" placeholder="e.g. wu chan"> </div> </div> - + <h4 class="text-info">Define the topic tag for the new topic:</h4> <div class="form-group form-group-sm"> @@ -1471,13 +1499,13 @@ <div id="load_regex_div" class="popup-loadregex popup-frame"></div> <div id="regex_generator" class="popup-frame"> <h3>Gen Regex</h3> - <div>Pattern 1: + <div>Pattern 1: <div id="regex_pattern1" class="bg-info"></div> </div> <div>Pattern 2: <div id="regex_pattern2" class="bg-info"></div> </div> - <div>Suggested Regex: + <div>Suggested Regex: <div id="generated_regex" class="bg-success"></div> </div> <button onclick="genRegexAddToSmartRegex()" class="btn btn-info">Add it to SmartRegex</button> @@ -1485,8 +1513,10 @@ <div id="regex_generator_error_msg" class="bg-white"></div> </div> <div id="smartRegexPopUpDiv" class="popup-frame"> - Name: <input id="smartRegexPopUpName"></input><br><br> - Word List: + + Name: <input id="smartRegexPopUpName"></input> + <button onclick="replaceSmartClose()" class="btn btn-sm btn-default close-btn" ><span aria-hidden="true">×</span></button><br><br> + Word List: <select id="smartRegexPopUpSelectWord"> <option value="NULL" selected>無</option> <?php @@ -1496,11 +1526,11 @@ ?> </select> <!-- edit wordlist --> - <button onclick="window.open('./EditWordlist')" class="btn btn-default">Edit WordList</button></br> + <button onclick="window.open('./EditWordlist')" class="btn btn-sm btn-default">Edit WordList</button></br> <br> OR (USE "|" TO SEPARATE WORDS):<br> - <TEXTAREA id="smartRegexPopUpText" COLS=30 ROWS=4></TEXTAREA><br><br> + <TEXTAREA id="smartRegexPopUpText" COLS=59 ROWS=4 style="width:100%;"></TEXTAREA><br><br> Tag: <select id="smartRegexPopUpSelectTag"> <?php @@ -1510,132 +1540,162 @@ echo "<option value=\"title\">Title</option>\n"; ?> <option value="NOTAG">不標記</option> - </select><br> - <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-info">Add</button> - <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-success">Edit/Update</button> - <button id="smartRegexPopUpDel" onclick="replaceSmartDel()" class="btn btn-danger">Delete</button> - <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-default"><<</button> - <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-default">>></button> - <button onclick="replaceSmartClose()" class="btn btn-default" >Close</button> + </select><br><br> + <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-sm btn-default"><<</button> + <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-sm btn-info" style="display:none">Add</button> + <button id="smartRegexPopUpDel" onclick="replaceSmartRemove()" class="btn btn-sm btn-danger">Remove</button> + <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-sm btn-success">Edit/Update</button> + <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-sm btn-default">>></button> </div> </div> - + <div id="toLeft" onclick="moveToolPanel('left')"><span class="glyphicon glyphicon-arrow-left switch-btn"></span></div> <div id="follow-scroll"> - <form action="javascript:void(0);"> - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_topic"> Topic and Tags: <span class="caret"></span></h5></legend> - <div id="tool_topic" class="collapse in"> - <div> Current topic is: - <?php echo $topic_name['name_en']; ?> (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>) - <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Change Topic</button> - <!-- - <button onclick="createTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Create a New Topic</button> - --> - </div> - - <div>Main tag: <?php echo $topic_tag_ch;?> - <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p> - </div> - <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-default btn-block">Edit Tag List</button> - <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Select Existing Tags (testing)</button> - + <div class="panel panel-default" style="margin-bottom: 10px;"> + <div class="panel-body" style="padding:5px;"> + Current topic is : <?php echo $topic_name['name_en']; ?> (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>) + </div> + </div> + + <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="headingOne"> + <h4 class="panel-title"> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Change Topic and Tags: <span class="caret"></span> + </a> + </h4> + </div> + <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div class="panel-body"> + <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-info btn-block">Change Topic</button> + <br> + + <div>Main tag: <?php echo $topic_tag_ch;?> + <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p> + </div> + <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-primary btn-block">Edit Tag List</button> + <!-- <button onclick="configTagsInTopic(< ?php echo $default_topic_id;? >)" class="btn btn-default btn-block">Select Existing Tags (testing)</button> --> + </div> + </div> + </div> + + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="headingTwo"> + <h4 class="panel-title"> + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + Edit, Tag, Save text : <span class="caret"></span> + </a> + </h4> + </div> + <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> + <div class="panel-body"> + + <!-- <button onclick="editText()" id="editTextId" class="btn btn-default">Edit text</button> --> + <div class="btn-group" data-toggle="buttons"> + <label class="btn btn-default btn-sm active" onclick="switchToTaggingMode(this, 'tagging')"> + <input type="radio" name="EditMode" value="tagging" autocomplete="off" checked> Tagging + </label> + <label class="btn btn-default btn-sm" onclick="switchToEditingMode(this, 'editing')"> + <input type="radio" name="EditMode" value="editing" autocomplete="off"> Editing + </label> </div> - </fieldset> - <!-- - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_tag"> Tag: <span class="caret"></span></h5></legend> - <div id="tool_tag" class="collapse in"> - <div>The topic tag is: <?php echo $topic_tag_ch;?> - <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p> - </div> - <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-default btn-block">Edit Tag List</button> - <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Select Existing Tags</button> - - </div> - </fieldset> - --> - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_edit"> Edit, Save, and Export: <span class="caret"></span></h5></legend> - <!--<button onclick="cleanUpTextArea()" style="height: 30px; width: 220px">Reform the text</button></br>--> - <!-- save text in local. replaced by saveTextToLGService, which is also saving on copy in local in development stage --> - <!-- - <button onclick="saveText(<?php echo $section_id; ?>)" style="height: 30px; width: 220px">Save the text</button></br> - --> - <div class="collapse in" id="tool_edit"> - <button onclick="editText()" id="editTextId" class="btn btn-default">Edit text</button> - <button onclick="Undo()" class="btn btn-default" id="buttonUndo" disabled="true">Undo changes</button> - - <button onclick="saveTextToLGService()" id="save_text_to_LGService_id" class="btn btn-default btn-block">Save to LGService</button> - <button onclick="exportAll(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Export All</button> - Page: <input type="text" size="5" id="exportPageStart">to<input type="text" size="5" id="exportPageEnd"> - <button onclick="exportPage(<?php echo $default_topic_id;?>)" class="btn btn-default btn-sm">Export</button></br> - </div> + <button onclick="Undo()" class="btn btn-sm btn-default" id="buttonUndo" disabled="true" style="float:right;">Undo changes</button> - - </fieldset> - - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_regex"> Tag by <i><b>Smart Regex</b></i>©:<span class="caret"></span></h5></legend> - <!-- rename: "Replace By <i><b>Smart Regex</b></i>©:" to "Tag by Smart Regex" --> + <div id="smart-regex-area" class="sub-group-area"><span><i><b>Smart Regex</b></i>©</span> + <div id="smartRegexShowDiv"></div> + <!-- <button onclick="smartRegexNew()" class="btn-lg">Add Regex Group</button></br> --> + <button onclick="smartRegexNew()" id="smart_regex_new_id" class="btn btn-sm btn-info">Compose</button> + <button onclick="smartRegexLoad(<?php echo $default_topic_id; ?>)" class="btn btn-sm btn-info">Load</button> + <button onclick="smartRegexSave(<?php echo $default_topic_id; ?>)" class="btn btn-sm btn-default" style="float:right;">Save</button> + <button onclick="smartRegexEmpty()" class="btn btn-sm btn-danger" style="float:right;margin-right:4px">Clear</button> + </div> + <div> + <div id="tag-function-area" class="sub-group-area"> + Tag only for this range: + <input type="text" size="5" id="regexPageStart"> to <input type="text" size="5" id="regexPageEnd"><br><br> - <div id="tool_regex" class="collapse in"> - <div id="smartRegexShowDiv"></div><br> - <!-- <button onclick="smartRegexNew()" class="btn-lg">Add Regex Group</button></br> + <div> + <label> + <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="default" checked> Default + </label> + </div> + <div> + <label> + <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="with_line_break"> With line break + </label> + </div> + <!-- + <div> + <label> + <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="space_within_block"> Allow space within block + </label> + </div> --> - <button onclick="smartRegexNew()" id="smart_regex_new_id" class="btn btn-default btn-block">Compile a new Regex</button> - <!-- rename "Search by Patterns (Smart Regex)" to "Compile a new Regex"--> - - <button onclick="smartRegexLoad(<?php echo $default_topic_id; ?>)" class="btn btn-default">Load</button> - <button onclick="smartRegexSave(<?php echo $default_topic_id; ?>)" class="btn btn-default">Save</button> - <button onclick="smartRegexEmpty()" class="btn btn-default">Clear</button></br></br> - Tag only for this range: </br> - <input type="text" size="5" id="regexPageStart">to<input type="text" size="5" id="regexPageEnd"></br> - <button onclick="replaceSmartRun()" class="btn btn-default">Tag</button> - <button onclick="replaceSmartRunWithBr()" class="btn btn-default">Tag (with line break)</button> - <!-- <button onclick="replaceSmartRunSpace()" class="btn-lg">Run(Allow space between Group)</button></br> - --> - <button onclick="replaceSmartRunSpace()" class="btn btn-default btn-block">Tag (Allow space within block)</button></br> + <div style="text-align:right"><button onclick="startToTag()" class="btn btn-primary">Tag</button></div> + </div> + <button onclick="saveTextToLGService()" id="save_text_to_LGService_id" class="btn btn-primary btn-block" style="margin-top:10px;">Save text</button> - <!-- developing...--> - <!-- - <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default btn-block btn-xs">Open GenRegex (developing...)</button></br> - --> - </div> - </fieldset> - + </div> + </div> + </div> - <?php - if ($default_topic_id == 1) { - ?> - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_rule"> Tag by rule: <span class="caret"></span></h5></legend> - <div id="tool_rule" class="collapse out"> - <button onclick="tagNameWithLastName()" class="btn btn-default">Tag Word Begin With Surname</button></br> - <button onclick="tagNameWithLastName2()" class="btn btn-default btn-sm">Tag Word Begin With</button> <input type="text" size="2" id="surname"> - </div> - <!--<button onclick="tagTime()" style="height: 30px; width: 220px">Tag Time</button></br>--> - <!--<button onclick="tagBiogAddr()" style="height: 30px; width: 220px">Tag BiogAddr</button></br>--> - </fieldset> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="headingThree"> + <h4 class="panel-title"> + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + Replace By <i><b>Regex</b></i>: <span class="caret"></span> + </a> + </h4> + </div> + <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> + <div class="panel-body"> + Range: <input type="text" size="5" id="regexPageStart2"> to <input type="text" size="5" id="regexPageEnd2"><br><br> + Regex: <input type="text" size="23" id="regexText"><br><br> + Replace: <input type="text" size="23" id="replaceText"><br><br> + <div style="text-align:right"><button onclick="replaceSmartRegex()" class="btn btn-primary btn-sm">Replace</button></div> + </div> + </div> + </div> + + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="headingFour"> + <h4 class="panel-title"> - <?php }?> - - - - <fieldset class="tool-frame"> - <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_replace_by"> Replace By <i><b>Regex</b></i>: <span class="caret"></span></h5></legend> - <div class="collapse out" id="tool_replace_by"> - Range: <input type="text" size="5" id="regexPageStart2">to<input type="text" size="5" id="regexPageEnd2"><br> - Regex: <input type="text" size="23" id="regexText"></br> - Replace: <input type="text" size="23" id="replaceText"><br> - <button onclick="replaceSmartRegex()" class="btn btn-default btn-sm">Replace!</button> - </div> - </fieldset> - </form> + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> + <!-- Tag by <i><b>Smart Regex</b></i>©:<span class="caret"></span> --> + Preview<span class="caret"></span> + </a> + </h4> + </div> + <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> + <div class="panel-body"> + + <div> + <label> + <input type="radio" name="export_mode" onclick="onExportModeChanged(this)" value="all" checked> All + </label> + </div> + <div> + <label> + <input type="radio" name="export_mode" onclick="onExportModeChanged(this)" value="pages"> + Page: <input type="text" size="5" id="exportPageStart"> to <input type="text" size="5" id="exportPageEnd"> + </div> + + <div style="text-align:right"><button onclick="startExport(<?php echo $default_topic_id;?>)" class="btn btn-primary btn-sm">Preview</button></div> + </div> + + </div> + </div> + + </div> + </div> - </td> - </tr> + <div id="toRight" onclick="moveToolPanel('right')"><span class="glyphicon glyphicon-arrow-right switch-btn" style="display:none"></span></div> + </div> -</table> + </div> + +</div>