Sidebar Drop Down Menu vollständig als Control gebaut.

bin/SidebarDropDownMenu.js

 /**
  * Sidebar menu control
  *
- * @module package/quiqqer/menu/bin/js/SidebarDropDownMenu
+ * @module package/quiqqer/menu/bin/SidebarDropDownMenu
  * @author www.pcsg.de (Michael Danielczok, Henning Leutz)
  *
  * @require qui/QUI
  * @require qui/controls/Control
- * @require URL_OPT_DIR +bin/js/snap.svg-min.js
- * @require css!package/quiqqer/template-qui/bin/js/ElasticMenu.css
  */
+define('package/quiqqer/menu/bin/SidebarDropDownMenu', [
 
-require.config({
+    'qui/QUI',
+    'qui/controls/Control'
 
-    baseUrl: URL_BIN_DIR + "QUI",
+], function (QUI, QUIControl) {
+    "use strict";
 
-    paths: {
-        "qui"     : URL_OPT_DIR + "bin/qui/qui",
-        "locale"  : URL_VAR_DIR + "locale/bin",
-        "controls": URL_BIN_DIR + "QUI/controls"
-    },
+    return new Class({
 
-    waitSeconds: 0,
-    catchError : true,
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/menu/bin/SidebarDropDownMenu',
 
-    map: {
-        "*": {
-            "css": URL_OPT_DIR + "bin/qui/qui/lib/css.js"
-        }
-    }
-});
+        Binds: [
+            '$onImport'
+        ],
 
-window.addEvent("domready", function () {
-    "use strict";
+        initialize: function (options) {
+            this.parent(options);
 
-    // Load QUI
-    require(["qui/QUI"], function (QUI) {
-        QUI.addEvent("onError", function (msg, url, linenumber) {
-            console.error(msg);
-            console.error(url);
-            console.error("LineNo: " + linenumber);
-        });
-    });
-
-    /*
-     * Left nav:
-     * open or close the sub nav
-     */
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
 
-    var ToggleButton = document.getElements(".quiqqer-fa-levels-icon");
+        /**
+         * event : on insert
+         */
+        $onImport: function () {
+            var self         = this,
+                Parent       = this.getElm(),
+                ToggleButton = Parent.getElements(".quiqqer-fa-levels-icon");
+
+            ToggleButton.addEvent("click", function () {
+                var LiLeft = this.getParent('li');
+                var NavSubLeft = LiLeft.getElement("div");
+
+                if (!NavSubLeft.getSize().y.toInt()) {
+                    self.openMenu(NavSubLeft);
+                    return;
+                }
 
-    ToggleButton.addEvent("click", function () {
-        var LiLeft = this.getParent().getParent();
-        var NavSubLeft = LiLeft.getElement("div");
+                self.closeMenu(NavSubLeft);
+            });
+        },
 
-        /*
-         * Wenn menü ZU ist:
+        /**
+         * open the next level of sub menu
+         *
+         * @param {HTMLLIElement} NavSubLeft
          */
-        if (!NavSubLeft.getSize().y.toInt()) {
+        openMenu: function (NavSubLeft) {
 
             NavSubLeft.setStyles({
                 height  : 0,
@@ -66,8 +68,8 @@ window.addEvent("domready", function () {
             });
 
             moofx(NavSubLeft).animate({
-                height  : NavSubLeft.getElement("ul").getSize().y.toInt(),
-                opacity : 1
+                height : NavSubLeft.getElement("ul").getSize().y.toInt(),
+                opacity: 1
             }, {
                 duration: 250,
                 callback: function () {
@@ -76,57 +78,37 @@ window.addEvent("domready", function () {
                     });
                 }
             });
-            this.addClass("fa-nav-levels-rotate");
-            return;
-        }
 
-        /*
-         * Wenn menü AUF ist:
+            var Prev = NavSubLeft.getPrevious('.quiqqer-navigation-entry'),
+                Icon = Prev.getChildren('.quiqqer-fa-levels-icon');
+
+            Icon.addClass("fa-nav-levels-rotate");
+        },
+
+        /**
+         * close the next level of sub menu
+         *
+         * @param {HTMLLIElement} NavSubLeft
          */
-        NavSubLeft.setStyle("overflow", "hidden");
-
-        moofx(NavSubLeft).animate({
-            height : 0,
-            opacity: 0
-        }, {
-            duration: 250,
-            callback: function () {
-                moofx(NavSubLeft).animate({
-                    height: 0
-                });
-            }
-        });
-        this.removeClass("fa-nav-levels-rotate");
-    });
+        closeMenu: function (NavSubLeft) {
+            NavSubLeft.setStyle("overflow", "hidden");
 
+            moofx(NavSubLeft).animate({
+                height : 0,
+                opacity: 0
+            }, {
+                duration: 250,
+                callback: function () {
+                    moofx(NavSubLeft).animate({
+                        height: 0
+                    });
+                }
+            });
 
-    /*
-     * Mobile nav:
-     * open or close the sub nav
-     */
-    var Nav = document.id("navigation");
-    var NavButton = document.getElement("nav.nav-box");
-    var NavButtonDropDown = document.getElements(".fa-chevron-down");
-
-    NavButtonDropDown.addEvent("click", function () {
-        var Li = this.getParent();
-        var NavSub = Li.getElement(".page-header-navigation-sub");
-        if (NavSub.getStyle("height").toInt() < 1) {
-            NavSub.addClass("nav-toggle-sub");
-            this.addClass("fa-chevron-down-rotate-mobile");
-        } else {
-            NavSub.removeClass("nav-toggle-sub");
-            this.removeClass("fa-chevron-down-rotate-mobile");
-        }
-    });
+            var Prev = NavSubLeft.getPrevious('.quiqqer-navigation-entry'),
+                Icon = Prev.getChildren('.quiqqer-fa-levels-icon');
 
-    NavButton.addEvent("click", function () {
-        if (Nav.getStyle("height").toInt() < 1) {
-            Nav.addClass("nav-toggle");
-        } else {
-            Nav.removeClass("nav-toggle");
+            Icon.removeClass("fa-nav-levels-rotate");
         }
-
     });
-
 });

bricks.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <quiqqer>
-    <menu>
+    <bricks>
 
         <!-- Nav (QUI) -->
-        <brick control="\QUI\Controls\Navigation">
+        <brick control="\QUI\Menu\SidebarDropDownMenu">
             <title>
                 <locale group="quiqqer/menu" var="brick.control.navigation.title"/>
             </title>
@@ -37,5 +37,5 @@
             </settings>
         </brick>
 
-    </menu>
+    </bricks>
 </quiqqer>
\ No newline at end of file

locale.xml

@@ -2,7 +2,7 @@
 <locales>
     <groups name="quiqqer/menu" datatype="php,js">
 
-        <!-- Nav (QUI) -->
+        <!-- Sidebar Drop Down Menu -->
         <locale name="menu.control.navigation.setting.startId">
             <de><![CDATA[Start-ID]]></de>
             <en><![CDATA[Start ID]]></en>

src/QUI/Menu/SidebarDropDownMenu.php

@@ -30,7 +30,8 @@ public function __construct($attributes = array())
             'levels' => false,
             'homeIcon' => 'fa-home',
             'listIcon' => 'fa-angle-right',
-            'levelIcon' => 'fa-angle-double-down'
+            'levelIcon' => 'fa-angle-double-down',
+            'qui-class' => 'package/quiqqer/menu/bin/SidebarDropDownMenu'
         ));
 
         parent::__construct($attributes);
@@ -90,7 +91,7 @@ public function getBody()
             'Site' => $Site,
             'homeLink' => $homeLink = $this->getAttribute('homeLink'),
             'activeId' => $activeId,
-            'navTemplate' => dirname(__FILE__) . '/Navigation.html',
+            'navTemplate' => dirname(__FILE__) . '/SidebarDropDownMenu.html',
             'levels' => $levels,
             'Rewrite' => QUI::getRewrite(),
             'homeIcon' => $homeIcon = $this->getAttribute('homeIcon'),
@@ -98,9 +99,9 @@ public function getBody()
             'levelIcon' => $levelIcon = $this->getAttribute('levelIcon')
         ));
 
-        $html = $Engine->fetch(dirname(__FILE__) . '/Navigation.html');
+        $html = $Engine->fetch(dirname(__FILE__) . '/SidebarDropDownMenu.html');
         $html = '<nav>' . $html . '</nav>';
 
         return $html;
     }
-}
\ No newline at end of file
+}