From 27891e304d07b3e0f97ac93fd3503e618a9b4a73 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 13 Jun 2018 10:16:25 +0200
Subject: [PATCH] fix icon contet flashes + update to new component syntax

---
 .../components/buttons/umbbutton.directive.js | 134 +++++++++---------
 .../views/components/buttons/umb-button.html  |  57 ++++----
 2 files changed, 97 insertions(+), 94 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index 642ba3b529..047d67ffef 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -67,103 +67,107 @@ Use this directive to render an umbraco button. The directive can be used to gen
 @param {boolean=} disabled Set to <code>true</code> to disable the button.
 **/
 
-(function() {
-   'use strict';
+(function () {
+    'use strict';
 
-   function ButtonDirective($timeout) {
+    angular
+        .module('umbraco.directives')
+        .component('umbButton', {
+            transclude: true,
+            templateUrl: 'views/components/buttons/umb-button.html',
+            controller: UmbButtonController,
+            controllerAs: 'vm',
+            bindings: {
+                action: "&?",
+                href: "@?",
+                type: "@",
+                buttonStyle: "@?",
+                state: "<?",
+                shortcut: "@?",
+                shortcutWhenHidden: "@",
+                label: "@?",
+                labelKey: "@?",
+                icon: "@?",
+                disabled: "<?",
+                size: "@?",
+                alias: "@?"
+            }
+        });
 
-      function link(scope, el, attr, ctrl) {
+    UmbButtonController.$inject = ['$timeout'];
 
-         scope.style = null;
-         scope.innerState = "init";
+    function UmbButtonController($timeout) {
 
-         function activate() {
+        var vm = this;
 
-             scope.blockElement = false;
+        vm.$onInit = onInit;
+        vm.$onChanges = onChanges;
+        vm.clickButton = clickButton;
 
-            if (scope.buttonStyle) {
+        function onInit() {
+
+            vm.blockElement = false;
+            vm.style = null;
+            vm.innerState = "init";
+
+            if (vm.buttonStyle) {
 
                 // make it possible to pass in multiple styles
-                if(scope.buttonStyle.startsWith("[") && scope.buttonStyle.endsWith("]")) {
+                if(vm.buttonStyle.startsWith("[") && vm.buttonStyle.endsWith("]")) {
                     
                     // when using an attr it will always be a string so we need to remove square brackets
                     // and turn it into and array
-                    var withoutBrackets = scope.buttonStyle.replace(/[\[\]']+/g,'');
+                    var withoutBrackets = vm.buttonStyle.replace(/[\[\]']+/g,'');
                     // split array by , + make sure to catch whitespaces
                     var array = withoutBrackets.split(/\s?,\s?/g);
                     
                     angular.forEach(array, function(item){
-                        scope.style = scope.style + " " + "btn-" + item;
+                        vm.style = vm.style + " " + "btn-" + item;
                         if(item === "block") {
-                            scope.blockElement = true;
+                            vm.blockElement = true;
                         }
                     });
 
                 } else {
-                    scope.style = "btn-" + scope.buttonStyle;
-                    if(scope.buttonStyle === "block") {
-                        scope.blockElement = true;
+                    vm.style = "btn-" + vm.buttonStyle;
+                    if(vm.buttonStyle === "block") {
+                        vm.blockElement = true;
                     }
                 }
 
             }
 
-         }
+        }
 
-         activate();
+        function onChanges(changes) {
 
-         var unbindStateWatcher = scope.$watch('state', function(newValue, oldValue) {
-            if (newValue) {
-               scope.innerState = newValue;
+            // watch for state changes
+            if (changes.state) {
+                if(changes.state.currentValue) {
+                    vm.innerState = changes.state.currentValue;
+                }
+                if (changes.state.currentValue === 'success' || changes.state.currentValue === 'error') {
+                    // set the state back to 'init' after a success or error 
+                    $timeout(function () {
+                        vm.innerState = 'init';
+                    }, 2000);
+                }
             }
 
-            if (newValue === 'success' || newValue === 'error') {
-               $timeout(function() {
-                  scope.innerState = 'init';
-               }, 2000);
+            // watch for disabled changes
+            if(changes.disabled) {
+                if(changes.disabled.currentValue) {
+                    vm.disabled = changes.disabled.currentValue;
+                }
             }
+        }
 
-         });
-
-         scope.clickButton = function(event) {
-            if(scope.action) {
-                scope.action({$event: event});
+        function clickButton(event) {
+            if(vm.action) {
+                vm.action({$event: event});
             }
-         };
+        }
 
-         scope.$on('$destroy', function() {
-            unbindStateWatcher();
-         });
-
-      }
-
-      var directive = {
-         transclude: true,
-         restrict: 'E',
-         replace: true,
-         templateUrl: 'views/components/buttons/umb-button.html',
-         link: link,
-         scope: {
-            action: "&?",
-            href: "@?",
-            type: "@",
-            buttonStyle: "@?",
-            state: "=?",
-            shortcut: "@?",
-            shortcutWhenHidden: "@",
-            label: "@?",
-            labelKey: "@?",
-            icon: "@?",
-            disabled: "=",
-            size: "@?",
-            alias: "@?"
-         }
-      };
-
-      return directive;
-
-   }
-
-   angular.module('umbraco.directives').directive('umbButton', ButtonDirective);
+    }
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index 383c3bb067..a214a5a58f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -1,35 +1,34 @@
-<div class="umb-button" ng-class="{'umb-button--block': blockElement}" data-element="{{ alias ? 'button-' + alias : '' }}">
+<div class="umb-button" ng-class="{'umb-button--block': vm.blockElement}" data-element="{{ vm.alias ? 'button-' + vm.alias : '' }}">
 
-   <div class="icon-check umb-button__success" ng-class="{'-hidden': innerState !== 'success', '-white': style}"></div>
+    <div ng-if="vm.innerState">
+        <div class="icon-check umb-button__success" ng-class="{'-hidden': vm.innerState !== 'success', '-white': vm.style}"></div>
+        <div class="icon-delete umb-button__error" ng-class="{'-hidden': vm.innerState !== 'error', '-white': vm.style}"></div>
+        <div class="umb-button__progress" ng-class="{'-hidden': vm.innerState !== 'busy', '-white': vm.style}"></div>
+        <div ng-if="vm.innerState !== 'init'" class="umb-button__overlay"></div>
+    </div>
 
-   <div class="icon-delete umb-button__error" ng-class="{'-hidden': innerState !== 'error', '-white': style}"></div>
+    <a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
+        <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <localize ng-if="vm.labelKey" key="{{vm.labelKey}}">{{vm.label}}</localize>
+            <span ng-if="!vm.labelKey">{{vm.label}}</span>
+        </span>
+    </a>
 
-   <div class="umb-button__progress" ng-class="{'-hidden': innerState !== 'busy', '-white': style}"></div>
+    <button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled">
+        <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <localize ng-if="vm.labelKey" key="{{vm.labelKey}}">{{vm.label}}</localize>
+            <span ng-if="!vm.labelKey">{{vm.label}}</span>
+        </span>
+    </button>
 
-   <div ng-if="innerState !== 'init'" class="umb-button__overlay"></div>
-
-   <a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
-      <span class="umb-button__content" ng-class="{'-hidden': innerState !== 'init'}">
-         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
-         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
-         <span ng-if="!labelKey">{{label}}</span>
-      </span>
-   </a>
-
-   <button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="clickButton($event)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
-      <span class="umb-button__content" ng-class="{'-hidden': innerState !== 'init'}">
-         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
-         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
-         <span ng-if="!labelKey">{{label}}</span>
-      </span>
-   </button>
-
-   <button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}} umb-button--{{size}}" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
-      <span class="umb-button__content" ng-class="{'-hidden': innerState !== 'init'}">
-         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
-         <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
-         <span ng-if="!labelKey">{{label}}</span>
-      </span>
-   </button>
+    <button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled">
+        <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <localize ng-if="vm.labelKey" key="{{vm.labelKey}}">{{vm.label}}</localize>
+            <span ng-if="!vm.labelKey">{{vm.label}}</span>
+        </span>
+    </button>
 
 </div>