diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js index 771d854aae..3e15fb7541 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.controller.js @@ -1,4 +1,6 @@ -function MultipleTextBoxController($scope) { +function MultipleTextBoxController($scope, $timeout) { + + var backspaceHits = 0; $scope.sortableOptions = { axis: 'y', @@ -11,7 +13,7 @@ if (!$scope.model.value) { $scope.model.value = []; } - + //add any fields that there isn't values for if ($scope.model.config.min > 0) { for (var i = 0; i < $scope.model.config.min; i++) { @@ -21,13 +23,72 @@ } } + $scope.addRemoveOnKeyDown = function (event, index) { + + var txtBoxValue = $scope.model.value[index]; + + event.preventDefault(); + + switch (event.keyCode) { + case 13: + 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: + + 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; + + var prevItemIndex = index - 1; + + //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: "" }); + // focus new value + var newItemIndex = $scope.model.value.length - 1; + $scope.model.value[newItemIndex].hasFocus = true; } }; - $scope.remove = function(index) { + $scope.remove = function (index) { var remainder = []; for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { @@ -39,4 +100,4 @@ } -angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController); +angular.module("umbraco").controller("Umbraco.PropertyEditors.MultipleTextBoxController", MultipleTextBoxController); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html index 7aba2d9432..7a6b4f4a29 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html @@ -1,20 +1,21 @@
-
-
- - - - - -
+
+
+ + + + +
- - - +
+ + +