203 lines
4.3 KiB
JavaScript
203 lines
4.3 KiB
JavaScript
/* global _, wu_initialize_selectizer, wu_selector */
|
|
(function($) {
|
|
|
|
$(document).ready(function() {
|
|
|
|
window.wu_initialize_selectizer = function() {
|
|
|
|
jQuery('[data-selectize]').selectize();
|
|
|
|
$.each($('[data-selectize-categories]'), function(index, item) {
|
|
|
|
jQuery($(item)).selectize({
|
|
maxItems: $(item).data('max-items') || 10,
|
|
create(input) {
|
|
|
|
return {
|
|
value: input,
|
|
text: input,
|
|
};
|
|
|
|
},
|
|
});
|
|
|
|
});
|
|
|
|
$.each($('[data-model]'), function(index, item) {
|
|
|
|
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();
|
|
|
|
jQuery('body').on('wubox:load', function() {
|
|
|
|
wu_initialize_selectizer();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
window.wu_selector = function wu_selector(options) {
|
|
|
|
options = _.defaults(options, {
|
|
options: [],
|
|
maxItems: 1,
|
|
templateName: false,
|
|
create: false,
|
|
});
|
|
|
|
if (jQuery(options.el).data('init')) {
|
|
|
|
return;
|
|
|
|
} // end if;
|
|
|
|
jQuery(options.el).data('__options', options);
|
|
|
|
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) {
|
|
|
|
const templateName = options.templateName ? options.templateName : options.data.model;
|
|
|
|
const template_html = jQuery('#wu-template-' + templateName).length
|
|
? jQuery('#wu-template-' + templateName).html()
|
|
: jQuery('#wu-template-default').html();
|
|
|
|
const template = _.template(template_html, {
|
|
interpolate: /\{\{(.+?)\}\}/g,
|
|
});
|
|
|
|
const render = template(option);
|
|
|
|
return render;
|
|
|
|
},
|
|
},
|
|
load(query, callback) {
|
|
|
|
if (! query.length) {
|
|
|
|
return callback();
|
|
|
|
} // end if;
|
|
|
|
const __options = jQuery(options.el).data('__options');
|
|
|
|
jQuery.ajax({
|
|
// eslint-disable-next-line no-undef
|
|
url: wu_selectizer.ajaxurl,
|
|
type: 'POST',
|
|
data: {
|
|
...__options.data,
|
|
query: {
|
|
search: '*' + query + '*',
|
|
},
|
|
},
|
|
error() {
|
|
|
|
callback();
|
|
|
|
},
|
|
success(res) {
|
|
|
|
selectize.savedItems = res;
|
|
|
|
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) {
|
|
|
|
const input = jQuery(select[0]);
|
|
|
|
const vue_app = input.parents('[data-wu-app]').data('wu-app');
|
|
|
|
if (vue_app && typeof window['wu_' + vue_app] !== 'undefined') {
|
|
|
|
window['wu_' + vue_app][input.attr('name')] = value;
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
selectize.on('item_add', function(value) {
|
|
|
|
let active_item = {
|
|
url: null,
|
|
};
|
|
|
|
jQuery.each(selectize.savedItems, function(index, item) {
|
|
|
|
if (item.setting_id === value) {
|
|
|
|
active_item = item;
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
if (active_item.url) {
|
|
|
|
window.location.href = active_item.url;
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
if (options.selected) {
|
|
|
|
selectize.options = [];
|
|
|
|
selectize.clearOptions();
|
|
|
|
const selected_values = _.isArray(options.selected) ? options.selected : [options.selected];
|
|
|
|
selectize.addOption(selected_values);
|
|
|
|
const selected = _.isArray(options.selected) ? _.pluck(options.selected, options.valueField) : options.selected[options.valueField];
|
|
|
|
selectize.setValue(selected, false);
|
|
|
|
} // end if;
|
|
|
|
};
|
|
|
|
}(jQuery));
|