| Index: sky/examples/calculator/buttons.sky
|
| diff --git a/sky/examples/calculator/buttons.sky b/sky/examples/calculator/buttons.sky
|
| deleted file mode 100644
|
| index 07b32e010818ca325429750789fd8b00030ad91f..0000000000000000000000000000000000000000
|
| --- a/sky/examples/calculator/buttons.sky
|
| +++ /dev/null
|
| @@ -1,79 +0,0 @@
|
| -SKY MODULE - button widgets for calculator
|
| -<!-- TODO(ianh): implement accessibility handling once the ax service exists -->
|
| -
|
| -<script>
|
| - class AbstractButton extends Element {
|
| - constructor (hostModule) {
|
| - super(hostModule);
|
| - 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="flat-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(
|
| - class extends AbstractButton {
|
| - static get tagName() { return 'graybutton'; }
|
| - static get shadow() { return true; }
|
| - constructor (hostModule) {
|
| - super(hostModule);
|
| - this.shadowRoot.append(module.document.findId('threed-button-shadow-tree').cloneNode(true));
|
| - }
|
| - }
|
| - ),
|
| - FlatButtonElement: module.registerElement(
|
| - class extends AbstractButton {
|
| - static get tagName() { return 'flatbutton'; }
|
| - static get shadow() { return true; }
|
| - constructor (hostModule) {
|
| - super(hostModule);
|
| - this.shadowRoot.append(module.document.findId('flat-shadow-tree').cloneNode(true));
|
| - }
|
| - }
|
| - ),
|
| - };
|
| -</script>
|
|
|