1/* 2 * jQuery Form Styler v1.6.1 3 * https://github.com/Dimox/jQueryFormStyler 4 * 5 * Copyright 2012-2014 Dimox (http://dimox.name/) 6 * Released under the MIT license. 7 * 8 * Date: 2014.11.23 9 * 10 */ 11 12(function(factory) { 13 if (typeof define === 'function' && define.amd) { 14 // AMD 15 define(['jquery'], factory); 16 } else if (typeof exports === 'object') { 17 // CommonJS 18 module.exports = factory(require('jquery')); 19 } else { 20 factory(jQuery); 21 } 22}(function($) { 23 24 $.fn.styler = function(options) { 25 26 var opt = $.extend({ 27 wrapper: 'form', 28 idSuffix: '-styler', 29 filePlaceholder: 'The file is not selected', 30 fileBrowse: 'Review...', 31 selectPlaceholder: 'Choose an option...', 32 selectSearch: false, 33 selectSearchLimit: 10, 34 selectSearchNotFound: 'No matches found', 35 selectSearchPlaceholder: 'Search...', 36 selectVisibleOptions: 0, 37 singleSelectzIndex: '100', 38 selectSmartPositioning: true, 39 onSelectOpened: function() {}, 40 onSelectClosed: function() {}, 41 onFormStyled: function() {} 42 }, options); 43 44 return this.each(function() { 45 var el = $(this); 46 47 function Attributes() { 48 var id = '', 49 title = '', 50 classes = '', 51 dataList = ''; 52 if (el.attr('id') !== undefined && el.attr('id') !== '') id = ' id="' + el.attr('id') + opt.idSuffix + '"'; 53 if (el.attr('title') !== undefined && el.attr('title') !== '') title = ' title="' + el.attr('title') + '"'; 54 if (el.attr('class') !== undefined && el.attr('class') !== '') classes = ' ' + el.attr('class'); 55 var data = el.data(); 56 for (var i in data) { 57 if (data[i] !== '') dataList += ' data-' + i + '="' + data[i] + '"'; 58 } 59 id += dataList; 60 this.id = id; 61 this.title = title; 62 this.classes = classes; 63 } 64 65 // checkbox 66 if (el.is(':checkbox')) { 67 el.each(function() { 68 if (el.parent('div.jq-checkbox').length < 1) { 69 70 var checkboxOutput = function() { 71 72 var att = new Attributes(); 73 var checkbox = $('<div' + att.id + ' class="jq-checkbox' + att.classes + '"' + att.title + '><div class="jq-checkbox__div"></div></div>'); 74 75 76 el.css({ 77 position: 'absolute', 78 zIndex: '-1', 79 opacity: 0, 80 margin: 0, 81 padding: 0 82 }).after(checkbox).prependTo(checkbox); 83 84 checkbox.attr('unselectable', 'on').css({ 85 '-webkit-user-select': 'none', 86 '-moz-user-select': 'none', 87 '-ms-user-select': 'none', 88 '-o-user-select': 'none', 89 'user-select': 'none', 90 display: 'inline-block', 91 position: 'relative', 92 overflow: 'hidden' 93 }); 94 95 if (el.is(':checked')) checkbox.addClass('checked'); 96 if (el.is(':disabled')) checkbox.addClass('disabled'); 97 98 99 checkbox.on('click.styler', function() { 100 if (!checkbox.is('.disabled')) { 101 if (el.is(':checked')) { 102 el.prop('checked', false); 103 checkbox.removeClass('checked'); 104 } else { 105 el.prop('checked', true); 106 checkbox.addClass('checked'); 107 } 108 el.change(); 109 return false; 110 } else { 111 return false; 112 } 113 }); 114 115 el.closest('label').add('label[for="' + el.attr('id') + '"]').click(function(e) { 116 if (!$(e.target).is('a')) { 117 checkbox.click(); 118 e.preventDefault(); 119 } 120 }); 121 122 el.on('change.styler', function() { 123 if (el.is(':checked')) checkbox.addClass('checked'); 124 else checkbox.removeClass('checked'); 125 }) 126 127 .on('keydown.styler', function(e) { 128 if (e.which == 32) checkbox.click(); 129 }) 130 .on('focus.styler', function() { 131 if (!checkbox.is('.disabled')) checkbox.addClass('focused'); 132 }) 133 .on('blur.styler', function() { 134 checkbox.removeClass('focused'); 135 }); 136 137 }; // end checkboxOutput() 138 139 checkboxOutput(); 140 141 142 el.on('refresh', function() { 143 el.off('.styler').parent().before(el).remove(); 144 checkboxOutput(); 145 }); 146 147 } 148 }); 149 // end checkbox 150 151 // radio 152 } else if (el.is(':radio')) { 153 el.each(function() { 154 if (el.parent('div.jq-radio').length < 1) { 155 156 var radioOutput = function() { 157 158 var att = new Attributes(); 159 var radio = $('<div' + att.id + ' class="jq-radio' + att.classes + '"' + att.title + '><div class="jq-radio__div"></div></div>'); 160 161 162 el.css({ 163 position: 'absolute', 164 zIndex: '-1', 165 opacity: 0, 166 margin: 0, 167 padding: 0 168 }).after(radio).prependTo(radio); 169 170 radio.attr('unselectable', 'on').css({ 171 '-webkit-user-select': 'none', 172 '-moz-user-select': 'none', 173 '-ms-user-select': 'none', 174 '-o-user-select': 'none', 175 'user-select': 'none', 176 display: 'inline-block', 177 position: 'relative' 178 }); 179 180 if (el.is(':checked')) radio.addClass('checked'); 181 if (el.is(':disabled')) radio.addClass('disabled'); 182 183 184 radio.on('click.styler', function() { 185 if (!radio.is('.disabled')) { 186 radio.closest(opt.wrapper).find('input[name="' + el.attr('name') + '"]').prop('checked', false).parent().removeClass('checked'); 187 el.prop('checked', true).parent().addClass('checked'); 188 el.change(); 189 return false;
190 } else { 191 return false; 192 } 193 }); 194 195 el.closest('label').add('label[for="' + el.attr('id') + '"]').click(function(e) { 196 if (!$(e.target).is('a')) { 197 radio.click(); 198 e.preventDefault(); 199 } 200 }); 201 202 el.on('change.styler', function() { 203 el.parent().addClass('checked'); 204 }) 205 .on('focus.styler', function() { 206 if (!radio.is('.disabled')) radio.addClass('focused'); 207 }) 208 .on('blur.styler', function() { 209 radio.removeClass('focused'); 210 }); 211 212 }; // end radioOutput() 213 214 radioOutput(); 215 216 217 el.on('refresh', function() { 218 el.off('.styler').parent().before(el).remove(); 219 radioOutput(); 220 }); 221 222 } 223 }); 224 // end radio 225 226 // file 227 } else if (el.is(':file')) { 228 229 el.css({ 230 position: 'absolute', 231 top: 0, 232 right: 0, 233 width: '100%', 234 height: '100%', 235 opacity: 0, 236 margin: 0, 237 padding: 0 238 }).each(function() { 239 if (el.parent('div.jq-file').length < 1) { 240 241 var fileOutput = function() { 242 243 var att = new Attributes(); 244 var placeholder = el.data('placeholder'); 245 if (placeholder === undefined) placeholder = opt.filePlaceholder; 246 var browse = el.data('browse'); 247 if (browse === undefined || browse === '') browse = opt.fileBrowse; 248 var file = $('<div' + att.id + ' class="jq-file' + att.classes + '"' + att.title + ' style="display: inline-block; position: relative; overflow: hidden"></div>'); 249 var name = $('<div class="jq-file__name">' + placeholder + '</div>').appendTo(file); 250 $('<div class="jq-file__browse">' + browse + '</div>').appendTo(file); 251 el.after(file); 252 file.append(el); 253 if (el.is(':disabled')) file.addClass('disabled'); 254 el.on('change.styler', function() { 255 var value = el.val(); 256 if (el.is('[multiple]')) { 257 value = ''; 258 var files = el[0].files; 259 for (var i = 0; i < files.length; i++) { 260 value += ( (i > 0) ? ', ' : '' ) + files[i].name; 261 } 262 } 263 name.text(value.replace(/.+[\\\/]/, '')); 264 if (value === '') { 265 name.text(placeholder); 266 file.removeClass('changed'); 267 } else { 268 file.addClass('changed'); 269 } 270 }) 271 .on('focus.styler', function() { 272 file.addClass('focused'); 273 }) 274 .on('blur.styler', function() { 275 file.removeClass('focused'); 276 }) 277 .on('click.styler', function() { 278 file.removeClass('focused'); 279 }); 280 281 }; // end fileOutput() 282 283 fileOutput(); 284 285 286 el.on('refresh', function() { 287 el.off('.styler').parent().before(el).remove(); 288 fileOutput(); 289 }); 290 291 } 292 }); 293 // end file 294 295 // select 296 } else if (el.is('select')) { 297 el.each(function() { 298 if (el.parent('div.jqselect').length < 1) { 299 300 var selectboxOutput = function() { 301 302 303 function preventScrolling(selector) { 304 selector.off('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(e) { 305 var scrollTo = null; 306 if (e.type == 'mousewheel') { scrollTo = (e.originalEvent.wheelDelta * -1); } 307 else if (e.type == 'DOMMouseScroll') { scrollTo = 40 * e.originalEvent.detail; } 308 if (scrollTo) { 309 e.stopPropagation(); 310 e.preventDefault(); 311 $(this).scrollTop(scrollTo + $(this).scrollTop()); 312 } 313 }); 314 } 315 316 var option = $('option', el); 317 var list = ''; 318 319 function makeList() { 320 for (var i = 0, len = option.length; i < len; i++) { 321 var li = '', 322 liClass = '', 323 liClasses = '', 324 dataList = '', 325 optionClass = '', 326 optgroupClass = '', 327 dataJqfsClass = ''; 328 var disabled = 'disabled'; 329 var selDis = 'selected sel disabled'; 330 if (option.eq(i).prop('selected')) liClass = 'selected sel'; 331 if (option.eq(i).is(':disabled')) liClass = disabled; 332 if (option.eq(i).is(':selected:disabled')) liClass = selDis; 333 if (option.eq(i).attr('class') !== undefined) { 334 optionClass = ' ' + option.eq(i).attr('class'); 335 dataJqfsClass = ' data-jqfs-class="' + option.eq(i).attr('class') + '"'; 336 } 337 338 var data = option.eq(i).data(); 339 for (var k in data) { 340 if (data[k] !== '') dataList += ' data-' + k + '="' + data[k] + '"'; 341 } 342 343 if ( (liClass + optionClass) !== '' ) liClasses = ' class="' + liClass + optionClass + '"'; 344 li = '<li' + dataJqfsClass + dataList + liClasses + '>'+ option.eq(i).html() +'</li>'; 345 346 if (option.eq(i).parent().is('optgroup')) { 347 if (option.eq(i).parent().attr('class') !== undefined) optgroupClass = ' ' + option.eq(i).parent().attr('class'); 348 li = '<li' + dataJqfsClass + ' class="' + liClass + optionClass + ' option' + optgroupClass + '">'+ option.eq(i).html() +'</li>'; 349 if (option.eq(i).is(':first-child')) { 350 li = '<li class="optgroup' + optgroupClass + '">' + option.eq(i).parent().attr('label') + '</li>' + li; 351 } 352 } 353 354 list += li; 355 } 356 } // end makeList() 357 358 359 function doSelect() { 360 var att = new Attributes(); 361 362 var searchHTML = ''; 363 var selectPlaceholder = el.data('placeholder'); 364 var selectSearch = el.data('search'); 365 var selectSearchLimit = el.data('search-limit'); 366 var selectSearchNotFound = el.data('search-not-found'); 367 var selectSearchPlaceholder = el.data('search-placeholder'); 368 var singleSelectzIndex = el.data('z-index'); 369 var selectSmartPositioning = el.data('smart-positioning'); 370 371 if (selectPlaceholder === undefined) selectPlaceholder = opt.selectPlaceholder; 372 if (selectSearch === undefined || selectSearch === '') selectSearch = opt.selectSearch; 373 if (selectSearchLimit === undefined || selectSearchLimit === '') selectSearchLimit = opt.selectSearchLimit; 374 if (selectSearchNotFound === undefined || selectSearchNotFound === '') selectSearchNotFound = opt.selectSearchNotFound; 375 if (selectSearchPlaceholder === undefined) selectSearchPlaceholder = opt.selectSearchPlaceholder; 376 if (singleSelectzIndex === undefined || singleSelectzIndex === '') singleSelectzIndex = opt.singleSelectzIndex; 377 if (selectSmartPositioning === undefined || selectSmartPositioning === '') selectSmartPositioning = opt.selectSmartPositioning; 378 379 var selectbox = 380 $('<div' + att.id + ' class="jq-selectbox jqselect' + att.classes + '" style="display: inline-block; position: relative; z-index:' + singleSelectzIndex + '">' + 381 '<div class="jq-selectbox__select"' + att.title + ' style="position: relative">' + 382 '<div class="jq-selectbox__select-text"></div>' + 383 '<div class="jq-selectbox__trigger"><div class="jq-selectbox__trigger-arrow"></div></div>' + 384 '</div>' + 385 '</div>'); 386 387 el.css({margin: 0, padding: 0}).after(selectbox).prependTo(selectbox); 388 389 var divSelect = $('div.jq-selectbox__select', selectbox); 390 var divText = $('div.jq-selectbox__select-text', selectbox); 391 var optionSelected = option.filter(':selected'); 392 393 makeList(); 394 395 if (selectSearch) searchHTML = 396 '<div class="jq-selectbox__search"><input type="search" autocomplete="off" placeholder="' + selectSearchPlaceholder + '"></div>' + 397 '<div class="jq-selectbox__not-found">' + selectSearchNotFound + '</div>'; 398 var dropdown = 399 $('<div class="jq-selectbox__dropdown" style="position: absolute">' + 400 searchHTML + 401 '<ul style="position: relative; list-style: none; overflow: auto; overflow-x: hidden">
vendor: 13,900 bytes, lines 401-829
401' + list + '</ul>' + 402 '</div>'); 403 selectbox.append(dropdown); 404 var ul = $('ul', dropdown); 405 var li = $('li', dropdown); 406 var search = $('input', dropdown); 407 var notFound = $('div.jq-selectbox__not-found', dropdown).hide(); 408 if (li.length < selectSearchLimit) search.parent().hide(); 409 410 411 if (el.val() === '') { 412 divText.text(selectPlaceholder).addClass('placeholder'); 413 } else { 414 divText.text(optionSelected.text()); 415 } 416 417 418 var liWidth1 = 0, 419 liWidth2 = 0; 420 li.each(function() { 421 var l = $(this); 422 l.css({'display': 'inline-block'}); 423 if (l.innerWidth() > liWidth1) { 424 liWidth1 = l.innerWidth(); 425 liWidth2 = l.width(); 426 } 427 l.css({'display': ''}); 428 }); 429 430 431 var selClone = selectbox.clone().appendTo('body').width('auto'); 432 var selCloneWidth = selClone.find('select').outerWidth(); 433 selClone.remove(); 434 if (selCloneWidth == selectbox.width()) { 435 divText.width(liWidth2); 436 } 437 if (liWidth1 > selectbox.width()) { 438 dropdown.width(liWidth1); 439 } 440 441 if (divText.is('.placeholder') && (divText.width() > liWidth1)) { 442 divText.width(divText.width()); 443 } 444 445 446 if (option.first().text() === '' && el.data('placeholder') !== '') { 447 li.first().hide(); 448 } 449 450 el.css({ 451 position: 'absolute', 452 left: 0, 453 top: 0, 454 width: '100%', 455 height: '100%', 456 opacity: 0 457 }); 458 459 var selectHeight = selectbox.outerHeight(); 460 var searchHeight = search.outerHeight(); 461 var isMaxHeight = ul.css('max-height'); 462 var liSelected = li.filter('.selected'); 463 if (liSelected.length < 1) li.first().addClass('selected sel'); 464 if (li.data('li-height') === undefined) li.data('li-height', li.outerHeight()); 465 var position = dropdown.css('top'); 466 if (dropdown.css('left') == 'auto') dropdown.css({left: 0}); 467 if (dropdown.css('top') == 'auto') dropdown.css({top: selectHeight}); 468 dropdown.hide(); 469 470 471 if (liSelected.length) { 472 473 if (option.first().text() != optionSelected.text()) { 474 selectbox.addClass('changed'); 475 } 476 477 selectbox.data('jqfs-class', liSelected.data('jqfs-class')); 478 selectbox.addClass(liSelected.data('jqfs-class')); 479 } 480 481 482 if (el.is(':disabled')) { 483 selectbox.addClass('disabled'); 484 return false; 485 } 486 487 488 divSelect.click(function() { 489 490 491 if ($('div.jq-selectbox').filter('.opened').length) { 492 opt.onSelectClosed.call($('div.jq-selectbox').filter('.opened')); 493 } 494 495 el.focus(); 496 497 498 var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false; 499 if (iOS) return; 500 501 502 var win = $(window); 503 var liHeight = li.data('li-height'); 504 var topOffset = selectbox.offset().top; 505 var bottomOffset = win.height() - selectHeight - (topOffset - win.scrollTop()); 506 var visible = el.data('visible-options'); 507 if (visible === undefined || visible === '') visible = opt.selectVisibleOptions; 508 var minHeight = liHeight * 5; 509 var newHeight = liHeight * visible; 510 if (visible > 0 && visible < 6) minHeight = newHeight; 511 if (visible === 0) newHeight = 'auto'; 512 513 var dropDown = function() { 514 dropdown.height('auto').css({bottom: 'auto', top: position}); 515 var maxHeightBottom = function() { 516 ul.css('max-height', Math.floor((bottomOffset - 20 - searchHeight) / liHeight) * liHeight); 517 }; 518 maxHeightBottom(); 519 ul.css('max-height', newHeight); 520 if (isMaxHeight != 'none') { 521 ul.css('max-height', isMaxHeight); 522 } 523 if (bottomOffset < (dropdown.outerHeight() + 20)) { 524 maxHeightBottom(); 525 } 526 }; 527 528 var dropUp = function() { 529 dropdown.height('auto').css({top: 'auto', bottom: position}); 530 var maxHeightTop = function() { 531 ul.css('max-height', Math.floor((topOffset - win.scrollTop() - 20 - searchHeight) / liHeight) * liHeight); 532 }; 533 maxHeightTop(); 534 ul.css('max-height', newHeight); 535 if (isMaxHeight != 'none') { 536 ul.css('max-height', isMaxHeight); 537 } 538 if ((topOffset - win.scrollTop() - 20) < (dropdown.outerHeight() + 20)) { 539 maxHeightTop(); 540 } 541 }; 542 543 if (selectSmartPositioning === true || selectSmartPositioning === 1) { 544 545 if (bottomOffset > (minHeight + searchHeight + 20)) { 546 dropDown(); 547 selectbox.removeClass('dropup').addClass('dropdown'); 548 549 } else { 550 dropUp(); 551 selectbox.removeClass('dropdown').addClass('dropup'); 552 } 553 } else if (selectSmartPositioning === false || selectSmartPositioning === 0) { 554 555 if (bottomOffset > (minHeight + searchHeight + 20)) { 556 dropDown(); 557 selectbox.removeClass('dropup').addClass('dropdown'); 558 } 559 } 560 561 562 $('div.jqselect').css({zIndex: (singleSelectzIndex - 1)}).removeClass('opened'); 563 selectbox.css({zIndex: singleSelectzIndex}); 564 if (dropdown.is(':hidden')) { 565 $('div.jq-selectbox__dropdown:visible').hide(); 566 dropdown.show(); 567 selectbox.addClass('opened focused'); 568 569 opt.onSelectOpened.call(selectbox); 570 } else { 571 dropdown.hide(); 572 selectbox.removeClass('opened dropup dropdown'); 573 574 if ($('div.jq-selectbox').filter('.opened').length) { 575 opt.onSelectClosed.call(selectbox); 576 } 577 } 578 579 580 if (search.length) { 581 search.val('').keyup(); 582 notFound.hide(); 583 search.keyup(function() { 584 var query = $(this).val(); 585 li.each(function() { 586 if (!$(this).html().match(new RegExp('.*?' + query + '.*?', 'i'))) { 587 $(this).hide(); 588 } else { 589 $(this).show(); 590 } 591 }); 592 593 if (option.first().text() === '' && el.data('placeholder') !== '') { 594 li.first().hide(); 595 } 596 if (li.filter(':visible').length < 1) { 597 notFound.show(); 598 } else { 599 notFound.hide(); 600 } 601 }); 602 } 603 604 605 if (li.filter('.selected').length) { 606 607 if ( (ul.innerHeight() / liHeight) % 2 !== 0 ) liHeight = liHeight / 2; 608 ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() / 2 + liHeight); 609 } 610 611 preventScrolling(ul); 612 return false; 613 614 }); // end divSelect.click() 615 616 617 li.hover(function() { 618 $(this).siblings().removeClass('selected'); 619 }); 620 var selectedText = li.filter('.selected').text(); 621 var selText = li.filter('.selected').text(); 622 623 624 li.filter(':not(.disabled):not(.optgroup)').click(function() { 625 el.focus(); 626 var t = $(this); 627 var liText = t.text(); 628 if (!t.is('.selected')) { 629 var index = t.index(); 630 index -= t.prevAll('.optgroup').length; 631 t.addClass('selected sel').siblings().removeClass('selected sel'); 632 option.prop('selected', false).eq(index).prop('selected', true); 633 selectedText = liText; 634 divText.text(liText); 635 636 637 if (selectbox.data('jqfs-class')) selectbox.removeClass(selectbox.data('jqfs-class')); 638 selectbox.data('jqfs-class', t.data('jqfs-class')); 639 selectbox.addClass(t.data('jqfs-class')); 640 641 el.change(); 642 } 643 dropdown.hide(); 644 selectbox.removeClass('opened dropup dropdown'); 645 646 opt.onSelectClosed.call(selectbox); 647 648 }); 649 dropdown.mouseout(function() { 650 $('li.sel', dropdown).addClass('selected'); 651 }); 652 653 654 el.on('change.styler', function() { 655 divText.text(option.filter(':selected').text()).removeClass('placeholder'); 656 li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel'); 657 658 if (option.first().text() != li.filter('.selected').text()) { 659 selectbox.addClass('changed'); 660 } else { 661 selectbox.removeClass('changed'); 662 } 663 }) 664 .on('focus.styler', function() { 665 selectbox.addClass('focused'); 666 $('div.jqselect').not('.focused').removeClass('opened dropup dropdown').find('div.jq-selectbox__dropdown').hide(); 667 }) 668 .on('blur.styler', function() { 669 selectbox.removeClass('focused'); 670 }) 671 672 .on('keydown.styler keyup.styler', function(e) { 673 var liHeight = li.data('li-height'); 674 divText.text(option.filter(':selected').text()); 675 li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel'); 676 677 if (e.which == 38 || e.which == 37 || e.which == 33 || e.which == 36) { 678 ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top); 679 } 680 681 if (e.which == 40 || e.which == 39 || e.which == 34 || e.which == 35) { 682 ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() + liHeight); 683 } 684 685 if (e.which == 13) { 686 e.preventDefault(); 687 dropdown.hide(); 688 selectbox.removeClass('opened dropup dropdown'); 689 690 opt.onSelectClosed.call(selectbox); 691 } 692 }).on('keydown.styler', function(e) { 693 694 if (e.which == 32) { 695 e.preventDefault(); 696 divSelect.click(); 697 } 698 }); 699 700 701 $(document).on('click', function(e) { 702 703 if (!$(e.target).parents().hasClass('jq-selectbox') && e.target.nodeName != 'OPTION') { 704 705 706 if ($('div.jq-selectbox').filter('.opened').length) { 707 opt.onSelectClosed.call($('div.jq-selectbox').filter('.opened')); 708 } 709 710 if (search.length) search.val('').keyup(); 711 dropdown.hide().find('li.sel').addClass('selected'); 712 selectbox.removeClass('focused opened dropup dropdown'); 713 714 } 715 }); 716 717 } // end doSelect() 718 719 720 function doMultipleSelect() { 721 var att = new Attributes(); 722 var selectbox = $('<div' + att.id + ' class="jq-select-multiple jqselect' + att.classes + '"' + att.title + ' style="display: inline-block; position: relative"></div>'); 723 724 el.css({margin: 0, padding: 0}).after(selectbox); 725 726 makeList(); 727 selectbox.append('<ul>' + list + '</ul>'); 728 var ul = $('ul', selectbox).css({ 729 'position': 'relative', 730 'overflow-x': 'hidden', 731 '-webkit-overflow-scrolling': 'touch' 732 }); 733 var li = $('li', selectbox).attr('unselectable', 'on'); 734 var size = el.attr('size'); 735 var ulHeight = ul.outerHeight(); 736 var liHeight = li.outerHeight(); 737 if (size !== undefined && size > 0) { 738 ul.css({'height': liHeight * size}); 739 } else { 740 ul.css({'height': liHeight * 4}); 741 } 742 if (ulHeight > selectbox.height()) { 743 ul.css('overflowY', 'scroll'); 744 preventScrolling(ul); 745 746 if (li.filter('.selected').length) { 747 ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top); 748 } 749 } 750 751 752 el.prependTo(selectbox).css({ 753 position: 'absolute', 754 left: 0, 755 top: 0, 756 width: '100%', 757 height: '100%', 758 opacity: 0 759 }); 760 761 762 if (el.is(':disabled')) { 763 selectbox.addClass('disabled'); 764 option.each(function() { 765 if ($(this).is(':selected')) li.eq($(this).index()).addClass('selected'); 766 }); 767 768 769 } else { 770 771 772 li.filter(':not(.disabled):not(.optgroup)').click(function(e) { 773 el.focus(); 774 var clkd = $(this); 775 if(!e.ctrlKey && !e.metaKey) clkd.addClass('selected'); 776 if(!e.shiftKey) clkd.addClass('first'); 777 if(!e.ctrlKey && !e.metaKey && !e.shiftKey) clkd.siblings().removeClass('selected first'); 778 779 780 if(e.ctrlKey || e.metaKey) { 781 if (clkd.is('.selected')) clkd.removeClass('selected first'); 782 else clkd.addClass('selected first'); 783 clkd.siblings().removeClass('first'); 784 } 785 786 787 if(e.shiftKey) { 788 var prev = false, 789 next = false; 790 clkd.siblings().removeClass('selected').siblings('.first').addClass('selected'); 791 clkd.prevAll().each(function() { 792 if ($(this).is('.first')) prev = true; 793 }); 794 clkd.nextAll().each(function() { 795 if ($(this).is('.first')) next = true; 796 }); 797 if (prev) { 798 clkd.prevAll().each(function() { 799 if ($(this).is('.selected')) return false; 800 else $(this).not('.disabled, .optgroup').addClass('selected'); 801 }); 802 } 803 if (next) { 804 clkd.nextAll().each(function() { 805 if ($(this).is('.selected')) return false; 806 else $(this).not('.disabled, .optgroup').addClass('selected'); 807 }); 808 } 809 if (li.filter('.selected').length == 1) clkd.addClass('first'); 810 } 811 812 813 option.prop('selected', false); 814 li.filter('.selected').each(function() { 815 var t = $(this); 816 var index = t.index(); 817 if (t.is('.option')) index -= t.prevAll('.optgroup').length; 818 option.eq(index).prop('selected', true); 819 }); 820 el.change(); 821 822 }); 823 824 825 option.each(function(i) { 826 $(this).data('optionIndex', i); 827 }); 828 el.on('change.styler', function() { 829 li.removeClass('selected');
830 var arrIndexes = []; 831 option.filter(':selected').each(function() { 832 arrIndexes.push($(this).data('optionIndex')); 833 }); 834 li.not('.optgroup').filter(function(i) { 835 return $.inArray(i, arrIndexes) > -1; 836 }).addClass('selected'); 837 }) 838 .on('focus.styler', function() { 839 selectbox.addClass('focused'); 840 }) 841 .on('blur.styler', function() { 842 selectbox.removeClass('focused'); 843 }); 844 845 846 if (ulHeight > selectbox.height()) { 847 el.on('keydown.styler', function(e) { 848 849 if (e.which == 38 || e.which == 37 || e.which == 33) { 850 ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - liHeight); 851 } 852 853 if (e.which == 40 || e.which == 39 || e.which == 34) { 854 ul.scrollTop(ul.scrollTop() + li.filter('.selected:last').position().top - ul.innerHeight() + liHeight * 2); 855 } 856 }); 857 } 858 859 } 860 } // end doMultipleSelect() 861 862 if (el.is('[multiple]')) { 863 864 865 var Android = navigator.userAgent.match(/Android/i) ? true : false; 866 var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false; 867 if (Android || iOS) return; 868 869 doMultipleSelect(); 870 } else { 871 doSelect(); 872 } 873 874 }; // end selectboxOutput() 875 876 selectboxOutput(); 877 878 879 el.on('refresh', function() { 880 el.off('.styler').parent().before(el).remove(); 881 selectboxOutput(); 882 }); 883 884 } 885 }); 886 // end select 887 888 // reset 889 } else if (el.is(':reset')) { 890 el.on('click', function() { 891 setTimeout(function() { 892 el.closest(opt.wrapper).find('input, select').trigger('refresh'); 893 }, 1); 894 }); 895 } 896 // end reset 897 898 }) 899 900 901 .promise() 902 .done(function() { 903 opt.onFormStyled.call(); 904 }); 905 906 }; 907}));
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.