Client-side paging

Configuration/TypoScript/Plugins/kitodo.typoscript

@@ -55,6 +55,23 @@ plugin.tx_dlf_metadata {
     }
 }
 
+plugin.tx_dlf_metadata_prerender < plugin.tx_dlf_metadata
+plugin.tx_dlf_metadata_prerender {
+    settings {
+        prerenderAllSections = 1
+    }
+}
+
+# --------------------------------------------------------------------------------------------------------------------
+# document
+# --------------------------------------------------------------------------------------------------------------------
+plugin.tx_dlf_document < tt_content.list.20.dlf_document
+plugin.tx_dlf_document {
+    settings {
+        targetPidMetadata = {$config.prerenderMetadataPid}
+    }
+}
+
 # --------------------------------------------------------------------------------------------------------------------
 # pageview / workview
 # --------------------------------------------------------------------------------------------------------------------
@@ -63,6 +80,7 @@ plugin.tx_dlf_pageview {
     settings {
         features =
         elementId = tx-dfgviewer-map
+        progressElementId = tx-dfgviewer-page-progress
     }
 }
 
@@ -106,6 +124,7 @@ plugin.tx_dlf_tableofcontents < tt_content.list.20.dlf_tableofcontents
 plugin.tx_dlf_tableofcontents {
     settings {
         targetPid = {$config.kitodoPageView}
+        showFull = 1
         menuConf {
             expAll = 1
         }
@@ -133,7 +152,7 @@ lib.kitodo.navigation.pagecontrol < tt_content.list.20.dlf_navigation
 lib.kitodo.navigation.pagecontrol {
     settings {
         pageStep = 10
-        features = pageFirst,pageBack,pageStepBack,pageForward,pageStepForward,pageLast
+        features = pageFirst,pageStepBack,pageBack,pageForward,pageStepForward,pageLast
     }
 }
 

Configuration/TypoScript/constants.typoscript

@@ -15,6 +15,9 @@ config {
     # cat=plugin.tx_dfgviewer/links/050; type=int+; label=Kitodo Page View
     kitodoPageView =
 
+    # cat=plugin.tx_dfgviewer/links/051; type=int+; label=PID for Prerendered Metadata
+    prerenderMetadataPid =
+
     # cat=plugin.tx_dfgviewer/piwik/010; type=string; label=Piwik Hostname
     piwik_hostname =
 

Resources/Private/JavaScript/dfgviewerScripts.js

@@ -6,7 +6,7 @@
 
 !*/
 
-$(document).ready(function() {
+$(document).ready(function () {
 
     // check mobile device to specify click events
     function mobileCheck() {
@@ -19,25 +19,25 @@ $(document).ready(function() {
     var mobileEvent = mobileCheck() ? 'touchend' : 'click';
 
     // menu toggles for offcanvas toc and metadata
-    $('.offcanvas-toggle').on(mobileEvent, function(event) {
+    $('.offcanvas-toggle').on(mobileEvent, function (event) {
         $(this).parent().toggleClass('open');
     });
 
     // active toggle for submenus
-    $('.document-functions li.submenu > a').on(mobileEvent, function(event) {
+    $('.document-functions li.submenu > a').on(mobileEvent, function (event) {
         $('li.submenu.open a').not(this).parent().removeClass('open');
         $(this).parent().toggleClass('open');
         return false;
     });
 
     // secondary nav toggle
-    $('nav .nav-toggle').on(mobileEvent, function(event) {
+    $('nav .nav-toggle').on(mobileEvent, function (event) {
         $(this).toggleClass('active');
         $('nav .viewer-nav').toggleClass('open');
     });
 
     // calendar dropdowns
-    $('.calendar-view .contains-issues').on(mobileEvent, function(event) {
+    $('.calendar-view .contains-issues').on(mobileEvent, function (event) {
         $('.calendar-view table td.open').not($(this).parent()).removeClass('open');
         $(this).parent().toggleClass('open');
     });
@@ -47,18 +47,18 @@ $(document).ready(function() {
 
     // Inject view switch functions for calendar/list view (initial show calendar)
     $('.tx-dfgviewer-newspaper-calendar .calendar-list-selection a.select-calendar-view, .tx-dfgviewer-newspaper-calendar .calendar-view').addClass('active');
-    $('.tx-dfgviewer-newspaper-calendar .calendar-list-selection a').on(mobileEvent, function(event) {
-        if(!$(this).hasClass('active')) {
-        var targetElement = '.'+$(this).attr('class').replace('select-','');
-        $('.tx-dfgviewer-newspaper-calendar .active').removeClass('active');
-        $(this).addClass('active');
-        $(targetElement).addClass('active');
+    $('.tx-dfgviewer-newspaper-calendar .calendar-list-selection a').on(mobileEvent, function (event) {
+        if (!$(this).hasClass('active')) {
+            var targetElement = '.' + $(this).attr('class').replace('select-', '');
+            $('.tx-dfgviewer-newspaper-calendar .active').removeClass('active');
+            $(this).addClass('active');
+            $(targetElement).addClass('active');
         }
     });
 
     // Avoid broken image display if METS definitions are wrong
-    $('.provider img').each(function() {
-        if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) {
+    $('.provider img').each(function () {
+        if ((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == 'uninitialized') {
             $(this).parents('.document-functions').addClass('missing-provider-image');
         }
     });
@@ -77,8 +77,8 @@ $(document).ready(function() {
     // Shorten mobile meta title
     shortenMobileMetaElement = $('.provider dl.mobile-meta dd.tx-dlf-title a');
     shortenMobileMetaTitle = shortenMobileMetaElement.text();
-    if(shortenMobileMetaTitle.length > 140) {
-        shortenMobileMetaTitle = shortenMobileMetaTitle.substr(0,140) + '...';
+    if (shortenMobileMetaTitle.length > 140) {
+        shortenMobileMetaTitle = shortenMobileMetaTitle.substr(0, 140) + '...';
         shortenMobileMetaElement.text(shortenMobileMetaTitle);
     }
 
@@ -102,8 +102,8 @@ $(document).ready(function() {
     }
 
     // enable click on fullscreen button
-    $('a.fullscreen').on(mobileEvent, function() {
-        if($('body.fullscreen')[0]) {
+    $('a.fullscreen').on(mobileEvent, function () {
+        if ($('body.fullscreen')[0]) {
             exitFullscreen();
         } else {
             enterFullscreen();
@@ -156,6 +156,7 @@ $(document).ready(function() {
         $('#browser-hint').addClass('hidden');
     }
 
+
     // Finally all things are settled. Bring back animations a second later.
     setTimeout(function () {
         localStorage.clear();
@@ -165,14 +166,71 @@ $(document).ready(function() {
 
 });
 
-$(document).keyup(function(e) {
+(function () {
+    let docController = null;
+    window.addEventListener('tx-dlf-documentLoaded', (e) => {
+        docController = e.detail.docController;
+
+        // Update URL in page grid button
+        docController.eventTarget.addEventListener('tx-dlf-stateChanged', e => {
+            if (docController === null) {
+                return;
+            }
+
+            $('#dfgviewer-enable-grid-view')
+                .attr('href', docController.makePageUrl(e.detail.page, true));
+        });
+    });
+
+    $('.tx-dlf-navigation-doubleOn').click(function (e) {
+        if (docController === null) {
+            return;
+        }
+
+        e.preventDefault();
+        docController.changeState({
+            source: 'navigation',
+            simultaneousPages: 2,
+        });
+    });
+
+    $('.tx-dlf-navigation-doubleOff').click(function (e) {
+        if (docController === null) {
+            return;
+        }
+
+        e.preventDefault();
+        docController.changeState({
+            source: 'navigation',
+            simultaneousPages: 1,
+        });
+    });
+
+    $('.tx-dlf-navigation-doublePlusOne').click(function (e) {
+        if (docController === null) {
+            return;
+        }
+
+        e.preventDefault();
+        const pageIdx = docController.currentPageNo - 1;
+        const simultaneousPages = docController.simultaneousPages;
+
+        const rectoVerso = pageIdx % simultaneousPages;
+        const newRectoVerso = (rectoVerso + 1) % simultaneousPages;
+        const newPageNo = (pageIdx - rectoVerso + newRectoVerso) + 1;
+
+        docController.changePage(newPageNo);
+    });
+})();
+
+$(document).keyup(function (e) {
 
     // Check if ESC key is pressed. Then end fullscreen mode or close SRU form.
     if (e.keyCode == 27) {
-        if($('body.fullscreen')[0]) {
+        if ($('body.fullscreen')[0]) {
             return exitFullscreen();
         }
-        if($('.document-functions .search.open')[0]) {
+        if ($('.document-functions .search.open')[0]) {
             $('.document-functions .search').removeClass('open');
         }
     }
@@ -185,22 +243,22 @@ $(document).keyup(function(e) {
 
 // Activate fullscreen mode and set corresponding cookie
 function enterFullscreen() {
-    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 220);
+    setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 220);
     $("body").addClass('fullscreen');
     $('a.fullscreen').addClass('active');
     Cookies.set('tx-dlf-pageview-zoomFullscreen', 'true', { sameSite: 'lax' });
 }
 
 // Exit fullscreen mode and drop cookie
 function exitFullscreen() {
-    setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 220);
+    setTimeout(function () { window.dispatchEvent(new Event('resize')); }, 220);
     $("body").removeClass('fullscreen');
     $('a.fullscreen').removeClass('active');
     Cookies.remove('tx-dlf-pageview-zoomFullscreen');
 }
 
 // hide warning about outdated browser and save decision to cookie
-function hideBrowserAlert(){
+function hideBrowserAlert() {
 
     $('#browser-hint').addClass('hidden');
     Cookies.set('tx-dlf-pageview-hidebrowseralert', 'true', { sameSite: 'lax' });

Resources/Private/Less/components/controls.less

@@ -734,6 +734,10 @@
                             left: 20px;
                         }
                     }
+                    a.disabled {
+                        opacity: 0.3;
+                        cursor: not-allowed;
+                    }
                     &.prev {
                         a, span {
                             top: 0;
@@ -778,6 +782,10 @@
                 }
                 &.over {
                     span {
+                        a.disabled {
+                            opacity: 0.3;
+                            cursor: not-allowed;
+                        }
                         &.prev {
                             a, span {
                                 color: @base-blue;
@@ -796,7 +804,7 @@
                                 }
                             }
                             span {
-                                opacity: .3;
+                                opacity: 0.3;
                             }
                         }
                         &.first {
@@ -806,8 +814,9 @@
                             a {
                                 opacity: 1;
                             }
-                            span {
+                            a.disabled, span {
                                 opacity: 0.3;
+                                cursor: not-allowed;
                             }
                         }
                     }
@@ -824,6 +833,10 @@
                             right: 20px;
                         }
                     }
+                    a.disabled {
+                        opacity: 0.3;
+                        cursor: not-allowed;
+                    }
                     &.next {
                         a, span {
                             top: 0;
@@ -888,8 +901,9 @@
                             a {
                                 opacity: 1;
                             }
-                            span {
+                            a.disabled, span {
                                 opacity: 0.3;
+                                cursor: not-allowed;
                             }
                         }
                     }

Resources/Private/Less/structure.less

@@ -160,6 +160,71 @@ a {
         right: 0;
         bottom: 0;
         left: 0;
+
+        .tx-dlf-page-progress {
+            display: none;
+            &.loading {
+                display: block;
+            }
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            margin: 0;
+            width: 100%;
+            height: 5px;
+
+            -webkit-appearance: none;
+            appearance: none;
+
+            border: none;
+            border-radius: 0px;
+            background: transparent;
+
+            &::-moz-progress-bar {
+                background-color: @base-blue;
+            }
+
+            .bounce() {
+                background-color: @light-blue;
+                animation: bounce_slider 2s linear infinite;
+                transform-origin: left;
+            }
+
+            &:not([value]) {
+                &::after {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 5px;
+                    content: '';
+                    .bounce();
+                }
+
+                &::-moz-progress-bar {
+                    .bounce();
+                }
+            }
+
+            @keyframes bounce_slider {
+                0% {
+                    transform:  translateX(0%) scaleX(15%);
+                }
+                50% {
+                    transform:  translateX(85%) scaleX(15%);
+                }
+                100% {
+                    transform:  translateX(0%) scaleX(15%);
+                }
+            }
+        }
+        ::-webkit-progress-value {
+            background-color: @base-blue;
+        }
+        ::-webkit-progress-bar {
+            background-color: transparent;
+        }
     }
     .document-functions {
         .provider {