API Docs for: 1.0.0
Show:

File: src/gallery-querybuilder/js/String.js

/**
 * @module gallery-querybuilder
 */

/**********************************************************************
 * Plugin for accepting a string or number.  All the operators specified
 * for this plugin are displayed on a menu.
 * 
 * In the `var_list` configuration, specify `validation` to provide CSS
 * classes that will be interpreted by `Y.FormManager`.
 * 
 * To enable autocomplete, define `autocomplete` in the `var_list`
 * configuration.  The object will be used as the configuration for
 * `Y.Plugin.AutoComplete`.  If you specify
 * `autocomplete.containerClassName`, this CSS class will be added to the
 * container generated by the autocomplete plugin.
 * 
 * The `value` argument passed to `QueryBuilder.appendNew()` must be an
 * array with two elements: `[ operator_name, value ]`.
 * 
 * @namespace QueryBuilder
 * @class String
 */

QueryBuilder.String = function(
	/* object */	query_builder,
	/* object */	config)
{
	this.qb = query_builder;

	this.op_menu_name_pattern   = config.field_prefix + 'query_op_{i}';
	this.val_input_name_pattern = config.field_prefix + 'query_val_{i}';
};

QueryBuilder.String.prototype =
{
	create: function(
		/* int */		query_index,
		/* object */	var_config,
		/* array */		op_list,
		/* array */		value)
	{
		var op_cell = this.qb._createContainer();
		op_cell.set('className', this.qb.getClassName('operator'));
		op_cell.set('innerHTML', this._operationsMenu(this.operationName(query_index)));
		this.op_menu = op_cell.one('select');

		var options = this.op_menu.getDOMNode().options;
		for (var i=0; i<op_list.length; i++)
		{
			options[i] = new Option(op_list[i].text, op_list[i].value);
		}

		value = value || ['',''];
		if (value[0])
		{
			this.op_menu.set('value', value[0]);
		}

		if (has_bubble_problem)
		{
			this.op_menu.on('change', this.qb._notifyChanged, this.qb);
		}

		var value_cell = this.qb._createContainer();
		value_cell.set('className', this.qb.getClassName('value'));
		value_cell.set('innerHTML', this._valueInput(this.valueName(query_index), var_config.validation));
		this.value_input = value_cell.one('input');
		this.value_input.set('value', value[1]);	// avoid formatting

		return [ op_cell, value_cell ];
	},

	postCreate: function(
		/* int */		query_index,
		/* object */	var_config,
		/* array */		op_list,
		/* array */		value)
	{
		if (var_config.autocomplete)
		{
			var config    = Y.clone(var_config.autocomplete, true);
			config.render = Y.one('body');
			this.value_input.plug(Y.Plugin.AutoComplete, config);

			if (var_config.autocomplete.containerClassName)
			{
				this.value_input.ac.get('boundingBox').addClass(var_config.autocomplete.containerClassName);
			}
		}

		this.value_input.focus();
	},

	destroy: function()
	{
		if (this.value_input.unplug)
		{
			this.value_input.unplug(Y.Plugin.AutoComplete);
		}

		this.op_menu.remove(true);
		this.value_input.remove(true);

		this.value_input = null;
	},

	updateName: function(
		/* int */	new_index)
	{
		this.op_menu.setAttribute('name', this.operationName(new_index));
		this.value_input.setAttribute('name', this.valueName(new_index));
	},

	toDatabaseQuery: function()
	{
		return [ [ this.op_menu.get('value'), this.value_input.get('value') ] ];
	},

	/* *********************************************************************
	 * Form element names.
	 */

	operationName: function(
		/* int */	i)
	{
		return Y.Lang.sub(this.op_menu_name_pattern, {i:i});
	},

	valueName: function(
		/* int */	i)
	{
		return Y.Lang.sub(this.val_input_name_pattern, {i:i});
	},

	//
	// Markup
	//

	_operationsMenu: function(
		/* string */	menu_name)
	{
		// This must use a select tag!

		var markup = '<select name="{n}" class="{f} {c}" />';

		return Y.Lang.sub(markup,
		{
			n: menu_name,
			f: Y.FormManager.field_marker_class,
			c: this.qb.getClassName('field')
		});
	},

	_valueInput: function(
		/* string */	input_name,
		/* string */	validation_class)
	{
		// This must use an input tag!

		var markup = '<input type="text" name="{n}" class="yiv-required {f} {c}"/>';

		return Y.Lang.sub(markup,
		{
			n: input_name,
			f: Y.FormManager.field_marker_class,
			c: (validation_class || '') + ' ' + this.qb.getClassName('field')
		});
	}
};