From d9531acc422b7bac0f99b1a7fe491c92fa7d3e56 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 19 May 2021 16:03:37 +0200
Subject: [PATCH] wait #4471 @2

---
 js/libs/fluidbook/fluidbook.js      |   8 ++-
 js/libs/fluidbook/fluidbook.menu.js | 107 +++++++++++++++++-----------
 2 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 1d519c5d..5453cd3e 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -381,9 +381,13 @@ Fluidbook.prototype = {
         window.location.hash = "#/page/" + this.normalizePage(page);
     },
     changeAddress: function () {
+        var hash = window.location.hash;
+        if ($('.mview[data-hash="' + hash + '"]').length > 0) {
+            return;
+        }
         var $this = this;
         var page;
-        var args = window.location.hash.split('/');
+        var args = hash.split('/');
         var defaultStartPage = 1;
 
         if (FLUIDBOOK_START_PAGE !== undefined) {
@@ -409,6 +413,7 @@ Fluidbook.prototype = {
         $(this).trigger('fluidbook.hashchange', [args.slice()]);
 
         if (args[1] === 'closeview') {
+            s
             return this.setCurrentPage(this.currentPage);
         } else if (args[1] === 'page') {
             var anchor = false;
@@ -431,6 +436,7 @@ Fluidbook.prototype = {
             if (this.landingpage !== undefined) {
                 this.landingpage.hide();
             }
+
             this.menu._closeView(function () {
                 if (page !== $this.currentPage) {
                     $this.pagetransitions.pageTransition(page);
diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index cc9c2ff2..ef9852ae 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -11,9 +11,12 @@ FluidbookMenu.prototype = {
         // Note: iOS won't catch click events unless the element has a cursor:pointer style
         // This was added for #viewOverlay in the CSS
         // More details: https://stackoverflow.com/a/16006333
-        $(document).on('click', ".mview .back, #viewOverlay", function () {
+        $(document).on('click', ".mview .button.back, #viewOverlay", function (e) {
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+            e.preventDefault();
             $this.closeView(function () {
-            }, true);
+            }, false);
             return false;
         });
 
@@ -38,7 +41,6 @@ FluidbookMenu.prototype = {
     },
 
     _openView: function (view, param1, param2, callback) {
-        console.log(view, param1, param2);
         var $this = this;
         var preload = {
             index: 'thumbnails',
@@ -162,14 +164,19 @@ FluidbookMenu.prototype = {
         }, 420);
     },
 
-    viewWrap: function (content, menu, attributes, cls, replace) {
+    viewWrap: function (content, menu, attributes, cls, replace, hash) {
         if (attributes === undefined) {
             attributes = '';
         }
         if (cls === undefined) {
             cls = '';
         }
-        var res = '<div class="mview ' + cls + '" data-menu="' + menu + '" role="dialog" aria-labelledby="mview-dialog-title"' + attributes + '>' + content + '</div>';
+        if (hash !== undefined) {
+            hash = ' data-hash="' + hash + '"';
+        } else {
+            hash = '';
+        }
+        var res = '<div class="mview ' + cls + '"' + hash + ' data-menu="' + menu + '" role="dialog" aria-labelledby="mview-dialog-title"' + attributes + '>' + content + '</div>';
         if (replace === true) {
             $("#view").html(res);
         } else {
@@ -200,7 +207,8 @@ FluidbookMenu.prototype = {
     },
 
     openMultimedia: function (multimedia, callback) {
-        var a = $('a[href="#/multimedia/' + multimedia + '"]');
+        var hash = '#/multimedia/' + multimedia;
+        var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-multimedia'));
         var view = this.getCaption('', $(a).attr('data-popup-close') === null || $(a).attr('data-popup-close') === undefined || $(a).attr('data-popup-close') === '1');
         var links = '';
@@ -216,7 +224,7 @@ FluidbookMenu.prototype = {
 
         var read = multimedia.indexOf('r_') == 0 ? ' data-readmode="1"' : '';
         read += ' dir="ltr"';
-        this.viewWrap(view, 'multimedia', read);
+        this.viewWrap(view, 'multimedia', read, '', false, hash);
 
         if (animateLinks) {
             this.fluidbook.links.doAnimateLinks($("#view"), 500);
@@ -234,7 +242,7 @@ FluidbookMenu.prototype = {
         this._openiframe(markup, '', callback);
     },
 
-    _openiframe: function (markup, maxWidth, callback) {
+    _openiframe: function (markup, maxWidth, callback,hash) {
 
         var $this = this;
 
@@ -243,7 +251,7 @@ FluidbookMenu.prototype = {
         view += markup;
         view += '</div></div>';
 
-        this.viewWrap(view, 'iframe', maxWidth + ' dir="ltr"');
+        this.viewWrap(view, 'iframe', maxWidth + ' dir="ltr"','',false,hash);
         if (callback != undefined) {
             callback();
         }
@@ -263,7 +271,8 @@ FluidbookMenu.prototype = {
     },
 
     openIframe: function (iframe, callback) {
-        var href = '#/iframe/' + iframe;
+        var hash='#/iframe/' + iframe;
+        var href = hash;
         var a = $('a[href="' + href + '"]');
         if ($(a).length === 0) {
             a = this.fluidbook.links.getLinkByHref(href);
@@ -274,17 +283,18 @@ FluidbookMenu.prototype = {
         if ($(a).data('max-width')) {
             maxWidth = ' data-max-width="' + $(a).data('max-width') + '"';
         }
-        this._openiframe(markup, maxWidth, callback);
+        this._openiframe(markup, maxWidth, callback,hash);
     },
 
     openVideo: function (video, callback) {
-        var a = $('a[href="#/video/' + video + '"]');
+        var hash = '#/video/' + video;
+        var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-video'));
         var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        this.viewWrap(view, 'video');
+        this.viewWrap(view, 'video', '', '', false, hash);
 
         this.fluidbook.stats.track(11);
         this.fluidbook.initVideos();
@@ -302,13 +312,14 @@ FluidbookMenu.prototype = {
     },
 
     openSlideshow: function (slideshow, callback) {
-        var a = $('a[href="#/slideshow/' + slideshow + '"]');
+        var hash = '#/slideshow/' + slideshow;
+        var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-slideshow'));
         var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        this.viewWrap(view, 'slideshow');
+        this.viewWrap(view, 'slideshow', '', '', false, hash);
 
         // TODO: check which type should be passed to fluidbook.stats.track() ???
         // this.fluidbook.stats.track(11);
@@ -339,13 +350,14 @@ FluidbookMenu.prototype = {
         return '<a href="#/closeview" role="button" aria-label="' + this.fluidbook.l10n.__('close') + '" aria-keyshortcuts="Escape" class="button back' + c + '">' + getSpriteIcon('interface-close') + '</a>';
     },
     openAudio: function (audio, callback) {
-        var a = $('a[href="#/audio/' + audio + '"]');
+        var hash = '#/audio/' + audio;
+        var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-audio'));
         var view = this.getCaption();
         view += '<div class="content">';
         view += markup;
         view += '</div>';
-        this.viewWrap(view, 'audio');
+        this.viewWrap(view, 'audio', '', '', false, hash);
         this.fluidbook.stats.track(11);
         var $this = this;
         var times = [250, 500, 750, 1000, 1250];
@@ -359,14 +371,15 @@ FluidbookMenu.prototype = {
         }
     },
     openWebVideo: function (service, video, callback) {
-        var a = $('a[href="#/webvideo/' + service + '/' + video + '"]');
+        var hash = '#/webvideo/' + service + '/' + video;
+        var a = $('a[href="' + hash + '"]');
         var markup = decodeURIComponent($(a).attr('data-video'));
 
         var view = this.getCaption();
         view += '<div class="content noscroll">';
         view += markup;
         view += '</div>';
-        this.viewWrap(view, 'webvideo');
+        this.viewWrap(view, 'webvideo', '', '', false, hash);
         this.fluidbook.initVideos();
         this.fluidbook.stats.track(11);
 
@@ -401,7 +414,7 @@ FluidbookMenu.prototype = {
         });
         view += '</ul>';
         view += '</div>';
-        this.viewWrap(view, 'locales');
+        this.viewWrap(view, 'locales',[],'',false,'#/locales');
         if (callback != undefined) {
             callback();
         }
@@ -588,15 +601,17 @@ FluidbookMenu.prototype = {
             callback = function () {
             };
         }
-
-        var currentHash = window.location.hash;
-        window.location.hash = '/page/' + this.fluidbook.currentPage;
-        if (window.location.hash == currentHash) {
+        if (all || $("#view .mview").length <= 1) {
+            var currentHash = window.location.hash;
+            window.location.hash = '#/page/' + this.fluidbook.currentPage;
+            if (window.location.hash == currentHash) {
+                this._closeView(callback, true, animate);
+            }
+        } else {
             this._closeView(callback, all, animate);
         }
     },
     _closeView: function (callback, all, animate) {
-        this.hideOverlay();
         var $this = this;
         if (all == undefined) {
             all = false;
@@ -607,6 +622,7 @@ FluidbookMenu.prototype = {
 
         all = all || ($("#view .mview").length <= 1);
         if (!this.viewMode()) {
+            this.hideOverlay();
             callback();
             return;
         }
@@ -628,9 +644,12 @@ FluidbookMenu.prototype = {
         }
 
         if (all) {
+            this.hideOverlay();
             $("#view").attr('aria-hidden', 'true');
             $("#main").attr('aria-hidden', 'false').show();
             $('body').removeClass('view');
+        } else {
+            window.location.hash = $("#view .mview").eq(-2).data('hash');
         }
         resize();
     },
@@ -646,16 +665,24 @@ FluidbookMenu.prototype = {
         if (hh == undefined) {
             hh = this.fluidbook.resize.hh;
         }
-        var m = $(".mview");
+
+        $("#viewOverlay").css({width: ww, height: hh});
+
+        var $this = this;
+        $('.mview').each(function () {
+            $this.resizeView($(this), ww, hh);
+        })
+    },
+
+    resizeView: function (m, ww, hh) {
         var w = ww * 0.6;
         var h = hh * 0.8;
+        var s = 1;
         var forceHeight = false;
         var contentHeight = null;
         var fullscreen = m.data('fullscreen') === '1';
         var nw, nh;
 
-        $("#viewOverlay").css({width: ww, height: hh});
-
         var maxWidth = 100000;
         if (m.data('max-width')) {
             maxWidth = m.data('max-width');
@@ -669,7 +696,6 @@ FluidbookMenu.prototype = {
                     this.fluidbook.settings.chaptersColumns = 1;
                 }
 
-                var w;
                 if (this.fluidbook.settings.chaptersColumns > 1) {
                     w = this.fluidbook.settings.chaptersColMaxWidth * this.fluidbook.settings.chaptersColumns;
                 } else {
@@ -686,9 +712,9 @@ FluidbookMenu.prototype = {
 
                 if (this.fluidbook.settings.chaptersColumns > 1) {
                     if (w < this.fluidbook.settings.chaptersColMaxWidth * this.fluidbook.settings.chaptersColumns) {
-                        $('.mview[data-menu=chapters] ul.chapters').addClass('onecolumn');
+                        $(m).find('ul.chapters').addClass('onecolumn');
                     } else {
-                        $('.mview[data-menu=chapters] ul.chapters').removeClass('onecolumn');
+                        $(m).find('ul.chapters').removeClass('onecolumn');
                     }
                 }
 
@@ -775,7 +801,7 @@ FluidbookMenu.prototype = {
                 var rw = parseInt($("#grandvision-cart").css('width'));
                 var rh = parseInt($("#grandvision-cart").css('height'));
                 if (ww < rw || hh < rh) {
-                    var s = Math.min(ww / rw, h / rh);
+                    s = Math.min(ww / rw, h / rh);
                 } else {
                     s = 1;
                 }
@@ -810,7 +836,7 @@ FluidbookMenu.prototype = {
                 }
                 break;
             case 'webvideo':
-                var w = Math.max(ww * 0.8, 600);
+                w = Math.max(ww * 0.8, 600);
                 h = (w / 16) * 9;
                 if (h > hh * 0.9) {
                     h = hh * 0.9;
@@ -832,15 +858,15 @@ FluidbookMenu.prototype = {
 
                 forceHeight = true;
 
-                var w = Math.max(ww * 0.8);
-                var h = Math.max(hh * 0.8);
+                w = Math.max(ww * 0.8);
+                h = Math.max(hh * 0.8);
                 if (ww < 600) {
                     w = ww;
                     h = hh;
                     fullscreen = true;
                 }
 
-                var s = Math.min(w / nw, h / nh, maxVideoScale); // Make sure scale doesn't go above maxVideoScale...
+                s = Math.min(w / nw, h / nh, maxVideoScale); // Make sure scale doesn't go above maxVideoScale...
 
                 if (!fullscreen) {
                     w = nw * s;
@@ -861,15 +887,15 @@ FluidbookMenu.prototype = {
                 nw = parseInt($(iframe).data('width'));
                 nh = parseInt($(iframe).data('height'));
 
-                var w = Math.max(ww * 0.8);
-                var h = Math.max(hh * 0.8);
+                w = Math.max(ww * 0.8);
+                h = Math.max(hh * 0.8);
                 if (ww < 600) {
                     w = ww;
                     h = hh;
                     fullscreen = true;
                 }
 
-                var s, x, y;
+                var x, y;
                 if (readmode) {
                     w = nw;
                     forceHeight = false;
@@ -964,7 +990,6 @@ FluidbookMenu.prototype = {
                     var d = this.fluidbook.links_zoomhd.getContainerDimensions();
                     w = d.width;
                     h = d.height;
-                    console.log(d);
                 }
                 break;
             case 'archives':
@@ -994,7 +1019,7 @@ FluidbookMenu.prototype = {
         w = Math.min(maxWidth, w);
 
         css = {};
-        ccss = {};
+        var ccss = {};
         if (fullscreen) {
             w = ww;
             h = hh;
-- 
2.39.5