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

Adding and removing text boxes should work properly now

Browse Source 
Thanks Mads :)
This commit is contained in:
Robert
2017-08-17 12:06:32 +02:00
parent 84de083d52
commit 7213e3a6a0
3 changed files with 21 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbfocusbackwards.directive.js
View File

@@ -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;
<h3>Example</h3>
<div ui-sortable="sortableOptions" ng-model="model.value">
<div class="control-group" ng-repeat="item in model.value">
<i class="icon icon-navigation handle"></i>
<input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-editor" ng-keyup="addRemoveOnKeyDown($event, $index)" focus-Backwards="{{focusMe}}" />
<a prevent-default href="" localize="title" title="@content_removeTextBox" ng-show="model.value.length > model.config.min" ng-click="remove($index)">
<i class="icon icon-remove"></i>
</a>
</div>
</div>
**/
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();
});
}
});
}
};
});

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

@@ -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;

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/multipletextbox/multipletextbox.html
View File

@@ -4,7 +4,7 @@
<div class="control-group" ng-repeat="item in model.value">
<i class="icon icon-navigation handle"></i>
<input type="text" name="item_{{$index}}" ng-model="item.value" class="umb-editor"
ng-keyup="addRemoveOnKeyDown($event, $index)" focus-Backwards="{{focusMe}}" />
ng-keyup="addRemoveOnKeyDown($event, $index)" focus-when="{{item.hasFocus}}"/>
<a prevent-default href="" localize="title" title="@content_removeTextBox"
ng-show="model.value.length > model.config.min"
ng-click="remove($index)">