combo_auto_box 0.0.6 → 0.0.7

data/lib/combo_auto_box/version.rb

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

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

@@ -1,32 +1,41 @@
 var ComboAutoBox = {
 	// constructor
-    addTo: function (container, options) {
-		
+	addTo: function (container, options) {
 		// generatea an ID based on current time
-		var generateAnId = function(prefix) {
-			var now = new Date().getTime();;
+		var generateShortId = function(prefix) {
+			var now = 0;
 			while ($("#" + prefix +"-" + now).length != 0) {
 				now++;
 			}
+	
+			return prefix + "-" + now;
+		};
 
+		// generatea an ID based on current time
+		var generateAnId = function(prefix) {
+			var now = new Date().getTime();
+			while ($("#" + prefix +"-" + now).length != 0) {
+				now++;
+			}
+	
 			return prefix + "-" + now;
 		};
-		
+	
 		// binds autocomplete to text field
 		var bindAutoComplete = function (inputId) {
- 			var previuosValue = '';
+			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') {
@@ -41,7 +50,7 @@ var ComboAutoBox = {
 					return false;
 				}
 			});
-						
+					
 			$('#' + inputId).autocomplete({
 				source: setAutoCompleteSource(inputId),
 				select: function(event, ui) {
@@ -76,7 +85,7 @@ var ComboAutoBox = {
 				},
 			});
 		};
-		
+	
 		// set autocomplete source
 		var setAutoCompleteSource = function (inputId) {
 			if (options.type == 'searchable') {
@@ -101,7 +110,7 @@ var ComboAutoBox = {
 				return options.source;
 			}
 		};
-		
+	
 		// get i18n math comparisons
 		var i18nMath = function (language) {
 			var operators = new Array();
@@ -126,7 +135,7 @@ var ComboAutoBox = {
 			}
 			return operators;
 		};
-		
+	
 		// generates text field with html options
 		var generateInputTag = function () {
 			var html = 'input type="text"';
@@ -138,28 +147,28 @@ var ComboAutoBox = {
 		    		html = html + ' '+ key +'="' + value + '"';
 				});
 			}
-
+	
 			if ((options.html == null) || (options.html.id == null)) {
 			    html = html + ' id="' + generateAnId('combo-auto-box') + '"';
 			}
-
-	        return '<' + html + '>';
+	
+		        return '<' + html + '>';
 		};
-
+	
 		// On click opens modal image tag inside "i" tag through css
 		var generateExpander = function () {
 			if (options.type == 'simple') {
-	        	return '<span class="simple"><i></i></span>';
+		        	return '<span class="simple"><i></i></span>';
 			} else if (options.type == 'multiple') {
-	        	return '<span class="multiple">' + options.label + ':</span>';
+		        	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 {
@@ -168,10 +177,10 @@ var ComboAutoBox = {
 				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 = ''
@@ -180,18 +189,18 @@ var ComboAutoBox = {
 			} else if (options.type == 'searchable') {
 				derivation = ' searchable'				
 			}
-			
-	        return '<div class="container-combo-auto-box' + derivation + '">' + generateInputTag() + '</div>';
+		
+		        return '<div class="container-combo-auto-box' + derivation + '">' + generateInputTag() + '</div>';
 		};
-
+	
 		// dialog modal
 		var generateDivDialogModal = function (modalDialogId) {
-	        $('<div id="'+ modalDialogId +'" class="dialog-modal"><div class="head"><span class="label">' + options.label + '</span><span class="close" title="Close">X</span></div><div class="list"><ul></ul></div></div>').appendTo('#' + container);
+		        $('<div id="'+ modalDialogId +'" class="dialog-modal"><div class="head"><span class="label">' + options.label + '</span><span class="close" title="Close">X</span></div><div class="list"><ul></ul></div></div>').appendTo('#' + container);
 	
 			$('#' + modalDialogId + ' > div.head > span.close').click(function() {
 				$('#' + modalDialogId).dialog('close');
 			});
-
+	
 			$('#' + modalDialogId).dialog({
 				width: 500,
 				height: 400,
@@ -199,28 +208,28 @@ var ComboAutoBox = {
 				closeOnEscape: true,
 				autoOpen: false,
 			});
-
+	
 			getListForModalDialog(modalDialogId);
-			
+		
 			$("#" + modalDialogId).siblings('div.ui-dialog-titlebar').remove();
-			
+		
 			$('#' + container + ' > div.container-combo-auto-box > span.' + options.type).click(function() { 
 				openModalDialog(modalDialogId) 
 			});
 		};
-
+	
 		// Selects an item form modal dialog when clicked on
 		var selectValueFromModalDialog = function (value) {
 			$('#' + container + ' > div.container-combo-auto-box > input').val(value);
 			selectData(value);
 		};
-		
+	
 		// generates list for modal dialog
 		var getListForModalDialog = function (modalDialogId) {
 			if (typeof options.source == 'string') {
 				var term = 'term=';
 				var params = (options.data == null) ? term : options.data + '&' + term;
-
+	
 				$.getJSON(options.source + '?' + params, function(data) {
 					setListForModalDialog(modalDialogId, data);
 				});
@@ -228,23 +237,23 @@ var ComboAutoBox = {
 				setListForModalDialog(modalDialogId, options.source);
 			}
 		};
-		
+	
 		// set list for modal dialog
 		var setListForModalDialog = function (modalDialogId, data) {
 			var items = [];
-			
+		
 			$.each(data, function(index){
 				items.push('<li><span class="combo-auto-box-item-id">' + data[index].id +'</span><span class="combo-auto-box-item-label">'+ data[index].label + '</span></li>');
 			});
-			
+		
 			$('#' + 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');
-				
+			
 				if (options.type == 'simple') {
 					$('#' + container + ' > div.container-combo-auto-box > input').val(thisLabel);
 					selectData(thisId);
@@ -255,108 +264,126 @@ var ComboAutoBox = {
 				}
 			});			
 		};
-
+	
 		// opens modal dialog
 		var openModalDialog = function (modalDialogId) {
-	        $('#' + modalDialogId).dialog("open");
+		        $('#' + modalDialogId).dialog("open");
 		};
-		
+	
 		// starting generate modial dialog
 		var generateModalDialog = function (textField) {
 			$(generateExpander()).prependTo('#' + container + ' > div.container-combo-auto-box');
-
+	
 			adjustExpanderImage();
-			
+		
 			generateDivDialogModal(generateAnId('model-dialog'));			
 		};
-
+	
 		// add item
 		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>');
-
+	
 				$('#' + id + ' > span').click(function() {
 					$(this).parent().remove();
 				});
-
+	
 			}
 		};
-
+	
 		// 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 ransackId = generateShortId('r');
+				predicate = getSearchablePredicate(selectedId);
+				if (getSearchableValue(selectedData) == null) {
+					selectedData = predicate['full'] + ' ' + selectedData;
+				}
+				fieldAttribute = '<input type="hidden" name="q[g]['+ predicate['attribute'] +'][c]['+ ransackId +'][a][0][name]"  value="'+ predicate['attribute'] +'">';
+				fieldCondition = '<input type="hidden" name="q[g]['+ predicate['attribute'] +'][c]['+ ransackId +'][p]"           value="'+ predicate['condition'] +'">';
+				fieldValue =     '<input type="hidden" name="q[g]['+ predicate['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('');
 				});
 			}
 		};
-		
+	
 		// 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) {
+		// return json with attribute and condition
+		var getSearchablePredicate = 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];
+			var matched = selectedId.match(pattern);
+			var full = getSearchableLabelForAttributeId(matched[1]) + ' ' + getSearchableLabelForConditionId(matched[2]);
+			return { attribute: matched[1], condition: matched[2], full: full };
 		}
