Merge pull request #2 from github/add-demo

muan · web-flow · commit a6c7a9bc5ac7 · 2018-09-06T10:52:12.000-04:00
Add demo page
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <!-- <script type="text/javascript" src="../dist/index.umd.js"></script> -->
+  <script type="text/javascript" src="https://unpkg.com/@github/task-lists-element@latest"></script>
+  <title>task-lists-element demo</title>
+</head>
+<body>
+  <task-lists sortable>
+    <ul class="contains-task-list">
+      <li class="task-list-item">
+        <label>
+          <input type="checkbox" class="task-list-item-checkbox">
+          Hubot
+        </label>
+      </li>
+      <li class="task-list-item">
+        <label>
+          <input type="checkbox" class="task-list-item-checkbox">
+          Bender
+        </label>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        Nested
+
+        <ul class="contains-task-list">
+          <li class="task-list-item">
+            <label>
+              <input type="checkbox" class="task-list-item-checkbox">
+              WALL-E
+            </label>
+          </li>
+          <li class="task-list-item">
+            <label>
+              <input type="checkbox" class="task-list-item-checkbox">
+              BB-8
+            </label>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </task-lists>
+  <pre class="events"></pre>
+  <script type="text/javascript">
+    const events = document.querySelector('.events')
+    document.addEventListener('task-lists:check', function(event) {
+      events.append(`task-lists:check - checked: ${event.detail.checked}, position: ${event.detail.position}\n`)
+    })
+
+    document.addEventListener('task-lists:move', function(event) {
+      events.append(`task-lists:move - from: ${event.detail.src}, to: ${event.detail.dst}\n`)
+    })
+  </script>
+</body>
+</html>
