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> |