3 * https://github.com/ExactTarget/fuelux
5 * Copyright (c) 2012 ExactTarget
6 * Licensed under the MIT license.
9 define(['require','jquery','./util'],function (require) {
11 var $ = require('jquery');
14 // COMBOBOX CONSTRUCTOR AND PROTOTYPE
16 var Combobox = function (element, options) {
17 this.$element = $(element);
18 this.options = $.extend({}, $.fn.combobox.defaults, options);
19 this.$element.on('click', 'a', $.proxy(this.itemclicked, this));
20 this.$element.on('change', 'input', $.proxy(this.inputchanged, this));
21 this.$input = this.$element.find('input');
22 this.$button = this.$element.find('.btn');
24 // set default selection
25 this.setDefaultSelection();
28 Combobox.prototype = {
30 constructor: Combobox,
32 selectedItem: function () {
33 var item = this.$selectedItem;
37 var txt = this.$selectedItem.text();
38 data = $.extend({ text: txt }, this.$selectedItem.data());
41 data = { text: this.$input.val()};
47 selectByText: function (text) {
48 var selector = 'li:fuelTextExactCI(' + text + ')';
49 this.selectBySelector(selector);
52 selectByValue: function (value) {
53 var selector = 'li[data-value="' + value + '"]';
54 this.selectBySelector(selector);
57 selectByIndex: function (index) {
59 var selector = 'li:eq(' + index + ')';
60 this.selectBySelector(selector);
63 selectBySelector: function (selector) {
64 var $item = this.$element.find(selector);
66 if (typeof $item[0] !== 'undefined') {
67 this.$selectedItem = $item;
68 this.$input.val(this.$selectedItem.text());
71 this.$selectedItem = null;
75 setDefaultSelection: function () {
76 var selector = 'li[data-selected=true]:first';
77 var item = this.$element.find(selector);
79 if (item.length > 0) {
80 // select by data-attribute
81 this.selectBySelector(selector);
82 item.removeData('selected');
83 item.removeAttr('data-selected');
88 this.$input.removeAttr('disabled');
89 this.$button.removeClass('disabled');
92 disable: function () {
93 this.$input.attr('disabled', true);
94 this.$button.addClass('disabled');
97 itemclicked: function (e) {
98 this.$selectedItem = $(e.target).parent();
100 // set input text and trigger input change event marked as synthetic
101 this.$input.val(this.$selectedItem.text()).trigger('change', { synthetic: true });
103 // pass object including text and any data-attributes
105 var data = this.selectedItem();
107 // trigger changed event
108 this.$element.trigger('changed', data);
113 inputchanged: function (e, extra) {
115 // skip processing for internally-generated synthetic event
116 // to avoid double processing
117 if (extra && extra.synthetic) return;
119 var val = $(e.target).val();
120 this.selectByText(val);
122 // find match based on input
123 // if no match, pass the input value
124 var data = this.selectedItem();
125 if (data.text.length === 0) {
126 data = { text: val };
129 // trigger changed event
130 this.$element.trigger('changed', data);
137 // COMBOBOX PLUGIN DEFINITION
139 $.fn.combobox = function (option, value) {
142 var $set = this.each(function () {
144 var data = $this.data('combobox');
145 var options = typeof option === 'object' && option;
147 if (!data) $this.data('combobox', (data = new Combobox(this, options)));
148 if (typeof option === 'string') methodReturn = data[option](value);
151 return (methodReturn === undefined) ? $set : methodReturn;
154 $.fn.combobox.defaults = {};
156 $.fn.combobox.Constructor = Combobox;
163 $(window).on('load', function () {
164 $('.combobox').each(function () {
166 if ($this.data('combobox')) return;
167 $this.combobox($this.data());
171 $('body').on('mousedown.combobox.data-api', '.combobox', function (e) {
173 if ($this.data('combobox')) return;
174 $this.combobox($this.data());