1 2 3/** 4 5jQuery Awselect 6Developed by: Prev Wong 7Documentation: https://prevwong.github.io/awesome-select/ 8Github: https://github.com/prevwong/awesome-select/ 9 10**/ 11 12var awselect_count = 0; // used for generating sequential ID for <select> that does not have ID 13var mobile_width = 800; 14 15(function($) { 16 $.fn.awselect = function(options) { 17 var element = $(this); 18 var opts = $.extend({}, $.fn.awselect.defaults, options); 19 element.each(function() { 20 awselect_count += 1; 21 build($(this), opts); 22 }); 23 return { 24 blue: function() { 25 element.css("color", "blue"); 26 } 27 }; 28 }; 29 $.fn.awselect.defaults = { 30 immersive: false, 31 item_level: false, 32 multiple_spliter: ',', // change this setValue@option_text 33 gap: '15px', 34 }; 35 function build(element, opts) { 36 var attributes = element.get(0).attributes; 37 if (typeof window.attr_merge !== 'function'){ 38 throw new Error('Please use help.js to get window.attr_merge function //by Hugh'); 39 }
40 window.attr_merge(attributes, opts); 41 opts.placeholder = element.attr("data-placeholder"); 42 opts.id = element.attr("id"); 43 opts.selected = false; 44 opts.classes = "awselect"; 45 var options_html = ""; 46 47 var options = element.children(); 48 49 if ( opts.immersive !== true ) { 50 var immersive = false; 51 } 52 let awselect_level = 0; 53 let awselect_prev_level = 0; 54 let multi = $(element).is("[multiple]"); 55 56 options.each(function() { 57 if (typeof $(this).attr("selected") !== typeof undefined && $(this).attr("selected") !== false) { 58 opts.selected = $(this).text(); 59 } 60 61 if ($(this).prop('tagName') == "OPTGROUP") { 62 awselect_level += 1; 63 options_html += `<span class="awselect-level awselect-level-${ awselect_level }">${ $(this).attr('label') }</span>`; 64 } 65 66 if ($(this).prop('tagName') == "OPTION") { 67 awselect_prev_level = awselect_level; 68 awselect_level = $(this).next().prop('tagName') == "OPTGROUP" ? 0 : awselect_prev_level; 69 options_html += `<li class="awselect-item awselect-item-li awselect-item-level-${ awselect_prev_level } ${ $(this).is('[disabled]') ? 'awselect-item-li-disabled' : '' }" ${ $(this).is('[hidden]') ? 'style="display: none;"' : '' }> 70 ${ multi ? '<div class="pretty p-icon p-curve p-smooth"><div class="state"><i class="icon mdi mdi-check"></i>' : ''} 71 <a class="awselect-item awselect-item-a" unselectable="on"> 72 ${ $(this).text() } 73 </a> 74 ${ multi ? '</div></div>' : ''} 75 </li>`; 76 77 78 } 79 }); 80 if (opts.selected !== false) { 81 opts.classes += " hasValue"; 82 } 83 if (typeof opts.id !== typeof undefined && opts.id !== false) { 84 id_html = opts.id; 85 } else { 86 id_html = "awselect_" + awselect_count; 87 $(element).attr("id", id_html); 88 } 89 90 var awselect_html = '<div data-immersive="'+ opts.immersive +'" id="awselect_' + id_html + '" data-select="' + id_html + '" class = "' + opts.classes + '"><div class = "bg" unselectable="on"></div>'; 91 awselect_html += '<div class = "front_face" unselectable="on">'; 92 awselect_html += '<div class = "bg"></div>'; 93 awselect_html += '<div class = "trigger"></div>'; 94 awselect_html += '<div class = "content">'; 95 if (opts.selected !== false) { 96 awselect_html += '<span class="current_value" unselectable="on">' + opts.selected + "</span>"; 97 } 98 awselect_html += '<span class="placeholder" unselectable="on">' + opts.placeholder + "</span>"; 99 awselect_html += `<i class = "icon">${ icon() }</i>`; 100 awselect_html += "</div>"; 101 awselect_html += "</div>"; 102 awselect_html += '<div class = "back_face" data-scrollbar><ul>'; 103 awselect_html += options_html; 104 awselect_html += "</ul></div>"; 105 awselect_html += "</div>"; 106 $(awselect_html).insertAfter(element); 107 element.opts = opts; 108 element.hide(); 109 $(element).prev().is('.awselect') && $(element).prev().after(`<div class="awselect-gap" style="height:${opts.gap}"></div>`); 110 } 111 112 animate = function (element) { 113 if (element.hasClass("animating") == false) { 114 element.addClass("animating"); 115 if ($(".awselect.animate").length > 0) { 116 deanimate($(".awselect").not(element)); 117 var timeout = 600; 118 } else { 119 var timeout = 100; 120 } 121 var immersive = element.attr('data-immersive') 122 123 if ($(window).width() < mobile_width || immersive == "true" ) { 124 immersive_animate(element); 125 timeout += 200 126 } 127 setTimeout(function() { 128 var back_face = element.find(".back_face"); 129 back_face.show(); 130 var bg = element.find("> .bg"); 131 // (! ($(window).width() < mobile_width || immersive == "true") ) && $(element).find('.content').attr("data-inactive-color", `${ $(element).prev().attr('data-placeholder_color') || "#000" }`) 132 133 // bg.css({ 134 // height: element.outerHeight() + back_face.outerHeight() 135 // }); 136 bg.css({ 137 height: back_face.outerHeight() 138 }); 139 // back_face.css({ 140 // "margin-top": $(element).outerHeight() 141 // }); 142 143 if ( $(window).width() < mobile_width || immersive === "true" ) { 144 element.css({ 145 "top": parseInt(element.css('top')) - back_face.he
145ight() 146 }) 147 } 148 element.addClass("placeholder_animate"); 149 setTimeout(function() { 150 switchPlaceholderColor(element); 151 setTimeout(function(){ 152 if (back_face.outerHeight() == 200) { 153 back_face.addClass("overflow"); 154 } 155 }, 200); 156 157 158 element.addClass("placeholder_animate2"); 159 element.addClass("animate"); 160 element.addClass("animate2"); 161 element.removeClass("animating"); 162 }, 100); 163 }, timeout); 164 } 165 } 166 167 function immersive_animate (element) { 168 $(".awselect_bg").remove() 169 $('body, html').addClass('immersive_awselect') 170 $('body > [data-scrollbar] > .scroll-content').length > 0 ? $('body > [data-scrollbar] > .scroll-content').prepend('<div class = "awselect_bg"></div>') : $('body').prepend('<div class = "awselect_bg"></div>'); 171 172 setTimeout(function(){ 173 $('.awselect_bg').addClass('animate') 174 }, 100) 175 element.parent().css('height', element.parent().height()); 176 177 var current_width = element.outerWidth() 178 var current_height = element.outerHeight() 179 var current_left = element.offset().left 180 var current_top = element.offset().top - $(window).scrollTop() 181 element.attr('data-o-width', current_width) 182 element.attr('data-o-left', current_left) 183 element.attr('data-o-top', current_top) 184 element.addClass('transition_paused').css({ 185 "width" : current_width, 186 "z-index": "9999", 187 }) 188 setTimeout(function(){ 189 let current_margin = element.css('margin'), 190 current_padding = element.css('padding'); 191 $(`<div class = "awselect_placebo" style="position:relative; width:${current_width}px; height:${current_height}px; float:left; padding: ${current_padding}; margin: ${current_margin}; Ã"></div>`).insertAfter(element) 192 193 // $(element).find('.content').attr("data-inactive-color", `${ $(element).prev().attr('data-option_color') || "#000" }`) 194 195 element.css({ 196 "position": "fixed", 197 "top" : current_top, 198 "left": current_left, 199 }) 200 element.removeClass('transition_paused'); 201 setTimeout(function(){ 202 if ( $(window).width() < mobile_width ) { 203 element.css('width', $(window).outerWidth() - 40 ) 204 } else { 205 element.css('width', $(window).outerWidth() / 2) 206 } 207 208 element.css({ 209 "top" : $(window).outerHeight() / 2 + element.outerHeight() / 2, 210 "left" : "50%", 211 "transform": "translateX(-50%) translateY(-50%)" 212 }) 213 setTimeout(function(){ 214 animate(element) 215 }, 100) 216 }, 100) 217 }, 50) 218 } 219 220 deanimate = function (awselects) { 221 if (awselects == null) { 222 var awselect = $(".awselect"); 223 } else { 224 var awselect = awselects; 225 } 226 $(awselect).each(function() { 227 var element = $(this); 228 229 if (element.hasClass("animate")) { 230 setTimeout(function() { 231 232 }, 300); 233 element.removeClass("animate2"); 234 element.find(".back_face").hide(); 235 element.find('.back_face').removeClass('overflow') 236 element.removeClass("animate"); 237 switchPlaceholderColor(element); 238 239 element.children(".bg").css({ 240 height: 0 241 }); 242 243 element.removeClass("placeholder_animate2"); 244 setTimeout(function() { 245 immersive_deanimate(element) 246 element.removeClass("placeholder_animate"); 247 }, 100); 248 } 249 }); 250 }
251 function immersive_deanimate (element){ 252 253 if ( element.siblings('.awselect_placebo').length > 0 ) { 254 setTimeout(function(){ 255 var original_width = element.attr('data-o-width') 256 var original_left = element.attr('data-o-left') 257 var original_top = element.attr('data-o-top') 258 259 element.css({ 260 "width" : original_width, 261 "left" : original_left + "px", 262 "transform": "translateX(0) translateY(0)", 263 "top" : original_top + "px" 264 }) 265 $('.awselect_bg').removeClass('animate') 266 setTimeout(function(){ 267 $('.awselect_placebo').remove() 268 $('body, html').removeClass('immersive_awselect') 269 setTimeout(function(){ 270 $('.awselect_bg').removeClass('animate').remove() 271 }, 200); 272 element.attr('style', '') 273 }, 300) 274 }, 100) 275 276 } 277 278 279 } 280 281 function switchPlaceholderColor(element) { 282 var placeholder_inactive_color = element.find(".front_face .content").attr("data-inactive-color"); 283 var placeholder_normal_color = element.find(".front_face .content").css("color"); 284 element.find(".front_face .content").attr("data-inactive-color", placeholder_normal_color).css("color", placeholder_inactive_color); 285 element.find(".front_face .icon svg").css("fill", placeholder_inactive_color); 286 } 287 setValue = function (select) { 288 var awselect = $('.awselect[data-select="' + $(select).attr("id") + '"]'); 289 var callback = $(select).attr("data-callback"); 290 $(awselect).find(".current_value").remove(); 291 292 var val = $(select).val(); 293 var option_value; 294 295 option_value = $(select).is('[multiple]') && typeof val == "object" 296 ? $(select).children('option').filter(function(){ 297 return $.inArray(this.value, val) > -1 298 }) 299 : $(select).children('option[value="' + val + '"]:not([disabled])').eq(0); 300 301 302 if ($(select).is('[multiple]')) { 303 let option_text_array = []; 304 option_value.map(function(){ 305 option_text_array.push($(this).text()); 306 } ); 307 // option_text = option_text_array.join($(select).attr('data-multiple_spliter') || ','); 308 } else { 309 option_text = option_value.text(); 310 } 311 312 !$(select).is('[multiple]') && $(awselect).find(".front_face .content").prepend('<span class = "current_value" unselectable="on">' + option_text + "</span>"); 313 option_value.length > 0 ? (awselect).addClass("hasValue") : (awselect).removeClass("hasValue"); 314 315 if (typeof callback !== typeof undefined && callback !== false) { 316 window[callback](option_value.parent().val()); 317 } 318 319 setTimeout(function() { 320 !$(select).is('[multiple]') && deanimate(); 321 }, 100); 322 } 323 function icon() { 324 return '<svg version="1.1" id="Chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>'; 325 } 326 function change(elem) { 327 elem.css("color", "green"); 328 } 329})(jQuery); 330 331 332$(document).ready(function() { 333 $("body").delegate("[awselect] + .awselect .front_face", "mouseover", function() { 334 let renderSelect = $("select#" + $(this).parent('.awselect').attr("data-select")); 335 let before = (renderSelect.attr('data-before') !== void 0) && JSON.parse(renderSelect.attr('data-before')); 336 if (before) { 337 for(let relate of before) { 338 let relateValue = $(`[data-alias=${relate.replace(' ', '__space__')}]`).val(); 339 if (relateValue && (! relateValue.length) && renderSelect.is('[data-before-required]')) { 340 $(this).css('cursor', 'not-allowed'); 341 return ; 342 } 343 } 344 } 345 $(this).css('cursor', ''); 346 }); 347 $("body").delegate("[awselect] + .awselect .front_face", "click", function() { 348 var dropdown = $(this).parent('.awselect'); 349 let renderSelect = $("select#" + dropdown.attr("data-select")); 350 let before = (renderSelect.attr('data-before') !== void 0) && JSON.parse(renderSelect.attr('data-before')); 351 352 if (before) { 353 for(let relate of before) { 354 let relateValue = $(`[data-alias*=${relate.replace(' ', '__space__')}]`).val(); 355 if (relateValue && (! relateValue.length) && renderSelect.is('[data-before-required]')) { 356 return ; 357 } 358 } 359 } 360 361 var select_data_drop = $("select#" + dropdown.attr("id").replace("awselect_", "")); 362 dropdown.hasClass("animate") && $(this).next().find(".awselect-active-a,.awselect-active-li").removeClass('awselect-active-a awselect-active-li'); 363 !dropdown.prev().is('[multiple]') && dropdown.hasClass("animate") && dropdown.prev().val('').trigger('change'); 364 dropdown.hasClass("animate") ? select_data_drop.trigger("aw:deanimate") : select_data_drop.trigger("aw:animate"); 365 if ($(this).is('.placeholder_animate *')) { 366 $('[data-related]').filter(`[data-before*="${ renderSelect.attr('data-alias').replaceAll('__space__', ' ') }"] option`).attr('disabled', false); 367 $(`[data-before*="${ renderSelect.attr('data-alias').replaceAll('__space__', ' ') }"]`).each(function(){ 368 let val = $(this).val(); 369 $(this).children().sort(function(a, b){ 370 let al = $(a).is('[disabled]') ? 4000 + $(a).attr('data-order') : $(a
370).attr('data-order') 371 let bl = $(b).is('[disabled]') ? 4000 + $(b).attr('data-order') : $(b).attr('data-order') 372 return al - bl; 373 }).detach().appendTo(this); 374 $(this).val(val) 375 $(this).next().remove(); 376 $(this).awselect(); 377 setValue($(this)); 378 }); 379 380 381 } 382 }); 383 $("body").delegate("[awselect] + .awselect ul li a", "click", function() { 384 !$(this).parents('.awselect').prev().is('[multiple]') && $(this).parents('.back_face').find('a, li').not(this).removeClass('awselect-active-a awselect-active-li'); 385 let select_data_select; 386 $(this).parents('.awselect').prev().is('[multiple]') ? select_data_select = $("select#" + $(this).toggleClass('awselect-active-a').parents('li').toggleClass('awselect-active-li').parents(".awselect").attr("data-select")) : select_data_select = $("select#" + $(this).addClass('awselect-active-a').parent('li').addClass('awselect-active-li').parents(".awselect").attr("data-select")); 387 let callback = select_data_select.attr("data-callback"); 388 let select_data_select_val; 389 if ($(this).parents('.awselect').prev().is('[multiple]')){ 390 select_data_select_val = []; 391 $(this).parents('ul').find('.awselect-active-li').map(function() { 392 select_data_select_val.push(select_data_select.children().eq($(this).index()).val()); 393 } ); 394 } else { 395 select_data_select_val = select_data_select.children().eq($(this).parent().index()).val(); 396 } 397 select_data_select.val(select_data_select_val).trigger("change"); 398 // after is for select related 399 let $dataRelate = $('[data-related]').removeAttr('disabled'); 400 let $nowChange = $(this).parents('.b-filter__item').find('select'); 401 $(this).parents('.b-filter__items').find('select').each(function () { 402 let alias = $(this).attr('data-alias'); 403 $(this).children(':checked').filter('[disabled]:not([hidden])').prop('selected', false); 404 let val = $(this).val(); 405 406 val && (val.length > 0) && $dataRelate.filter(`[data-before*="${ alias.replaceAll('__space__', ' ') }"] option`).each(function(){ 407 let $this = $(this); 408 let relate = JSON.parse($this.attr('data-related')); 409 let pass = false; 410 let $thisSelectValue = $this.parent('select').val(); 411 if (val.constructor === Array) { 412 for (var value of val) { 413 pass = relate[alias].includes(Number(value)); 414 if (pass) { 415 break; 416 } 417 } 418 } else { 419 if (relate.constructor === Array) { 420 pass = relate[alias].includes(val); 421 } else { 422 pass = relate == val; 423 } 424 } 425 (!pass) && $this.prop('selected', false).attr('disabled', true); 426 $this.parent('select').val($thisSelectValue) 427 }); 428 429 if (!$(this).is($nowChange)){ 430 431 $(this).children().sort(function(a, b){ 432 let al = $(a).is('[disabled]') ? 4000 + $(a).attr('data-order') : $(a
432).attr('data-order') 433 let bl = $(b).is('[disabled]') ? 4000 + $(b).attr('data-order') : $(b).attr('data-order') 434 return al - bl; 435 }).detach().appendTo(this); 436 $(this).val(val) 437 $(this).next().remove(); 438 $(this).awselect(); 439 setValue(this); 440 } 441 }); 442 443 444 }); 445 $("body").delegate("[awselect]", "aw:animate", function() { 446 animate($('.awselect[data-select="' + $(this).attr("id") + '"]')); 447 }); 448 $("body").delegate("[awselect]", "aw:deanimate", function() { 449 deanimate($('.awselect[data-select="' + $(this).attr("id") + '"]')); 450 }); 451 $("body").delegate("[awselect]", "change", function() { 452 setValue(this); 453 }); 454 $("html").delegate("body", "mouseup", function(e) { 455 var awselect = $(".awselect"); 456 457 if (!awselect.is(e.target) && awselect.has(e.target).length === 0 ) { 458 deanimate(); 459 } 460 }); 461 if (typeof $.initialize == 'function'){ 462 $.initialize('[type=awselect]', function() { 463 if ($(this).is(':not("[awselect]")')){ 464 $(this).attr('awselect', '').awselect(); 465 $(this).change(); 466 } 467 }); 468 } else { 469 window.init_awselect = function(){ 470 $('[type=awselect]:not("[awselect]")').attr('awselect', '').awselect(); 471 }; 472 window.init_awselect(); 473 } 474 475});
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.