Merge branch 'dev'

bin/Controls/OnePageNav.js

+/**
+ * One page navigation control.
+ *
+ * @module package/quiqqer/menu/bin/Controls/OnePageNav
+ * @author www.pcsg.de (Michael Danielczok)
+ */
+define('package/quiqqer/menu/bin/Controls/OnePageNav', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/menu/bin/Controls/OnePageNav',
+
+        Binds: [
+            '$onImport',
+            'setMenuPosition',
+            'resize',
+            'setAnchorPos',
+            'checkActiveNavEntry'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.Nav = null;
+            this.breakPoint = 0;
+            this.anchors = null;
+            this.anchorPos = {};
+            this.CurrentNavEntry = null;
+            this.CUrrentNavIndex = null;
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        $onImport: function () {
+            var self = this;
+
+            this.Nav = this.$Elm.getElement('.onePageNav');
+//            var navPos = this.Nav.getPosition().y;
+//            console.log(navPos)
+//            this.breakPoint = navPos - 60; // 60px nav height
+            this.breakPoint = window.getSize().y - 60; // 60px nav height
+
+            QUI.addEvent('scroll', function () {
+                self.setNavPosition();
+//                self.checkActiveNavEntry();
+            });
+
+            QUI.addEvent('resize', this.resize);
+
+            this.anchors = this.$Elm.getElements('.onePageNav-entry-siteAnchor');
+
+            this.anchors.addEvent('click', function (event) {
+                event.stop();
+                self.scrollToElement(event.target);
+            });
+
+            this.resize();
+        },
+
+        /**
+         * Set position of the nav (fixed / absolute).
+         */
+        setNavPosition: function () {
+            if (QUI.getScroll().y >= this.breakPoint) {
+
+                this.Nav.addClass('fixed');
+
+                this.Nav.setStyles({
+                    position: 'fixed',
+                    top     : 0
+                });
+                return;
+            }
+
+            this.Nav.removeClass('fixed');
+            this.Nav.setStyles({
+                position: 'absolute',
+                top     : -60
+            });
+        },
+
+        /**
+         * Recalculate some variables on page resize
+         */
+        resize: function () {
+            this.breakPoint = window.getSize().y - 60; // 60px nav height
+            this.setNavPosition();
+//            this.setAnchorPos();
+        },
+
+        /**
+         * Scroll page to an element based on the property "data-qui-anchor-name"
+         * of the button obtained
+         *
+         * @param Button DOM Node
+         */
+        scrollToElement: function (Button) {
+            // todo support for name tag: [name="tagName"]
+            var anchor    = Button.getProperty('data-qui-anchor-name'),
+                TargetElm = document.getElement(anchor);
+
+            new Fx.Scroll(window, {
+                offset: {
+                    x: 0,
+                    y: -59
+                }
+            }).toElement(TargetElm);
+        },
+
+        /**
+         * Save position of all anchors in an array
+         */
+        setAnchorPos: function () {
+            var self = this;
+            this.anchorPos = [];
+
+            this.anchors.each(function (Anchor) {
+                var anchor    = Anchor.getProperty('data-qui-anchor-name'),
+                    TargetElm = document.getElement(anchor);
+
+                self.anchorPos.push({
+                    Element: Anchor,
+                    pos    : TargetElm.getPosition().y
+                });
+            });
+        },
+
+        /**
+         * Check witch nav entry should be active
+         * depend on the window scroll position.
+         */
+        checkActiveNavEntry: function () {
+            var pos = QUI.getScroll().y;
+
+            if (pos < this.anchorPos[0].pos) {
+                return;
+            }
+
+            for (var i = 0, len = this.anchorPos.length; i < len; i++) {
+                var current = this.anchorPos[i];
+                var next = this.anchorPos[i + 1];
+
+                if (pos < current.pos) {
+                    continue;
+                }
+
+                if (next === undefined || pos < next.pos) {
+                    current.Element.addClass('active');
+
+                    if (this.CurrentNavEntry !== null) {
+                        this.CurrentNavEntry.removeClass('active');
+                    }
+
+                    this.CurrentNavEntry = current.Element;
+                }
+            }
+        }
+    });
+});
+

bin/Controls/OnePageNavSettings.css

