From a994b4624c911015d2c571ee30700f8bdd72e273 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 19 Oct 2020 18:06:20 +0200
Subject: [PATCH] wip #3971 @0.75

---
 images/interface.svg                          | 42 +++++++++++++++++++
 js/libs/fluidbook/fluidbook.accessibility.js  |  6 +--
 .../fluidbook/fluidbook.audiodescription.js   | 17 +++-----
 js/libs/fluidbook/fluidbook.background.js     |  2 +-
 style/accessibility.less                      | 36 ++++++++++++++++
 style/interface.less                          | 20 ---------
 6 files changed, 86 insertions(+), 37 deletions(-)

diff --git a/images/interface.svg b/images/interface.svg
index 216ef97b..45abeb79 100644
--- 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 f422464e..08842c23 100644
--- 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 0f0e9bfa..3c954d07 100644
--- 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 21812aa8..9efaafc3 100644
--- 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 7b873624..418d031b 100644
--- 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 789d3d7f..782d263d 100644
--- 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;
-- 
2.39.5