/**
* SelectBox.js
*
* Released under LGPL License.
* Copyright (c) 1999-2017 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} options Array with options to add to the select 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();
}
});
}
);
|