Released 0.7.5.

aag-peace · Sep 8, 2013 · 0116a10 · 0116a10
1 parent 0a35be7
commit 0116a10
Show file tree

Hide file tree

Showing 17 changed files with 173 additions and 117 deletions.
diff --git a/bower.json b/bower.json
@@ -2,7 +2,7 @@
 	"name": "selectize",
 	"keywords": ["select", "ui", "form", "input", "control", "autocomplete", "tagging", "tag"],
 	"description": "Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.",
-	"version": "0.7.4",
+	"version": "0.7.5",
 	"license": "Apache License, Version 2.0",
 	"readmeFilename": "README.md",
 	"repository": {

diff --git a/dist/css/selectize.bootstrap2.css b/dist/css/selectize.bootstrap2.css
@@ -1,5 +1,5 @@
 /**
- * selectize.bootstrap2.css (v0.7.4) - Bootstrap 2 Theme
+ * selectize.bootstrap2.css (v0.7.5) - Bootstrap 2 Theme
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -79,12 +79,12 @@
   border-top: 0 none;
 }
 
-.selectize-control.plugin-remove_button .item {
+.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
 }
 
-.selectize-control.plugin-remove_button .item .remove {
+.selectize-control.plugin-remove_button [data-value] .remove {
   position: absolute;
   top: 0;
   right: 0;
@@ -107,11 +107,11 @@
           box-sizing: border-box;
 }
 
-.selectize-control.plugin-remove_button .item .remove:hover {
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.selectize-control.plugin-remove_button .item.active .remove {
+.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: #0077b3;
 }
 

diff --git a/dist/css/selectize.bootstrap3.css b/dist/css/selectize.bootstrap3.css
@@ -1,5 +1,5 @@
 /**
- * selectize.bootstrap3.css (v0.7.4) - Bootstrap 3 Theme
+ * selectize.bootstrap3.css (v0.7.5) - Bootstrap 3 Theme
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -79,12 +79,12 @@
   border-top: 0 none;
 }
 
-.selectize-control.plugin-remove_button .item {
+.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
 }
 
-.selectize-control.plugin-remove_button .item .remove {
+.selectize-control.plugin-remove_button [data-value] .remove {
   position: absolute;
   top: 0;
   right: 0;
@@ -107,11 +107,11 @@
           box-sizing: border-box;
 }
 
-.selectize-control.plugin-remove_button .item .remove:hover {
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.selectize-control.plugin-remove_button .item.active .remove {
+.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: rgba(0, 0, 0, 0);
 }
 

diff --git a/dist/css/selectize.css b/dist/css/selectize.css
@@ -1,5 +1,5 @@
 /**
- * selectize.css (v0.7.4)
+ * selectize.css (v0.7.5)
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -79,12 +79,12 @@
   border-top: 0 none;
 }
 
-.selectize-control.plugin-remove_button .item {
+.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
 }
 
-.selectize-control.plugin-remove_button .item .remove {
+.selectize-control.plugin-remove_button [data-value] .remove {
   position: absolute;
   top: 0;
   right: 0;
@@ -107,11 +107,11 @@
           box-sizing: border-box;
 }
 
-.selectize-control.plugin-remove_button .item .remove:hover {
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.selectize-control.plugin-remove_button .item.active .remove {
+.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: #cacaca;
 }
 

diff --git a/dist/css/selectize.default.css b/dist/css/selectize.default.css
@@ -1,5 +1,5 @@
 /**
- * selectize.default.css (v0.7.4) - Default Theme
+ * selectize.default.css (v0.7.5) - Default Theme
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -79,12 +79,12 @@
   border-top: 0 none;
 }
 
-.selectize-control.plugin-remove_button .item {
+.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
 }
 
-.selectize-control.plugin-remove_button .item .remove {
+.selectize-control.plugin-remove_button [data-value] .remove {
   position: absolute;
   top: 0;
   right: 0;
@@ -107,11 +107,11 @@
           box-sizing: border-box;
 }
 
-.selectize-control.plugin-remove_button .item .remove:hover {
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.selectize-control.plugin-remove_button .item.active .remove {
+.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: #00578d;
 }
 
@@ -403,12 +403,12 @@
 }
 
 .selectize-dropdown .optgroup-header {
+  padding-top: 7px;
   font-size: 0.85em;
   font-weight: bold;
 }
 
 .selectize-dropdown .optgroup {
-  padding-top: 4px;
   border-top: 1px solid #f0f0f0;
 }
 

diff --git a/dist/css/selectize.legacy.css b/dist/css/selectize.legacy.css
@@ -1,5 +1,5 @@
 /**
- * selectize.legacy.css (v0.7.4) - Default Theme
+ * selectize.legacy.css (v0.7.5) - Default Theme
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -79,12 +79,12 @@
   border-top: 0 none;
 }
 
-.selectize-control.plugin-remove_button .item {
+.selectize-control.plugin-remove_button [data-value] {
   position: relative;
   padding-right: 24px !important;
 }
 
-.selectize-control.plugin-remove_button .item .remove {
+.selectize-control.plugin-remove_button [data-value] .remove {
   position: absolute;
   top: 0;
   right: 0;
@@ -107,11 +107,11 @@
           box-sizing: border-box;
 }
 
-.selectize-control.plugin-remove_button .item .remove:hover {
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.selectize-control.plugin-remove_button .item.active .remove {
+.selectize-control.plugin-remove_button [data-value].active .remove {
   border-left-color: #6f9839;
 }
 

diff --git a/dist/js/selectize.js b/dist/js/selectize.js
@@ -1,5 +1,5 @@
 /**
- * selectize.js (v0.7.4)
+ * selectize.js (v0.7.5)
  * Copyright (c) 2013 Brian Reavis & contributors
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
@@ -510,6 +510,7 @@
 
 		self.initializePlugins(self.settings.plugins);
 		self.setupCallbacks();
+		self.setupTemplates();
 		self.setup();
 	};
 
@@ -559,8 +560,7 @@
 			$dropdown_content = $('<div>').addClass(settings.dropdownContentClass).appendTo($dropdown);
 
 			$wrapper.css({
-				width: self.$input[0].style.width,
-				display: self.$input.css('display')
+				width: self.$input[0].style.width
 			});
 
 			if (self.plugins.names.length) {
@@ -680,6 +680,35 @@
 			}
 		},
 
+		/**
+		 * Sets up default rendering functions.
+		 */
+		setupTemplates: function() {
+			var self = this;
+			var field_label = self.settings.labelField;
+			var field_optgroup = self.settings.optgroupLabelField;
+
+			var templates = {
+				'optgroup': function(data) {
+					return '<div class="optgroup">' + data.html + '</div>';
+				},
+				'optgroup_header': function(data, escape) {
+					return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
+				},
+				'option': function(data, escape) {
+					return '<div class="option">' + escape(data[field_label]) + '</div>';
+				},
+				'item': function(data, escape) {
+					return '<div class="item">' + escape(data[field_label]) + '</div>';
+				},
+				'option_create': function(data, escape) {
+					return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>';
+				},
+			};
+
+			self.settings.render = $.extend({}, templates, self.settings.render);
+		},
+
 		/**
 		 * Maps fired events to callbacks provided
 		 * in the settings used when creating the control.
@@ -2091,29 +2120,7 @@
 			}
 
 			// render markup
-			if (self.settings.render && typeof self.settings.render[templateName] === 'function') {
-				html = self.settings.render[templateName].apply(this, [data, escape_html]);
-			} else {
-				label = data[self.settings.labelField];
-				switch (templateName) {
-					case 'optgroup':
-						html = '<div class="optgroup">' + data.html + "</div>";
-						break;
-					case 'optgroup_header':
-						label = data[self.settings.optgroupLabelField];
-						html = '<div class="optgroup-header">' + escape_html(label) + '</div>';
-						break;
-					case 'option':
-						html = '<div class="option">' + escape_html(label) + '</div>';
-						break;
-					case 'item':
-						html = '<div class="item">' + escape_html(label) + '</div>';
-						break;
-					case 'option_create':
-						html = '<div class="create">Add <strong>' + escape_html(data.input) + '</strong>&hellip;</div>';
-						break;
-				}
-			}
+			html = self.settings.render[templateName].apply(this, [data, escape_html]);
 
 			// add mandatory attributes
 			if (templateName === 'option' || templateName === 'option_create') {
@@ -2459,32 +2466,53 @@
 	});
 
 	Selectize.define('remove_button', function(options) {
-		var self = this;
+		if (this.settings.mode === 'single') return;
 
-		if (self.settings.mode === 'single') {
-			return;
-		}
+		options = $.extend({
+			label     : '&times;',
+			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>';
 
-		// override the item rendering method to add a "x" to each
-		this.settings.render.item = function(data) {
-			var label = data[self.settings.labelField];
-			return '<div class="item">' + label + ' <a href="javascript:void(0)" class="remove" tabindex="-1" title="Remove">&times;</a></div>';
+		/**
+		 * 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);
 		};
 
-		// override the setup method to add an extra "click" handler
-		// that listens for mousedown events on the "x"
 		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), options.html);
+					};
+				}
+
 				original.apply(this, arguments);
-				this.$control.on('click', '.remove', function(e) {
+
+				// add event listener
+				this.$control.on('click', '.' + options.className, function(e) {
 					e.preventDefault();
 					var $item = $(e.target).parent();
 					self.setActiveItem($item);
 					if (self.deleteSelection()) {
 						self.setCaret(self.items.length);
 					}
 				});
+
 			};
 		})();
 

diff --git a/dist/js/selectize.min.js b/dist/js/selectize.min.js