diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a5a614c96bd05c786862ae0032af724766cf286
--- /dev/null
+++ b/bin/MegaMenu.js
@@ -0,0 +1,153 @@
+/**
+ * @module package/quiqqer/menu/bin/MegaMenu
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ */
+define('package/quiqqer/menu/bin/MegaMenu', [
+
+ 'qui/QUI',
+ 'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+ "use strict";
+
+ return new Class({
+
+ Extends: QUIControl,
+ Type : 'package/quiqqer/menu/bin/MegaMenu',
+
+ Binds: [
+ '$onImport'
+ ],
+
+ initialize: function (options) {
+ this.parent(options);
+
+ this.addEvents({
+ onImport: this.$onImport
+ });
+
+ this.$liSize = 0;
+ this.$enter = false;
+ this.$Nav = null;
+ },
+
+ /**
+ * event: on import
+ */
+ $onImport: function () {
+ this.$Nav = this.getElm().getElement('nav');
+
+ this.$Menu = new Element('div', {
+ 'class': 'quiqqer-menu-megaMenu-list-item-menu control-background',
+ styles : {
+ opacity: 0,
+ top : 0
+ },
+ events : {
+ mouseenter: function () {
+ this.$enter = true;
+ }.bind(this),
+ mouseleave: function () {
+ this.$enter = false;
+ this.$hideCheck();
+ }.bind(this)
+ }
+ }).inject(this.getElm());
+
+ this.$liSize = this.getElm().getSize().y;
+
+ this.$Nav.getElements('.quiqqer-menu-megaMenu-list-item').addEvents({
+ mouseenter: function (event) {
+ var Target = event.target;
+
+ if (Target.nodeName != 'LI') {
+ Target = Target.getParent('li');
+ }
+
+ this.$enter = true;
+ this.showMenuFor(Target);
+ }.bind(this),
+
+ mouseleave: function () {
+ this.$enter = false;
+ this.$hideCheck();
+ }.bind(this)
+ });
+ },
+
+ /**
+ * Shows the menu for the li element
+ *
+ * @param {HTMLLIElement} liElement
+ */
+ showMenuFor: function (liElement) {
+ var Menu = liElement.getElement('.quiqqer-menu-megaMenu-list-item-menu');
+
+ if (!Menu) {
+ return Promise.resolve();
+ }
+
+ this.$Menu.set('html', Menu.get('html'));
+
+ return this.$show();
+ },
+
+ /**
+ * Show the menu
+ * @returns {Promise}
+ */
+ $show: function () {
+ return new Promise(function (resolve) {
+ this.$Menu.setStyles({
+ display: 'flex',
+ top : this.$liSize // vorerst, sonst schauts doof aus
+ });
+
+ moofx(this.$Menu).animate({
+ opacity: 1,
+ top : this.$liSize
+ }, {
+ duration: 200,
+ callback: resolve
+ });
+ }.bind(this));
+ },
+
+ /**
+ * Show the menu
+ * @returns {Promise}
+ */
+ $hide: function () {
+ return new Promise(function (resolve) {
+ moofx(this.$Menu).animate({
+ opacity: 0,
+ top : this.$liSize - 10
+ }, {
+ duration: 200,
+ callback: function () {
+ this.$Menu.setStyles({
+ display: 'none'
+ });
+
+ resolve();
+ }.bind(this)
+ });
+ }.bind(this));
+ },
+
+ /**
+ * Checks, if the menu must closed or not
+ * the check is after 500ms
+ */
+ $hideCheck: function () {
+ (function () {
+ if (this.$enter === false) {
+ this.$hide();
+ }
+ }).delay(500, this);
+ }
+ });
+});
\ No newline at end of file
diff --git a/src/QUI/Menu/DropDownMenu.php b/src/QUI/Menu/DropDownMenu.php
index f39067397ae0926447beeccbdd33a5bdadc6178a..466835abb91289875b72fabd9f3815544cf76aea 100644
--- a/src/QUI/Menu/DropDownMenu.php
+++ b/src/QUI/Menu/DropDownMenu.php
@@ -42,9 +42,9 @@ public function getBody()
$Engine = QUI::getTemplateManager()->getEngine();
$Engine->assign(array(
- 'this' => $this,
- 'Site' => $this->getSite(),
- 'Project' => $this->getProject(),
+ 'this' => $this,
+ 'Site' => $this->getSite(),
+ 'Project' => $this->getProject(),
'FileMenu' => dirname(__FILE__) . '/DropDownMenu.Children.html'
));
diff --git a/src/QUI/Menu/Elastic.php b/src/QUI/Menu/Elastic.php
index 7d0666bc6d7d2f96e00e0578a6b6661087eab333..d93f9ae47d94a3a240fba064b4fa4e971c2a91b2 100644
--- a/src/QUI/Menu/Elastic.php
+++ b/src/QUI/Menu/Elastic.php
@@ -34,10 +34,10 @@ public function getBody()
$Engine = QUI::getTemplateManager()->getEngine();
$Engine->assign(array(
- 'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
- 'this' => $this,
- 'Site' => $this->getSite(),
- 'Project' => $this->getProject(),
+ 'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
+ 'this' => $this,
+ 'Site' => $this->getSite(),
+ 'Project' => $this->getProject(),
'jsControl' => 'package/quiqqer/menu/bin/ElasticMenu'
));
diff --git a/src/QUI/Menu/MegaMenu.css b/src/QUI/Menu/MegaMenu.css
new file mode 100644
index 0000000000000000000000000000000000000000..270373cdf38de12d316d4e877c42ed7e0c236f98
--- /dev/null
+++ b/src/QUI/Menu/MegaMenu.css
@@ -0,0 +1,66 @@
+.quiqqer-menu-megaMenu {
+ float: left;
+ position: relative;
+ z-index: 1000;
+}
+
+.quiqqer-menu-megaMenu-list {
+ margin: 0;
+ padding: 0;
+}
+
+.quiqqer-menu-megaMenu-list-item {
+ display: block;
+ float: left;
+ list-style-type: none;
+ padding: 10px;
+ position: relative;
+}
+
+.quiqqer-menu-megaMenu-list-item a {
+ display: block;
+}
+
+/** sub menu data
+ ================================================= */
+
+.quiqqer-menu-megaMenu-list-item-menu {
+ align-content: stretch;
+ display: none;
+ flex-direction: row;
+ left: 0;
+ position: absolute;
+ max-width: 1200px;
+ width: 100%;
+}
+
+.quiqqer-menu-megaMenu-list-item-menu-children {
+ align-self: stretch;
+ float: left;
+ flex: 1;
+ padding: 20px;
+ width: 80%;
+}
+
+.quiqqer-menu-megaMenu-list-item-menu-children-list-entry {
+ float: left;
+ margin-bottom: 20px;
+ width: 25%;
+}
+
+.quiqqer-menu-megaMenu-list-item-menu-children-list-entry:nth-child(4n+1) {
+ clear: both;
+}
+
+.quiqqer-menu-megaMenu-list-item-menu-children li {
+ list-style-type: none;
+}
+
+.quiqqer-menu-megaMenu-list-item-menu-icon {
+ background: rgba(255, 255, 255, 0.5);
+ /*display: flex;*/
+ float: left;
+ flex: 0 0 20%;
+ text-align: center;
+ width: 20%;
+}
\ No newline at end of file
diff --git a/src/QUI/Menu/MegaMenu.html b/src/QUI/Menu/MegaMenu.html
new file mode 100644
index 0000000000000000000000000000000000000000..f137be917be737d2a6ccddebd7ce77841a16a288
--- /dev/null
+++ b/src/QUI/Menu/MegaMenu.html
@@ -0,0 +1,44 @@
+<nav>
+ <ul class="quiqqer-menu-megaMenu-list">
+ {if $this->getAttribute('showStart')}
+ <li class="quiqqer-menu-megaMenu-list-item{if $Site->getId() == $Start->getId()} quiqqer-menu-megaMenu-list-item--current{/if}">
+ <a href="{url site=$Start}" title="{$Start->getAttribute('title')|escape:" html"}">
+ {$Start->getAttribute('title')}
+ </a>
+ </li>
+ {/if}
+
+ {foreach $children as $Child}
+ {assign var=isInPath value=0}
+ {if $Child->getId() == $Site->getId() ||
+ $Rewrite->isIdInPath($Child->getId())
+ }
+ {assign var=isInPath value=1}
+ {/if}
+ <li class="quiqqer-menu-megaMenu-list-item{if $isInPath} quiqqer-menu-megaMenu-list-item--current{/if}">
+ <a href="{url site=$Child}" title="{$Child->getAttribute('title')|escape:"html"}">
+ {$Child->getAttribute('title')}
+ </a>
+
+ <div class="quiqqer-menu-megaMenu-list-item-menu">
+ <div class="quiqqer-menu-megaMenu-list-item-menu-children">
+ {assign var=subchildren value=$Child->getNavigation()}
+ <ul class="quiqqer-menu-megaMenu-list-item-menu-children-list">
+ {foreach $subchildren as $SubChild}
+ <li class="quiqqer-menu-megaMenu-list-item-menu-children-list-entry">
+ <a href="{url site=$SubChild}"
+ title="{$SubChild->getAttribute('title')|escape:"html"}">
+ {$SubChild->getAttribute('title')}
+ </a>
+ </li>
+ {/foreach}
+ </ul>
+ </div>
+ <div class="quiqqer-menu-megaMenu-list-item-menu-icon">
+ {image src=$Child->getAttribute('image_site')}
+ </div>
+ </div>
+ </li>
+ {/foreach}
+ </ul>
+</nav>
\ No newline at end of file
diff --git a/src/QUI/Menu/MegaMenu.php b/src/QUI/Menu/MegaMenu.php
new file mode 100644
index 0000000000000000000000000000000000000000..248b3d5671a8fcbf499929734bf9e971c1765ed3
--- /dev/null
+++ b/src/QUI/Menu/MegaMenu.php
@@ -0,0 +1,80 @@
+<?php
+
+/**
+ * This file contains QUI\Menu\MegaMenu
+ */
+namespace QUI\Menu;
+
+use QUI;
+
+/**
+ * Class MegaMenu
+ *
+ * @package QUI\Menu
+ */
+class MegaMenu extends QUI\Control
+{
+ /**
+ * @param array $attributes
+ */
+ public function __construct($attributes = array())
+ {
+ $this->setAttributes(array(
+ 'showStart' => false,
+ 'Start' => false,
+ 'data-qui' => 'package/quiqqer/menu/bin/MegaMenu'
+ ));
+
+ parent::__construct($attributes);
+
+ $this->addCSSClass('quiqqer-menu-megaMenu');
+ $this->addCSSFile(dirname(__FILE__) . '/MegaMenu.css');
+ }
+
+ /**
+ * @return string
+ * @throws QUI\Exception
+ */
+ public function getBody()
+ {
+ $Engine = QUI::getTemplateManager()->getEngine();
+
+ $Engine->assign(array(
+ 'this' => $this,
+ 'Site' => $this->getSite(),
+ 'Project' => $this->getProject(),
+ 'Start' => $this->getStart(),
+ 'children' => $this->getStart()->getNavigation(),
+ 'Rewrite' => QUI::getRewrite(),
+ 'jsControl' => 'package/quiqqer/menu/bin/MegaMenu'
+ ));
+
+ return $Engine->fetch(dirname(__FILE__) . '/MegaMenu.html');
+ }
+
+ /**
+ * @return QUI\Projects\Site
+ */
+ public function getStart()
+ {
+ if ($this->getAttribute('Start')) {
+ return $this->getAttribute('Start');
+ }
+
+ return $this->getProject()->firstChild();
+ }
+
+ /**
+ * Return the current site
+ *
+ * @return mixed|QUI\Projects\Site
+ */
+ protected function getSite()
+ {
+ if ($this->getAttribute('Site')) {
+ return $this->getAttribute('Site');
+ }
+
+ return QUI::getRewrite()->getSite();
+ }
+}
diff --git a/src/QUI/Menu/SidebarDropDownMenu.php b/src/QUI/Menu/SidebarDropDownMenu.php
index c68295ce43faf490c1dd1e43548e4acd659ad151..03684245a0824bb75d767801ace6fda0732758f6 100644
--- a/src/QUI/Menu/SidebarDropDownMenu.php
+++ b/src/QUI/Menu/SidebarDropDownMenu.php
@@ -25,11 +25,11 @@ public function __construct($attributes = array())
{
// defaults values
$this->setAttributes(array(
- 'startId' => 1, // id or site link
- 'homeLink' => false,
- 'levels' => false,
- 'homeIcon' => 'fa-home',
- 'listIcon' => 'fa-angle-right',
+ 'startId' => 1, // id or site link
+ 'homeLink' => false,
+ 'levels' => false,
+ 'homeIcon' => 'fa-home',
+ 'listIcon' => 'fa-angle-right',
'levelIcon' => 'fa-angle-double-down',
'qui-class' => 'package/quiqqer/menu/bin/SidebarDropDownMenu'
));
@@ -60,11 +60,9 @@ public function getBody()
if (Utils::isSiteLink($startId)) {
$Site = Utils::getSiteByLink($startId);
-
} else {
$Site = $Project->get((int)$startId);
}
-
} catch (QUI\Exception $Exception) {
QUI\System\Log::addWarning($Exception->getMessage());
@@ -86,17 +84,17 @@ public function getBody()
}
$Engine->assign(array(
- 'this' => $this,
- 'Project' => $this->getProject(),
- 'Site' => $Site,
- 'homeLink' => $homeLink = $this->getAttribute('homeLink'),
- 'activeId' => $activeId,
+ 'this' => $this,
+ 'Project' => $this->getProject(),
+ 'Site' => $Site,
+ 'homeLink' => $homeLink = $this->getAttribute('homeLink'),
+ 'activeId' => $activeId,
'navTemplate' => dirname(__FILE__) . '/SidebarDropDownMenu.html',
- 'levels' => $levels,
- 'Rewrite' => QUI::getRewrite(),
- 'homeIcon' => $homeIcon = $this->getAttribute('homeIcon'),
- 'listIcon' => $listIcon = $this->getAttribute('listIcon'),
- 'levelIcon' => $levelIcon = $this->getAttribute('levelIcon')
+ 'levels' => $levels,
+ 'Rewrite' => QUI::getRewrite(),
+ 'homeIcon' => $homeIcon = $this->getAttribute('homeIcon'),
+ 'listIcon' => $listIcon = $this->getAttribute('listIcon'),
+ 'levelIcon' => $levelIcon = $this->getAttribute('levelIcon')
));
$html = $Engine->fetch(dirname(__FILE__) . '/SidebarDropDownMenu.html');
diff --git a/src/QUI/Menu/SlideOut.php b/src/QUI/Menu/SlideOut.php
index 9400ba564a1509c2465bf468dccdeaf54dc5bee4..64791175c5d746715e62da25087a9c4b6614987e 100644
--- a/src/QUI/Menu/SlideOut.php
+++ b/src/QUI/Menu/SlideOut.php
@@ -26,10 +26,10 @@ public function getBody()
$Engine = QUI::getTemplateManager()->getEngine();
$Engine->assign(array(
- 'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
- 'this' => $this,
- 'Site' => $this->getSite(),
- 'Project' => $this->getProject(),
+ 'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
+ 'this' => $this,
+ 'Site' => $this->getSite(),
+ 'Project' => $this->getProject(),
'jsControl' => 'package/quiqqer/menu/bin/SlideOut'
));