[TASK] Hide document header navigation on scroll 63/43763/6
authorBenjamin Kott <benjamin.kott@outlook.com>
Sat, 3 Oct 2015 16:07:14 +0000 (18:07 +0200)
committerOliver Hader <oliver.hader@typo3.org>
Sat, 3 Oct 2015 18:04:46 +0000 (20:04 +0200)
You can now show or hide the top menu in any module, depending on the
scroll speed used.

Resolves: #70328
Releases: master

Change-Id: I744058151ccd0b64c4e818544ae2c5272ffc1b2e
Reviewed-on: http://review.typo3.org/43763
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Build/Resources/Public/Less/Component/module.less
typo3/sysext/backend/Classes/Template/ModuleTemplate.php
typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
typo3/sysext/backend/Resources/Private/Templates/Module.html
typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js [new file with mode: 0644]
typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index cbbe71d..7b9210b 100644 (file)
        background-color: @module-docheader-bg;
        border-bottom: 1px solid @module-docheader-border;
        padding: @module-docheader-padding;
-}
-.module-docheader-bar {
-       .clearfix;
-       height: @module-docheader-bar-height;
-       margin: @module-docheader-bar-margin;
-       line-height: @module-docheader-bar-height;
-       label {
-               margin-top: 0;
+       .transition(margin-top 0.3s ease-in-out);
+       .module-docheader-bar {
+               .clearfix;
+               height: @module-docheader-bar-height;
+               margin: @module-docheader-bar-margin;
+               line-height: @module-docheader-bar-height;
+               label {
+                       margin-top: 0;
+                       margin-bottom: 0;
+               }
+               .form-group {
+                       margin: 0;
+               }
+               .form-inline-spaced {
+                       margin: 0;
+               }
+               .panel {
+                       background-color: transparent;
+                       margin: 0;
+                       border-left: none;
+                       border-right: none;
+                       border-bottom: none;
+                       border-radius: 0;
+                       margin-left: -@module-docheader-padding-horizontal;
+                       margin-right: -@module-docheader-padding-horizontal;
+                       background-color: #fafafa;
+                       box-shadow: none;
+                       .panel-body {
+                               padding: ceil(@module-docheader-padding-horizontal / 3) @module-docheader-padding-horizontal;
+                       }
+               }
+       }
+       .module-docheader-bar-search  {
                margin-bottom: 0;
        }
-       .form-group {
-               margin: 0;
+       .module-docheader-bar-column-left {
+               float: left;
+       }
+       .module-docheader-bar-column-right {
+               float: right;
        }
-}
-.module-docheader-bar-column-left {
-       float: left;
-}
-.module-docheader-bar-column-right {
-       float: right;
 }
 
 
index f1157e5..7c96db0 100644 (file)
@@ -201,6 +201,7 @@ class ModuleTemplate {
                $this->pageRenderer->loadJquery();
                $this->pageRenderer->loadRequireJsModule('bootstrap');
                $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/ContextHelp');
+               $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DocumentHeader');
        }
 
        /**
index b6dd7d0..61efa4d 100644 (file)
@@ -1,5 +1,5 @@
-<div class="module-docheader">
-       <div class="module-docheader-bar">
+<div class="module-docheader t3js-module-docheader">
+       <div class="module-docheader-bar module-docheader-bar-navigation t3js-module-docheader-bar t3js-module-docheader-bar-navigation">
                <div class="module-docheader-bar-column-left">
                        <div class="form-inline">
                                <f:for each="{docHeader.menus}" as="menu">
@@ -12,9 +12,8 @@
                <div class="module-docheader-bar-column-right">
                        <span class="typo3-docheader-pagePath"><f:translate key="LLL:EXT:lang/locallang_core.xlf:labels.path" />: <f:format.raw>{docHeader.metaInformation.path}</f:format.raw></span> <f:format.raw>{docHeader.metaInformation.recordInformation}</f:format.raw>
                </div>
-
        </div>
-       <div class="module-docheader-bar">
+       <div class="module-docheader-bar module-docheader-bar-buttons t3js-module-docheader-bar t3js-module-docheader-bar-buttons">
                <div class="module-docheader-bar-column-left">
                        <f:render partial="ButtonBar" arguments="{buttons:docHeader.buttons.left}" />
                </div>
index bb3fe1c..256c681 100644 (file)
@@ -5,7 +5,7 @@
                </f:then>
        </f:if>
        <f:render partial="DocHeader" arguments="{docHeader:docHeader}" />
-       <div class="module-body">
+       <div class="module-body t3js-module-body">
                <f:format.raw>{content}</f:format.raw>
        </div>
        <f:if condition="{formTag}">
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
new file mode 100644 (file)
index 0000000..20faa0e
--- /dev/null
@@ -0,0 +1,117 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with DocumentHeader source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+define('TYPO3/CMS/Backend/DocumentHeader', ['jquery'], function($) {
+
+       var DocumentHeader = {
+               $documentHeader: null,
+               $documentHeaderBars: null,
+               $documentHeaderNavigationBar: null,
+               $documentHeaderSearchBar: null,
+               $moduleBody: null,
+               direction: 'down',
+               reactionRange: 300,
+               lastPosition: 0,
+               currentPosition: 0,
+               changedPosition: 0,
+               settings: {
+                       margin: 24,
+                       offset: 100,
+                       selectors: {
+                               moduleDocumentHeader: '.t3js-module-docheader',
+                               moduleDocheaderBar: '.t3js-module-docheader-bar',
+                               moduleNavigationBar: '.t3js-module-docheader-bar-navigation',
+                               moduleButtonBar: '.t3js-module-docheader-bar-buttons',
+                               moduleSearchBar: '.t3js-module-docheader-bar-search',
+                               moduleBody: '.t3js-module-body'
+
+                       },
+               }
+       };
+
+       /**
+        * Reposition
+        */
+       DocumentHeader.reposition = function() {
+               DocumentHeader.$documentHeader.css('height', 'auto');
+               DocumentHeader.$documentHeaderBars.css('height', 'auto');
+               DocumentHeader.$moduleBody.css('padding-top', DocumentHeader.$documentHeader.outerHeight() + DocumentHeader.settings.margin);
+       };
+
+       /**
+        * Resize
+        */
+       DocumentHeader.resize = function() {
+               DocumentHeader.reposition();
+       };
+
+       /**
+        * Scroll
+        */
+       DocumentHeader.scroll = function() {
+               DocumentHeader.currentPosition = $(window).scrollTop();
+               if (DocumentHeader.currentPosition > DocumentHeader.lastPosition){
+                       if (DocumentHeader.direction !== 'down'){
+                               DocumentHeader.direction = 'down';
+                               DocumentHeader.changedPosition = DocumentHeader.currentPosition;
+                       }
+               } else if (DocumentHeader.currentPosition < DocumentHeader.lastPosition){
+                       if (DocumentHeader.direction !== 'up'){
+                               DocumentHeader.direction = 'up';
+                               DocumentHeader.changedPosition = DocumentHeader.currentPosition;
+                       }
+               }
+               if(DocumentHeader.direction === "up" && (DocumentHeader.changedPosition - DocumentHeader.reactionRange) < DocumentHeader.currentPosition){
+                       DocumentHeader.$documentHeader.css('margin-top', 0);
+               }
+               if(DocumentHeader.direction === "down" && (DocumentHeader.changedPosition + DocumentHeader.reactionRange) < DocumentHeader.currentPosition){
+                       DocumentHeader.$documentHeader.css('margin-top', (DocumentHeader.$documentHeaderNavigationBar.outerHeight() + 4) * -1);
+               }
+               DocumentHeader.lastPosition = DocumentHeader.currentPosition;
+       };
+
+       /**
+        * Start
+        */
+       DocumentHeader.start = function() {
+               DocumentHeader.reposition();
+               $(window).on('resize', DocumentHeader.resize);
+               $(window).on('scroll', DocumentHeader.scroll);
+       };
+
+       /**
+        * Initialize
+        */
+       DocumentHeader.initialize = function() {
+               DocumentHeader.$documentHeader = $(DocumentHeader.settings.selectors.moduleDocumentHeader);
+               if(DocumentHeader.$documentHeader.length > 0){
+                       DocumentHeader.$documentHeaderBars = $(DocumentHeader.settings.selectors.moduleDocheaderBar);
+                       DocumentHeader.$documentHeaderNavigationBar = $(DocumentHeader.settings.selectors.moduleNavigationBar);
+                       DocumentHeader.$documentHeaderSearchBar = $(DocumentHeader.settings.selectors.moduleSearchBar).remove();
+                       if(DocumentHeader.$documentHeaderSearchBar.length > 0){
+                               DocumentHeader.$documentHeader.append(DocumentHeader.$documentHeaderSearchBar);
+                       }
+                       DocumentHeader.$moduleBody = $(DocumentHeader.settings.selectors.moduleBody);
+                       DocumentHeader.start();
+               }
+       };
+
+       return function () {
+               $(document).ready(function() {
+                       DocumentHeader.initialize();
+               });
+               TYPO3.DocumentHeader = DocumentHeader;
+               return DocumentHeader;
+       }();
+
+});
\ No newline at end of file
index b014ffb..bfde003 100644 (file)
@@ -549,7 +549,7 @@ class AbstractDatabaseRecordList extends AbstractRecordList {
                }
                $lMenu = '<select class="form-control" name="search_levels" title="' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:labels.title.search_levels', TRUE) . '" id="search_levels">' . implode('', $opt) . '</select>';
                // Table with the search box:
