From 6db18d83bee859a45eb5b31e03edbca091e8e593 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 10:15:23 +0200 Subject: [PATCH 01/13] add/remove functionality on keyDown added --- .../multipletextbox.controller.js | 34 +++++++++++++++++-- .../multipletextbox/multipletextbox.html | 2 +- 2 files changed, 33 insertions(+), 3 deletions(-) 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..a5924e17d3 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 @@ -11,7 +11,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 +21,43 @@ } } + //TODO remove text box only when is empty + $scope.addRemoveOnKeyDown = function (event, index) { + console.log("Index: " + index); + console.log($scope.model.value); + console.log("KeyCode: " + event.keyCode); + var txtBoxValue = $scope.model.value[index]; + console.log(txtBoxValue.value); + switch (event.keyCode) { + case 13: + if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { + $scope.model.value.push({ value: "" }); + } + break; + case 8: + var remainder = []; + if ($scope.model.value.length > 1) { + if (txtBoxValue.value === "") { + for (var x = 0; x < $scope.model.value.length; x++) { + if (x !== index) { + remainder.push($scope.model.value[x]); + } + } + $scope.model.value = remainder; + } + } + 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.remove = function(index) { + $scope.remove = function (index) { var remainder = []; for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { 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..ea7db2b4d5 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 @@ -3,7 +3,7 @@
- + From 193eb259a6c2ac2833654cd67feb5e182dfd4088 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 12:54:59 +0200 Subject: [PATCH 02/13] Add/Remove functionality on key press added --- .../multipletextbox.controller.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) 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 a5924e17d3..cdfe903648 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 @@ -19,19 +19,21 @@ $scope.model.value.push({ value: "" }); } } - } + } - //TODO remove text box only when is empty + //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { - console.log("Index: " + index); - console.log($scope.model.value); - console.log("KeyCode: " + event.keyCode); var txtBoxValue = $scope.model.value[index]; - console.log(txtBoxValue.value); + + var e = angular.element(elem[0].querySelector('[name="item_0"]')); + + console.log(e); + switch (event.keyCode) { case 13: if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { - $scope.model.value.push({ value: "" }); + $scope.model.value.push({ value: "" }); + } break; case 8: @@ -49,7 +51,9 @@ break; default: } - } + } + + $scope.add = function () { if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { From cc57cd6eb7f427b6f18f00f692920922edd1035e Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 12:57:29 +0200 Subject: [PATCH 03/13] Changed to keyup --- .../multipletextbox/multipletextbox.controller.js | 4 ---- .../propertyeditors/multipletextbox/multipletextbox.html | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) 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 cdfe903648..5c476f08af 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 @@ -24,10 +24,6 @@ //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { var txtBoxValue = $scope.model.value[index]; - - var e = angular.element(elem[0].querySelector('[name="item_0"]')); - - console.log(e); switch (event.keyCode) { case 13: 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 ea7db2b4d5..e612e2abb5 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 @@ -3,7 +3,7 @@
- + From 3395445d7c74982d51bcd1627cfa7c6c35950a0e Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 13 Jul 2017 14:05:50 +0200 Subject: [PATCH 04/13] Newly added text box now get's focused. --- .../multipletextbox/multipletextbox.controller.js | 4 +++- .../propertyeditors/multipletextbox/multipletextbox.html | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) 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 5c476f08af..9621001d0c 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 @@ -29,7 +29,9 @@ case 13: if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { $scope.model.value.push({ value: "" }); - + + //Focus on the newly added value + $scope.focusMe = true; } break; case 8: 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 e612e2abb5..e8ead14bc2 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 @@ -3,7 +3,7 @@
- + From 4c9b2f552ac84cad595470ba6a360fba460545ac Mon Sep 17 00:00:00 2001 From: Robert Date: Fri, 14 Jul 2017 13:30:28 +0200 Subject: [PATCH 05/13] On textbox delete the next in line gets focused umbfocusbackwards.directive.js file added --- .../editor/umbfocusbackwards.directive.js | 42 +++++++++++++++++++ .../multipletextbox.controller.js | 36 +++++++++------- .../multipletextbox/multipletextbox.html | 31 +++++++------- 3 files changed, 80 insertions(+), 29 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js new file mode 100644 index 0000000000..c696c6cb28 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js @@ -0,0 +1,42 @@ +/** +@ngdoc directive +@name umbraco.directives: focusNow +@restrict A + +@description +Use this directive focus backwards in a list of elements. +You need to toggle the attribute's value everytime you delete an element to trigger the observe event. +$scope.focusMe = ($scope.focusMe === true)? false: true; + +

Example

+ + +**/ +angular.module("umbraco").directive("focusBackwards", function ($timeout) { + return { + restrict: "A", + link: function (scope, element, attrs) { + attrs.$observe("focusBackwards", function (value) { + if (value === "true") { + $timeout(function () { + element.focus(); + }); + } else { + $timeout(function () { + element.focus(); + }); + } + }); + } + }; +}); 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 9621001d0c..6582e975e2 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 @@ -19,43 +19,50 @@ $scope.model.value.push({ value: "" }); } } - } + } - //TODO add focus to newly created text box or the first in line after deletion + //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { var txtBoxValue = $scope.model.value[index]; - - switch (event.keyCode) { + + 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: "" }); - + $scope.model.value.push({ value: "" }); + //Focus on the newly added value - $scope.focusMe = true; - } - break; + $scope.focusMe = false; + } + break; case 8: + var remainder = []; - if ($scope.model.value.length > 1) { - if (txtBoxValue.value === "") { + if ($scope.model.value.length > 1) { + if (txtBoxValue.value === "") { for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { remainder.push($scope.model.value[x]); } } $scope.model.value = remainder; + + // The role of this statement is to trigger the observe event + $scope.focusMe = ($scope.focusMe === true) ? false : true; } } 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; } }; @@ -67,8 +74,9 @@ } } $scope.model.value = remainder; + $scope.focusMe = true; }; } -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 e8ead14bc2..483bdee838 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 @@
-
-
- - - - - -
+
+
+ + + + +
- - - +
+ + +
From 91646212fd2f6f519206fd84f4ebcae009296c65 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 10:15:23 +0200 Subject: [PATCH 06/13] add/remove functionality on keyDown added --- .../multipletextbox.controller.js | 34 +++++++++++++++++-- .../multipletextbox/multipletextbox.html | 2 +- 2 files changed, 33 insertions(+), 3 deletions(-) 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..a5924e17d3 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 @@ -11,7 +11,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 +21,43 @@ } } + //TODO remove text box only when is empty + $scope.addRemoveOnKeyDown = function (event, index) { + console.log("Index: " + index); + console.log($scope.model.value); + console.log("KeyCode: " + event.keyCode); + var txtBoxValue = $scope.model.value[index]; + console.log(txtBoxValue.value); + switch (event.keyCode) { + case 13: + if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { + $scope.model.value.push({ value: "" }); + } + break; + case 8: + var remainder = []; + if ($scope.model.value.length > 1) { + if (txtBoxValue.value === "") { + for (var x = 0; x < $scope.model.value.length; x++) { + if (x !== index) { + remainder.push($scope.model.value[x]); + } + } + $scope.model.value = remainder; + } + } + 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.remove = function(index) { + $scope.remove = function (index) { var remainder = []; for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { 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..ea7db2b4d5 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 @@ -3,7 +3,7 @@
- + From a8c036749288432f792b7653920f260fbd0604f7 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 12:54:59 +0200 Subject: [PATCH 07/13] Add/Remove functionality on key press added --- .../multipletextbox.controller.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) 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 a5924e17d3..cdfe903648 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 @@ -19,19 +19,21 @@ $scope.model.value.push({ value: "" }); } } - } + } - //TODO remove text box only when is empty + //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { - console.log("Index: " + index); - console.log($scope.model.value); - console.log("KeyCode: " + event.keyCode); var txtBoxValue = $scope.model.value[index]; - console.log(txtBoxValue.value); + + var e = angular.element(elem[0].querySelector('[name="item_0"]')); + + console.log(e); + switch (event.keyCode) { case 13: if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { - $scope.model.value.push({ value: "" }); + $scope.model.value.push({ value: "" }); + } break; case 8: @@ -49,7 +51,9 @@ break; default: } - } + } + + $scope.add = function () { if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { From 3ba001164f640ddbe0ae0920a7bf1867058517d3 Mon Sep 17 00:00:00 2001 From: Robert Date: Wed, 5 Jul 2017 12:57:29 +0200 Subject: [PATCH 08/13] Changed to keyup --- .../multipletextbox/multipletextbox.controller.js | 4 ---- .../propertyeditors/multipletextbox/multipletextbox.html | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) 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 cdfe903648..5c476f08af 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 @@ -24,10 +24,6 @@ //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { var txtBoxValue = $scope.model.value[index]; - - var e = angular.element(elem[0].querySelector('[name="item_0"]')); - - console.log(e); switch (event.keyCode) { case 13: 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 ea7db2b4d5..e612e2abb5 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 @@ -3,7 +3,7 @@
- + From c94338d2b6d5426e02b0b404584ce4bc156680fa Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 13 Jul 2017 14:05:50 +0200 Subject: [PATCH 09/13] Newly added text box now get's focused. --- .../multipletextbox/multipletextbox.controller.js | 4 +++- .../propertyeditors/multipletextbox/multipletextbox.html | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) 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 5c476f08af..9621001d0c 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 @@ -29,7 +29,9 @@ case 13: if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) { $scope.model.value.push({ value: "" }); - + + //Focus on the newly added value + $scope.focusMe = true; } break; case 8: 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 e612e2abb5..e8ead14bc2 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 @@ -3,7 +3,7 @@
- + From 6ccb822cb5ea73b6cf2a0bfe197743dfae38a6d2 Mon Sep 17 00:00:00 2001 From: Robert Date: Fri, 14 Jul 2017 13:30:28 +0200 Subject: [PATCH 10/13] On textbox delete the next in line gets focused umbfocusbackwards.directive.js file added --- .../editor/umbfocusbackwards.directive.js | 42 +++++++++++++++++++ .../multipletextbox.controller.js | 36 +++++++++------- .../multipletextbox/multipletextbox.html | 31 +++++++------- 3 files changed, 80 insertions(+), 29 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js new file mode 100644 index 0000000000..c696c6cb28 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js @@ -0,0 +1,42 @@ +/** +@ngdoc directive +@name umbraco.directives: focusNow +@restrict A + +@description +Use this directive focus backwards in a list of elements. +You need to toggle the attribute's value everytime you delete an element to trigger the observe event. +$scope.focusMe = ($scope.focusMe === true)? false: true; + +

Example

+ + +**/ +angular.module("umbraco").directive("focusBackwards", function ($timeout) { + return { + restrict: "A", + link: function (scope, element, attrs) { + attrs.$observe("focusBackwards", function (value) { + if (value === "true") { + $timeout(function () { + element.focus(); + }); + } else { + $timeout(function () { + element.focus(); + }); + } + }); + } + }; +}); 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 9621001d0c..6582e975e2 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 @@ -19,43 +19,50 @@ $scope.model.value.push({ value: "" }); } } - } + } - //TODO add focus to newly created text box or the first in line after deletion + //TODO add focus to newly created text box or the first in line after deletion $scope.addRemoveOnKeyDown = function (event, index) { var txtBoxValue = $scope.model.value[index]; - - switch (event.keyCode) { + + 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: "" }); - + $scope.model.value.push({ value: "" }); + //Focus on the newly added value - $scope.focusMe = true; - } - break; + $scope.focusMe = false; + } + break; case 8: + var remainder = []; - if ($scope.model.value.length > 1) { - if (txtBoxValue.value === "") { + if ($scope.model.value.length > 1) { + if (txtBoxValue.value === "") { for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { remainder.push($scope.model.value[x]); } } $scope.model.value = remainder; + + // The role of this statement is to trigger the observe event + $scope.focusMe = ($scope.focusMe === true) ? false : true; } } 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; } }; @@ -67,8 +74,9 @@ } } $scope.model.value = remainder; + $scope.focusMe = true; }; } -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 e8ead14bc2..483bdee838 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 @@
-
-
- - - - - -
+
+
+ + + + +
- - - +
+ + +
From 7213e3a6a0ef3701f4789182045cedb7c00063d7 Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 17 Aug 2017 12:06:32 +0200 Subject: [PATCH 11/13] Adding and removing text boxes should work properly now Thanks Mads :) --- .../editor/umbfocusbackwards.directive.js | 42 ------------------- .../multipletextbox.controller.js | 27 ++++++++---- .../multipletextbox/multipletextbox.html | 2 +- 3 files changed, 21 insertions(+), 50 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js deleted file mode 100644 index c696c6cb28..0000000000 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js +++ /dev/null @@ -1,42 +0,0 @@ -/** -@ngdoc directive -@name umbraco.directives: focusNow -@restrict A - -@description -Use this directive focus backwards in a list of elements. -You need to toggle the attribute's value everytime you delete an element to trigger the observe event. -$scope.focusMe = ($scope.focusMe === true)? false: true; - -

Example

- -
-
- - - - - - - -
-
-**/ -angular.module("umbraco").directive("focusBackwards", function ($timeout) { - return { - restrict: "A", - link: function (scope, element, attrs) { - attrs.$observe("focusBackwards", function (value) { - if (value === "true") { - $timeout(function () { - element.focus(); - }); - } else { - $timeout(function () { - element.focus(); - }); - } - }); - } - }; -}); 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 6582e975e2..254c905d4b 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,4 @@ -function MultipleTextBoxController($scope) { +function MultipleTextBoxController($scope, $timeout) { $scope.sortableOptions = { axis: 'y', @@ -22,18 +22,23 @@ } //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]; - event.preventDefault(); + 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; + //Focus on the newly added value - $scope.focusMe = false; + $scope.model.value[newItemIndex].hasFocus = true; } break; case 8: @@ -45,11 +50,19 @@ if (x !== index) { remainder.push($scope.model.value[x]); } - } + } + $scope.model.value = remainder; - // The role of this statement is to trigger the observe event - $scope.focusMe = ($scope.focusMe === true) ? false : true; + newItemIndex = $scope.model.value.length - 1; + + //Set focus back on false as the directive only watches for true + $scope.model.value[newItemIndex].hasFocus = false; + + $timeout(function () { + //Focus on the previous value + $scope.model.value[newItemIndex].hasFocus = true; + }); } } break; 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 483bdee838..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 @@ -4,7 +4,7 @@
+ ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/> From 5e6b5a5cc1779505f10f927e721211a78a5dad89 Mon Sep 17 00:00:00 2001 From: Robert Date: Thu, 17 Aug 2017 12:09:20 +0200 Subject: [PATCH 12/13] Added a check so it's not possibile to delete the texboxes that are set as minimum --- .../multipletextbox/multipletextbox.controller.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 254c905d4b..36371f6b2c 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 @@ -42,9 +42,8 @@ } break; case 8: - var remainder = []; - if ($scope.model.value.length > 1) { + if ($scope.model.value.length > 1 && $scope.model.value.length >= $scope.model.config.max) { if (txtBoxValue.value === "") { for (var x = 0; x < $scope.model.value.length; x++) { if (x !== index) { From 168dc0e5da2e18249f31fea3c325a1d89d4371d3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 18 Aug 2017 11:24:51 +0200 Subject: [PATCH 13/13] small UX refinements --- .../multipletextbox.controller.js | 61 +++++++++++-------- 1 file changed, 35 insertions(+), 26 deletions(-) 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 36371f6b2c..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,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; }; }