combo_auto_box 0.0.3 → 0.0.4

data/lib/combo_auto_box/version.rb

@@ -1,3 +1,3 @@
 module ComboAutoBox
-  VERSION = '0.0.3'
+  VERSION = '0.0.4'
 end

data/vendor/assets/javascripts/combo-auto-box.js

@@ -19,6 +19,11 @@ var ComboAutoBox = {
 					if (options.type == 'full') {
 						$('#' + inputId).autocomplete( "close" );
 						selectData($('#' + inputId).val());
+					} else if (options.type == 'multiple') {
+						$('#' + inputId).autocomplete( "close" );
+						addItem(inputId, $('#' + inputId).val(), $('#' + inputId).val());
+						selectData($('#' + inputId).val());
+						$('#' + inputId).val('');
 					}
 					return false;		
 				}
@@ -29,8 +34,13 @@ var ComboAutoBox = {
 				select: function(event, ui) {
 					if (options.type == 'simple') {
 						return selectData(ui.item.id);
-					} else {
+					} else if (options.type == 'full') {
 						return selectData($('#' + inputId).val());
+					} else if (options.type == 'multiple') {
+						$('#' + inputId).val('');
+						addItem(inputId, ui.item.label, ui.item.id);
+						selectData(ui.item.id);
+						return false;
 					}
 				}
 			});
@@ -54,7 +64,10 @@ var ComboAutoBox = {
 			var html = 'input type="text"';
 			if (options.html != null) {
 				$.each(options.html, function(key, value) {
-			    	html = html + ' '+ key +'="' + value + '"';
+					if ((key == 'name') && (options.type == 'multiple')) {
+						return true;
+					}
+		    		html = html + ' '+ key +'="' + value + '"';
 				});
 			}
 
@@ -72,7 +85,14 @@ var ComboAutoBox = {
 
 		// Global div for combo auto box
 		var generateDivTag = function () {
-	        return '<div class="container-combo-auto-box">' + generateInputTag() + '</div>';
+			var derivation = ''
+			if (options.type == 'multiple') {
+				derivation = ' multiple'
+			} else if (options.type == 'searchable') {
+				derivation = ' searchable'				
+			}
+			
+	        return '<div class="container-combo-auto-box' + derivation + '">' + generateInputTag() + '</div>';
 		};
 
 		// dialog modal
@@ -157,7 +177,27 @@ var ComboAutoBox = {
 			
 			generateDivDialogModal(generateAnId('model-dialog'));			
 		};
+
+		// add item
+		var addItem = function (inputId, selectedData, selectedId) {
+			if (selectedData != '') {
+				var id = generateAnId('item');
+				$('#' + inputId).before('<div class="item" title="Remove Item" id="' + id + '">'+ selectedData +'<span>x</span><input type="hidden" name="'+ options.html.name +'[]" value="'+ selectedId +'"></div>');
+
+				$('#' + id + ' > span').click(function() {
+					$(this).parent().remove();
+				});
+
+			}
+		};
 		
+		//  Bind click on div for multiple
+		var bindContainerClick = function(inputId) {
+			$('#' + container + ' > div.multiple').click(function() {
+				$('#' + inputId).focus();
+			});			
+		};
+				
 		// on select data
 		var selectData = function (selectedData) {
 			if (options.complete != null) {
@@ -170,7 +210,7 @@ var ComboAutoBox = {
 			options = {};
 		}
 		
-		if ((options.type == null) || ((options.type != 'simple') && (options.type != 'full'))) {
+		if ((options.type == null) || ((options.type != 'simple') && (options.type != 'full') && (options.type != 'multiple') && (options.type != 'searchable'))) {
 			options.type = 'simple';
 		}
 
@@ -181,6 +221,8 @@ var ComboAutoBox = {
 		
 		if (options.type == 'simple') {
 			generateModalDialog(textField);
+		} else if (options.type == 'multiple') {
+			bindContainerClick(textField.attr('id'));
 		}
     }
 

data/vendor/assets/stylesheets/combo-auto-box.css

@@ -3,6 +3,14 @@ div.container-combo-auto-box span.expand{display:block;position:absolute;cursor:
 
 div.container-combo-auto-box span.expand i{background-image:url(/assets/combo_auto_box_expand.png);width:19px;height:19px;display:block;font-size:0;}
 
+div.multiple { border: 1px solid #CDCDCD; display:table; }
+div.multiple input { border: 0px; float:left; height:22px; }
+
+div.multiple div.item { font-family: arial,sans-serif; float:left; background-color:#EDEDED; margin: 2px 10px 2px 2px; padding:2px 10px 2px 10px; -moz-border-radius:4px;-webkit-border-radius:4px; border:1px solid #CECECE; font-size: 13px; }
+div.multiple div.item span { margin-left:10px; color:#CCCCCC; }
+div.multiple div.item span:hover { color:#9A9A9A; cursor:pointer;}
+div.multiple input:focus {outline:none; }
+
 div.dialog-modal div.head { display:block; width:99%; position:absolute; z-index:2002; top:0px; left:0px; border: 1px solid #000; background-color:#CECECE; height:30px; -moz-border-radius:4px;-webkit-border-radius:4px;}
 div.dialog-modal div.head span.label { float:left; margin: 5px 0 0 10px; padding: 0 0 0 0; text-weight: bold; font-size:16px; font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";}
 div.dialog-modal div.head span.close { float:right; margin: 5px 10px 0 0; padding: 0 0 0 0; font-size:16px; font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif"; text-indent: 0;}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: combo_auto_box
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-05-29 00:00:00.000000000 Z
+date: 2013-07-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport