Mercurial > hg > extraction-interface

view views/Extractapp/EditTaglist.php @ 95:9a29e9d28ece extractapp

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new: create new topic
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Wed, 11 Nov 2015 14:12:55 +0100
parents b0cecc104639
children c1bb174a22f3
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>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;
	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="-";	
	} 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();
	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!");
	});
}


$(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 || 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");
	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>