# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1493131231 -3600
# Node ID be138735977b9eab77964b1d86efef60336cb9ef
# Parent  f7ea4470bdd65799d032ba19ffa933484634a0ad
#141 Publishing ordinal with example XML

diff -r f7ea4470bdd6 -r be138735977b interfaces/ordinal.js
--- a/interfaces/ordinal.js	Tue Apr 25 15:27:52 2017 +0100
+++ b/interfaces/ordinal.js	Tue Apr 25 15:40:31 2017 +0100
@@ -77,6 +77,7 @@
     // Create a slider box
     var slider = document.createElement("div");
     slider.id = "slider";
+    slider.style.height = "300px";
 
     // Global parent for the comment boxes on the page
     var feedbackHolder = document.createElement('div');
@@ -163,6 +164,40 @@
             index += 1;
         }
     });
+    interfaceObj.options.forEach(function (option) {
+        if (option.type == "show") {
+            switch (option.name) {
+                case "playhead":
+                    var playbackHolder = document.getElementById('playback-holder');
+                    if (playbackHolder === null) {
+                        playbackHolder = document.createElement('div');
+                        playbackHolder.style.width = "100%";
+                        playbackHolder.align = 'center';
+                        playbackHolder.appendChild(interfaceContext.playhead.object);
+                        feedbackHolder.appendChild(playbackHolder);
+                    }
+                    break;
+                case "page-count":
+                    var pagecountHolder = document.getElementById('page-count');
+                    if (pagecountHolder === null) {
+                        pagecountHolder = document.createElement('div');
+                        pagecountHolder.id = 'page-count';
+                    }
+                    pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>';
+                    var inject = document.getElementById('interface-buttons');
+                    inject.appendChild(pagecountHolder);
+                    break;
+                case "volume":
+                    if (document.getElementById('master-volume-holder') === null) {
+                        feedbackHolder.appendChild(interfaceContext.volume.object);
+                    }
+                    break;
+                case "comments":
+                    interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true);
+                    break;
+            }
+        }
+    });
     resizeWindow();
 }
 
@@ -294,7 +329,7 @@
             elem = elem.nextElementSibling;
         }
         return position;
-    }
+    };
 
     this.processMovement = function () {
         var time = audioEngineContext.timer.getTestTime();
@@ -302,7 +337,7 @@
         var rank = pos / (audioEngineContext.audioObjects.length - 1);
         audioObject.metric.moved(time, rank);
         console.log('slider ' + audioObject.id + ' moved to ' + rank + ' (' + time + ')');
-    }
+    };
 
     this.enable = function () {
         // This is used to tell the interface object that playback of this node is ready
@@ -316,10 +351,17 @@
     this.startPlayback = function () {
         // Called when playback has begun
         root.classList.add("playing");
+        if (audioObject.commentDOM) {
+            audioObject.commentDOM.trackComment.classList.add("comment-box-playing");
+        }
     };
     this.stopPlayback = function () {
         // Called when playback has stopped. This gets called even if playback never started!
         root.classList.remove("playing");
+        playing = false;
+        if (audioObject.commentDOM) {
+            audioObject.commentDOM.trackComment.classList.remove("comment-box-playing");
+        }
     };
     this.getValue = function () {
         // Return the current value of the object. If there is no value, return 0
@@ -366,6 +408,7 @@
     var N = audioEngineContext.audioObjects.length;
     w /= N;
     w -= 14;
+    w = Math.floor(w);
     $(".ordinal-element").width(w);
 }
 
diff -r f7ea4470bdd6 -r be138735977b tests/examples/ordinal_example.xml
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tests/examples/ordinal_example.xml	Tue Apr 25 15:40:31 2017 +0100
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+    <waet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="test-schema.xsd">
+        <setup interface="ordinal" projectReturn="save.php" randomiseOrder="true">
+            <metric>
+                <metricenable>testTimer</metricenable>
+                <metricenable>elementTimer</metricenable>
+                <metricenable>elementInitialPosition</metricenable>
+                <metricenable>elementTracker</metricenable>
+                <metricenable>elementFlagListenedTo</metricenable>
+                <metricenable>elementFlagMoved</metricenable>
+                <metricenable>elementListenTracker</metricenable>
+            </metric>
+            <interface>
+                <interfaceoption type="check" name="fragmentComment" />
+                <interfaceoption type="show" name='playhead' />
+                <interfaceoption type="show" name="page-count" />
+                <interfaceoption type="show" name="volume" />
+                <interfaceoption type="show" name="comments" />
+            </interface>
+        </setup>
+        <page id='test-0' hostURL="media/example/" randomiseOrder='true' repeatCount='0' loop='true' loudness="-23">
+            <title>Ordinal Evaluation</title>
+            <interface></interface>
+            <audioelement url="0.wav" id="track-1" />
+            <audioelement url="1.wav" id="track-2" />
+            <audioelement url="2.wav" id="track-3" />
+            <audioelement url="3.wav" id="track-4" />
+            <audioelement url="4.wav" id="track-5" />
+            <audioelement url="5.wav" id="track-6" />
+            <audioelement url="6.wav" id="track-7" />
+            <audioelement url="7.wav" id="track-8" />
+        </page>
+    </waet>