opendaylight/web/root/src/main/resources/js/fuelux/combobox.js

   1 /*
   2  * Fuel UX Combobox
   3  * https://github.com/ExactTarget/fuelux
   4  *
   5  * Copyright (c) 2012 ExactTarget
   6  * Licensed under the MIT license.
   7  */
   8
   9 define(['require','jquery','./util'],function (require) {
  10
  11         var $ = require('jquery');
  12         require('./util');
  13
  14         // COMBOBOX CONSTRUCTOR AND PROTOTYPE
  15
  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');
  23
  24                 // set default selection
  25                 this.setDefaultSelection();
  26         };
  27
  28         Combobox.prototype = {
  29
  30                 constructor: Combobox,
  31
  32                 selectedItem: function () {
  33                         var item = this.$selectedItem;
  34                         var data = {};
  35
  36                         if (item) {
  37                                 var txt = this.$selectedItem.text();
  38                                 data = $.extend({ text: txt }, this.$selectedItem.data());
  39                         }
  40                         else {
  41                                 data = { text: this.$input.val()};
  42                         }
  43
  44                         return data;
  45                 },
  46
  47                 selectByText: function (text) {
  48                         var selector = 'li:fuelTextExactCI(' + text + ')';
  49                         this.selectBySelector(selector);
  50                 },
  51
  52                 selectByValue: function (value) {
  53                         var selector = 'li[data-value="' + value + '"]';
  54                         this.selectBySelector(selector);
  55                 },
  56
  57                 selectByIndex: function (index) {
  58                         // zero-based index
  59                         var selector = 'li:eq(' + index + ')';
  60                         this.selectBySelector(selector);
  61                 },
  62
  63                 selectBySelector: function (selector) {
  64                         var $item = this.$element.find(selector);
  65
  66                         if (typeof $item[0] !== 'undefined') {
  67                                 this.$selectedItem = $item;
  68                                 this.$input.val(this.$selectedItem.text());
  69                         }
  70                         else {
  71                                 this.$selectedItem = null;
  72                         }
  73                 },
  74
  75                 setDefaultSelection: function () {
  76                         var selector = 'li[data-selected=true]:first';
  77                         var item = this.$element.find(selector);
  78
  79                         if (item.length > 0) {
  80                                 // select by data-attribute
  81                                 this.selectBySelector(selector);
  82                                 item.removeData('selected');
  83                                 item.removeAttr('data-selected');
  84                         }
  85                 },
  86
  87                 enable: function () {
  88                         this.$input.removeAttr('disabled');
  89                         this.$button.removeClass('disabled');
  90                 },
  91
  92                 disable: function () {
  93                         this.$input.attr('disabled', true);
  94                         this.$button.addClass('disabled');
  95                 },
  96
  97                 itemclicked: function (e) {
  98                         this.$selectedItem = $(e.target).parent();
  99
 100                         // set input text and trigger input change event marked as synthetic
 101                         this.$input.val(this.$selectedItem.text()).trigger('change', { synthetic: true });
 102
 103                         // pass object including text and any data-attributes
 104                         // to onchange event
 105                         var data = this.selectedItem();
 106
 107                         // trigger changed event
 108                         this.$element.trigger('changed', data);
 109
 110                         e.preventDefault();
 111                 },
 112
 113                 inputchanged: function (e, extra) {
 114
 115                         // skip processing for internally-generated synthetic event
 116                         // to avoid double processing
 117                         if (extra && extra.synthetic) return;
 118
 119                         var val = $(e.target).val();
 120                         this.selectByText(val);
 121
 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 };
 127                         }
 128
 129                         // trigger changed event
 130                         this.$element.trigger('changed', data);
 131
 132                 }
 133
 134         };
 135
 136
 137         // COMBOBOX PLUGIN DEFINITION
 138
 139         $.fn.combobox = function (option, value) {
 140                 var methodReturn;
 141
 142                 var $set = this.each(function () {
 143                         var $this = $(this);
 144                         var data = $this.data('combobox');
 145                         var options = typeof option === 'object' && option;
 146
 147                         if (!data) $this.data('combobox', (data = new Combobox(this, options)));
 148                         if (typeof option === 'string') methodReturn = data[option](value);
 149                 });
 150
 151                 return (methodReturn === undefined) ? $set : methodReturn;
 152         };
 153
 154         $.fn.combobox.defaults = {};
 155
 156         $.fn.combobox.Constructor = Combobox;
 157
 158
 159         // COMBOBOX DATA-API
 160
 161         $(function () {
 162
 163                 $(window).on('load', function () {
 164                         $('.combobox').each(function () {
 165                                 var $this = $(this);
 166                                 if ($this.data('combobox')) return;
 167                                 $this.combobox($this.data());
 168                         });
 169                 });
 170
 171                 $('body').on('mousedown.combobox.data-api', '.combobox', function (e) {
 172                         var $this = $(this);
 173                         if ($this.data('combobox')) return;
 174                         $this.combobox($this.data());
 175                 });
 176         });
 177
 178 });