feat: New control NavTabs.

bin/Controls/NavTabs.js

+/**
+ * Navigation tabs control
+ *
+ * @module package/quiqqer/menu/bin/Controls/NavTabs
+ * @author www.pcsg.de (Michael Danielczok)
+ */
+define('package/quiqqer/menu/bin/Controls/NavTabs', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/menu/bin/Controls/NavTabs',
+
+        Binds: [
+            '$onImport',
+            'toggle'
+        ],
+
+        options: {
+            animation: 'slide'
+        },
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.navTabs             = false;
+            this.navContents         = false;
+            this.NavContentContainer = null;
+            this.ActiveNavTab        = null;
+            this.ActiveContent       = null;
+            this.clicked             = false;
+            this.animation           = 'slide';
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        $onImport: function () {
+            var Elm  = this.getElm(),
+                self = this;
+
+            this.navTabs             = Elm.getElements('.quiqqer-menu-navTabs-tabs-item');
+            this.navContents         = Elm.getElements('.quiqqer-menu-navTabs-content-item');
+            this.NavContentContainer = Elm.getElement('.quiqqer-menu-navTabs-content');
+
+            if (!this.navTabs || !this.navContents) {
+                return;
+            }
+
+            // animation effect
+            if (this.getAttribute('animation')) {
+                switch (this.getAttribute('animation')) {
+                    case 'slide':
+                    default:
+                        this.animation = 'slide';
+                }
+            }
+
+            this.ActiveNavTab  = Elm.getElement('.quiqqer-menu-navTabs-tabs-item.active');
+            this.ActiveContent = Elm.getElement('.quiqqer-menu-navTabs-content-item.active');
+
+            this.navTabs.addEvent('click', function (event) {
+                event.stop();
+
+                if (self.clicked) {
+                    return;
+                }
+
+                self.clicked = true;
+
+                var NavTabItem = event.target;
+
+                if (NavTabItem.nodeName !== 'LI') {
+                    NavTabItem = NavTabItem.getParent('li');
+                }
+
+                var target = NavTabItem.getElement('a').getAttribute("href");
+
+                if (target.indexOf('#') === 0) {
+                    target = target.substring(1)
+                }
+
+                if (!target) {
+                    self.clicked = false;
+                    return;
+                }
+
+                self.toggle(NavTabItem, target);
+            })
+
+        },
+
+        /**
+         * Toggle nav tabs
+         *
+         * @param NavItem HTMLNode
+         * @param target string
+         */
+        toggle: function (NavItem, target) {
+            if (NavItem.hasClass('active')) {
+                this.clicked = false;
+                return;
+            }
+
+            var TabContent = this.getElm().getElement('[id="' + target + '"]');
+
+            if (!TabContent) {
+                this.clicked = false;
+                return;
+            }
+
+            var self = this;
+
+            Promise.all([
+                this.disableNavItem(this.ActiveNavTab),
+                this.hideContent(this.ActiveContent)
+            ]).then(function () {
+                TabContent.setStyle('display', null);
+
+                return Promise.all([
+                    self.enableNavItem(NavItem),
+                    self.showContent(TabContent),
+                    self.$setHeight(TabContent.offsetHeight)
+                ])
+            }).then(function () {
+                self.clicked = false;
+                console.log(TabContent)
+                self.NavContentContainer.setStyle('height', null);
+            })
+        },
+
+        /**
+         * Set nav item to inactive
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        disableNavItem: function (Item) {
+            return new Promise(function (resolve) {
+                Item.removeClass('active');
+
+                resolve();
+            })
+        },
+
+        /**
+         * Set nav item to active
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        enableNavItem: function (Item) {
+            var self = this;
+
+            return new Promise(function (resolve) {
+                Item.addClass('active');
+                self.ActiveNavTab = Item;
+
+                resolve();
+            })
+
+        },
+
+        /**
+         * Hide tab content
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        hideContent: function (Item) {
+            var self = this;
+
+            return new Promise(function (resolve) {
+                self.$slideFadeOut(Item).then(function () {
+                    Item.removeClass('active');
+                    Item.setStyle('display', 'none');
+
+                    resolve();
+                })
+            })
+        },
+
+        /**
+         * Show tab content
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        showContent: function (Item) {
+            var self = this;
+
+            return new Promise(function (resolve) {
+                self.$slideFadeIn(Item).then(function () {
+                    Item.addClass('active');
+                    Item.setStyle('display', null);
+                    self.ActiveContent = Item;
+
+                    resolve();
+                })
+            })
+
+        },
+
+        /**
+         * Set heigt of tab content container
+         *
+         * @param height integer
+         * @return Promise
+         */
+        $setHeight: function (height) {
+            var self = this;
+
+            return new Promise(function (resolve) {
+                moofx(self.NavContentContainer).animate({
+                    height: height
+                }, {
+                    duration: 250,
+                    callback: resolve
+                })
+            })
+        },
+
+        /**
+         * Fade out animation (hide)
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        $slideFadeOut: function (Item) {
+            this.NavContentContainer.setStyle('height', Item.offsetHeight)
+
+            return new Promise(function (resolve) {
+                moofx(Item).animate({
+                    transform: 'translateX(-10px)',
+                    opacity  : 0
+                }, {
+                    duration: 250,
+                    callback: resolve
+                })
+            })
+        },
+
+        /**
+         * Fade in animation (show)
+         *
+         * @param Item HTMLNode
+         * @return Promise
+         */
+        $slideFadeIn: function (Item) {
+            Item.setStyles({
+                transform: 'translateX(-10px)',
+                opacity  : 0
+            })
+
+            return new Promise(function (resolve) {
+                moofx(Item).animate({
+                    transform: 'translateX(0)',
+                    opacity  : 1
+                }, {
+                    duration: 250,
+                    callback: resolve
+                })
+            })
+        }
+    });
+});
\ No newline at end of file

