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