inputEx Documentation
Back to homepage
inputEx Documentation
> Field.js
0.2.2
This is the source view for Field.js
(function() { var inputEx = YAHOO.inputEx, Dom = YAHOO.util.Dom, lang = YAHOO.lang, util = YAHOO.util; /** * @class An abstract class that contains the shared features for all fields * @constructor * @param {Object} options Configuration object *
*
name: the name of the field
*
required: boolean, the field cannot be null if true
*
className: CSS class name for the div wrapper (default 'inputEx-Field')
*
value: initial value
*
parentEl: HTMLElement or String id, append the field to this DOM element
*
*/ inputEx.Field = function(options) { if(!options) {var options = {}; } // Set the default values of the options this.setOptions(options); // Call the render of the dom this.render(); /** * @event * @param {Any} value The new value of the field * @desc YAHOO custom event fired when the field is "updated"
subscribe with: this.updatedEvt.subscribe(function(e, params) { var value = params[0]; console.log("updated",value, this.updatedEvt); }, this, true); */ this.updatedEvt = new util.CustomEvent('updated', this); // initialize behaviour events this.initEvents(); // Set the initial value // -> no initial value = no style (setClassFromState called by setValue) if(!lang.isUndefined(this.options.value)) { this.setValue(this.options.value, false); } // append it immediatly to the parent DOM element if(options.parentEl) { if( lang.isString(options.parentEl) ) { Dom.get(options.parentEl).appendChild(this.getEl()); } else { options.parentEl.appendChild(this.getEl()); } } }; inputEx.Field.prototype = { /** * Set the default values of the options * @param {Object} options Options object (inputEx inputParams) as passed to the constructor */ setOptions: function(options) { /** * Configuration object to set the options for this class and the parent classes. See constructor details for options added by this class. */ this.options = {}; // Basic options this.options.name = options.name; this.options.value = options.value; this.options.id = options.id || Dom.generateId(); this.options.label = options.label; this.options.description = options.description; // Define default messages this.options.messages = {}; this.options.messages.required = (options.messages && options.messages.required) ? options.messages.required : inputEx.messages.required; this.options.messages.invalid = (options.messages && options.messages.invalid) ? options.messages.invalid : inputEx.messages.invalid; //this.options.messages.valid = (options.messages && options.messages.valid) ? options.messages.valid : inputEx.messages.valid; // Other options this.options.className = options.className ? options.className : 'inputEx-Field'; this.options.required = lang.isUndefined(options.required) ? false : options.required; this.options.showMsg = lang.isUndefined(options.showMsg) ? false : options.showMsg; }, /** * Default render of the dom element. Create a divEl that wraps the field. */ render: function() { // Create a DIV element to wrap the editing el and the image this.divEl = inputEx.cn('div', {className: 'inputEx-fieldWrapper'}); if(this.options.id) { this.divEl.id = this.options.id; } if(this.options.required) { Dom.addClass(this.divEl, "inputEx-required"); } // Label element if(this.options.label) { this.labelDiv = inputEx.cn('div', {id: this.divEl.id+'-label', className: 'inputEx-label', 'for': this.divEl.id+'-field'}); this.labelEl = inputEx.cn('label'); this.labelEl.appendChild( document.createTextNode(this.options.label) ); this.labelDiv.appendChild(this.labelEl); this.divEl.appendChild(this.labelDiv); } this.fieldContainer = inputEx.cn('div', {className: this.options.className}); // for wrapping the field and description // Render the component directly this.renderComponent(); // Description if(this.options.description) { this.fieldContainer.appendChild(inputEx.cn('div', {id: this.divEl.id+'-desc', className: 'inputEx-description'}, null, this.options.description)); } this.divEl.appendChild(this.fieldContainer); // Insert a float breaker this.divEl.appendChild( inputEx.cn('div',null, {clear: 'both'}," ") ); }, /** * Fire the "updated" event (only if the field validated) * Escape the stack using a setTimeout */ fireUpdatedEvt: function() { // Uses setTimeout to escape the stack (that originiated in an event) var that = this; setTimeout(function() { that.updatedEvt.fire(that.getValue(), that); },50); }, /** * Render the interface component into this.divEl */ renderComponent: function() { // override me }, /** * The default render creates a div to put in the messages * @return {HTMLElement} divEl The main DIV wrapper */ getEl: function() { return this.divEl; }, /** * Initialize events of the Input */ initEvents: function() { // override me }, /** * Return the value of the input * @return {Any} value of the field */ getValue: function() { // override me }, /** * Function to set the value * @param {Any} value The new value * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) */ setValue: function(value, sendUpdatedEvt) { // to be inherited // set corresponding style this.setClassFromState(); if(sendUpdatedEvt !== false) { // fire update event this.fireUpdatedEvt(); } }, /** * Set the styles for valid/invalide state */ setClassFromState: function() { // remove previous class if( this.previousState ) { // remove invalid className for both required and invalid fields var className = 'inputEx-'+((this.previousState == inputEx.stateRequired) ? inputEx.stateInvalid : this.previousState); Dom.removeClass(this.divEl, className); } // add new class var state = this.getState(); if( !(state == inputEx.stateEmpty && Dom.hasClass(this.divEl, 'inputEx-focused') ) ) { // add invalid className for both required and invalid fields var className = 'inputEx-'+((state == inputEx.stateRequired) ? inputEx.stateInvalid : state); Dom.addClass(this.divEl, className ); } if(this.options.showMsg) { this.displayMessage( this.getStateString(state) ); } this.previousState = state; }, /** * Get the string for the given state */ getStateString: function(state) { if(state == inputEx.stateRequired) { return this.options.messages.required; } else if(state == inputEx.stateInvalid) { return this.options.messages.invalid; } else { return ''; } }, /** * Returns the current state (given its value) * @return {String} One of the following states: 'empty', 'required', 'valid' or 'invalid' */ getState: function() { // if the field is empty : if( this.isEmpty() ) { return this.options.required ? inputEx.stateRequired : inputEx.stateEmpty; } return this.validate() ? inputEx.stateValid : inputEx.stateInvalid; }, /** * Validation of the field * @return {Boolean} field validation status (true/false) */ validate: function() { return true; }, /** * Function called on the focus event * @param {Event} e The original 'focus' event */ onFocus: function(e) { var el = this.getEl(); Dom.removeClass(el, 'inputEx-empty'); Dom.addClass(el, 'inputEx-focused'); }, /** * Function called on the blur event * @param {Event} e The original 'blur' event */ onBlur: function(e) { Dom.removeClass(this.getEl(), 'inputEx-focused'); // Call setClassFromState on Blur this.setClassFromState(); }, /** * onChange event handler * @param {Event} e The original 'change' event */ onChange: function(e) { this.fireUpdatedEvt(); }, /** * Close the field and eventually opened popups... */ close: function() { }, /** * Disable the field */ disable: function() { }, /** * Enable the field */ enable: function() { }, /** * Focus the field */ focus: function() { }, /** * Purge all event listeners and remove the component from the dom */ destroy: function() { var el = this.getEl(); // Unsubscribe all listeners on the updatedEvt this.updatedEvt.unsubscribeAll(); // Remove from DOM if(Dom.inDocument(el)) { el.parentNode.removeChild(el); } // recursively purge element util.Event.purgeElement(el, true); }, /** * Update the message * @param {String} msg Message to display */ displayMessage: function(msg) { if(!this.fieldContainer) { return; } if(!this.msgEl) { this.msgEl = inputEx.cn('div', {className: 'inputEx-message'}); try{ var divElements = this.divEl.getElementsByTagName('div'); this.divEl.insertBefore(this.msgEl, divElements[(divElements.length-1>=0)?divElements.length-1:0]); //insertBefore the clear:both div }catch(e){alert(e);} } this.msgEl.innerHTML = msg; }, /** * Show the field */ show: function() { this.divEl.style.display = ''; }, /** * Hide the field */ hide: function() { this.divEl.style.display = 'none'; }, /** * Clear the field by setting the field value to this.options.value * @param {boolean} [sendUpdatedEvt] (optional) Wether this clear should fire the updatedEvt or not (default is true, pass false to NOT send the event) */ clear: function(sendUpdatedEvt) { this.setValue(lang.isUndefined(this.options.value) ? '' : this.options.value, sendUpdatedEvt); }, /** * Should return true if empty */ isEmpty: function() { return this.getValue() === ''; } }; })();
Pages
Index
Getting Started
Overview
Markup structure
Migrate from 0.1.0
Field development
DOM functions
Internationalization
Visualization
Examples
Classes
(treeview)
inputEx
inputEx.AutoComplete
inputEx.BirthdateField
inputEx.CheckBox
inputEx.ColorField
inputEx.ColorField2
inputEx.CombineField
inputEx.DateField
inputEx.DatePickerField
inputEx.DateSplitField
inputEx.DateTimeField
inputEx.DSSelectField
inputEx.EmailField
inputEx.Field
inputEx.FileField
inputEx.Form
inputEx.formForMethod
inputEx.FrenchDate
inputEx.FrenchPhone
inputEx.generateServiceForm
inputEx.Group
inputEx.HiddenField
inputEx.ImagemapField
inputEx.InPlaceEdit
inputEx.IntegerField
inputEx.IPv4Field
inputEx.JsonSchema
inputEx.JsonSchema.Builder
inputEx.ListField
inputEx.MapField
inputEx.MenuField
inputEx.MultiAutoComplete
inputEx.MultiSelectField
inputEx.NumberField
inputEx.PairField
inputEx.PasswordField
inputEx.RadioButton
inputEx.RadioField
inputEx.RTEField
inputEx.SelectField
inputEx.SliderField
inputEx.StringField
inputEx.Textarea
inputEx.TimeField
inputEx.TreeField
inputEx.TypeField
inputEx.UneditableField
inputEx.UpperCaseField
inputEx.UrlField
inputEx.VectorField
inputEx.widget
inputEx.widget.DataTable
inputEx.widget.DDList
inputEx.widget.DDListItem
inputEx.widget.Dialog
inputEx.widget.InputExCellEditor
inputEx.widget.JsonTreeInspector
Files
AutoComplete.js
BirthdateField.js
CheckBox.js
ColorField.js
ColorField2.js
CombineField.js
DataTable-beta.js
DateField.js
DatePickerField.js
DateSplitField.js
DateTimeField.js
ddlist.js
Dialog-beta.js
DSSelectField.js
EmailField.js
Field.js
FileField-beta.js
Form.js
fr.js
FrenchDate.js
FrenchPhone.js
Group.js
HiddenField.js
ImagemapField.js
InPlaceEdit.js
inputex-loader.js
inputex-rpc.js
inputex.js
IntegerField.js
IPv4Field.js
it.js
json-schema.js
json-tree-inspector.js
ListField.js
MapField.js
MenuField.js
MultiAutoComplete.js
MultiSelectField.js
NumberField.js
PairField.js
PasswordField.js
RadioButton.js
RadioField.js
RTEField.js
SelectField.js
SliderField.js
StringField.js
Textarea.js
TimeField.js
TreeField.js
TypeField.js
UneditableField.js
UpperCaseField.js
UrlField.js
VectorField.js
Visus.js
Copyright (c) 2007-2009
Eric Abouaf
. All rights reserved.
Generated by
JsDoc Toolkit
2.0.0 on Wed, 04 Mar 2009 15:41:29 GMT using
neyricjslibs-template
.