Improved script performance

edenspiekermann · Mar 8, 2016 · 8a7bfa0 · 8a7bfa0
1 parent f8fcd1f
commit 8a7bfa0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/a11y-toggle.js b/a11y-toggle.js
@@ -1,23 +1,28 @@
 (function () {
   var toggles = document.querySelectorAll('[data-a11y-toggle][aria-controls]');
+  var targetsList = [];
 
-  function prepareDOM (toggle, target) {
+  for (var i = 0; i < toggles.length; i += 1) {
+    var toggle = toggles[i];
+    targetsList.push('#' + toggle.getAttribute('aria-controls'));
     toggle.hasAttribute('aria-expanded') || toggle.setAttribute('aria-expanded', false);
-    target.hasAttribute('aria-hidden') || target.setAttribute('aria-hidden', true);
   }
 
-  function handleClick (toggle, target) {
-    var isExpanded = JSON.parse(toggle.getAttribute('aria-expanded'));
+  var targets = document.querySelectorAll(targetsList);
+  var targetsMap = {};
 
-    toggle.setAttribute('aria-expanded', !isExpanded);
-    target.setAttribute('aria-hidden', !!isExpanded);
+  for (var j = 0; j < targets.length; j += 1) {
+    var target = targets[j];
+    targetsMap[target.id] = target;
+    target.hasAttribute('aria-hidden') || target.setAttribute('aria-hidden', true);
   }
 
-  for (var i = 0; i < toggles.length; i += 1) {
-    var toggle = toggles[i];
-    var target = document.getElementById(toggle.getAttribute('aria-controls'));
+  document.addEventListener('click', function (event) {
+    var toggle = event.target;
+    var target = targetsMap[toggle.getAttribute('aria-controls')];
+    var isExpanded = JSON.parse(toggle.getAttribute('aria-expanded'));
 
-    prepareDOM(toggle, target);
-    toggle.addEventListener('click', handleClick.bind(null, toggle, target), false);
-  }
+    toggle.setAttribute('aria-expanded', !isExpanded);
+    target.setAttribute('aria-hidden', isExpanded);
+  });
 }());
diff --git a/a11y-toggle.min.js b/a11y-toggle.min.js
diff --git a/example/main.js b/example/main.js
@@ -1,23 +1,28 @@
 (function () {
   var toggles = document.querySelectorAll('[data-a11y-toggle][aria-controls]');
+  var targetsList = [];
 
-  function prepareDOM (toggle, target) {
+  for (var i = 0; i < toggles.length; i += 1) {
+    var toggle = toggles[i];
+    targetsList.push('#' + toggle.getAttribute('aria-controls'));
     toggle.hasAttribute('aria-expanded') || toggle.setAttribute('aria-expanded', false);
-    target.hasAttribute('aria-hidden') || target.setAttribute('aria-hidden', true);
   }
 
-  function handleClick (toggle, target) {
-    var isExpanded = JSON.parse(toggle.getAttribute('aria-expanded'));
+  var targets = document.querySelectorAll(targetsList);
+  var targetsMap = {};
 
-    toggle.setAttribute('aria-expanded', !isExpanded);
-    target.setAttribute('aria-hidden', !!isExpanded);
+  for (var j = 0; j < targets.length; j += 1) {
+    var target = targets[j];
+    targetsMap[target.id] = target;
+    target.hasAttribute('aria-hidden') || target.setAttribute('aria-hidden', true);
   }
 
-  for (var i = 0; i < toggles.length; i += 1) {
-    var toggle = toggles[i];
-    var target = document.getElementById(toggle.getAttribute('aria-controls'));
+  document.addEventListener('click', function (event) {
+    var toggle = event.target;
+    var target = targetsMap[toggle.getAttribute('aria-controls')];
+    var isExpanded = JSON.parse(toggle.getAttribute('aria-expanded'));
 
-    prepareDOM(toggle, target);
-    toggle.addEventListener('click', handleClick.bind(null, toggle, target), false);
-  }
+    toggle.setAttribute('aria-expanded', !isExpanded);
+    target.setAttribute('aria-hidden', isExpanded);
+  });
 }());