feat: #266 - Product Category Select Control is resizable now

bin/controls/categories/Select.css

@@ -28,6 +28,17 @@
     z-index: 2;
 }
 
+.qui-products-categories-list-resize {
+    border-top: 1px solid #dedede;
+    background: rgba(147, 128, 108, 0.1);
+    clear: both;
+    cursor: pointer;
+    display: inline-block;
+    height: 20px;
+    text-align: center;
+    width: 100%;
+}
+
 .qui-products-categories-list-search {
     clear: both;
     float: left;
@@ -35,6 +46,11 @@
     width: calc(100% - 50px);
 }
 
+.qui-products-categories-list-search:focus {
+    position: relative;
+    z-index: 10;
+}
+
 .field-container-field > .qui-products-categories-list {
     max-width: none;
     padding: 0;
@@ -64,6 +80,11 @@
     position: absolute;
     text-align: center;
     width: 30px;
+    z-index: 11;
+}
+
+.qui-products-categories--resizable .qui-products-categories-list-searchIcon {
+    bottom: 22px;
 }
 
 /** DropDown

bin/controls/categories/Select.js

@@ -8,9 +8,6 @@
  * @event onChange [ this ]
  * @event onRemoveCategory [ this, categoryId ]
  * @event onClear [ this ]
- *
- * @todo locale
- * @todo #locale
  */
 define('package/quiqqer/products/bin/controls/categories/Select', [
 
@@ -53,15 +50,17 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
             '$showCreateCategoryDialog',
             '$onCategoryDestroy',
             '$onInputFocus',
-            '$onImport'
+            '$onImport',
+            'resize'
         ],
 
         options: {
-            max     : false, // max entries
-            multiple: true,  // select more than one entry?
-            name    : '',    // string
-            styles  : false, // object
-            label   : false  // text string or a <label> DOMNode Element
+            max      : false, // max entries
+            multiple : true,  // select more than one entry?
+            name     : '',    // string
+            styles   : false, // object
+            label    : false, // text string or a <label> DOMNode Element
+            resizable: true   // resize is allowed
         },
 
         initialize: function (options, Input) {
@@ -207,7 +206,7 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
                     display: 'none',
                     width  : 50
                 },
-                alt   : 'Kategorie erstellen',
+                alt   : QUILocale.get(lg, 'control.select.category.create'),
                 events: {
                     onClick: this.$showCreateCategoryDialog
                 }
@@ -245,6 +244,18 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
                 }
             }
 
+            if (this.getAttribute('resizable')) {
+                this.$Elm.addClass('qui-products-categories--resizable');
+
+                new Element('div', {
+                    'class': 'qui-products-categories-list-resize',
+                    html   : '<span class="fa fa-arrows-v"></span>',
+                    events : {
+                        click: this.resize
+                    }
+                }).inject(this.$Elm);
+            }
+
             if (parseInt(this.getAttribute('max')) === 1) {
                 this.$Search.setStyle('display', 'none');
 
@@ -279,6 +290,35 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
             this.create();
         },
 
+        /**
+         * Resize the control
+         */
+        resize: function () {
+            if (this.getAttribute('resizable') === false) {
+                return;
+            }
+
+            var self  = this,
+                items = this.$List.getElements('.quiqqer-category-selectItem');
+
+            var height = items.map(function (elm) {
+                return elm.getSize().y + 1;
+            }).sum();
+
+            if (height < 100) {
+                height = 100;
+            }
+
+            return new Promise(function (resolve) {
+                moofx(self.$List).animate({
+                    height: height
+                }, {
+                    duration: 200,
+                    callback: resolve
+                });
+            });
+        },
+
         /**
          * Return the current value, list of categories
          *
@@ -672,6 +712,10 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
             this.fireEvent('delete', [this, Item]);
             this.$refreshValues();
 
+            (function () {
+                this.resize();
+            }.bind(this)).delay(200);
+
             if (!this.$values.length && this.getAttribute('Site')) {
                 this.$showCreateButton();
             }
@@ -743,7 +787,7 @@ define('package/quiqqer/products/bin/controls/categories/Select', [
                 new Window({
                     autoclose: true,
                     multiple : false,
-                    message  : 'Bitte wählen Sie die Übergeordnete Kategorie aus:',
+                    message  : QUILocale.get(lg, 'control.select.window.select.parent'),
                     events   : {
                         onSubmit: function (Win, categorieIds) {
                             self.$CreateButton.setAttribute('icon', 'fa fa-spinner fa-spin');

locale.xml

@@ -43,8 +43,10 @@
             <en><![CDATA[Manufacturer list]]></en>
         </locale>
         <locale name="admin.types.manufacturerList.desc">
-            <de><![CDATA[Listet alle Hersteller von Produkten mit der Möglichkeit, die Produkte einzelner Hersteller zu listen.]]></de>
-            <en><![CDATA[Lists all manufacturers of products with the possibility to list the products of individual manufacturers.]]></en>
+            <de>
+                <![CDATA[Listet alle Hersteller von Produkten mit der Möglichkeit, die Produkte einzelner Hersteller zu listen.]]></de>
+            <en>
+                <![CDATA[Lists all manufacturers of products with the possibility to list the products of individual manufacturers.]]></en>
         </locale>
         <locale name="quiqqer.products.settings.productIds">
             <de><![CDATA[Produkte]]></de>
@@ -1101,6 +1103,18 @@
             <de><![CDATA[Suchbegriff eingeben...]]></de>
             <en><![CDATA[Enter a search term...]]></en>
         </locale>
+        <locale name="control.select.category.create">
+            <de><![CDATA[Kategorie erstellen]]></de>
+            <en><![CDATA[Create category]]></en>
+        </locale>
+        <locale name="control.select.no.results">
+            <de><![CDATA[Keine Ergebnisse gefunden.]]></de>
+            <en><![CDATA[No results found.]]></en>
+        </locale>
+        <locale name="control.select.window.select.parent">
+            <de><![CDATA[Bitte wählen Sie die übergeordnete Kategorie aus:]]></de>
+            <en><![CDATA[Please select the parent category:]]></en>
+        </locale>
 
         <!-- Desktop Search -->
         <locale name="search.group.products.label">
@@ -1176,7 +1190,7 @@
             <de><![CDATA[aufsteigend]]></de>
             <en><![CDATA[ascending]]></en>
         </locale>
-        
+
         <locale name="types.manufacturerList.header" html="true">
             <de><![CDATA[Alle Produkte des Herstellers "[manufacturer]"]]></de>
             <en><![CDATA[All products of manufacturer "[manufacturer]"]]></en>
@@ -1185,7 +1199,7 @@
             <de><![CDATA[zurück zur Hersteller-Übersicht]]></de>
             <en><![CDATA[back to manufacturer overview]]></en>
         </locale>
-        
+
     </groups>
 
     <groups name="quiqqer/products" datatype="js">