-               $content = '<div class="db_list-searchbox-form db_list-searchbox-toolbar" id="db_list-searchbox-toolbar" style="display: ' . ($this->searchString == '' ? 'none' : 'block') . ';">
+               $content = '<div class="db_list-searchbox-form db_list-searchbox-toolbar module-docheader-bar module-docheader-bar-search t3js-module-docheader-bar t3js-module-docheader-bar-search" id="db_list-searchbox-toolbar" style="display: ' . ($this->searchString == '' ? 'none' : 'block') . ';">
                        ' . $formElements[0] . '
                                <div id="typo3-dblist-search">
                                        <div class="panel panel-default">
index 395b550..d3dcc27 100644 (file)
@@ -7872,6 +7872,7 @@ button.close {
   background-color: #eeeeee;
   border-bottom: 1px solid #c3c3c3;
   padding: 0 24px;
+  transition: margin-top 0.3s ease-in-out;
 }
 .module-docheader:before,
 .module-docheader:after {
@@ -7889,38 +7890,59 @@ button.close {
 .module-docheader:after {
   clear: both;
 }
-.module-docheader-bar {
+.module-docheader .module-docheader-bar {
   height: 26px;
   margin: 4px 0;
   line-height: 26px;
 }
-.module-docheader-bar:before,
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:before,
+.module-docheader .module-docheader-bar:after {
   content: " ";
   display: table;
 }
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:after {
   clear: both;
 }
-.module-docheader-bar:before,
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:before,
+.module-docheader .module-docheader-bar:after {
   content: " ";
   display: table;
 }
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:after {
   clear: both;
 }
-.module-docheader-bar label {
+.module-docheader .module-docheader-bar label {
   margin-top: 0;
   margin-bottom: 0;
 }
-.module-docheader-bar .form-group {
+.module-docheader .module-docheader-bar .form-group {
   margin: 0;
 }
-.module-docheader-bar-column-left {
+.module-docheader .module-docheader-bar .form-inline-spaced {
+  margin: 0;
+}
+.module-docheader .module-docheader-bar .panel {
+  background-color: transparent;
+  margin: 0;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 0;
+  margin-left: -24px;
+  margin-right: -24px;
+  background-color: #fafafa;
+  box-shadow: none;
+}
+.module-docheader .module-docheader-bar .panel .panel-body {
+  padding: 8px 24px;
+}
+.module-docheader .module-docheader-bar-search {
+  margin-bottom: 0;
+}
+.module-docheader .module-docheader-bar-column-left {
   float: left;
 }
-.module-docheader-bar-column-right {
+.module-docheader .module-docheader-bar-column-right {
   float: right;
 }
 .module-body {