]> _ Git - fluidbook-html5.git/commitdiff
wip #3755 @4
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 3 Jul 2020 13:05:44 +0000 (15:05 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Fri, 3 Jul 2020 13:05:44 +0000 (15:05 +0200)
js/libs/fluidbook/fluidbook.bookmarks.js
js/libs/fluidbook/fluidbook.help.js
js/libs/fluidbook/fluidbook.interface.js
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.keyboard.js
js/libs/fluidbook/fluidbook.menu.js
js/libs/fluidbook/fluidbook.nav.js
js/libs/fluidbook/fluidbook.search.js
js/libs/fluidbook/links/fluidbook.links.zoom.js

index def03894464c3ee01cdfe50fc13d8a25d4fefe86..3f199051b6e7cdfb882279f03a1e3325039a2aab 100644 (file)
@@ -72,7 +72,18 @@ FluidbookBookmarks.prototype = {
         for (var i in this.bookmarks) {
             this.addBookmark(this.bookmarks[i], true);
         }
+
+        this.fluidbook.keyboard.initBookmarksShortcuts();
+    },
+
+    toggleSide: function (side) {
+        var b = $('a.bookmark.' + side);
+        if (b.length === 0) {
+            b = $('a.bookmark');
+        }
+        $(b).click();
     },
+
     sortGroup: function (a, b) {
         var p_a = this.getPagesOfGroup(a)[0];
         var p_b = this.getPagesOfGroup(b)[0];
@@ -386,13 +397,20 @@ FluidbookBookmarks.prototype = {
         if (permanentIcon) {
             side += ' permanent';
         }
+        var shortcut = "Control+Alt+D";
+        if (side === 'left') {
+            shortcut = "Control+Shift+D";
+        }
 
         bookmarks += "<a href=\"#\" class=\"bookmark " + side + "\" data-page=\"" + pageNr + "\"";
+        bookmarks += ' data-keyshortcuts="' + shortcut + '"'
         if (this.isBookmarked(pageNr)) {
             bookmarks += " data-enabled=\"enabled\"";
             bookmarks += " data-tooltip=\"" + this._txtRemove + "\"";
+            bookmarks += " aria-label=\"" + this._txtRemove + "\"";
         } else {
             bookmarks += " data-tooltip=\"" + this._txtAdd + "\"";
+            bookmarks += " aria-label\"" + this._txtAdd + "\"";
         }
 
         bookmarks += '>' + getSpriteIcon('bookmark-corner') + '</a>';
index f2f334d490ef0fdb8702adc8dd95af1dd71b02ee..079ceaf3906931833fc6c775e66279e334c48f0d 100644 (file)
@@ -167,8 +167,8 @@ FluidbookHelp.prototype = {
 
         $(document).on('click', '.icon-help', function (e) {
             $this.show();
-            if (fluidbook.nav.menuIsOpen) {
-                fluidbook.nav.menuAPI.close();
+            if ($this.fluidbook.nav.menuIsOpen) {
+                $this.fluidbook.nav.menuAPI.close();
             }
             e.preventDefault();
         });
index 6ac393e1fb659a0c3e244ff4651aa3160963a444..8b43c5d96e4e1e1799ced37ea7dd246785a4c65c 100644 (file)
@@ -22,20 +22,20 @@ FluidbookInterface.prototype = {
             var res = '';
             if ($('html').hasClass('ltr')) {
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'Right');
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'next', '', labels.next, 'arrow-top', true, '', 'ArrowRight');
                 res += this.fluidbook.nav.getLink('interface-last', '#', 'last', '', labels.last, 'arrow-bottom', true ,'','End');
                 res += '</div>';
                 res += '<div id="prev-arrows">';
-                res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'Left');
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'ArrowLeft');
                 res += this.fluidbook.nav.getLink('interface-first', '#', 'first', '', labels.first, 'arrow-bottom', true, '', 'Home');
                 res += '</div>';
             } else {
                 res += '<div id="next-arrows">';
-                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'Right');
+                res += this.fluidbook.nav.getLink('interface-next', '#', 'previous', '', labels.previous, 'arrow-top', true, '', 'ArrowRight');
                 res += this.fluidbook.nav.getLink('interface-last', '#', 'first', '', labels.first, 'arrow-bottom', true, 'Home');
                 res += '</div>';
                 res += '<div id="prev-arrows">';
-                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true, 'Left');
+                res += this.fluidbook.nav.getLink('interface-prev', '#', 'next', '', labels.next, 'arrow-top', true, 'ArrowLeft');
                 res += this.fluidbook.nav.getLink('interface-first', '#', 'last', '', labels.last, 'arrow-bottom', true, 'End');
                 res += '</div>';
             }
