1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/**
A control that looks like a switch with labels for two states. Each time a ToggleButton is tapped,
it switches its value and fires an onChange event.
{kind: "onyx.ToggleButton", onContent: "foo", offContent: "bar", onChange: "buttonToggle"}
buttonToggle: function(inSender, inEvent) {
this.log("Toggled to value " + inEvent.value);
}
To find out the value of the button, use getValue:
queryToggleValue: function() {
return this.$.toggleButton.getValue();
}
The color of the toggle button can be customized by applying a background color:
{kind: "onyx.ToggleButton", style: "background-color: #35A8EE;"}
*/
enyo.kind({
name: "onyx.ToggleButton",
classes: "onyx-toggle-button",
published: {
active: false,
value: false,
onContent: "On",
offContent: "Off",
disabled: false
},
events: {
/**
The onChange event fires when the user changes the value of the toggle button,
but not when the value is changed programmatically.
*/
onChange: ""
},
//* @protected
handlers: {
ondragstart: "dragstart",
ondrag: "drag",
ondragfinish: "dragfinish"
},
components: [
{name: "contentOn", classes: "onyx-toggle-content on"},
{name: "contentOff", classes: "onyx-toggle-content off"},
{classes: "onyx-toggle-button-knob"}
],
create: function() {
this.inherited(arguments);
this.value = Boolean(this.value || this.active);
this.onContentChanged();
this.offContentChanged();
this.disabledChanged();
},
rendered: function() {
this.inherited(arguments);
this.valueChanged();
},
valueChanged: function() {
this.addRemoveClass("off", !this.value);
this.$.contentOn.setShowing(this.value);
this.$.contentOff.setShowing(!this.value);
this.setActive(this.value);
},
activeChanged: function() {
this.setValue(this.active);
this.bubble("onActivate");
},
onContentChanged: function() {
this.$.contentOn.setContent(this.onContent || "");
this.$.contentOn.addRemoveClass("empty", !this.onContent);
},
offContentChanged: function() {
this.$.contentOff.setContent(this.offContent || "");
this.$.contentOff.addRemoveClass("empty", !this.onContent);
},
disabledChanged: function() {
this.addRemoveClass("disabled", this.disabled);
},
updateValue: function(inValue) {
if (!this.disabled) {
this.setValue(inValue);
this.doChange({value: this.value});
}
},
tap: function() {
this.updateValue(!this.value);
},
dragstart: function(inSender, inEvent) {
if (inEvent.horizontal) {
inEvent.preventDefault();
this.dragging = true;
this.dragged = false;
return true;
}
},
drag: function(inSender, inEvent) {
if (this.dragging) {
var d = inEvent.dx;
if (Math.abs(d) > 10) {
this.updateValue(d > 0);
this.dragged = true;
}
return true;
}
},
dragfinish: function(inSender, inEvent) {
this.dragging = false;
if (this.dragged) {
inEvent.preventTap();
}
}
})
|
