12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- 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 `<div class="selectize-route-option">
- <span class="text-grey">${arrows}</span>
- <span>
- <span class="text-update">${slug.replace('(', '/').replace(')', '')}</span>
- <span>${label.join(' ')}</span>
- </span>
- </div>`;
- }
- };
- 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.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]');
- if (!fields.length) { return; }
- fields.each((index, field) => this.add(field));
- }
- }
- export let Instance = new SelectizeField();
|