Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(194)

Side by Side Diff: sky/examples/calculator/buttons.sky

Issue 951673003: Remove outdated examples and framework pieces (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « sky/examples/animation/basic.sky ('k') | sky/examples/dart.sky » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 SKY MODULE - button widgets for calculator
2 <!-- TODO(ianh): implement accessibility handling once the ax service exists -->
3
4 <script>
5 class AbstractButton extends Element {
6 constructor (hostModule) {
7 super(hostModule);
8 let selector = new SelectorQuery('.dynamic');
9 this.addEventListener('pointer-down', (event) => {
10 selector.findAll(this.shadowRoot).every((element) => element.setAttribut e('clicked'));
11 // TODO(ianh): track the pointer; if it leaves the button, cancel the cl ick
12 // TOOD(ianh): if the pointer doesn't leave the button before being rele ased, then fire some event on ourselves
13 module.application.document.addEventListener('pointer-up', function upHa ndler (event) {
14 module.application.document.removeEventListener('pointer-up', upHandle r);
15 selector.findAll(this.shadowRoot).every((element) => element.removeAtt ribute('clicked'));
16 });
17 });
18 }
19 }
20 </script>
21
22 <template id="threed-button-shadow-tree">
23 <style>
24 /* TODO(ianh): make this shrink-wrap the contents */
25 div { border: solid 1px; }
26 #a { border-color: #666666 #333333 #333333 #666666; }
27 #b { border-color: #EEEEEE #666666 #666666 #EEEEEE; }
28 #c { border-color: #EEEEEE #666666 #666666 #EEEEEE; }
29 #d { border-color: #EEEEEE #999999 #999999 #EEEEEE; padding: 2px 0 0 0; backgr ound: #DDDDDD; color: black; text-align: center; }
30 #a[clicked] { border-color: #666666 #333333 #333333 #666666; width: 6em; }
31 #b[clicked] { border-color: #666666 #DDDDDD #DDDDDD #666666; border-width: 1px 0 0 1px; }
32 #c[clicked] { border-color: #666666 #DDDDDD #DDDDDD #666666; border-width: 1px 0 0 1px; }
33 #d[clicked] { border-color: #999999 #DDDDDD #DDDDDD #999999; padding: 4px 0 0 2px; }
34 </style>
35 <div class="dynamic" id="a">
36 <div class="dynamic" id="b">
37 <div class="dynamic" id="c">
38 <div class="dynamic" id="d">
39 <content/>
40 </div>
41 </div>
42 </div>
43 </div>
44 </template>
45
46 <template id="flat-button-shadow-tree">
47 <style>
48 div { background: green; color: yellow; }
49 div[clicked] { background: yellow; color: green; }
50 </style>
51 <div class=dynamic>
52 <content/>
53 </div>
54 </template>
55
56 <script>
57 module.exports = {
58 ThreeDButtonElement: module.registerElement(
59 class extends AbstractButton {
60 static get tagName() { return 'graybutton'; }
61 static get shadow() { return true; }
62 constructor (hostModule) {
63 super(hostModule);
64 this.shadowRoot.append(module.document.findId('threed-button-shadow-tre e').cloneNode(true));
65 }
66 }
67 ),
68 FlatButtonElement: module.registerElement(
69 class extends AbstractButton {
70 static get tagName() { return 'flatbutton'; }
71 static get shadow() { return true; }
72 constructor (hostModule) {
73 super(hostModule);
74 this.shadowRoot.append(module.document.findId('flat-shadow-tree').clone Node(true));
75 }
76 }
77 ),
78 };
79 </script>
OLDNEW
« no previous file with comments | « sky/examples/animation/basic.sky ('k') | sky/examples/dart.sky » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698