comparison interfaces/ape.js @ 3041:0a5f34a5eec6

Implemented #78 for APE. Plus some APE fixes

         var node = interfaceContext.createCommentQuestion(element);
         feedbackHolder.appendChild(node.holder);
     });
 
     //testWaitIndicator();
+    module.resize();
 }
 
 function ape() {
     var axis = []
     var DOMRoot = document.getElementById("slider-holder");

                 s.stopped();
             });
         }
 
         this.getValue = function () {
-            return sliders[0].value();
+            return sliders[0].value;
         }
 
         this.getPresentedId = function () {
             return sliders[0].label;
         }

         function sliderInterface(AOI, axisInterface) {
             var trackObj = document.createElement('div');
             var labelHolder = document.createElement("span");
             var label = "";
             var metric = new metricTracker(this);
+            var value = Math.random();
             trackObj.align = "center";
             trackObj.className = 'track-slider track-slider-disabled';
             trackObj.appendChild(labelHolder);
-            trackObj.style.left = (Math.random() * $(sliderRail).width()) + 50 + "px";
             axisInterface.sliderRail.appendChild(trackObj);
             metric.initialise(this.value);
             this.setLabel = function (s) {
                 label = s;
             }
             this.resize = function (event) {
                 var width = $(axisInterface.sliderRail).width();
-                var w = Number(value * width + 50);
+                var w = Number(value * width);
                 trackObj.style.left = String(w) + "px";
             }
             this.playing = function () {
                 trackObj.classList.add("track-slider-playing");
             }

             Object.defineProperties(this, {
                 "DOM": {
                     "value": trackObj
                 },
                 "value": {
-                    "value": function () {
-                        var maxPix = $(axisInterface.sliderRail).width();
-                        var pix = trackObj.style.left.substr(0, trackObj.style.left.length - 2);
-                        return (pix - 50) / maxPix;
-                    }
-                },
-                "moveToPixel": {
-                    "value": function (pix) {
-                        var t = audioEngineContext.timer.getTestTime();
-                        trackObj.style.left = String(pix) + "px";
-                        metric.moved(t, this.value);
+                    "get": function () {
+                        return value;
+                    },
+                    "set": function (v) {
+                        if (v >= 0 && v <= 1) {
+                            value = v;
+                        }
+                        this.resize();
+                        return value;
                     }
                 },
                 "label": {
                     "get": function () {
                         return label;

                     "set": function () {}
                 }
             });
         }
 
+        function drawTick(position) {
+            var context = tickCanvas.getContext("2d"),
+                w = tickCanvas.width,
+                h = tickCanvas.height;
+            context.beginPath();
+            context.setLineDash([1, 2]);
+            context.moveTo(position * w, 0);
+            context.lineTo(position * w, h);
+            context.closePath();
+            context.stroke();
+        }
+
+        function clearTicks() {
+            var c = tickCanvas.getContext("2d"),
+                w = tickCanvas.width,
+                h = tickCanvas.height;
+            c.clearRect(0, 0, w, h);
+        }
+
         function createScaleMarkers(interfaceObject, root, w) {
+            var ticks = interfaceObject.options.findIndex(function (a) {
+                return (a.type == "show" && a.name == "ticks");
+            });
+            ticks = (ticks >= 0);
+            clearTicks();
             interfaceObject.scales.forEach(function (scaleObj) {
                 var position = Number(scaleObj.position) * 0.01;
                 var pixelPosition = (position * w) + 50;
                 var scaleDOM = document.createElement('span');
                 scaleDOM.className = "ape-marker-text";
                 scaleDOM.textContent = scaleObj.text;
                 scaleDOM.setAttribute('value', position);
                 root.appendChild(scaleDOM);
                 scaleDOM.style.left = Math.floor((pixelPosition - ($(scaleDOM).width() / 2))) + 'px';
+                if (ticks) {
+                    drawTick(position);
+                }
             }, this);
         }
         var sliders = [];
         var UI = {
             selected: undefined,

         sliderRail.id = "sliderrail-" + this.name;
         sliderRail.className = "slider";
         sliderRail.align = "left";
         DOMRoot.appendChild(sliderRail);
 
+        // Canvas for the markers
+        var tickCanvas = document.createElement("canvas");
+        tickCanvas.id = "ticks-" + this.name;
+        tickCanvas.className = "tick-canvas";
+        tickCanvas.height = 150;
+        tickCanvas.width = $(sliderRail).width() - 100;
+        tickCanvas.style.width = ($(sliderRail).width() - 100) + "px";
+        sliderRail.appendChild(tickCanvas);
+
         // Create the div to hold any scale objects
         var scale = document.createElement("div");
         scale.className = "sliderScale";
         scale.id = "slider-scale-holder-" + this.name;
         scale.slign = "left";

             var marginsize = 50;
             sliders.forEach(function (s) {
                 s.resize();
             });
             scale.innerHTML = "";
+            tickCanvas.width = $(sliderRail).width();
+            tickCanvas.style.width = tickCanvas.width + "px";
             createScaleMarkers(interfaceObject, scale, $(sliderRail).width());
         }
         this.playing = function (id) {
             var node = audioEngineContext.audioObjects.find(function (a) {
                 return a.id == id;

             }
             if (event.type == "mousemove") {
                 var move = event.clientX - 6;
                 var w = $(sliderRail).width();
                 move = Math.max(50, move);
-                move = Math.min(w + 50, move);
-                UI.selected.moveToPixel(move);
+                move = Math.min(w, move);
+                UI.selected.value = (move / w);
             } else if (event.type == "touchmove") {
                 var move = event.originalEvent.targetTouches[0].clientX - 6;
                 var w = $(event.currentTarget).width();
                 move = Math.max(50, move);
-                move = Math.min(w + 50, move);
-                UI.selected.moveToPixel(move);
+                move = Math.min(w, move);
+                UI.selected.value = (move / w);
             }
         }
         this.checkAllMoved = function () {
             var notMoved = sliders.filter(function (s) {
                 return !s.hasMoved();

         if (axis.length > 1) {
             AOIs.forEach(function (ao) {
                 ao.pageXMLSave(store);
             });
         }
+    }
+    this.resize = function (event) {
+        axis.forEach(function (a) {
+            a.resize(event);
+        });
     }
 }
 
 function outsideReferenceDOM(audioObject, index, inject) {
     this.parent = audioObject;

 function resizeWindow(event) {
     // Function called when the window has been resized.
     // MANDATORY FUNCTION
 
     // Resize the slider objects
-    for (var i = 0; i < interfaceContext.interfaceSliders.length; i++) {
-        interfaceContext.interfaceSliders[i].resize(event);
-    }
+    window.module.resize(event);
 }
 
 function pageXMLSave(store, pageSpecification) {
     // MANDATORY
     // Saves a specific test page