four-boot
Version:
javascript library to convert html select into beautiful Bootstrap 4 dropdown
7 lines • 12 kB
JavaScript
/*!
* four-boot v2.0.0 (https://github.com/IbraheemAlnabriss/four-boot)
*
* Copyright 2018 four-boot
* Licensed under MIT (https://github.com/IbraheemAlnabriss/four-boot/blob/master/LICENSE)
*/
(-1!==navigator.userAgent.indexOf("MSIE")||navigator.appVersion.indexOf("Trident/")>0)&&(String.prototype.includes=function(o){return-1!=this.search(o)},Array.prototype.includes=function(o){return this.filter(function(t){return t===o}).length>0}),function(o,t,e,i){var n,r,s={class:"btn-outline-dark",dropdownClass:"",closeOnSelect:!0,multipleSelectedSeparator:", ",liveSearch:!1,liveSearchCaseSensitive:!1,maxOptions:null,autoSelectFirst:!1,selectedTextFormat:"values",height:"192px",observerEnabled:!0,actions:!1,header:null,lang:"en",dict:{en:{selectAll:"Select all",deselectAll:"Delect all",nothingSelected:"Nothing selected",search:"search ...",noSearchResult:'No results matched "%%"'},ar:{selectAll:"تحديد الكل",deselectAll:"إلغاء الكل",nothingSelected:"لا شيء محدد",search:"البحث ...",noSearchResult:'لا يوجد ما يطابق "%%"'}}},a=null,d={reset:function(){f.apply(this),c(this)},update:function(){c(this)},val:function(t){o(this).val(t.param1),o(this).change(),c(this)},disabled:function(t){o(this).prop("disabled",t.param1),c(this)},toggle:function(){o(this).siblings().hasClass("show")?o(this).siblings().removeClass("show").find(".dropdown-menu").removeClass("show"):o(this).siblings().addClass("show").find(".dropdown-menu").addClass("show")},hide:function(){o(this).closest(".four-boot").addClass("d-none")},show:function(){o(this).closest(".four-boot").removeClass("d-none")},destroy:function(){o(this).siblings().remove(),o(this).unwrap(".four-boot"),o(this).show(),delete this.fourBootOptions},"select-all":function(){O(this)},"deselect-all":function(){y(this)},set:function(o){if("string"==typeof o.param1&&o.param1.trim().length){if(void 0!==this.fourBootOptions[o.param1])return this.fourBootOptions[o.param1]=o.param2,c(this),a;throw Error("option ["+o.param1+"] is not declared")}throw Error("no option specified to set it")},get:function(o){var t=JSON.parse(JSON.stringify(this.fourBootOptions));if("string"==typeof o.param1&&o.param1.trim().length){if(void 0!==t[o.param1])return t[o.param1];throw Error("option ["+o.param1+"] is not declared")}return t}},l=(a=null,null),u=(n=t.MutationObserver||t.WebKitMutationObserver,r=t.addEventListener,function(o,t){n?new n(function(e,i){(e[0].addedNodes.length||e[0].removedNodes.length)&&t(o,e[0].addedNodes,e[0].removedNodes)}).observe(o,{childList:!0,subtree:!0}):r&&(o.addEventListener("DOMNodeInserted",t,!1),o.addEventListener("DOMNodeRemoved",t,!1))});function p(o){var t=this.fourBootOptions.lang;return this.fourBootOptions.dict[t][o]}function f(t){t=t||!1,this.fourBootOptions=o.extend({},l,function(o,t){var e=JSON.parse(JSON.stringify(o));for(var i in e)Object.keys(t).includes(i)||delete e[i];return e}(o(this).data(),s)),this.fourBootOptions.autoSelectFirst||!t||o(this).find("option[selected]").length||(o(this).is("[multiple]")?o(this).val([]):o(this).val(null))}function c(t){var e=o(t).siblings().hasClass("show");o(t).siblings().remove(),o(t).after(h(t)),e&&o(t).siblings().find(".dropdown-toggle").click()}function h(t){var e=o(t).prop("disabled")?"disabled":"",i='<div class="dropdown '+t.fourBootOptions.dropdownClass+' "><button '+e+' class="btn dropdown-toggle '+function(o){return(o.className||"")+" "+(o.fourBootOptions.class||"")}(t)+'" type="button" id="fourboot_'+t.name+'" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'+v(t)+'</button><div class="dropdown-menu " aria-labelledby="fourboot_'+t.name+'">';return i+=function(o){if(null!==o.fourBootOptions.header)return'<p class="h6 dropdown-header four-boot-header">'+o.fourBootOptions.header+"</p>";return""}(t),i+=function(o){if(o.fourBootOptions.liveSearch){var t='<div class="dropdown-item four-boot-search"><input class="form-control" placeholder="'+p.apply(o,["search"])+'" /></div>';return t+='<div class="dropdown-divider"></div>'}return""}(t),i+=function(t){if(!o(t).is("[multiple]"))return"";var e='<div class="four-boot-actions container-fluid"><div class="row">';(!0===t.fourBootOptions.actions||w(t.fourBootOptions.actions)&&o.inArray("select-all",t.fourBootOptions.actions)>-1)&&(e+='<button type="button" class="btn col" data-four-boot-action="select-all">'+p.apply(t,["selectAll"])+"</button>");(!0===t.fourBootOptions.actions||w(t.fourBootOptions.actions)&&o.inArray("deselect-all",t.fourBootOptions.actions)>-1)&&(e+='<button type="button" class="btn col" data-four-boot-action="deselect-all">'+p.apply(t,["deselectAll"])+"</button>");return e+="</div></div>"}(t),i+='<div class="options-list" style="max-height:'+t.fourBootOptions.height+'">',i+=function(t){var e=0,i="";return o.each(o(t).find("> optgroup, > option"),function(n,r){if("OPTGROUP"===r.tagName){var s=isNaN(o(r).data("max-options"))?"":'data-max-options="'+o(r).data("max-options")+'"';i+='<small class="dropdown-header " '+s+' data-four-boot-optgroup-id="'+n+'">'+r.label+"</small>",o.each(o(r).find("> option"),function(s,a){i+=b(a,e++,m(t,a),n,o(r).prop("disabled")||o(a).prop("disabled"))}),i+='<div class="dropdown-divider"></div>'}else i+=b(r,e++,m(t,r),!1,o(r).prop("disabled"))}),i}(t),i+="</div></div></div>"}function b(t,e,n,r,s){if(n=n||!1,r=r||!1,s=s||!1,o(t).is("[data-divider]"))return'<div class="dropdown-divider"></div>';var a=s?"disabled":"",d=!1!==r?'data-four-boot-optgroup="'+r+'"':"",l=(o(t).data("tokens")||"").length?'data-four-boot-tokens="'+o(t).data("tokens")+'"':"",u=o(t).data("icon")!==i&&o(t).data("icon").length?'<i class="four-boot-option-icon '+o(t).data("icon")+'"></i>':"",p=o(t).data("content")!==i&&o(t).data("content").length?o(t).data("content"):u+t.text;return"<button "+a+' class="dropdown-item '+(o(t).data("class")||"")+" "+(n?"selected":"")+'" '+l+" "+d+' data-four-boot-item="'+e+'" type="button">'+p+"</button>"}function m(t,e){return o(t).is("[multiple]")?o(t).val().includes(e.value):o(t).val()===e.value}function v(t){var e=t.fourBootOptions.autoSelectFirst,i="",n=t.fourBootOptions.selectedTextFormat.toLowerCase().trim();function r(e){return"values"===e?o(t).find("option:selected").map(function(){return o(this).is("[title]")?this.title:o(this).text()}).get().join(t.fourBootOptions.multipleSelectedSeparator):"count"===e?o(t).find("option:selected").length+" of "+o(t).find("option").length+" selected":void 0}if("values"===n||"count"===n)i=r(n);else if(2===n.split(">").length&&"count"===n.split(">").shift().trim().toLowerCase()){var s=parseInt(n.split(">").pop())||1;i=r(o(t).find("option:selected").length>s?"count":"values")}return e&&(i=o(t).find("option:eq(0)").text()),i.trim().length&&"static"!==n||(i=t.title||t.fourBootOptions.placeholder),i&&(i.trim().length||e)||(i=p.apply(t,["nothingSelected"])),i}function w(o){return Object.prototype.toString.call(o)}function g(o){return"object"==typeof o.fourBootOptions}function O(t){o(t).is("[multiple]")&&(o(t).find("option").prop("selected",!0),o(t).change(),c(t))}function y(t){o(t).is("[multiple]")&&(o(t).find("option").prop("selected",!1),o(t).change(),c(t))}o.fn.fourBoot=function(t,e,i){t=t||null,i=(e=e||null)||null,l=o.extend({},o.fn.fourBoot.default,"object"==typeof t?t:{}),a=o(this);var n,r={};return r="[object Object]"===Object.prototype.toString.call(e)?e:{param1:e,param2:i},o.each(o(this),function(e,i){if(g(i)&&"string"!=typeof t)throw Error("FourBoot already initialized for: \r\n\r\n"+i.outerHTML+"\r\n");if(g(i)){if("function"==typeof d[t]){var s=JSON.parse(JSON.stringify(r));return n=d[t].apply(i,[s]),!1}throw Error("FourBoot does not have public method with name ["+t+"]")}(function(){f.apply(this,[!0]),o(this).wrap('<div class="four-boot '+(o(this).is("[multiple]")?"multiple":"")+'">'),o(this).hide().after(h(this)),this.fourBootOptions.observerEnabled&&u(this,function(o,t,e){f.apply(o),c(o)})}).apply(i)}),n},o.fn.fourBoot.default=s,o(e).on("hide.bs.dropdown",".four-boot .dropdown",function(){var t=o(this).closest(".four-boot");t.find(".dropdown-item.four-boot-search input").val(""),t.find(".dropdown-item.four-boot-search small").remove(),t.find(".dropdown-item:not(.four-boot-search)").show(),t.find(".dropdown-header").show(),t.find(".dropdown-divider").show()}),o(e).on("input",".four-boot .dropdown .dropdown-menu .dropdown-item.four-boot-search input",function(t){var e=o(this).closest(".four-boot"),i=e.find("select"),n=o(this).val(),r=i[0].fourBootOptions.liveSearchCaseSensitive;if(n.length){var s=e.find(".dropdown-item:not(.four-boot-search)").map(function(t,e){if(!r&&(o(e).data("four-boot-tokens")||"").toLowerCase().includes(n.toLowerCase())||!r&&o(e).text().toLowerCase().includes(n.toLowerCase())||r&&o(e).text().includes(n)||r&&(o(e).data("four-boot-tokens")||"").includes(n))return e});e.find(".dropdown-item:not(.four-boot-search)").hide(),e.find(".dropdown-header").hide(),e.find(".dropdown-divider").hide(),o.each(s,function(t,i){if(o(i).show(),o(i).is("[data-four-boot-optgroup]")){var n=e.find(".dropdown-header[data-four-boot-optgroup-id="+o(i).data("four-boot-optgroup")+"]");n.show(),n.prev(".dropdown-divider").show()}}),s.length||(o(this).parent().find("small").remove(),o(this).after("<small>"+p.apply(i[0],["noSearchResult"]).replace("%%",n)+"</small>"))}else e.find(".dropdown-item.four-boot-search small").remove(),e.find(".dropdown-item:not(.four-boot-search)").show(),e.find(".dropdown-header").show(),e.find(".dropdown-divider").show()}),o(e).on("click",".four-boot .dropdown",function(t){var e=o(this).closest(".four-boot").find("select");e.length&&(e.is("[multiple]")||!1===e[0].fourBootOptions.closeOnSelect)&&(t.preventDefault(),t.stopPropagation())}),o(e).on("click",".four-boot .dropdown .dropdown-menu .four-boot-actions button[data-four-boot-action]",function(t){switch(t.preventDefault(),t.stopPropagation(),o(this).data("four-boot-action")){case"select-all":O(o(this).closest(".four-boot").find("select").get(0));break;case"deselect-all":y(o(this).closest(".four-boot").find("select").get(0))}}),o(e).on("click",".four-boot .dropdown .dropdown-menu .dropdown-item[data-four-boot-item]",function(t){var e=o(this).closest(".four-boot"),i=e.find("select");if(i.is("[multiple]")){if(!o(this).hasClass("selected")&&!isNaN(i[0].fourBootOptions.maxOptions)&&i.val().length===i[0].fourBootOptions.maxOptions){e.find(".dropdown-item.fb-error,.dropdown-divider.fb-error").remove();var n=e.find(".dropdown-header:eq(0)").length?e.find(".dropdown-header:eq(0)"):e.find(".dropdown-item:not(.four-boot-search):eq(0)");return clearTimeout(e[0].timer),n.before('<small class="dropdown-item fb-error">max options reached</small>'),n.before('<div class="dropdown-divider fb-error"></div>'),void(e[0].timer=setTimeout(function(){e.find(".dropdown-item.fb-error,.dropdown-divider.fb-error").remove()},2e3))}var r=e.find("[data-four-boot-optgroup-id="+o(this).data("four-boot-optgroup")+"]");if(!o(this).hasClass("selected")&&o(this).is("[data-four-boot-optgroup]")&&!isNaN(r.data("max-options"))&&o("[data-four-boot-optgroup="+o(this).data("four-boot-optgroup")+"].selected").length===o("[data-four-boot-optgroup-id="+o(this).data("four-boot-optgroup")+"]").data("max-options"))return r.next("small.fb-error").remove(),clearTimeout(r[0].timer),r.after('<small class="dropdown-item fb-error">max group options reached</small>'),void(r[0].timer=setTimeout(function(){r.next("small.fb-error").remove()},2e3));o(this).toggleClass("selected");var s=[];o.each(o(this).parent().find(".dropdown-item.selected"),function(t,e){var n=i.find("option:eq("+o(e).data("four-boot-item")+")");s.push(n.val())}),i.val(s),e.find(".dropdown-toggle").text(v(i[0]))}else{var a=i.find("option:eq("+o(this).data("four-boot-item")+")");i.val(a.attr("value")),e.find(".dropdown-toggle").text(v(i[0])),o(this).addClass("selected").siblings().removeClass("selected")}o(i).change()})}(jQuery,window,document,void 0);