]> _ Git - fluidbook-html5.git/commitdiff
projects / fluidbook-html5.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a019f52)
wait #7547 @4
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 28 Jul 2025 14:35:18 +0000 (16:35 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 28 Jul 2025 14:35:18 +0000 (16:35 +0200)
_index.html patch | blob | history
js/libs/fluidbook/fluidbook.keyboard.js patch | blob | history
style/fluidbook.less patch | blob | history

diff --git a/_index.html b/_index.html
index 05e0f54c993f39d95a7f64a2358e2f9b32a2d94c..509fc7b08d511ea954692a1c07c2c4e957975024 100644 (file)
--- a/_index.html
+++ b/_index.html
@@ -15,7 +15,7 @@
         }
 
         body, html {
-            background-color: <!-- $bgcolor -->;
+            background-color: <!-- $ bgcolor -->;
             width: 100%;
             height: 100%;
         }
@@ -34,6 +34,7 @@
     <!-- $ga -->
 </head>
 <body data-branch="master">
+<a href="#" id="firstFocus"></a>
 <!--googleoff: all-->
 <!-- $beginbody -->
 <div id="svg-container" aria-hidden="true"><!-- $svg --></div>
diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index dd0aae0eb85b5f1867bbb5054be47503d2b275ae..68c29808414c6cb9059738344cc1f09e5e65e899 100644 (file)
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -2,11 +2,35 @@ function FluidbookKeyboard(fluidbook) {
     this.fluidbook = fluidbook;
     this.shortcuts = [];
     this.initKeyboardShortcuts();
+
+
+    /*
+    Next page icon
+    Previous page icon
+    Audio description icon ( listen to the page)
+    All clickable items in the page content (to be arranged in the correct order: Ticket 7467
+    Set / remove Bookmark;
+    Last page icon
+    First page icon
+    Fluidbook menu items Overview, Contents, etc…);
+    Client logo
+    Powered by fluidbook
+
+    Browser items / buttons
+     */
+    this.tabOrderSelectors = ['#next', '#previous', '.audio-description-wrapper.left', '.audio-description-wrapper.right', //.
+        '#links .leftContainer .linksHolder', '#links .rightContainer .linksHolder', //.
+        '#links .leftContainer .bookmark', '#links .rightContainer .bookmark',//.
+        '#last', '#first', //.
+        '#horizontalNav', '#menuOpener', //.
+        '#logo', //.
+        '#credits',];
+    this.ignoreFocus = false;
 }
 
 FluidbookKeyboard.prototype = {
     initKeyboardShortcuts: function () {
-        var $this = this;
+        let $this = this;
         hotkeys.filter = function (event) {
             var e = $(event.target || event.srcElement);
             return !(e.is('input:not(#q),select,textarea'));
@@ -15,26 +39,18 @@ FluidbookKeyboard.prototype = {
             $this.escape();
         });
         this.keyShortcut('tab,shift+tab', function (e, handler) {
+            $this.ignoreFocus = true;
             let dir = handler.shortcut === 'tab' ? 1 : -1;
-            if ($this.fluidbook.search.isResultNavOpened()) {
-                $this.tabNavigation('#searchResultsNav', dir);
-                e.preventDefault();
-            } else if ($this.fluidbook.nav.burger.isOpened) {
-                $this.tabNavigation('#menu', dir);
-                e.preventDefault();
-            } else if ($this.fluidbook.menu.viewMode()) {
-                $this.tabNavigation('.mview', dir);
+            if ($this.handleTab(dir)) {
                 e.preventDefault();
             } else {
-                if ($this.tabNavigationSections(['#next', '#previous', '.audio-description-wrapper.left', '.audio-description-wrapper.right', //.
-                    '#links .leftContainer .linksHolder', '#links .rightContainer .linksHolder', //.
-                    '#links .leftContainer .bookmark', '#links .rightContainer .bookmark', '#last', '#first', //.
-                    '#horizontalNav', '#menuOpener', //.
-                    '#logo', //.
-                    '#credits',], dir)) {
-                    e.preventDefault();
+                if (dir === -1) {
+                    $("#firstFocus").get(0).focus();
                 }
             }
+            setTimeout(function () {
+                $this.ignoreFocus = false;
+            }, 25);
         }, false, false);
 
 
@@ -56,6 +72,30 @@ FluidbookKeyboard.prototype = {
         setInterval(function () {
             $this.listenToIframeEscapeEvents();
         }, 500);
+
+        $("#firstFocus").on('focus', function () {
+            if (!$this.ignoreFocus) {
+                $this.handleTab(1);
+            }
+        });
+    },
+
+    handleTab: function (dir) {
+        if (this.fluidbook.search.isResultNavOpened()) {
+            this.tabNavigation('#searchResultsNav', dir);
+            return true;
+        } else if (this.fluidbook.nav.burger.isOpened) {
+            this.tabNavigation('#menu', dir);
+            return true;
+        } else if (this.fluidbook.menu.viewMode()) {
+            this.tabNavigation('.mview', dir);
+            return true;
+        } else {
+            if (this.tabNavigationSections(this.tabOrderSelectors, dir)) {
+                return true;
+            }
+        }
+        return false;
     },
 
     listenToIframeEscapeEvents: function () {
@@ -138,25 +178,18 @@ FluidbookKeyboard.prototype = {
             elements = $(selector).find(focusableElementsString);
         }
         var list = [];
-        console.log(selector,elements);
         $(elements).each(function () {
             if (parseInt($(this).attr('tabindex')) < 0) {
                 return;
             }
             if ($(this).parents('[tabindex="-1"],.ignore-tab-children').length === 0 && $(this).is(':visible')) {
                 list.push(this);
-            } else {
-                console.log('skip', this);
             }
         });
         if (list.length === 0) {
-            console.log(selector, 'nothing here');
             return false;
         }
         let res = this._navigate(list, dir, ['focus'], loop, switchList);
-        if (!res) {
-            console.log(selector, 'end of list');
-        }
         return res;
     },
 
@@ -176,7 +209,6 @@ FluidbookKeyboard.prototype = {
         var items = $(list);
         var nb = items.length;
         if (!nb) {
-            console.log('no item here', list);
             return false;
         }
         var next;
@@ -202,7 +234,6 @@ FluidbookKeyboard.prototype = {
         }
 
         var ne = $(items).eq(next);
-        console.log(items, ne);
         $.each(actions, function (k, action) {
             if (action === 'focus') {
                 $(ne).focus();
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 8658a2b103f60ece97786d826aec117827753da0..b5e48567624f82db2c6c4f560a4d7c80fc19b0df 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -188,6 +188,15 @@ body, html {
   opacity: 0;
 }
 
+#firstFocus, #lastFocus {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
 #hiddencontents {
   display: none;
 }
Unnamed repository; edit this file 'description' to name the repository.