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
|
/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
var Montage = require("montage").Montage,
Component = require("ui/component").Component,
CheckInput = require("ui/check-input").CheckInput;
/**
* The Text input
*/
var RadioButton = exports.RadioButton = Montage.create(CheckInput, {
_fakeCheck: {
enumerable: false,
value: function() {
var changeEvent;
// NOTE: this may be BAD, modifying the element outside of
// the draw loop, but it's what a click/touch would
// actually have done
if (!this._element.checked) {
this._element.checked = true;
changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", true, true);
this._element.dispatchEvent(changeEvent);
}
}
},
_checkedSyncedWithInputField: {
enumerable: false,
value: false
},
_checked: {
enumerable: false,
value: null
},
checked: {
get: function() {
// If we haven't synced with the input field then our value is
// more up to date than the element and so we don't get it from the
// element. If we have synced then the user could have changed
// the focus to another radio button, so we *do* retrieve it from
// the element.
if (this._checkedSyncedWithInputField === true) {
this._checked = this._element.checked;
}
return this._checked;
},
set: function(value, fromInput) {
this._checked = value;
if (fromInput) {
this._valueSyncedWithInputField = true;
} else {
this._valueSyncedWithInputField = false;
this.needsDraw = true;
}
if(this._checked === true) {
if(this.name && this.name !== null) {
// dispatch an event to all other radiobuttons with the same name
var anEvent = document.createEvent("CustomEvent");
anEvent.initCustomEvent("checked", true, true, {
name: this.name
});
anEvent.type = "checked";
RadioButton.dispatchEvent(anEvent);
RadioButton.addEventListener('checked', this);
}
}
}
},
handleChecked:{
value: function(evt) {
// if we receive this event, it means that some other radiobutton with the same name
// has been checked. So, mark this as unchecked.
if(this.name === evt.detail.name) {
this.checked = false;
RadioButton.removeEventListener('checked', this);
}
}
},
draw: {
value: function() {
if (!this._valueSyncedWithInputField) {
this._element.checked = this._checked;
}
// Call super
Object.getPrototypeOf(RadioButton).draw.call(this);
}
}
});
RadioButton.addAttributes({
autofocus: 'off', // on/off
disabled: {value: false, dataType: 'boolean'},
checked: {value: false, dataType: 'boolean'},
form: null,
name: null,
readonly: {value: false, dataType: 'boolean'},
title: null,
/*
"On getting, if the element has a value attribute, it must return that
attribute's value; otherwise, it must return the string "on". On setting,
it must set the element's value attribute to the new value."
http://www.w3.org/TR/html5/common-input-element-attributes.html#dom-input-value-default-on
*/
value: {value: 'on'}
});
|