Merge remote-tracking branch 'origin/PR2' into PR2

Author: Ihor Melnychenko

app/code/Magento/Ui/view/base/web/js/form/components/button.js

@@ -1,5 +1,5 @@
 /**
- * Copyright � 2015 Magento. All rights reserved.
+ * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
 
@@ -13,7 +13,11 @@ define([
 
     return Element.extend({
         defaults: {
-            template: 'ui/form/components/button'
+            additionalClasses: {},
+            displayArea: 'outsideGroup',
+            displayAsLink: false,
+            elementTmpl: 'ui/form/element/button',
+            template: 'ui/form/components/button/simple'
         },
 
         /**
@@ -22,7 +26,8 @@ define([
          * @returns {Object} Chainable.
          */
         initialize: function () {
-            return this._super();
+            return this._super()
+                ._setClasses();
         },
 
         /**
@@ -72,6 +77,27 @@ define([
                 nodeTemplate: targetName
             });
             layout([child]);
+        },
+
+        /**
+         * Extends 'additionalClasses' object.
+         *
+         * @returns {Object} Chainable.
+         */
+        _setClasses: function () {
+            if (typeof this.additionalClasses === 'string') {
+                this.additionalClasses = this.additionalClasses
+                    .trim()
+                    .split(' ')
+                    .reduce(function (classes, name) {
+                        classes[name] = true;
+
+                        return classes;
+                    }, {}
+                );
+            }
+
+            return this;
         }
     });
 });

app/code/Magento/Ui/view/base/web/js/modal/modal-component.js

@@ -17,12 +17,14 @@ define([
             template: 'ui/modal/modal-component',
             options: {
                 title: '',
-                buttons: []
+                buttons: [],
+                keyEventHandlers: {}
             },
             valid: true,
             listens: {
                 state: 'onState'
-            }
+            },
+            modalClass: 'modal-component'
         },
 
         /**
@@ -51,9 +53,32 @@ define([
          * @returns {Object} Chainable.
          */
         initConfig: function () {
-            this._super();
-            this.modalClass = this.name.replace(/\./g, '_');
-            this.rootSelector = '.' + this.modalClass;
+            return this._super()
+                .initSelector()
+                .initModalEvents();
+        },
+
+        /**
+         * Configure modal selector
+         *
+         * @returns {Object} Chainable.
+         */
+        initSelector: function () {
+            this.contentSelector = '.' + this.modalClass;
+            this.options.modalClass = this.name.replace(/\./g, '_');
+            this.rootSelector = '.' + this.options.modalClass;
+
+            return this;
+        },
+
+        /**
+         * Configure modal keyboard handlers
+         * and outer click
+         *
+         * @returns {Object} Chainable.
+         */
+        initModalEvents: function () {
+            this.options.keyEventHandlers.escapeKey = this.options.outerClickHandler = this.actionCancel.bind(this);
 
             return this;
         },
@@ -62,7 +87,7 @@ define([
          * Initialize modal's content components
          */
         initializeContent: function () {
-            $.async(this.rootSelector, this, this.initModal);
+            $.async(this.contentSelector, this, this.initModal);
         },
 
         /**
@@ -202,6 +227,7 @@ define([
          */
         setPrevValues: function (elem) {
             if (typeof elem.value === 'function') {
+                this.modal.focus();
                 elem.value(this.applied[elem.index]);
             } else if (elem.elems) {
                 elem.elems().forEach(this.setPrevValues, this);
@@ -236,25 +262,31 @@ define([
 
             if (buttons && buttons.length) {
                 buttons.forEach(function (button) {
-                    button.click = this.getButtonClickHandler(button.click);
+                    button.click = this.getButtonClickHandler(button.actions);
                 }, this);
             }
         },
 
         /**
-         * Override modal buttons callback placeholders with real callbacks
+         * Generate button click handler based on button's 'actions' configuration
          */
-        getButtonClickHandler: function (clickConfig) {
-            if (_.isObject(clickConfig)) {
-                return clickConfig.closeAfter ?
-                    function () {
-                        this.triggerAction(clickConfig);
-                        this.closeModal();
-                    }.bind(this) :
-                    this.triggerAction.bind(this, clickConfig);
-            }
+        getButtonClickHandler: function (actionsConfig) {
+            var actions = actionsConfig.map(
+                function (actionConfig) {
+                    if (_.isObject(actionConfig)) {
+                        return this.triggerAction.bind(this, actionConfig);
+                    }
+
+                    return this[actionConfig] ? this[actionConfig].bind(this) : function () {};
+                }, this);
 
-            return this[clickConfig] ? this[clickConfig].bind(this) : function () {};
+            return function () {
+                actions.forEach(
+                    function (action) {
+                        action();
+                    }
+                );
+            };
         },
 
         /**

app/code/Magento/Ui/view/base/web/js/modal/modal.js

@@ -118,6 +118,7 @@ define([
                 'closeModal'
             );
 
+            _.extend(this.keyEventHandlers, this.options.keyEventHandlers);
             this.options.transitionEvent = transitionEvent;
             this._createWrapper();
             this._renderModal();
@@ -374,7 +375,8 @@ define([
          * Creates overlay, append it to wrapper, set previous click event on overlay.
          */
         _createOverlay: function () {
-            var events;
+            var events,
+                outerClickHandler = this.options.outerClickHandler || this.closeModal;
 
             this.overlay = $('.' + this.options.overlayClass);
 
@@ -386,7 +388,7 @@ define([
             }
             events = $._data(this.overlay.get(0), 'events');
             events ? this.prevOverlayHandler = events.click[0].handler : false;
-            this.options.clickableOverlay ? this.overlay.unbind().on('click', this.closeModal) : false;
+            this.options.clickableOverlay ? this.overlay.unbind().on('click', outerClickHandler) : false;
         },
 
         /**

app/code/Magento/Ui/view/base/web/templates/form/components/button.html

@@ -0,0 +1,7 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<render args="elementTmpl"/>

app/code/Magento/Ui/view/base/web/templates/form/components/button/simple.html

@@ -0,0 +1,14 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<button type="button"
+        css="
+            'action-advanced': $data.displayAsLink,
+            'action-secondary': !$data.displayAsLink
+        "
+        click="action"
+        text="title">
+</button>

app/code/Magento/Ui/view/base/web/templates/form/element/button.html

@@ -1,6 +1,6 @@
 <!--
 /**
- * Copyright � 2015 Magento. All rights reserved.
+ * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
 -->