a11y-outline

commit

f404a1dd07048cee356a0eb0e337cfe586b2c0c6

parent

4cb1d0a0372faf1586c75f0abe99c8e2f57678f1

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2021-07-31 14:08

refactor: split data gathering from rendering

Diffstat

1 files changed, 16 insertions, 9 deletions

diff --git a/src/outline.js b/src/outline.js

@@ -63,19 +63,26 @@ var insertItem = function(item, list) {
   63    63 	list.push(item);
   64    64 };
   65    65 
   66    -1 var buildTree = function(role, dialog) {
   67    -1 	var matches = aria.querySelectorAll(document, role)
   68    -1 		.filter(function(el) {
   69    -1 			return !aria.matches(el, ':hidden');
   70    -1 		});
   -1    66 var getMatches = function(role) {
   -1    67 	return aria.querySelectorAll(document, role)
   -1    68 		.filter(el => !aria.matches(el, ':hidden'));
   -1    69 };
   71    70 
   -1    71 var buildTree = function(matches) {
   72    72 	var items = [];
   73    73 	for (var i = 0; i < matches.length; i++) {
   74    74 		insertItem(createItem(matches[i], i), items);
   75    75 	}
   76    -1 	var tree = treeview(items, dialog.id + '-' + role);
   -1    76 	return items;
   -1    77 };
   -1    78 
   -1    79 var renderTree = function(role, dialog) {
   -1    80 	var matches = getMatches(role);
   -1    81 	var tree = buildTree(matches);
   -1    82 
   -1    83 	var ul = treeview(tree, dialog.id + '-' + role);
   77    84 
   78    -1 	tree.addEventListener('click', function(event) {
   -1    85 	ul.addEventListener('click', function(event) {
   79    86 		if (event.target.matches('a')) {
   80    87 			event.preventDefault();
   81    88 			dialog.close();
@@ -88,13 +95,13 @@ var buildTree = function(role, dialog) {
   88    95 		}
   89    96 	});
   90    97 
   91    -1 	dialog.appendChild(tree);
   -1    98 	dialog.appendChild(ul);
   92    99 };
   93   100 
   94   101 var updateVisiblePane = function(select, dialog) {
   95   102 	var id = dialog.id + '-' + select.value;
   96   103 	if (!document.getElementById(id)) {
   97    -1 		buildTree(select.value, dialog);
   -1   104 		renderTree(select.value, dialog);
   98   105 	}
   99   106 
  100   107 	var trees = dialog.querySelectorAll('[role="tree"]');