Created an innerState variable in the isolated scope of "umb-button" directive in order to ensure not to create a "state" property in the directive isolated scope.
This commit is contained in:
Seb
@@ -67,97 +67,97 @@ 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) {
|
||||
function ButtonDirective($timeout) {
|
||||
|
||||
function link(scope, el, attr, ctrl) {
|
||||
function link(scope, el, attr, ctrl) {
|
||||
|
||||
scope.style = null;
|
||||
scope.style = null;
|
||||
scope.innerState = "init";
|
||||
|
||||
function activate() {
|
||||
function activate() {
|
||||
|
||||
scope.blockElement = false;
|
||||
scope.blockElement = false;
|
||||
|
||||
if (!scope.state) {
|
||||
scope.state = "init";
|
||||
}
|
||||
if (scope.buttonStyle) {
|
||||
|
||||
if (scope.buttonStyle) {
|
||||
// make it possible to pass in multiple styles
|
||||
if (scope.buttonStyle.startsWith("[") && scope.buttonStyle.endsWith("]")) {
|
||||
|
||||
// make it possible to pass in multiple styles
|
||||
if(scope.buttonStyle.startsWith("[") && scope.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,'');
|
||||
// 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;
|
||||
if(item === "block") {
|
||||
// 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, '');
|
||||
// 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;
|
||||
if (item === "block") {
|
||||
scope.blockElement = true;
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
scope.style = "btn-" + scope.buttonStyle;
|
||||
if (scope.buttonStyle === "block") {
|
||||
scope.blockElement = true;
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
scope.style = "btn-" + scope.buttonStyle;
|
||||
if(scope.buttonStyle === "block") {
|
||||
scope.blockElement = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
activate();
|
||||
|
||||
activate();
|
||||
var unbindStateWatcher = scope.$watch('state', function (newValue, oldValue) {
|
||||
if (newValue) {
|
||||
scope.innerState = newValue;
|
||||
}
|
||||
|
||||
var unbindStateWatcher = scope.$watch('state', function(newValue, oldValue) {
|
||||
if (newValue === 'success' || newValue === 'error') {
|
||||
$timeout(function () {
|
||||
scope.innerState = 'init';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (newValue === 'success' || newValue === 'error') {
|
||||
$timeout(function() {
|
||||
scope.state = 'init';
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
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);
|
||||
angular.module('umbraco.directives').directive('umbButton', ButtonDirective);
|
||||
|
||||
})();
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<div class="umb-button" ng-class="{'umb-button--block': blockElement}" data-element="{{ alias ? 'button-' + alias : '' }}">
|
||||
|
||||
<div class="icon-check umb-button__success" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>
|
||||
<div class="icon-check umb-button__success" ng-class="{'-hidden': innerState !== 'success', '-white': style}"></div>
|
||||
|
||||
<div class="icon-delete umb-button__error" ng-class="{'-hidden': state !== 'error', '-white': style}"></div>
|
||||
<div class="icon-delete umb-button__error" ng-class="{'-hidden': innerState !== 'error', '-white': style}"></div>
|
||||
|
||||
<div class="umb-button__progress" ng-class="{'-hidden': state !== 'busy', '-white': style}"></div>
|
||||
<div class="umb-button__progress" ng-class="{'-hidden': innerState !== 'busy', '-white': style}"></div>
|
||||
|
||||
<div ng-if="state !== 'init'" class="umb-button__overlay"></div>
|
||||
<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="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<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>
|
||||
@@ -17,7 +17,7 @@
|
||||
</a>
|
||||
|
||||
<button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
|
||||
<span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
|
||||
<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>
|
||||
@@ -25,7 +25,7 @@
|
||||
</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': state !== 'init'}">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user