src/QUI/Menu/NavTabs.css

+/********/
+/* Tabs */
+/********/
+.quiqqer-menu-navTabs {
+    margin: 3rem 0 5rem;
+}
+
+/* nav */
+.quiqqer-menu-navTabs-tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    list-style: none;
+    margin-left: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 1rem;
+    padding-left: 0;
+    position: relative;
+    white-space: nowrap;
+}
+
+.quiqqer-menu-navTabs-tabs:before {
+    background-color: #ddd;
+    bottom: 1rem;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+}
+
+.quiqqer-menu-navTabs-tabs li {
+    margin-bottom: 0;
+    padding-left: 0;
+    position: relative;
+}
+
+.quiqqer-menu-navTabs-tabs li a {
+    border-bottom: 1px solid #ddd;
+    display: inline-block;
+    padding: 0.55rem 1.5rem;
+}
+
+.quiqqer-menu-navTabs-tabs li.active a {
+    border-bottom: 1px solid currentColor;
+}
+
+.quiqqer-menu-navTabs-tabs li:not(.active) a {
+    color: inherit;
+}
+
+.quiqqer-menu-navTabs-tabs li a:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* content */
+.quiqqer-menu-navTabs-content {
+    margin-top: var(--spacing-sm, 2rem);
+    overflow-x: visible;
+    overflow-y: hidden;
+    margin-left: -10px;
+    padding-left: 10px;
+}
+
+.quiqqer-menu-navTabs-content-item-shortDesc {
+    margin-bottom: 1rem;
+}
\ No newline at end of file

src/QUI/Menu/NavTabs.html

+<ul class="quiqqer-menu-navTabs-tabs" role="tablist">
+    {foreach from=$entries item=entry key=key}
+        <li class="quiqqer-menu-navTabs-tabs-item {if $key == $active - 1}active{/if}">
+            <a href="#{$entry.title|escape:'url'}">{$entry.title}</a>
+        </li>
+    {/foreach}
+</ul>
+<div class="quiqqer-menu-navTabs-content">
+    {foreach from=$entries item=entry key=key}
+        <div class="quiqqer-menu-navTabs-content-item {if $key == $active - 1}active{/if}"
+             {if $key !== $active - 1}style="display: none;"{/if} id="{$entry.title|escape:'url'}">
+            {$entry.content}
+        </div>
+    {/foreach}
+</div>
\ No newline at end of file

