fix: #11 - input

bin/Controls/Independent/Input.css

+.quiqqer-menu-independent-input {
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+}
+
+.quiqqer-menu-independent-input-display {
+    flex-grow: 1;
+    line-height: 30px;
+    padding-left: 10px;
+}
+
+.quiqqer-menu-independent-input button {
+    align-items: center;
+    border-radius: 0;
+    border-left: 1px solid rgba(147, 128, 108, 0.25);
+    box-shadow: none;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 50px;
+}

bin/Controls/Independent/Input.js

+/**
+ * @module package/quiqqer/menu/bin/Controls/Independent/Input
+ * @author www.pcsg.de (Henning Leutz)
+ */
+define('package/quiqqer/menu/bin/Controls/Independent/Input', [
+
+    'qui/controls/Control',
+    'qui/controls/windows/Confirm',
+    'package/quiqqer/menu/bin/classes/IndependentHandler',
+    'Locale',
+
+    'css!package/quiqqer/menu/bin/Controls/Independent/Input.css'
+
+], function (QUIControl, QUIConfirm, IndependentHandler, QUILocale) {
+    "use strict";
+
+    const lg = 'quiqqer/menu';
+
+    /**
+     * @class controls/projects/Input
+     *
+     * @param {Object} options
+     * @param {HTMLElement} [Input] - (optional) if no input given, one would be created
+     *
+     * @memberof! <global>
+     */
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'controls/projects/project/media/Input',
+
+        Binds: [
+            '$onInject',
+            'click'
+        ],
+
+        initialize: function (options, Input) {
+            this.parent(options);
+
+            this.$Input = Input || null;
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+        },
+
+        refreshDisplay: function () {
+            if (!this.$Display || !this.$Input) {
+                return;
+            }
+
+            const value = parseInt(this.$Input.value);
+
+            IndependentHandler.getList().then((list) => {
+                for (let i = 0, len = list.length; i < len; i++) {
+                    if (parseInt(list[i].id) === value) {
+                        this.$Display.set('html', '#' + list[i].id + ' ' + list[i].title);
+                    }
+                }
+            });
+
+        },
+
+        create: function () {
+            this.$Elm = new Element('div', {
+                'class'     : 'quiqqer-menu-independent-input',
+                'data-quiid': this.getId(),
+                'data-qui'  : 'package/quiqqer/menu/bin/Controls/Independent/Input'
+            });
+
+            if (!this.$Input) {
+                this.$Input = new Element('input', {
+                    name: this.getAttribute('name')
+                }).inject(this.$Elm);
+            } else {
+                this.$Elm.wraps(this.$Input);
+            }
+
+            if (this.$Input.hasClass('field-container-field')) {
+                this.$Elm.addClass('field-container-field');
+                this.$Input.removeClass('field-container-field');
+            }
+
+            this.$Elm.addEvent('click', (e) => {
+                e.stop();
+                this.click();
+            });
+
+            this.$Input.type = 'hidden';
+
+            this.$Display = new Element('div', {
+                'class': 'quiqqer-menu-independent-input-display'
+            }).inject(this.$Elm);
+
+            new Element('button', {
+                'class': 'button qui-button--no-icon qui-button qui-utils-noselect',
+                html   : '<span class="fa fa-bars"></span>',
+                title  : QUILocale.get(lg, 'quiqqer.menu.select.win.button'),
+                events : {
+                    click: (e) => {
+                        e.stop();
+                        this.click();
+                    }
+                }
+            }).inject(this.$Elm);
+
+            if (this.$Input.value !== '') {
+                this.refreshDisplay();
+            }
+
+            return this.$Elm;
+        },
+
+        $onImport: function () {
+            this.$Input = this.getElm();
+            this.create();
+        },
+
+        click: function () {
+            new QUIConfirm({
+                icon     : 'fa fa-bars',
+                title    : QUILocale.get(lg, 'quiqqer.menu.select.win.title'),
+                maxHeight: 300,
+                maxWidth : 500,
+                events   : {
+                    onOpen  : function (Win) {
+                        Win.getContent().set('html', '');
+                        Win.getContent().setStyle('textAlign', 'center');
+                        Win.Loader.show();
+
+                        IndependentHandler.getList().then((list) => {
+                            Win.getContent().set(
+                                'html',
+                                QUILocale.get(lg, 'quiqqer.menu.select.win.content')
+                            );
+
+                            const Select = new Element('select', {
+                                styles: {
+                                    clear  : 'both',
+                                    display: 'inline-block',
+                                    margin : '20px 0 0 0',
+                                    width  : '50%'
+                                }
+                            }).inject(Win.getContent());
+
+                            for (let i = 0, len = list.length; i < len; i++) {
+                                new Element('option', {
+                                    'html' : '#' + list[i].id + ' ' + list[i].title,
+                                    'value': list[i].id
+                                }).inject(Select);
+                            }
+
+                            Win.Loader.hide();
+                        });
+                    },
+                    onSubmit: (Win) => {
+                        this.$Input.value = Win.getContent().getElement('select').value;
+                        this.refreshDisplay();
+                        Win.close();
+                    }
+                }
+            }).open();
+        }
+    });
+});
\ No newline at end of file

