1/*! 2 * jquery.sumoselect - v3.0.2 3 * http://hemantnegi.github.io/jquery.sumoselect 4 * 2014-04-08 5 * 6 * Copyright 2015 Hemant Negi 7 * Email : [email protected] 8 * Compressor http://refresh-sf.com/ 9 */ 10 11(function ($) { 12 13 'namespace sumo'; 14 $.fn.SumoSelect = function (options) { 15 16 // This is the easiest way to have default options. 17 var settings = $.extend({ 18 placeholder: 'Select Here', // Dont change it here. 19 csvDispCount: 3, // display no. of items in multiselect. 0 to display all. 20 captionFormat:'{0} Selected', // format of caption text. you can set your locale. 21 captionFormatAllSelected:'{0} all selected!', // format of caption text when all elements are selected. set null to use captionFormat. It will not work if there are disabled elements in select. 22 floatWidth: 400, // Screen width of device at which the list is rendered in floating popup fashion. 23 forceCustomRendering: false, // force the custom modal on all devices below floatWidth resolution. 24 nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'], // 25 outputAsCSV: false, // true to POST data as csv ( false for Html control array ie. default select ) 26 csvSepChar: ',', // separation char in csv mode 27 okCancelInMulti: false, // display ok cancel buttons in desktop mode multiselect also. 28 triggerChangeCombined: true, // im multi select mode wether to trigger change event on individual selection or combined selection. 29 selectAll: false, // to display select all button in multiselect mode.|| also select all will not be available on mobile devices. 30 31 search: false, // to display input for filtering content. selectAlltext will be input text placeholder 32 searchText: 'Search...', // placeholder for search input 33 noMatch: 'No matches for "{0}"', 34 prefix: '', // some prefix usually the field name. eg. '<b>Hello</b>' 35 locale: ['OK', 'Cancel', 'Select All'], // all text that is used. don't change the index. 36 up: false // set true to open upside. 37 }, options); 38 39 var ret = this.each(function () { 40 var selObj = this; // the original select object. 41 if (this.sumo || !$(this).is('select')) return; //already initialized 42 43 this.sumo = { 44 E: $(selObj), //the jquery object of original select element. 45 is_multi: $(selObj).attr('multiple'), //if its a multiple select 46 select: '', 47 caption: '', 48 placeholder: '', 49 optDiv: '', 50 CaptionCont: '', 51 ul:'', 52 is_floating: false, 53 is_opened: false, 54 //backdrop: '', 55 mob:false, // if to open device default select 56 Pstate: [], 57 58 createElems: function () { 59 var O = this; 60 O.E.wrap('<div class="SumoSelect" tabindex="0">'); 61 O.select = O.E.parent(); 62 O.caption = $('<span>'); 63 O.CaptionCont = $('<p class="CaptionCont"><label><i></i></label></p>').addClass('SelectBox').attr('style', O.E.attr('style')).prepend(O.caption); 64 O.select.append(O.CaptionCont); 65 66 // default turn off if no multiselect 67 if(!O.is_multi)settings.okCancelInMulti = false 68 69 if(O.E.attr('disabled')) 70 O.select.addClass('disabled').removeAttr('tabindex'); 71 72 //if output as csv and is a multiselect. 73 if (settings.outputAsCSV && O.is_multi && O.E.attr('name')) { 74 //create a hidden field to store csv value. 75 O.select.append($('<input class="HEMANT123" type="hidden" />').attr('name', O.E.attr('name')).val(O.getSelStr())); 76 77 // so it can not post the original select. 78 O.E.removeAttr('name'); 79 } 80 81 //break for mobile rendring.. if forceCustomRendering is false
82 if (O.isMobile() && !settings.forceCustomRendering) { 83 O.setNativeMobile(); 84 return; 85 } 86 87 // if there is a name attr in select add a class to container div 88 if(O.E.attr('name')) O.select.addClass('sumo_'+O.E.attr('name')) 89 90 //hide original select 91 O.E.addClass('SumoUnder').attr('tabindex','-1'); 92 93 //## Creating the list... 94 O.optDiv = $('<div class="optWrapper '+ (settings.up?'up':'') +'">'); 95 96 //branch for floating list in low res devices. 97 O.floatingList(); 98 99 //Creating the markup for the available options 100 O.ul = $('<ul class="options">'); 101 O.optDiv.append(O.ul); 102 103 // Select all functionality 104 if(settings.selectAll) O.SelAll(); 105 106 // search functionality 107 if(settings.search) O.Search(); 108 109 O.ul.append(O.prepItems(O.E.children())); 110 111 //if multiple then add the class multiple and add OK / CANCEL button 112 if (O.is_multi) O.multiSelelect(); 113 114 O.select.append(O.optDiv); 115 O.basicEvents(); 116 O.selAllState(); 117 }, 118 119 prepItems: function(opts, d){ 120 var lis = [], O=this; 121 $(opts).each(function (i, opt) { // parsing options to li 122 opt = $(opt); 123 lis.push(opt.is('optgroup')? 124 $('<li class="group '+ (opt[0].disabled?'disabled':'') +'"><label>' + opt.attr('label') +'</label><ul></ul><li>') 125 .find('ul') 126 .append(O.prepItems(opt.children(), opt[0].disabled)) 127 .end() 128 : 129 O.createLi(opt, d) 130 ); 131 }); 132 return lis; 133 }, 134 135 //## Creates a LI element from a given option and binds events to it 136 //## returns the jquery instance of li (not inserted in dom) 137 createLi: function (opt, d) { 138 var O = this; 139 140 if(!opt.attr('value'))opt.attr('value',opt.val()); 141 // todo: remove this data val 142 li = $('<li class="opt"><label>' + opt.text() + '</label></li>');//.data('val',opt.val()); 143 li.data('opt', opt); // store a direct reference to option. 144 opt.data('li', li); // store a direct reference to list item. 145 if (O.is_multi) li.prepend('<span><i></i></span>'); 146 147 if (opt[0].disabled || d) 148 li = li.addClass('disabled'); 149 150 O.onOptClick(li); 151 152 if (opt[0].selected) 153 li.addClass('selected'); 154 155 if (opt.attr('class')) 156 li.addClass(opt.attr('class')); 157 158 return li; 159 }, 160 161 //## Returns the selected items as string in a Multiselect. 162 getSelStr: function () { 163 // get the pre selected items. 164 sopt = []; 165 this.E.find('option:selected').each(function () { sopt.push($(this).val()); }); 166 return sopt.join(settings.csvSepChar); 167 }, 168 169 //## THOSE OK/CANCEL BUTTONS ON MULTIPLE SELECT. 170 multiSelelect: function () { 171 var O = this; 172 O.optDiv.addClass('multiple'); 173 O.okbtn = $('<p class="btnOk">'+settings.locale[0]+'</p>').click(function () { 174 175 //if combined change event is set. 176 if (settings.triggerChangeCombined) { 177 178 //check for a change in the selection. 179 changed = false;
180 if (O.E.find('option:selected').length != O.Pstate.length) { 181 changed = true; 182 } 183 else { 184 O.E.find('option').each(function (i,e) { 185 if(e.selected && O.Pstate.indexOf(i) < 0) changed = true; 186 }); 187 } 188 189 if (changed) { 190 O.callChange(); 191 O.setText(); 192 } 193 } 194 O.hideOpts(); 195 }); 196 O.cancelBtn = $('<p class="btnCancel">'+settings.locale[1]+'</p>').click(function () { 197 O._cnbtn(); 198 O.hideOpts(); 199 }); 200 O.optDiv.append($('<div class="MultiControls">').append(O.okbtn).append(O.cancelBtn)); 201 }, 202 203 _cnbtn:function(){ 204 var O = this; 205 //remove all selections 206 O.E.find('option:selected').each(function () { this.selected = false; }); 207 O.optDiv.find('li.selected').removeClass('selected') 208 209 //restore selections from saved state. 210 for(var i = 0; i < O.Pstate.length; i++) { 211 O.E.find('option')[O.Pstate[i]].selected = true; 212 O.ul.find('li.opt').eq(O.Pstate[i]).addClass('selected'); 213 } 214 O.selAllState(); 215 }, 216 217 SelAll:function(){ 218 var O = this; 219 if(!O.is_multi)return; 220 O.selAll = $('<p class="select-all"><span><i></i></span><label>' + settings.locale[2] + '</label></p>'); 221 O.selAll.on('click',function(){ 222 //O.toggSelAll(!); 223 O.selAll.toggleClass('selected'); 224 O.optDiv.find('li.opt').not('.hidden').each(function(ix,e){ 225 e = $(e); 226 if(O.selAll.hasClass('selected')){ 227 if(!e.hasClass('selected'))e.trigger('click'); 228 } 229 else 230 if(e.hasClass('selected'))e.trigger('click'); 231 }); 232 }); 233 234 O.optDiv.prepend(O.selAll); 235 }, 236 237 // search module (can be removed if not required.) 238 Search: function(){ 239 var O = this, 240 cc = O.CaptionCont.addClass('search'), 241 P = $('<p class="no-match">'); 242 243 O.ftxt = $('<input type="text" class="search-txt" value="" placeholder="' + settings.searchText + '">') 244 .on('click', function(e){ 245 e.stopPropagation(); 246 }); 247 cc.append(O.ftxt); 248 O.optDiv.children('ul').after(P); 249 250 O.ftxt.on('keyup.sumo',function(){ 251 var hid = O.optDiv.find('ul.options li.opt').each(function(ix,e){ 252 e = $(e); 253 if(e.text().toLowerCase().indexOf(O.ftxt.val().toLowerCase()) > -1) 254 e.removeClass('hidden'); 255 else 256 e.addClass('hidden'); 257 }).not('.hidden'); 258 259 P.html(settings.noMatch.replace(/\{0\}/g, O.ftxt.val())).toggle(!hid.length); 260 261 O.selAllState(); 262 }); 263 }, 264 265 selAllState: function () { 266 var O = this; 267 if (settings.selectAll) { 268 var sc = 0, vc = 0; 269 O.optDiv.find('li.opt').not('.hidden').each(function (ix, e) { 270 if ($(e).hasClass('selected')) sc++; 271 if (!$(e).hasClass('disabled')) vc++; 272 }); 273 //select all checkbox state change. 274 if (sc == vc) O.selAll.removeClass('partial').addClass('selected'); 275 else if (sc == 0) O.selAll.removeClass('selected partial'); 276 else O.selAll.addClass('partial')//.removeClass('selected'); 277 } 278 }, 279 280 showOpts: function () { 281 var O = this; 282 if (O.E.attr('disabled')) return; // if select is disabled then retrun 283 O.is_opened = true; 284 O.select.addClass('open'); 285 286 if(O.ftxt)O.ftxt.focus(); 287 else O.select.focus(); 288 289 // hide options on click outside. 290 $(document).on('click.sumo', function (e) { 291 if (!O.select.is(e.target) // if the target of the click isn't the container... 292 && O.select.has(e.target).length === 0){ // ... nor a descendant of the container 293 if(!O.is_opened)return; 294 O.hideOpts(); 295 if (settings.okCancelInMulti)O._cnbtn(); 296 } 297 }); 298 299 if (O.is_floating) { 300 H = O.optDiv.children('ul').outerHeight() + 2; // +2 is clear fix 301 if (O.is_multi) H = H + parseInt(O.optDiv.css('padding-bottom')); 302 O.optDiv.css('height', H); 303 $('body').addClass('sumoStopScroll'); 304 } 305 306 O.setPstate(); 307 }, 308 309 //maintain state when ok/cancel buttons are available storing the indexes. 310 setPstate: function(){ 311 var O = this; 312 if (O.is_multi && (O.is_floating || settings.okCancelInMulti)){ 313 O.Pstate = []; 314 // assuming that find returns elements in tree order 315 O.E.find('option').each(function (i, e){if(e.selected) O.Pstate.push(i);}); 316 } 317 }, 318 319 callChange:function(){ 320 this.E.trigger('change').trigger('click'); 321 }, 322 323 hideOpts: function () { 324 var O = this; 325 if(O.is_opened){ 326 O.is_opened = false;
327 O.select.removeClass('open').find('ul li.sel').removeClass('sel'); 328 $(document).off('click.sumo'); 329 O.select.focus(); 330 $('body').removeClass('sumoStopScroll'); 331 332 // clear the search 333 if(settings.search){ 334 O.ftxt.val(''); 335 O.optDiv.find('ul.options li').removeClass('hidden'); 336 O.optDiv.find('.no-match').toggle(false); 337 } 338 } 339 }, 340 setOnOpen: function () { 341 var O = this, 342 li = O.optDiv.find('li.opt:not(.hidden)').eq(settings.search?0:O.E[0].selectedIndex); 343 344 O.optDiv.find('li.sel').removeClass('sel'); 345 li.addClass('sel'); 346 O.showOpts(); 347 }, 348 nav: function (up) { 349 var O = this, c, 350 s=O.ul.find('li.opt:not(.disabled, .hidden)'), 351 sel = O.ul.find('li.opt.sel:not(.hidden)'), 352 idx = s.index(sel); 353 if (O.is_opened && sel.length) { 354 355 if (up && idx > 0) 356 c = s.eq(idx-1); 357 else if(!up && idx < s.length-1 && idx > -1) 358 c = s.eq(idx+1); 359 else return; // if no items before or after 360 361 sel.removeClass('sel'); 362 sel = c.addClass('sel'); 363 364 // setting sel item to visible view. 365 var ul = O.ul, 366 st = ul.scrollTop(), 367 t = sel.position().top + st; 368 if(t >= st + ul.height()-sel.outerHeight()) 369 ul.scrollTop(t - ul.height() + sel.outerHeight()); 370 if(t<st) 371 ul.scrollTop(t); 372 373 } 374 else 375 O.setOnOpen(); 376 }, 377 378 basicEvents: function () { 379 var O = this; 380 O.CaptionCont.click(function (evt) { 381 O.E.trigger('click'); 382 if (O.is_opened) O.hideOpts(); else O.showOpts(); 383 evt.stopPropagation(); 384 }); 385 386 O.select.on('keydown.sumo', function (e) { 387 switch (e.which) { 388 case 38: // up 389 O.nav(true); 390 break; 391 392 case 40: // down 393 O.nav(false); 394 break; 395 396 case 32: // space 397 if(settings.search && O.ftxt.is(e.target))return; 398 case 13: // enter 399 if (O.is_opened) 400 O.optDiv.find('ul li.sel').trigger('click'); 401 else 402 O.setOnOpen(); 403 break; 404 case 9: //tab 405 case 27: // esc 406 if (settings.okCancelInMulti)O._cnbtn(); 407 O.hideOpts(); 408 return; 409 410 default: 411 return; // exit this handler for other keys 412 } 413 e.preventDefault(); // prevent the default action (scroll / move caret) 414 }); 415 416 $(window).on('resize.sumo', function () { 417 O.floatingList(); 418 }); 419 }, 420 421 onOptClick: function (li) { 422 var O = this; 423 li.click(function () { 424 var li = $(this); 425 if(li.hasClass('disabled'))return; 426 txt = ""; 427 if (O.is_multi) { 428 li.toggleClass('selected'); 429 li.data('opt')[0].selected = li.hasClass('selected'); 430 O.selAllState(); 431 } 432 else { 433 li.parent().find('li.selected').removeClass('selected'); //if not multiselect then remove all selections from this list 434 li.toggleClass('selected'); 435 li.data('opt')[0].selected = true; 436 } 437 438 //branch for combined change event. 439 if (!(O.is_multi && settings.triggerChangeCombined && (O.is_floating || settings.okCancelInMulti))) { 440 O.setText(); 441 O.callChange(); 442 } 443 444 if (!O.is_multi) O.hideOpts(); //if its not a multiselect then hide on single select. 445 }); 446 }, 447 448 setText: function () { 449 var O = this; 450 O.placeholder = ""; 451 if (O.is_multi) { 452 sels = O.E.find(':selected').not(':disabled'); //selected options. 453 454 for (i = 0; i < sels.length; i++) { 455 if (i + 1 >
455= settings.csvDispCount && settings.csvDispCount) { 456 if (sels.length == O.E.find('option').length && settings.captionFormatAllSelected) { 457 O.placeholder = settings.captionFormatAllSelected.replace(/\{0\}/g, sels.length)+','; 458 } else { 459 O.placeholder = settings.captionFormat.replace(/\{0\}/g, sels.length)+','; 460 } 461 462 break; 463 } 464 else O.placeholder += $(sels[i]).text() + ", "; 465 } 466 O.placeholder = O.placeholder.replace(/,([^,]*)$/, '$1'); //remove unexpected "," from last. 467 } 468 else { 469 O.placeholder = O.E.find(':selected').not(':disabled').text(); 470 } 471 472 is_placeholder = false; 473 474 if (!O.placeholder) { 475 476 is_placeholder = true; 477 478 O.placeholder = O.E.attr('placeholder'); 479 if (!O.placeholder) //if placeholder is there then set it 480 O.placeholder = O.E.find('option:disabled:selected').text(); 481 } 482 483 O.placeholder = O.placeholder ? (settings.prefix + ' ' + O.placeholder) : settings.placeholder 484 485 //set display text 486 O.caption.html(O.placeholder); 487 O.CaptionCont.attr('title', O.placeholder); 488 489 //set the hidden field if post as csv is true. 490 csvField = O.select.find('input.HEMANT123'); 491 if (csvField.length) csvField.val(O.getSelStr()); 492 493 //add class placeholder if its a placeholder text. 494 if (is_placeholder) O.caption.addClass('placeholder'); else O.caption.removeClass('placeholder'); 495 return O.placeholder; 496 }, 497 498 isMobile: function () { 499 500 // Adapted from http://www.detectmobilebrowsers.com 501 var ua = navigator.userAgent || navigator.vendor || window.opera; 502 503 // Checks for iOs, Android, Blackberry, Opera Mini, and Windows mobile devices 504 for (var i = 0; i < settings.nativeOnDevice.length; i++) if (ua.toString().toLowerCase().indexOf(settings.nativeOnDevice[i].toLowerCase()) > 0) return settings.nativeOnDevice[i]; 505 return false; 506 }, 507 508 setNativeMobile: function () { 509 var O = this; 510 O.E.addClass('SelectClass')//.css('height', O.select.outerHeight()); 511 O.mob = true; 512 O.E.change(function () { 513 O.setText(); 514 }); 515 }, 516 517 floatingList: function () { 518 var O = this; 519 //called on init and also on resize. 520 //O.is_floating = true if window width is < specified float width 521 O.is_floating = $(window).width() <= settings.floatWidth; 522 523 //set class isFloating 524 O.optDiv.toggleClass('isFloating', O.is_floating); 525 526 //remove height if not floating 527 if (!O.is_floating) O.optDiv.css('height', ''); 528 529 //toggle class according to okCancelInMulti flag only when it is not floating 530 O.optDiv.toggleClass('okCancelInMulti', settings.okCancelInMulti && !O.is_floating); 531 }, 532 533 //HELPERS FOR OUTSIDERS 534 // validates range of given item operations 535 vRange: function (i) { 536 var O = this; 537 opts = O.E.find('option'); 538 if (opts.length <= i || i < 0) throw "index out of bounds" 539 return O; 540 }, 541 542 //toggles selection on c as boolean. 543 toggSel: function (c, i) { 544 var O = this;
545 if (typeof(i) === "number"){ 546 O.vRange(i); 547 opt = O.E.find('option')[i]; 548 } 549 else{ 550 opt = O.E.find('option[value="'+i+'"]')[0]||0; 551 } 552 if (!opt || opt.disabled) 553 return; 554 555 if(opt.selected != c){ 556 opt.selected = c; 557 if(!O.mob) $(opt).data('li').toggleClass('selected',c); 558 559 O.callChange(); 560 O.setPstate(); 561 O.setText(); 562 O.selAllState(); 563 } 564 }, 565 566 //toggles disabled on c as boolean. 567 toggDis: function (c, i) { 568 var O = this.vRange(i); 569 O.E.find('option')[i].disabled = c; 570 if(c)O.E.find('option')[i].selected = false; 571 if(!O.mob)O.optDiv.find('ul.options li').eq(i).toggleClass('disabled', c).removeClass('selected'); 572 O.setText(); 573 }, 574 575 // toggle disable/enable on complete select control 576 toggSumo: function(val) { 577 var O = this; 578 O.enabled = val; 579 O.select.toggleClass('disabled', val); 580 581 if (val) { 582 O.E.attr('disabled', 'disabled'); 583 O.select.removeAttr('tabindex'); 584 } 585 else{ 586 O.E.removeAttr('disabled'); 587 O.select.attr('tabindex','0'); 588 } 589 590 return O; 591 }, 592 593 //toggles alloption on c as boolean. 594 toggSelAll: function (c) { 595 var O = this; 596 O.E.find('option').each(function (ix, el) { 597 if (O.E.find('option')[$(this).index()].disabled) return; 598 O.E.find('option')[$(this).index()].selected = c; 599 if (!O.mob) 600 O.optDiv.find('ul.options li').eq($(this).index()).toggleClass('selected', c); 601 O.setText(); 602 }); 603 if(!O.mob && O.selAll)O.selAll.removeClass('partial').toggleClass('selected',c); 604 O.callChange(); 605 O.setPstate(); 606 }, 607 608 /* outside accessibility options 609 which can be accessed from the element instance. 610 */ 611 reload:function(){ 612 var elm = this.unload(); 613 return $(elm).SumoSelect(settings); 614 }, 615 616 unload: function () { 617 var O = this; 618 O.select.before(O.E); 619 O.E.show(); 620 621 if (settings.outputAsCSV && O.is_multi && O.select.find('input.HEMANT123').length) { 622 O.E.attr('name', O.select.find('input.HEMANT123').attr('name')); // restore the name; 623 } 624 O.select.remove(); 625 delete selObj.sumo; 626 return selObj; 627 }, 628 629 //## add a new option to select at a given index. 630 add: function (val, txt, i) { 631 if (typeof val == "undefined") throw "No value to add" 632 633 var O = this; 634 opts=O.E.find('option') 635 if (typeof txt == "number") { i = txt; txt = val; } 636 if (typeof txt == "undefined") { txt = val; } 637 638 opt = $("<option></option>").val(val).html(txt); 639 640 if (opts.length < i) throw "index out of bounds" 641 642 if (typeof i == "undefined" || opts.length == i) { // add it to the last if given index is last no or no index provides. 643 O.E.append(opt); 644 if(!O.mob)O.ul.append(O.createLi(opt)); 645 } 646 else { 647 opts.eq(i).before(opt); 648 if(!O.mob)O.ul.find('li.opt').eq(i).before(O.createLi(opt)); 649 } 650 651 return selObj; 652 }, 653 654 //## removes an item at a given index. 655 remove: function (i) { 656 var O = this.vRange(i); 657 O.E.find('option').eq(i).remove(); 658 if(!O.mob)O.optDiv.find('ul.options li').eq(i).remove(); 659 O.setText(); 660 }, 661 662 //## Select an item at a given index. 663 selectItem: function (i) { this.toggSel(true, i); }, 664 665 //## UnSelect an iten at a given index. 666 unSelectItem: function (i) { this.toggSel(false, i); }, 667 668 //## Select all items of the select. 669 selectAll: function () { this.toggSelAll(true); }, 670 671 //## UnSelect all items of the select. 672 unSelectAll: function () { this.toggSelAll(false); }, 673 674 //## Disable an iten at a given index. 675 disableItem: function (i) { this.toggDis(true, i) }, 676 677 //## Removes disabled an iten at a given index. 678 enableItem: function (i) { this.toggDis(false, i) }, 679 680 //## New simple methods as getter and setter are not working fine in ie8-
681 //## variable to check state of control if enabled or disabled. 682 enabled : true, 683 //## Enables the control 684 enable: function(){return this.toggSumo(false)}, 685 686 //## Disables the control 687 disable: function(){return this.toggSumo(true)}, 688 689 690 init: function () { 691 var O = this; 692 O.createElems(); 693 O.setText(); 694 return O 695 } 696 697 }; 698 699 selObj.sumo.init(); 700 }); 701 702 return ret.length == 1 ? ret[0] : ret; 703 }; 704 705 706}(jQuery));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.