MAGETWO-39178: Create "getStyles" data-binding

- Localize usage of additinalClasses property
magento · Jun 26, 2015 · 3696279 · 3696279
1 parent 076732e
commit 3696279
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/app/code/Magento/Checkout/Block/Checkout/AttributeMerger.php b/app/code/Magento/Checkout/Block/Checkout/AttributeMerger.php
@@ -208,7 +208,9 @@ protected function getStreetFieldConfig($attributeCode, array $attributeConfig,
                 'dataScope' => $lineIndex,
                 'provider' => $providerName,
                 'validation' => $isFirstLine ? ['required-entry' => true] : [],
-                'additionalClasses' => $isFirstLine ? : 'additional'
+                'additionalClasses' => [
+                    'additional' => $isFirstLine
+                ]
             ];
         }
         return [
@@ -221,7 +223,9 @@ protected function getStreetFieldConfig($attributeCode, array $attributeConfig,
             'type' => 'group',
             'config' => [
                 'template' => 'ui/group/group',
-                'additionalClasses' => 'street'
+                'additionalClasses' => [
+                    'street' => true
+                ]
             ],
             'children' => $streetLines,
         ];

diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/group.js b/app/code/Magento/Ui/view/base/web/js/form/components/group.js
@@ -16,15 +16,19 @@ define([
             template: 'ui/group/group',
             fieldTemplate: 'ui/form/field',
             breakLine: true,
-            validateWholeGroup: false
+            validateWholeGroup: false,
+            additionalClasses: {}
         },
 
         /**
          * Extends this with defaults and config.
          * Then calls initObservable, iniListenes and extractData methods.
          */
         initialize: function () {
-            return this._super();
+            this._super()
+                ._setClasses();
+
+            return this;
         },
 
         /**
@@ -40,6 +44,21 @@ define([
             return this;
         },
 
+        /**
+         * Extends 'additionalClasses' object.
+         *
+         * @returns {Group} Chainable.
+         */
+        _setClasses: function () {
+            _.extend(this.additionalClasses, {
+                required:   this.required,
+                _error:     this.error,
+                _disabled:  this.disabled
+            });
+
+            return this;
+        },
+
         /**
          * Defines if group has only one element.
          * @return {Boolean}

diff --git a/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js b/app/code/Magento/Ui/view/base/web/js/form/element/abstract.js
@@ -26,6 +26,7 @@ define([
             error: '',
             notice: '',
             customScope: '',
+            additionalClasses: {},
 
             listens: {
                 value: 'onUpdate',
@@ -47,6 +48,8 @@ define([
             _.bindAll(this, 'reset');
 
             this._super();
+                ._setClasses();
+
             this.initialValue = this.getInitialValue();
 
             this.value(this.initialValue);
@@ -91,6 +94,21 @@ define([
             return this;
         },
 
+        /**
+         * Extends 'additionalClasses' object.
+         *
+         * @returns {Abstract} Chainable.
+         */
+        _setClasses: function () {
+            _.extend(this.additionalClasses, {
+                required:   this.required,
+                _error:     this.error,
+                _disabled:  this.disabled
+            });
+
+            return this;
+        },
+
         /**
          * Gets initial value of element
          *

diff --git a/app/code/Magento/Ui/view/frontend/web/templates/form/field.html b/app/code/Magento/Ui/view/frontend/web/templates/form/field.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: getStyles()">
+<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">
 
     <label class="label" data-bind="attr: { for: element.uid }">
         <!-- ko if: element.label -->

diff --git a/app/code/Magento/Ui/view/frontend/web/templates/group/group.html b/app/code/Magento/Ui/view/frontend/web/templates/group/group.html
@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="field" data-bind="css: element.additionalClass, css: getStyles()">
+<div class="field" data-bind="css: additionalClasses">
     <label class="label">
         <span data-bind="text: element.label"></span>
     </label>