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

On textbox delete the next in line gets focused

Browse Source 
umbfocusbackwards.directive.js file added
This commit is contained in:
Robert
2017-07-14 13:30:28 +02:00
committed by Robert
parent c94338d2b6
commit 6ccb822cb5
3 changed files with 80 additions and 29 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 Normal file
View File

@@ -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;
<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();
});
}
});
}
};
});

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

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

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

@@ -1,20 +1,21 @@
<div class="umb-editor umb-multiple-textbox" ng-controller="Umbraco.PropertyEditors.MultipleTextBoxController">
<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-When="{{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 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>
<a prevent-default href="" localize="title" title="@content_addTextBox"
ng-show="model.config.max <= 0 || model.value.length < model.config.max"
ng-click="add()">
<i class="icon icon-add"></i>
</a>
</div>
<a prevent-default href="" localize="title" title="@content_addTextBox"
ng-show="model.config.max <= 0 || model.value.length < model.config.max"
ng-click="add()">
<i class="icon icon-add"></i>
</a>
</div>