repo: initial :star:

2 files changed, 66 insertions, 0 deletions

diff --git a/public/js/demos/clicking.js b/public/js/demos/clicking.js
new file mode 100644
index 0000000..4e2e191
--- /dev/null
+++ b/public/js/demos/clicking.js
@@ -0,0 +1,24 @@
+setInterval(function() {
+  var examples = [].slice.call(document.querySelectorAll(".a11y-onclick"))
+  var outputs = [].slice.call(
+    document.querySelectorAll(".a11y-onclick:not(.no-output) .output")
+  )
+
+  examples.forEach(function(el) {
+    el.classList.add("active")
+  })
+
+  outputs.forEach(function(o) {
+    o.innerHTML = "Clicked!"
+  })
+
+  setTimeout(function() {
+    examples.forEach(function(el) {
+      el.classList.remove("active")
+    })
+
+    outputs.forEach(function(o) {
+      o.innerHTML = " "
+    })
+  }, 1000)
+}, 2500)
diff --git a/public/js/demos/hover.js b/public/js/demos/hover.js
new file mode 100644
index 0000000..57d9f3c
--- /dev/null
+++ b/public/js/demos/hover.js
@@ -0,0 +1,42 @@
+var highlightIntervals = [
+  {
+    on: [550, 3900],
+    off: [1400, 4150],
+  },
+  {
+    on: [1700, 3500],
+    off: [1900, 3800],
+  },
+  {
+    on: [2000],
+    off: [3400],
+  },
+]
+
+function highlightSequence() {
+  var examples = [].slice.call(
+    document.querySelectorAll(".hover-a11y:not(.no-active)")
+  )
+
+  examples.forEach(function(example) {
+    console.log(example)
+    var links = [].slice.call(example.querySelectorAll(".button"))
+
+    highlightIntervals.forEach(function(timers, i) {
+      timers.on.forEach(function(ms) {
+        setTimeout(function() {
+          links[i].classList.add("active")
+        }, ms)
+      })
+
+      timers.off.forEach(function(ms) {
+        setTimeout(function() {
+          links[i].classList.remove("active")
+        }, ms)
+      })
+    })
+  })
+}
+
+setInterval(highlightSequence, 6000)
+highlightSequence() // call once to start