Docs: Experimental 'button' widget, work in progress

sky/examples/calculator/buttons.sky

Index: sky/examples/calculator/buttons.sky
diff --git a/sky/examples/calculator/buttons.sky b/sky/examples/calculator/buttons.sky
new file mode 100644
index 0000000000000000000000000000000000000000..bf90a7ab29f5db708080d5054e743359a44bb7ba
--- /dev/null
+++ b/sky/examples/calculator/buttons.sky
@@ -0,0 +1,79 @@
+SKY MODULE - button widgets for calculator
+<!-- TODO(ianh): implement accessibility handling once the ax service exists -->
+
+<script>
+  class AbstractButton extends Element {
+    constructor (module) {
+      super(module);
+      let selector = new SelectorQuery('.dynamic');
+      this.addEventListener('pointer-down', (event) => {
+        selector.findAll(this.shadowRoot).every((element) => element.setAttribute('clicked'));
+        // TODO(ianh): track the pointer; if it leaves the button, cancel the click
+        // TOOD(ianh): if the pointer doesn't leave the button before being released, then fire some event on ourselves
+        module.application.document.addEventListener('pointer-up', function upHandler (event) {
+          module.application.document.removeEventListener('pointer-up', upHandler);
+          selector.findAll(this.shadowRoot).every((element) => element.removeAttribute('clicked'));
+        });
+      });
+    }
+  }
+</script>
+
+<template id="threed-button-shadow-tree">
+ <style>
+  /* TODO(ianh): make this shrink-wrap the contents */
+  div { border: solid 1px; }
+  #a { border-color: #666666 #333333 #333333 #666666; }
+  #b { border-color: #EEEEEE #666666 #666666 #EEEEEE; }
+  #c { border-color: #EEEEEE #666666 #666666 #EEEEEE; }
+  #d { border-color: #EEEEEE #999999 #999999 #EEEEEE; padding: 2px 0 0 0; background: #DDDDDD; color: black; text-align: center; }
+  #a[clicked] { border-color: #666666 #333333 #333333 #666666; width: 6em; }
+  #b[clicked] { border-color: #666666 #DDDDDD #DDDDDD #666666; border-width: 1px 0 0 1px; }
+  #c[clicked] { border-color: #666666 #DDDDDD #DDDDDD #666666; border-width: 1px 0 0 1px; }
+  #d[clicked] { border-color: #999999 #DDDDDD #DDDDDD #999999; padding: 4px 0 0 2px; }
+ </style>
+ <div class="dynamic" id="a">
+  <div class="dynamic" id="b">
+   <div class="dynamic" id="c">
+    <div class="dynamic" id="d">
+     <content/>
+    </div>
+   </div>
+  </div>
+ </div>
+</template>
+
+<template id="threed-button-shadow-tree">
+ <style>
+  div { background: green; color: yellow; }
+  div[clicked] { background: yellow; color: green; }
+ </style>
+ <div class=dynamic>
+  <content/>
+ </div>
+</template>
+
+<script>
+ module.exports = {
+   ThreeDButtonElement: module.registerElement({
+     tagName: 'graybutton',
+     shadow: true,
+     constructor: class extends AbstractButton {
+       constructor (module) {
+         super(module);
+         this.shadowRoot.append(module.document.findId('threed-button-shadow-tree').cloneNode(true));
+       }
+     },
+   }),
+   FlatButtonElement: module.registerElement({
+     tagName: 'graybutton',
+     shadow: true,
+     constructor: class extends AbstractButton {
+       constructor (module) {
+         super(module);
+         this.shadowRoot.append(module.document.findId('flat-shadow-tree').cloneNode(true));
+       }
+     },
+   }),
+ };
+</script>