index 4de1cdc23096214e4c67b0d25774de90e8799e1c..7c16acf58c05e8da8d13783d4f9c39856f6c1588 100644 (file)
@@ -45,6 +45,7 @@ Fluidbook.prototype = {
         this.contentlock = new FluidbookContentLock(this);
         this.menu = new FluidbookMenu(this);
         this.support = new FluidbookSupport(this);
+        this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.search = new FluidbookSearch(this);
         this.mobilefirst = new FluidbookMobileFirst(this);
         this.zoom = new FluidbookZoom(this);
@@ -65,7 +66,6 @@ Fluidbook.prototype = {
             this.touch = new FluidbookTouch(this);
         }
         this.background = new FluidbookBackground(this);
-        this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.video = new FluidbookVideo(this);
         this.bookmarks = new FluidbookBookmarks(this);
         this.tooltip = new FluidbookTooltip(this);
index de10da5736cb1d02cbe9ee7e2a314fcc666d9e45..0a044aee49b3f5fda74b2714469dc658b2776f74 100644 (file)
@@ -7,11 +7,65 @@ function FluidbookKeyboard(fluidbook) {
 FluidbookKeyboard.prototype = {
     initKeyboardShortcuts: function () {
         var $this = this;
-        key('escape', function () {
-            $this.fluidbook.help.hide();
-            $this.fluidbook.menu.closeView(function () {
+        key.filter = function (event) {
+            var e = $(event.target || event.srcElement);
+            return !(e.is('input:not(#q),select,textarea'));
+        }
+        this.keyShortcut('escape', function () {
+            if ($this.fluidbook.help.isVisible()) {
+                $this.fluidbook.help.hide();
+            }
+            if ($this.fluidbook.menu.viewMode()) {
+                $this.fluidbook.menu.closeView(function () {
+
+                }, true, true);
+            }
+            $this.fluidbook.search.closeSearch();
+            if ($this.fluidbook.nav.menuIsOpen) {
+                $this.fluidbook.nav.closeMenu();
+            }
+            if (screenfull.isFullscreen) {
+                screenfull.exit();
+            }
+        });
+        if (this.fluidbook.settings.fullscreen) {
+            this.keyShortcut('f11', function () {
+                screenfull.toggle();
+            });
+        }
+
+        if (!this.fluidbook.settings.print) {
+            this.keyShortcut('ctrl+p', function () {
+            });
+        }
+    },
 
-            }, true, true);
+    initBookmarksShortcuts: function () {
+        var $this = this;
+        this.keyShortcut('ctrl+alt+d', function () {
+            $this.fluidbook.bookmarks.toggleSide('right');
+        });
+        this.keyShortcut('ctrl+shift+d', function () {
+            $this.fluidbook.bookmarks.toggleSide('left');
+        });
+    },
+
+    initSearchShortcuts: function () {
+        var $this = this;
+        key('f3', function () {
+            if ($this.fluidbook.search.isResultNavOpened()) {
+                $this.fluidbook.search.nextResultsPage();
+            } else {
+                $this.fluidbook.nav.openSearch();
+            }
+            return false;
+        });
+
+        key('shift+f3', function () {
+            if ($this.fluidbook.search.isResultNavOpened()) {
+                $this.fluidbook.search.previousResultsPage();
+            }
+            return false;
         });
     },
 
@@ -20,11 +74,7 @@ FluidbookKeyboard.prototype = {
             return;
         }
         key(this.checkShortcuts(shortcuts), function () {
-            console.log('triggered ' + shortcuts)
             func();
-            if(shortcuts==='f11'){
-                return true;
-            }
             return false;
         });
     },
@@ -57,7 +107,7 @@ FluidbookKeyboard.prototype = {
         var $this = this;
         shortcuts = shortcuts.split(' ');
         var res = [];
-        var map = {control: 'ctrl'};
+        var map = {control: 'ctrl', arrowleft: 'left', arrowright: 'right', arrowup: 'up', arrowdown: 'down'};
         $.each(shortcuts, function (k, shortcut) {
             if (shortcut === '') {
                 return;
index 604669e631dffcac44973b9cb0611b449c571d55..e2f8257dec0a73f1471c071591d57242615737ee 100644 (file)
@@ -273,7 +273,7 @@ FluidbookMenu.prototype = {
         } else {
             c = ' ' + c;
         }
-        return '<a href="#/closeview" class="button back' + c + '">' + getSpriteIcon('interface-close') + '</a>';
+        return '<a href="#/closeview" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" class="button back' + c + '">' + getSpriteIcon('interface-close') + '</a>';
     }
     ,
     openAudio: function (audio, callback) {
index 187e20fe4697fac0ef34faf4de896a4975071fa7..d2cd1994bbb317902e24e8cf67fafc95934427e9 100644 (file)
@@ -175,7 +175,7 @@ FluidbookNav.prototype = {
 
 
         // Make sure that the link gets a unique ID when it is used in both menus
-        var elementID = (navType === undefined || navType===null || navType==='') ? id : navType + '_' + id;
+        var elementID = (navType === undefined || navType === null || navType === '') ? id : navType + '_' + id;
 
         res += ' id="' + elementID + '"';
 
@@ -443,7 +443,7 @@ FluidbookNav.prototype = {
             } else if (icon === 'bookmark' && this.fluidbook.settings.bookmark) {
                 link = this.addLink(navType, 'nav-bookmarks', '#/bookmark', 'bookmarks', 'bookmarks', 'bookmarks', 'Control+B');
             } else if (icon === 'pdf' && this.fluidbook.settings.pdf) {
-                link = this.addLink(navType, 'nav-download', '#', 'download', 'download', 'download', 'Control+Alt+D');
+                link = this.addLink(navType, 'nav-download', '#', 'download', 'download', 'download', 'Control+S');
             } else if (icon === 'print' && this.fluidbook.settings.print) {
                 link = this.addLink(navType, 'nav-print', '#', 'print', 'print', 'print', 'Control+P');
             } else if (icon === 'basket' && this.fluidbook.cart !== undefined && this.fluidbook.cart.enabled) {
@@ -484,7 +484,6 @@ FluidbookNav.prototype = {
 
             } else if (icon === 'fullscreen' && this.fluidbook.support.fullscreen && !this.fluidbook.settings.phonegap) {
                 link = this.addLink(navType, 'nav-' + icon, '#', icon, 'full screen', 'switch between fullscreen and normal', 'F11');
-
             } else if (icon === 'sound' && this.fluidbook.sound.enabled) {
                 link = this.addLink(navType, 'nav-sound-on', '#', 'sound-on', 'switch off the sound', 'switch on / switch off the sound', 'F10');
                 link2 = this.addLink(navType, 'nav-sound-off', '#', 'sound-off', 'switch on the sound', 'switch on / switch off the sound', 'Alt+A');
@@ -771,6 +770,7 @@ FluidbookNav.prototype = {
                 if (screenfull.isFullscreen) {
                     $('.icon-fullscreen').addClass('active');
                 } else {
+                    window.focus();
                     $('.icon-fullscreen').removeClass('active');
                 }
                 resize();
@@ -779,6 +779,7 @@ FluidbookNav.prototype = {
             setTimeout(function () {
                 resize();
             }, 1000);
+            window.focus();
         });
 
     },
@@ -829,7 +830,7 @@ FluidbookNav.prototype = {
             }
         });
 
-        return '<a href="#" id="' + buttonID + '">' + getSpriteIcon('interface-close') + '</a>';
+        return '<a href="#" id="' + buttonID + '" aria-label="' + $this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>';
     },
 
     getSearch: function () {
index 3b946048ee40dac6a101f3e4fa7c044f3bfb62d2..32312ba0e5603b883eb452a96cc6cad63536340a 100644 (file)
@@ -51,6 +51,9 @@ FluidbookSearch.prototype = {
     // The results nav bar provides navigation between results without needing the menu to be open
     // When it is active, the rest of the interface is hidden
     initResultsNav: function () {
+
+        this.fluidbook.keyboard.initSearchShortcuts();
+
         var $this = this;
 
         // Previously we used buttons in the HTML for clickable elements
@@ -63,11 +66,11 @@ FluidbookSearch.prototype = {
         html += '<div class="searchResultsNavQuery"></div>';
         html += '</div>'; // .searchResultsNavField
         html += '<div class="searchResultsNavArrows">';
-        html += '<div class="button searchResultsPrev"></div>';
+        html += '<div class="button searchResultsPrev" aria-label="' + this.fluidbook.l10n.__('previous result') + '" aria-keyshortcuts="Shift+F3"></div>';
         html += '<div class="searchResultsNavCounter"></div>';
-        html += '<div class="button searchResultsNext"></div>';
+        html += '<div class="button searchResultsNext" aria-label="' + this.fluidbook.l10n.__('next result') + '" aria-keyshortcuts="F3"></div>';
         html += '</div>'; // .searchResultsNavArrows
-        html += '<div class="button searchResultsNavClose">';
+        html += '<div class="button searchResultsNavClose" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape">';
         html += getSpriteIcon('interface-close');
         html += '</div>'; // .searchResultsNavClose
         html += '</div>'; // #searchResultsNav
@@ -112,12 +115,11 @@ FluidbookSearch.prototype = {
                 $this.closeResultsNav();
             }
         })
-
-
     },
     resultsNavActive: function () {
         return $('body').hasClass(this.resultsActiveClass);
     },
+
     updateResultsNav: function (resultPage) {
 
         // If we are in landscape view, there are 2 pages visible,
@@ -156,6 +158,11 @@ FluidbookSearch.prototype = {
         this.resultsNav.removeClass('hidden');
         $('body').addClass(this.resultsActiveClass);
     },
+
+    isResultNavOpened: function () {
+        return $('body').hasClass(this.resultsActiveClass);
+    },
+
     closeResultsNav: function (keepSearch) {
         keepSearch = keepSearch !== 'undefined' ? keepSearch : false;
 
index 2fb6a0b463c819bcc6ff2d62a4ccb75d6fac5563..68a485ddb75541b3951760a56b50bd08d47c1d91 100644 (file)
@@ -214,7 +214,7 @@ FluidbookLinksZoom.prototype = {
                 }
                 menu += '</div></div>';
                 $groupWrapper.append('<div id="zoomPopupBackground"><div class="bg"></div></div>' + menu);
-                $groupWrapper.append('<a href="#" class="zoomPopupClose">' + getSpriteIcon('interface-close') + '</a>');
+                $groupWrapper.append('<a href="#" class="zoomPopupClose" aria-label="'+$this.fluidbook.l10n.__('close')+'" aria-keyshortcuts="Escape">' + getSpriteIcon('interface-close') + '</a>');
             }
 
             var z = $('#zoomPopup_' + zoomID),