src/QUI/Menu/NavTabs.php

+<?php
+
+/**
+ * This file contains QUI\Menu\NavTabs
+ */
+
+namespace QUI\Menu;
+
+use QUI;
+
+/**
+ * Class NavTabs
+ *
+ * @author  Michael Danielczok
+ * @package QUI\Menu
+ */
+class NavTabs extends QUI\Control
+{
+    /**
+     * entries array
+     * [
+     *   'title'   => string,
+     *   'content' => string
+     * ]
+     *
+     * @var array
+     */
+    private $entries = [];
+
+    /**
+     * @param array $attributes
+     */
+    public function __construct($attributes = [])
+    {
+        $this->setAttributes([
+            'nodeName'    => 'div',
+            'class'       => 'quiqqer-menu-navTabs',
+            'data-qui'    => 'package/quiqqer/menu/bin/Controls/NavTabs',
+            'activeEntry' => 1, // number
+            'parentSite'  => false, // for child sites, example: index.php?project=test&lang=de&id=1
+            'showShort'   => false, // only if parentSite set
+            'max'         => 10,
+            'entries'     => [],
+            'template'    => 'default'
+        ]);
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(dirname(__FILE__).'/NavTabs.css');
+    }
+
+    /**
+     * @return string
+     * @throws QUI\Exception
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+        $this->setJavaScriptControlOption('animation', 'slide');
+
+        if ($this->getAttribute('parentSite')) {
+            $this->entries = $this->getChildrenFromParent();
+        }
+
+        $active = 1;
+
+        if ($this->getAttribute('activeEntry') && $this->getAttribute('activeEntry') > 0) {
+            $active = $this->getAttribute('activeEntry');
+        }
+
+        $Engine->assign([
+            'this'    => $this,
+            'entries' => $this->entries,
+            'active'  => $active
+        ]);
+
+        return $Engine->fetch(dirname(__FILE__).'/NavTabs.html');
+    }
+
+    /**
+     * Get children sites from parent site
+     *
+     * @return array|string
+     * @throws QUI\Exception
+     */
+    private function getChildrenFromParent()
+    {
+        $ParentSite = null;
+
+        if ($this->getAttribute('parentSite')) {
+            try {
+                $ParentSite = \QUI\Projects\Site\Utils::getSiteByLink($this->getAttribute('parentSite'));
+            } catch (QUI\Exception $Exception) {
+                QUI\System\Log::addDebug($Exception->getMessage());
+
+                return '';
+            }
+        }
+
+        $sites = $ParentSite->getChildren([
+            'where' => [
+                'active' => 1,
+            ],
+            'limit' => $this->getAttribute('max')
+        ]);
+
+        $entries = [];
+
+        /** @var QUI\Projects\Site $Site */
+        foreach ($sites as $Site) {
+            $short = '';
+
+            if ($this->getAttribute('showShort') && $Site->getAttribute('short')) {
+                $short = '<div class="quiqqer-menu-navTabs-content-item-shortDesc text-muted">'.$Site->getAttribute('short').'</div>';
+            }
+
+            $entryContent = $short.$Site->getAttribute('content');
+
+            $entry = [
+                'title'   => $Site->getAttribute('title'),
+                'content' => $entryContent,
+            ];
+
+            $entries[] = $entry;
+        }
+
+        return $entries;
+    }
+
+    /**
+     * Convert data set to entries
+     * [
+     *   ['title1', 'content1],
+     *   ['title2', 'content2],
+     *   ['title3', 'content3],
+     *   .....................
+     * ]
+     *
+     * @param array $data
+     * @return false|void
+     */
+    public function setData(array $data)
+    {
+        if (\count($data) < 1) {
+            return false;
+        }
+
+        $entries = [];
+
+        /** @var QUI\Projects\Site $Site */
+        foreach ($data as $dataSet) {
+            if (\count($dataSet) < 2) {
+                continue;
+            }
+
+            $entry = [
+                'title'   => $dataSet[0],
+                'content' => $dataSet[1],
+            ];
+
+            $entries[] = $entry;
+        }
+
+        $this->entries = $entries;
+    }
+}