Merge branch 'dev'

bin/Controls/NavTabs.js

@@ -26,11 +26,16 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
 
         Binds: [
             '$onImport',
-            'toggle'
+            '$resize',
+            'toggle',
+            '$mouseMoveHandler',
+            '$mouseDownHandler',
+            '$mouseUpHandler'
         ],
 
         options: {
-            animation: 'slide'
+            animation         : 'slide',
+            enabledragtoscroll: false // if enabled allows users to drag to scroll nav elements
         },
 
         initialize: function (options) {
@@ -45,9 +50,15 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
             this.clicked             = false;
             this.animation           = 'slide';
 
+            // drag to scroll
+            this.enableDragToScroll = false;
+            this.navPos             = {left: 0, x: 0};
+
             this.addEvents({
                 onImport: this.$onImport
             });
+
+            QUI.addEvent('resize', this.$resize);
         },
 
         $onImport: function () {
@@ -63,6 +74,12 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
                 return;
             }
 
+            this.enableDragToScroll = parseInt(this.getAttribute('enabledragtoscroll'));
+
+            if (this.enableDragToScroll === 1) {
+                this.$initDragToScroll();
+            }
+
             // animation effect
             if (this.getAttribute('animation')) {
                 switch (this.getAttribute('animation')) {
@@ -126,9 +143,22 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
                 const newUrl = url.split('#')[0] + '#open_' + target;
 
                 history.pushState(null, null, newUrl);
-            }
+            };
 
             this.navTabsItems.addEvent('click', clickEvent);
+            this.$resize();
+        },
+
+        $resize: function () {
+            if (this.enableDragToScroll !== 1) {
+                return;
+            }
+
+            if (this.navTab.scrollWidth > this.navTab.clientWidth) {
+                this.navTab.addEventListener('mousedown', this.$mouseDownHandler);
+            } else {
+                this.navTab.removeEventListener('mousedown', this.$mouseDownHandler);
+            }
         },
 
         /**
@@ -262,7 +292,7 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
          */
         $slideFadeOut: function (Item) {
             return this.$animate(Item, {
-                opacity  : 0,
+                opacity   : 0,
                 translateX: -5,
 
             });
@@ -282,7 +312,7 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
 
             return this.$animate(Item, {
                 translateX: 0,
-                opacity  : 1
+                opacity   : 1
             });
         },
 
@@ -331,6 +361,69 @@ define('package/quiqqer/menu/bin/Controls/NavTabs', [
 
                 animejs(options);
             });
+        },
+
+        // region drag to scroll
+
+        /**
+         * Init drag to scroll
+         */
+        $initDragToScroll: function () {
+            if (this.navTab.scrollWidth <= this.navTab.clientWidth) {
+                return;
+            }
+
+            this.navTab.addEventListener('mousedown', this.$mouseDownHandler);
+        },
+
+        /**
+         * Move handler
+         *
+         * @param e
+         */
+        $mouseMoveHandler: function (e) {
+            // How far the mouse has been moved
+            const dx = e.clientX - this.navPos.x;
+
+            if (this.navPos.x !== dx) {
+                this.clicked = true;
+            }
+
+            // Scroll the element
+            this.navTab.scrollLeft = this.navPos.left - dx;
+        },
+
+        /**
+         * Mouse down handler
+         *
+         * @param e
+         */
+        $mouseDownHandler: function (e) {
+            this.navTab.style.userSelect = 'none';
+
+            this.navPos = {
+                left: this.navTab.scrollLeft, // The current scroll
+                x   : e.clientX, // Get the current mouse position
+            };
+
+            document.addEventListener('mousemove', this.$mouseMoveHandler);
+            document.addEventListener('mouseup', this.$mouseUpHandler);
+        },
+
+        /**
+         * Mouse up handler
+         */
+        $mouseUpHandler: function () {
+            document.removeEventListener('mousemove', this.$mouseMoveHandler);
+            document.removeEventListener('mouseup', this.$mouseUpHandler);
+
+            this.navTab.style.removeProperty('user-select');
+
+            setTimeout(() => {
+                this.clicked = false;
+            }, 50);
         }
+
+        // end region
     });
 });
\ No newline at end of file

src/QUI/Menu/Controls/Tabs.css

@@ -37,11 +37,14 @@
     flex: 1;
 }
 
