/**
* @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')
});
}
};