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

add toggle to disable tabindex directive

Browse Source
This commit is contained in:
Mads Rasmussen
2018-10-24 20:41:58 +02:00
parent 9a1a13ba81
commit 4420f101d2
2 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/Umbraco.Web.UI.Client/src/common/directives/util/disabletabindex.directive.js
View File

@@ -2,39 +2,44 @@ angular.module("umbraco.directives")
.directive('disableTabindex', function (tabbableService) {
return {
restrict: 'A', //Can only be used as an attribute
restrict: 'A', //Can only be used as an attribute,
scope: {
"disableTabindex": "<"
},
link: function (scope, element, attrs) {
//Select the node that will be observed for mutations (native DOM element not jQLite version)
var targetNode = element[0];
if(scope.disableTabindex) {
//Select the node that will be observed for mutations (native DOM element not jQLite version)
var targetNode = element[0];
//Watch for DOM changes - so when the property editor subview loads in
//We can be notified its updated the child elements inside the DIV we are watching
var observer = new MutationObserver(domChange);
//Watch for DOM changes - so when the property editor subview loads in
//We can be notified its updated the child elements inside the DIV we are watching
var observer = new MutationObserver(domChange);
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: false };
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: false };
function domChange(mutationsList, observer){
for(var mutation of mutationsList) {
function domChange(mutationsList, observer){
for(var mutation of mutationsList) {
//DOM items have been added or removed
if (mutation.type == 'childList') {
//DOM items have been added or removed
if (mutation.type == 'childList') {
//Check if any child items in mutation.target contain an input
var childInputs = tabbableService.tabbable(mutation.target);
//Check if any child items in mutation.target contain an input
var childInputs = tabbableService.tabbable(mutation.target);
//For each item in childInputs - override or set HTML attribute tabindex="-1"
angular.forEach(childInputs, function(element){
angular.element(element).attr('tabindex', '-1');
});
//For each item in childInputs - override or set HTML attribute tabindex="-1"
angular.forEach(childInputs, function(element){
angular.element(element).attr('tabindex', '-1');
});
}
}
}
}
// Start observing the target node for configured mutations
//GO GO GO
observer.observe(targetNode, config);
// Start observing the target node for configured mutations
//GO GO GO
observer.observe(targetNode, config);
}
}
};

8
src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-editor.html
View File

@@ -1,4 +1,6 @@
<div class="umb-property-editor db" ng-class="{'-not-clickable': preview}" disable-tabindex>
<div class="umb-property-editor__view" ng-include="propertyEditorView"></div>
<div class="umb-property-editor__overlay" ng-show="preview === true"></div>
<div class="umb-property-editor db" ng-class="{'-not-clickable': preview}">
<div disable-tabindex="preview">
<div class="umb-property-editor__view" ng-include="propertyEditorView"></div>
<div class="umb-property-editor__overlay" ng-show="preview === true"></div>
</div>
</div>