From ba01a4551937e3961a05db0f1d2dfd751531f0f3 Mon Sep 17 00:00:00 2001 From: Snuggs Date: Thu, 6 Jul 2017 14:33:15 -0400 Subject: [PATCH] Migrate script into index.es --- examples/to-do/index.es | 53 +++++++++++++++++++++++++++++++++++++++ examples/to-do/index.html | 50 +----------------------------------- 2 files changed, 54 insertions(+), 49 deletions(-) create mode 100644 examples/to-do/index.es diff --git a/examples/to-do/index.es b/examples/to-do/index.es new file mode 100644 index 0000000000..497e3d4670 --- /dev/null +++ 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 index e6b73580f2..4084a7bc84 100644 --- a/examples/to-do/index.html +++ b/examples/to-do/index.html @@ -50,55 +50,7 @@

{name}'s <to-do> List

- +