Mercurial > hg > extraction-interface
comparison 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 |
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> |