source: Dev/trunk/js/sequencerScripts.js @ 168

Last change on this file since 168 was 168, checked in by fpvanagthoven, 13 years ago
  • moveStep() [js] werkt weer, editor is nu op delete/clear na helemaal functioneel
  • Zit nog steeds een creator bug in savesession.php en selectSession.php
  • getInfo.php is nu aangepast om voor meerdere objecttypes te werken en relevante informatie terug te geven, geformatteerd als table. De styling hiervan moet wel nog beter geregeld worden.
File size: 17.0 KB
Line 
1/*
2 * To change this template, choose Tools | Templates
3 * and open the template in the editor.
4 */
5var timeDiff  =  {
6    setStartTime:function (){
7        d = new Date();
8        time  = d.getTime();
9    },
10
11    getDiff:function (){
12        d = new Date();
13        return (d.getTime()-time);
14    }
15}
16
17
18
19
20
21function IsItemSelected(check, target) {
22    if (check.value) {
23        target.disabled = false;
24    }
25    else {
26        target.disabled = true;
27    }
28}
29
30function IsCheckEnabled(check, target) {
31    if (check.checked) {
32        target.disabled = false;
33        this.removeClass(target, "dis");
34       
35    }
36    else {
37        target.disabled = true;
38        this.addClass(target, "dis");
39    }
40}
41
42function removeNL(s){
43    return s.replace(/[\n\r\t]/g,"");
44}
45
46function SubmitToolbox(type) {
47    var c = "objectToCreate="+type;
48    var u = "createObject.php";
49    var a = true;
50    var pipeline = document.getElementById("pipelineStringField");
51    var pipelineType = document.getElementById("pipelineTypeField");
52    var pipelineUpdated = document.getElementById("pipelineUpdatedField");
53    document.getElementById("numSteps").value++;
54   
55    newAjaxRequest(c, u, function(result){
56        var resultUid = removeNL(result.responseText);
57        //resultUid.replace("\n","").replace("\r","");
58       
59        pipeline.value += resultUid+",";
60        pipelineType.value += type+",";
61        pipelineUpdated.value += "0,";
62        updateSequencer();
63    }, a);
64}
65
66// Class manipulation
67
68function hasClass(ele,cls) {
69    if (ele.className)
70        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
71}
72 
73function addClass(ele,cls) {
74    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
75}
76 
77function removeClass(ele,cls) {
78    if (hasClass(ele,cls)) {
79        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
80        ele.className=ele.className.replace(reg,' ');
81    }
82}
83
84//new scripts!
85//start here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
86
87function selectStep(uid) {
88    /*
89   
90    var nodes = document.getElementById("seqContentWrapper").childNodes;
91    for (var i = 0; i < nodes.length; i++) {     //loop through childNodes. Skip first node (whitespace)
92        if (hasClass(nodes[i], "displayStep")) {    //check if current childNode is a displayStep, not divider or text.
93            if (nodes[i].id == uid) {
94                if (hasClass(nodes[i], "selected")) {
95                    removeClass(nodes[i], "selected");
96                }
97                else {
98                    addClass(nodes[i], "selected");
99                }               
100            }
101            else {
102                removeClass(nodes[i], "selected");
103            }
104        }
105    }
106    */
107    // Hier is een snellere manier voor!
108    var element = document.getElementById(uid);
109    var prevElement = document.getElementById(document.getElementById("selectedStepField").value);
110   
111    if (!element || !hasClass(element, "displayStep")) {
112        return;
113    }
114    // misschien nog checks inbouwen of het echt wel een element is?
115    var selectedStepField = document.getElementById("selectedStepField");
116    if (!hasClass(element, "selected")) {
117        if (prevElement) {
118            removeClass(prevElement, "selected");
119        }
120        addClass(element, "selected");
121        selectedStepField.value = uid;
122       
123        var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
124        var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
125        var type = plType[pl.indexOf(uid)];
126        ajaxInfoRequest(uid, document.getElementById("infoPanelContent"), type);
127       
128       
129    }
130    else {
131        deselectStep(uid);
132    }
133   
134   
135// Update selected step field with uid of currently selected step.
136   
137   
138}
139
140function deselectStep(uid) {
141    var field = document.getElementById("selectedStepField");
142    field.value = "";
143    var element = document.getElementById(uid);
144    removeClass(element, "selected");
145    document.getElementById("infoPanelContent").innerHTML = "";
146}
147                                                                           
148function newAjaxRequest(c, u, cb, async) {
149   
150    var xml;
151    var content = c;    //an array of strings, in "key=value"  format.
152    // assign a compatible request format
153    if (window.XMLHttpRequest) {    //Not IE5, IE6
154        xml = new XMLHttpRequest();
155    }
156    else {                          //IE5, IE6
157        xml = new ActiveXObject("Microsoft.XMLHTTP");
158    }
159    // subscribe the callback function to a response event
160    xml.onreadystatechange = function() {
161        xml.responseText = "Processing...";
162        if (xml.readyState == 4 && xml.status == 200) {
163            cb(xml);
164        }
165    };
166    // initialize XMLRequest
167    xml.open("POST", u, async);
168    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
169    var contentString = "";
170    //iterate through parameters passed in variable c
171    if (typeof(content)=='object'&&(input instanceof Array)) {    // parameters were passed as an array of key=value strings
172        for (var i = 0; i < content.length; i++) {
173            contentString += content[i];
174            if (i != (content.length - 1)) {
175                contentString += "&";
176            }
177        }
178    }
179    else { // single parameter or string already formatted by calling function
180        contentString = content;
181    }
182    // finally send the formatted request
183    xml.send(contentString);
184}
185
186
187/*
188 * ajaxStepRequest gets  the markup for displaying a step in the sequencer from returnStep.php
189 * Using ajax principle allows for editing of pipeline without constantly refreshing the page.
190 */
191
192function ajaxStepRequest(UIDS, types) {
193    var c = "uids="+UIDS;
194    if (types != "") {
195        c += "&types="+types;
196    }
197    var u = "returnStep.php";
198    newAjaxRequest(c, u, function(result) {
199        document.getElementById("seqContentWrapper").innerHTML = result.responseText;
200    }, true);
201}
202
203function ajaxInfoRequest(uid, el, type) {
204    var c = "uid="+uid;
205    c += "&type="+type;
206    var u = "getInfo.php";
207    newAjaxRequest(c, u, function(result) {
208        el.innerHTML = result.responseText;
209    }, true);
210}
211
212function drawSteps2() {
213    var content = document.getElementById("seqContentWrapper");
214    var pipeline = document.getElementById("pipelineStringField").value;
215    var pipelineTypes = document.getElementById("pipelineTypeField").value;
216    var numSteps = document.getElementById("numSteps").value;
217    if (numSteps > 0) {
218        pipeline = pipeline.replace(/,/g , ",divider,");    //regex search for commas, global (repeat), to represent them with visual dividers.
219        pipelineTypes = pipelineTypes.replace(/,/g, ",divider,");
220        ajaxStepRequest(pipeline, pipelineTypes);
221    }
222}
223
224
225function updateSequencer(firstLoad) {
226    // Load hidden field values
227    var plString = document.getElementById("pipelineStringField").value;
228    var plTypeString = document.getElementById("pipelineTypeField").value;
229    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
230    var count = document.getElementById("numSteps").value;
231   
232    if (count < 1) {
233        return;
234    }
235    // If this is on page-load time
236    if (firstLoad == true) {
237        requestString = plString.slice(0, -1);
238        requestString = requestString.replace(/,/g, ",divider,");
239        newAjaxRequest("uids="+requestString, "returnStep.php", function(result) {
240            var seqContent = document.getElementById("seqContentWrapper");
241            seqContent.innerHTML = result.responseText;
242        }, true);
243       
244        plUpdatedString = "";
245        for (var i = 0; i < plString.split(",").length-1; i++) {
246            plUpdatedString += "1,";
247        }
248       
249        document.getElementById("pipelineUpdatedField").value = plUpdatedString;
250    }
251    else {      // if not
252        var pl = stringToArray(plString, ",");   
253        var plType = stringToArray(plTypeString, ",");   
254        var plUpdated = stringToArray(plUpdatedString, ",");
255   
256        var count = pl.length;
257   
258        document.getElementById("numSteps").value = count;
259        var seqContent = document.getElementById("seqContentWrapper");
260        if (seqContent.childNodes.length > (2*count)-1) {
261            seqContent.removeChild(seqContent.childNodes[0]);
262           
263        }
264       
265       
266        for (var i = 0; i < pl.length; i++) {   // loop through pipeline contents
267            if (plUpdated[i] == "0") {   // if the element is not up to date
268                // first remove the step representation from the sequencer
269                //timeDiff.setStartTime();
270               
271           
272                // IMPROVISE !!!!!!!!!!
273                var elementByIndex = seqContent.childNodes[2*i];    // works with moved steps
274                var elementById = document.getElementById(pl[i]);   // works with ???, not moved steps though... Keeping this in here for future bugfixing. This value is not currently used.
275                var element = elementByIndex;
276           
277           
278                // END IMPROVISE !!!!!!!!!!!!
279                if (element == null) {
280                    element = document.createElement("div");
281                    element.name = "placeholder";
282                    seqContent.appendChild(element);
283                }
284                if (element.nextSibling) {
285                    var nextElement = element.nextSibling;
286                }
287                else {
288                    var nextElement = document.createElement("div");
289                    nextElement.name = "placeholderNext";
290                    seqContent.appendChild(nextElement);
291                }
292           
293                // now request a new step representation and insert it after previousElement
294                var holderDiv = document.createElement("div");
295                var requestString = "uids="+pl[i];
296           
297                if (plType[i]) {
298                    requestString += "&types="+plType[i];
299                }
300                // globally declare newDiv so it can be passed to the updateDividers function
301                var newDiv;
302           
303                newAjaxRequest(requestString, "returnStep.php", function(result) {
304                    holderDiv.innerHTML = result.responseText;
305                    newDiv = holderDiv.childNodes[1];           
306                    seqContent.replaceChild(newDiv, element);
307                    if (nextElement.name == "placeholderNext") {
308                        seqContent.removeChild(nextElement);
309                    }
310                    plUpdated[i] = "1";
311                }, false);
312           
313                       
314                // ALTERNATIVE METHOD TO REPLACECHILD!!!
315                //seqContent.removeChild(element);
316                //seqContent.insertBefore(newDiv, nextElement);
317           
318                // Now check if dividers are necessary.
319           
320                //alert("INSERT CODE FOR UPDATEDIVIDERS HERE!");
321                //alert(timeDiff.getDiff());
322                updateDividers(newDiv);
323            }
324        }
325   
326        // afterwards, convert the arrays back to strings and set to appropriate fields
327        var newUpdatedString = arrayToString(plUpdated, ",");
328        document.getElementById("pipelineUpdatedField").value = newUpdatedString;
329    }
330}
331
332
333
334
335
336
337function updateDividers (element) {
338    var seqContent = document.getElementById("seqContentWrapper");
339   
340    if (element.nextSibling){
341        var nextElement = element.nextSibling;
342    }
343    if (element.previousSibling) {
344        var previousElement = element.previousSibling;
345    }
346   
347    if (nextElement){
348        if (!hasClass(nextElement, "divider")) {
349            var holderDiv = document.createElement("div");
350            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
351                holderDiv.innerHTML = result.responseText;
352                var newDivider = holderDiv.childNodes[1];
353                seqContent.insertBefore(newDivider, nextElement);
354            }, false);
355        }
356    }
357   
358    if (previousElement){
359        if (!hasClass(previousElement, "divider")) {
360            var holderDiv = document.createElement("div");
361            newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
362                holderDiv.innerHTML = result.responseText;
363                var newDivider = holderDiv.childNodes[1];
364                seqContent.insertBefore(newDivider, element);
365            }, false);
366        }
367    }
368   
369}
370
371
372
373
374
375
376function savePipeline (confirmSave) {
377    if (confirmSave==true) {
378        var answer = confirm("Save changes to pipeline?");
379    }
380    else {
381        var answer = true;
382    }
383   
384   
385    if (answer) {
386        var pipeline = document.getElementById("pipelineStringField").value;
387        pipeline = pipeline.slice(0, pipeline.length - 1);
388        var types = document.getElementById("pipelineTypeField").value;
389        types = types.slice(0, types.length - 1);
390        var session = document.getElementById("sessionField").value;
391        var requestString = "uids="+pipeline+"&types="+types+"&sessionUid="+session;
392        console.log(requestString);
393       
394       
395        var success;
396        newAjaxRequest(requestString, "savesession.php", function(result){
397            success = result.responseText;
398        }, false);
399        console.log(success);
400    }
401}
402
403function t_setOutOfDate() {
404    // if a step is currently selected
405    var uid = document.getElementById("selectedStepField").value;
406    if (uid == "") {
407        alert("No step selected!");
408        return;
409    }
410   
411    // convert to arrays for looping
412    var plString = document.getElementById("pipelineStringField").value;
413    var plTypeString = document.getElementById("pipelineTypeField").value;
414    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
415   
416   
417    var pl = stringToArray(plString, ",");   
418    var plType = stringToArray(plTypeString, ",");   
419    var plUpdated = stringToArray(plUpdatedString, ",");   
420   
421    // set the targeted element's tag for "Needs updating"
422    plUpdated[pl.indexOf(uid)] = "0";
423   
424    // then rewrite the content strings and set them to the appropriate fields
425    var newUpdatedString = arrayToString(plUpdated, ",");
426    document.getElementById("pipelineUpdatedField").value = newUpdatedString;
427}
428
429function stringToArray(s, c) {
430    var a = s.split(c);
431    for (var i = 0; i < a.length; i++) {    // remove empty items
432        if (a[i] == "") {
433            a.splice(i, 1);
434            i--;
435        }
436    }
437    return a;
438}
439
440function arrayToString(a, c) {
441    var s = "";
442    for (var i = 0; i < a.length; i++) {
443        if (a[i] != "") {
444            s += a[i]+c;
445        }
446    }
447    return s;
448}
449
450
451function editStep() {
452    // eerst saven, dan de object type zoeken in de typelist, dan redirecten naar de goede pagina
453    savePipeline(false);
454   
455    var pipeline = document.getElementById("pipelineStringField").value;
456    var pipelineTypes = document.getElementById("pipelineTypeField").value;
457    var selectedStep = document.getElementById("selectedStepField").value;
458    pipeline = stringToArray(pipeline, ",");
459    pipelineTypes = stringToArray(pipelineTypes, ",");
460    var stepType = pipelineTypes[pipeline.indexOf(selectedStep)];
461   
462    var postForm = document.createElement("form");
463    postForm.action = stepType.toLowerCase()+"Editor.php";      //redirect to "type"editor.php
464    postForm.method = "POST";
465    var objectUid = document.createElement("input");
466    objectUid.type = "hidden";
467    objectUid.value = selectedStep;
468    postForm.appendChild(objectUid);
469    postForm.submit();
470}
471
472
473
474function moveStep (direction) {
475    // misschien maar eens een loadhiddenfields functie maken voor deze meuk?
476   
477    var selectedStep = document.getElementById("selectedStepField").value;
478   
479    if (selectedStep != undefined && selectedStep != "") {
480        var pipeline = stringToArray(document.getElementById("pipelineStringField").value, ",");
481        var pipelineTypes = stringToArray(document.getElementById("pipelineTypeField").value, ",");
482        var updated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
483    }
484    else {
485        alert("No step selected! Unable to move");
486        return;
487    }
488   
489    var id = pipeline.indexOf(selectedStep);
490    if ((id == 0 && direction == -1) || (id == pipeline.length-1 && direction == 1)){
491        alert("Cannot move out of bounds!");
492        return;
493    }
494    var tempString = pipeline[id], tempType = pipelineTypes[id];
495   
496    pipeline[id] = pipeline[id+direction];
497    pipelineTypes[id] = pipelineTypes[id+direction];
498    pipeline[id+direction] = tempString;
499    pipelineTypes[id+direction] = tempType;
500    updated[id] = "0";
501    updated[id+direction] = "0";
502   
503    pipeline = arrayToString(pipeline, ",");
504    pipelineTypes = arrayToString(pipelineTypes, ",");
505    updated = arrayToString(updated, ",");
506   
507    document.getElementById("pipelineStringField").value = pipeline;
508    document.getElementById("pipelineTypeField").value = pipelineTypes;
509    document.getElementById("pipelineUpdatedField").value = updated;
510    updateSequencer();
511   
512    // Then reselect the previously selected step
513    addClass(document.getElementById(selectedStep), "selected");
514}
Note: See TracBrowser for help on using the repository browser.