Fixed "active" class bug with toggle

If there was a toggle element within a segmented control, they would all have their "active" class removed.
thewax · Aug 8, 2016 · 790d530 · 790d530
1 parent c662c76
commit 790d530
Showing 1 changed file with 46 additions and 49 deletions.
diff --git a/js/segmented-controllers.js b/js/segmented-controllers.js
@@ -7,64 +7,61 @@
  * ======================================================================== */
 
 !(function () {
-  'use strict';
-
-  var getTarget = function (target) {
-    var i;
-    var segmentedControls = document.querySelectorAll('.segmented-control .control-item');
-
-    for (; target && target !== document; target = target.parentNode) {
-      for (i = segmentedControls.length; i--;) {
-        if (segmentedControls[i] === target) {
-          return target;
+    'use strict';
+
+    var getTarget = function (target) {
+        var i;
+        var segmentedControls = document.querySelectorAll('.segmented-control .control-item');
+
+        for (; target && target !== document; target = target.parentNode) {
+            for (i = segmentedControls.length; i--;) {
+                if (segmentedControls[i] === target) {
+                    return target;
+                }
+            }
+        }
+    };
+    var tabTouchEnd = function (e) {
+        var activeTab;
+        var activeBodies;
+        var targetBody;
+        var targetTab = getTarget(e.target);
+        var className = 'active';
+        var classSelector = '.control-content.active';
+        var tabClassSelector = '.control-item.active';
+
+        if (!targetTab) {
+            return;
         }
-      }
-    }
-  };
-
-  window.addEventListener('touchend', function (e) {
-    var activeTab;
-    var activeBodies;
-    var targetBody;
-    var targetTab     = getTarget(e.target);
-    var className     = 'active';
-    var classSelector = '.' + className;
-
-    if (!targetTab) {
-      return;
-    }
-
-    activeTab = targetTab.parentNode.querySelector(classSelector);
 
-    if (activeTab) {
-      activeTab.classList.remove(className);
-    }
+        activeTab = targetTab.parentNode.querySelector(tabClassSelector);
 
-    targetTab.classList.add(className);
+        if (activeTab) {
+            activeTab.classList.remove(className);
+        }
 
-    if (!targetTab.hash) {
-      return;
-    }
+        targetTab.classList.add(className);
 
-    targetBody = document.querySelector(targetTab.hash);
+        if (!targetTab.hash) {
+            return;
+        }
 
-    if (!targetBody) {
-      return;
-    }
+        targetBody = document.querySelector(targetTab.hash);
 
-    activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
+        if (!targetBody) {
+            return;
+        }
 
-    for (var i = 0; i < activeBodies.length; i++) {
-      activeBodies[i].classList.remove(className);
-    }
+        activeBodies = targetBody.parentNode.querySelectorAll(classSelector);
 
-    targetBody.classList.add(className);
-  });
+        for (var i = 0; i < activeBodies.length; i++) {
+            activeBodies[i].classList.remove(className);
+        }
 
-  window.addEventListener('click', function (e) {
-    if (getTarget(e.target)) {
-      e.preventDefault();
-    }
-  });
+        targetBody.classList.add(className);
+    };
+    window.addEventListener('touchend', tabTouchEnd);
+    window.addEventListener("MSPointerUp", tabTouchEnd);
 
+    window.addEventListener('click', function (e) { if (getTarget(e.target)) { preventDef(e); } });
 }());