Changeset 182

Timestamp:

12/12/11 10:49:25 (13 years ago)

Author:

fpvanagthoven

Message:

Verder gewerkt aan alle scripts. Met uitzondering van:

• savePipeline().js loopt nog vast
• loadSession->updateSequencer->updateDividers() gaat niet goed als er geen steps in de pipeline zitten (bijvoorbeeld bij het maken van een nieuwe sessie). Nog check toevoegen of er ook echt wel steps zijn voordat de functie verder gaat naar het maken van een requestString en AJAX calls.

Location:

Dev/trunk

Files:

• classes/surveyEditorWidget.php (modified) (2 diffs)
• css/visualeditors.css (modified) (2 diffs)
• js/sequencerScripts.js (modified) (7 diffs)
• js/surveyEditorScripts.js (modified) (1 diff)
• returnQuestionDisplay.php (modified) (1 diff)

Dev/trunk/classes/surveyEditorWidget.php

@@ -48 +48 @@
             <div id="surveyEditorContent" class="innerLargeFrame">
 
+                <!--
                 <div id="questionUID" class="smallFrame">
                     <div class="smallTitle"><div class="listNumber">1</div>#QUESTION-IDENT-NO</div>
@@ -63 +64 @@
                     </div>
                 </div>
-
+                -->
 
             </div>

Dev/trunk/css/visualeditors.css

@@ -180 +180 @@
     -moz-border-radius: 0.25em;
     background-color: transparent;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 }
 
@@ -204 +209 @@
     -moz-border-radius: 0,25em;
     background-color: transparent;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
 }
 

Dev/trunk/js/sequencerScripts.js

@@ -16 +16 @@
     },
     state: {                // Operating state of the sequencer
+        editing: false,         // Whether or not one of the contained child objects is currently being edited or in edit mode. Which one can be determined from the selectedStep property.
         numSteps: 0,            // Number of steps currently drawn in the editor (not necessarily same as number of steps in pipeline!) (INTEGER)
         loaded: false,          // Whether or not the sequencer content has been updated for the first time (BOOL)
@@ -25 +26 @@
     settings: {             // Various settings to determine the workings of the sequencer
         content: {              // Properties related to the content view of the sequencer
+            contentType: "session", // Type of the loaded parent object
             width: null,            // Width of the viewing area (INTEGER)
             height: null,           // Height of the viewing area (INTEGER)
@@ -167 +169 @@
                 sequencer.session.pipeline.upToDate.length[i] = true;
             }
+            if (content.childNodes[0].nodeType == 3) content.removeChild(content.childNodes[0]);
         }, true);
     }
@@ -173 +176 @@
         debugger;
         var needsUpdating = new Array();
-        
-        // DIT IS FOUT.
-        // 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.
-        // OPLOSSING: 
-        // LOOP DOOR SEQUENCER EN HAAL ALLES WEG DAT ER NIET HOORT (CROSSCHECK DISPLAYSTEP UID MET ARRAY)
-        // LOOP DAARNA DOOR DE PIPELINE EDITOR, CHECK OF ER ELEMENTS VOOR ZIJN. ZO NIET, VOEG TOE AAN DE EDITOR!
-        
+        // Add steps that need updating to the needsUpdating array (index, uid, type).
         for (var i = 0; i < sequencer.session.pipeline.uids.length; i++) {
-            
-        }
-        
-        for (var i = 0; i < content.childNodes.length; i++) {
-            // If this childNode is not a displayStep, continue to the next childNode
-            if (!hasClass(content.childNodes[i], "displayStep")) continue;
-            // If this step is up to date, continue
-            // pseudo: the upToDate entry on the index where childNodes[i].id is stored in uids
-            if (sequencer.session.pipeline.upToDate[sequencer.session.pipeline.uids.indexOf(content.childNodes[i].id)] == true) continue;
-            
-            // So now we know that we are looking at a displayStep and it needs to be refreshed.
-            // We store the current childNodes index, the uid of the proper displayStep and the type of the proper displayStep in needsUpdating array.
+            if (sequencer.session.pipeline.upToDate[i] == true) continue;
             needsUpdating.push(new Array(i, sequencer.session.pipeline.uids[i], sequencer.session.pipeline.types[i]));
         }
