Mercurial > hg > extraction-interface
comparison interface/js/check_sections_details.js @ 0:b12c99b7c3f0
commit for previous development
author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
---|---|
date | Mon, 19 Jan 2015 17:13:49 +0100 |
parents | |
children | ef6d0c6a13d7 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:b12c99b7c3f0 |
---|---|
1 var saving=0; | |
2 $(document).ready(function(){ | |
3 initEntry(); | |
4 initName(); | |
5 initPage(); | |
6 initLevel(); | |
7 initDelete(); | |
8 initInsert(); | |
9 initConfigure(); | |
10 initSave(version); | |
11 $("#loading").hide(); | |
12 }); | |
13 window.onbeforeunload = function() { | |
14 if(saving==0){ | |
15 return 'Remember to save your revision.'; | |
16 }else{ | |
17 } | |
18 }; | |
19 function initEntry(){ | |
20 //create an empty entry by cloning the entry we have, so that when a new entry is to be inserted, we can just clone the empty entry | |
21 var clone=$(".entry").first().clone(); | |
22 clone.addClass("clone"); | |
23 if(clone.hasClass("overlapper")){clone.removeClass('overlapper');} | |
24 clone.children(".hiddenInfo").children(".id").html("-1"); | |
25 clone.children(".hiddenInfo").children(".splitFrom").html(""); | |
26 clone.children(".hiddenInfo").children(".sectionAfter").html(""); | |
27 clone.children(".name").html("<input type='text'>"); | |
28 clone.children(".page").children(".startPage").html("<input type='text'>"); | |
29 clone.children(".page").children(".endPage").html("<input type='text'>"); | |
30 clone.children(".editLevel").children("select").val(1); | |
31 clone.insertAfter("#searchResults"); | |
32 clone.hide(); | |
33 $(".entry").hover(function(){ | |
34 $(this).addClass("hovered"); | |
35 },function(){ | |
36 $(this).removeClass("hovered"); | |
37 }); | |
38 $(".hiddenInfo").hide(); | |
39 $(".entry").children().each(function(){ | |
40 $(this).addClass("cell");//for layout | |
41 }); | |
42 | |
43 //$("#bookContainer").droppable(); | |
44 //drag and drop | |
45 $(".entry").draggable(); | |
46 $(".entry").droppable({ | |
47 drop:function(e,ui){ | |
48 $(ui.draggable).insertAfter($(this)); | |
49 $(this).mouseleave(); | |
50 $(ui.draggable).mouseenter(); | |
51 } | |
52 }); | |
53 } | |
54 function dropHandler(e){//for debug | |
55 console.log("QQ"); | |
56 console.log($(event.target).children("hiddenInfo").html()); | |
57 } | |
58 function initName(){ | |
59 $(".entry .name").click(function(){ | |
60 var editMode=false; | |
61 var name=$(this).html(); | |
62 if($(this).children().length!=0){//if the name element has children, i.e. the input text | |
63 editMode=true; | |
64 } | |
65 if(!editMode){ | |
66 $(this).html("<input type='text' value='"+name+"'>"); | |
67 $(this).children("input").focus(); | |
68 } | |
69 }); | |
70 } | |
71 function initInsert(){ | |
72 var insert=$("<div/>").addClass("insert"); | |
73 var insertIcon=$("<div/>").addClass("insertIcon").html("+"); | |
74 var insertBefore=$("<input type='button'>").addClass("insertBefore").val("insert before"); | |
75 var insertAfter=$("<input type='button'>").addClass("insertAfter").val("insert after"); | |
76 var insertOption=$("<div/>").addClass("insertOption").append("insert a new section<br>").append(insertBefore).append(insertAfter); | |
77 insert.append(insertIcon); | |
78 //insert.append(insertBefore); | |
79 //insert.append(insertAfter); | |
80 $(".entry").append(insert); | |
81 insertOption.insertAfter("#searchResults"); | |
82 //$(".insertAfter").hide(); | |
83 //$(".insertBefore").hide(); | |
84 insertOption.hide(); | |
85 $(".insert").hover(function(){ | |
86 $(this).append($(".insertOption")); | |
87 $(".insertOption").show(); | |
88 //$(this).children(".insertAfter").show(); | |
89 //$(this).children(".insertBefore").show(); | |
90 },function(){ | |
91 $(".insertOption").hide(); | |
92 //$(this).children(".insertAfter").hide(); | |
93 //$(this).children(".insertBefore").hide(); | |
94 }); | |
95 $(".insertAfter").click(function(){ | |
96 addEntry($(this).parent().parent().parent(),1); | |
97 $(this).parent().hide(); | |
98 }); | |
99 $(".insertBefore").click(function(){ | |
100 addEntry($(this).parent().parent().parent(),0); | |
101 $(this).parent().hide(); | |
102 }); | |
103 } | |
104 function addEntry(obj,pos){//obj: the obj next to which we would like to add a new entry, pos: before the obj or after the obj | |
105 var clone=$(".clone").clone(true); | |
106 clone.removeClass("clone"); | |
107 clone.show(); | |
108 if(pos==0){ | |
109 clone.insertBefore(obj); | |
110 //$("<br>").insertAfter(clone); | |
111 }else{ | |
112 clone.insertAfter(obj); | |
113 //$("<br>").insertBefore(clone); | |
114 } | |
115 $("#searchResults .sequence").each(function(idx){ | |
116 $(this).html(idx+1); | |
117 }); | |
118 } | |
119 function initPage(){// init the column start page & end page, so that they turn into input boxes when clicked | |
120 //page | |
121 $("div.page").click(function(e){ | |
122 var startPage=$(this).children(".startPage").html(); | |
123 var endPage=$(this).children(".endPage").html(); | |
124 var editMode=false; | |
125 if($(this).children(".startPage").children().length!=0){ | |
126 editMode=true; | |
127 } | |
128 if(!editMode){ | |
129 $(this).children(".startPage").html("<input type='text' value='"+startPage+"'>"); | |
130 //$(this).children(".startPage").children("input").focus(); | |
131 $(this).children(".endPage").html("<input type='text' value='"+endPage+"'>"); | |
132 //$(this).children(".endPage").children("input").focus(); | |
133 $(e.target).children("input").focus(); | |
134 }else{ | |
135 //console.log($(this).parent().children(".editLevel").children().first().val()); | |
136 } | |
137 }); | |
138 | |
139 } | |
140 function initLevel(){//init the column level, turn it into select element | |
141 //level | |
142 var levelObj=$("<div/>").addClass("editLevel").append("<select/>"); | |
143 $(".entry").append(levelObj); | |
144 $(".editLevel select").append("<option value='1'>1evel 1</option>"); | |
145 $(".editLevel select").append("<option value='2'>1evel 2</option>"); | |
146 for(var i=1; i<=2; i++){ | |
147 $("div.level"+i+" .editLevel select").val(i); | |
148 } | |
149 | |
150 $(".editLevel select").change(function(){//add classes for text indent, to control layout style | |
151 var entryObj=$(this).parent().parent(); | |
152 var className=""; | |
153 if(entryObj.hasClass("level1")){ | |
154 className="level1"; | |
155 } | |
156 if(entryObj.hasClass("level2")){ | |
157 className="level2"; | |
158 } | |
159 entryObj.removeClass(className); | |
160 entryObj.addClass("level"+$(this).val()); | |
161 }); | |
162 } | |
163 function initDelete(){ | |
164 //delete | |
165 var deleteObj=$("<div/>").addClass("deleteEntry").append("<input type='button' value='delete' class='deleteButton'>"); | |
166 $(".entry").append(deleteObj); | |
167 $(".deleted .deleteEntry input").val("recover"); | |
168 var deleteRangeObj=$("<div/>").attr("id","deleteRange").append("delete entry <br>from "); | |
169 var deleteFromObj=$("<input type='text'>").addClass("deleteFrom"); | |
170 var deleteToObj=$("<input type='text'>").addClass("deleteTo"); | |
171 var deleteButtonObj=$("<input type='button'>").addClass("deleteButton").val("delete"); | |
172 deleteRangeObj.append(deleteFromObj).append(" to ").append(deleteToObj).append(deleteButtonObj); | |
173 deleteRangeObj.insertAfter($("#searchResults")); | |
174 deleteRangeObj.hide(); | |
175 $(".deleteEntry .deleteButton").click(function(){ | |
176 var entryObj=$(this).parent().parent(); | |
177 var buttonVal=$(this).val(); | |
178 if(buttonVal=="delete"){ | |
179 entryObj.addClass("deleted"); | |
180 $(this).val("recover"); | |
181 }else{ | |
182 entryObj.removeClass("deleted"); | |
183 $(this).val("delete"); | |
184 } | |
185 if($("#deleteRange").is(":visible")){ | |
186 deleteRangeObj.insertAfter($("#searchResults")); | |
187 $("#deleteRange").hide(); | |
188 } | |
189 }); | |
190 $(".deleteEntry").hover(function(){ | |
191 var entryObj=$(this).parent(); | |
192 var deleteRangeObj=$("#deleteRange"); | |
193 var buttonVal=$(this).children(".deleteButton").val(); | |
194 if(buttonVal=="delete"){ | |
195 $(this).append(deleteRangeObj); | |
196 deleteRangeObj.show(); | |
197 deleteRangeObj.children(".deleteFrom").val(entryObj.children(".sequence").html()); | |
198 } | |
199 },function(){ | |
200 var buttonVal=$(this).children(".deleteButton").val(); | |
201 var deleteRangeObj=$("#deleteRange"); | |
202 if(buttonVal=="delete"){ | |
203 deleteRangeObj.children("input:text").val(""); | |
204 deleteRangeObj.insertAfter($("#searchResults")); | |
205 deleteRangeObj.hide(); | |
206 } | |
207 | |
208 }); | |
209 $("#deleteRange .deleteButton").click(function(){ | |
210 var from=$("#deleteRange .deleteFrom").val().trim(); | |
211 var to=$("#deleteRange .deleteTo").val().trim(); | |
212 from=Number(from); | |
213 to=Number(to); | |
214 if(isNaN(from) || isNaN(to) || to <from){ | |
215 return; | |
216 } | |
217 var i; | |
218 for(i=from; i<=to; i++){ | |
219 if(i<1){i=1;} | |
220 if(i>$(".entry").size()){console.log($(".entry").size());break;} | |
221 var entryObj=$(".entry:eq("+(i-1)+")"); | |
222 var buttonObj=entryObj.children(".deleteEntry").children(".deleteButton"); | |
223 var buttonVal=buttonObj.val(); | |
224 if(buttonVal=="delete"){ | |
225 buttonObj.click(); | |
226 } | |
227 $("#deleteRange").children("input:text").val(""); | |
228 } | |
229 }); | |
230 }/* | |
231 function isNumeric(str){ | |
232 if(str.search(/\D/)>=0){ | |
233 console.log("not a number"); | |
234 return false; | |
235 }else{ | |
236 return true; | |
237 } | |
238 }*/ | |
239 function initConfigure(){ | |
240 var configureObj=$("<div/>").attr("id","configure"); | |
241 var hideDeletedObj=$("<div/>").addClass("hideDeleted").append("<input type='checkbox'>"); | |
242 hideDeletedObj.append("hide deleted sections"); | |
243 configureObj.append(hideDeletedObj); | |
244 $("#panel").append(configureObj); | |
245 $(".hideDeleted input:checkbox").change(function(){ | |
246 if($(this).is(":checked")){ | |
247 $(".deleted").hide(); | |
248 //$(".deleted").next().hide(); | |
249 }else{ | |
250 $(".deleted").show(); | |
251 //$(".deleted").next().show(); | |
252 } | |
253 }); | |
254 var href=window.location.href; | |
255 var reg=/hideDeletedChecked=[a-zA-Z]+/g; | |
256 var hidden=reg.exec(href); | |
257 if(hidden!=null){ | |
258 hidden=hidden[0].replace("hideDeletedChecked=",""); | |
259 if(hidden=="true"){ | |
260 //if(hidden.search("true")!=-1){ | |
261 $(".hideDeleted input:checkbox").attr("checked","true"); | |
262 $(".deleted").hide(); | |
263 } | |
264 } | |
265 } | |
266 function initSave(version){ | |
267 //save | |
268 var saveObj=$("<div/>").attr("id","saveBook"); | |
269 var labelObj=$("<div/>").addClass("label").html("Name of the editor:"); | |
270 saveObj.append(labelObj); | |
271 labelObj.append("<input type='text' class='editor'>"); | |
272 saveObj.append("<input type='button' value='save' class='save'>"); | |
273 $("#panel").append(saveObj); | |
274 $("#saveBook .save").click(function(){ | |
275 if($("#saveBook .editor").val()!=""){ | |
276 saveBook(version); | |
277 }else{ | |
278 alert("Please fill in the name of the editor."); | |
279 } | |
280 }); | |
281 var href=window.location.href; | |
282 var reg=/editor=[^\?^\&]+/g; | |
283 var editor=reg.exec(href); | |
284 if(editor!=null){ | |
285 editor=editor[0].replace("editor=",""); | |
286 editor=editor.replace("%20"," "); | |
287 $("#saveBook .editor").val(editor); | |
288 } | |
289 } | |
290 function saveBook(version){ | |
291 var sectionArray=collectSectionArray(); | |
292 var bookId=$(".entry").first().children(".hiddenInfo").children(".booksId").html(); | |
293 var editor=$("#saveBook .editor").val(); | |
294 var version=version; | |
295 $("#loading").show(); | |
296 $.post("edit_section_db.php", // use ajax to post to a php then wait for return | |
297 {//post data | |
298 command:"write", | |
299 bookId:bookId, | |
300 sectionArray:sectionArray, | |
301 version:version, | |
302 editor:editor | |
303 }, | |
304 function(data){//things to do after edit_section_db is done | |
305 if(data=="Succeeded."){ | |
306 saving=1; | |
307 var hideDeletedChecked=$(".hideDeleted input:checkbox").is(":checked");//get the previous setting for checked | |
308 var href=window.location.href; | |
309 var reg=/count=[0-9^\?]+/g; | |
310 var count=reg.exec(href); | |
311 reg = /[^\?]+/g; | |
312 href = reg.exec(href); | |
313 href=href+"?book_id="+bookId+"&"+count+"&hideDeletedChecked="+hideDeletedChecked+"&editor="+editor; | |
314 location.href=href; //refresh the page to load the sections saved in db | |
315 }else{ | |
316 | |
317 } | |
318 }, | |
319 "json" | |
320 ); | |
321 } | |
322 function collectSectionArray(){ | |
323 var sectionArray=new Array(); | |
324 var idx=0; | |
325 $("#searchResults .entry").each(function(){//go through all the entries wrapped in the element searchResults | |
326 var startPage,endPage,name,deleted="FALSE"; | |
327 if($(this).children(".page").children(".startPage").children().length!=0){ //if the value is a input box | |
328 startPage=$(this).children(".page").children(".startPage").children().first().val(); | |
329 endPage=$(this).children(".page").children(".endPage").children().first().val(); | |
330 }else{ // if the value is not an input box (has not been edited) | |
331 startPage=$(this).children(".page").children(".startPage").html(); | |
332 endPage=$(this).children(".page").children(".endPage").html(); | |
333 } | |
334 if($(this).children(".name").children().length!=0){ | |
335 name=$(this).children(".name").children().first().val(); | |
336 }else{ | |
337 name=$(this).children(".name").html(); | |
338 } | |
339 startPage=$.trim(startPage); | |
340 endPage=$.trim(endPage); | |
341 name=$.trim(name); | |
342 if(name=="" || startPage=="" ||endPage==""){ // if any of the fields is blank, dont insert to db (since none of them should be blank) | |
343 console.log("empty row: "+name+" -- "+startPage+" -- "+endPage); | |
344 return; // "continue" in jquery | |
345 } | |
346 if($(this).hasClass("deleted")){ deleted="TRUE";} | |
347 var id=$(this).children(".hiddenInfo").children(".id").html(); | |
348 var booksId=$(this).children(".hiddenInfo").children(".booksId").html(); | |
349 var sectionAfter=$(this).children(".hiddenInfo").children(".sectionAfter").html() | |
350 var level=$(this).children(".editLevel").children("select").val(); | |
351 var splitFrom=$(this).children(".hiddenInfo").children(".splitFrom").html(); | |
352 if(splitFrom==""){splitFrom="NULL";} | |
353 sectionArray[idx]={name:name,booksId:booksId,sectionAfter:sectionAfter, | |
354 startPage:startPage,endPage:endPage, | |
355 level:level,splitFrom:splitFrom, | |
356 id:id,deleted:deleted}; | |
357 idx++; | |
358 }); | |
359 return sectionArray; | |
360 } |