xp-dev.com Git - namibia/blob - public/js/vendor/bootstrap-select.js

   1 !function($) {
   2
   3         "use strict";
   4
   5     var Selectpicker = function(element, options, e) {
   6         if (e) {
   7                 try {
   8             e.stopPropagation();
   9             e.preventDefault();
  10                 } catch(e) {}
  11         }
  12         this.$element = $(element);
  13         this.$newElement = null;
  14         this.button = null;
  15
  16         //Merge defaults, options and data-attributes to make our options
  17         this.options = $.extend({}, $.fn.selectpicker.defaults, this.$element.data(), typeof options == 'object' && options);
  18
  19         //If we have no title yet, check the attribute 'title' (this is missed by jq as its not a data-attribute
  20         if(this.options.title==null)
  21             this.options.title = this.$element.attr('title');
  22
  23         //Expose public methods
  24         this.val = Selectpicker.prototype.val;
  25         this.render = Selectpicker.prototype.render;
  26         this.refresh = Selectpicker.prototype.refresh;
  27         this.selectAll = Selectpicker.prototype.selectAll;
  28         this.deselectAll = Selectpicker.prototype.deselectAll;
  29         this.init();
  30     };
  31
  32     Selectpicker.prototype = {
  33
  34         constructor: Selectpicker,
  35
  36         init: function (e) {
  37             if (!this.options.container) {
  38                 this.$element.hide();
  39             } else {
  40                 this.$element.css('visibility','hidden');
  41             };
  42             this.multiple = this.$element.prop('multiple');
  43             var classList = this.$element.attr('class') !== undefined ? this.$element.attr('class').split(/\s+/) : '';
  44             var id = this.$element.attr('id');
  45             this.$element.after( this.createView() );
  46             this.$newElement = this.$element.next('.bootstrap-select');
  47             if (this.options.container) {
  48                 this.selectPosition();
  49             }
  50             this.button = this.$newElement.find('> button');
  51             if (id !== undefined) {
  52                 var _this = this;
  53                 this.button.attr('data-id', id);
  54                 $('label[for="' + id + '"]').click(function(){
  55                     _this.$newElement.find('button[data-id='+id+']').focus();
  56                 })
  57             }
  58             for (var i = 0; i < classList.length; i++) {
  59                 if(classList[i] != 'selectpicker') {
  60                     this.$newElement.addClass(classList[i]);
  61                 }
  62             }
  63             //If we are multiple, then add the show-tick class by default
  64             if(this.multiple) {
  65                  this.$newElement.addClass('show-tick');
  66             }
  67             this.button.addClass(this.options.style);
  68             this.checkDisabled();
  69             this.checkTabIndex();
  70             this.clickListener();
  71
  72             this.render();
  73             this.setSize();
  74         },
  75
  76         createDropdown: function() {
  77             var drop =
  78                 "<div class='btn-group bootstrap-select'>" +
  79                     "<button type='button' class='btn dropdown-toggle' data-toggle='dropdown'>" +
  80                         "<div class='filter-option pull-left'></div>&nbsp;" +
  81                         "<div class='caret'></div>" +
  82                     "</button>" +
  83                     "<ul class='dropdown-menu' role='menu'>" +
  84                     "</ul>" +
  85                 "</div>";
  86
  87             return $(drop);
  88         },
  89
  90
  91         createView: function() {
  92             var $drop = this.createDropdown();
  93             var $li = this.createLi();
  94             $drop.find('ul').append($li);
  95             return $drop;
  96         },
  97
  98         reloadLi: function() {
  99             //Remove all children.
 100             this.destroyLi();
 101             //Re build
 102             var $li = this.createLi();
 103             this.$newElement.find('ul').append( $li );
 104         },
 105
 106         destroyLi:function() {
 107             this.$newElement.find('li').remove();
 108         },
 109
 110         createLi: function() {
 111
 112             var _this = this;
 113             var _li = [];
 114             var _liA = [];
 115             var _liHtml = '';
 116
 117             this.$element.find('option').each(function(){
 118                 _li.push($(this).text());
 119             });
 120
 121             this.$element.find('option').each(function(index) {
 122                 var $this = $(this);
 123
 124                 //Get the class and text for the option
 125                 var optionClass = $this.attr("class") !== undefined ? $this.attr("class") : '';
 126                 var text =  $this.text();
 127                 var subtext = $this.data('subtext') !== undefined ? '<small class="muted">'+$this.data('subtext')+'</small>' : '';
 128                 var icon = $this.data('icon') !== undefined ? '<i class="'+$this.data('icon')+'"></i> ' : '';
 129                 if ($this.is(':disabled') || $this.parent().is(':disabled')) {
 130                     icon = '<span>'+icon+'</span>';
 131                 }
 132
 133                 //Prepend any icon and append any subtext to the main text.
 134                  text = icon + '<span class="text">' + text + subtext + '</span>';
 135
 136                 if (_this.options.hideDisabled && ($this.is(':disabled') || $this.parent().is(':disabled'))) {
 137                     _liA.push('<a style="min-height: 0; padding: 0"></a>');
 138                 } else if ($this.parent().is('optgroup') && $this.data('divider') != true) {
 139                     if ($this.index() == 0) {
 140                         //Get the opt group label
 141                         var label = $this.parent().attr('label');
 142                         var labelSubtext = $this.parent().data('subtext') !== undefined ? '<small class="muted">'+$this.parent().data('subtext')+'</small>' : '';
 143                         var labelIcon = $this.parent().data('icon') ? '<i class="'+$this.parent().data('icon')+'"></i> ' : '';
 144                         label = labelIcon + '<span class="text">' + label + labelSubtext + '</span>';
 145
 146                         if ($this[0].index != 0) {
 147                             _liA.push(
 148                                 '<div class="div-contain"><div class="divider"></div></div>'+
 149                                 '<dt>'+label+'</dt>'+
 150                                 _this.createA(text, "opt " + optionClass )
 151                                 );
 152                         } else {
 153                             _liA.push(
 154                                 '<dt>'+label+'</dt>'+
 155                                 _this.createA(text, "opt " + optionClass ));
 156                         }
 157                     } else {
 158                          _liA.push( _this.createA(text, "opt " + optionClass )  );
 159                     }
 160                 } else if ($this.data('divider') == true) {
 161                     _liA.push('<div class="div-contain"><div class="divider"></div></div>');
 162                 } else if ($(this).data('hidden') == true) {
 163                     _liA.push('');
 164                 } else {
 165                     _liA.push( _this.createA(text, optionClass ) );
 166                 }
 167             });
 168
 169             if (_li.length > 0) {
 170                 for (var i = 0; i < _li.length; i++) {
 171                     var $option = this.$element.find('option').eq(i);
 172                     _liHtml += "<li rel=" + i + ">" + _liA[i] + "</li>";
 173                 }
 174             }
 175
 176             //If we are not multiple, and we dont have a selected item, and we dont have a title, select the first element so something is set in the button
 177             if(!this.multiple && this.$element.find('option:selected').length==0 && !_this.options.title) {
 178                 this.$element.find('option').eq(0).prop('selected', true).attr('selected', 'selected');
 179             }
 180
 181             return $(_liHtml);
 182         },
 183
 184         createA:function(text, classes) {
 185          return '<a tabindex="0" class="'+classes+'">' +
 186                  text +
 187                  '<i class="icon-ok check-mark"></i>' +
 188                  '</a>';
 189         },
 190
 191         render:function() {
 192             var _this = this;
 193
 194             //Update the LI to match the SELECT
 195             this.$element.find('option').each(function(index) {
 196                _this.setDisabled(index, $(this).is(':disabled') || $(this).parent().is(':disabled') );
 197                _this.setSelected(index, $(this).is(':selected') );
 198             });
 199
 200             var selectedItems = this.$element.find('option:selected').map(function(index,value) {
 201                 var subtext;
 202                 if (_this.options.showSubtext && $(this).attr('data-subtext') && !_this.multiple) {
 203                     subtext = ' <small class="muted">'+$(this).data('subtext') +'</small>';
 204                 } else {
 205                     subtext = '';
 206                 }
 207                 if($(this).attr('title')!=undefined) {
 208                     return $(this).attr('title');
 209                 } else {
 210                     return $(this).text() + subtext;
 211                 }
 212             }).toArray();
 213
 214             //Fixes issue in IE10 occurring when no default option is selected and at least one option is disabled
 215             //Convert all the values into a comma delimited string
 216             var title = !this.multiple ? selectedItems[0] : selectedItems.join(", "),
 217                 separator = _this.options.separatorText || _this.options.defaultSeparatorText,
 218                 selected = _this.options.selectedText || _this.options.defaultSelectedText;
 219
 220             //If this is multi select, and the selectText type is count, the show 1 of 2 selected etc..
 221             if(_this.multiple && _this.options.selectedTextFormat.indexOf('count') > -1) {
 222                 var max = _this.options.selectedTextFormat.split(">");
 223                 var notDisabled = this.options.hideDisabled ? ':not([disabled])' : '';
 224                 if( (max.length>1 && selectedItems.length > max[1]) || (max.length==1 && selectedItems.length>=2)) {
 225                     title = selectedItems.length +' ' + separator +' ' + this.$element.find('option:not([data-divider="true"]):not([data-hidden="true"])'+notDisabled).length + ' ' + selected;
 226                 }
 227              }
 228
 229             //If we dont have a title, then use the default, or if nothing is set at all, use the not selected text
 230             if(!title) {
 231                 title = _this.options.title != undefined ? _this.options.title : _this.options.noneSelectedText;
 232             }
 233
 234             var subtext;
 235             if (this.options.showSubtext && this.$element.find('option:selected').attr('data-subtext')) {
 236                 subtext = ' <small class="muted">'+this.$element.find('option:selected').data('subtext') +'</small>';
 237             } else {
 238                 subtext = '';
 239             }
 240
 241             var icon = this.$element.find('option:selected').data('icon') || '';
 242             if(icon.length) {
 243                 icon = '<i class="' + icon + '"></i> ';
 244             }
 245
 246             _this.$newElement.find('.filter-option').html(icon + title + subtext);
 247         },
 248
 249         setSize:function() {
 250                 if(this.options.container) {
 251                         // Show $newElement before perfoming size calculations
 252                         this.$newElement.toggle(this.$element.parent().is(':visible'));
 253                 }
 254                 var _this = this;
 255             var menu = this.$newElement.find('.dropdown-menu');
 256             var menuA = menu.find('li > a');
 257             var liHeight = this.$newElement.addClass('open').find('.dropdown-menu li > a').outerHeight();
 258             this.$newElement.removeClass('open');
 259             var divHeight = menu.find('li .divider').outerHeight(true);
 260             var selectOffset_top = this.$newElement.offset().top;
 261             var selectHeight = this.$newElement.outerHeight();
 262             var menuPadding = parseInt(menu.css('padding-top')) + parseInt(menu.css('padding-bottom')) + parseInt(menu.css('border-top-width')) + parseInt(menu.css('border-bottom-width'));
 263             var notDisabled = this.options.hideDisabled ? ':not(.disabled)' : '';
 264                 var menuHeight;
 265             if (this.options.size == 'auto') {
 266                 var getSize = function() {
 267                     var selectOffset_top_scroll = selectOffset_top - $(window).scrollTop();
 268                     var windowHeight = window.innerHeight;
 269                     var menuExtras = menuPadding + parseInt(menu.css('margin-top')) + parseInt(menu.css('margin-bottom')) + 2;
 270                     var selectOffset_bot = windowHeight - selectOffset_top_scroll - selectHeight - menuExtras;
 271                         var minHeight;
 272                     menuHeight = selectOffset_bot;
 273                     if (_this.$newElement.hasClass('dropup')) {
 274                         menuHeight = selectOffset_top_scroll - menuExtras;
 275                     }
 276                     if ((menu.find('li').length + menu.find('dt').length) > 3) {
 277                         minHeight = liHeight*3 + menuExtras - 2;
 278                     } else {
 279                         minHeight = 0;
 280                     }
 281                     menu.css({'max-height' : menuHeight + 'px', 'overflow-y' : 'auto', 'min-height' : minHeight + 'px'});
 282             }
 283                 getSize();
 284                 $(window).resize(getSize);
 285                 $(window).scroll(getSize);
 286             } else if (this.options.size && this.options.size != 'auto' && menu.find('li'+notDisabled).length > this.options.size) {
 287                 var optIndex = menu.find("li"+notDisabled+" > *").filter(':not(.div-contain)').slice(0,this.options.size).last().parent().index();
 288                 var divLength = menu.find("li").slice(0,optIndex + 1).find('.div-contain').length;
 289                 menuHeight = liHeight*this.options.size + divLength*divHeight + menuPadding;
 290                 menu.css({'max-height' : menuHeight + 'px', 'overflow-y' : 'auto'});
 291             }
 292
 293             //Set width of select
 294             if (this.options.width == 'auto') {
 295                     this.$newElement.find('.dropdown-menu').css('min-width','0');
 296                 var ulWidth = this.$newElement.find('.dropdown-menu').css('width');
 297                 this.$newElement.css('width',ulWidth);
 298                 if (this.options.container) {
 299                     this.$element.css('width',ulWidth);
 300                 }
 301             } else if (this.options.width) {
 302                 if (this.options.container) {
 303                         // Note: options.width can be %
 304                     this.$element.css('width', this.options.width);
 305                         // Set pixel width of $newElement based on $element's pixel width
 306                         this.$newElement.width(this.$element.outerWidth());
 307                 } else {
 308                         this.$newElement.css('width',this.options.width);
 309                 }
 310             } else if(this.options.container) {
 311                     // Set width of $newElement based on $element
 312                     this.$newElement.width(this.$element.outerWidth());
 313             }
 314         },
 315
 316         selectPosition:function() {
 317                 var containerOffset = $(this.options.container).offset();
 318                 var eltOffset = this.$element.offset();
 319                 if(containerOffset && eltOffset) {
 320                         var selectElementTop = eltOffset.top - containerOffset.top;
 321                         var selectElementLeft = eltOffset.left - containerOffset.left;
 322                         this.$newElement.appendTo(this.options.container);
 323                         this.$newElement.css({'position':'absolute', 'top':selectElementTop+'px', 'left':selectElementLeft+'px'});
 324                 }
 325         },
 326
 327         refresh:function() {
 328             this.reloadLi();
 329             this.render();
 330             this.setSize();
 331             this.checkDisabled();
 332             if (this.options.container) {
 333                 this.selectPosition();
 334             }
 335         },
 336
 337         setSelected:function(index, selected) {
 338             if(selected) {
 339                 this.$newElement.find('li').eq(index).addClass('selected');
 340             } else {
 341                 this.$newElement.find('li').eq(index).removeClass('selected');
 342             }
 343         },
 344
 345         setDisabled:function(index, disabled) {
 346             if(disabled) {
 347                 this.$newElement.find('li').eq(index).addClass('disabled').find('a').attr('href','#').attr('tabindex',-1);
 348             } else {
 349                 this.$newElement.find('li').eq(index).removeClass('disabled').find('a').removeAttr('href').attr('tabindex',0);
 350             }
 351         },
 352
 353         isDisabled: function() {
 354                 return this.$element.is(':disabled') || this.$element.attr('readonly');
 355         },
 356
 357         checkDisabled: function() {
 358             if (this.isDisabled()) {
 359                 this.button.addClass('disabled');
 360                 this.button.click(function(e) {
 361                     e.preventDefault();
 362                 });
 363                 this.button.attr('tabindex','-1');
 364             } else if (!this.isDisabled() && this.button.hasClass('disabled')) {
 365                 this.button.removeClass('disabled');
 366                 this.button.click(function() {
 367                     return true;
 368                 });
 369                 this.button.removeAttr('tabindex');
 370             }
 371         },
 372
 373         checkTabIndex: function() {
 374             if (this.$element.is('[tabindex]')) {
 375                 var tabindex = this.$element.attr("tabindex");
 376                 this.button.attr('tabindex', tabindex);
 377             }
 378         },
 379
 380         clickListener: function() {
 381             var _this = this;
 382
 383             $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
 384
 385             this.$newElement.on('click', 'li a', function(e){
 386                 var clickedIndex = $(this).parent().index(),
 387                     $this = $(this).parent(),
 388                     $select = $this.parents('.bootstrap-select'),
 389                     prevValue = _this.$element.val();
 390
 391                 //Dont close on multi choice menu
 392                 if(_this.multiple) {
 393                     e.stopPropagation();
 394                 }
 395
 396                 e.preventDefault();
 397
 398                 //Dont run if we have been disabled
 399                 if (_this.$element.not(':disabled') && !$(this).parent().hasClass('disabled')){
 400                     //Deselect all others if not multi select box
 401                     if (!_this.multiple) {
 402                         _this.$element.find('option').prop('selected', false);
 403                         _this.$element.find('option').eq(clickedIndex).prop('selected', true);
 404                     }
 405                     //Else toggle the one we have chosen if we are multi select.
 406                     else {
 407                         var selected = _this.$element.find('option').eq(clickedIndex).prop('selected');
 408
 409                         if(selected) {
 410                             _this.$element.find('option').eq(clickedIndex).prop('selected', false);
 411                         } else {
 412                             _this.$element.find('option').eq(clickedIndex).prop('selected', true);
 413                         }
 414                     }
 415
 416                     $select.find('button').focus();
 417
 418                     // Trigger select 'change'
 419                     if (prevValue != _this.$element.val()) {
 420                         _this.$element.trigger('change');
 421                     }
 422
 423                     _this.render();
 424                 }
 425
 426             });
 427
 428            this.$newElement.on('click', 'li.disabled a, li dt, li .div-contain', function(e) {
 429                 e.preventDefault();
 430                 e.stopPropagation();
 431                 var $select = $(this).parent().parents('.bootstrap-select');
 432                 $select.find('button').focus();
 433             });
 434
 435             this.$element.on('change', function(e) {
 436                 _this.render();
 437             });
 438         },
 439
 440         val:function(value) {
 441
 442             if(value!=undefined) {
 443                 this.$element.val( value );
 444
 445                 this.$element.trigger('change');
 446                 return this.$element;
 447             } else {
 448                 return this.$element.val();
 449             }
 450         },
 451
 452         selectAll:function() {
 453             this.$element.find('option').prop('selected', true).attr('selected', 'selected');
 454             this.render();
 455         },
 456
 457         deselectAll:function() {
 458             this.$element.find('option').prop('selected', false).removeAttr('selected');
 459             this.render();
 460         },
 461
 462         keydown: function (e) {
 463             var $this,
 464                 $items,
 465                 $parent,
 466                 index,
 467                 next,
 468                 first,
 469                 last,
 470                 prev,
 471                 nextPrev
 472
 473             $this = $(this);
 474
 475             $parent = $this.parent();
 476
 477             $items = $('[role=menu] li:not(.divider):visible a', $parent);
 478
 479             if (!$items.length) return;
 480
 481             if (/(38|40)/.test(e.keyCode)) {
 482
 483                 index = $items.index($items.filter(':focus'));
 484
 485                 first = $items.parent(':not(.disabled)').first().index();
 486                 last = $items.parent(':not(.disabled)').last().index();
 487                 next = $items.eq(index).parent().nextAll(':not(.disabled)').eq(0).index();
 488                 prev = $items.eq(index).parent().prevAll(':not(.disabled)').eq(0).index();
 489                 nextPrev = $items.eq(next).parent().prevAll(':not(.disabled)').eq(0).index();
 490
 491                 if (e.keyCode == 38) {
 492                     if (index != nextPrev && index > prev) index = prev;
 493                     if (index < first) index = first;
 494                 }
 495
 496                 if (e.keyCode == 40) {
 497                     if (index != nextPrev && index < next) index = next;
 498                     if (index > last) index = last;
 499                 }
 500
 501                 $items.eq(index).focus()
 502             } else {
 503                 var keyCodeMap = {
 504                     48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";",
 505                     65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l",
 506                     77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z",
 507                     96:"0", 97:"1", 98:"2", 99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 104:"8", 105:"9"
 508                 }
 509
 510                 var keyIndex = [];
 511
 512                 $items.each(function() {
 513                     if ($(this).parent().is(':not(.disabled)')) {
 514                         if ($.trim($(this).text().toLowerCase()).substring(0,1) == keyCodeMap[e.keyCode]) {
 515                             keyIndex.push($(this).parent().index());
 516                         }
 517                     }
 518                 });
 519
 520                 var count = $(document).data('keycount');
 521                 count++;
 522                 $(document).data('keycount',count);
 523
 524                 var prevKey = $.trim($(':focus').text().toLowerCase()).substring(0,1);
 525
 526                 if (prevKey != keyCodeMap[e.keyCode]) {
 527                     count = 1;
 528                     $(document).data('keycount',count);
 529                 } else if (count >= keyIndex.length) {
 530                     $(document).data('keycount',0);
 531                 }
 532
 533                 $items.eq(keyIndex[count - 1]).focus();
 534             }
 535
 536             if (/(13)/.test(e.keyCode)) {
 537                 $(':focus').click();
 538                 $parent.addClass('open');
 539                 $(document).data('keycount',0);
 540             }
 541         }
 542     };
 543
 544     $.fn.selectpicker = function(option, event) {
 545        //get the args of the outer function..
 546        var args = arguments;
 547        var value;
 548        var chain = this.each(function () {
 549             if ($(this).is('select')) {
 550                 var $this = $(this),
 551                     data = $this.data('selectpicker'),
 552                     options = typeof option == 'object' && option;
 553
 554                 if (!data) {
 555                     $this.data('selectpicker', (data = new Selectpicker(this, options, event)));
 556                 } else if(options){
 557                     for(var i in options) {
 558                        data.options[i]=options[i];
 559                     }
 560                 }
 561
 562                 if (typeof option == 'string') {
 563                     //Copy the value of option, as once we shift the arguments
 564                     //it also shifts the value of option.
 565                     var property = option;
 566                     if(data[property] instanceof Function) {
 567                         [].shift.apply(args);
 568                         value = data[property].apply(data, args);
 569                     } else {
 570                         value = data.options[property];
 571                     }
 572                 }
 573             }
 574         });
 575
 576         if(value!=undefined) {
 577             return value;
 578         } else {
 579             return chain;
 580         }
 581     };
 582
 583     $.fn.selectpicker.defaults = {
 584         style: null,
 585         size: 'auto',
 586         title: null,
 587         selectedTextFormat : 'values',
 588         noneSelectedText : 'Nothing selected',
 589         defaultSelectedText: 'selected',
 590         defaultSeparatorText: 'of',
 591         width: null,
 592         container: false,
 593         hideDisabled: false,
 594         showSubtext: false
 595     }
 596
 597     $(document)
 598         .data('keycount',0)
 599         .on('keydown', '[data-toggle=dropdown], [role=menu]' , Selectpicker.prototype.keydown)
 600
 601 }(window.jQuery);