2016-02-01 11:27:34 -08:00
|
|
|
import $ from 'jquery';
|
|
|
|
|
import 'selectize';
|
2017-09-26 05:34:54 +02:00
|
|
|
import '../../utils/selectize-required-fix';
|
2016-02-01 11:27:34 -08:00
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
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.length || field.get(0).selectize) { return; }
|
2017-09-26 05:34:54 +02:00
|
|
|
field.selectize($.extend({}, data, {
|
|
|
|
|
plugins: ['required-fix']
|
|
|
|
|
}));
|
2016-02-01 11:27:34 -08:00
|
|
|
|
|
|
|
|
this.elements.push(field.data('selectize'));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onAddedNodes(event, target/* , record, instance */) {
|
2016-07-12 14:58:41 -07:00
|
|
|
let fields = $(target).find('select.fancy, input.fancy, [data-grav-selectize]');
|
2016-02-01 11:27:34 -08:00
|
|
|
if (!fields.length) { return; }
|
|
|
|
|
|
|
|
|
|
fields.each((index, field) => this.add(field));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export let Instance = new SelectizeField();
|