combo_auto_box 0.0.5 → 0.0.6

data/lib/combo_auto_box/version.rb

@@ -1,3 +1,3 @@
 module ComboAutoBox
-  VERSION = '0.0.5'
+  VERSION = '0.0.6'
 end

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

@@ -9,11 +9,24 @@ var ComboAutoBox = {
 				now++;
 			}
 
-			return "combo-auto-box-" + now;
+			return prefix + "-" + now;
 		};
 		
 		// binds autocomplete to text field
 		var bindAutoComplete = function (inputId) {
+ 			var previuosValue = '';
+			$('#' + inputId).keydown(function(e) {
+				if ((e.keyCode == 8) && (options.type == 'multiple') && ($('#' + inputId).val() == '')) {
+					$('#' + container + ' > div.multiple > div.item:last').remove();
+				}
+
+				if ((e.keyCode == 8) && (options.type == 'searchable') && ($('#' + inputId).val() == '')) {
+					$('#' + container + ' > div.searchable > div.item:last').remove();
+					selectData('');
+				}
+
+			});
+			
 			$('#' + inputId).keypress(function(e) {
 				if (e.which === 13) {
 					if (options.type == 'full') {
@@ -24,8 +37,8 @@ var ComboAutoBox = {
 						addItem(inputId, $('#' + inputId).val(), $('#' + inputId).val());
 						selectData($('#' + inputId).val());
 						$('#' + inputId).val('');
-					}
-					return false;		
+					} 
+					return false;
 				}
 			});
 						
@@ -38,17 +51,47 @@ var ComboAutoBox = {
 						return selectData($('#' + inputId).val());
 					} else if (options.type == 'multiple') {
 						$('#' + inputId).val('');
-						addItem(inputId, ui.item.label, ui.item.id);
+						addItem(inputId, ui.item.id, ui.item.label);
+						selectData(ui.item.id);
+						return false;
+					} else if (options.type == 'searchable') {
+						$('#' + inputId).val('');
+						addSearchableItemForRansack(inputId, ui.item.id, ui.item.label);
 						selectData(ui.item.id);
 						return false;
 					}
-				}
+				},
+				search: function(event, ui) {
+					if (options.type == 'searchable') {
+						$('#' + inputId).autocomplete("option", { source: setAutoCompleteSource(inputId) }); 
+					}
+				},
+				change: function (event, ui) {
+					if (!ui.item) {
+						$(this).val('');
+					}
+				},
+				focus: function (event, ui) {
+					event.preventDefault();
+				},
 			});
 		};
 		
 		// set autocomplete source
 		var setAutoCompleteSource = function (inputId) {
-			if (typeof options.source == 'string') {
+			if (options.type == 'searchable') {
+				var new_source = new Array();
+				var operators = i18nMath(options.lang);
+				$.each(options.source, function(i){
+					validIndexes = validSource(options.source[i]);
+					$.each(operators, function(j){
+						if (validIndexes.indexOf(j) >= 0) {
+							new_source.push( { id: options.source[i]['id'] + '_' + operators[j]['id'], label: options.source[i]['label'] + ' ' + operators[j]['label'] + ' ' + $('#' + inputId).val()} );
+						}
+					});
+				});
+				return new_source;
+			} else if (typeof options.source == 'string') {
 				return function(request, response) {
 					var term = 'term=' + $('#' + inputId).val();
 					var params = (options.data == null) ? term : options.data + '&' + term;
@@ -59,12 +102,37 @@ var ComboAutoBox = {
 			}
 		};
 		
+		// get i18n math comparisons
+		var i18nMath = function (language) {
+			var operators = new Array();
+			switch(language) {
+				case 'en':
+					operators = [ { id: 'cont', label: 'contains' }, { id: 'eq', label: 'equal' }, { id: 'gteq', label: 'greater or equal' }, { id: 'lteq', label: 'less or equal' } ];
+				break;
+				case 'pt-br':
+					operators = [ { id: 'cont', label: 'contém' }, { id: 'eq', label: 'igual' }, { id: 'gteq', label: 'maior que' }, { id: 'lteq', label: 'menor que' } ];
+				break;
+				case 'pt':
+					operators = [ { id: 'cont', label: 'contém' }, { id: 'eq', label: 'igual' }, { id: 'gteq', label: 'maior que' }, { id: 'lteq', label: 'menor que' } ];
+				break;
+				case 'fr':
+				    operators = [ { id: 'cont', label: 'contient' }, { id: 'eq', label: 'égal' }, { id: 'gteq', label: 'supérieur ou égal' }, { id: 'lteq', label: 'inférieur ou égal' } ];
+				break;
+				case 'es':
+					operators = [ { id: 'cont', label: 'contiene' }, { id: 'eq', label: 'igual' }, { id: 'gteq', label: 'mayor o igual' }, { id: 'lteq', label: 'menos o igual' } ];
+				break;
+				default:
+					operators = [ { id: 'cont', label: '~=' }, { id: 'eq', label: '=' }, { id: 'gteq', label: '>=' }, { id: 'lteq', label: '<=' } ];
+			}
+			return operators;
+		};
+		
 		// generates text field with html options
 		var generateInputTag = function () {
 			var html = 'input type="text"';
 			if (options.html != null) {
 				$.each(options.html, function(key, value) {
-					if ((key == 'name') && (options.type == 'multiple')) {
+					if ((key == 'name') && ((options.type == 'multiple') || (options.type == 'searchable'))) {
 						return true;
 					}
 		    		html = html + ' '+ key +'="' + value + '"';
@@ -79,10 +147,31 @@ var ComboAutoBox = {
 		};
 
 		// On click opens modal image tag inside "i" tag through css
-		var generateImageTag = function () {
-	        return '<span class="expand"><i></i></span>';
+		var generateExpander = function () {
+			if (options.type == 'simple') {
+	        	return '<span class="simple"><i></i></span>';
+			} else if (options.type == 'multiple') {
+	        	return '<span class="multiple">' + options.label + ':</span>';
+			}
 		};
 
+		var adjustExpanderImage = function() {
+			if (options.type != 'simple') {
+				return false;
+			}
+			
+			spanTag = $('#' + container + ' > div.container-combo-auto-box > span.simple');
+			var paddingRight = 1;
+			try {
+				paddingRight = parseInt(textField.css('padding-right').replace(/px/, ''));
+			} catch (error) {
+				paddingRight = 1;
+			}
+			spanTag.css('margin', '2px 0px 0px ' + (paddingRight + textField.width() + 9).toString() + 'px');
+			
+			return true;
+		}
+
 		// Global div for combo auto box
 		var generateDivTag = function () {
 			var derivation = ''
@@ -115,7 +204,7 @@ var ComboAutoBox = {
 			
 			$("#" + modalDialogId).siblings('div.ui-dialog-titlebar').remove();
 			
-			$('#' + container + ' > div.container-combo-auto-box > span.expand').click(function() { 
+			$('#' + container + ' > div.container-combo-auto-box > span.' + options.type).click(function() { 
 				openModalDialog(modalDialogId) 
 			});
 		};
@@ -151,9 +240,19 @@ var ComboAutoBox = {
 			$('#' + modalDialogId + ' > div.list').css('height', ($('#' + modalDialogId).dialog("option", "height") - 60) + 'px');
 			$('#' + modalDialogId + ' > div.list > ul').html(items.join(''));
 			$('#' + modalDialogId + ' > div.list > ul > li').click(function() {
+				var thisId = $(this).children('span.combo-auto-box-item-id').text();
+				var thisLabel = $(this).children('span.combo-auto-box-item-label').text();
+				
 				$('#' + modalDialogId).dialog('close');
-				$('#' + container + ' > div.container-combo-auto-box > input').val($(this).children('span.combo-auto-box-item-label').text());
-				selectData($(this).children('span.combo-auto-box-item-id').text());
+				
+				if (options.type == 'simple') {
+					$('#' + container + ' > div.container-combo-auto-box > input').val(thisLabel);
+					selectData(thisId);
+				} else if (options.type == 'multiple') {
+					$('#' + container + ' > div.container-combo-auto-box > input').val('');
+					addItem($('#' + container + ' > div.container-combo-auto-box > input').attr('id'), thisLabel, thisLabel);
+					selectData(thisId);
+				}
 			});			
 		};
 
@@ -164,22 +263,15 @@ var ComboAutoBox = {
 		
 		// starting generate modial dialog
 		var generateModalDialog = function (textField) {
-			$(generateImageTag()).prependTo('#' + container + ' > div.container-combo-auto-box');
+			$(generateExpander()).prependTo('#' + container + ' > div.container-combo-auto-box');
 
-			spanTag = $('#' + container + ' > div.container-combo-auto-box > span.expand');
-			var paddingRight = 1;
-			try {
-				paddingRight = parseInt(textField.css('padding-right').replace(/px/, ''));
-			} catch (error) {
-				paddingRight = 1;
-			}
-			spanTag.css('margin', '2px 0px 0px ' + (paddingRight + textField.width() + 9).toString() + 'px');
+			adjustExpanderImage();
 			
 			generateDivDialogModal(generateAnId('model-dialog'));			
 		};
 
 		// add item
-		var addItem = function (inputId, selectedData, selectedId) {
+		var addItem = function (inputId, selectedId, selectedData) {
 			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>');
@@ -190,12 +282,72 @@ var ComboAutoBox = {
 
 			}
 		};
+
+		// add searchable item for ransack
+		var addSearchableItemForRansack = function (inputId, selectedId, selectedData) {
+			if (selectedData != '') {
+				var ransackId = generateAnId('ransack');
+				attribute = getSearchableAttribute(selectedId);
+				fieldAttribute = '<input type="hidden" name="q[g]['+ attribute +'][c]['+ ransackId +'][a][0][name]"  value="'+ attribute +'">';
+				fieldCondition = '<input type="hidden" name="q[g]['+ attribute +'][c]['+ ransackId +'][p]"           value="'+ getSearchableCondition(selectedId) +'">';
+				fieldValue =     '<input type="hidden" name="q[g]['+ attribute +'][c]['+ ransackId +'][v][0][value]" value="'+ getSearchableValue(selectedData) +'">';
+				var id = generateAnId('item');
+				$('#' + inputId).before('<div class="item" title="Remove Item" id="' + id + '">'+ selectedData +'<span>x</span>'+ fieldAttribute + fieldCondition + fieldValue +'</div>');
+
+				$('#' + id + ' > span').click(function() {
+					$(this).parent().remove();
+					selectData('');
+				});
+			}
+		};
 		
-		//  Bind click on div for multiple
+		// add searchable item
+		var addSearchableItem = function (inputId, selectedId, selectedData) {			
+			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 +'['+ selectedId +'][]" value="'+ getSearchableValue(selectedData) +'"></div>');
+
+				$('#' + id + ' > span').click(function() {
+					$(this).parent().remove();
+					selectData('');
+				});
+
+			}
+		};
+						
+		// get only the attribute from selected Data
+		var getSearchableAttribute = function (selectedId) {
+			var fields = $.map(options.source, function(val, i) { return val['id']}).join('|');
+			var maths = $.map(i18nMath(options.lang), function(val, i) { return val['id']}).join('|');
+			var pattern = new RegExp('(' + fields + ')_(' + maths + ')');
+			return selectedId.match(pattern)[1];
+		}
+				
+		// get only the condition from selected Data
+		var getSearchableCondition = function (selectedId) {
+			var fields = $.map(options.source, function(val, i) { return val['id']}).join('|');
+			var maths = $.map(i18nMath(options.lang), function(val, i) { return val['id']}).join('|');
+			var pattern = new RegExp('(' + fields + ')_(' + maths + ')');
+			return selectedId.match(pattern)[2];
+		}
+
+		// get only the value from selected Data
+		var getSearchableValue = function (selectedData) {
+			var fields = $.map(options.source, function(val, i) { return val['label']}).join('|');
+			var maths = $.map(i18nMath(options.lang), function(val, i) { return val['label']}).join('|');
+			var pattern = new RegExp('(' + fields + ') (' + maths + ') (.*)');
+			return selectedData.match(pattern)[3];
+		}
+				
+		//  Bind click on div for multiple or searchble
 		var bindContainerClick = function(inputId) {
 			$('#' + container + ' > div.multiple').click(function() {
 				$('#' + inputId).focus();
 			});			
+
+			$('#' + container + ' > div.searchable').click(function() {
+				$('#' + inputId).focus();
+			});			
 		};
 				
 		// on select data
@@ -205,23 +357,76 @@ var ComboAutoBox = {
 			}
 		};
 
+		// valid language or set 'en' as default
+		var validLanguage = function () {
+			var langs = ['math', 'en', 'pt-br', 'pt', 'es', 'fr'];
+			for(var i=0; i<langs.length;i++) {
+				if (options.lang == langs[i]) {
+					return true;
+				}
+			}
+			
+			options.lang = 'en';
+			return true;
+		};
+
+		// valid language or set 'en' as default
+		var validType = function () {
+			var types = ['simple', 'full', 'multiple', 'searchable'];
+			for(var i=0; i<types.length;i++) {
+				if (options.type == types[i]) {
+					return true;
+				}
+			}
+			
+			options.type = 'simple';
+			return true;
+		};
+		
+		// valid sources for only and except
+		var validSource = function (source) {
+			operators = i18nMath('math');
+			validIndexes = new Array();
+			
+			if (((source['only'] != null) && (source['except'] != null)) || ((source['only'] == null) && (source['except'] == null))) {
+				for(var i=0; i<operators.length;i++) {
+					validIndexes.push(i);
+				}
+			} else if (source['only'] != null) {
+				for(var i=0; i<operators.length;i++) {
+					if ((source['only'].indexOf(operators[i]['id']) + source['only'].indexOf(operators[i]['label'])) >= -1) {
+						validIndexes.push(i);
+					}
+				}				
+			} else if (source['except'] != null) {
+				for(var i=0; i<operators.length;i++) {
+					if ((source['except'].indexOf(operators[i]['id']) + source['except'].indexOf(operators[i]['label'])) == -2) {
+						validIndexes.push(i);
+					}
+				}
+			}
+			
+			return validIndexes;
+		}
+
 		// main
 		if (options == null) {
 			options = {};
 		}
-		
-		if ((options.type == null) || ((options.type != 'simple') && (options.type != 'full') && (options.type != 'multiple') && (options.type != 'searchable'))) {
-			options.type = 'simple';
-		}
+
+		validLanguage();
+		validType();
 
 		$('#' + container).html(generateDivTag());
 		
 		textField = $('#' + container + ' > div.container-combo-auto-box > input');
 		bindAutoComplete(textField.attr('id'));
 		
-		if (options.type == 'simple') {
+		if ((options.type == 'simple') || (options.type == 'multiple')) {
 			generateModalDialog(textField);
-		} else if (options.type == 'multiple') {
+		}
+		
+		if ((options.type == 'multiple') || (options.type == 'searchable')) {
 			bindContainerClick(textField.attr('id'));
 		}
     }

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

@@ -1,16 +1,22 @@
 span.combo-auto-box-item-id { display:none; }
-div.container-combo-auto-box span.expand{display:block;position:absolute;cursor:pointer;display:block;margin:0px 0px 0px 0px; width:20px;}
-
-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.container-combo-auto-box span.simple { position:absolute;cursor:pointer;display:block;margin:0px 0px 0px 0px; width:20px; }
+div.container-combo-auto-box span.simple 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 span.multiple { font-family: arial,sans-serif; float:left; font-size: 13px; color:#9A9A9A; margin: 2px 2px 2px 2px; padding:2px 10px 2px 10px; }
 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 { font-family: arial,sans-serif; float:left; font-size: 13px; color:#000000; 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; }
 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.searchable { border: 1px solid #CDCDCD; display:table; }
+div.searchable input { border: 0px; float:left; height:22px; }
+div.searchable div.item { font-family: arial,sans-serif; float:left; font-size: 13px; color:#FFFFFF; background-color:#008000; margin: 2px 10px 2px 2px; padding:2px 10px 2px 10px; -moz-border-radius:4px;-webkit-border-radius:4px; border:1px solid #ECECEC; }
+div.searchable div.item span { margin-left:10px; color:#CCCCCC; }
+div.searchable div.item span:hover { color:#FFFFFF; cursor:pointer;}
+div.searchable 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.5
+  version: 0.0.6
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-12 00:00:00.000000000 Z
+date: 2013-07-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport