// The global array of objects that have been instanciated if (!Bs_Objects) {var Bs_Objects = [];}; /** * JavaScript Editable Dropdown Component. * Browsers don't offer this functionality yet (mid-2003). * * Features: * - IE6 and NS(Mozilla7) compliant. * - Simulates a normal HTML-form text input field; so your form-hanling will not change. * - Works over frames: Imagine you have a top frame (for a toolbar) and a main frame for the content. * Now in the top frame you place a dropdown. it should go over the bottom frame; this works * with this class, but not with domapi. * * Includes (+Dependences): * * * * * * * * * How to use: * 1. Have a look at the example (see example link below) * 2. Create a function in the HTML-header called init(). Place the javascript code * that instanciates and inits this component into init(). * 3. Place an 'onLoad' in your body-tag: e.g. * 4. In the HTML body: Place a div- or span-tag with an unique ID where you want the componet to be. * * How it works: * - [After instanciating and initializing the object]. Call the drawInto([tag id]) methode. * This will search the HTML code for a tag with the given id and insert HTML- and JS- code * dynamically (using DOM) to display the component and handle it. * - This class generates a normal HTML text input field and saves the value in there. * When used in a form, it will be submitted like any other HTML-form-field. * * What is returned to the server: *
*  +------------------------+--------------------------------------------------+
*  | DropdownName +"_select"| string, What the user selected                   |
*  +------------------------+--------------------------------------------------+
*  | DropdownName +"_input" | string, If no changes were made, same as above;  |
*  |                        | otherwise what the user filed in.                |
*  +------------------------+--------------------------------------------------+
*
* * Event-Handling (see {@link attachEvent()}): * - You can attach code or a callback function for certain events onto this component * (events are things like onClick, onChange ... aso) See attachEvent() for a list * of supported events and more details. * * Snipit 1) Attaching a callback function: * * var myDropDown_1 = new Bs_Dropdown(); * myDropDown_1.attachEvent('onChange', yourCallbackFunctionName); * * The function you pass should be able to receive a object as parameter. * The object is an instance of this class and allows you to access it the * component that triggered the event: * * function yourCallbackFunctionName(componentObj){ * // do some stuff. * } * * = = = =
* Snipit 2) Attaching JS code: * * var checkBox = new Bs_Checkbox(); * checkBox.attachOnClick("yourFunctionName('foo', 'bar'); alert('hello');"); * * * Customized images: * - Set the path to your image-dir {@link imgDir} * - Following images must be created. * 
*     arrow.gif
*
* * @example components/dropdown/examples/example1.php Simple example * * @author andrej arn * @package javascript_components * @subpackage dropdown * @copyright blueshoes.org */ function Bs_Dropdown() { /** * When submitting the form, you'll receive the date value under this name. * * In other words you'll receive the data back to the server as if you had placed
*
* into your HTML-form. * * that is when you use the drawInto() method. with convertField() the original field name is kept. * * @access public * @var string */ this.fieldName; /** * Unique Object/Tag ID is initialized in the constuctor. * Based on this._id. Can be used in generated JS-code as ID. Is set together * from the classname + this._id (see _constructor() code ). * * @access private * @var string */ this._tagId; /** * If set to TRUE, a new text string gets automatically added to the select list. * default is true. * @access public * @var bool */ this.autoAdd = true; /** * if you want newly added elements to be stored in a cookie so that * if the page is reloaded, or the user comes back, ... the user-typed * option is in the list as well. without the need to code something * server-side to include the option. * * @access public * @var string rememberNewInCookie * @see var this.autoAdd * @since bs4.5 */ this.rememberNewInCookie; /** * array list of the user-typed elements stored in the cookie. * @access private * @var array _cookieElements * @see this.rememberNewInCookie */ this._cookieElements = new Array(); /** * the max length (chars) values can have. not set means no limit. * @access public * @var int maxLength */ this.maxLength; /** * How the options in the select field should be ordered. * 
  *   1 = new options at the end (default)
  *   2 = new options at the begin
  *   3 = alphabetically descending
  *   4 = alphabetically ascending
  *
* @access public * @var int * @todo code support for this. */ this.selectOrder = 1; /** * Dropdown can be disabled. then it's value cannot be changed. * @access public * @var bool (default is false) * @see guiNochange */ this.disabled = false; /** * If set to true then the user cannot change things by clicking. * Changes through the api functions (for the coder, you) are still possible. * @access public * @var bool * @see disabled */ this.guiNochange; /** * Directory where the images are. * Feel free to create your own images, put them into another directory (by using the same file names, etc.) * See header for more info. * @access public * @var string */ this.imgDir = '/_bsJavascript/components/dropdown/img/win2k/'; /**#@+ * Customize look. When using a CSS you may add a CSS class name that will be used when rendering the field. * @access public * @var string */ this.classInput; this.classSelect; /**#@-*/ /** * Reference to the text field object. * WARNING: use _getTextObj() to access this, cause it may not have been set yet! * @access private * @var object * @see _getTextObj() */ this._fromTextObj; /** * Reference to the select field object. * WARNING: use _getSelectObj() to access this, cause it may not have been set yet! * @access private * @var object * @see _getSelectObj() */ this._frmSelectObj; /** * array holding all the information about attached events. * the structure can be like these: * 
  * 1) attach a function directly
  *    syntax:  _attachedEvents['eventName'] = yourFunctionName;
  * 2) attach some javascript code
  *    syntax:  _attachedEvents['eventName'] = "yourCode();";
  *    example: _attachedEvents['eventName'] = "alert('hi'); callSomething('foo');";
  *    just keep in mind that you cannot use vars in that code, because when it 
  *    gets executed that will be another scope (unless the vars are global...)
  * 3) attach multiple things for the same event
  *    syntax:  _attachedEvents['eventName']    = new Array;
  *             _attachedEvents['eventName'][0] = yourFunctionName;
  *             _attachedEvents['eventName'][1] = "yourCode();";
  *
* * @access private * @var array (hash, see above) * @see attachEvent(); */ this._attachedEvents; /** * Tells if this object is already rendered. then changes need to be done * differently (live on the page). * @access private * @var bool */ this.isOutRendered = false; /** * @access private * @var string * @see setValue(), getValue() */ this._value = ''; /** * The selectable options. * @access private * @see addOption() * @var array (vector) */ this._options = new Array(); /** * helper var for the toSelect() method. * @access private * @var bool _firstTimeToSelect */ this._firstTimeToSelect = true; /** * vector with 2 elements, 0=value, 1=unit. * @access private * @var array _size * @see this.setSize() */ this._size; /** * the pseudo constructor. * @access private * @return void */ this._constructor = function() { // Put this instance into the global object instance list this._id = Bs_Objects.length; Bs_Objects[this._id] = this; this._tagId = "Bs_Dropdown_"+this._id+"_"; } /** * Returns the current value. * @access public * @return string */ this.getValue = function() { return this._value; } /** * If you wish to change the value of this component, call this method. * If the value is not an option yet, it will be added to the options array. * * NOTE: * - Attached onChange events will *not* fire. * * @access public * @param string value * @param bool addToCookie (used internally only) * @return void * @see addOption(), attachEvent() */ this.setValue = function(value, addToCookie) { //alert(value); //4debug this._value = value; this.addOption(value, addToCookie); if (this.isOutRendered) { this._getTextObj().value = value; this._getSelectObj().setTo(value); this._updateHiddenField(); } } /** * Add an option to the list. * * NOTE: * - Options will be merged case-insensitive, otherwise we'd have too much crap. * * @access public * @param string str * @param bool addToCookie (used internally only) * @return bool (true if it got added, false if it was already there.) * @see attachEvent(), this.rememberNewInCookie */ this.addOption = function(str, addToCookie) { //let's see if we already have such an option: if (this._options.indexOf(str) >= 0) { return false; } else { this._options[this._options.length] = str; if (this.isOutRendered) { var newOpt = new Option(str, str); this._getSelectObj().options[this._getSelectObj().length] = newOpt; } if (addToCookie && (typeof(this.rememberNewInCookie) == 'string')) { this._saveCookieString(str); } return true; } } /** * sets the size (width) of the fields. * * you can define the width by using css classes, see this.classInput * and this.classSelect. that is a safe bet. note that the width * of the input field should be the one of the select field -20 (for * the arrow icon). example 1 demonstrates this: * http://www.blueshoes.org/_bsJavascript/components/dropdown/examples/example1.html * * if you use an existing text field, and convert it, like in example 2 * http://www.blueshoes.org/_bsJavascript/components/dropdown/examples/example2.html * then the "size" attribute of your text field is used. note that if you use * css classes, and they have a width defined, the browser ignores this "size". * css is stronger. * * if none of the above apply for your case, you can define the size by calling this * method BEFORE rendering the dropdown. * the param "value" is a number. the param "unit" can be "char" or "pixel". * examples: * yourObj.setSize(40, 'char') => the input field will use "size=40" as attribute. * yourObj.setSize(200, 'pixel') => the select field will use a style setting of * 200px. the input field has one with 180px (-20 * for the arrow icon). * * @access public * @param int value * @param string unit * @return void */ this.setSize = function(value, unit) { this._size = new Array(value, unit); } /** * Renders this component (generates html code). * * We added this methode to the public API for the advanced user. It's half-private :). * This is a call for the advanced user, who would like to fetch the html- / js- * that is rendered to make this component running.
* The average user will normally use {@link drawInto()}, that will render and place the * code into the site in one simple step. * * @access public * @param string tagId (id of the tag.) * @return string * @see drawInto() */ this.render = function(tagId) { if (!bs_isEmpty(tagId)) { this._tagId = tagId; } if (typeof(this.rememberNewInCookie) == 'string') { this._readCookie(); for (var i=0; i