// Generated by github.com/steida/coffee2closure 0.1.12
goog.provide('spark.components.ComboBox');
goog.require('spark.core.View');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
/**
Traditional select element replacement for Spark Framework.
@constructor
@export
@param {Object=} options Class options.
@param {Array=} data Combobox item data.
@extends {spark.core.View}
*/
spark.components.ComboBox = function(options, data) {
var arrow;
if (options == null) {
options = {};
}
if (data == null) {
data = [];
}
options.valueField || (options.valueField = options['valueField'] || 'value');
options.titleField || (options.titleField = options['titleField'] || 'title');
options.selectionText || (options.selectionText = options['selectionText'] || 'Select one...');
options.selectedItemValue || (options.selectedItemValue = options['selectedItemValue'] || null);
this.getCssClass(options, 'combobox');
spark.components.ComboBox.superClass_.constructor.call(this, options, data);
this.items = [];
this.createMenu_();
this.createItems_();
this.title = new spark.core.View({
cssClass: 'title',
template: options.selectionText
});
arrow = new spark.core.View({
cssClass: 'arrow',
template: 'v'
});
this.appendView(this.title);
this.appendView(arrow);
this.menu_.render(this.getElement());
this.on('click', (function(_this) {
return function() {
return _this.toggleMenu();
};
})(this));
if (options.selectedItemValue) {
this.selectItemByValue(options.selectedItemValue);
}
}
goog.inherits(spark.components.ComboBox, spark.core.View);
/**
Creates menu and binds action event to menu to emit selected event.
@private
*/
spark.components.ComboBox.prototype.createMenu_ = function() {
this.menu_ = new goog.ui.Menu;
this.menu_.setVisible(false);
return goog.events.listen(this.menu_, goog.ui.Component.EventType.ACTION, (function(_this) {
return function(e) {
return _this.handleSelection_(e.target);
};
})(this));
};
/**
Handles menu item selections. Emits selected event with the following data.
@private
*/
spark.components.ComboBox.prototype.handleSelection_ = function(item) {
var eventData, options, selectedData;
this.selectedItem = item;
selectedData = this.selectedItem.getModel();
options = this.getOptions();
eventData = {
title: selectedData[options.titleField],
value: selectedData[options.valueField],
data: selectedData
};
this.getTitle().setTemplate(eventData.title);
return this.emit(spark.components.ComboBox.EventTypes.SELECTED, eventData);
};
/**
Creates all items using class data.
@private
*/
spark.components.ComboBox.prototype.createItems_ = function() {
return this.getData().forEach((function(_this) {
return function(item) {
return _this.createItem(item, true);
};
})(this));
};
/**
Creates and return a new goog.ui.MenuItem. You can use this method to create
and add item to menu.
@export
@param {!Object} data Data of the menu item. It should have valueField and
titleField keys in it. Default keys are value and title.
@param {boolean=} shouldAdd If you pass should add as true, it will create
and append the menu item at the end of the menu.
@return {goog.ui.MenuItem} Created menu item.
*/
spark.components.ComboBox.prototype.createItem = function(data, shouldAdd) {
var item, titleField;
titleField = this.getOptions().titleField;
item = new goog.ui.MenuItem(data[titleField], data);
if (shouldAdd) {
this.addItem(item);
}
return item;
};
/**
If item is an instance of goog.ui.MenuItem it will be added to menu
otherwise the data is consistent enough a MenuItem instance will be created
and added to menu. index parameter is optional. If it's not passed item will
be appended at the end of the menu otherwise it will be appended into that
position.
@export
@param {goog.ui.MenuItem|Object} item MenuItem instance or plain object.
If the item is an instanceof goog.ui.MenuItem then it will be added to menu.
If it's just an object and it has titleField and valueField in it,
a goog.ui.Menu instance will be taken on the fly and added to the menu.
@param {number=} index Index to insert the menu item. It's optional, if you
don't pass it the item will be appended at the end of the menu.
*/
spark.components.ComboBox.prototype.addItem = function(item, index) {
var titleField, valueField, _ref;
_ref = this.getOptions(), titleField = _ref.titleField, valueField = _ref.valueField;
if (!(item instanceof goog.ui.MenuItem)) {
if (item[titleField] && item[valueField]) {
item = this.createItem(item);
}
}
if (!(item instanceof goog.ui.MenuItem)) {
return;
}
if (index != null) {
this.menu_.addChildAt(item, index, true);
} else {
this.menu_.addItem(item);
}
return this.items.push(item);
};
/**
Removes an item from menu.
@export
@param {goog.ui.MenuItem} item Menu item to be removed.
*/
spark.components.ComboBox.prototype.removeItem = function(item) {
this.menu_.removeItem(item);
return this.items.splice(this.items.indexOf(item), 1);
};
/**
Removes an item at the index.
@export
@param {number} index Item index to be removed.
*/
spark.components.ComboBox.prototype.removeItemAt = function(index) {
this.menu_.removeItemAt(index);
return this.items.splice(index, 1);
};
/**
Returns the item at given index.
@export
@param {number} index Item index to be removed.
*/
spark.components.ComboBox.prototype.getItemAt = function(index) {
return this.items[index];
};
/**
Returns the item by given value.
@export
@param {string} value Item value to be checked to find the item instance.
*/
spark.components.ComboBox.prototype.getItemByValue = function(value) {
var menuItem;
menuItem = null;
this.getItems().forEach(function(item) {
if (item.getModel().value === value) {
return menuItem = item;
}
});
return menuItem;
};
/**
Returns components items.
@export
*/
spark.components.ComboBox.prototype.getItems = function() {
return this.items;
};
/**
Selects an item in the menu.
@export
@param {goog.ui.MenuItem} item Item to be selected.
*/
spark.components.ComboBox.prototype.selectItem = function(item) {
if (item instanceof goog.ui.MenuItem) {
return this.handleSelection_(item);
}
};
/**
Selects an item at the index.
@export
@param {number} index Index to be used to select item.
@return {goog.ui.MenuItem|undefined} Returns item or undefined.
*/
spark.components.ComboBox.prototype.selectItemAt = function(index) {
var item;
item = this.getItems()[index];
if (item) {
this.selectItem(item);
}
return item;
};
/**
Selects an item with the given menu.
@export
@param {string} value Value of the item to be selected.
@return {goog.ui.MenuItem|undefined} Returns item or undefined.
*/
spark.components.ComboBox.prototype.selectItemByValue = function(value) {
var item;
item = this.getItemByValue(value);
if (item) {
this.selectItem(item);
}
return item;
};
/**
Return combobox name from options.
@return {string|null} Name of the combobox.
*/
spark.components.ComboBox.prototype.getName = function() {
return this.options.name || null;
};
/**
Returns selected item's value.
@export
@return {string} Selected item value.
*/
spark.components.ComboBox.prototype.getValue = function() {
var value, valueField;
value = '';
if (this.selectedItem) {
valueField = this.getOptions().valueField;
value = this.selectedItem.getModel()[valueField];
}
return value;
};
/**
Set value to select an item. Uses `selectItemByValue`. `setValue` is
implemented because API should consistent with field components.
@export
@param {string} value Value of the item to be selected.
@return {goog.ui.MenuItem|undefined} Returns item or undefined.
*/
spark.components.ComboBox.prototype.setValue = function(value) {
return this.selectItemByValue(value);
};
/**
Returns selected item.
@export
@return {goog.ui.MenuItem|null} Selected item.
*/
spark.components.ComboBox.prototype.getSelectedItem = function() {
return this.selectedItem || null;
};
/**
Returns selected item data.
@export
@return {Object|null} Selected item data or null if not an item is selected.
*/
spark.components.ComboBox.prototype.getSelectedItemData = function() {
if (!this.selectedItem) {
return null;
}
return this.selectedItem.getModel();
};
/**
Returns an item data.
@export
@return {Object}
*/
spark.components.ComboBox.prototype.getItemData = function(item) {
return item.getModel();
};
/**
Returns title element.
@export
*/
spark.components.ComboBox.prototype.getTitle = function() {
return this.title;
};
/**
Shows menu.
@export
*/
spark.components.ComboBox.prototype.showMenu = function() {
this.isMenuVisible = true;
this.menu_.setVisible(true);
return this.addClass('menu-visible');
};
/**
Hide menu.
@export
*/
spark.components.ComboBox.prototype.hideMenu = function() {
this.isMenuVisible = false;
this.menu_.setVisible(false);
return this.removeClass('menu-visible');
};
/**
Toggles menu visibility.
@export
*/
spark.components.ComboBox.prototype.toggleMenu = function() {
if (this.isMenuVisible) {
return this.hideMenu();
} else {
return this.showMenu();
}
};
/**
Event types map
@enum {string}
*/
spark.components.ComboBox.EventTypes = {
SELECTED: 'selected'
};