-@media screen and (min-width: 768px) {
-    .quiqqer-tabsAdvanced-nav-inner.navTab__center {
+/*@media screen and (min-width: 768px) {*/
+    .quiqqer-tabsAdvanced-nav {
+        display: flex;
+    }
+    .quiqqer-tabsAdvanced-nav.navTab__center {
         justify-content: center;
     }
-}
+/*}*/
 
 .quiqqer-tabsAdvanced-nav-link {
     padding: 1rem;
@@ -119,7 +122,7 @@
 /* content */
 /***********/
 .quiqqer-tabsAdvanced-content {
-    margin-top: var(--qui-spacing-xl, 2rem);
+    margin-top: var(--qui-spacing-2xl, 3rem);
 }
 
 .quiqqer-tabsAdvanced-content-item {

src/QUI/Menu/Controls/Tabs.html

@@ -16,15 +16,15 @@
 {if $contentImgMaxWidth}--quiqqer-tabsAdvanced-contentImgMaxWidth: {$contentImgMaxWidth}px;{/if}
 {if $contentImgMinWidth}--quiqqer-tabsAdvanced-contentImgMinWidth: {$contentImgMinWidth}px;{/if}
         ">
-    <div class="quiqqer-tabsAdvanced-nav">
-        <ul class="quiqqer-tabsAdvanced-nav-inner {$navAlignment} quiqqer-tab-nav">
+    <div class="quiqqer-tabsAdvanced-nav {$navAlignment}">
+        <ul class="quiqqer-tabsAdvanced-nav-inner  quiqqer-tab-nav">
             {foreach from=$entries item=entry key=key}
                 <li class="quiqqer-tabsAdvanced-nav-item {$navTabStyleCss} {$navFillSpace}
                  quiqqer-tab-nav-item {if $key == $active - 1}active{/if}"
                     data-entry-nav-pos="{$key}">
                     <a href="#{QUI\Utils\Security\Orthos::urlEncodeString($entry.tabTitle)}"
                        data-qui-disableTemplateScroll="1"
-                       class="quiqqer-tabsAdvanced-nav-link {$navTabStyleCss}">
+                       class="quiqqer-tabsAdvanced-nav-link {$navTabStyleCss}" draggable="false">
                         {if isset($entry.tabIcon) && $entry.tabIcon}
                             {image src=$entry.tabIcon width="80" height="80"}
                         {/if}

src/QUI/Menu/Controls/Tabs.php

@@ -34,9 +34,10 @@ public function __construct($attributes = [])
             // tabs nav
             'navImgHeight'       => 20, // number
             'navStyle'           => 'imgLeft', // imgLeft, imgTop, onlyImg
-            'navWrapText'       => 'wrap', // wrap / noWrap; allow breaking text on space. 'noWrap' set "white-space: nowrap;" CSS property on nav text
+            'navWrapText'        => 'wrap', // wrap / noWrap; allow breaking text on space. 'noWrap' set "white-space: nowrap;" CSS property on nav text
             'navFillSpace'       => false, // it feels the available space
             'navCenter'          => false,
+            'enableDragToScroll' => true,
 
             // tabs content
             'contentImgMinWidth' => 200, // number; do not use large values, recommended is between 100 and 600
@@ -74,6 +75,8 @@ public function getBody()
 
         $active = 1;
 
+        $this->setJavaScriptControlOption('enabledragtoscroll', $this->getAttribute('enableDragToScroll'));
+
         if ($this->getAttribute('activeEntry') && $this->getAttribute('activeEntry') > 0) {
             $active = $this->getAttribute('activeEntry');
         }
@@ -83,7 +86,7 @@ public function getBody()
 
         /* nav */
         $showNavText    = true;
-        $navWrapText   = 'navText__wrap';
+        $navWrapText    = 'navText__wrap';
         $navTabStyleCss = 'navTabStyle__imgLeft';
         $navAlignment   = '';
         $navFillSpace   = '';
@@ -116,7 +119,7 @@ public function getBody()
             'active'             => $active,
             'navImgHeight'       => $this->getAttribute('navImgHeight'),
             'navStyle'           => $this->getAttribute('navStyle'),
-            'navWrapText'       => $navWrapText,
+            'navWrapText'        => $navWrapText,
             'navTabStyleCss'     => $navTabStyleCss,
             'showNavText'        => $showNavText,
             'navAlignment'       => $navAlignment,