Mercurial > hg > extraction-interface
view views/Extractapp/EditTaglist.php @ 105:4eb62953af99 extractapp
bug fix: edittaglist tag
author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
---|---|
date | Fri, 05 Aug 2016 15:49:55 +0200 |
parents | e542b161d907 |
children | eebfc2d7e935 |
line wrap: on
line source
<?php /* * EditTaglist.php * This file is part of Extraction-interface. * * Extraction-interface is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * Extraction-interface is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with Extraction-interface. If not, see <http://www.gnu.org/licenses/>. */ /*! \file * This is the view for EditTaglist. * It shows the detail of taglist in the current topic in a new window. * User can edit values for each tag except the topic_tag. */ // --- initialize --- $taglistArray = $viewmodel['taglistArray']; $topic_id = $viewmodel['topic_id']; $largestId = $viewmodel['largest_id']; $topic_tag_id = $viewmodel['topic_tag_id']; ?> <html> <head> <title></title> <link rel="stylesheet" href="../css/colorpicker.css" type="text/css" /> <script type="text/javascript" src="../js/colorpicker.js"></script> <script type="text/javascript" src="../js/eye.js"></script> <script type="text/javascript" src="../js/utils.js"></script> <script type="text/javascript" src="../js/layout.js?ver=1.0.2"></script> </head> <body> <h3 width="90%" align="center">You are currently editing the tag list for topic: <?php echo $taglistArray[$topic_tag_id][1]; ?> </h3> <table width="90%" align="center" border="1" id="tableMain"> </table> <script type="text/javascript"> // var largestId = 0; var largestId = JSON.parse('<?php echo json_encode($largestId) ?>'); var topic_tag_id = JSON.parse('<?php echo json_encode($topic_tag_id) ?>'); $(document).on("keydown", ".englishOnly", function () { //$(".englishOnly").on( "keydown", function( event ) { console.log(".englishOnly"); var englishAlphabet =/[A-Za-z0-9]/g; var key = String.fromCharCode(event.which); // --- key code: --- // space: 32, delete: 8, enter: 13, tab: 9 // [a-z]: 65-91 // [0-9]: 48-57 // esc: 27 // shift, ctr, alt: 16, 17, 18, 20 // cmd: 91 // -: 189 if (event.keyCode == 8 || event.keyCode == 9 || (event.keyCode >= 16 && event.keyCode <= 20) || event.keyCode == 27 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 91 || event.keyCode == 189 || englishAlphabet.test(key)) { return true; } alert("Please type in (lowercase) English characters."); $(this).val(""); return false; }); window.onbeforeunload = function() { if (getCookie() == "Saved") { setCookie("reload"); } else { setCookie(""); } }; function addTag() { largestId++; var row = tableMain.insertBefore(document.createElement("tr"), document.getElementById("trAddTag") ); row.setAttribute("height","50"); row.id = "tr"+largestId; row.setAttribute("class", "bg-warning"); var newcolumn = document.createElement("td"); newcolumn.id = "tdId"+largestId; newcolumn.setAttribute("width","150"); row.appendChild(newcolumn).innerHTML=largestId; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); newcolumn.id = "tdName"+largestId; newcolumn.setAttribute("idnum",largestId); newcolumn.setAttribute("name","tdName"); row.appendChild(newcolumn).innerHTML=""; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); newcolumn.id = "tdTag"+largestId; newcolumn.setAttribute("idnum",largestId); newcolumn.setAttribute("name","tdTag"); row.appendChild(newcolumn).innerHTML=""; // --- var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+largestId+"\"><div id=\"colorSelectorB"+largestId+"\" style=\"background-color: #000000\"></div></div>"; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","50"); row.appendChild(newcolumn).innerHTML="<button onclick=\"newTag("+largestId+")\">Save</button>"; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","50"); row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+largestId+")\">Delete</button>"; $('#colorSelector'+largestId).ColorPicker({ color: '#000000', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#colorSelector'+largestId+' div').css('backgroundColor', '#' + hex); } }); /* // addRule doesn't work in FF document.styleSheets[0].addRule("#colorSelector"+largestId, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);") document.styleSheets[0].addRule("#colorSelector"+largestId+" div", "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;") */ // insertRule works in IE9, FF, Saf, Chrome, Opera var x = document.styleSheets[0]; var selector1 = "#colorSelector"+largestId; var selector2 = "#colorSelector"+largestId+" div"; if (x.insertRule) { x.insertRule(selector1+' {position:relative; width:36px; height:36px; background:url(../images/select.png);}', x.cssRules.length); x.insertRule(selector2+' {position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background:url(../images/select.png) center;}', x.cssRules.length); } else if (x.addRule) { x.addRule(selector1, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);"); x.addRule(selector2, "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;"); } } function addNode( id, name, tag, color ) { // if ( parseInt(id) > largestId ) largestId=parseInt(id); var tableMain=document.getElementById("tableMain"); if ( id == "AddTag" ) { var row = tableMain.appendChild(document.createElement("tr")); row.id = "trAddTag"; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); newcolumn.setAttribute("colspan","6"); newcolumn.setAttribute("align","center"); row.appendChild(newcolumn).innerHTML="<button onclick=\"addTag()\" style=\"height: 50px; width: 300px\">Add New Tag</button>"; return 0; } var row = tableMain.appendChild(document.createElement("tr")); row.setAttribute("height","50"); row.id = "tr"+id; if (id == "ID") { row.setAttribute("class", "bg-info"); } var newcolumn = document.createElement("td"); newcolumn.id = "tdId"+id; newcolumn.setAttribute("width","150"); newcolumn.setAttribute("class","text-muted"); row.appendChild(newcolumn).innerHTML=id; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); newcolumn.id = "tdName"+id; newcolumn.setAttribute("idnum",id); newcolumn.setAttribute("name","tdName"); if (id != "ID" && id != topic_tag_id) { newcolumn.setAttribute("class","editable"); } row.appendChild(newcolumn).innerHTML=name; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); newcolumn.id = "tdTag"+id; newcolumn.setAttribute("idnum",id); newcolumn.setAttribute("name","tdTag"); if (id != "ID" && id != topic_tag_id) { newcolumn.setAttribute("class","editable"); } row.appendChild(newcolumn).innerHTML=tag; var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","150"); if ( color=="Color") { row.appendChild(newcolumn).innerHTML="Color"; } else { newcolumn.setAttribute("class","editable"); row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+id+"\"><div id=\"colorSelectorB"+id+"\" style=\"background-color: "+color+"\"></div></div>"; } var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","50"); if ( color=="Color") { row.appendChild(newcolumn).innerHTML="Save"; } else { row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+id+", 'update')\">Save</button>"; } var newcolumn = document.createElement("td"); newcolumn.setAttribute("width","50"); if ( color=="Color") { row.appendChild(newcolumn).innerHTML="Delete"; } else if (id == topic_tag_id) { row.appendChild(newcolumn).innerHTML="<b>(Main tag)</b>"; } else { row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+id+")\">Delete</button>"; } $('#colorSelector'+id).ColorPicker({ color: color, onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#colorSelector'+id+' div').css('backgroundColor', '#' + hex); } }); // insertRule works in IE9, FF, Saf, Chrome, Opera var x = document.styleSheets[0]; var selector1 = "#colorSelector"+id; var selector2 = "#colorSelector"+id+" div"; if (x.insertRule) { x.insertRule(selector1+' {position:relative; width:36px; height:36px; background:url(../images/select.png);}', x.cssRules.length); x.insertRule(selector2+' {position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background:url(../images/select.png) center;}', x.cssRules.length); } else if (x.addRule) { x.addRule(selector1, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);"); x.addRule(selector2, "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;"); } } function newTag( id ) { var elid = document.getElementById("tdId"+id).textContent; var elname = document.getElementById("tdName"+id).textContent; var eltag = document.getElementById("tdTag"+id).textContent; eltag = eltag.toLowerCase(); if (elname == "" || eltag == "") { alert("Name and Tag cannot be empty."); return; } /* var elid = document.getElementById("tdId"+id).innerHTML; var elname = document.getElementById("tdName"+id).innerHTML; var eltag = document.getElementById("tdTag"+id).innerHTML; */ var elcolor = $("#colorSelectorB"+id).css("background-color"); console.log("elid="+elid+', elname='+elname+', eltag='+eltag); var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>'); $.ajax({ url : './EditTaglist', async : false, type : 'POST', data : 'func=NewTagElement'+'&id='+elid+'&name='+elname+'&tag='+eltag+'&color='+elcolor+'&topic_id='+topic_id, error: function (e) { console.log("error when newTag"); }, success: function (e) { console.log(e); if (e[0] == 0){ alert("Saving error when create new tag. Check if the tag already exists."); } else if (e[0] == 1) { alert("Saving error when update tag topic relation. Please contact IT for support."); } else { alert("Saved!"); setCookie("Saved"); //document.location.reload(true); } } }).done(function(result) { }); } function saveTag( id) { var elid = document.getElementById("tdId"+id).textContent; var elname = document.getElementById("tdName"+id).textContent; var eltag = document.getElementById("tdTag"+id).textContent; eltag = eltag.toLowerCase(); /* var elid = document.getElementById("tdId"+id).innerHTML; var elname = document.getElementById("tdName"+id).innerHTML; var eltag = document.getElementById("tdTag"+id).innerHTML; */ var elcolor = $("#colorSelectorB"+id).css("background-color"); console.log(elid+','+elname+','+eltag+','+elcolor); var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>'); $.ajax({ url : './EditTaglist', async : false, type : 'POST', data : 'func=SaveTagElement'+'&id='+elid+'&name='+elname+'&tag='+eltag+'&color='+elcolor+'&topic_id='+topic_id, error: function (e) { console.log("error when saving Tag"); alert("Saving failed. Please check if the tag already exists."); }, success: function (e) { alert("Saved!"); setCookie("Saved"); console.log("log success the saving.." + getCookie()); //document.location.reload(true); } }).done(function(result) { }); } function DeleteTag( id ) { $("#tr"+id).remove(); var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>'); $.ajax({ url : './EditTaglist', async : false, type : 'POST', data : 'func=DeleteTag'+'&id='+id+'&type=delete&topic_id='+topic_id }).done(function(result) { alert("Saved!"); setCookie("Saved"); }); } $(document).on("click", "[name=tdName]", function () { if ( $("#input"+this.id).length > 0 ) { return; } /* if (this.id == "tdName"+topic_tag_id || this.id == "tdNameID") { return; } */ //var startPageValue = this.innerHTML; var startPageValue = this.textContent; this.innerHTML=""; var newTextBox = document.createElement("input"); newTextBox.id = "input"+this.id; newTextBox.setAttribute("name","inputName"); newTextBox.setAttribute("onfocus","this.select()"); newTextBox.setAttribute("size","20"); this.appendChild(newTextBox).value=startPageValue; $("#input"+this.id).focus(); } ); $(document).on("click", "[name=tdTag]", function () { if ( $("#input"+this.id).length > 0 ) { return; } if (this.id == "tdTag"+topic_tag_id || this.id == "tdTagID") { return; } //var startPageValue = this.innerHTML; var startPageValue = this.textContent; this.innerHTML=""; var newTextBox = document.createElement("input"); newTextBox.id = "input"+this.id; newTextBox.setAttribute("name","inputTag"); newTextBox.setAttribute("onfocus","this.select()"); newTextBox.setAttribute("size","20"); newTextBox.setAttribute("class","englishOnly"); newTextBox.setAttribute("placeholder","Lowercase English characters only"); this.appendChild(newTextBox).value=startPageValue; $("#input"+this.id).focus(); } ); $(document).on("keypress", "[name=tdName]", function () { if (event.keyCode == 13) { $(this).focusout(); } }); $(document).on("keypress", "[name=tdTag]", function () { if (event.keyCode == 13) { $(this).focusout(); } }); $(document).on("focusout", "[name=tdName]", function () { var value=$("#input"+this.id).val(); $(this).html($(this).html() + value); $("#input"+this.id).remove(); }); $(document).on("focusout", "[name=tdTag]", function () { var value=$("#input"+this.id).val(); $(this).html($(this).html() + value); $("#input"+this.id).remove(); }); <?php // echo "addNode( \"".$topic_tag_id."\",\"".$taglistArray[$topic_tag_id][0]."\",\"".$taglistArray[$topic_tag_id][1]."\",\"".$taglistArray[$topic_tag_id][2]."\" );\n"; ?> addNode( "AddTag","","","" ); addNode( "ID","Name","Tag","Color" ); <?php foreach ( $taglistArray as $tagId => $tagArray ) { echo "addNode( \"".$tagId."\",\"".$tagArray[0]."\",\"".$tagArray[1]."\",\"".$tagArray[2]."\" );\n"; } ?> </script> </body> </html>