+.qui-controls-formlist-entry {
+    background: #e8edff;
+    padding: 10px;
+    margin: 10px 0;
+    border-bottom: none;
+    position: relative;
+}
+
+.qui-controls-formlist-entry-delete {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 !important;
+}
+
+.qui-controls-formlist-entry-delete .qui-button {
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    border-left: 1px solid #cdd2e2;
+    background: #c8cdde;
+    border-bottom: 1px solid #cdd2e2;
+    color: #333;
+}
+
+.qui-controls-formlist-entry-delete .qui-button:hover {
+    background: #a6abbd;
+}
+
+.qui-controls-formlist-entry-data {
+    max-width: 700px;
+    width: 100% !important;
+}
+
+.quiqqer-bricks-ContentSwitcher-entry label {
+    width: 100% !important;
+}
+
+.quiqqer-bricks-ContentSwitcher-entry span.entry-title {
+
+    display: block;
+    margin-bottom: 6px;
+}
+
+.quiqqer-bricks-ContentSwitcher-entry input,
+.quiqqer-bricks-ContentSwitcher-entry textarea {
+    max-width: 100%;
+    width: 100%;
+}
+
+.quiqqer-bricks-ContentSwitcher-entry .field-container-field {
+    border: none;
+    padding: 0;
+}
+
+.quiqqer-bricks-ContentSwitcher-entry .control-editor-preview {
+    height: 120px !important;
+    background: #fff;
+}

bin/Controls/OnePageNavSettings.js

+/**
+ * @module package/quiqqer/menu/bin/Controls/OnePageNavSettings
+ * @author www.pcsg.de (Michael Danielczok)
+ */
+define('package/quiqqer/menu/bin/Controls/OnePageNavSettings', [
+
+    'qui/controls/elements/FormList',
+    'utils/Controls',
+    'Locale',
+
+    'css!package/quiqqer/menu/bin/Controls/OnePageNavSettings.css'
+
+], function (QUIFormList, QUIControls, QUILocale) {
+    "use strict";
+
+    var lg = 'quiqqer/menu';
+
+    return new Class({
+
+        Extends: QUIFormList,
+        Type   : 'package/quiqqer/menu/bin/Controls/OnePageNavSettings',
+
+        Binds: [
+            '$onParsed'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.addEvents({
+                onParsed  : this.$onParsed
+            });
+
+            this.setAttributes({
+                buttonText: QUILocale.get(lg, 'menu.control.OnePageNav.addLink'),
+                entry: '<div class="quiqqer-bricks-ContentSwitcher-entry" style="display: none;">' +
+                            '<label>' +
+                               '<span class="entry-title">' +
+                                 QUILocale.get(lg, 'menu.control.OnePageNav.entries.linkTitle') +
+                               '</span>' +
+                               '<input type="text" name="linkTitle" />' +
+                            '</label>' +
+                            '<label>' +
+                                '<span class="entry-title">' +
+                                    QUILocale.get(lg, 'menu.control.OnePageNav.entries.linkType') +
+                                '</span>' +
+                                '<select name="linkType">' +
+                                    '<option value="anchor">Anker</option>'+
+                                    '<option value="url">Url</option>'+
+                                '</select>' +
+                            '</label>' +
+                            '<label>' +
+                                '<span class="entry-title">' +
+                                    QUILocale.get(lg, 'menu.control.OnePageNav.entries.link') +
+                                '</span>' +
+                                '<input type="text" name="link" data-external="1" data-qui="controls/projects/project/site/Input" />' +
+                            '</label>' +
+                       '</div>'
+            });
+        },
+
+        /**
+         * Parses QUI controls when a new entry is created
+         *
+         * Fired after (inherited) FormList has parsed the content
+         *
+         * @param event
+         * @param Element - The element that was previously parsed by (inherited) FormList
+         */
+        $onParsed: function (event, Element) {
+            QUIControls.parse(Element).then(function () {
+                // Element is fully parsed so we can finally show it
+                Element.getElement('.quiqqer-bricks-ContentSwitcher-entry').show();
+            });
+        }
+    });
+});
+

bricks.xml

@@ -73,5 +73,21 @@
             </settings>
         </brick>
 
+        <!-- one page nav -->
+        <brick control="\QUI\Menu\OnePageNav">
+            <title>
+                <locale group="quiqqer/menu" var="menu.control.OnePageNav.title"/>
+            </title>
+            <description>
+                <locale group="quiqqer/menu" var="menu.control.OnePageNav.description"/>
+            </description>
+
+            <settings>
+                <setting name="entries" data-qui="package/quiqqer/menu/bin/Controls/OnePageNavSettings">
+                    <locale group="quiqqer/menu" var="menu.control.OnePageNav.entries"/>
+                </setting>
+            </settings>
+        </brick>
+
     </bricks>
 </quiqqer>
\ No newline at end of file

locale.xml

@@ -114,5 +114,42 @@
             <de><![CDATA[Auch Seiten anzeigen welche die Eigenschaft nicht in Navigation anzeigen besitzen.]]></de>
             <en><![CDATA[Also show pages that do not have the property Show in navigation.]]></en>
         </locale>
