yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

umb-locked-field: lock field on blur

Browse Source
This commit is contained in:
Mads Rasmussen
2015-09-08 09:29:05 +02:00
parent 51a4b24200
commit 0b71136a1e
2 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
View File

@@ -13,35 +13,53 @@
function link(scope, el, attr, ngModel) {
// if locked state is not defined as an attr set default state
if (scope.locked === undefined || scope.locked === null) {
scope.locked = true;
}
var input = el.children('.umb-locked-field__input');
// if locked state is not defined as an attr set default state
if (scope.placeholderText === undefined || scope.placeholderText === null) {
scope.placeholderText = "Enter value...";
}
function activate() {
scope.toggleLock = function() {
scope.locked = !scope.locked;
if (scope.locked === false) {
autoFocusField();
// if locked state is not defined as an attr set default state
if (scope.locked === undefined || scope.locked === null) {
scope.locked = true;
}
// if locked state is not defined as an attr set default state
if (scope.placeholderText === undefined || scope.placeholderText === null) {
scope.placeholderText = "Enter value...";
}
}
scope.lock = function() {
scope.locked = true;
input.unbind("blur");
};
scope.unlock = function() {
scope.locked = false;
autoFocusField();
};
function autoFocusField() {
// timeout to make sure dom has updated from a disabled field
var onBlurHandler = function() {
scope.$apply(function(){
scope.lock();
});
};
$timeout(function() {
var input = el.children('.umb-locked-field__input');
input.focus();
input.on("blur", onBlurHandler);
});
}
activate();
scope.$on('$destroy', function() {
input.unbind('blur');
});
}
var directive = {

8
src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
View File

@@ -1,7 +1,11 @@
<div class="umb-locked-field">
<a href="" ng-click="toggleLock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked, '-unlocked': !locked}"></i>
<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-lock"></i>
</a>
<a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
</a>
<input