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 }