-
+	
 		// 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];
+			try {
+				return selectedData.match(pattern)[3];
+			} catch (error) {
+				return null;
+			}
 		}
-				
+		
+		var getSearchableLabelForAttributeId = function (attibuteId) {
+			for(var i=0; i<options.source.length;i++) {
+				if (options.source[i]['id'] == attibuteId) {
+					return options.source[i]['label'];
+				}
+			}
+		}
+
+		var getSearchableLabelForConditionId = function (conditionId) {
+			var conditions = i18nMath(options.lang);
+			for(var i=0; i<conditions.length;i++) {
+				if (conditions[i]['id'] == conditionId) {
+					return conditions[i]['label'];
+				}
+			}
+		}
+			
 		//  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
 		var selectData = function (selectedData) {
 			if (options.complete != null) {
 				options.complete(selectedData);
 			}
 		};
-
+	
 		// valid language or set 'en' as default
 		var validLanguage = function () {
 			var langs = ['math', 'en', 'pt-br', 'pt', 'es', 'fr'];
@@ -365,11 +392,11 @@ var ComboAutoBox = {
 					return true;
 				}
 			}
-			
+		
 			options.lang = 'en';
 			return true;
 		};
-
+	
 		// valid language or set 'en' as default
 		var validType = function () {
 			var types = ['simple', 'full', 'multiple', 'searchable'];
@@ -378,16 +405,16 @@ var ComboAutoBox = {
 					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);
@@ -405,30 +432,43 @@ var ComboAutoBox = {
 					}
 				}
 			}
-			
+		
 			return validIndexes;
 		}
-
+	
 		// main
 		if (options == null) {
 			options = {};
 		}
-
+	
 		validLanguage();
 		validType();
-
+	
 		$('#' + container).html(generateDivTag());
-		
+	
 		textField = $('#' + container + ' > div.container-combo-auto-box > input');
 		bindAutoComplete(textField.attr('id'));
-		
+	
 		if ((options.type == 'simple') || (options.type == 'multiple')) {
 			generateModalDialog(textField);
 		}
-		
+	
 		if ((options.type == 'multiple') || (options.type == 'searchable')) {
 			bindContainerClick(textField.attr('id'));
 		}
-    }
+		
+		if ((options.type == 'multiple') && (options.initials != null)) {
+			$.each(options.initials, function(index){
+				addItem(textField.attr('id'), options.initials[index]['id'], options.initials[index]['label']);
+			}); 
+		}
+
+		if ((options.type == 'searchable') && (options.initials != null)) {
+			$.each(options.initials, function(index){
+				addSearchableItemForRansack(textField.attr('id'), options.initials[index]['id'], options.initials[index]['label']);
+			}); 
+		}
+
+	}
+}
 
-}

metadata

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