new menu control -> DropDownMenu

bin/DropDownMenu.js

+
+/**
+ * @module package/quiqqer/menu/bin/DropDownMenu
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ */
+define('package/quiqqer/menu/bin/DropDownMenu', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function(QUI, QUIControl)
+{
+    "use strict";
+
+    return new Class({
+
+        Extends : QUIControl,
+        Type : 'package/quiqqer/menu/bin/DropDownMenu',
+
+        Binds : [
+            '$onMouseEnter',
+            '$onMouseLeave',
+            '$onParentBlur',
+            '$onParentEnter'
+        ],
+
+        initialize : function(options)
+        {
+            this.parent(options);
+
+            this.addEvents({
+                onImport : this.$onImport
+            });
+        },
+
+        /**
+         * event : on insert
+         */
+        $onImport : function()
+        {
+            var i, len, size, list, level,
+                Elm, Parent;
+
+            // parent events
+            list = this.getElm().getChildren('ul').getChildren('li').flatten();
+
+            for (i = 0, len = list.length; i < len; i++) {
+
+                Parent = list[i];
+
+                Parent.set({
+                    'tabindex' : -1,
+                    styles : {
+                        outline : 'none'
+                    }
+                });
+
+                Parent.addEvents({
+                    blur : this.$onParentBlur,
+                    mouseenter : this.$onParentEnter
+                });
+            }
+
+
+            // children dropdown pos
+            var getSize = function() {
+                return this.getSize();
+            };
+
+            list = this.getElm().getElements('.qui-menu-dropdown-children');
+
+            for (i = 0, len = list.length; i < len; i++) {
+
+                Elm = list[i];
+                Parent = Elm.getParent();
+
+                level = Elm.get('data-level');
+                size = Parent.measure(getSize);
+
+                if (level == 1) {
+
+                    Elm.setStyles({
+                        left : 0,
+                        top : size.y
+                    });
+
+                    continue;
+                }
+
+                Parent.addEvents({
+                    mouseenter : this.$onMouseEnter,
+                    mouseleave : this.$onMouseLeave
+                });
+
+                Elm.setStyles({
+                    left : size.x,
+                    top : 0
+                });
+            }
+        },
+
+        /**
+         *
+         * @param {DOMEvent} event
+         */
+        $onMouseLeave : function(event)
+        {
+            var Target = event.target;
+
+            Target.getElements('.qui-menu-dropdown-children')
+                  .setStyle('display', 'none');
+        },
+
+        /**
+         *
+         * @param {DOMEvent} event
+         */
+        $onMouseEnter : function(event)
+        {
+            var Target = event.target;
+            var Child = Target.getChildren('.qui-menu-dropdown-children');
+
+            if (Child) {
+                Child.setStyle('display', 'inline');
+            }
+        },
+
+        /**
+         *
+         * @param {DOMEvent} event
+         */
+        $onParentEnter : function(event)
+        {
+            this.$onMouseEnter(event);
+            event.target.focus();
+        },
+
+        /**
+         *
+         * @param {DOMEvent} event
+         */
+        $onParentBlur : function(event)
+        {
+            event.target.getElements('.qui-menu-dropdown-children')
+                        .setStyle('display', 'none');
+        }
+    });
+});
\ No newline at end of file

src/QUI/Menu/DropDownMenu.Children.html

+{assign var=children value=$Site->getNavigation()}
+
+{if !isset($level)}
+    {assign var=level value=1}
+{else}
+    {assign var=level value=$level+1}
+{/if}
+
+{if count($children)}
+<ul class="qui-menu-dropdown-children qui-menu-dropdown-children-level-{$level}"
+    data-level="{$level}"
+        >
+    {foreach from=$children item=Child}
+    <li>
+        <a href="{url site=$Child}">
+            {$Child->getAttribute('title')}
+        </a>
+
+        {if $Child->hasChildren()}
+            {include file="`$FileMenu`" Site=$Child level=$level}
+        {/if}
+    </li>
+    {/foreach}
+</ul>
+{/if}

src/QUI/Menu/DropDownMenu.css

+
+.qui-menu-dropdown ul {
+    padding: 0;
+    margin: 0;
+}
+
+.qui-menu-dropdown li {
+    float: left;
+    list-style-type: none;
+    margin: 0;
+    padding: 0 10px;
+    position: relative;
+}
+
+.qui-menu-dropdown-children {
+    background: rgba(0,0,0,0.5);
+    display: none;
+    font-size: 12px;
+    position: absolute;
+    width: 200px;
+    z-index: 1000;
+}
+
+.qui-menu-dropdown-children li {
+    clear: both;
+    float: left;
+    width: 100%;
+}

src/QUI/Menu/DropDownMenu.html

+
+{assign var=children value=$Site->getNavigation()}
+
+{if count($children)}
+<ul>
+{foreach from=$children item=Child}
+    <li>
+        <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:"html"}">
+            {$Child->getAttribute('title')}
+        </a>
+
+        {if $Child->hasChildren()}
+            {include file="`$FileMenu`" Site=$Child}
+        {/if}
+    </li>
+{/foreach}
+</ul>
+{/if}
\ No newline at end of file

src/QUI/Menu/DropDownMenu.php

+<?php
+
+/**
+ * This file contains \QUI\Menu\DropDownMenu
+ */
+
+namespace QUI\Menu;
+
+use QUI;
+
+/**
+ * Class DropDownMenu
+ * Creates an Drop Down Menu
+ *
+ * @package QUI\Menu
+ * @author  www.pcsg.de (Henning Leutz)
+ */
+class DropDownMenu extends QUI\Control
+{
+    /**
+     * @param array $attributes
+     */
+    public function __construct($attributes = array())
+    {
+        parent::__construct($attributes);
+
+        $this->setAttribute('class', 'qui-menu-dropdown');
+        $this->setAttribute('qui-class', 'package/quiqqer/menu/bin/DropDownMenu');
+
+        $this->addCSSFile(dirname(__FILE__).'/DropDownMenu.css');
+    }
+
+    /**
+     * Create the Body
+     *
+     * @return string
+     * @throws QUI\Exception
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+
+        $Engine->assign(array(
+            'this'     => $this,
+            'Site'     => $this->_getSite(),
+            'Project'  => $this->_getProject(),
+            'FileMenu' => dirname(__FILE__).'/DropDownMenu.Children.html'
+        ));
+
+        return $Engine->fetch(dirname(__FILE__).'/DropDownMenu.html');
+    }
+
+    /**
+     * Return the current site
+     *
+     * @return mixed|QUI\Projects\Site
+     */
+    protected function _getSite()
+    {
+        if ($this->getAttribute('Site')) {
+            return $this->getAttribute('Site');
+        }
+
+        return QUI::getRewrite()->getSite();
+    }
+}
\ No newline at end of file