inputEx Documentation
Back to homepage
inputEx Documentation
> ddlist.js
0.2.2
This is the source view for ddlist.js
(function() { var inputEx = YAHOO.inputEx, DD = YAHOO.util.DragDropMgr, Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; /** * @class DDProxy for DDList items (used by DDList) * @extends YAHOO.util.DDProxy * @constructor * @param {String} id */ inputEx.widget.DDListItem = function(id) { inputEx.widget.DDListItem.superclass.constructor.call(this, id); // Prevent lateral draggability this.setXConstraint(0,0); this.goingUp = false; this.lastY = 0; }; YAHOO.extend(inputEx.widget.DDListItem, YAHOO.util.DDProxy, { startDrag: function(x, y) { // make the proxy look like the source element var dragEl = this.getDragEl(); var clickEl = this.getEl(); Dom.setStyle(clickEl, "visibility", "hidden"); this._originalIndex = inputEx.indexOf(clickEl ,clickEl.parentNode.childNodes); dragEl.className = clickEl.className; dragEl.innerHTML = clickEl.innerHTML; }, endDrag: function(e) { Dom.setStyle(this.id, "visibility", ""); // Fire the reordered event if position in list has changed var clickEl = this.getEl(); var newIndex = inputEx.indexOf(clickEl ,clickEl.parentNode.childNodes); if(this._originalIndex != newIndex) { this._list.listReorderedEvt.fire(); } }, onDragDrop: function(e, id) { // If there is one drop interaction, the li was dropped either on the list, // or it was dropped on the current location of the source element. if (DD.interactionInfo.drop.length === 1) { // The position of the cursor at the time of the drop (YAHOO.util.Point) var pt = DD.interactionInfo.point; // The region occupied by the source element at the time of the drop var region = DD.interactionInfo.sourceRegion; // Check to see if we are over the source element's location. We will // append to the bottom of the list once we are sure it was a drop in // the negative space (the area of the list without any list items) if (!region.intersect(pt)) { var destEl = Dom.get(id); if (destEl.nodeName.toLowerCase() != "li") { var destDD = DD.getDDById(id); destEl.appendChild(this.getEl()); destDD.isEmpty = false; DD.refreshCache(); } } } }, onDrag: function(e) { // Keep track of the direction of the drag for use during onDragOver var y = Event.getPageY(e); if (y < this.lastY) { this.goingUp = true; } else if (y > this.lastY) { this.goingUp = false; } this.lastY = y; }, onDragOver: function(e, id) { var srcEl = this.getEl(); var destEl = Dom.get(id); // We are only concerned with list items, we ignore the dragover // notifications for the list. if (destEl.nodeName.toLowerCase() == "li") { var orig_p = srcEl.parentNode; var p = destEl.parentNode; if (this.goingUp) { p.insertBefore(srcEl, destEl); // insert above } else { p.insertBefore(srcEl, destEl.nextSibling); // insert below } DD.refreshCache(); } } }); /** * @class Create a sortable list * @extends inputEx.widget.DDList * @constructor * @param {Object} options Options: *
*
id: id of the ul element
*
value: initial value of the list
*
*/ inputEx.widget.DDList = function(options) { this.ul = inputEx.cn('ul'); if(options.id) { this.ul.id = options.id; } if(options.value) { this.setValue(options.value); } /** * @event * @param {Any} itemValue value of the removed item * @desc YAHOO custom event fired when an item is removed */ this.itemRemovedEvt = new YAHOO.util.CustomEvent('itemRemoved', this); /** * @event * @desc YAHOO custom event fired when the list is reordered */ this.listReorderedEvt = new YAHOO.util.CustomEvent('listReordered', this); // append it immediatly to the parent DOM element if(options.parentEl) { if( YAHOO.lang.isString(options.parentEl) ) { Dom.get(options.parentEl).appendChild(this.ul); } else { options.parentEl.appendChild(this.ul); } } }; inputEx.widget.DDList.prototype = { addItem: function(value) { var li = inputEx.cn('li', {className: 'inputEx-DDList-item'}); li.appendChild( inputEx.cn('span', null, null, value) ); var removeLink = inputEx.cn('a', null, null, "remove"); li.appendChild( removeLink ); Event.addListener(removeLink, 'click', function(e) { var a = Event.getTarget(e); var li = a.parentNode; this.removeItem( inputEx.indexOf(li,this.ul.childNodes) ); }, this, true); var item = new inputEx.widget.DDListItem(li); item._list = this; this.ul.appendChild(li); }, /* * private method to remove an item */ _removeItem: function(i) { var itemValue = this.ul.childNodes[i].childNodes[0].innerHTML; this.ul.removeChild(this.ul.childNodes[i]); return itemValue; }, /* * public metnod to remove an item * _removeItem function + event firing */ removeItem: function(i) { var itemValue = this._removeItem(i); // Fire the itemRemoved Event this.itemRemovedEvt.fire(itemValue); }, getValue: function() { var value = []; for(var i = 0 ; i < this.ul.childNodes.length ; i++) { value.push(this.ul.childNodes[i].childNodes[0].innerHTML); } return value; }, updateItem: function(i,value) { this.ul.childNodes[i].childNodes[0].innerHTML = value; }, setValue: function(value) { // if trying to set wrong value (or ""), reset if (!YAHOO.lang.isArray(value)) { value = []; } var oldNb = this.ul.childNodes.length; var newNb = value.length; for(var i = 0 ; i < newNb ; i++) { if(i < oldNb) { this.updateItem(i, value[i]); } else { this.addItem(value[i]); } } // remove extra li items if any for(var j = newNb; j < oldNb; j++) { this._removeItem(newNb); // newNb is always the index of first li to remove (not j !) } } }; })();
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
.