Merge remote-tracking branch 'anastasia/FLUID-5205' into FLUID-5205

src/instructionalDemos/framework/preferences/conditionalAdjusters1/js/auxiliarySchema.js

@@ -67,7 +67,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.vol",
                     container: ".mpe-speaking-vol",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             wpm: {
@@ -78,7 +78,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.wpm",
                     container: ".mpe-speaking-wpm",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             incSize: {
@@ -100,7 +100,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.cursor",
                     container: ".mpe-increasing-cursor",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             magFactor: {
@@ -111,7 +111,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.magFactor",
                     container: ".mpe-increasing-magFactor",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             magPos: {

src/instructionalDemos/framework/preferences/conditionalAdjusters2/conditional.html

@@ -89,7 +89,7 @@
 
         <div class="overview">
             <h1>Test of Composite Panels With Conditional Show/Hide of Adjusters</h1>
-            <p>This demo illustrates a single composite panels a collection of adjusters that are dependent on one of two boolean adjusters.</p>
+            <p>This demo illustrates a single composite panel with a collection of adjusters that are dependent on one of two boolean adjusters.</p>
             <p>Initially*, you should see only two on/off switches in the panel. Turning one preference on should reveal dependent adjusters, and turning the preference off should hide them. Each of the two preferences has its own set of dependent adjusters.</p>
             <p>Turning one preference on and off should not affect the visibility of the other boolean's dependent adjusters.</p>
             <p>Any values set with the dependent adjusters should be preserved even if the controlling preference is turned off.</p>

src/instructionalDemos/framework/preferences/conditionalAdjusters2/js/auxiliarySchema.js

@@ -58,7 +58,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.vol",
                     container: ".mpe-speaking-vol",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             wpm: {
@@ -69,7 +69,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.wpm",
                     container: ".mpe-speaking-wpm",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             incSize: {
@@ -91,7 +91,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.cursor",
                     container: ".mpe-increasing-cursor",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             magFactor: {
@@ -102,7 +102,7 @@ var demo = demo || {};
                 panel: {
                     type: "demo.panels.magFactor",
                     container: ".mpe-increasing-magFactor",
-                    template: "%prefix/slide-template.html"
+                    template: "%prefix/slider-template.html"
                 }
             },
             magPos: {

src/instructionalDemos/framework/preferences/shared/css/demo.css

@@ -1,12 +1,38 @@
+.overview {
+    margin: 0 2em 2em 2em;
+}
 
-.fl-prefsEditor-separatedPanel .fl-prefsEditor-panels li.fl-prefsEditor-panel { width: auto; min-width: 25em; }
+.fl-prefsEditor-separatedPanel .fl-prefsEditor-panels li.fl-prefsEditor-panel {
+    width: auto;
+    min-width: 25em;
+}
 
-.fl-prefsEditor-onoff { margin: 1em 0; }
+.fl-prefsEditor-onoff {
+    margin: 1em 0;
+}
 
-.overview { margin: 0 2em 2em 2em; }
+.mpe-increasing {
+    width: 30em;
+}
 
-.mpe-increasing, .mpe-speakIncrease { width: 30em;}
+.mpe-speakIncrease {
+    width: 60em;
+}
 
-.mpe-slider { padding: 1.5em 0; }
+.mpe-slider {
+    padding: 1.5em 0;
+}
+.fl-prefsEditor .mpe-slider .fl-slider {
+    margin-top: 1em;
+}
 
-.mpe-increasing-magPos { float: right; }
+.mpe-increasing-magPos {
+    float: right;
+}
+
+.mpe-speakIncrease ul.fl-inputs {
+    border: 1px solid gray;
+    padding: 0 1em 2em 1em;
+    display: inline-block;
+    width: 25em;
+}

src/instructionalDemos/framework/preferences/shared/html/radioButton-template.html

@@ -1,3 +1,4 @@
+<div class="mpe-radio-label"></div>
 <div class="mpe-radioRow">
     <input type="radio" class="mpe-radioInput" name="radioButton" id="radioButton"/>
     <label for="radioButton" class="mpe-radioLabel">    </label>

src/instructionalDemos/framework/preferences/shared/html/slide-template.html → src/instructionalDemos/framework/preferences/shared/html/slider-template.html

@@ -1,9 +1,8 @@
 <div class="mpe-slider">
+    <label for="min-val" class="mpe-slider-label"></label>
     <div class="fl-inputs">
         <div class="fl-force-left">
-            <div class="fl-icon-small-a" aria-label="Icon of a small capital letter 'A'" role="img"></div>
             <div class="flc-textfieldSlider-slider fl-force-left fl-slider fl-slider-horz"> </div>
-            <div class="fl-icon-big-a" aria-label="Icon of a large capital letter 'A'" role="img"></div>            
         </div>
         <div class="fl-slider-input"><input id="min-val" class="flc-textfieldSlider-field" type="text" /> <span class="mpe-multiplier"></span></div>
     </div>

src/instructionalDemos/framework/preferences/shared/html/speakIncrease.html

@@ -1,10 +1,14 @@
-<h2><span class="fl-icon-links"></span><span class="mpe-speaking-header heading-text"></span></h2>
-<ul class="fl-inputs">
-    <li class="mpe-speaking-onOff"></li>
-    <li class="mpe-speaking-wpm"></li>
-    <li class="mpe-speaking-vol"></li>
-    <li class="mpe-increasing-onOff"></li>
-    <li class="mpe-increasing-magPos"></li>
-    <li class="mpe-increasing-cursor"></li>
-    <li class="mpe-increasing-magFactor"></li>
-</ul>
+<div class="mpe-speakIncrease">
+    <h2><span class="fl-icon-links"></span><span class="mpe-speakIncrease-header heading-text"></span></h2>
+    <ul class="fl-inputs">
+        <li class="mpe-speaking-onOff"></li>
+        <li class="mpe-speaking-wpm"></li>
+        <li class="mpe-speaking-vol"></li>
+    </ul>
+    <ul class="fl-inputs">
+        <li class="mpe-increasing-onOff"></li>
+        <li class="mpe-increasing-magPos"></li>
+        <li class="mpe-increasing-cursor"></li>
+        <li class="mpe-increasing-magFactor"></li>
+    </ul>
+</div>

src/instructionalDemos/framework/preferences/shared/js/panels.js

@@ -77,6 +77,7 @@ var demo = demo || {};
             }
         },
         selectors: {
+            label: ".mpe-slider-label",
             vol: ".mpe-slider",
             multiplier: ".mpe-slider-multiplier"
         },
@@ -118,6 +119,7 @@ var demo = demo || {};
             }
         },
         selectors: {
+            label: ".mpe-slider-label",
             wpm: ".mpe-slider",
             multiplier: ".mpe-slider-multiplier"
         },
@@ -159,10 +161,12 @@ var demo = demo || {};
             }
         },
         selectors: {
+            label: ".mpe-slider-label",
             cursor: ".mpe-slider",
             multiplier: ".mpe-slider-multiplier"
         },
         protoTree: {
+            label: {messagekey: "cursorLabel"},
             multiplier: {messagekey: "cursorMultiplier"},
             cursor: {
                 decorators: {
@@ -199,10 +203,12 @@ var demo = demo || {};
             }
         },
         selectors: {
+            label: ".mpe-slider-label",
             magFactor: ".mpe-slider",
             multiplier: ".mpe-slider-multiplier"
         },
         protoTree: {
+            label: {messagekey: "magFactorLabel"},
             multiplier: {messagekey: "magFactorMultiplier"},
             magFactor: {
                 decorators: {
@@ -231,13 +237,17 @@ var demo = demo || {};
      */
     fluid.defaults("demo.panels.magPos", {
         gradeNames: ["fluid.prefs.panel", "autoInit"],
+rendererOptions: {
+    debugMode: true
+},
         preferenceMap: {
             "demo.magnifierPosition": {
                 "model.magPos": "default",
                 "controlValues.magPos": "enum"
             }
         },
         selectors: {
+            label: ".mpe-radio-label",
             magPosRow: ".mpe-radioRow",
             magPosLabel: ".mpe-radioLabel",
             magPosInput: ".mpe-radioInput"
@@ -247,6 +257,7 @@ var demo = demo || {};
         },
         repeatingSelectors: ["magPosRow"],
         protoTree: {
+            label: {messagekey: "magPosLabel"},
             expander: {
                 type: "fluid.renderer.selection.inputs",
                 rowID: "magPosRow",

src/instructionalDemos/framework/preferences/shared/messages/increasing.json

@@ -1,8 +1,11 @@
 {
     "increasingHeader": "Increase Size",
     "incSize": "Magnification",
-    "magFactorMultiplier": "Magnification Factor",
-    "cursorMultiplier": "Cursor Size",
+    "magFactorLabel": "Magnification Factor",
+    "magFactorMultiplier": "times",
+    "cursorLabel": "Cursor Size",
+    "cursorMultiplier": "percent",
+    "magPosLabel": "Magnifier Position",
     "magPos-centre": "Centre",
     "magPos-left": "Left",
     "magPos-right": "Right",

src/instructionalDemos/framework/preferences/shared/messages/speakIncrease.json

@@ -1,18 +1,19 @@
 {
-    "increasingHeader": "Increase Size",
+    "speakIncreaseHeader": "Speaking and Increasing",
     "incSize": "Magnification",
-    "magFactorMultiplier": "Magnification Factor",
-    "cursorMultiplier": "Cursor Size",
+    "magFactorLabel": "Magnification Factor",
+    "magFactorMultiplier": "times",
+    "cursorLabel": "Cursor Size",
+    "cursorMultiplier": "percent",
+    "magPosLabel": "Magnifier Position",
     "magPos-centre": "Centre",
     "magPos-left": "Left",
     "magPos-right": "Right",
     "magPos-top": "Top",
     "magPos-bottom": "Bottom",
-    "speakingHeader": "Visual Alternatives",
     "speakText": "Speak Text",
-    "volLabel": "vol label",
-    "volMultiplier": "vol mult",
-    "wpmLabel": "wpm label",
-    "wpmMultiplier": "wpm mult"
-
+    "volLabel": "Volume",
+    "volMultiplier": "percent",
+    "wpmLabel": "Words-per-min",
+    "wpmMultiplier": "words"
 }

src/instructionalDemos/framework/preferences/shared/messages/speaking.json

@@ -1,9 +1,8 @@
 {
-    "speakingHeader": "Visual Alternatives",
+    "speakingHeader": "Speaking",
     "speakText": "Speak Text",
-    "volLabel": "vol label",
-    "volMultiplier": "vol mult",
-    "wpmLabel": "wpm label",
-    "wpmMultiplier": "wpm mult"
-
+    "volLabel": "Volume",
+    "volMultiplier": "percent",
+    "wpmLabel": "Words-per-min",
+    "wpmMultiplier": "words"    
 }