bin/Controls/Independent/MenuItemsSorting.js

@@ -7,7 +7,7 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuItemsSorting', [
     'qui/QUI',
     'qui/controls/windows/Confirm',
     'Locale',
-    'package/quiqqer/bricks/bin/Sortables',
+    'package/quiqqer/menu/bin/classes/Independent/Sortables',
 
     'css!package/quiqqer/menu/bin/Controls/Independent/MenuItemsSorting.css'
 
@@ -129,8 +129,6 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuItemsSorting', [
 
             const findInChildren = function (id) {
                 for (let i = 0, len = children.length; i < len; i++) {
-                    console.log(children[i].getId());
-
                     if (children[i].getId() === id) {
                         return children[i];
                     }

bin/Controls/Independent/MenuManagement.js

@@ -11,15 +11,14 @@ define('package/quiqqer/menu/bin/Controls/Independent/MenuManagement', [
     'Locale',
     'Ajax',
     'Mustache',
-    'package/quiqqer/menu/bin/classes/Independent/Handler',
+    'package/quiqqer/menu/bin/classes/IndependentHandler',
 
     'text!package/quiqqer/menu/bin/Controls/Independent/MenuManagement.Create.html'
 
-], function (QUI, QUIPanel, QUIConfirm, Grid, QUILocale, QUIAjax, Mustache, MenuHandler, templateCreate) {
+], function (QUI, QUIPanel, QUIConfirm, Grid, QUILocale, QUIAjax, Mustache, Handler, templateCreate) {
     "use strict";
 
     const lg = 'quiqqer/menu';
-    const Handler = new MenuHandler();
 
     return new Class({
 

bin/classes/Independent/Sortables.js

+/*
+ ---
+
+ script: Sortables.js
+
+ name: Sortables
+
+ description: Class for creating a drag and drop sorting interface for lists of items.
+
+ license: MIT-style license
+
+ authors:
+ - Tom Occhino
+
+ requires:
+ - Core/Fx.Morph
+ - Drag.Move
+
+ provides: [Sortables]
+
+ ...
+ */
+
+define('package/quiqqer/menu/bin/classes/Independent/Sortables', function () {
+    "use strict";
+
+    return new Class({
+
+        Implements: [
+            Events,
+            Options
+        ],
+
+        options: {
+            /*
+             onSort: function(element, clone){},
+             onStart: function(element, clone){},
+             onComplete: function(element){},*/
+            opacity        : 1,
+            clone          : false,
+            revert         : false,
+            handle         : false,
+            dragOptions    : {},
+            unDraggableTags: [
+                'button',
+                'input',
+                'a',
+                'textarea',
+                'select',
+                'option'
+            ]
+        },
+
+        initialize: function (lists, options) {
+            this.setOptions(options);
+
+            this.elements = [];
+            this.lists = [];
+            this.idle = true;
+
+            this.addLists($$(document.id(lists) || lists));
+
+            if (!this.options.clone) this.options.revert = false;
+            if (this.options.revert) this.effect = new Fx.Morph(null, Object.merge({
+                duration: 250,
+                link    : 'cancel'
+            }, this.options.revert));
+        },
+
+        attach: function () {
+            this.addLists(this.lists);
+            return this;
+        },
+
+        detach: function () {
+            this.lists = this.removeLists(this.lists);
+            return this;
+        },
+
+        addItems: function () {
+            Array.flatten(arguments).each(function (element) {
+                this.elements.push(element);
+                var start = element.retrieve('sortables:start', function (event) {
+                    this.start.call(this, event, element);
+                }.bind(this));
+                (this.options.handle ? element.getElement(this.options.handle) || element :
+                    element).addEvent('mousedown', start);
+            }, this);
+            return this;
+        },
+
+        addLists: function () {
+            Array.flatten(arguments).each(function (list) {
+                this.lists.include(list);
+                this.addItems(list.getChildren());
+            }, this);
+            return this;
+        },
+
+        removeItems: function () {
+            return $$(Array.flatten(arguments).map(function (element) {
+                this.elements.erase(element);
+                var start = element.retrieve('sortables:start');
+                (this.options.handle ? element.getElement(this.options.handle) || element :
+                    element).removeEvent('mousedown', start);
+
+                return element;
+            }, this));
+        },
+
+        removeLists: function () {
+            return $$(Array.flatten(arguments).map(function (list) {
+                this.lists.erase(list);
+                this.removeItems(list.getChildren());
+
+                return list;
+            }, this));
+        },
+
+        getDroppableCoordinates: function (element) {
+            var offsetParent = element.getOffsetParent();
+            var position = element.getPosition(offsetParent);
+            var scroll = {
+                w           : window.getScroll(),
+                offsetParent: offsetParent.getScroll()
+            };
+            position.x += scroll.offsetParent.x;
+            position.y += scroll.offsetParent.y;
+
+            if (offsetParent.getStyle('position') === 'fixed') {
+                position.x -= scroll.w.x;
+                position.y -= scroll.w.y;
+            }
+
+            return position;
+        },
+
+        getClone: function (event, element) {
+            if (!this.options.clone) return new Element(element.tagName).inject(document.body);
+            if (typeOf(this.options.clone) === 'function')
+                return this.options.clone.call(this, event, element, this.list);
+
+            var clone = element.clone(true).setStyles({
+                margin    : 0,
+                position  : 'absolute',
+                visibility: 'hidden',
+                width     : element.getStyle('width')
+            }).addEvent('mousedown', function (event) {
+                element.fireEvent('mousedown', event);
+            });
+            //prevent the duplicated radio inputs from unchecking the real one
+            if (clone.get('html').test('radio')) {
+                clone.getElements('input[type=radio]').each(function (input, i) {
+                    input.set('name', 'clone_' + i);
+                    if (input.get('checked')) element.getElements('input[type=radio]')[i].set('checked', true);
+                });
+            }
+
+            return clone.inject(this.list).setPosition(this.getDroppableCoordinates(this.element));
+        },
+
+        getDroppables: function () {
+            var droppables = this.list.getChildren().erase(this.clone).erase(this.element);
+            if (!this.options.constrain) droppables.append(this.lists).erase(this.list);
+            return droppables;
+        },
+
+        insert: function (dragging, element) {
+            var where = 'inside';
+            if (this.lists.contains(element)) {
+                this.list = element;
+                this.drag.droppables = this.getDroppables();
+            } else {
+                where = this.element.getAllPrevious().contains(element) ? 'before' : 'after';
+            }
+            this.element.inject(element, where);
+            this.fireEvent('sort', [
+                this.element,
+                this.clone
+            ]);
+        },
+
+        start: function (event, element) {
+            if (
+                !this.idle ||
+                event.rightClick ||
+                (!this.options.handle && this.options.unDraggableTags.contains(event.target.get('tag')))
+            ) return;
+
+            this.idle = false;
+            this.element = element;
+            this.opacity = element.getStyle('opacity');
+            this.list = element.getParent();
+            this.clone = this.getClone(event, element);
+
+            this.drag = new Drag.Move(this.clone, Object.merge({
+
+                droppables: this.getDroppables()
+            }, this.options.dragOptions)).addEvents({
+                onSnap    : function () {
+                    event.stop();
+                    this.clone.setStyle('visibility', 'visible');
+                    this.element.setStyle('opacity', this.options.opacity || 0);
+                    this.fireEvent('start', [
+                        this.element,
+                        this.clone
+                    ]);
+                }.bind(this),
+                onEnter   : this.insert.bind(this),
+                onCancel  : this.end.bind(this),
+                onComplete: this.end.bind(this)
+            });
+
+            this.clone.inject(this.element, 'before');
+            this.drag.start(event);
+        },
+
+        end: function () {
+            this.drag.detach();
+            this.element.setStyle('opacity', this.opacity);
+            var self = this;
+            if (this.effect) {
+                var dim   = this.element.getStyles('width', 'height'),
+                    clone = this.clone,
+                    pos   = clone.computePosition(this.getDroppableCoordinates(clone));
+
+                var destroy = function () {
+                    this.removeEvent('cancel', destroy);
+                    clone.destroy();
+                    self.reset();
+                };
+
+                this.effect.element = clone;
+                this.effect.start({
+                    top    : pos.top,
+                    left   : pos.left,
+                    width  : dim.width,
+                    height : dim.height,
+                    opacity: 0.25
+                }).addEvent('cancel', destroy).chain(destroy);
+            } else {
+                this.clone.destroy();
+                self.reset();
+            }
+
+        },
+
+        reset: function () {
+            this.idle = true;
+            this.fireEvent('complete', this.element);
+        },
+
+        serialize: function () {
+            var params = Array.link(arguments, {
+                modifier: Type.isFunction,
+                index   : function (obj) {
+                    return obj !== null;
+                }
+            });
+            var serial = this.lists.map(function (list) {
+                return list.getChildren().map(params.modifier || function (element) {
+                    return element.get('id');
+                }, this);
+            }, this);
+
+            var index = params.index;
+            if (this.lists.length === 1) index = 0;
+            return (index || index === 0) && index >= 0 && index < this.lists.length ? serial[index] : serial;
+        }
+
+    });
+});

locale.xml

@@ -541,5 +541,19 @@
             The type can be changed at any time.
             ]]></en>
         </locale>
+
+        <locale name="quiqqer.menu.select.win.title">
+            <de><![CDATA[Menü zuweisen]]></de>
+            <en><![CDATA[Assign a menu]]></en>
+        </locale>
+        <locale name="quiqqer.menu.select.win.content">
+            <de><![CDATA[Bitte wähle ein Menü aus welches du zuweisen möchtest.]]></de>
+            <en><![CDATA[Please select a menu you want to assign.]]></en>
+        </locale>
+        <locale name="quiqqer.menu.select.win.button">
+            <de><![CDATA[Menü Auswahl]]></de>
+            <en><![CDATA[Select menu]]></en>
+        </locale>
+
     </groups>
 </locales>