Mercurial > hg > extraction-interface

comparison views/Extractapp/EditTaglist.php @ 47:886f43b26ee2 extractapp

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move/remove develop folder
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Tue, 17 Mar 2015 10:54:13 +0100
parents
children 97c1e5102a22
comparison
equal deleted inserted replaced
46:b3ca5d2b4d3f 47:886f43b26ee2
1 <?php
2 // --- initialize ---
3 $taglistArray = $viewmodel['taglistArray'];
4 $topic_id = $viewmodel['topic_id'];
5 $largestId = $viewmodel['largest_id'];
6
7 $topic_tag_id = $viewmodel['topic_tag_id'];
8
9 ?>
10
11 <html>
12 <head>
13 <title></title>
14 <link rel="stylesheet" href="../css/colorpicker.css" type="text/css" />
15 <script type="text/javascript" src="../js/colorpicker.js"></script>
16 <script type="text/javascript" src="../js/eye.js"></script>
17 <script type="text/javascript" src="../js/utils.js"></script>
18 <script type="text/javascript" src="../js/layout.js?ver=1.0.2"></script>
19 </head>
20
21 <body>
22
23 <h3>Topic Tag is "<?php echo $taglistArray[$topic_tag_id][1]; ?>" </h3>
24
25 <table width="100%" border="1" id="tableMain"> </table>
26
27
28 <script type="text/javascript">
29
30 // var largestId = 0;
31 var largestId = JSON.parse('<?php echo json_encode($largestId) ?>');
32 var topic_tag_id = JSON.parse('<?php echo json_encode($topic_tag_id) ?>');
33
34 function addTag( ) {
35 largestId++;
36 var row = tableMain.insertBefore(document.createElement("tr"), document.getElementById("trAddTag") );
37 row.setAttribute("height","50");
38 row.id = "tr"+largestId;
39
40 var newcolumn = document.createElement("td");
41 newcolumn.id = "tdId"+largestId;
42 newcolumn.setAttribute("width","150");
43 row.appendChild(newcolumn).innerHTML=largestId;
44
45 var newcolumn = document.createElement("td");
46 newcolumn.setAttribute("width","150");
47 newcolumn.id = "tdName"+largestId;
48 newcolumn.setAttribute("idnum",largestId);
49 newcolumn.setAttribute("name","tdName");
50 row.appendChild(newcolumn).innerHTML="";
51
52 var newcolumn = document.createElement("td");
53 newcolumn.setAttribute("width","150");
54 newcolumn.id = "tdTag"+largestId;
55 newcolumn.setAttribute("idnum",largestId);
56 newcolumn.setAttribute("name","tdTag");
57 row.appendChild(newcolumn).innerHTML="";
58
59 var newcolumn = document.createElement("td");
60 newcolumn.setAttribute("width","150");
61 row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+largestId+"\"><div id=\"colorSelectorB"+largestId+"\" style=\"background-color: #000000\"></div></div>";
62
63 var newcolumn = document.createElement("td");
64 newcolumn.setAttribute("width","50");
65 row.appendChild(newcolumn).innerHTML="<button onclick=\"newTag("+largestId+")\">Save</button>";
66
67 var newcolumn = document.createElement("td");
68 newcolumn.setAttribute("width","50");
69 row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+largestId+")\">Delete</button>";
70
71 $('#colorSelector'+largestId).ColorPicker({
72 color: '#000000',
73 onShow: function (colpkr) {
74 $(colpkr).fadeIn(500);
75 return false;
76 },
77 onHide: function (colpkr) {
78 $(colpkr).fadeOut(500);
79 return false;
80 },
81 onChange: function (hsb, hex, rgb) {
82 $('#colorSelector'+largestId+' div').css('backgroundColor', '#' + hex);
83 }
84 });
85 /*
86 // addRule doesn't work in FF
87 document.styleSheets[0].addRule("#colorSelector"+largestId, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);")
88 document.styleSheets[0].addRule("#colorSelector"+largestId+" div", "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;")
89 */
90
91 // insertRule works in IE9, FF, Saf, Chrome, Opera
92 var x = document.styleSheets[0];
93 var selector1 = "#colorSelector"+largestId;
94 var selector2 = "#colorSelector"+largestId+" div";
95
96 if (x.insertRule) {
97 x.insertRule(selector1+' {position:relative; width:36px; height:36px; background:url(../images/select.png);}', x.cssRules.length);
98 x.insertRule(selector2+' {position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background:url(../images/select.png) center;}', x.cssRules.length);
99
100 } else if (x.addRule) {
101 x.addRule(selector1, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);");
102 x.addRule(selector2, "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;");
103 }
104
105
106 }
107
108
109 function addNode( id, name, tag, color ) {
110 // if ( parseInt(id) > largestId ) largestId=parseInt(id);
111
112 var tableMain=document.getElementById("tableMain");
113
114 if ( id == "AddTag" ) {
115 var row = tableMain.appendChild(document.createElement("tr"));
116 row.id = "trAddTag";
117
118 var newcolumn = document.createElement("td");
119 newcolumn.setAttribute("width","150");
120 newcolumn.setAttribute("colspan","6");
121 newcolumn.setAttribute("align","center");
122 row.appendChild(newcolumn).innerHTML="<button onclick=\"addTag()\" style=\"height: 50px; width: 300px\">Add New Tag</button>";
123
124 return 0;
125 }
126
127 var row = tableMain.appendChild(document.createElement("tr"));
128 row.setAttribute("height","50");
129 row.id = "tr"+id;
130
131 var newcolumn = document.createElement("td");
132 newcolumn.id = "tdId"+id;
133 newcolumn.setAttribute("width","150");
134 row.appendChild(newcolumn).innerHTML=id;
135
136 var newcolumn = document.createElement("td");
137 newcolumn.setAttribute("width","150");
138 newcolumn.id = "tdName"+id;
139 newcolumn.setAttribute("idnum",id);
140 newcolumn.setAttribute("name","tdName");
141 row.appendChild(newcolumn).innerHTML=name;
142
143 var newcolumn = document.createElement("td");
144 newcolumn.setAttribute("width","150");
145 newcolumn.id = "tdTag"+id;
146 newcolumn.setAttribute("idnum",id);
147 newcolumn.setAttribute("name","tdTag");
148 row.appendChild(newcolumn).innerHTML=tag;
149
150 var newcolumn = document.createElement("td");
151 newcolumn.setAttribute("width","150");
152 if ( color=="Color") {
153 row.appendChild(newcolumn).innerHTML="Color";
154 } else {
155 row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+id+"\"><div id=\"colorSelectorB"+id+"\" style=\"background-color: "+color+"\"></div></div>";
156 }
157
158
159 if (id == topic_tag_id) {
160 // pass
161 } else {
162
163 var newcolumn = document.createElement("td");
164 newcolumn.setAttribute("width","50");
165 if ( color=="Color") {
166 row.appendChild(newcolumn).innerHTML="Save";
167 } else {
168 row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+id+", 'update')\">Save</button>";
169 }
170
171
172 var newcolumn = document.createElement("td");
173 newcolumn.setAttribute("width","50");
174 if ( color=="Color") {
175 row.appendChild(newcolumn).innerHTML="Delete";
176 } else {
177 row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+id+")\">Delete</button>";
178 }
179
180
181 $('#colorSelector'+id).ColorPicker({
182 color: color,
183 onShow: function (colpkr) {
184 $(colpkr).fadeIn(500);
185 return false;
186 },
187 onHide: function (colpkr) {
188 $(colpkr).fadeOut(500);
189 return false;
190 },
191 onChange: function (hsb, hex, rgb) {
192 $('#colorSelector'+id+' div').css('backgroundColor', '#' + hex);
193 }
194 });
195 }
196
197 // insertRule works in IE9, FF, Saf, Chrome, Opera
198 var x = document.styleSheets[0];
199 var selector1 = "#colorSelector"+id;
200 var selector2 = "#colorSelector"+id+" div";
201
202 if (x.insertRule) {
203 x.insertRule(selector1+' {position:relative; width:36px; height:36px; background:url(../images/select.png);}', x.cssRules.length);
204 x.insertRule(selector2+' {position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background:url(../images/select.png) center;}', x.cssRules.length);
205
206 } else if (x.addRule) {
207 x.addRule(selector1, "position: relative; width: 36px; height: 36px; background: url(../images/select.png);");
208 x.addRule(selector2, "position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center;");
209 }
210
211 }
212
213 function newTag( id ) {
214
215 var elid = document.getElementById("tdId"+id).textContent;
216 var elname = document.getElementById("tdName"+id).textContent;
217 var eltag = document.getElementById("tdTag"+id).textContent;
218 /*
219 var elid = document.getElementById("tdId"+id).innerHTML;
220 var elname = document.getElementById("tdName"+id).innerHTML;
221 var eltag = document.getElementById("tdTag"+id).innerHTML;
222 */
223 var elcolor = $("#colorSelectorB"+id).css("background-color");
224
225 console.log("elid="+elid+', elname='+elname+', eltag='+eltag);
226
227 var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>');
228
229 $.ajax({
230 url : './EditTaglist',
231 async : false,
232 type : 'POST',
233 data : 'func=NewTagElement'+'&id='+elid+'&name='+elname+'&tag='+eltag+'&color='+elcolor+'&topic_id='+topic_id,
234 error: function (e) {
235 console.log("error when newTag");
236 },
237 success: function (e) {
238 alert("Saved!");
239 document.location.reload(true);
240 }
241 }).done(function(result) {
242 });
243 }
244
245 function saveTag( id) {
246
247 var elid = document.getElementById("tdId"+id).textContent;
248 var elname = document.getElementById("tdName"+id).textContent;
249 var eltag = document.getElementById("tdTag"+id).textContent;
250 /*
251 var elid = document.getElementById("tdId"+id).innerHTML;
252 var elname = document.getElementById("tdName"+id).innerHTML;
253 var eltag = document.getElementById("tdTag"+id).innerHTML;
254 */
255
256 var elcolor = $("#colorSelectorB"+id).css("background-color");
257
258 console.log(elid+','+elname+','+eltag+','+elcolor);
259
260 var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>');
261
262 $.ajax({
263 url : './EditTaglist',
264 async : false,
265 type : 'POST',
266 data : 'func=SaveTagElement'+'&id='+elid+'&name='+elname+'&tag='+eltag+'&color='+elcolor+'&topic_id='+topic_id,
267 error: function (e) {
268 console.log("error when saving Tag");
269 },
270 success: function (e) {
271 alert("Saved!");
272 document.location.reload(true);
273 }
274 }).done(function(result) {
275 });
276 }
277
278 function DeleteTag( id ) {
279 $("#tr"+id).remove();
280 $.ajax({
281 url : './EditTaglist',
282 async : false,
283 type : 'POST',
284 data : 'func=DeleteTag'+'&id='+id+'&type=delete'
285 }).done(function(result) {
286 alert("Saved!");
287 });
288 }
289
290
291 $(document).on("click", "[name=tdName]", function () {
292 if ( $("#input"+this.id).length > 0 ) {
293 return;
294 }
295 var topic_tag_id = JSON.parse('<?php echo json_encode($topic_tag_id) ?>');
296 if (this.id == "tdName"+topic_tag_id) {
297 return;
298 }
299 //var startPageValue = this.innerHTML;
300 var startPageValue = this.textContent;
301 this.innerHTML="";
302 var newTextBox = document.createElement("input");
303 newTextBox.id = "input"+this.id;
304 newTextBox.setAttribute("name","inputName");
305 newTextBox.setAttribute("onfocus","this.select()");
306 newTextBox.setAttribute("size","20");
307 this.appendChild(newTextBox).value=startPageValue;
308
309 $("#input"+this.id).focus();
310 } );
311
312 $(document).on("click", "[name=tdTag]", function () {
313 if ( $("#input"+this.id).length > 0 ) {
314 return;
315 }
316 if (this.id == "tdTag"+topic_tag_id) {
317 return;
318 }
319 //var startPageValue = this.innerHTML;
320 var startPageValue = this.textContent;
321 this.innerHTML="";
322 var newTextBox = document.createElement("input");
323 newTextBox.id = "input"+this.id;
324 newTextBox.setAttribute("name","inputTag");
325 newTextBox.setAttribute("onfocus","this.select()");
326 newTextBox.setAttribute("size","20");
327 this.appendChild(newTextBox).value=startPageValue;
328
329 $("#input"+this.id).focus();
330 } );
331
332 $(document).on("keypress", "[name=tdName]", function () {
333 if (event.keyCode == 13) {
334 $(this).focusout();
335 }
336 });
337
338 $(document).on("keypress", "[name=tdTag]", function () {
339 if (event.keyCode == 13) {
340 $(this).focusout();
341 }
342 });
343
344 $(document).on("focusout", "[name=tdName]", function () {
345 var value=$("#input"+this.id).val();
346 $(this).html($(this).html() + value);
347 $("#input"+this.id).remove();
348 });
349
350 $(document).on("focusout", "[name=tdTag]", function () {
351 var value=$("#input"+this.id).val();
352 $(this).html($(this).html() + value);
353 $("#input"+this.id).remove();
354 });
355
356
357 <?php
358 // echo "addNode( \"".$topic_tag_id."\",\"".$taglistArray[$topic_tag_id][0]."\",\"".$taglistArray[$topic_tag_id][1]."\",\"".$taglistArray[$topic_tag_id][2]."\" );\n";
359 ?>
360
361 addNode( "AddTag","","","" );
362 addNode( "ID","Name","Tag","Color" );
363
364 <?php
365 foreach ( $taglistArray as $tagId => $tagArray ) {
366 echo "addNode( \"".$tagId."\",\"".$tagArray[0]."\",\"".$tagArray[1]."\",\"".$tagArray[2]."\" );\n";
367 }
368 ?>
369
370 </script>
371 </body>
372 </html>