diff --git a/assets/js/selectizer.js b/assets/js/selectizer.js index ba87c384..edce1883 100644 --- a/assets/js/selectizer.js +++ b/assets/js/selectizer.js @@ -1,202 +1,215 @@ /* global _, wu_initialize_selectizer, wu_selector */ (function($) { - $(document).ready(function() { + $(document).ready(function() { - window.wu_initialize_selectizer = function() { + window.wu_initialize_selectizer = function() { - jQuery('[data-selectize]').selectize(); + $.each($('[data-selectize]'), function(index, item) { - $.each($('[data-selectize-categories]'), function(index, item) { + const $el = jQuery($(item)); + const optionCount = $el.find('option').length; + const settings = {}; - jQuery($(item)).selectize({ - maxItems: $(item).data('max-items') || 10, - create(input) { + // Override maxOptions when the select has many options (e.g. TLD lists) + if (optionCount > 1000) { + settings.maxOptions = optionCount + 100; + } - return { - value: input, - text: input, - }; + $el.selectize(settings); - }, - }); + }); - }); + $.each($('[data-selectize-categories]'), function(index, item) { - $.each($('[data-model]'), function(index, item) { + jQuery($(item)).selectize({ + maxItems: $(item).data('max-items') || 10, + create(input) { - wu_selector({ - el: item, - valueField: $(item).data('value-field'), - labelField: $(item).data('label-field'), - searchField: $(item).data('search-field'), - maxItems: $(item).data('max-items'), - selected: $(item).data('selected'), - options: [], - data: { - action: 'wu_search', - model: $(item).data('model'), - number: 10, - exclude: $(item).data('exclude'), - include: $(item).data('include'), - }, - }); + return { + value: input, + text: input, + }; - }); + }, + }); - }; + }); - wu_initialize_selectizer(); + $.each($('[data-model]'), function(index, item) { - jQuery('body').on('wubox:load', function() { + wu_selector({ + el: item, + valueField: $(item).data('value-field'), + labelField: $(item).data('label-field'), + searchField: $(item).data('search-field'), + maxItems: $(item).data('max-items'), + selected: $(item).data('selected'), + options: [], + data: { + action: 'wu_search', + model: $(item).data('model'), + number: 10, + exclude: $(item).data('exclude'), + include: $(item).data('include'), + }, + }); - wu_initialize_selectizer(); + }); - }); + }; - }); + wu_initialize_selectizer(); - window.wu_selector = function wu_selector(options) { + jQuery('body').on('wubox:load', function() { - options = _.defaults(options, { - options: [], - maxItems: 1, - templateName: false, - create: false, - }); + wu_initialize_selectizer(); - if (jQuery(options.el).data('init')) { + }); - return; + }); - } // end if; + window.wu_selector = function wu_selector(options) { - jQuery(options.el).data('__options', options); + options = _.defaults(options, { + options: [], + maxItems: 1, + templateName: false, + create: false, + }); - const select = jQuery(options.el).selectize({ - valueField: options.valueField, - labelField: options.labelField, - searchField: ['text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code'], - options: options.options, - maxItems: options.maxItems, - create: options.create, - render: { - option(option) { + if (jQuery(options.el).data('init')) { - const templateName = options.templateName ? options.templateName : options.data.model; + return; - const template_html = jQuery('#wu-template-' + templateName).length - ? jQuery('#wu-template-' + templateName).html() - : jQuery('#wu-template-default').html(); + } // end if; - const template = _.template(template_html, { - interpolate: /\{\{(.+?)\}\}/g, - }); + jQuery(options.el).data('__options', options); - const render = template(option); + const select = jQuery(options.el).selectize({ + valueField: options.valueField, + labelField: options.labelField, + searchField: [ 'text', 'name', 'display_name', 'domain', 'path', 'title', 'desc', 'code', 'post_title', 'reference_code' ], + options: options.options, + maxItems: options.maxItems, + create: options.create, + render: { + option(option) { - return render; + const templateName = options.templateName ? options.templateName : options.data.model; - }, - }, - load(query, callback) { + const template_html = jQuery('#wu-template-' + templateName).length + ? jQuery('#wu-template-' + templateName).html() + : jQuery('#wu-template-default').html(); - if (! query.length) { + const template = _.template(template_html, { + interpolate: /\{\{(.+?)\}\}/g, + }); - return callback(); + const render = template(option); - } // end if; + return render; - const __options = jQuery(options.el).data('__options'); + }, + }, + load(query, callback) { - jQuery.ajax({ - // eslint-disable-next-line no-undef - url: wu_selectizer.ajaxurl, - type: 'POST', - data: { - ...__options.data, - query: { - search: '*' + query + '*', - }, - }, - error() { + if (! query.length) { - callback(); + return callback(); - }, - success(res) { + } // end if; - selectize.savedItems = res; + const __options = jQuery(options.el).data('__options'); - callback(res); + jQuery.ajax({ + // eslint-disable-next-line no-undef + url: wu_selectizer.ajaxurl, + type: 'POST', + data: { + ...__options.data, + query: { + search: '*' + query + '*', + }, + }, + error() { - }, - }); + callback(); - }, - }); + }, + success(res) { - jQuery(options.el).attr('data-init', 1); + selectize.savedItems = res; - const selectize = select[0].selectize; + callback(res); - /* + }, + }); + + }, + }); + + jQuery(options.el).attr('data-init', 1); + + const selectize = select[ 0 ].selectize; + + /* * Makes sure this is reactive for vue */ - selectize.on('change', function(value) { + selectize.on('change', function(value) { - const input = jQuery(select[0]); + const input = jQuery(select[ 0 ]); - const vue_app = input.parents('[data-wu-app]').data('wu-app'); + const vue_app = input.parents('[data-wu-app]').data('wu-app'); - if (vue_app && typeof window['wu_' + vue_app] !== 'undefined') { + if (vue_app && typeof window[ 'wu_' + vue_app ] !== 'undefined') { - window['wu_' + vue_app][input.attr('name')] = value; + window[ 'wu_' + vue_app ][ input.attr('name') ] = value; - } // end if; + } // end if; - }); + }); - selectize.on('item_add', function(value) { + selectize.on('item_add', function(value) { - let active_item = { - url: null, - }; + let active_item = { + url: null, + }; - jQuery.each(selectize.savedItems, function(index, item) { + jQuery.each(selectize.savedItems, function(index, item) { - if (item.setting_id === value) { + if (item.setting_id === value) { - active_item = item; + active_item = item; - } // end if; + } // end if; - }); + }); - if (active_item.url) { + if (active_item.url) { - window.location.href = active_item.url; + window.location.href = active_item.url; - } // end if; + } // end if; - }); + }); - if (options.selected) { + if (options.selected) { - selectize.options = []; + selectize.options = []; - selectize.clearOptions(); + selectize.clearOptions(); - const selected_values = _.isArray(options.selected) ? options.selected : [options.selected]; + const selected_values = _.isArray(options.selected) ? options.selected : [ options.selected ]; - selectize.addOption(selected_values); + selectize.addOption(selected_values); - const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[options.valueField]; + const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[ options.valueField ]; - selectize.setValue(selected, false); + selectize.setValue(selected, false); - } // end if; + } // end if; - }; + }; }(jQuery)); diff --git a/assets/js/selectizer.min.js b/assets/js/selectizer.min.js index e301a424..09034b0d 100644 --- a/assets/js/selectizer.min.js +++ b/assets/js/selectizer.min.js @@ -1 +1 @@ -(a=>{a(document).ready(function(){window.wu_initialize_selectizer=function(){jQuery("[data-selectize]").selectize(),a.each(a("[data-selectize-categories]"),function(e,t){jQuery(a(t)).selectize({maxItems:a(t).data("max-items")||10,create(e){return{value:e,text:e}}})}),a.each(a("[data-model]"),function(e,t){wu_selector({el:t,valueField:a(t).data("value-field"),labelField:a(t).data("label-field"),searchField:a(t).data("search-field"),maxItems:a(t).data("max-items"),selected:a(t).data("selected"),options:[],data:{action:"wu_search",model:a(t).data("model"),number:10,exclude:a(t).data("exclude"),include:a(t).data("include")}})})},wu_initialize_selectizer(),jQuery("body").on("wubox:load",function(){wu_initialize_selectizer()})}),window.wu_selector=function(l){if(l=_.defaults(l,{options:[],maxItems:1,templateName:!1,create:!1}),jQuery(l.el).data("init"))return;jQuery(l.el).data("__options",l);let i=jQuery(l.el).selectize({valueField:l.valueField,labelField:l.labelField,searchField:["text","name","display_name","domain","path","title","desc","code","post_title","reference_code"],options:l.options,maxItems:l.maxItems,create:l.create,render:{option(e){var t=l.templateName||l.data.model,t=(jQuery("#wu-template-"+t).length?jQuery("#wu-template-"+t):jQuery("#wu-template-default")).html();return _.template(t,{interpolate:/\{\{(.+?)\}\}/g})(e)}},load(e,t){if(!e.length)return t();var a=jQuery(l.el).data("__options");jQuery.ajax({url:wu_selectizer.ajaxurl,type:"POST",data:{...a.data,query:{search:"*"+e+"*"}},error(){t()},success(e){d.savedItems=e,t(e)}})}}),d=(jQuery(l.el).attr("data-init",1),i[0].selectize);var e;d.on("change",function(e){var t=jQuery(i[0]),a=t.parents("[data-wu-app]").data("wu-app");a&&void 0!==window["wu_"+a]&&(window["wu_"+a][t.attr("name")]=e)}),d.on("item_add",function(a){let l={url:null};jQuery.each(d.savedItems,function(e,t){t.setting_id===a&&(l=t)}),l.url&&(window.location.href=l.url)}),l.selected&&(d.options=[],d.clearOptions(),e=_.isArray(l.selected)?l.selected:[l.selected],d.addOption(e),e=_.isArray(l.selected)?_.pluck(l.selected,l.valueField):l.selected[l.valueField],d.setValue(e,!1))}})(jQuery); \ No newline at end of file +(i=>{i(document).ready(function(){window.wu_initialize_selectizer=function(){i.each(i("[data-selectize]"),function(e,t){var t=jQuery(i(t)),a=t.find("option").length,l={};1e3