Changeset 181 for Dev/trunk


Ignore:
Timestamp:
12/09/11 16:10:36 (13 years ago)
Author:
fpvanagthoven
Message:
  • Grote verbetering aan scripts. Opgedeeld in generalScripts voor algemene functies, sequencerScripts.js staat nu de laatste versie van de editor in. Deze is bijna helemaal geschikt om zowel horizontaal als verticaal te gebruiken. updateSequencer() functie werkt nog niet helemaal (alleen op firstload), maar alle andere functies doen het nu EN werken nu op JS variables in plaats van hidden fields. Stukken beter.
  • css files nog wat verder aangepast.
  • pipelineSequencer.php aangepast om nu onLoad te beginnen met loadSequencer().js ipv drawSteps().js
Location:
Dev/trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/classes/pipelineSequencer.php

    r178 r181  
    6060           
    6161            <div id="hiddenInputs">
    62                 <input type="hidden" name="selectedStep" id="selectedStepField" value="" />
    63                 <input type="hidden" name="pipelineString" id="pipelineStringField" value="<?php echo $stringPipeline; ?>" />
    64                 <input type="hidden" name="pipelineTypes" id="pipelineTypeField" value="<?php echo $stringPipelineType; ?>" />
    65                 <input type="hidden" name="pipelineUpDated" id="pipelineUpdatedField" value="<?php echo $stringPipelineUpdated; ?>" />
    66                 <input type="hidden" name="numSteps" id="numSteps" value="<?php echo $numberOfSteps; ?>" />
    67                 <input type="hidden" name="session" id="sessionField" value="<?php echo $this->loadedSession->uid; ?>" />
     62                <input type="hidden" id="selectedStepField" value="" />
     63                <input type="hidden" id="pipelineStringField" value="<?php echo $stringPipeline; ?>" />
     64                <input type="hidden" id="pipelineTypeField" value="<?php echo $stringPipelineType; ?>" />
     65                <input type="hidden" id="pipelineUpdatedField" value="<?php echo $stringPipelineUpdated; ?>" />
     66                <input type="hidden" id="numSteps" value="<?php echo $numberOfSteps; ?>" />
     67                <input type="hidden" id="sessionField" value="<?php echo $this->loadedSession->uid; ?>" />
     68                <input type="hidden" id="sessionTitleField" value="<?php echo $this->loadedSession->title; ?>" />
    6869            </div>
    6970        </div>
    7071
    71         <!--
    72         <form name="sequencerForm" action="pipelineEditor.php" method="post">
    73             <fieldset id="sequencer">
    74                 <div class="fieldsetTitle">Name: <?php echo $this->loadedSession->title; ?> </div>
    75 
    76                 <div id="seqContent">
    77                     <div id="seqContentWrapper"></div>
    78                 </div>
    79 
    80                 <div id="controls">
    81                     <input type="button" id="moveSelectedL" value="< Move" class="surveyButton"  onClick="moveStep(-1);" />
    82                     <input type="button" id="moveSelectedR" value="Move >" class="surveyButton"  onClick="moveStep(1);" />
    83                     <input type="button" id="editSelected" value="Edit step" class="surveyButton" onClick="editStep();" />
    84                     <input type="button" id="deleteSelected" value="Delete step" class="surveyButton" onClick="deleteStep();" />
    85                     <input type="submit" id ="clearPipeline" name="clearPipeline" value="Clear pipeline" class="surveyButton dis" disabled="true"/>
    86                     <input type="checkbox" id="confirmClear" name="confirmClear" onChange="IsCheckEnabled(this, document.getElementById('clearPipeline'));" />Really clear?
    87                     <input type="button" value="debug_save" onClick="savePipeline(true);" />
    88                 </div>
    89                 <div id="hiddenInputs">
    90                     <input type="hidden" name="selectedStep" id="selectedStepField" value="" />
    91                     <input type="hidden" name="pipelineString" id="pipelineStringField" value="<?php echo $stringPipeline; ?>" />
    92                     <input type="hidden" name="pipelineTypes" id="pipelineTypeField" value="<?php echo $stringPipelineType; ?>" />
    93                     <input type="hidden" name="pipelineUpDated" id="pipelineUpdatedField" value="<?php echo $stringPipelineUpdated; ?>" />
    94                     <input type="hidden" name="numSteps" id="numSteps" value="<?php echo $numberOfSteps; ?>" />
    95                     <input type="hidden" name="session" id="sessionField" value="<?php echo $this->loadedSession->uid; ?>" />
    96                 </div>
    97             </fieldset>
    98         </form>
    99         -->
     72       
    10073        <?php
    10174    }
    … …  
    10376    public function Javascript() {
    10477        ?>
     78        <script type="text/javascript" src="js/generalScripts.js"></script>
    10579        <script type="text/javascript" src="js/sequencerScripts.js"></script>
    10680        <script type="text/javascript" src="js/jquery.js"></script>
    10781        <script type="text/javascript">
    10882            $(document).ready(function() {
    109                 updateSequencer(true);      // true means it is the first refresh of the page.
     83                loadSequencer();      // true means it is the first refresh of the page.
    11084            });
    11185        </script>
    … …  
    172146    }
    173147
    174     // Dit is een pure php versie. Deze slaat nog niet op in de Database, en reageert nog niet op
    175     public function MoveStep($uid, $direction) {
    176         $newSession = $this->loadedSession;
    177 
    178         for ($i = 0; $i < count($newSession->pipeline); $i++) {
    179             if ($newSession->pipeline[$i]->uid == $uid) {
    180                 $temp = $newSession->pipeline[$i];
    181                 $newSession->pipeline[$i] = $newSession->pipeline[$i + $direction];
    182                 $newSession->pipeline[$i + $direction] = $temp;
    183                 break;
    184             }
    185         }
    186 
    187         $this->loadedSession = $newSession;
    188         redirect("pipelineEditor.php");
    189     }
    190 
    191148}
    192149?>

  • Dev/trunk/css/visualeditors.css

    r178 r181  
    3434    padding: 2em 0;
    3535}
    36 
    3736
    3837.largeFrame {
    … …  
    128127}
    129128
    130 
    131 
    132 
    133 
    134 
    135 
    136 
    137 
    138 
    139 
    140129.largeTitle {
    141130    width: auto;
    … …  
    183172    font-weight: bold;
    184173}
    185 
    186 
    187174
    188175.bigButton {
    … …  
    207194    clear:both;
    208195}
    209 
    210196
    211197.smallButton {
    … …  
    231217}
    232218
    233 
    234 
    235 
    236219/****************************/
    237220/* PIPELINE EDITOR SPECIFIC */
    … …  
    339322/**************************/
    340323
    341 
    342324#surveyEditor {
    343325    background-color: #0000FF;

  • Dev/trunk/js/sequencerScripts.js

    r178 r181  
    33 * and open the template in the editor.
    44 */
    5 var timeDiff  =  {
    6     setStartTime:function (){
    7         d = new Date();
    8         time  = d.getTime();
     5
     6var sequencer = {   // GLOBAL VAR TO STORE SEQUENCER SETTINGS!
     7    uid: "",                // The unique id of this sequencer (not DB related!). This will help to avoid global var conflicts. Assign this randomly! (STRING)
     8    session: {              // Properties of the currently loaded session
     9        title: "",              // Title or name (STRING)
     10        uid: "",                // Database UID of the current session (STRING)
     11        pipeline: {             // Pipeline
     12            uids: [],               // Uids of objects in pipeline (STRING)
     13            types: [],              // Types of objects in pipeline (STRING)
     14            upToDate: []            // Whether or not object displays are up to date (BOOL)
     15        }
    916    },
    10 
    11     getDiff:function (){
    12         d = new Date();
    13         return (d.getTime()-time);
    14     }
    15 }
    16 
    17 
    18 
    19 
    20 
    21 function IsItemSelected(check, target) {
    22     if (check.value) {
    23         target.disabled = false;
    24     }
    25     else {
    26         target.disabled = true;
    27     }
    28 }
    29 
    30 function 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 
    42 function removeNL(s){
    43     return s.replace(/[\n\r\t]/g,"");
    44 }
     17    state: {                // Operating state of the sequencer
     18        numSteps: 0,            // Number of steps currently drawn in the editor (not necessarily same as number of steps in pipeline!) (INTEGER)
     19        loaded: false,          // Whether or not the sequencer content has been updated for the first time (BOOL)
     20        selectedStep: {         // Properties of the currently selected step
     21            uid: "",                // UID of this step (STRING)
     22            index: null               // The 'index' of this step in the current sequencer view (NOT the pipeline!) (INTEGER)
     23        }       
     24    },
     25    settings: {             // Various settings to determine the workings of the sequencer
     26        content: {              // Properties related to the content view of the sequencer
     27            width: null,            // Width of the viewing area (INTEGER)
     28            height: null,           // Height of the viewing area (INTEGER)
     29            maxObjects: null,       // The maximum number of content elements to be displayed at once time (INTEGER)
     30            orientation: "horizontal"        // Whether the editor should be a vertical or horizontal editor (STRING)
     31        },
     32        efficientUpdating: true // Whether or not to use selective querying of the database for new step objects. True will only refresh out-of-date steps, False will refresh the whole pipeline
     33    }
     34}
     35
    4536
    4637function SubmitToolbox(type) {
     38    deselectStep();
    4739    var c = "objectToCreate="+type;
    4840    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,";
     41       
     42    newAjaxRequest(c, u, function(result) {
     43        sequencer.session.pipeline.uids.push(removeNL(result.responseText));
     44        sequencer.session.pipeline.types.push(type);
     45        sequencer.session.pipeline.upToDate.push(false);
    6246        updateSequencer();
    63     }, a);
    64 }
    65 
    66 // Class manipulation
    67 
    68 function hasClass(ele,cls) {
    69     if (ele.className)
    70         return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    71 }
    72  
    73 function addClass(ele,cls) {
    74     if (!this.hasClass(ele,cls)) ele.className += " "+cls;
    75 }
    76  
    77 function 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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     47    }, true);
     48}
     49
     50function clickStep(uid) {
     51    if (uid == sequencer.state.selectedStep.uid) {  // user deselected a currently selected step.
     52        deselectStep();
     53    }
     54    else {
     55        if (sequencer.state.selectedStep.uid != undefined && sequencer.state.selectedStep.uid != "") {
     56            deselectStep();
     57            selectStep(uid);
     58        }
     59        else {
     60            selectStep(uid);
     61        }       
     62    }
     63}
    8664
    8765function 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!
    10866    var element = document.getElementById(uid);
    109     var prevElement = document.getElementById(document.getElementById("selectedStepField").value);
    110    
    111     if (!element || !hasClass(element, "displayStep")) {
     67    if (element) {
     68        addClass(element, "selected");
     69        var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(uid)];
     70        ajaxInfoRequest(uid, document.getElementById("infoPanelContent"), type);
     71        sequencer.state.selectedStep.uid = uid;
     72        sequencer.state.selectedStep.index = null;  //Don't know how to do this yet.
     73    }
     74}
     75
     76function deleteStep() {
     77    // check if a step is selected
     78    if (sequencer.state.selectedStep.uid == null) {
    11279        return;
    11380    }
    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 
    140 function deleteStep() {
    141     // delete an object from the session.
    142     // note: does not actually remove the object from the database, only takes it out of the pipeline array.
    143        
    144     var pl = stringToArray(document.getElementById("pipelineStringField").value, ",");
    145     var plType = stringToArray(document.getElementById("pipelineTypeField").value, ",");
    146     var plUpdated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
    147     var selectedStep = document.getElementById("selectedStepField").value;
    148    
    149     // if no step has been selected, exit the function
    150     if (selectedStep == undefined || selectedStep == "") {
    151         return;
    152     }
    153    
    154     // find the array index of the specified object uid, then remove it from all three arrays.
    155     var index = pl.indexOf(selectedStep);
    156     if (index >= 0 && index < pl.length) {
    157         pl.splice(index, 1);
    158         plType.splice(index, 1);
    159         plUpdated.splice(index, 1);
    160         // set the updated status of all objects from *index* and forward to "0" (out of date)
    161         // this way they will be refreshed the next time updateSequencer(); is called, adn the visual display will match the new pipeline.
    162         for (var i = index-1; i < plUpdated.length; i++) {
    163             if (i >= 0 ) {
    164                 plUpdated[i] = "0";
    165             }
    166         }
    167     }
    168    
    169     document.getElementById("pipelineStringField").value = arrayToString(pl, ",");
    170     document.getElementById("pipelineTypeField").value = arrayToString(plType, ",");
    171     document.getElementById("pipelineUpdatedField").value = arrayToString(plUpdated, ",");
    172     deselectStep(selectedStep);     // Make sure the info panel is up to date as well. (Not showing anything, as it should be...)
    173     document.getElementById("numSteps").value--;
    174    
    175     updateSequencer(false);
    176    
    177    
    178    
    179 }
    180 
    181 function deselectStep(uid) {
    182     var field = document.getElementById("selectedStepField");
    183     field.value = "";
    184     var element = document.getElementById(uid);
     81    var uid = sequencer.state.selectedStep.uid;
     82    // deselect the step to reset the info panel and selection code
     83    deselectStep();
     84    // splice the step's data from the pipeline
     85    var index = sequencer.session.pipeline.uids.indexOf(uid);
     86    if (index >= 0 && index < sequencer.session.pipeline.uids.length) {
     87        sequencer.session.pipeline.uids.splice(index, 1);
     88        sequencer.session.pipeline.types.splice(index, 1);
     89        sequencer.session.pipeline.upToDate.splice(index, 1);
     90        // Then delete the step visually
     91        var element = document.getElementById(uid);
     92        var divider;
     93        if (!element.nextSibling) {
     94            // the element is at the end of the pipeline
     95            // therefore we remove the previous divider.
     96            // Note: it could also be the only element left in the pipeline!
     97            divider = (element.previousSibling) ? element.previousSibling : false;
     98            if (divider != false) {
     99                divider.parentNode.removeChild(divider);
     100            }
     101        }
     102        else {
     103            // the element is at any position except the last, therefore we remove the next divider
     104            divider = (element.nextSibling) ? element.nextSibling : false;
     105            if (divider != false) {
     106                divider.parentNode.removeChild(divider);
     107            }
     108        }
     109       
     110        // Finally, remove the element itself.
     111        element.parentNode.removeChild(element);
     112        sequencer.state.numSteps--;
     113       
     114    }
     115}
     116
     117function deselectStep() {
     118    if (!sequencer.state.selectedStep.uid) return;
     119    var element = document.getElementById(sequencer.state.selectedStep.uid);
    185120    removeClass(element, "selected");
    186     document.getElementById("infoPanelContent").innerHTML = "";
    187 }
    188                                                                            
    189 function newAjaxRequest(c, u, cb, async) {
    190    
    191     var xml;
    192     var content = c;    //an array of strings, in "key=value"  format.
    193     // assign a compatible request format
    194     if (window.XMLHttpRequest) {    //Not IE5, IE6
    195         xml = new XMLHttpRequest();
    196     }
    197     else {                          //IE5, IE6
    198         xml = new ActiveXObject("Microsoft.XMLHTTP");
    199     }
    200     // subscribe the callback function to a response event
    201     xml.onreadystatechange = function() {
    202         xml.responseText = "Processing...";
    203         if (xml.readyState == 4 && xml.status == 200) {
    204             cb(xml);
    205         }
    206     };
    207     // initialize XMLRequest
    208     xml.open("POST", u, async);
    209     xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    210     var contentString = "";
    211     //iterate through parameters passed in variable c
    212     if (typeof(content)=='object'&&(input instanceof Array)) {    // parameters were passed as an array of key=value strings
    213         for (var i = 0; i < content.length; i++) {
    214             contentString += content[i];
    215             if (i != (content.length - 1)) {
    216                 contentString += "&";
    217             }
    218         }
    219     }
    220     else { // single parameter or string already formatted by calling function
    221         contentString = content;
    222     }
    223     // finally send the formatted request
    224     xml.send(contentString);
    225 }
    226 
    227 
    228 /*
    229  * ajaxStepRequest gets  the markup for displaying a step in the sequencer from returnStep.php
    230  * Using ajax principle allows for editing of pipeline without constantly refreshing the page.
    231  */
    232 
    233 function ajaxStepRequest(UIDS, types) {
    234     var c = "uids="+UIDS;
    235     if (types != "") {
    236         c += "&types="+types;
    237     }
    238     var u = "returnStep.php";
    239     newAjaxRequest(c, u, function(result) {
    240         document.getElementById("seqContentWrapper").innerHTML = result.responseText;
    241     }, true);
     121    sequencer.state.selectedStep.uid = null;
     122    sequencer.state.selectedStep.index = null;
     123    var infoPanel = document.getElementById("infoPanelContent");
     124    while (infoPanel.firstChild) infoPanel.removeChild(infoPanel.firstChild);
    242125}
    243126
    … …  
    251134}
    252135
    253 function drawSteps2() {
     136function updateSequencer() {
     137
     138    /*
     139 * Description:
     140 * This function updates the visual elements in the sequencer content view to match the current state of the sequencer.session.pipeline property.
     141 * It queries the database for object properties via AJAX (returnStep/Display/.php), then inserts divider div's in between where needed.
     142 */
    254143    var content = document.getElementById("seqContentWrapper");
    255     var pipeline = document.getElementById("pipelineStringField").value;
    256     var pipelineTypes = document.getElementById("pipelineTypeField").value;
    257     var numSteps = document.getElementById("numSteps").value;
    258     if (numSteps > 0) {
    259         pipeline = pipeline.replace(/,/g , ",divider,");    //regex search for commas, global (repeat), to represent them with visual dividers.
    260         pipelineTypes = pipelineTypes.replace(/,/g, ",divider,");
    261         ajaxStepRequest(pipeline, pipelineTypes);
    262     }
    263 }
    264 
    265 
    266 function updateSequencer(firstLoad) {
    267     // Load hidden field values
    268    
    269     var plString = document.getElementById("pipelineStringField").value;
    270     var plTypeString = document.getElementById("pipelineTypeField").value;
    271     var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
    272     var count = document.getElementById("numSteps").value;
    273    
    274     if (count < 1) {
    275         document.getElementById("seqContentWrapper").innerHTML = "";
    276         return;
    277     }
    278     // If this is on page-load time
    279     if (firstLoad == true) {
    280         var seqContent = document.getElementById("seqContentWrapper");
    281         seqContent.innerHTML = "";
    282         requestString = plString.slice(0, -1);
    283         requestString = requestString.replace(/,/g, ",divider,");
    284         newAjaxRequest("uids="+requestString, "returnStep.php", function(result) {
    285             seqContent.innerHTML = result.responseText;
     144    if (sequencer.state.loaded == false || sequencer.settings.efficientUpdating == false) {  // This is the first update of the sequencer since page load, therefore it contains no previous steps
     145        // First clear the entire content wrapper, just for safety and in case efficientUpdating is off
     146        while (content.firstChild) {
     147            content.removeChild(content.firstChild);
     148        }
     149        // Compose a request string - "uids=1,2,3&types=a,b,c"
     150        var requestString = "uids=";
     151        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
     152            requestString += sequencer.session.pipeline.uids[i]+",";
     153            sequencer.state.numSteps++;
     154        }
     155       
     156        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
     157        requestString += "&types=";
     158        for (var j = 0; j < sequencer.session.pipeline.types.length; j++) {
     159            requestString += sequencer.session.pipeline.types[j]+",";
     160        }
     161        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
     162        newAjaxRequest(requestString, "returnStep.php", function(result) {
     163            content.innerHTML = result.responseText;
     164            updateDividers();
     165            sequencer.state.loaded = true;
     166            for (var i = 0; i < sequencer.session.pipeline.upToDate.length; i++) {
     167                sequencer.session.pipeline.upToDate.length[i] = true;
     168            }
    286169        }, true);
    287        
    288         plUpdatedString = "";
    289         for (var i = 0; i < plString.split(",").length-1; i++) {
    290             plUpdatedString += "1,";
    291         }
    292        
    293         document.getElementById("pipelineUpdatedField").value = plUpdatedString;
    294     }
    295     else {      // if not
    296         var pl = stringToArray(plString, ",");   
    297         var plType = stringToArray(plTypeString, ",");   
    298         var plUpdated = stringToArray(plUpdatedString, ",");
    299    
    300         var count = pl.length;
    301    
    302         document.getElementById("numSteps").value = count;
    303         var seqContent = document.getElementById("seqContentWrapper");
    304         // hier zit een fout. Als er een deleted step nog in de pipeline staat haalt hij de eerste valid step weg ipv een text node.
    305         // twee mogelijkheden:
    306         // 1: check of het text node is.
    307         // 2: modulo check of het een even aantal steps is. Als alles klopt kan er onmogelijk een even aantal childNodes zijn.
    308         if (seqContent.childNodes.length % 2 == 0 && seqContent.childNodes.length > 0) {
    309             seqContent.removeChild(seqContent.childNodes[0]);
     170    }
     171    else {
     172        // Pack together all needed updates in one request string, insert responseText.firstChild whenever sequencer.session.pipeline.upToDate[i] == false
     173        debugger;
     174        var needsUpdating = new Array();
     175       
     176        // DIT IS FOUT.
     177        // BASIC IDEE, IK LOOP NU DOOR DE CHILNODES HEEN, EN NIET DOOR DE PIPELINE ARRAY. HIERDOOR KAN JE NOOIT EEN NIEUWE OBJECT DRAWEN, WANT DAAR IS IN DE SEQUENCER NOG GEEN DIV VOOR.
     178        // OPLOSSING:
     179        // LOOP DOOR SEQUENCER EN HAAL ALLES WEG DAT ER NIET HOORT (CROSSCHECK DISPLAYSTEP UID MET ARRAY)
     180        // LOOP DAARNA DOOR DE PIPELINE EDITOR, CHECK OF ER ELEMENTS VOOR ZIJN. ZO NIET, VOEG TOE AAN DE EDITOR!
     181       
     182        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
    310183           
    311184        }
    312185       
    313        
    314         for (var i = 0; i < pl.length; i++) {   // loop through pipeline contents
    315             if (plUpdated[i] == "0") {   // if the element is not up to date
    316                 // first remove the step representation from the sequencer
    317                 //timeDiff.setStartTime();
    318                
     186        for (var i = 0; i < content.childNodes.length; i++) {
     187            // If this childNode is not a displayStep, continue to the next childNode
     188            if (!hasClass(content.childNodes[i], "displayStep")) continue;
     189            // If this step is up to date, continue
     190            // pseudo: the upToDate entry on the index where childNodes[i].id is stored in uids
     191            if (sequencer.session.pipeline.upToDate[sequencer.session.pipeline.uids.indexOf(content.childNodes[i].id)] == true) continue;
    319192           
    320                 // IMPROVISE !!!!!!!!!!
    321                 var elementByIndex = seqContent.childNodes[2*i];    // works with moved steps
    322                 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.
    323                 var element = elementByIndex;
    324            
    325            
    326                 // END IMPROVISE !!!!!!!!!!!!
    327                 if (element == null) {
    328                     element = document.createElement("div");
    329                     element.name = "placeholder";
    330                     seqContent.appendChild(element);
    331                 }
    332                 if (element.nextSibling) {
    333                     var nextElement = element.nextSibling;
    334                 }
    335                 else {
    336                     var nextElement = document.createElement("div");
    337                     nextElement.name = "placeholderNext";
    338                     seqContent.appendChild(nextElement);
    339                 }
    340            
    341                 // now request a new step representation and insert it after previousElement
    342                 var holderDiv = document.createElement("div");
    343                 var requestString = "uids="+pl[i];
    344            
    345                 if (plType[i]) {
    346                     requestString += "&types="+plType[i];
    347                 }
    348                 // globally declare newDiv so it can be passed to the updateDividers function
    349                 var newDiv;
    350            
    351                 newAjaxRequest(requestString, "returnStep.php", function(result) {
    352                     holderDiv.innerHTML = result.responseText;
    353                     newDiv = holderDiv.childNodes[1];           
    354                     seqContent.replaceChild(newDiv, element);
    355                     if (nextElement.name == "placeholderNext") {
    356                         seqContent.removeChild(nextElement);
    357                     }
    358                     plUpdated[i] = "1";
    359                 }, false);
    360            
    361                        
    362                 // ALTERNATIVE METHOD TO REPLACECHILD!!!
    363                 //seqContent.removeChild(element);
    364                 //seqContent.insertBefore(newDiv, nextElement);
    365            
    366                 // Now check if dividers are necessary.
    367            
    368                 //alert("INSERT CODE FOR UPDATEDIVIDERS HERE!");
    369                 //alert(timeDiff.getDiff());
    370                
    371                 // If seqContent contains any further entries when the last pipeline uid has been drawn, these are to be removed.
    372                 // This happens after the user performs a "delete step" operation and there is now one fewer step in the array than in seqContent.
    373                 // All steps other than the first and the last are auto-adjusted due to "out of date" flag.
    374                 if (i >= pl.length - 1) {
    375                    
    376                     // This is a really complicated way of saying "Delete the next two elements if they exist"
    377                     while ((nextElement = newDiv.nextSibling) != undefined) {
    378                         seqContent.removeChild(nextElement);
    379                     }
    380                    
    381                 }
    382                 // Do the same check for the first step in the pipeline.
    383                 // Is there no more elegant solution for this? For instance, check if a step should be in the pipeline in the first place, else delete it and it's following divider
    384                
    385                
    386                 updateDividers(newDiv);
    387             }
    388         }
    389    
    390         // afterwards, convert the arrays back to strings and set to appropriate fields
    391         var newUpdatedString = arrayToString(plUpdated, ",");
    392         document.getElementById("pipelineUpdatedField").value = newUpdatedString;
    393     }
    394 }
    395 
    396 
    397 
    398 
    399 
    400 
    401 function updateDividers (element) {
    402     var seqContent = document.getElementById("seqContentWrapper");
    403    
    404     if (element.nextSibling){
    405         var nextElement = element.nextSibling;
    406     }
    407     if (element.previousSibling) {
    408         var previousElement = element.previousSibling;
    409     }
    410    
    411     if (nextElement){
    412         if (!hasClass(nextElement, "divider")) {
    413             var holderDiv = document.createElement("div");
    414             newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
    415                 holderDiv.innerHTML = result.responseText;
    416                 var newDivider = holderDiv.childNodes[1];
    417                 seqContent.insertBefore(newDivider, nextElement);
    418             }, false);
    419         }
    420     }
    421    
    422     if (previousElement){
    423         if (!hasClass(previousElement, "divider")) {
    424             var holderDiv = document.createElement("div");
    425             newAjaxRequest("uids=divider&types=divider", "returnStep.php", function(result) {
    426                 holderDiv.innerHTML = result.responseText;
    427                 var newDivider = holderDiv.childNodes[1];
    428                 seqContent.insertBefore(newDivider, element);
    429             }, false);
    430         }
    431     }
    432    
    433 }
    434 
    435 
    436 
    437 
    438 
     193            // So now we know that we are looking at a displayStep and it needs to be refreshed.
     194            // We store the current childNodes index, the uid of the proper displayStep and the type of the proper displayStep in needsUpdating array.
     195            needsUpdating.push(new Array(i, sequencer.session.pipeline.uids[i], sequencer.session.pipeline.types[i]));
     196        }
     197       
     198        // Now that we have an array of the steps that need to be refreshed, we compose a requestString.
     199        requestString = "uids=";
     200        for (var i = 0; i < needsUpdating.length; i++) {
     201            requestString += needsUpdating[i][1]+",";   // comma separated, of course
     202        }
     203        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
     204        requestString += "&types=";
     205        for (var i = 0; i< needsUpdating.length; i++) {
     206            requestString += needsUpdating[i][2]+",";
     207        }
     208        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
     209       
     210        // Now it is time to send this string to returnStep.php (Soon to be returnStepDisplay.php!).
     211       
     212        alert(requestString);
     213        newAjaxRequest(requestString, "returnStep.php", function(result) {
     214            //alert(result.responseText);
     215            insertNewSteps(responseText);
     216        }, true);
     217    }
     218   
     219}
     220
     221function loadSequencer() {
     222    /*
     223     * Description:
     224     * Load data from hidden fields (put there by PHP), store them in the global var "sequencer" (as well as several initialization properties),
     225     * then remove the hidden fields from the HTML document tree.
     226     */
     227   
     228    // Load hidden fields and set required properties in global object var.
     229    try {
     230       
     231        var fPipelineString = document.getElementById("pipelineStringField");
     232        var fPipelineTypes = document.getElementById("pipelineTypeField");
     233        var fSessionUid = document.getElementById("sessionField");
     234        var fSessionTitle = document.getElementById("sessionTitleField");
     235   
     236        sequencer.session.title = fSessionTitle.value;
     237        sequencer.session.uid = fSessionUid.value;
     238        sequencer.session.pipeline.uids = stringToArray(fPipelineString.value, ",");
     239        sequencer.session.pipeline.types = stringToArray(fPipelineTypes.value, ",");
     240        sequencer.session.pipeline.upToDate = new Array();
     241       
     242        for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
     243            sequencer.session.pipeline.upToDate.push(true);
     244        }
     245        sequencer.state.numSteps = 0;
     246        sequencer.state.loaded = false;
     247        sequencer.settings.content.orientation = "h";
     248        sequencer.settings.efficientUpdating = true;
     249    }
     250    catch (e) {
     251        // Alert developer of any errors while setting these variables
     252        for (error in e) alert(error.message);
     253    }
     254   
     255    // Then remove the hidden fields from the HTML document
     256    var hiddenInputs = document.getElementById("hiddenInputs");
     257    hiddenInputs.parentNode.removeChild(hiddenInputs);
     258   
     259    console.log(sequencer);
     260    // finally, run updateSequencer to refresh the visual display of the pipeline
     261   
     262    updateSequencer();
     263}
     264
     265function insertNewSteps(responseText) {
     266    debugger;
     267    var content = document.getElementById("seqContentWrapper");
     268    // Create a holder Div that converts the returned HTML to HTMLDivElements implicitly, so that they can be manipulated using DOM methods
     269    var holderDiv = document.createElement("div");
     270    holderDiv.innerHTML = responseText;
     271    // tempDiv will serve to
     272    var tempDiv;
     273    // Loop through
     274    for (var i = 0; i < content.childNodes.length; i++) {
     275        // Once again, skip if not a displayStep or the given displayStep is already up to date.
     276        if (!hasClass(content.childNodes[i], "displayStep")) continue;
     277        if (sequencer.session.pipeline.upToDate[sequencer.session.pipeline.uids.indexOf(content.childNodes[i].id)] == true) continue;
     278        tempDiv = holderDiv.firstChild;
     279        holderDiv.removeChild(holderDiv.firstChild);
     280        content.replaceChild(tempDiv, content.childNodes[i]);
     281        // Exit the loop if there is no more responsetext
     282        if (!holderDiv.firstChild) break;
     283    }
     284}
     285
     286function updateDividers() {
     287    var content = document.getElementById("seqContentWrapper");
     288    for (var i = 0; i < content.childNodes.length; i++) {
     289        var element = content.childNodes[i];
     290        if (!hasClass(element, "displayStep")) {
     291            continue;
     292        }
     293        var lastElement = (element.previousSibling && element.previousSibling.nodeName == "DIV") ? element.previousSibling : false;
     294        var nextElement = (element.nextSibling && element.nextSibling.nodeName == "DIV") ? element.nextSibling : false;
     295        if (lastElement != false) {
     296            if (!hasClass(lastElement, "divider")){
     297                var newDivider = document.createElement("div");
     298                addClass(newDivider, "divider");
     299                addClass(newDivider, sequencer.settings.content.orientation);
     300                content.insertBefore(newDivider, element);
     301                delete newDivider;
     302            }
     303        }
     304        if (nextElement != false) {
     305            if (!hasClass(nextElement, "divider")){
     306                var newDivider = document.createElement("div");
     307                addClass(newDivider, "divider");
     308                addClass(newDivider, sequencer.settings.content.orientation);
     309                content.insertBefore(newDivider, nextElement);
     310                delete newDivider;
     311            }
     312        }
     313    }
     314}
    439315
    440316function savePipeline (confirmSave) {
    … …  
    465341}
    466342
    467 function t_setOutOfDate() {
    468     // if a step is currently selected
    469     var uid = document.getElementById("selectedStepField").value;
    470     if (uid == "") {
    471         alert("No step selected!");
    472         return;
    473     }
    474    
    475     // convert to arrays for looping
    476     var plString = document.getElementById("pipelineStringField").value;
    477     var plTypeString = document.getElementById("pipelineTypeField").value;
    478     var plUpdatedString = document.getElementById("pipelineUpdatedField").value;
    479    
    480    
    481     var pl = stringToArray(plString, ",");   
    482     var plType = stringToArray(plTypeString, ",");   
    483     var plUpdated = stringToArray(plUpdatedString, ",");   
    484    
    485     // set the targeted element's tag for "Needs updating"
    486     plUpdated[pl.indexOf(uid)] = "0";
    487    
    488     // then rewrite the content strings and set them to the appropriate fields
    489     var newUpdatedString = arrayToString(plUpdated, ",");
    490     document.getElementById("pipelineUpdatedField").value = newUpdatedString;
    491 }
    492 
    493 function stringToArray(s, c) {
    494     var a = s.split(c);
    495     for (var i = 0; i < a.length; i++) {    // remove empty items
    496         if (a[i] == "") {
    497             a.splice(i, 1);
    498             i--;
    499         }
    500     }
    501     return a;
    502 }
    503 
    504 function arrayToString(a, c) {
    505     var s = "";
    506     for (var i = 0; i < a.length; i++) {
    507         if (a[i] != "") {
    508             s += a[i]+c;
    509         }
    510     }
    511     return s;
    512 }
    513 
    514 
    515343function editStep() {
    516     // eerst saven, dan de object type zoeken in de typelist, dan redirecten naar de goede pagina
    517     savePipeline(false);
    518    
    519     var pipeline = document.getElementById("pipelineStringField").value;
    520     var pipelineTypes = document.getElementById("pipelineTypeField").value;
    521     var selectedStep = document.getElementById("selectedStepField").value;
    522     pipeline = stringToArray(pipeline, ",");
    523     pipelineTypes = stringToArray(pipelineTypes, ",");
    524     var stepType = pipelineTypes[pipeline.indexOf(selectedStep)];
     344    // first save
     345   
     346    //savePipeline(false);
     347   
    525348    var postForm = document.createElement("form");
    526     postForm.action = stepType.toLowerCase()+"Editor.php";      //redirect to "type"editor.php
     349    var type = sequencer.session.pipeline.types[sequencer.session.pipeline.uids.indexOf(sequencer.state.selectedStep.uid)];
     350    postForm.action = type.toLowerCase()+"Editor.php";
    527351    postForm.method = "POST";
    528352    var objectUid = document.createElement("input");
    529353    objectUid.type = "hidden";
    530354    objectUid.name = "objectUid";
    531     objectUid.value = selectedStep;
     355    objectUid.value = sequencer.state.selectedStep.uid;
    532356    postForm.appendChild(objectUid);
    533357    postForm.submit();
    534358}
    535359
    536 
    537 
    538360function moveStep (direction) {
    539     // misschien maar eens een loadhiddenfields functie maken voor deze meuk?
    540    
    541     var selectedStep = document.getElementById("selectedStepField").value;
    542    
    543     if (selectedStep != undefined && selectedStep != "") {
    544         var pipeline = stringToArray(document.getElementById("pipelineStringField").value, ",");
    545         var pipelineTypes = stringToArray(document.getElementById("pipelineTypeField").value, ",");
    546         var updated = stringToArray(document.getElementById("pipelineUpdatedField").value, ",");
    547     }
    548     else {
    549         alert("No step selected! Unable to move");
    550         return;
    551     }
    552    
    553     var id = pipeline.indexOf(selectedStep);
    554     if ((id == 0 && direction == -1) || (id == pipeline.length-1 && direction == 1)){
     361    // Check if a step is selected
     362   
     363    if (sequencer.state.selectedStep.uid == null || direction == null) return;
     364    // Check if the step is not at either end of the pipeline
     365    var index = sequencer.session.pipeline.uids.indexOf(sequencer.state.selectedStep.uid);
     366    if ((index < 0) || (index >= sequencer.session.pipeline.uids.length) || (index == 0 && direction == -1) || (index == sequencer.session.pipeline.uids.length - 1 && direction == 1)) {
    555367        alert("Cannot move out of bounds!");
    556368        return;
    557369    }
    558     var tempString = pipeline[id], tempType = pipelineTypes[id];
    559    
    560     pipeline[id] = pipeline[id+direction];
    561     pipelineTypes[id] = pipelineTypes[id+direction];
    562     pipeline[id+direction] = tempString;
    563     pipelineTypes[id+direction] = tempType;
    564     updated[id] = "0";
    565     updated[id+direction] = "0";
    566    
    567     pipeline = arrayToString(pipeline, ",");
    568     pipelineTypes = arrayToString(pipelineTypes, ",");
    569     updated = arrayToString(updated, ",");
    570    
    571     document.getElementById("pipelineStringField").value = pipeline;
    572     document.getElementById("pipelineTypeField").value = pipelineTypes;
    573     document.getElementById("pipelineUpdatedField").value = updated;
    574     updateSequencer();
    575    
    576     // Then reselect the previously selected step
    577     addClass(document.getElementById(selectedStep), "selected");
    578 }
     370   
     371    // Find the two elements in the editor content display
     372    var content = document.getElementById("seqContentWrapper");
     373    var element = document.getElementById(sequencer.session.pipeline.uids[index]);
     374    var otherElement = document.getElementById(sequencer.session.pipeline.uids[index+direction]);
     375    // First buffer the two elements
     376    var tempElement = element.cloneNode(true);
     377    var tempOtherElement = otherElement.cloneNode(true);
     378    var placeHolderElement = document.createElement("div");
     379    placeHolderElement.id = "placeholder_element";
     380    content.replaceChild(placeHolderElement, otherElement);
     381    content.replaceChild(tempOtherElement, element);
     382    content.replaceChild(tempElement, placeHolderElement);
     383    //This should work.
     384    // A-B     Start positions, backup to tA and tB
     385    // A-X     Replace B with placeholder X
     386    // B-X     Replace A with tB
     387    // B-A     Replace placeholder X with tA.
     388    // The two elements are now swapped.
     389     
     390    // Now swap the array entries.
     391    sequencer.session.pipeline.uids[index] = sequencer.session.pipeline.uids.splice(index+direction, 1, sequencer.session.pipeline.uids[index])[0];
     392    sequencer.session.pipeline.types[index] = sequencer.session.pipeline.types.splice(index+direction, 1, sequencer.session.pipeline.types[index])[0];
     393     
     394}

  • Dev/trunk/js/surveyEditorScripts.js

    r178 r181  
    3939    return s;
    4040}
    41 
    42 
    4341
    4442function loadSurvey() {

  • Dev/trunk/returnStep.php

    r168 r181  
    130130
    131131//echo out the HTML markup
    132         $responsePart = '<div class="displayStep" id="' . $result->uid . '" onClick="selectStep(this.id);"><div class="displayStepIcon"><img src="' . $imageURL . '" /></div>' . $result->title . '</div>';
     132        $responsePart = '<div class="displayStep" id="' . $result->uid . '" onClick="clickStep(this.id);"><div class="displayStepIcon"><img src="' . $imageURL . '" /></div>' . $result->title . '</div>';
    133133        return $responsePart;
    134134    }
Note: See TracChangeset for help on using the changeset viewer.