Add tomselect remove_button plugin

app/assets/javascripts/application.js.erb

@@ -1,6 +1,10 @@
-//= require tom-select.base.js
 //= require_tree .
 
+//= require tom-select.base.js
+//= require TomSelect_remove_button
+// require TomSelect_caret_position from 'tom-select/dist/js/plugins/caret_position'
+// require TomSelect_input_autogrow from 'tom-select/dist/js/plugins/input_autogrow'
+
 "use strict";
 
 const parentSelector = (target, selector) => {
@@ -354,8 +358,13 @@ class _LobstersFunction {
   }
 
   tomSelect(item) {
+    TomSelect.define('remove_button', remove_button);
+
+    // TomSelect.define('caret_position', TomSelect_caret_position);
+    // TomSelect.define('input_autogrow', TomSelect_input_autogrow);
+    // TomSelect.define('remove_button', require('tom-select/dist/js/plugins/remove_button.js'));  // doesn't understand require
     this.tom = new TomSelect('#story_tags_a', {
-      //plugins: ['dropdown_input', 'input_autogrow', 'caret_position', 'remove_button'],
+      plugins: ['remove_button'], //'input_autogrow', 'caret_position',
       maxOptions: 8,
       maxItems: 10,
       hideSelected: true,

app/assets/stylesheets/application.css.erb

@@ -1,6 +1,7 @@
 /*
 *= require_self
 *= require tom-select
+*= require TomSelect_remove_button
 */
 
 /* light and dark mode colorschemes */

vendor/assets/javascripts/TomSelect_remove_button.js

@@ -0,0 +1,154 @@
+/**
+* Tom Select v2.1.0
+* Licensed under the Apache License, Version 2.0 (the "License");
+*/
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.remove_button = factory());
+})(this, (function () { 'use strict';
+
+	// @ts-ignore TS2691 "An import path cannot end with a '.ts' extension"
+	const latin_convert = {
+	  'æ': 'ae',
+	  'ⱥ': 'a',
+	  'ø': 'o'
+	};
+	new RegExp(Object.keys(latin_convert).join('|'), 'gu');
+
+	/**
+	 * Return a dom element from either a dom query string, jQuery object, a dom element or html string
+	 * https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
+	 *
+	 * param query should be {}
+	 */
+
+	const getDom = query => {
+	  if (query.jquery) {
+	    return query[0];
+	  }
+
+	  if (query instanceof HTMLElement) {
+	    return query;
+	  }
+
+	  if (isHtmlString(query)) {
+	    let div = document.createElement('div');
+	    div.innerHTML = query.trim(); // Never return a text node of whitespace as the result
+
+	    return div.firstChild;
+	  }
+
+	  return document.querySelector(query);
+	};
+	const isHtmlString = arg => {
+	  if (typeof arg === 'string' && arg.indexOf('<') > -1) {
+	    return true;
+	  }
+
+	  return false;
+	};
+
+	/**
+	 * Converts a scalar to its best string representation
+	 * for hash keys and HTML attribute values.
+	 *
+	 * Transformations:
+	 *   'str'     -> 'str'
+	 *   null      -> ''
+	 *   undefined -> ''
+	 *   true      -> '1'
+	 *   false     -> '0'
+	 *   0         -> '0'
+	 *   1         -> '1'
+	 *
+	 */
+	/**
+	 * Escapes a string for use within HTML.
+	 *
+	 */
+
+	const escape_html = str => {
+	  return (str + '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+	};
+	/**
+	 * Prevent default
+	 *
+	 */
+
+	const preventDefault = (evt, stop = false) => {
+	  if (evt) {
+	    evt.preventDefault();
+
+	    if (stop) {
+	      evt.stopPropagation();
+	    }
+	  }
+	};
+	/**
+	 * Prevent default
+	 *
+	 */
+
+	const addEvent = (target, type, callback, options) => {
+	  target.addEventListener(type, callback, options);
+	};
+
+	/**
+	 * Plugin: "remove_button" (Tom Select)
+	 * Copyright (c) contributors
+	 *
+	 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+	 * file except in compliance with the License. You may obtain a copy of the License at:
+	 * http://www.apache.org/licenses/LICENSE-2.0
+	 *
+	 * Unless required by applicable law or agreed to in writing, software distributed under
+	 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+	 * ANY KIND, either express or implied. See the License for the specific language
+	 * governing permissions and limitations under the License.
+	 *
+	 */
+	function plugin (userOptions) {
+	  const options = Object.assign({
+	    label: '&times;',
+	    title: 'Remove',
+	    className: 'remove',
+	    append: true
+	  }, userOptions); //options.className = 'remove-single';
+
+	  var self = this; // override the render method to add remove button to each item
+
+	  if (!options.append) {
+	    return;
+	  }
+
+	  var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
+	  self.hook('after', 'setupTemplates', () => {
+	    var orig_render_item = self.settings.render.item;
+
+	    self.settings.render.item = (data, escape) => {
+	      var item = getDom(orig_render_item.call(self, data, escape));
+	      var close_button = getDom(html);
+	      item.appendChild(close_button);
+	      addEvent(close_button, 'mousedown', evt => {
+	        preventDefault(evt, true);
+	      });
+	      addEvent(close_button, 'click', evt => {
+	        // propagating will trigger the dropdown to show for single mode
+	        preventDefault(evt, true);
+	        if (self.isLocked) return;
+	        if (!self.shouldDelete([item], evt)) return;
+	        self.removeItem(item);
+	        self.refreshOptions(false);
+	        self.inputState();
+	      });
+	      return item;
+	    };
+	  });
+	}
+
+	return plugin;
+
+}));
+//# sourceMappingURL=remove_button.js.map

vendor/assets/stylesheets/TomSelect_remove_button.css

@@ -0,0 +1,44 @@
+.#{$select-ns}-wrapper.plugin-remove_button{
+
+	.item{
+		display:		inline-flex;
+		align-items:	center;
+		padding-right:	0 !important;
+	}
+
+	.item .remove {
+		color:				inherit;
+		text-decoration:	none;
+		vertical-align:		middle;
+		display:			inline-block;
+		padding:			0 $select-padding-item-x;
+		border-left:		1px solid $select-color-item-border;
+		border-radius:		0 2px 2px 0;
+		box-sizing:			border-box;
+		margin-left:		$select-padding-item-x;
+	}
+
+	.item .remove:hover {
+		background: rgba(0,0,0,0.05);
+	}
+
+	.item.active .remove {
+		border-left-color: $select-color-item-active-border;
+	}
+
+	&.disabled .item .remove:hover {
+		background: none;
+	}
+
+	&.disabled .item .remove {
+		border-left-color: lighten(desaturate($select-color-item-border, 100%), $select-lighten-disabled-item-border);
+	}
+
+	.remove-single {
+		position: absolute;
+		right: 0;
+		top: 0;
+		font-size: 23px;
+	}
+
+}