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
RevLine 
[146]1/*
2 * To change this template, choose Tools | Templates
3 * and open the template in the editor.
4 */
[168]5var timeDiff  =  {
6    setStartTime:function (){
7        d = new Date();
8        time  = d.getTime();
9    },
[146]10
[168]11    getDiff:function (){
12        d = new Date();
13        return (d.getTime()-time);
14    }
15}
16
17
18
19
20
[146]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
[166]42function removeNL(s){
43    return s.replace(/[\n\r\t]/g,"");
[146]44}
[166]45
[165]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");
[168]53    document.getElementById("numSteps").value++;
[165]54   
55    newAjaxRequest(c, u, function(result){
[166]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,";
[165]62        updateSequencer();
63    }, a);
64}
[146]65
[152]66// Class manipulation
[146]67
[152]68function hasClass(ele,cls) {
[154]69    if (ele.className)
70        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
[152]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}
[146]83
[152]84//new scripts!
85//start here!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
86
87function selectStep(uid) {
[168]88    /*
89   
[167]90    var nodes = document.getElementById("seqContentWrapper").childNodes;
[154]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) {
[164]94                if (hasClass(nodes[i], "selected")) {
95                    removeClass(nodes[i], "selected");
96                }
97                else {
98                    addClass(nodes[i], "selected");
99                }               
[154]100            }
101            else {
102                removeClass(nodes[i], "selected");
103            }
104        }
[153]105    }
[168]106    */
107    // Hier is een snellere manier voor!
108    var element = document.getElementById(uid);
109    var prevElement = document.getElementById(document.getElementById("selectedStepField").value);
[154]110   
[168]111    if (!element || !hasClass(element, "displayStep")) {
112        return;
113    }
114    // misschien nog checks inbouwen of het echt wel een element is?
[154]115    var selectedStepField = document.getElementById("selectedStepField");
[168]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    }
[154]133   
[168]134   
135// Update selected step field with uid of currently selected step.
136   
137   
[152]138}
[168]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}
[152]147                                                                           
[164]148function newAjaxRequest(c, u, cb, async) {
[152]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() {
[164]161        xml.responseText = "Processing...";
[152]162        if (xml.readyState == 4 && xml.status == 200) {
163            cb(xml);
164        }
165    };
166    // initialize XMLRequest
[164]167    xml.open("POST", u, async);
[152]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    }
[166]179    else { // single parameter or string already formatted by calling function
[152]180        contentString = content;
181    }
182    // finally send the formatted request
183    xml.send(contentString);
184}
[153]185
[154]186
[153]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
[165]192function ajaxStepRequest(UIDS, types) {
[154]193    var c = "uids="+UIDS;
[165]194    if (types != "") {
195        c += "&types="+types;
196    }
[153]197    var u = "returnStep.php";
198    newAjaxRequest(c, u, function(result) {
[167]199        document.getElementById("seqContentWrapper").innerHTML = result.responseText;
[164]200    }, true);
[153]201}
202
[168]203function ajaxInfoRequest(uid, el, type) {
[153]204    var c = "uid="+uid;
[168]205    c += "&type="+type;
[153]206    var u = "getInfo.php";
207    newAjaxRequest(c, u, function(result) {
208        el.innerHTML = result.responseText;
[164]209    }, true);
[153]210}
[146]211
[167]212function drawSteps2() {
213    var content = document.getElementById("seqContentWrapper");
[153]214    var pipeline = document.getElementById("pipelineStringField").value;
[165]215    var pipelineTypes = document.getElementById("pipelineTypeField").value;
[166]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    }
[146]222}
223
[167]224
[168]225function updateSequencer(firstLoad) {
226    // Load hidden field values
[164]227    var plString = document.getElementById("pipelineStringField").value;
228    var plTypeString = document.getElementById("pipelineTypeField").value;
229    var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
[168]230    var count = document.getElementById("numSteps").value;
[153]231   
[168]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, ",");
[164]255   
[168]256        var count = pl.length;
[166]257   
[168]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]);
[164]262           
[168]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               
[166]271           
[168]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;
[166]276           
[168]277           
278                // END IMPROVISE !!!!!!!!!!!!
279                if (element == null) {
280                    element = document.createElement("div");
281                    element.name = "placeholder";
282                    seqContent.appendChild(element);
[166]283                }
[168]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                }
[164]292           
[168]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           
[166]313                       
[168]314                // ALTERNATIVE METHOD TO REPLACECHILD!!!
315                //seqContent.removeChild(element);
316                //seqContent.insertBefore(newDiv, nextElement);
[164]317           
[168]318                // Now check if dividers are necessary.
[164]319           
[168]320                //alert("INSERT CODE FOR UPDATEDIVIDERS HERE!");
321                //alert(timeDiff.getDiff());
322                updateDividers(newDiv);
323            }
[164]324        }
[168]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;
[164]329    }
[166]330}
331
332
333
334
335
336
337function updateDividers (element) {
[167]338    var seqContent = document.getElementById("seqContentWrapper");
[166]339   
340    if (element.nextSibling){
341        var nextElement = element.nextSibling;
[164]342    }
[166]343    if (element.previousSibling) {
344        var previousElement = element.previousSibling;
345    }
[164]346   
[166]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        }
[164]356    }
357   
[166]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   
[164]369}
370
[166]371
372
373
374
375
[167]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   
[164]385    if (answer) {
[166]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;
[167]392        console.log(requestString);
[166]393       
394       
395        var success;
396        newAjaxRequest(requestString, "savesession.php", function(result){
397            success = result.responseText;
398        }, false);
399        console.log(success);
[164]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   
[166]417    var pl = stringToArray(plString, ",");   
418    var plType = stringToArray(plTypeString, ",");   
419    var plUpdated = stringToArray(plUpdatedString, ",");   
[164]420   
421    // set the targeted element's tag for "Needs updating"
[166]422    plUpdated[pl.indexOf(uid)] = "0";
[164]423   
424    // then rewrite the content strings and set them to the appropriate fields
[166]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        }
[164]436    }
[166]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        }
[164]446    }
[166]447    return s;
[167]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);
[168]454   
[167]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");
[168]463    postForm.action = stepType.toLowerCase()+"Editor.php";      //redirect to "type"editor.php
[167]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?
[168]476   
[167]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);
[168]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;
[167]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   
[168]512    // Then reselect the previously selected step
513    addClass(document.getElementById(selectedStep), "selected");
[154]514}
Note: See TracBrowser for help on using the repository browser.