opendaylight/adsal/web/root/src/main/resources/js/fuelux/select.js

   1 /*
   2  * Fuel UX Select
   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     // SELECT CONSTRUCTOR AND PROTOTYPE
  15
  16     var Select = function (element, options) {
  17         this.$element = $(element);
  18         this.options = $.extend({}, $.fn.select.defaults, options);
  19         this.$element.on('click', 'a', $.proxy(this.itemclicked, this));
  20         this.$button = this.$element.find('.btn');
  21         this.$label = this.$element.find('.dropdown-label');
  22         this.setDefaultSelection();
  23
  24         if (options.resize === 'auto') {
  25             this.resize();
  26         }
  27     };
  28
  29     Select.prototype = {
  30
  31         constructor: Select,
  32
  33         itemclicked: function (e) {
  34             this.$selectedItem = $(e.target).parent();
  35             this.$label.text(this.$selectedItem.text());
  36
  37             // pass object including text and any data-attributes
  38             // to onchange event
  39             var data = this.selectedItem();
  40
  41             // trigger changed event
  42             this.$element.trigger('changed', data);
  43
  44             e.preventDefault();
  45         },
  46
  47         resize: function() {
  48             var el = $('#selectTextSize')[0];
  49
  50             // create element if it doesn't exist
  51             // used to calculate the length of the longest string
  52             if(!el) {
  53                 $('<div/>').attr({id:'selectTextSize'}).appendTo('body');
  54             }
  55
  56             var width = 0;
  57             var newWidth = 0;
  58
  59             // iterate through each item to find longest string
  60             this.$element.find('a').each(function () {
  61                 var $this = $(this);
  62                 var txt = $this.text();
  63                 var $txtSize = $('#selectTextSize');
  64                 $txtSize.text(txt);
  65                 newWidth = $txtSize.outerWidth();
  66                 if(newWidth > width) {
  67                     width = newWidth;
  68                 }
  69             });
  70
  71             this.$label.width(width);
  72         },
  73
  74         selectedItem: function() {
  75             var txt = this.$selectedItem.text();
  76             return $.extend({ text: txt }, this.$selectedItem.data());
  77         },
  78
  79         selectByText: function(text) {
  80             var selector = 'li a:fuelTextExactCI(' + text + ')';
  81             this.selectBySelector(selector);
  82         },
  83
  84         selectByValue: function(value) {
  85             var selector = 'li[data-value="' + value + '"]';
  86             this.selectBySelector(selector);
  87         },
  88
  89         selectByIndex: function(index) {
  90             // zero-based index
  91             var selector = 'li:eq(' + index + ')';
  92             this.selectBySelector(selector);
  93         },
  94
  95         selectBySelector: function(selector) {
  96             var item = this.$element.find(selector);
  97
  98             this.$selectedItem = item;
  99             this.$label.text(this.$selectedItem.text());
 100         },
 101
 102         setDefaultSelection: function() {
 103             var selector = 'li[data-selected=true]:first';
 104             var item = this.$element.find(selector);
 105             if(item.length === 0) {
 106                 // select first item
 107                 this.selectByIndex(0);
 108             }
 109             else {
 110                 // select by data-attribute
 111                 this.selectBySelector(selector);
 112                 item.removeData('selected');
 113                 item.removeAttr('data-selected');
 114             }
 115         },
 116
 117         enable: function() {
 118             this.$button.removeClass('disabled');
 119         },
 120
 121         disable: function() {
 122             this.$button.addClass('disabled');
 123         }
 124
 125     };
 126
 127
 128     // SELECT PLUGIN DEFINITION
 129
 130     $.fn.select = function (option,value) {
 131         var methodReturn;
 132
 133         var $set = this.each(function () {
 134             var $this = $(this);
 135             var data = $this.data('select');
 136             var options = typeof option === 'object' && option;
 137
 138             if (!data) $this.data('select', (data = new Select(this, options)));
 139             if (typeof option === 'string') methodReturn = data[option](value);
 140         });
 141
 142         return (methodReturn === undefined) ? $set : methodReturn;
 143     };
 144
 145     $.fn.select.defaults = {};
 146
 147     $.fn.select.Constructor = Select;
 148
 149
 150     // SELECT DATA-API
 151
 152     $(function () {
 153
 154         $(window).on('load', function () {
 155             $('.select').each(function () {
 156                 var $this = $(this);
 157                 if ($this.data('select')) return;
 158                 $this.select($this.data());
 159             });
 160         });
 161
 162         $('body').on('mousedown.select.data-api', '.select', function (e) {
 163             var $this = $(this);
 164             if ($this.data('select')) return;
 165             $this.select($this.data());
 166         });
 167     });
 168
 169 });