wip #3971 @0.75

diff --git a/images/interface.svg b/images/interface.svg
index 216ef97b7378063fad74dbada13fb11f2bfb50f4..45abeb79d39a7f8f19fee69b0b670e66652248e8 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -229,4 +229,46 @@
                c-1.2-2.6-3.4-4.6-6.1-5.6c-2.7-1-5.7-0.9-8.3,0.4c-2.6,1.2-4.6,3.4-5.6,6.1s-0.9,5.7,0.4,8.3c1.1,2.3,2.9,4.1,5.2,5.2
                c0.5,0.2,0.7,0.8,0.5,1.3C26.2,24.4,25.9,24.6,25.5,24.6z"/>
     </symbol>
+    <symbol id="audiodescription-on" viewBox="0 0 52 52">
+        <path d="M26,45.1C15.5,45.1,6.9,36.5,6.9,26S15.5,6.9,26,6.9S45.1,15.5,45.1,26S36.5,45.1,26,45.1z M26,9.1
+       C16.7,9.1,9.1,16.7,9.1,26c0,9.3,7.6,16.9,16.9,16.9c9.3,0,16.9-7.6,16.9-16.9C42.9,16.7,35.3,9.1,26,9.1z"/>
+        <g>
+            <defs>
+                <circle id="SVGID_1_" cx="26" cy="26" r="18"/>
+            </defs>
+            <clipPath id="SVGID_2_">
+                <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
+            </clipPath>
+            <g style="clip-path:url(#SVGID_2_);">
+                <path d="M7.6,35.2c4.9,2.2,13.8,2,14.6,1.2c0.8-0.8,0.3-3.4,0.3-3.8c0-0.7,0.7-1.2,0.7-1.7c0-1.4-5.6-1.1-5.2-4
+                               c0.1-0.5,5.3-1.2,5.7-2.4c0.2-0.5-0.8-3-0.8-3l2.3-1.1c0,0,0.9-0.4,1-1.1c0.1-0.6-0.7-1.9-0.7-1.9L18.6,6.6l-18.1,6"/>
+                <path d="M29.4,31.3l-1-1.1c0.9-0.8,1.4-1.9,1.4-3.1c0-1.2-0.5-2.3-1.4-3.1l1-1.1c1.2,1.1,1.8,2.6,1.8,4.1
+                               C31.2,28.8,30.6,30.3,29.4,31.3z"/>
+                <path d="M31.6,33.6l-1-1c1-1,2.3-2.8,2.3-5.3c0-2-0.8-3.9-2.3-5.3l1-1.1c1.7,1.6,2.7,3.9,2.7,6.3C34.3,29.6,33.4,31.9,31.6,33.6z
+                               "/>
+                <path d="M34.1,36l-1-1.1c2.1-2,3.3-4.8,3.3-7.8c0-2.9-1.2-5.7-3.3-7.8l1-1c2.4,2.4,3.7,5.6,3.7,8.8C37.8,30.6,36.5,33.7,34.1,36z
+                               "/>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="audiodescription-off" viewBox="0 0 52 52">
+        <path d="M26,45.1C15.5,45.1,6.9,36.5,6.9,26S15.5,6.9,26,6.9S45.1,15.5,45.1,26S36.5,45.1,26,45.1z M26,9.1
+               C16.7,9.1,9.1,16.7,9.1,26c0,9.3,7.6,16.9,16.9,16.9c9.3,0,16.9-7.6,16.9-16.9C42.9,16.7,35.3,9.1,26,9.1z"/>
+        <g>
+            <defs>
+                <circle id="SVGID_1_" cx="26" cy="26" r="18"/>
+            </defs>
+            <clipPath id="SVGID_2_">
+                <use xlink:href="#SVGID_1_" style="overflow:visible;"/>
+            </clipPath>
+            <g style="clip-path:url(#SVGID_2_);">
+                <path d="M7.6,35.2c4.9,2.2,13.8,2,14.6,1.2c0.8-0.8,0.3-3.4,0.3-3.8c0-0.7,0.7-1.2,0.7-1.7c0-1.4-5.6-1.1-5.2-4
+                                       c0.1-0.5,5.3-1.2,5.7-2.4c0.2-0.5-0.8-3-0.8-3l2.3-1.1c0,0,0.9-0.4,1-1.1c0.1-0.6-0.7-1.9-0.7-1.9L18.6,6.6l-18.1,6"/>
+            </g>
+        </g>
+        <rect x="32.6" y="21.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.1163 31.7768)" width="1.5"
+              height="12.7"/>
+        <rect x="26.9" y="27.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.1163 31.7768)" width="12.7"
+              height="1.5"/>
+    </symbol>
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.accessibility.js b/js/libs/fluidbook/fluidbook.accessibility.js
index f422464e68d357b6bc3babcada3eb72adbccb582..08842c2358da89fe5d76bb23c994cec14dbcb978 100644 (file)
--- a/js/libs/fluidbook/fluidbook.accessibility.js
+++ b/js/libs/fluidbook/fluidbook.accessibility.js
@@ -20,10 +20,8 @@ FluidbookAccessibility.prototype = {
     },
 
     endChangePage: function (page) {
-        // Handle audio descriptions
-        if (Modernizr.audio) {
-            this.audiodescription.setupPages();
-        }
+        console.log('change page '+page);
+        this.audiodescription.setupPages();
         this.updateTexts();
     },
 

