Merge pull request #336 from markusweigelt/toggle-metadata

[FEATURE] Toggle metadata, toc and metadata subentries

Resources/Private/JavaScript/dfgviewerScripts.js

@@ -53,6 +53,49 @@ $(document).ready(function() {
         return false;
     });
 
+    // section toggle inside the sidebar on larger screens
+    $('.control-bar .control-bar-container h3').on('click', function () {
+        $(this).parent().toggleClass('section-hidden');
+    });
+
+    // toggle for full metadata display in sidebar
+    if ($('.control-bar .metadata-basic dl.tx-dlf-metadata-titledata').length > 1) {
+        var metadataToggleLabelMore = ($('html[lang^="de"]')[0]) ? 'mehr Metadaten anzeigen' : 'more Metadata';
+        var metadataToggleLabelLess = ($('html[lang^="de"]')[0]) ? 'weniger Metadaten anzeigen' : 'less Metadata';
+        $('.control-bar .metadata-basic').append('<div class="metadata-toggle">' + metadataToggleLabelMore + '</div>');
+        if (Cookies.get('tx-dlf-allmetadata') === 'true') {
+            $('.control-bar .metadata-basic').addClass('all-metadata').find('.metadata-toggle').text(metadataToggleLabelLess);
+            $('.control-bar .metadata-basic').find('dl.tx-dlf-metadata-titledata:nth-child(n+3)').show();
+        }
+        $('.metadata-toggle').on('click', function () {
+            if (!$('.control-bar .metadata-basic').hasClass('all-metadata')) {
+                Cookies.set('tx-dlf-allmetadata', 'true', {sameSite: 'lax'});
+                $(this).text(metadataToggleLabelLess);
+            } else {
+                Cookies.remove('tx-dlf-allmetadata');
+                $(this).text(metadataToggleLabelMore);
+            }
+            $('.control-bar .metadata-basic').toggleClass('all-metadata').find('dl.tx-dlf-metadata-titledata:nth-child(n+3)').slideToggle();
+
+        });
+    }
+
+    // extract title information from the meta data and add it to the top of the sidebar
+    ($('.tx-dlf-metadata dl.tx-dlf-metadata-titledata dd.tx-dlf-title')[0]) && $('.tx-dlf-metadata').prepend('<div class="metadata-title"><h2>' + $('.tx-dlf-metadata dl.tx-dlf-metadata-titledata').first().find('dd.tx-dlf-title').text() + '</h2></div>');
+
+    // add a toggle function for sub meta data "(+ n more)"
+    $('dl.tx-dlf-metadata-titledata dd > dl').each(function () {
+        $(this).parent().addClass('has-submetadata').prepend('<span class="submetadata-toggle">+' + $(this).find('dt').length + (($('html[lang^="de"]')[0]) ? ' weitere' : ' more') + '</span>').prev().addClass('has-submetadata');
+    });
+    $('.submetadata-toggle').on('click', function () {
+        $(this).parent().toggleClass('open');
+    });
+
+    // insert dd tag between two dt tags if necessary
+    $('dl.tx-dlf-metadata-titledata dt').each(function () {
+        $(this).after($(this).next('dt').length > 0 && $('<dd/>'))
+    });
+
     // secondary nav toggle
     $('nav .nav-toggle').on(mobileEvent, function(event) {
         $(this).toggleClass('active');

Resources/Private/Less/all.less

@@ -25,3 +25,4 @@
 @import "modules/fulltext.less";
 @import "modules/gridview.less";
 @import "modules/sidebar.less";
+@import "modules/home.less";

Resources/Private/Less/components/audioplayer.less

@@ -45,7 +45,7 @@
                     width: 30px;
                     height: 30px;
                     background: url(../Images/controlIcons.svg) no-repeat -422px -60px;
-                    background-size: auto 90px;
+                    background-size: auto 120px;
                     opacity: 0.5;
                     .jp-state-looped& {
                         opacity: 1;
@@ -166,7 +166,7 @@
                 width: 30px;
                 height: 30px;
                 background: url(../Images/controlIcons.svg) no-repeat 0 0;
-                background-size: auto 90px;
+                background-size: auto 120px;
                 padding: 0;
             }
             .jp-mute {

Resources/Private/Less/components/controls.less

@@ -27,6 +27,7 @@
                 border-radius: 20px;
                 margin: 0 5px;
                 background: #fff url(../Images/controlIcons.svg) no-repeat 0 0;
+                background-size: auto 120px;
             }
             > span {
                 opacity: 0.5;
@@ -112,6 +113,7 @@
                                 height: 40px;
                                 content: " ";
                                 background: url(../Images/controlIcons.svg) no-repeat 0 0;
+                                background-size: auto 120px;
                             }
                             &.download-document:before {
                                 background-position: -360px -40px;
@@ -367,8 +369,7 @@
                             border-radius: 20px;
                             border: 1px solid desaturate(lighten(@light-blue,10%),20%);
                             cursor: pointer;
-                            -webkit-appearance: none;
-                            -moz-appearance: none;
+                            appearance: none;
                             .no-touchevents & {
                                 .transition();
                                 &:hover {
@@ -397,7 +398,7 @@
                             width: 12px;
                             height: 12px;
                             background: url(../Images/controlIcons.svg) no-repeat -538px -54px;
-                            background-size: 600px 120px;
+                            background-size: auto 120px;
                             display: block;
                             content: " ";
                             .transition();
@@ -444,6 +445,7 @@
                             border-radius: 20px;
                             margin: 0 5px;
                             background: #fff url(../Images/controlIcons.svg) no-repeat -200px 0;
+                            background-size: auto 120px;
                             &.active:before {
                                 position: absolute;
                                 top: 2px;
@@ -528,6 +530,7 @@
                 height: 40px;
                 content: " ";
                 background: url(../Images/controlIcons.svg) no-repeat 0 0;
+                background-size: auto 120px;
             }
             &:after {
                 position: absolute;
@@ -584,6 +587,7 @@
                 width: 40px;
                 height: 40px;
                 background: url(../Images/controlIcons.svg) no-repeat 0 0;
+                background-size: auto 120px;
                 content: " ";
             }
         }
@@ -657,6 +661,7 @@
                     height: 40px;
                     border-radius: 20px;
                     background: #fff url(../Images/controlIcons.svg) no-repeat 0 0;
+                    background-size: auto 120px;
                     content: " ";
                 }
             }

Resources/Private/Less/components/sru.less

@@ -63,6 +63,7 @@
                 border: 0 none;
                 .text-hide();
                 background: #fff url(../Images/controlIcons.svg) no-repeat -562px -3px;
+                background-size: auto 120px;
                 border-radius: 15px;
             }
             #tx-dfgviewer-sru-results-clearing {

Resources/Private/Less/modules/home.less

@@ -6,4 +6,6 @@
  *
  */
 
-
+.sync-views {
+    display: none;
+}