fix icon contet flashes + update to new component syntax
This commit is contained in:
Mads Rasmussen
@@ -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);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user