import $ from 'jquery';
import 'selectize';
import '../../utils/selectize-required-fix';
import '../../utils/selectize-option-click';
const PagesRoute = {
option: function(item, escape) {
const label = escape(item.text).split(' ');
const arrows = label.shift();
const slug = label.shift();
return `
${arrows}
${slug.replace('(', '/').replace(')', '')}
${label.join(' ')}
`;
}
};
export default class SelectizeField {
constructor(options = {}) {
this.options = Object.assign({}, options);
this.elements = [];
$('[data-grav-selectize]').each((index, element) => this.add(element));
$('body').on('mutation._grav', this._onAddedNodes.bind(this));
}
add(element) {
element = $(element);
if (element.closest('template').length) {
return false;
}
let tag = element.prop('tagName').toLowerCase();
let isInput = tag === 'input' || tag === 'select';
let data = (isInput ? element.closest('[data-grav-selectize]') : element).data('grav-selectize') || {};
let field = (isInput ? element : element.find('input, select'));
if (field.attr('name') === 'data[route]') {
data = $.extend({}, data, { render: PagesRoute });
}
if (!field.length || field.get(0).selectize) { return; }
const plugins = $.merge(data.plugins ? data.plugins : [], ['required-fix']);
field.selectize($.extend({}, data, { plugins }));
this.elements.push(field.data('selectize'));
}
_onAddedNodes(event, target/* , record, instance */) {
let fields = $(target).find('select.fancy, input.fancy, [data-grav-selectize]').filter((index, element) => {
return !$(element).closest('template').length;
});
if (!fields.length) { return; }
fields.each((index, field) => this.add(field));
}
}
export let Instance = new SelectizeField();