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

small UX refinements

Browse Source
This commit is contained in:
Mads Rasmussen
2017-08-18 11:24:51 +02:00
parent 5e6b5a5cc1
commit 168dc0e5da
1 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js
View File

@@ -1,5 +1,7 @@
function MultipleTextBoxController($scope, $timeout) {
var backspaceHits = 0;
$scope.sortableOptions = {
axis: 'y',
containment: 'parent',
@@ -21,60 +23,68 @@
}
}
//TODO add focus to newly created text box or the first in line after deletion
$scope.addRemoveOnKeyDown = function (event, index) {
$scope.addRemoveOnKeyDown = function (event, index) {
var txtBoxValue = $scope.model.value[index];
var newItemIndex;
event.preventDefault();
switch (event.keyCode) {
case 13:
if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
$scope.model.value.push({ value: "" });
newItemIndex = $scope.model.value.length - 1;
if ($scope.model.config.max <= 0 && txtBoxValue.value || $scope.model.value.length < $scope.model.config.max && txtBoxValue.value) {
var newItemIndex = index + 1;
$scope.model.value.splice(newItemIndex, 0, { value: "" });
//Focus on the newly added value
$scope.model.value[newItemIndex].hasFocus = true;
}
break;
case 8:
var remainder = [];
if ($scope.model.value.length > 1 && $scope.model.value.length >= $scope.model.config.max) {
if (txtBoxValue.value === "") {
if ($scope.model.value.length > $scope.model.config.min) {
var remainder = [];
// Used to require an extra hit on backspace for the field to be removed
if(txtBoxValue.value === "") {
backspaceHits++;
} else {
backspaceHits = 0;
}
if (txtBoxValue.value === "" && backspaceHits === 2) {
for (var x = 0; x < $scope.model.value.length; x++) {
if (x !== index) {
remainder.push($scope.model.value[x]);
}
}
}
$scope.model.value = remainder;
newItemIndex = $scope.model.value.length - 1;
//Set focus back on false as the directive only watches for true
$scope.model.value[newItemIndex].hasFocus = false;
var prevItemIndex = index - 1;
$timeout(function () {
//Focus on the previous value
$scope.model.value[newItemIndex].hasFocus = true;
});
//Set focus back on false as the directive only watches for true
if(prevItemIndex >= 0) {
$scope.model.value[prevItemIndex].hasFocus = false;
$timeout(function () {
//Focus on the previous value
$scope.model.value[prevItemIndex].hasFocus = true;
});
}
backspaceHits = 0;
}
}
break;
default:
}
}
$scope.add = function () {
if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
$scope.model.value.push({ value: "" });
$scope.focusMe = false;
// focus new value
var newItemIndex = $scope.model.value.length - 1;
$scope.model.value[newItemIndex].hasFocus = true;
}
};
@@ -86,7 +96,6 @@
}
}
$scope.model.value = remainder;
$scope.focusMe = true;
};
}