SelectBox.js
2.51 KB
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
115
116
117
118
119
120
121
122
/**
* SelectBox.js
*
* Released under LGPL License.
* Copyright (c) 1999-2015 Ephox Corp. All rights reserved
*
* License: http://www.tinymce.com/license
* Contributing: http://www.tinymce.com/contributing
*/
/**
* Creates a new select box control.
*
* @-x-less SelectBox.less
* @class tinymce.ui.SelectBox
* @extends tinymce.ui.Widget
*/
define("tinymce/ui/SelectBox", [
"tinymce/ui/Widget"
], function(Widget) {
"use strict";
function createOptions(options) {
var strOptions = '';
if (options) {
for (var i = 0; i < options.length; i++) {
strOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
}
}
return strOptions;
}
return Widget.extend({
Defaults: {
classes: "selectbox",
role: "selectbox",
options: []
},
/**
* Constructs a instance with the specified settings.
*
* @constructor
* @param {Object} settings Name/value object with settings.
* @setting {Array} values Array with values to add to list box.
*/
init: function(settings) {
var self = this;
self._super(settings);
if (self.settings.size) {
self.size = self.settings.size;
}
if (self.settings.options) {
self._options = self.settings.options;
}
self.on('keydown', function(e) {
var rootControl;
if (e.keyCode == 13) {
e.preventDefault();
// Find root control that we can do toJSON on
self.parents().reverse().each(function(ctrl) {
if (ctrl.toJSON) {
rootControl = ctrl;
return false;
}
});
// Fire event on current text box with the serialized data of the whole form
self.fire('submit', {data: rootControl.toJSON()});
}
});
},
/**
* Getter/setter function for the options state.
*
* @method options
* @param {Array} [state] State to be set.
* @return {Array|tinymce.ui.SelectBox} Array of string options.
*/
options: function(state) {
if (!arguments.length) {
return this.state.get('options');
}
this.state.set('options', state);
return this;
},
renderHtml: function() {
var self = this, options, size = '';
options = createOptions(self._options);
if (self.size) {
size = ' size = "' + self.size + '"';
}
return (
'<select id="' + self._id + '" class="' + self.classes + '"' + size + '>' +
options +
'</select>'
);
},
bindStates: function() {
var self = this;
self.state.on('change:options', function(e) {
self.getEl().innerHTML = createOptions(e.value);
});
return self._super();
}
});
});