Fix Thumbnail view (replace gridpager)

dvoracek-slub · Mar 21, 2022 · 0cf9eb8 · 0cf9eb8
1 parent df56127
commit 0cf9eb8
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 268 deletions.
diff --git a/Classes/Plugins/GridPager.php b/Classes/Plugins/GridPager.php
diff --git a/Configuration/TCA/Overrides/tt_content.php b/Configuration/TCA/Overrides/tt_content.php
@@ -1,24 +1,6 @@
 <?php
 defined('TYPO3_MODE') or die();
 
-// Plugin "gridpager".
-$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_excludelist'][$extKey.'_gridpager'] = 'layout,select_key,pages,recursive';
-
-$GLOBALS['TCA']['tt_content']['types']['list']['subtypes_addlist'][$extKey.'_gridpager'] = 'pi_flexform';
-
-$extKey = 'dfgviewer';
-
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPlugin(
-    [
-        'LLL:EXT:dfgviewer/locallang.xml:tt_content.dfgviewer_gridpager',
-        $extKey.'_gridpager'
-    ],
-    'list_type',
-    $extKey
-);
-
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue($extKey.'_gridpager', 'FILE:EXT:'.$extKey.'/Configuration/Flexforms/GridPager.xml');
-
 // Plugin "uri".
 $GLOBALS['TCA']['tt_content']['types']['list']['subtypes_excludelist'][$extKey.'_uri'] = 'layout,select_key,pages,recursive';
 

diff --git a/Configuration/TypoScript/Page/header.typoscript b/Configuration/TypoScript/Page/header.typoscript
@@ -9,7 +9,7 @@ page {
     highlight = EXT:dfgviewer/Resources/Public/JavaScript/Highlight/styles/magula.css
   }
   includeJSFooterlibs {
-    jQuery = EXT:dfgviewer/Resources/Public/JavaScript/jQuery/jquery-3.5.1.min.js
+    jQuery = EXT:dfgviewer/Resources/Public/JavaScript/jQuery/jquery-3.6.0.min.js
     jQuery.forceOnTop = 1
     jQueryUiMouseSlider = EXT:dlf/Resources/Public/Javascript/jQueryUI/jquery-ui-mouse-slider-resizable-autocomplete.js
     dfgviewer = EXT:dfgviewer/Resources/Public/JavaScript/webScripts.js

diff --git a/Configuration/TypoScript/Plugins/kitodo.typoscript b/Configuration/TypoScript/Plugins/kitodo.typoscript
@@ -108,12 +108,25 @@ plugin.tx_dlf_pageview {
   fileGrpImages = MIN,MAX,DEFAULT
 }
 
+# --------------------------------------------------------------------------------------------------------------------
+# thumbnail previews
+# --------------------------------------------------------------------------------------------------------------------
+plugin.tx_dlf_pagegrid < tt_content.list.20.dlf_pagegrid
 plugin.tx_dlf_pagegrid {
-  pages = {$config.storagePid}
-  limit = 24
-  placeholder = EXT:dfgviewer/Resources/Public/Images/GridPlaceHolder.jpg
-  targetPid = #
-  templateFile = {$config.templateFileGrid}
+    settings {
+        targetPid = #
+        placeholder = EXT:dfgviewer/Resources/Public/Images/GridPlaceHolder.jpg
+        paginate {
+            itemsPerPage = 24
+            insertAbove = 0
+            insertBelow = 1
+            lessPages = 1
+            forcedNumberOfLinks = 5
+            pagesBefore = 3
+            pagesAfter = 3
+            section =
+        }
+    }
 }
 
 # --------------------------------------------------------------------------------------------------------------------
@@ -129,6 +142,8 @@ plugin.tx_dlf_tableofcontents {
         }
     }
 }
+
+
 plugin.tx_dlf_tableofcontentss {
   pages = {$config.storagePid}
   excludeOther = 0
@@ -212,10 +227,17 @@ plugin.tx_dlf_imagemanipulationtool {
     }
 }
 
+plugin.tx_dlf_pdfdownloadtool < plugin.tx_dlf_toolbox
+plugin.tx_dlf_pdfdownloadtool {
+    settings {
+        tools = pdfdownloadtool
+    }
+}
+
 # --------------------------------------------------------------------------------------------------------------------
 # Audio player
 # --------------------------------------------------------------------------------------------------------------------
-plugin.tx_dlf_audioplayer < tt_content.list.20.dlf_tableofcontents
+plugin.tx_dlf_audioplayer < tt_content.list.20.dlf_audioplayer
 plugin.tx_dlf_audioplayer {
     settings {
         excludeOther = 0

diff --git a/Resources/Private/Less/modules/gridview.less b/Resources/Private/Less/modules/gridview.less
@@ -36,12 +36,6 @@
             width: 100%;
             object-fit: contain;
         }
-        .tx-dlf-pagegrid-pagination {
-            margin-top: 5px;
-            font-weight: 700;
-            font-size: 12px;
-            color: @light-blue;
-        }
     }
     @media screen and (min-width: @tabletViewportWidth) {
         top: 80px;
@@ -59,4 +53,99 @@
     }
 }
 
-// EOF
+
+.tx-dlf-pagegrid .f3-widget-paginator {
+    position: absolute;
+    bottom: 15px;
+    height: 1px;
+    width: 290px;
+    left: 50%;
+    margin-left: -145px;
+    line-height: 0;
+    background: green;
+    .text-hide();
+    display: flex;
+    a {
+        position: absolute;
+        bottom: 0;
+        display: none;
+        width: 40px;
+        height: 40px;
+        &:before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: -1px;
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            background-color: white;
+            content: " ";
+        }
+        &:first-child {
+            display: block;
+            left: 0;
+            &:before {
+                background-position: -240px -80px;
+            }
+        }
+        &:last-child {
+            display: block;
+            right: 0;
+            &:before {
+                background-position: -280px -80px;
+            }
+        }
+    }
+    .current {
+        width: 40px;
+        height: 40px;
+    }
+    @media screen and (min-width: @tabletLandscapeViewportWidth) {
+        height: 70px;
+        padding: 15px 0;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 30px;
+        color: white;
+        white-space: nowrap;
+        width: auto;
+        margin: 0;
+        .transform(translateX(-50%));
+        -moz-font-feature-settings: "lnum";
+        -webkit-font-feature-settings: "lnum";
+        font-feature-settings: "lnum";
+        background: fade(@base-blue, 90%);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        a,
+        a:first-child,
+        a:last-child {
+            color: @base-blue;
+            position: relative;
+            display: inline-block;
+            bottom: auto;
+            margin: 0 3px;
+            left: auto;
+            right: auto;
+            background: white;
+            border-radius: 20px;
+            width: 30px;
+            height: 30px;
+            &:before {
+                display: none;
+            }
+        }
+    }
+    @media screen and (min-width: @desktopViewportWidth) {
+        font-size: 18px;
+        line-height: 40px;
+        a,
+        a:first-child,
+        a:last-child {
+            width: 40px;
+            height: 40px;
+        }
+    }
+}
+
+// EOF