Migrate script into index.es

devpunks · Jul 6, 2017 · ba01a45 · ba01a45
1 parent 3f040ad
commit ba01a45
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 49 deletions.
diff --git a/examples/to-do/index.es b/examples/to-do/index.es
@@ -0,0 +1,53 @@
+Element `to-do`
+
+(class extends HTMLElement {
+
+  initialize () {
+    this.context
+      .tasks = ['Wash clothes', 'Eat food']
+  }
+
+  onidle () { // hide count if no tasks
+    this.select `fieldset`.hidden =
+      !!! this.context.tasks.length
+  }
+
+  // "automagically" delegates registration on `to-do`
+  // based solely on GlobalEventHandlers.on* naming conventions.
+  // Further Details: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
+  onsubmit (event) {
+    event.preventDefault ()
+
+    const input = this.select `input`
+
+    this.context
+      .tasks.push (input.value)
+
+    input.value = ''
+  }
+
+  remove (event) {
+    this.context.tasks
+      // MDN Array.prototype.slice ()
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+      .splice (event.target.id, 1)
+  }
+
+  get tasks ()
+    { return this.context.tasks }
+
+  get name ()
+    { return 'Loren Hale' }
+
+  get count ()
+    { return this.context.tasks.length }
+
+  // perhaps this should be a Mixin:
+  // `Storage (HTMLElement)`
+  store () {
+    console.log (JSON.strinfigy (this.context.tasks))
+  }
+
+})
+
+
diff --git a/examples/to-do/index.html b/examples/to-do/index.html
@@ -50,55 +50,7 @@ <h1>{name}'s &lt;to-do&gt; List</h1>
   </form>
 </to-do>
 
-<script defer>
-
-Element `to-do`
-
-(class extends HTMLElement {
-
-  initialize () {
-    this.context
-      .tasks = ['Wash clothes', 'Eat food']
-  }
-
-  onidle () { // hide count if no tasks
-    this.select `fieldset`.hidden =
-      !!! this.context.tasks.length
-  }
-
-  // "automagically" delegates registration on `to-do`
-  // based solely on GlobalEventHandlers.on* naming conventions.
-  // Further Details: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
-  onsubmit (event) {
-    event.preventDefault ()
-
-    const input = this.select `input`
-
-    this.context
-      .tasks.push (input.value)
-
-    input.value = ''
-  }
-
-  remove (event) {
-    this.context.tasks
-      // MDN Array.prototype.slice ()
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
-      .splice (event.target.id, 1)
-  }
-
-  get tasks ()
-    { return this.context.tasks }
-
-  get name ()
-    { return 'Loren Hale' }
-
-  get count ()
-    { return this.context.tasks.length }
-
-})
-
-</script>
+<script src=/examples/to-do/index.es></script>
 
 <script src=/browser-sync.es></script>