+
+        <!-- one page nav -->
+        <locale name="menu.control.OnePageNav.addLink">
+            <de><![CDATA[Link hinzufügen]]></de>
+            <en><![CDATA[Add link]]></en>
+        </locale>
+        <locale name="menu.control.OnePageNav.entries">
+            <de><![CDATA[Einträge]]></de>
+            <en><![CDATA[Entries]]></en>
+        </locale>
+        <locale name="menu.control.OnePageNav.entries.linkTitle">
+            <de><![CDATA[Link-Titel]]></de>
+            <en><![CDATA[Link title]]></en>
+        </locale>
+        <locale name="menu.control.OnePageNav.entries.linkType">
+            <de><![CDATA[Link-Typ]]></de>
+            <en><![CDATA[Link typ]]></en>
+        </locale>
+            <locale name="menu.control.OnePageNav.entries.linkType.anchor">
+                <de><![CDATA[Anker]]></de>
+                <en><![CDATA[Anchor]]></en>
+            </locale>
+            <locale name="menu.control.OnePageNav.entries.linkType.url">
+                <de><![CDATA[Url]]></de>
+                <en><![CDATA[Url]]></en>
+            </locale>
+        <locale name="menu.control.OnePageNav.entries.link" html="true">
+            <de><![CDATA[Seitenlink oder CSS Selector. <br>
+            <strong>Seitenlink:</strong> die URL muss valid sein. <br>
+            <strong>CSS Selector:</strong> Element, zu dem gescrollt werden soll.
+            Z.B. <i>.css-Klasse</i>, <i>#elementId</i>]]></de>
+            <en><![CDATA[Page link or CSS selector. <br>
+            <strong>Page link:</strong> the URL must be valid. <br>
+            <strong>CSS selector:</strong> Element to scroll to.
+            E.g. <i>.css-class</i>, <i>#elementId</i>]]>
+            </en>
+        </locale>
     </groups>
 </locales>
\ No newline at end of file

src/QUI/Menu/OnePageNav.css

+.onePageNav-container {
+    position: relative;
+}
+
+.onePageNav {
+    background: rgba(20, 20, 20, 0.2);
+    height: 60px;
+    position: absolute;
+    top: -60px;
+    width: 100%;
+    z-index: 1000;
+    transition: 0.2s background-color;
+}
+
+.onePageNav.fixed {
+    background: #26221d;
+}
+
+.onePageNav .grid-container {
+    height: 100%;
+}
+
+.onePageNav-entries {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    justify-content: center;
+}
+
+.onePageNav-entry {
+    padding: 0 30px 0 0;
+    margin-right: 30px;
+    position: relative;
+}
+
+.onePageNav-entry:after {
+    content: '-';
+    color: #fff;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.onePageNav-entry:last-child:after {
+    content: '';
+    display: none;
+}
+
+.onePageNav-entry a {
+    color: #fff;
+    font-weight: normal;
+}
+
+.onePageNav-entry a.active {
+    font-weight: bold;
+}
\ No newline at end of file

src/QUI/Menu/OnePageNav.html

+<div class="onePageNav-container">
+    <div class="onePageNav">
+        <div class="grid-container">
+            <ul class="onePageNav-entries">
+                {foreach from=$entries item=entry key=key}
+                <li class="onePageNav-entry">
+                     {if $entry.linkType == 'anchor'}
+                    <a href="{$entry.link}" class="onePageNav-entry-siteAnchor"
+                       data-qui-anchor-name="{$entry.link|escape:'html'}"
+                       title="{$entry.linkTitle}">
+                        {$entry.linkTitle}
+                    </a>
+                    {else}
+                    <a href="{$entry.link}" title="{$entry.linkTitle}">
+                        {$entry.linkTitle}
+                    </a>
+                    {/if}
+                </li>
+                {/foreach}
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/QUI/Menu/OnePageNav.php

+<?php
+
+/**
+ * This file contains QUI\Menu\OnePageNav
+ */
+
+namespace QUI\Menu;
+
+use QUI;
+
+/**
+ * Class OnePageNav
+ *
+ * @package quiqqer/menu
+ */
+class OnePageNav extends QUI\Control
+{
+    /**
+     * constructor
+     *
+     * @param array $attributes
+     */
+    public function __construct($attributes = [])
+    {
+        // default options
+        $this->setAttributes([
+            'title'       => 'One Page Navigation',
+            'contentList' => false,
+            'entries'     => [],
+            'qui-class'   => 'package/quiqqer/menu/bin/Controls/OnePageNav'
+        ]);
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(
+            dirname(__FILE__) . '/OnePageNav.css'
+        );
+    }
+
+    /**
+     * (non-PHPdoc)
+     *
+     * @see \QUI\Control::create()
+     */
+    public function getBody()
+    {
+        $Engine  = QUI::getTemplateManager()->getEngine();
+        $entries = $this->getAttribute('entries');
+
+        if (is_string($entries)) {
+            $entries = json_decode($entries, true);
+        }
+
+        $Engine->assign([
+            'this'    => $this,
+            'entries' => $entries
+        ]);
+
+        return $Engine->fetch(dirname(__FILE__) . '/OnePageNav.html');
+    }
+}