Mercurial > hg > extraction-interface
diff views/Extractapp/EditTaglist.php @ 47:886f43b26ee2 extractapp
move/remove develop folder
| author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
|---|---|
| date | Tue, 17 Mar 2015 10:54:13 +0100 |
| parents | |
| children | 97c1e5102a22 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/views/Extractapp/EditTaglist.php Tue Mar 17 10:54:13 2015 +0100 @@ -0,0 +1,372 @@ +<?php +// --- 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>Topic Tag is "<?php echo $taglistArray[$topic_tag_id][1]; ?>" </h3> + +<table width="100%" 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) ?>'); + +function addTag( ) { + largestId++; + var row = tableMain.insertBefore(document.createElement("tr"), document.getElementById("trAddTag") ); + row.setAttribute("height","50"); + row.id = "tr"+largestId; + + 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; + + var newcolumn = document.createElement("td"); + newcolumn.id = "tdId"+id; + newcolumn.setAttribute("width","150"); + 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"); + 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"); + row.appendChild(newcolumn).innerHTML=tag; + + var newcolumn = document.createElement("td"); + newcolumn.setAttribute("width","150"); + if ( color=="Color") { + row.appendChild(newcolumn).innerHTML="Color"; + } else { + row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+id+"\"><div id=\"colorSelectorB"+id+"\" style=\"background-color: "+color+"\"></div></div>"; + } + + + if (id == topic_tag_id) { + // pass + } else { + + 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 { + 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; + /* + 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) { + alert("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; + /* + 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"); + }, + success: function (e) { + alert("Saved!"); + document.location.reload(true); + } + }).done(function(result) { + }); +} + +function DeleteTag( id ) { + $("#tr"+id).remove(); + $.ajax({ + url : './EditTaglist', + async : false, + type : 'POST', + data : 'func=DeleteTag'+'&id='+id+'&type=delete' + }).done(function(result) { + alert("Saved!"); + }); +} + + +$(document).on("click", "[name=tdName]", function () { + if ( $("#input"+this.id).length > 0 ) { + return; + } + var topic_tag_id = JSON.parse('<?php echo json_encode($topic_tag_id) ?>'); + if (this.id == "tdName"+topic_tag_id) { + 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) { + 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"); + 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>