Initial Commit

assets/js/selectizer.js

@@ -0,0 +1,202 @@
+/* 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));