-        
         // Now that we have an array of the steps that need to be refreshed, we compose a requestString.
-        requestString = "uids=";
+        var requestString = "uids=";
         for (var i = 0; i < needsUpdating.length; i++) {
-            requestString += needsUpdating[i][1]+",";   // comma separated, of course
-        }
-        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
+            requestString += needsUpdating[i][1]+",";
+        }
+        if (requestString.slice(-1) == ",") requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
         requestString += "&types=";
-        for (var i = 0; i< needsUpdating.length; i++) {
-            requestString += needsUpdating[i][2]+",";
-        }
-        requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
-        
-        // Now it is time to send this string to returnStep.php (Soon to be returnStepDisplay.php!).
-        
-        alert(requestString);
+        for (var i = 0; i < needsUpdating.length; i++) {
+            requestString += needsUpdating[i][2];
+        }
+        if (requestString.slice(-1) == ",") requestString = requestString.slice(0, requestString.length - 1);   // remove trailing commas
+        
+        // perform the AJAX request
         newAjaxRequest(requestString, "returnStep.php", function(result) {
-            //alert(result.responseText);
-            insertNewSteps(responseText);
+            insertNewSteps(result.responseText, needsUpdating);
         }, true);
     }
@@ -263 +245 @@
 }
 
-function insertNewSteps(responseText) {
+function insertNewSteps(responseText, needsUpdating) {
     debugger;
     var content = document.getElementById("seqContentWrapper");
@@ -271 +253 @@
     // tempDiv will serve to 
     var tempDiv;
+    if (holderDiv.firstChild.nodeType == "3") holderDiv.removeChild(holderDiv.firstChild);
     // Loop through 
-    for (var i = 0; i < content.childNodes.length; i++) {
-        // Once again, skip if not a displayStep or the given displayStep is already up to date.
-        if (!hasClass(content.childNodes[i], "displayStep")) continue;
-        if (sequencer.session.pipeline.upToDate[sequencer.session.pipeline.uids.indexOf(content.childNodes[i].id)] == true) continue;
+    for (var i = 0; i < needsUpdating.length; i++) {
         tempDiv = holderDiv.firstChild;
         holderDiv.removeChild(holderDiv.firstChild);
-        content.replaceChild(tempDiv, content.childNodes[i]);
-        // Exit the loop if there is no more responsetext
-        if (!holderDiv.firstChild) break;
+        if (needsUpdating[i][0] > sequencer.state.numSteps-1) {
+            // this step comes at the end of the pipeline
+            content.appendChild(tempDiv);
+            sequencer.state.numSteps++;
+        }
+        else {
+            content.replaceChild(tempDiv, content.childNodes[needsUpdating[i][0]*2]);
+        }
+        // The element is now updated, therefore set this flag in the global var
+        sequencer.session.pipeline.upToDate[needsUpdating[i][0]] = true;
+    }
+    
+    // Then add or adjust dividers as needed!
+    updateDividers();
+}
+
+function insertNewQuestion(responseText, needsUpdating) {
+    /*
+     * This is a test function displaying how to handle the visual object representation in solely javascript.
+     * Communication of relevant variables between PHP and JS happens in JSON format.
+     * PHP returns a JSON array of objects to be created by JS
+     * JS then loops through this array and creates DIVS to be inserted into the sequencer.
+     * These are inserted at the position needsUpdating gives us.
+     */
+    
+    var content = document.getElementById("seqContent");
+    var response = eval(responseText);
+    
+    for (var i = 0; i < response.length; i++) {
+        var tempDiv = document.createElement("div");
+        tempDiv.id = response.id;
+        tempDiv.className = "displayStep";
+        var divImage = document.createElement("img");
+        divImage.src = "./images/displayStep.png";
+        divImage.addEventListener("Click", function(e){
+            selectStep(this.id);
+        }, false);
+        tempDiv.appendChild(divImage);
+        var divLabel = document.createElement("p");
+        divLabel.innerHTML = response.title;
+        tempDiv.appendChild(divLabel);
+        
+        // This for needs to loop backwards so that the steps at the end of the pipeline are added or changed first. This keeps the childNodes index for all further steps intact.
+        for (var j = needsUpdating.length; j >= 0; j--) {
+            if (needsUpdating[j][1] != response.id) continue;
+            if (needsUpdating[j][0] > sequencer.state.numSteps-1) {
+                content.appendChild(tempDiv);
+            }
+            else {
+                content.replaceChild(tempDiv, content.childNodes[j][0]*2);
+            }
+        }
     }
 }
@@ -315 +344 @@
 
 function savePipeline (confirmSave) {
-    if (confirmSave==true) {
-        var answer = confirm("Save changes to pipeline?");
+    var answer;
+    if (confirmSave == true) {
+        answer = confirm("Save changes to pipeline?");
     }
     else {
-        var answer = true;
-    }
-    
-    
-    if (answer) {
-        var pipeline = document.getElementById("pipelineStringField").value;
-        pipeline = pipeline.slice(0, pipeline.length - 1);
-        var types = document.getElementById("pipelineTypeField").value;
-        types = types.slice(0, types.length - 1);
-        var session = document.getElementById("sessionField").value;
-        var requestString = "uids="+pipeline+"&types="+types+"&sessionUid="+session;
-        console.log(requestString);
-        
-        
-        var success;
-        newAjaxRequest(requestString, "savesession.php", function(result){
-            success = result.responseText;
-        }, true);
-        console.log(success);
-    }
+        answer = true;
+    }
+    if (answer == false) return;
+    
+    var requestString = "uids=";
+    requestString += arrayToString(sequencer.session.pipeline.uids, ",");
+    requestString += "&types=";
+    requestString += arrayToString(sequencer.session.pipeline.types, ",");
+    requestString += "&sessionUid=";
+    requestString += sequencer.session.uid;
+    newAjaxRequest(requestString, "savePipeline.php", function(result){
+        console.log(result.responseText);
+    }, true);
 }
 

Dev/trunk/js/surveyEditorScripts.js

@@ -15 +15 @@
 }
 
-// Deze scripts worden gedeeld door bijna alle editors, en deze moeten dan ook in een common scripts
-// file komen te staan in plaats van in elk document weer opnieuw invoeren.
-// Dit gaat ongetwijfeld conflicten opleveren als er in een van de functies iets veranderd moet worden.
 
-function stringToArray(s, c) {
-    var a = s.split(c);
-    for (var i = 0; i < a.length; i++) {    // remove empty items
-        if (a[i] == "") {
-            a.splice(i, 1);
-            i--;
-        }
-    }
-    return a;
-}
-
-function arrayToString(a, c) {
-    var s = "";
-    for (var i = 0; i < a.length; i++) {
-        if (a[i] != "") {
-            s += a[i]+c;
-        }
-    }
-    return s;
-}
 
 function loadSurvey() {

Dev/trunk/returnQuestionDisplay.php

@@ -16 +16 @@
     $results = $dbi->get("Question", array("uid" => $uid));
     (is_array($results)) ? $result = $results[0] : $result = $results;  //ternary operation!
-    $output += "HTML CODE HERE!";
+    $output += '
+<div id="questionUID" class="smallFrame">
+                    <div class="smallTitle"><div class="listNumber">1</div>#QUESTION-IDENT-NO</div>
+                    <div class="content">
+                        <p class="questionBody">
+                            This is the question body text. This is what the user will read when he/she is answering the survey.This is the question body text. This is what the user will read when he is answering the survey.This is the question body text. This is what the user will read when he is answering the survey.
+                        </p>
+                        <div class="questionParamsView">
+                            PARAMETERS GO HERE, probably in one line (Only answer type and identifier?) Tags?
+                        </div>
+                    </div>
+                    <div id="questionDisplayControls" class="controls">
+                        <input type="button" value="Edit" onClick="javascript:alert(\'editing not yet supported\');" class =" smallButton"/>
+                        <input type="button" value="Remove" onClick="javascript:alert(\'removing not yet supported\');" class =" smallButton"/>
+                    </div>
+                </div>
+';
 }