Merge pull request #109 from sunpietro/add-button-disabled-state

EZP-23347 - As a developer I would like to handle disabled/enabled state of a button
ezsystems · Sep 16, 2014 · 7d5252e · 7d5252e
2 parents c0b88d2 + 23ad00c
commit 7d5252e
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 17 deletions.
diff --git a/Resources/public/css/theme/views/actions/button.css b/Resources/public/css/theme/views/actions/button.css
@@ -20,9 +20,9 @@
     font-size: 60%;
 }
 
-.ez-view-buttonactionview .is-disabled .action-icon,
-.ez-view-buttonactionview .is-disabled .action-label,
-.ez-view-buttonactionview .is-disabled .action-hint {
+.ez-view-buttonactionview [disabled] .action-icon,
+.ez-view-buttonactionview [disabled] .action-label,
+.ez-view-buttonactionview [disabled] .action-hint {
     color: #808080;
 }
 

diff --git a/Resources/public/css/theme/views/buttonaction.css b/Resources/public/css/theme/views/buttonaction.css
@@ -20,9 +20,9 @@
     font-size: 60%;
 }
 
-.ez-view-buttonactionview .is-disabled .action-icon,
-.ez-view-buttonactionview .is-disabled .action-label,
-.ez-view-buttonactionview .is-disabled .action-hint {
+.ez-view-buttonactionview [disabled] .action-icon,
+.ez-view-buttonactionview [disabled] .action-label,
+.ez-view-buttonactionview [disabled] .action-hint {
     color: #808080;
 }
 

diff --git a/Resources/public/css/views/bar.css b/Resources/public/css/views/bar.css
@@ -32,7 +32,7 @@
     z-index: 1015;
 }
 
-.ez-view-barview .ez-actions-list .ez-action.is-disabled {
+.ez-view-barview .ez-actions-list .ez-action[disabled] {
     cursor: default;
 }
 

diff --git a/Resources/public/js/views/actions/ez-buttonactionview.js b/Resources/public/js/views/actions/ez-buttonactionview.js
@@ -29,6 +29,10 @@ YUI.add('ez-buttonactionview', function (Y) {
             }
         },
 
+        initializer: function () {
+            this.on('disabledChange', this._handleToggleButtonState);
+        },
+
         /**
          * Renders the action
          *
@@ -82,8 +86,21 @@ YUI.add('ez-buttonactionview', function (Y) {
             this.fire(this.get('actionId') + ACTION_SUFFIX, {
                 content: this.get('content')
             });
-        }
+        },
+
+        /**
+         * Handles *:disabledChange event
+         *
+         * @method _handleToggleButtonState
+         * @param event {Object} event facade
+         * @protected
+         */
+        _handleToggleButtonState: function (event) {
+            var buttons = this.get('container').all('.action-trigger'),
+                buttonMethod = event.newVal ? 'setAttribute' : 'removeAttribute';
 
+            buttons[buttonMethod]('disabled', event.newVal);
+        }
     }, {
         ATTRS: {
             /**

diff --git a/Resources/views/PlatformUI/handlebars/buttonactionview.handlebars.twig b/Resources/views/PlatformUI/handlebars/buttonactionview.handlebars.twig
@@ -1,5 +1,5 @@
 {% verbatim %}
-<button class="ez-action {{#if disabled}}is-disabled {{else}}{{#if actionId}}action-trigger {{/if}}{{/if}}{{#if hint}}with-hint{{/if}}" data-action="{{ actionId }}">
+<button class="ez-action {{#if actionId}}action-trigger{{/if}}{{#if hint}} with-hint{{/if}}" data-action="{{ actionId }}" {{#if disabled}}disabled{{/if}}>
     <div class="font-icon action-icon">
         <p class="action-label">{{ label }}</p>
         {{#if hint}}

diff --git a/Tests/js/views/actions/assets/genericbuttonactionview-tests.js b/Tests/js/views/actions/assets/genericbuttonactionview-tests.js
@@ -90,6 +90,24 @@ YUI.add('ez-genericbuttonactionview-tests', function (Y) {
                 });
             });
             this.wait();
+        },
+
+        'Should disable the button': function () {
+            var view = this.view;
+
+            view.render();
+            view.set('disabled', true);
+
+            Y.Assert.isTrue(view.get('container').one('.action-trigger').hasAttribute('disabled'), 'The button should be disabled');
+        },
+
+        'Should enable the button': function () {
+            var view = this.view;
+
+            view.render();
+            view.set('disabled', true);
+            view.set('disabled', false);
+            Y.Assert.isFalse(view.get('container').one('.action-trigger').hasAttribute('disabled'), 'The button should be enabled');
         }
     };
 }, '', {requires: ['test', 'node-event-simulate']});
diff --git a/Tests/js/views/actions/ez-buttonactionview.html b/Tests/js/views/actions/ez-buttonactionview.html
@@ -1,21 +1,22 @@
 <!doctype html>
 <html>
 <head>
+<meta charset="utf-8">
 <title>eZ Button Action view tests</title>
 </head>
 <body>
 
 <div class="container"></div>
 
 <script type="text/x-handlebars-template" id="buttonactionview-ez-template">
-    <button class="action {{#if disabled}}is-disabled{{else}}{{#if actionId}}action-trigger{{/if}}{{/if}}" data-action="{{ actionId }}">
-        <div class="font-icon action-icon">
-            <p class="action-label {{#if hint}}with-hint{{/if}}">{{ label }}</p>
-            {{#if hint}}
-            <p class="action-hint">{{ hint }}</p>
-            {{/if}}
-        </div>
-    </button>
+<button class="ez-action {{#if actionId}}action-trigger{{/if}}{{#if hint}} with-hint{{/if}}" data-action="{{ actionId }}" {{#if disabled}}disabled{{/if}}>
+    <div class="font-icon action-icon">
+        <p class="action-label">{{ label }}</p>
+        {{#if hint}}
+        <p class="action-hint">{{ hint }}</p>
+        {{/if}}
+    </div>
+</button>
 </script>
 
 <script type="text/javascript" src="../../../../node_modules/yui/yui/yui.js"></script>