Add multiple example

yuanqing · Jan 10, 2016 · f33e9c5 · f33e9c5
1 parent 3fd1786
commit f33e9c5
Showing 1 changed file with 72 additions and 0 deletions.
diff --git a/example/multiple.html b/example/multiple.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Malarkey</title>
+    <meta charset="utf-8">
+    <style>
+      .cursor:after {
+        content: '';
+        height: 100%;
+        width: 0;
+        border-left: 1px solid black;
+      }
+      .highlight {
+        background: gray;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="x"></div>
+    <div class="y"></div>
+    <script src="../dist/malarkey.min.js"></script>
+    <script>
+      var CURSOR_CLASS = 'cursor';
+      var HIGHLIGHT_CLASS = 'highlight';
+      function addClass(elem, className) {
+        elem.classList.add(className);
+      }
+      function removeClass(elem, className) {
+        elem.classList.remove(className);
+      }
+      var xElem = document.querySelector('.x');
+      var yElem = document.querySelector('.y');
+      var x = malarkey(xElem, { typeSpeed: 200, loop: true });
+      var y = malarkey(yElem, { typeSpeed: 200, loop: false });
+      [
+        { x: 'foo', y: 'bar' },
+        { x: 'baz', y: 'qux' }
+      ].forEach(function(text) {
+        x.call(function() {
+          addClass(xElem, CURSOR_CLASS);
+          this();
+        })
+        x.type(text.x);
+        x.call(function() {
+          removeClass(xElem, CURSOR_CLASS);
+          addClass(yElem, CURSOR_CLASS);
+          var self = this;
+          y.type(text.y);
+          y.call(function() {
+            self();
+            this();
+          })
+        });
+        x.pause(1000);
+        x.call(function() {
+          addClass(xElem, HIGHLIGHT_CLASS);
+          addClass(yElem, HIGHLIGHT_CLASS);
+          this();
+        });
+        x.pause(1000);
+        x.call(function() {
+          xElem.innerHTML = ''; // clear both elements immediately
+          yElem.innerHTML = '';
+          removeClass(xElem, HIGHLIGHT_CLASS);
+          removeClass(yElem, HIGHLIGHT_CLASS);
+          removeClass(yElem, CURSOR_CLASS);
+          this();
+        });
+      });
+    </script>
+  </body>
+</html>