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

Side by Side Diff: sky/framework/sky-checkbox/sky-checkbox.sky

Issue 845283003: Allow on-* event handlers on <sky-element>. (Closed) Base URL: git@github.com:domokit/mojo.git@master
Patch Set: Add back attr validation. Created 5 years, 11 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
OLDNEW
1 <!-- 1 <!--
2 // Copyright 2014 The Chromium Authors. All rights reserved. 2 // Copyright 2014 The Chromium Authors. All rights reserved.
3 // Use of this source code is governed by a BSD-style license that can be 3 // Use of this source code is governed by a BSD-style license that can be
4 // found in the LICENSE file. 4 // found in the LICENSE file.
5 --> 5 -->
6 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" /> 6 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
7 7
8 <sky-element name="sky-checkbox" attributes="checked:boolean"> 8 <sky-element
9 name="sky-checkbox"
10 attributes="checked:boolean"
11 on-mouseup="handleMouseUp">
9 <template> 12 <template>
10 <style> 13 <style>
11 :host { 14 :host {
12 display: flex; 15 display: flex;
13 justify-content: center; 16 justify-content: center;
14 align-items: center; 17 align-items: center;
15 -webkit-user-select: none; 18 -webkit-user-select: none;
16 cursor: pointer; 19 cursor: pointer;
17 width: 30px; 20 width: 30px;
18 height: 30px; 21 height: 30px;
(...skipping 29 matching lines...) Expand all
48 <div id="check" class="{{ checkStyle }}" /> 51 <div id="check" class="{{ checkStyle }}" />
49 </div> 52 </div>
50 </template> 53 </template>
51 <script> 54 <script>
52 module.exports = class extends SkyButton { 55 module.exports = class extends SkyButton {
53 created() { 56 created() {
54 super.created(); 57 super.created();
55 58
56 this.containerStyle = ''; 59 this.containerStyle = '';
57 this.checkStyle = ''; 60 this.checkStyle = '';
58
59 this.addEventListener('mouseup', function() {
60 this.checked = !this.checked;
61 });
62 } 61 }
63 checkedChanged(oldValue, newValue) { 62 checkedChanged(oldValue, newValue) {
64 this.checkStyle = newValue ? 'checked' : ''; 63 this.checkStyle = newValue ? 'checked' : '';
65 } 64 }
66 highlightChanged(oldValue, newValue) { 65 highlightChanged(oldValue, newValue) {
67 this.containerStyle = newValue ? 'highlight' : ''; 66 this.containerStyle = newValue ? 'highlight' : '';
68 } 67 }
68 handleMouseUp() {
69 this.checked = !this.checked;
70 }
69 }.register(); 71 }.register();
70 </script> 72 </script>
71 </sky-element> 73 </sky-element>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698