From e7a44ea8022d67b1dc794c885f17cca40ec36cc6 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Mon, 28 Jul 2025 16:35:18 +0200 Subject: [PATCH] wait #7547 @4 --- _index.html | 3 +- js/libs/fluidbook/fluidbook.keyboard.js | 81 +++++++++++++++++-------- style/fluidbook.less | 9 +++ 3 files changed, 67 insertions(+), 26 deletions(-) diff --git a/_index.html b/_index.html index 05e0f54c..509fc7b0 100644 --- a/_index.html +++ b/_index.html @@ -15,7 +15,7 @@ } body, html { - background-color: ; + background-color: ; width: 100%; height: 100%; } @@ -34,6 +34,7 @@ + diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js index dd0aae0e..68c29808 100644 --- 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 8658a2b1..b5e48567 100644 --- 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; } -- 2.39.5