feat: new menu / menu bar attributes -> styles and container styles can be set

qui/controls/contextmenu/Bar.js

@@ -4,10 +4,6 @@
  * @module qui/controls/contextmenu/Bar
  * @author www.pcsg.de (Henning Leutz)
  *
- * @require qui/controls/Control
- * @require qui/controls/contextmenu/BarItem
- * @require css!qui/controls/contextmenu/Bar.css
- *
  * @event onChildClick
  */
 
@@ -42,7 +38,11 @@ define('qui/controls/contextmenu/Bar', [
             styles   : null,     // mootools css styles
             width    : 200,      // menü width
             openening: false,    // if open status = true, onmouseover opens the baritmes
-            dragable : false
+            dragable : false,
+
+            menuMaxHeight      : false,
+            menuStyles         : null,
+            menuContainerStyles: null
         },
 
         initialize: function (options) {
@@ -57,7 +57,7 @@ define('qui/controls/contextmenu/Bar', [
          * Create the DOMNode Element
          *
          * @method qui/controls/contextmenu/Bar#create
-         * @return {HTMLElement}
+         * @return {HTMLElement|Element}
          */
         create: function () {
             this.$Elm = new Element('div', {
@@ -84,6 +84,18 @@ define('qui/controls/contextmenu/Bar', [
                     list[i].dragable = true;
                 }
 
+                if (this.getAttribute('menuMaxHeight')) {
+                    list[i].menuMaxHeight = this.getAttribute('menuMaxHeight');
+                }
+
+                if (this.getAttribute('menuStyles')) {
+                    list[i].menuStyles = this.getAttribute('menuStyles');
+                }
+
+                if (this.getAttribute('menuContainerStyles')) {
+                    list[i].menuContainerStyles = this.getAttribute('menuContainerStyles');
+                }
+
                 this.appendChild(
                     new ContextBarItem(list[i])
                 );
@@ -156,6 +168,18 @@ define('qui/controls/contextmenu/Bar', [
                 Child.setAttribute('dragable', true);
             }
 
+            if (this.getAttribute('menuMaxHeight')) {
+                Child.setAttribute('menuMaxHeight', this.getAttribute('menuMaxHeight'));
+            }
+
+            if (this.getAttribute('menuStyles')) {
+                Child.setAttribute('menuStyles', this.getAttribute('menuStyles'));
+            }
+
+            if (this.getAttribute('menuContainerStyles')) {
+                Child.setAttribute('menuContainerStyles', this.getAttribute('menuContainerStyles'));
+            }
+
             this.$items.push(Child);
 
             Child.addEvents({

qui/controls/contextmenu/BarItem.js

@@ -4,12 +4,6 @@
  * @module qui/controls/contextmenu/BarItem
  * @author www.pcsg.de (Henning Leutz)
  *
- * @require qui/controls/Control
- * @require qui/controls/contextmenu/Menu
- * @require qui/controls/contextmenu/Item
- * @require qui/controls/contextmenu/Separator
- * @require css!qui/controls/contextmenu/BarItem.css
- *
  * @event onClick [ {this}, {DOMEvent} ]
  * @event onFocus [ {this} ]
  * @event onBlur [ {this} ]
@@ -62,7 +56,10 @@ define('qui/controls/contextmenu/BarItem', [
             icon       : '',
             styles     : null,
             dragable   : false,
-            hideifempty: false
+            hideifempty: false,
+
+            menuStyles         : null,
+            menuContainerStyles: null
         },
 
         initialize: function (options) {
@@ -337,7 +334,11 @@ define('qui/controls/contextmenu/BarItem', [
                                 children[i].setNormal();
                             }
                         }
-                    }
+                    },
+
+                    maxHeight      : this.getAttribute('menuMaxHeight') || false,
+                    styles         : this.getAttribute('menuStyles') || false,
+                    stylesContainer: this.getAttribute('menuContainerStyles') || false
                 });
             }
 

qui/controls/contextmenu/Menu.js

@@ -4,11 +4,6 @@
  * @module qui/controls/contextmenu/Menu
  * @author www.pcsg.de (Henning Leutz)
  *
- * @require qui/QUI
- * @require qui/controls/Control
- * @require qui/utils/Elements
- * @require css!qui/controls/contextmenu/Menu.css
- *
  * @event onMouseEnter
  * @event onMouseLeave
  */
@@ -43,14 +38,15 @@ define('qui/controls/contextmenu/Menu', [
         ],
 
         options: {
-            styles   : null,   // mootools css styles
-            width    : 200,    // menü width
-            title    : false,  // title of the menu (optional) : String
-            shadow   : true,   // menü with shadow (true) or not (false)
-            corner   : false,  // corner for the menü
-            maxHeight: false, // max height of the menu
-            dragable : false,
-            showIcons: true
+            styles         : null,   // mootools css styles
+            stylesContainer: null,   // mootools css styles, for the menu container
+            width          : 200,    // menü width
+            title          : false,  // title of the menu (optional) : String
+            shadow         : true,   // menü with shadow (true) or not (false)
+            corner         : false,  // corner for the menü
+            maxHeight      : false, // max height of the menu
+            dragable       : false,
+            showIcons      : true
         },
 
         initialize: function (options) {
@@ -111,6 +107,10 @@ define('qui/controls/contextmenu/Menu', [
                 this.$Elm.setStyles(this.getAttribute('styles'));
             }
 
+            if (this.getAttribute('stylesContainer')) {
+                this.$Container.setStyles(this.getAttribute('stylesContainer'));
+            }
+
             if (this.getAttribute('title')) {
                 this.setTitle(this.getAttribute('title'));
             }