diff --git a/js/libs/fluidbook/fluidbook.audiodescription.js b/js/libs/fluidbook/fluidbook.audiodescription.js
index 0f0e9bfa7b818c6aba6ffc0b23f7c6d6d6a40ef1..3c954d07910864fa2ab7765dfbf0e160a1102538 100644 (file)
--- a/js/libs/fluidbook/fluidbook.audiodescription.js
+++ b/js/libs/fluidbook/fluidbook.audiodescription.js
@@ -21,17 +21,8 @@ function FluidbookAudioDescription(fluidbook) {
     }
 
     // Button elements
-    this.buttonLeft = document.createElement('a');
-    this.buttonLeft.setAttribute('class', this.buttonClass + ' left');
-    this.buttonLeft.setAttribute('href', '#');
-    this.buttonLeft.setAttribute('role', 'button');
-    this.buttonLeft.setAttribute('aria-keyshortcuts', 'Ctrl+Shift+LeftArrow');
-    this.buttonRight = document.createElement('a');
-    this.buttonRight.setAttribute('class', this.buttonClass + ' right');
-    this.buttonRight.setAttribute('href', '#');
-    this.buttonRight.setAttribute('role', 'button');
-    this.buttonRight.setAttribute('aria-keyshortcuts', 'Ctrl+Shift+RightArrow');
-
+    this.buttonLeft = $('<a href="#" class="' + this.buttonClass + ' left" role="button" aria-keyshortcuts="Ctrl+Shift+LeftArrow">' + getSpriteIcon('audiodescription-on') + getSpriteIcon('audiodescription-off') + '</a>');
+    this.buttonRight = $('<a href="#" class="' + this.buttonClass + ' right" role="button" aria-keyshortcuts="Ctrl+Shift+RightArrow">' + getSpriteIcon('audiodescription-on') + getSpriteIcon('audiodescription-off') + '</a>');
     if (this.audioSupport) {
         this.init();
     }
@@ -95,6 +86,9 @@ FluidbookAudioDescription.prototype = {
     },
 
     setupPages: function () {
+        if (!this.audioSupport) {
+            return;
+        }
 
         this.pauseAllPlayers();
 
@@ -140,7 +134,6 @@ FluidbookAudioDescription.prototype = {
         }
 
         if (this.fluidbook.settings.audiodescription === undefined) return false;
-
         return (this.fluidbook.settings.audiodescription[page] !== undefined);
     },
 

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index 21812aa8a7739c5c58e67125a722e463de5cc359..9efaafc3eee93b5d328a35d5b804d508aaed5d81 100644 (file)
--- a/js/libs/fluidbook/fluidbook.background.js
+++ b/js/libs/fluidbook/fluidbook.background.js
@@ -37,7 +37,7 @@ FluidbookBackground.prototype = {
                     style = "background-image:none !important;background-color:" + back + " !important;";
                 }
                 $('#background').attr('style', style);
-                $("#prev-arrows,#next-arrows,#menuOpener").css('color', arrows);
+                $("#prev-arrows,#next-arrows,#menuOpener,.audio-description-button").css('color', arrows);
             });
         }
     },

diff --git a/style/accessibility.less b/style/accessibility.less
index 7b8736248021700cb30a2cf225a647abe2a5a67d..418d031b49bd12998b21e378d9bc899e4bbcdf8b 100644 (file)
--- a/style/accessibility.less
+++ b/style/accessibility.less
@@ -8,6 +8,42 @@
   width: 1px;
 }
 
+.audio-description-button {
+  background-color: @arrows-background;
+  color: @arrows-color;
+  width: 52px;
+  height: 52px;
+  background-size: 52px 52px;
+  display: inline-block;
+  border: 0;
+  position: absolute;
+  cursor: pointer;
+  transform-origin: 0% 0;
+
+  &.right {
+    right: 0;
+    transform-origin: 100% 0;
+  }
+
+  .audiodescription-on {
+    display: block;
+  }
+
+  .audiodescription-off {
+    display: none;
+  }
+
+  &.playing {
+    .audiodescription-on {
+      display: none;
+    }
+
+    .audiodescription-off {
+      display: block;
+    }
+  }
+}
+
 :focus {
   outline: #c00 6px solid;
 }

diff --git a/style/interface.less b/style/interface.less
index 789d3d7fdaa148ec3fe42b3ffa623262cb795132..782d263d1b601a9ddf0d61cdb89675a7128c6557 100644 (file)
--- a/style/interface.less
+++ b/style/interface.less
@@ -131,27 +131,7 @@
   transform-origin: 0 0;
 }
 
-.audio-description-button {
-  background-color: @arrows-background;
-  background-image: url("../data/images/interface-audio-description-on.svg");
-  width: 52px;
-  height: 52px;
-  background-size: 52px 52px;
-  display: inline-block;
-  border: 0;
-  position: absolute;
-  cursor: pointer;
-  transform-origin: 0% 0;
-
-  &.right {
-    right: 0;
-    transform-origin: 100% 0;
-  }
 
-  &.playing {
-    background-image: url("../data/images/interface-audio-description-off.svg");
-  }
-}
 
 .interfacecomponent {
   transition: opacity 100ms, top 100ms;