Merge pull request #848 from ChoppyThing/master

Plugin removeButton: Make it work with single option mode

Author: joallard

src/plugins/remove_button/plugin.js

@@ -15,56 +15,109 @@
  */
 
 Selectize.define('remove_button', function(options) {
-	if (this.settings.mode === 'single') return;
-
 	options = $.extend({
-		label     : '×',
-		title     : 'Remove',
-		className : 'remove',
-		append    : true
-	}, options);
-
-	var self = this;
-	var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
-
-	/**
-	 * Appends an element as a child (with raw HTML).
-	 *
-	 * @param {string} html_container
-	 * @param {string} html_element
-	 * @return {string}
-	 */
-	var append = function(html_container, html_element) {
-		var pos = html_container.search(/(<\/[^>]+>\s*)$/);
-		return html_container.substring(0, pos) + html_element + html_container.substring(pos);
-	};
-
-	this.setup = (function() {
-		var original = self.setup;
-		return function() {
-			// override the item rendering method to add the button to each
-			if (options.append) {
-				var render_item = self.settings.render.item;
-				self.settings.render.item = function(data) {
-					return append(render_item.apply(this, arguments), html);
+			label     : '&times;',
+			title     : 'Remove',
+			className : 'remove',
+			append    : true
+		}, options);
+
+		var singleClose = function(thisRef, options) {
+
+			options.className = 'remove-single';
+
+			var self = thisRef;
+			var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
+
+			/**
+			 * Appends an element as a child (with raw HTML).
+			 *
+			 * @param {string} html_container
+			 * @param {string} html_element
+			 * @return {string}
+			 */
+			var append = function(html_container, html_element) {
+				return html_container + html_element;
+			};
+
+			thisRef.setup = (function() {
+				var original = self.setup;
+				return function() {
+					// override the item rendering method to add the button to each
+					if (options.append) {
+						var id = $(self.$input.context).attr('id');
+						var selectizer = $('#'+id);
+
+						var render_item = self.settings.render.item;
+						self.settings.render.item = function(data) {
+							return append(render_item.apply(thisRef, arguments), html);
+						};
+					}
+
+					original.apply(thisRef, arguments);
+
+					// add event listener
+					thisRef.$control.on('click', '.' + options.className, function(e) {
+						e.preventDefault();
+						if (self.isLocked) return;
+
+						self.clear();
+					});
+
 				};
-			}
+			})();
+		};
+
+		var multiClose = function(thisRef, options) {
 
-			original.apply(this, arguments);
+			var self = thisRef;
+			var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
 
-			// add event listener
-			this.$control.on('click', '.' + options.className, function(e) {
-				e.preventDefault();
-				if (self.isLocked) return;
+			/**
+			 * Appends an element as a child (with raw HTML).
+			 *
+			 * @param {string} html_container
+			 * @param {string} html_element
+			 * @return {string}
+			 */
+			var append = function(html_container, html_element) {
+				var pos = html_container.search(/(<\/[^>]+>\s*)$/);
+				return html_container.substring(0, pos) + html_element + html_container.substring(pos);
+			};
 
-				var $item = $(e.currentTarget).parent();
-				self.setActiveItem($item);
-				if (self.deleteSelection()) {
-					self.setCaret(self.items.length);
-				}
-			});
+			thisRef.setup = (function() {
+				var original = self.setup;
+				return function() {
+					// override the item rendering method to add the button to each
+					if (options.append) {
+						var render_item = self.settings.render.item;
+						self.settings.render.item = function(data) {
+							return append(render_item.apply(thisRef, arguments), html);
+						};
+					}
 
+					original.apply(thisRef, arguments);
+
+					// add event listener
+					thisRef.$control.on('click', '.' + options.className, function(e) {
+						e.preventDefault();
+						if (self.isLocked) return;
+
+						var $item = $(e.currentTarget).parent();
+						self.setActiveItem($item);
+						if (self.deleteSelection()) {
+							self.setCaret(self.items.length);
+						}
+					});
+
+				};
+			})();
 		};
-	})();
 
-});
+		if (this.settings.mode === 'single') {
+			singleClose(this, options);
+			return;
+		} else {
+			multiClose(this, options);
+		}
+});

src/plugins/remove_button/plugin.less

@@ -34,4 +34,10 @@
 	.disabled [data-value] .remove {
 		border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
 	}
-}
+	.remove-single {
+		position: absolute;
+		right: 28px;
+		top: 6px;
+		font-size: 23px;
+	}
+}