/*** Start of file, yahoo.js ***/ /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.11.4 */ /** * The YAHOO object is the single global object used by YUI Library. It * contains utility function for setting up namespaces, inheritance, and * logging. YAHOO.util, YAHOO.widget, and YAHOO.example are namespaces * created automatically for and used by the library. * @module YAHOO */ /** * The YAHOO global namespace object * @class YAHOO * @static */ if (typeof YAHOO == "undefined") { YAHOO = {}; } /** * Returns the namespace specified and creates it if it doesn't exist * * YAHOO.namespace("property.package"); * YAHOO.namespace("YAHOO.property.package"); * * Either of the above would create YAHOO.property, then * YAHOO.property.package * * Be careful when naming packages. Reserved words may work in some browsers * and not others. For instance, the following will fail in Safari: * * YAHOO.namespace("really.long.nested.namespace"); * * This fails because "long" is a future reserved word in ECMAScript * @method namespace * @static * @param {String} ns The name of the namespace * @return {Object} A reference to the namespace object */ YAHOO.namespace = function(ns) { if (!ns || !ns.length) { return null; } var levels = ns.split("."); var nsobj = YAHOO; // YAHOO is implied, so it is ignored if it is included for (var i=(levels[0] == "YAHOO") ? 1 : 0; i * - The type of event * - All of the arguments fire() was executed with as an array * - The custom object (if any) that was passed into the subscribe() method * * @method fire * @param {Array} an arbitrary set of parameters to pass to the handler */ fire: function() { var len=this.subscribers.length; if (!len && this.silent) { return; } var args = []; for (var i=0; i= 0) { cacheItem = listeners[index]; } if (!el || !cacheItem) { return false; } if (this.useLegacyEvent(el, sType)) { var legacyIndex = this.getLegacyIndex(el, sType); var llist = legacyHandlers[legacyIndex]; if (llist) { for (i=0, len=llist.length; i 0); } // Delayed listeners var stillDelayed = []; for (var i=0,len=delayedListeners.length; i 0) { for (var i=0,len=listeners.length; i 0) { //for (i=0,len=listeners.length; i -1); var isSafari = (ua.indexOf('safari') > -1); var isIE = (window.ActiveXObject); var id_counter = 0; var util = YAHOO.util; // internal shorthand var property_cache = {}; // to cache case conversion for set/getStyle var toCamel = function(property) { var convert = function(prop) { var test = /(-[a-z])/i.exec(prop); return prop.replace(RegExp.$1, RegExp.$1.substr(1).toUpperCase()); }; while(property.indexOf('-') > -1) { property = convert(property); } return property; //return property.replace(/-([a-z])/gi, function(m0, m1) {return m1.toUpperCase()}) // cant use function as 2nd arg yet due to safari bug }; var toHyphen = function(property) { if (property.indexOf('-') > -1) { // assume hyphen return property; } var converted = ''; for (var i = 0, len = property.length;i < len; ++i) { if (property.charAt(i) == property.charAt(i).toUpperCase()) { converted = converted + '-' + property.charAt(i).toLowerCase(); } else { converted = converted + property.charAt(i); } } return converted; //return property.replace(/([a-z])([A-Z]+)/g, function(m0, m1, m2) {return (m1 + '-' + m2.toLowerCase())}); }; // improve performance by only looking up once var cacheConvertedProperties = function(property) { property_cache[property] = { camel: toCamel(property), hyphen: toHyphen(property) }; }; return { /** * Returns an HTMLElement reference * @param {String/HTMLElement/Array} el Accepts a string to use as an ID for getting a DOM reference, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @return {HTMLElement/Array} A DOM reference to an HTML element or an array of HTMLElements. */ get: function(el) { if (!el) { return null; } // nothing to work with if (typeof el != 'string' && !(el instanceof Array) ) { // assuming HTMLElement or HTMLCollection, so pass back as is return el; } if (typeof el == 'string') { // ID return document.getElementById(el); } else { // array of ID's and/or elements var collection = []; for (var i = 0, len = el.length; i < len; ++i) { collection[collection.length] = util.Dom.get(el[i]); } return collection; } return null; // safety, should never happen }, /** * Normalizes currentStyle and ComputedStyle. * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @param {String} property The style property whose value is returned. * @return {String/Array} The current value of the style property for the element(s). */ getStyle: function(el, property) { var f = function(el) { var value = null; var dv = document.defaultView; if (!property_cache[property]) { cacheConvertedProperties(property); } var camel = property_cache[property]['camel']; var hyphen = property_cache[property]['hyphen']; if (property == 'opacity' && el.filters) {// IE opacity value = 1; try { value = el.filters.item('DXImageTransform.Microsoft.Alpha').opacity / 100; } catch(e) { try { value = el.filters.item('alpha').opacity / 100; } catch(e) {} } } else if (el.style[camel]) { // camelCase for valid styles value = el.style[camel]; } else if (isIE && el.currentStyle && el.currentStyle[camel]) { // camelCase for currentStyle; isIE to workaround broken Opera 9 currentStyle value = el.currentStyle[camel]; } else if ( dv && dv.getComputedStyle ) { // hyphen-case for computedStyle var computed = dv.getComputedStyle(el, ''); if (computed && computed.getPropertyValue(hyphen)) { value = computed.getPropertyValue(hyphen); } } return value; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Wrapper for setting style properties of HTMLElements. Normalizes "opacity" across modern browsers. * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @param {String} property The style property to be set. * @param {String} val The value to apply to the given property. */ setStyle: function(el, property, val) { if (!property_cache[property]) { cacheConvertedProperties(property); } var camel = property_cache[property]['camel']; var f = function(el) { switch(property) { case 'opacity' : if (isIE && typeof el.style.filter == 'string') { // in case not appended el.style.filter = 'alpha(opacity=' + val * 100 + ')'; if (!el.currentStyle || !el.currentStyle.hasLayout) { el.style.zoom = 1; // when no layout or cant tell } } else { el.style.opacity = val; el.style['-moz-opacity'] = val; el.style['-khtml-opacity'] = val; } break; default : el.style[camel] = val; } }; util.Dom.batch(el, f, util.Dom, true); }, /** * Gets the current position of an element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements @ return {Array} The XY position of the element(s) */ getXY: function(el) { var f = function(el) { // has to be part of document to have pageXY if (el.offsetParent === null || this.getStyle(el, 'display') == 'none') { return false; } var parentNode = null; var pos = []; var box; if (el.getBoundingClientRect) { // IE box = el.getBoundingClientRect(); var doc = document; if ( !this.inDocument(el) && parent.document != document) {// might be in a frame, need to get its scroll doc = parent.document; if ( !this.isAncestor(doc.documentElement, el) ) { return false; } } var scrollTop = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); var scrollLeft = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft); return [box.left + scrollLeft, box.top + scrollTop]; } else { // safari, opera, & gecko pos = [el.offsetLeft, el.offsetTop]; parentNode = el.offsetParent; if (parentNode != el) { while (parentNode) { pos[0] += parentNode.offsetLeft; pos[1] += parentNode.offsetTop; parentNode = parentNode.offsetParent; } } if (isSafari && this.getStyle(el, 'position') == 'absolute' ) { // safari doubles in some cases pos[0] -= document.body.offsetLeft; pos[1] -= document.body.offsetTop; } } if (el.parentNode) { parentNode = el.parentNode; } else { parentNode = null; } while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML') { // account for any scrolled ancestors if (util.Dom.getStyle(parentNode, 'display') != 'inline') { // work around opera inline scrollLeft/Top bug pos[0] -= parentNode.scrollLeft; pos[1] -= parentNode.scrollTop; } if (parentNode.parentNode) { parentNode = parentNode.parentNode; } else { parentNode = null; } } return pos; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Gets the current X position of an element based on page coordinates. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements * @return {String/Array} The X position of the element(s) */ getX: function(el) { var f = function(el) { return util.Dom.getXY(el)[0]; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Gets the current Y position of an element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements * @return {String/Array} The Y position of the element(s) */ getY: function(el) { var f = function(el) { return util.Dom.getXY(el)[1]; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Set the position of an html element in page coordinates, regardless of how the element is positioned. * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements * @param {Array} pos Contains X & Y values for new position (coordinates are page-based) * @param {Boolean} noRetry By default we try and set the position a second time if the first fails */ setXY: function(el, pos, noRetry) { var f = function(el) { var style_pos = this.getStyle(el, 'position'); if (style_pos == 'static') { // default to relative this.setStyle(el, 'position', 'relative'); style_pos = 'relative'; } var pageXY = this.getXY(el); if (pageXY === false) { // has to be part of doc to have pageXY return false; } var delta = [ // assuming pixels; if not we will have to retry parseInt( this.getStyle(el, 'left'), 10 ), parseInt( this.getStyle(el, 'top'), 10 ) ]; if ( isNaN(delta[0]) ) {// in case of 'auto' delta[0] = (style_pos == 'relative') ? 0 : el.offsetLeft; } if ( isNaN(delta[1]) ) { // in case of 'auto' delta[1] = (style_pos == 'relative') ? 0 : el.offsetTop; } if (pos[0] !== null) { el.style.left = pos[0] - pageXY[0] + delta[0] + 'px'; } if (pos[1] !== null) { el.style.top = pos[1] - pageXY[1] + delta[1] + 'px'; } var newXY = this.getXY(el); // if retry is true, try one more time if we miss if (!noRetry && (newXY[0] != pos[0] || newXY[1] != pos[1]) ) { this.setXY(el, pos, true); } }; util.Dom.batch(el, f, util.Dom, true); }, /** * Set the X position of an html element in page coordinates, regardless of how the element is positioned. * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @param {Int} x to use as the X coordinate for the element(s). */ setX: function(el, x) { util.Dom.setXY(el, [x, null]); }, /** * Set the Y position of an html element in page coordinates, regardless of how the element is positioned. * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @param {Int} x to use as the Y coordinate for the element(s). */ setY: function(el, y) { util.Dom.setXY(el, [null, y]); }, /** * Returns the region position of the given element. * The element must be part of the DOM tree to have a region (display:none or elements not appended return false). * @param {String/HTMLElement/Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements. * @return {Region/Array} A Region or array of Region instances containing "top, left, bottom, right" member data. */ getRegion: function(el) { var f = function(el) { var region = new YAHOO.util.Region.getRegion(el); return region; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Returns the width of the client (viewport). * Now using getViewportWidth. This interface left intact for back compat. * @return {Int} The width of the viewable area of the page. */ getClientWidth: function() { return util.Dom.getViewportWidth(); }, /** * Returns the height of the client (viewport). * Now using getViewportHeight. This interface left intact for back compat. * @return {Int} The height of the viewable area of the page. */ getClientHeight: function() { return util.Dom.getViewportHeight(); }, /** * Returns a array of HTMLElements with the given class * For optimized performance, include a tag and/or root node if possible * @param {String} className The class name to match against * @param {String} tag (optional) The tag name of the elements being collected * @param {String/HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point * @return {Array} An array of elements that have the given class name */ getElementsByClassName: function(className, tag, root) { var method = function(el) { return util.Dom.hasClass(el, className) }; return util.Dom.getElementsBy(method, tag, root); }, /** * Determines whether an HTMLElement has the given className * @param {String/HTMLElement/Array} el The element or collection to test * @param {String} className the class name to search for * @return {Boolean/Array} A boolean value or array of boolean values */ hasClass: function(el, className) { var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)'); var f = function(el) { return re.test(el['className']); }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Adds a class name to a given element or collection of elements * @param {String/HTMLElement/Array} el The element or collection to add the class to * @param {String} className the class name to add to the class attribute */ addClass: function(el, className) { var f = function(el) { if (this.hasClass(el, className)) { return; } // already present el['className'] = [el['className'], className].join(' '); }; util.Dom.batch(el, f, util.Dom, true); }, /** * Removes a class name from a given element or collection of elements * @param {String/HTMLElement/Array} el The element or collection to remove the class from * @param {String} className the class name to remove from the class attribute */ removeClass: function(el, className) { var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g'); var f = function(el) { if (!this.hasClass(el, className)) { return; } // not present var c = el['className']; el['className'] = c.replace(re, ' '); if ( this.hasClass(el, className) ) { // in case of multiple adjacent this.removeClass(el, className); } }; util.Dom.batch(el, f, util.Dom, true); }, /** * Replace a class with another class for a given element or collection of elements. * If no oldClassName is present, the newClassName is simply added. * @param {String/HTMLElement/Array} el The element or collection to remove the class from * @param {String} oldClassName the class name to be replaced * @param {String} newClassName the class name that will be replacing the old class name */ replaceClass: function(el, oldClassName, newClassName) { if (oldClassName === newClassName) { // avoid infinite loop return false; }; var re = new RegExp('(?:^|\\s+)' + oldClassName + '(?:\\s+|$)', 'g'); var f = function(el) { if ( !this.hasClass(el, oldClassName) ) { this.addClass(el, newClassName); // just add it if nothing to replace return; // note return } el['className'] = el['className'].replace(re, ' ' + newClassName + ' '); if ( this.hasClass(el, oldClassName) ) { // in case of multiple adjacent this.replaceClass(el, oldClassName, newClassName); } }; util.Dom.batch(el, f, util.Dom, true); }, /** * Generates a unique ID * @param {String/HTMLElement/Array} el (optional) An optional element array of elements to add an ID to (no ID is added if one is already present) * @param {String} prefix (optional) an optional prefix to use (defaults to "yui-gen") * @return {String/Array} The generated ID, or array of generated IDs (or original ID if already present on an element) */ generateId: function(el, prefix) { prefix = prefix || 'yui-gen'; el = el || {}; var f = function(el) { if (el) { el = util.Dom.get(el); } else { el = {}; // just generating ID in this case } if (!el.id) { el.id = prefix + id_counter++; } // dont override existing return el.id; }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Determines whether an HTMLElement is an ancestor of another HTML element in the DOM hierarchy * @param {String/HTMLElement} haystack The possible ancestor * @param {String/HTMLElement} needle The possible descendent * @return {Boolean} Whether or not the haystack is an ancestor of needle */ isAncestor: function(haystack, needle) { haystack = util.Dom.get(haystack); if (!haystack || !needle) { return false; } var f = function(needle) { if (haystack.contains && !isSafari) { // safari "contains" is broken return haystack.contains(needle); } else if ( haystack.compareDocumentPosition ) { return !!(haystack.compareDocumentPosition(needle) & 16); } else { // loop up and test each parent var parent = needle.parentNode; while (parent) { if (parent == haystack) { return true; } else if (!parent.tagName || parent.tagName.toUpperCase() == 'HTML') { return false; } parent = parent.parentNode; } return false; } }; return util.Dom.batch(needle, f, util.Dom, true); }, /** * Determines whether an HTMLElement is present in the current document * @param {String/HTMLElement} el The element to search for * @return {Boolean} Whether or not the element is present in the current document */ inDocument: function(el) { var f = function(el) { return this.isAncestor(document.documentElement, el); }; return util.Dom.batch(el, f, util.Dom, true); }, /** * Returns a array of HTMLElements that pass the test applied by supplied boolean method * For optimized performance, include a tag and/or root node if possible * @param {Function} method A boolean method to test elements with * @param {String} tag (optional) The tag name of the elements being collected * @param {String/HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point */ getElementsBy: function(method, tag, root) { tag = tag || '*'; root = util.Dom.get(root) || document; var nodes = []; var elements = root.getElementsByTagName(tag); if ( !elements.length && (tag == '*' && root.all) ) { elements = root.all; // IE < 6 } for (var i = 0, len = elements.length; i < len; ++i) { if ( method(elements[i]) ) { nodes[nodes.length] = elements[i]; } } return nodes; }, /** * Returns an array of elements that have had the supplied method applied. * The method is called with the element(s) as the first arg, and the optional param as the second ( method(el, o) ) * @param {String/HTMLElement/Array} el (optional) An element or array of elements to apply the method to * @param {Function} method The method to apply to the element(s) * @param {Generic} (optional) o An optional arg that is passed to the supplied method * @param {Boolean} (optional) override Whether or not to override the scope of "method" with "o" * @return {HTMLElement/Array} The element(s) with the method applied */ batch: function(el, method, o, override) { var id = el; el = util.Dom.get(el); var scope = (override) ? o : window; if (!el || el.tagName || !el.length) { // is null or not a collection (tagName for SELECT and others that can be both an element and a collection) if (!el) { return false; } return method.call(scope, el, o); } var collection = []; for (var i = 0, len = el.length; i < len; ++i) { if (!el[i]) { id = id[i]; } collection[collection.length] = method.call(scope, el[i], o); } return collection; }, /** * Returns the height of the document. * @return {Int} The height of the actual document (which includes the body and its margin). */ getDocumentHeight: function() { var scrollHeight=-1,windowHeight=-1,bodyHeight=-1; var marginTop = parseInt(util.Dom.getStyle(document.body, 'marginTop'), 10); var marginBottom = parseInt(util.Dom.getStyle(document.body, 'marginBottom'), 10); var mode = document.compatMode; if ( (mode || isIE) && !isOpera ) { // (IE, Gecko) switch (mode) { case 'CSS1Compat': // Standards mode scrollHeight = ((window.innerHeight && window.scrollMaxY) ? window.innerHeight+window.scrollMaxY : -1); windowHeight = [document.documentElement.clientHeight,self.innerHeight||-1].sort(function(a, b){return(a-b);})[1]; bodyHeight = document.body.offsetHeight + marginTop + marginBottom; break; default: // Quirks scrollHeight = document.body.scrollHeight; bodyHeight = document.body.clientHeight; } } else { // Safari & Opera scrollHeight = document.documentElement.scrollHeight; windowHeight = self.innerHeight; bodyHeight = document.documentElement.clientHeight; } var h = [scrollHeight,windowHeight,bodyHeight].sort(function(a, b){return(a-b);}); return h[2]; }, /** * Returns the width of the document. * @return {Int} The width of the actual document (which includes the body and its margin). */ getDocumentWidth: function() { var docWidth=-1,bodyWidth=-1,winWidth=-1; var marginRight = parseInt(util.Dom.getStyle(document.body, 'marginRight'), 10); var marginLeft = parseInt(util.Dom.getStyle(document.body, 'marginLeft'), 10); var mode = document.compatMode; if (mode || isIE) { // (IE, Gecko, Opera) switch (mode) { case 'CSS1Compat': // Standards mode docWidth = document.documentElement.clientWidth; bodyWidth = document.body.offsetWidth + marginLeft + marginRight; break; default: // Quirks bodyWidth = document.body.clientWidth; docWidth = document.body.scrollWidth; break; } } else { // Safari docWidth = document.documentElement.clientWidth; bodyWidth = document.body.offsetWidth + marginLeft + marginRight; } var w = Math.max(docWidth, bodyWidth); return w; }, /** * Returns the current height of the viewport. * @return {Int} The height of the viewable area of the page (excludes scrollbars). */ getViewportHeight: function() { var height = -1; var mode = document.compatMode; if ( (mode || isIE) && !isOpera ) { switch (mode) { // (IE, Gecko) case 'CSS1Compat': // Standards mode height = document.documentElement.clientHeight; break; default: // Quirks height = document.body.clientHeight; } } else { // Safari, Opera height = self.innerHeight; } return height; }, /** * Returns the current width of the viewport. * @return {Int} The width of the viewable area of the page (excludes scrollbars). */ getViewportWidth: function() { var width = -1; var mode = document.compatMode; if (mode || isIE) { // (IE, Gecko, Opera) switch (mode) { case 'CSS1Compat': // Standards mode width = document.documentElement.clientWidth; break; default: // Quirks width = document.body.clientWidth; } } else { // Safari width = self.innerWidth; } return width; } }; }(); /** * @class A region is a representation of an object on a grid. It is defined * by the top, right, bottom, left extents, so is rectangular by default. If * other shapes are required, this class could be extended to support it. * * @param {int} t the top extent * @param {int} r the right extent * @param {int} b the bottom extent * @param {int} l the left extent * @constructor */ YAHOO.util.Region = function(t, r, b, l) { /** * The region's top extent * @type int */ this.top = t; /** * The region's top extent as index, for symmetry with set/getXY * @type int */ this[1] = t; /** * The region's right extent * @type int */ this.right = r; /** * The region's bottom extent * @type int */ this.bottom = b; /** * The region's left extent * @type int */ this.left = l; /** * The region's left extent as index, for symmetry with set/getXY * @type int */ this[0] = l; }; /** * Returns true if this region contains the region passed in * * @param {Region} region The region to evaluate * @return {boolean} True if the region is contained with this region, * else false */ YAHOO.util.Region.prototype.contains = function(region) { return ( region.left >= this.left && region.right <= this.right && region.top >= this.top && region.bottom <= this.bottom ); }; /** * Returns the area of the region * * @return {int} the region's area */ YAHOO.util.Region.prototype.getArea = function() { return ( (this.bottom - this.top) * (this.right - this.left) ); }; /** * Returns the region where the passed in region overlaps with this one * * @param {Region} region The region that intersects * @return {Region} The overlap region, or null if there is no overlap */ YAHOO.util.Region.prototype.intersect = function(region) { var t = Math.max( this.top, region.top ); var r = Math.min( this.right, region.right ); var b = Math.min( this.bottom, region.bottom ); var l = Math.max( this.left, region.left ); if (b >= t && r >= l) { return new YAHOO.util.Region(t, r, b, l); } else { return null; } }; /** * Returns the region representing the smallest region that can contain both * the passed in region and this region. * * @param {Region} region The region that to create the union with * @return {Region} The union region */ YAHOO.util.Region.prototype.union = function(region) { var t = Math.min( this.top, region.top ); var r = Math.max( this.right, region.right ); var b = Math.max( this.bottom, region.bottom ); var l = Math.min( this.left, region.left ); return new YAHOO.util.Region(t, r, b, l); }; /** * toString * @return string the region properties */ YAHOO.util.Region.prototype.toString = function() { return ( "Region {" + "top: " + this.top + ", right: " + this.right + ", bottom: " + this.bottom + ", left: " + this.left + "}" ); }; /** * Returns a region that is occupied by the DOM element * * @param {HTMLElement} el The element * @return {Region} The region that the element occupies * @static */ YAHOO.util.Region.getRegion = function(el) { var p = YAHOO.util.Dom.getXY(el); var t = p[1]; var r = p[0] + el.offsetWidth; var b = p[1] + el.offsetHeight; var l = p[0]; return new YAHOO.util.Region(t, r, b, l); }; ///////////////////////////////////////////////////////////////////////////// /** * @class * * A point is a region that is special in that it represents a single point on * the grid. * * @param {int} x The X position of the point * @param {int} y The Y position of the point * @constructor * @extends Region */ YAHOO.util.Point = function(x, y) { if (x instanceof Array) { // accept output from Dom.getXY y = x[1]; x = x[0]; } /** * The X position of the point, which is also the right, left and index zero (for Dom.getXY symmetry) * @type int */ this.x = this.right = this.left = this[0] = x; /** * The Y position of the point, which is also the top, bottom and index one (for Dom.getXY symmetry) * @type int */ this.y = this.top = this.bottom = this[1] = y; }; YAHOO.util.Point.prototype = new YAHOO.util.Region(); /*** End of file, dom.js ***/ /*** Start of file, dragdrop.js ***/ /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.11.4 */ /** * Defines the interface and base operation of items that that can be * dragged or can be drop targets. It was designed to be extended, overriding * the event handlers for startDrag, onDrag, onDragOver, onDragOut. * Up to three html elements can be associated with a DragDrop instance: *
    *
  • linked element: the element that is passed into the constructor. * This is the element which defines the boundaries for interaction with * other DragDrop objects.
    • *
  • handle element(s): The drag operation only occurs if the element that * was clicked matches a handle element. By default this is the linked * element, but there are times that you will want only a portion of the * linked element to initiate the drag operation, and the setHandleElId() * method provides a way to define this.
    • *
  • drag element: this represents an the element that would be moved along * with the cursor during a drag operation. By default, this is the linked * element itself as in {@link YAHOO.util.DD}. setDragElId() lets you define * a separate element that would be moved, as in {@link YAHOO.util.DDProxy} *
    • *
* This class should not be instantiated until the onload event to ensure that * the associated elements are available. * The following would define a DragDrop obj that would interact with any * other * DragDrop obj in the "group1" group: * 
 *  dd = new YAHOO.util.DragDrop("div1", "group1");
 *
* Since none of the event handlers have been implemented, nothing would * actually happen if you were to run the code above. Normally you would * override this class or one of the default implementations, but you can * also override the methods you want on an instance of the class... * 
 *  dd.onDragDrop = function(e, id) {
 *   alert("dd was dropped on " + id);
 *  }
 *
* @constructor * @param {String} id of the element that is linked to this instance * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DragDrop: * padding, isTarget, maintainOffset, primaryButtonOnly */ YAHOO.util.DragDrop = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); } }; YAHOO.util.DragDrop.prototype = { /** * The id of the element associated with this object. This is what we * refer to as the "linked element" because the size and position of * this element is used to determine when the drag and drop objects have * interacted. * * @type String */ id: null, /** * Configuration attributes passed into the constructor * @type object */ config: null, /** * The id of the element that will be dragged. By default this is same * as the linked element , but could be changed to another element. Ex: * YAHOO.util.DDProxy * * @type String * @private */ dragElId: null, /** * the id of the element that initiates the drag operation. By default * this is the linked element, but could be changed to be a child of this * element. This lets us do things like only starting the drag when the * header element within the linked html element is clicked. * * @type String * @private */ handleElId: null, /** * An associative array of HTML tags that will be ignored if clicked. * @type {string: string} */ invalidHandleTypes: null, /** * An associative array of ids for elements that will be ignored if clicked * @type {string: string} */ invalidHandleIds: null, /** * An indexted array of css class names for elements that will be ignored * if clicked. * @type string[] */ invalidHandleClasses: null, /** * The linked element's absolute X position at the time the drag was * started * * @type int * @private */ startPageX: 0, /** * The linked element's absolute X position at the time the drag was * started * * @type int * @private */ startPageY: 0, /** * The group defines a logical collection of DragDrop objects that are * related. Instances only get events when interacting with other * DragDrop object in the same group. This lets us define multiple * groups using a single DragDrop subclass if we want. * @type {string: string} */ groups: null, /** * Individual drag/drop instances can be locked. This will prevent * onmousedown start drag. * * @type boolean * @private */ locked: false, /** * Lock this instance */ lock: function() { this.locked = true; }, /** * Unlock this instace */ unlock: function() { this.locked = false; }, /** * By default, all insances can be a drop target. This can be disabled by * setting isTarget to false. * * @type boolean */ isTarget: true, /** * The padding configured for this drag and drop object for calculating * the drop zone intersection with this object. * @type int[] */ padding: null, /** * @private */ _domRef: null, /** * Internal typeof flag * @private */ __ygDragDrop: true, /** * Set to true when horizontal contraints are applied * * @type boolean * @private */ constrainX: false, /** * Set to true when vertical contraints are applied * * @type boolean * @private */ constrainY: false, /** * The left constraint * * @type int * @private */ minX: 0, /** * The right constraint * * @type int * @private */ maxX: 0, /** * The up constraint * * @type int * @private */ minY: 0, /** * The down constraint * * @type int * @private */ maxY: 0, /** * Maintain offsets when we resetconstraints. Used to maintain the * slider thumb value, and this needs to be fixed. * @type boolean */ maintainOffset: false, /** * Array of pixel locations the element will snap to if we specified a * horizontal graduation/interval. This array is generated automatically * when you define a tick interval. * @type int[] */ xTicks: null, /** * Array of pixel locations the element will snap to if we specified a * vertical graduation/interval. This array is generated automatically * when you define a tick interval. * @type int[] */ yTicks: null, /** * By default the drag and drop instance will only respond to the primary * button click (left button for a right-handed mouse). Set to true to * allow drag and drop to start with any mouse click that is propogated * by the browser * @type boolean */ primaryButtonOnly: true, /** * The availabe property is false until the linked dom element is accessible. * @type boolean */ available: false, /** * Code that executes immediately before the startDrag event * @private */ b4StartDrag: function(x, y) { }, /** * Abstract method called after a drag/drop object is clicked * and the drag or mousedown time thresholds have beeen met. * * @param {int} X click location * @param {int} Y click location */ startDrag: function(x, y) { /* override this */ }, /** * Code that executes immediately before the onDrag event * @private */ b4Drag: function(e) { }, /** * Abstract method called during the onMouseMove event while dragging an * object. * * @param {Event} e */ onDrag: function(e) { /* override this */ }, /** * Code that executes immediately before the onDragEnter event * @private */ // b4DragEnter: function(e) { }, /** * Abstract method called when this element fist begins hovering over * another DragDrop obj * * @param {Event} e * @param {String || YAHOO.util.DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of one or more * dragdrop items being hovered over. */ onDragEnter: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOver event * @private */ b4DragOver: function(e) { }, /** * Abstract method called when this element is hovering over another * DragDrop obj * * @param {Event} e * @param {String || YAHOO.util.DragDrop[]} id In POINT mode, the element * id this is hovering over. In INTERSECT mode, an array of dd items * being hovered over. */ onDragOver: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragOut event * @private */ b4DragOut: function(e) { }, /** * Abstract method called when we are no longer hovering over an element * * @param {Event} e * @param {String || YAHOO.util.DragDrop[]} id In POINT mode, the element * id this was hovering over. In INTERSECT mode, an array of dd items * that the mouse is no longer over. */ onDragOut: function(e, id) { /* override this */ }, /** * Code that executes immediately before the onDragDrop event * @private */ b4DragDrop: function(e) { }, /** * Abstract method called when this item is dropped on another DragDrop * obj * * @param {Event} e * @param {String || YAHOO.util.DragDrop[]} id In POINT mode, the element * id this was dropped on. In INTERSECT mode, an array of dd items this * was dropped on. */ onDragDrop: function(e, id) { /* override this */ }, /** * Code that executes immediately before the endDrag event * @private */ b4EndDrag: function(e) { }, /** * Fired when we are done dragging the object * * @param {Event} e */ endDrag: function(e) { /* override this */ }, /** * Code executed immediately before the onMouseDown event * @param {Event} e * @private */ b4MouseDown: function(e) { }, /** * Event handler that fires when a drag/drop obj gets a mousedown * @param {Event} e */ onMouseDown: function(e) { /* override this */ }, /** * Event handler that fires when a drag/drop obj gets a mouseup * @param {Event} e */ onMouseUp: function(e) { /* override this */ }, /** * Override the onAvailable method to do what is needed after the initial * position was determined. */ onAvailable: function () { }, /** * Returns a reference to the linked element * * @return {HTMLElement} the html element */ getEl: function() { if (!this._domRef) { this._domRef = YAHOO.util.Dom.get(this.id); } return this._domRef; }, /** * Returns a reference to the actual element to drag. By default this is * the same as the html element, but it can be assigned to another * element. An example of this can be found in YAHOO.util.DDProxy * * @return {HTMLElement} the html element */ getDragEl: function() { return YAHOO.util.Dom.get(this.dragElId); }, /** * Sets up the DragDrop object. Must be called in the constructor of any * YAHOO.util.DragDrop subclass * * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ init: function(id, sGroup, config) { this.initTarget(id, sGroup, config); YAHOO.util.Event.addListener(this.id, "mousedown", this.handleMouseDown, this, true); }, /** * Initializes Targeting functionality only... the object does not * get a mousedown handler. * * @param id the id of the linked element * @param {String} sGroup the group of related items * @param {object} config configuration attributes */ initTarget: function(id, sGroup, config) { // configuration attributes this.config = config || {}; // create a local reference to the drag and drop manager this.DDM = YAHOO.util.DDM; // initialize the groups array this.groups = {}; // set the id this.id = id; // add to an interaction group this.addToGroup((sGroup) ? sGroup : "default"); // We don't want to register this as the handle with the manager // so we just set the id rather than calling the setter. this.handleElId = id; YAHOO.util.Event.onAvailable(id, this.handleOnAvailable, this, true); // the linked element is the element that gets dragged by default this.setDragElId(id); // by default, clicked anchors will not start drag operations. // @TODO what else should be here? Probably form fields. this.invalidHandleTypes = { A: "A" }; this.invalidHandleIds = {}; this.invalidHandleClasses = []; this.applyConfig(); }, /** * Applies the configuration parameters that were passed into the constructor. * This is supposed to happen at each level through the inheritance chain. So * a DDProxy implentation will execute apply config on DDProxy, DD, and * DragDrop in order to get all of the parameters that are available in * each object. */ applyConfig: function() { // configurable properties: // padding, isTarget, maintainOffset, primaryButtonOnly this.padding = this.config.padding || [0, 0, 0, 0]; this.isTarget = (this.config.isTarget !== false); this.maintainOffset = (this.config.maintainOffset); this.primaryButtonOnly = (this.config.primaryButtonOnly !== false); }, /** * Executed when the linked element is available * @private */ handleOnAvailable: function() { this.available = true; this.resetConstraints(); this.onAvailable(); }, /** * Configures the padding for the target zone in px. Effectively expands * (or reduces) the virtual object size for targeting calculations. * Supports css-style shorthand; if only one parameter is passed, all sides * will have that padding, and if only two are passed, the top and bottom * will have the first param, the left and right the second. * @param {int} iTop Top pad * @param {int} iRight Right pad * @param {int} iBot Bot pad * @param {int} iLeft Left pad */ setPadding: function(iTop, iRight, iBot, iLeft) { // this.padding = [iLeft, iRight, iTop, iBot]; if (!iRight && 0 !== iRight) { this.padding = [iTop, iTop, iTop, iTop]; } else if (!iBot && 0 !== iBot) { this.padding = [iTop, iRight, iTop, iRight]; } else { this.padding = [iTop, iRight, iBot, iLeft]; } }, /** * Stores the initial placement of the dd element */ setInitPosition: function(diffX, diffY) { var el = this.getEl(); if (!this.DDM.verifyEl(el)) { return; } var dx = diffX || 0; var dy = diffY || 0; var p = YAHOO.util.Dom.getXY( el ); this.initPageX = p[0] - dx; this.initPageY = p[1] - dy; this.lastPageX = p[0]; this.lastPageY = p[1]; this.setStartPosition(p); }, /** * Sets the start position of the element. This is set when the obj * is initialized, the reset when a drag is started. * @param pos current position (from previous lookup) * @private */ setStartPosition: function(pos) { var p = pos || YAHOO.util.Dom.getXY( this.getEl() ); this.deltaSetXY = null; this.startPageX = p[0]; this.startPageY = p[1]; }, /** * Add this instance to a group of related drag/drop objects. All * instances belong to at least one group, and can belong to as many * groups as needed. * * @param sGroup {string} the name of the group */ addToGroup: function(sGroup) { this.groups[sGroup] = true; this.DDM.regDragDrop(this, sGroup); }, /** * Remove's this instance from the supplied interaction group * @param {string} sGroup The group to drop */ removeFromGroup: function(sGroup) { if (this.groups[sGroup]) { delete this.groups[sGroup]; } this.DDM.removeDDFromGroup(this, sGroup); }, /** * Allows you to specify that an element other than the linked element * will be moved with the cursor during a drag * * @param id the id of the element that will be used to initiate the drag */ setDragElId: function(id) { this.dragElId = id; }, /** * Allows you to specify a child of the linked element that should be * used to initiate the drag operation. An example of this would be if * you have a content div with text and links. Clicking anywhere in the * content area would normally start the drag operation. Use this method * to specify that an element inside of the content div is the element * that starts the drag operation. * * @param id the id of the element that will be used to initiate the drag */ setHandleElId: function(id) { this.handleElId = id; this.DDM.regHandle(this.id, id); }, /** * Allows you to set an element outside of the linked element as a drag * handle */ setOuterHandleElId: function(id) { YAHOO.util.Event.addListener(id, "mousedown", this.handleMouseDown, this, true); this.setHandleElId(id); }, /** * Remove all drag and drop hooks for this element */ unreg: function() { YAHOO.util.Event.removeListener(this.id, "mousedown", this.handleMouseDown); this._domRef = null; this.DDM._remove(this); }, /** * Returns true if this instance is locked, or the drag drop mgr is locked * (meaning that all drag/drop is disabled on the page.) * * @return {boolean} true if this obj or all drag/drop is locked, else * false */ isLocked: function() { return (this.DDM.isLocked() || this.locked); }, /** * Fired when this object is clicked * * @param {Event} e * @param {YAHOO.util.DragDrop} oDD the clicked dd object (this dd obj) * @private */ handleMouseDown: function(e, oDD) { var EU = YAHOO.util.Event; var button = e.which || e.button; if (this.primaryButtonOnly && button > 1) { return; } if (this.isLocked()) { return; } this.DDM.refreshCache(this.groups); // var self = this; // setTimeout( function() { self.DDM.refreshCache(self.groups); }, 0); // Only process the event if we really clicked within the linked // element. The reason we make this check is that in the case that // another element was moved between the clicked element and the // cursor in the time between the mousedown and mouseup events. When // this happens, the element gets the next mousedown event // regardless of where on the screen it happened. var pt = new YAHOO.util.Point(EU.getPageX(e), EU.getPageY(e)); if ( !this.DDM.isOverTarget(pt, this) ) { } else { // check to see if the handle was clicked var srcEl = EU.getTarget(e); if (this.isValidHandleChild(srcEl) && (this.id == this.handleElId || this.DDM.handleWasClicked(srcEl, this.id)) ) { // set the initial element position this.setStartPosition(); this.b4MouseDown(e); this.onMouseDown(e); this.DDM.handleMouseDown(e, this); this.DDM.stopEvent(e); } } }, /** * Allows you to specify a tag name that should not start a drag operation * when clicked. This is designed to facilitate embedding links within a * drag handle that do something other than start the drag. * * @param {string} tagName the type of element to exclude */ addInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); this.invalidHandleTypes[type] = type; }, /** * Lets you to specify an element id for a child of a drag handle * that should not initiate a drag * @param {string} id the element id of the element you wish to ignore */ addInvalidHandleId: function(id) { this.invalidHandleIds[id] = id; }, /** * Lets you specify a css class of elements that will not initiate a drag * @param {string} cssClass the class of the elements you wish to ignore */ addInvalidHandleClass: function(cssClass) { this.invalidHandleClasses.push(cssClass); }, /** * Unsets an excluded tag name set by addInvalidHandleType * * @param {string} tagName the type of element to unexclude */ removeInvalidHandleType: function(tagName) { var type = tagName.toUpperCase(); // this.invalidHandleTypes[type] = null; delete this.invalidHandleTypes[type]; }, /** * Unsets an invalid handle id * @param {string} the id of the element to re-enable */ removeInvalidHandleId: function(id) { delete this.invalidHandleIds[id]; }, /** * Unsets an invalid css class * @param {string} the class of the element(s) you wish to re-enable */ removeInvalidHandleClass: function(cssClass) { for (var i=0, len=this.invalidHandleClasses.length; i= this.minX; i = i - iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) { if (!tickMap[i]) { this.xTicks[this.xTicks.length] = i; tickMap[i] = true; } } this.xTicks.sort(this.DDM.numericSort) ; }, /** * Create the array of vertical tick marks if an interval was specified in * setYConstraint(). * * @private */ setYTicks: function(iStartY, iTickSize) { this.yTicks = []; this.yTickSize = iTickSize; var tickMap = {}; for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) { if (!tickMap[i]) { this.yTicks[this.yTicks.length] = i; tickMap[i] = true; } } this.yTicks.sort(this.DDM.numericSort) ; }, /** * By default, the element can be dragged any place on the screen. Use * this method to limit the horizontal travel of the element. Pass in * 0,0 for the parameters if you want to lock the drag to the y axis. * * @param {int} iLeft the number of pixels the element can move to the left * @param {int} iRight the number of pixels the element can move to the * right * @param {int} iTickSize optional parameter for specifying that the * element * should move iTickSize pixels at a time. */ setXConstraint: function(iLeft, iRight, iTickSize) { this.leftConstraint = iLeft; this.rightConstraint = iRight; this.minX = this.initPageX - iLeft; this.maxX = this.initPageX + iRight; if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); } this.constrainX = true; }, /** * Clears any constraints applied to this instance. Also clears ticks * since they can't exist independent of a constraint at this time. */ clearConstraints: function() { this.constrainX = false; this.constrainY = false; this.clearTicks(); }, /** * Clears any tick interval defined for this instance */ clearTicks: function() { this.xTicks = null; this.yTicks = null; this.xTickSize = 0; this.yTickSize = 0; }, /** * By default, the element can be dragged any place on the screen. Set * this to limit the vertical travel of the element. Pass in 0,0 for the * parameters if you want to lock the drag to the x axis. * * @param {int} iUp the number of pixels the element can move up * @param {int} iDown the number of pixels the element can move down * @param {int} iTickSize optional parameter for specifying that the * element should move iTickSize pixels at a time. */ setYConstraint: function(iUp, iDown, iTickSize) { this.topConstraint = iUp; this.bottomConstraint = iDown; this.minY = this.initPageY - iUp; this.maxY = this.initPageY + iDown; if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); } this.constrainY = true; }, /** * resetConstraints must be called if you manually reposition a dd element. * @param {boolean} maintainOffset */ resetConstraints: function() { // Maintain offsets if necessary if (this.initPageX || this.initPageX === 0) { // figure out how much this thing has moved var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0; var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0; this.setInitPosition(dx, dy); // This is the first time we have detected the element's position } else { this.setInitPosition(); } if (this.constrainX) { this.setXConstraint( this.leftConstraint, this.rightConstraint, this.xTickSize ); } if (this.constrainY) { this.setYConstraint( this.topConstraint, this.bottomConstraint, this.yTickSize ); } }, /** * Normally the drag element is moved pixel by pixel, but we can specify * that it move a number of pixels at a time. This method resolves the * location when we have it set up like this. * * @param {int} val where we want to place the object * @param {int[]} tickArray sorted array of valid points * @return {int} the closest tick * @private */ getTick: function(val, tickArray) { if (!tickArray) { // If tick interval is not defined, it is effectively 1 pixel, // so we return the value passed to us. return val; } else if (tickArray[0] >= val) { // The value is lower than the first tick, so we return the first // tick. return tickArray[0]; } else { for (var i=0, len=tickArray.length; i= val) { var diff1 = val - tickArray[i]; var diff2 = tickArray[next] - val; return (diff2 > diff1) ? tickArray[i] : tickArray[next]; } } // The value is larger than the last tick, so we return the last // tick. return tickArray[tickArray.length - 1]; } }, /** * toString method * @return {string} string representation of the dd obj */ toString: function() { return ("DragDrop " + this.id); } }; // Only load the library once. Rewriting the manager class would orphan // existing drag and drop instances. if (!YAHOO.util.DragDropMgr) { /** * Handles the element interaction for all DragDrop items in the * window. Generally, you will not call this class directly, but it does * have helper methods that could be useful in your DragDrop * implementations. This class should not be instantiated; all methods * are are static. * * @constructor */ YAHOO.util.DragDropMgr = new function() { /** * Two dimensional Array of registered DragDrop objects. The first * dimension is the DragDrop item group, the second the DragDrop * object. * * @type {string: string} * @private */ this.ids = {}; /** * Array of element ids defined as drag handles. Used to determine * if the element that generated the mousedown event is actually the * handle and not the html element itself. * * @type {string: string} * @private */ this.handleIds = {}; /** * the DragDrop object that is currently being dragged * * @type DragDrop * @private **/ this.dragCurrent = null; /** * the DragDrop object(s) that are being hovered over * * @type Array * @private */ this.dragOvers = {}; /** * @private */ /** * the X distance between the cursor and the object being dragged * * @type int * @private */ this.deltaX = 0; /** * the Y distance between the cursor and the object being dragged * * @type int * @private */ this.deltaY = 0; /** * Flag to determine if we should prevent the default behavior of the * events we define. By default this is true, but this can be set to * false if you need the default behavior (not recommended) * * @type boolean */ this.preventDefault = true; /** * Flag to determine if we should stop the propagation of the events * we generate. This is true by default but you may want to set it to * false if the html element contains other features that require the * mouse click. * * @type boolean */ this.stopPropagation = true; /** * @private */ this.initalized = false; /** * All drag and drop can be disabled. * * @private */ this.locked = false; /** * Called the first time an element is registered. * * @private */ this.init = function() { this.initialized = true; }; /** * In point mode, drag and drop interaction is defined by the * location of the cursor during the drag/drop * @type int */ this.POINT = 0; /** * In intersect mode, drag and drop interactio nis defined by the * overlap of two or more drag and drop objects. * @type int */ this.INTERSECT = 1; /** * The current drag and drop mode. Default it point mode * @type int */ this.mode = this.POINT; /** * Runs method on all drag and drop objects * @private */ this._execOnAll = function(sMethod, args) { for (var i in this.ids) { for (var j in this.ids[i]) { var oDD = this.ids[i][j]; if (! this.isTypeOfDD(oDD)) { continue; } oDD[sMethod].apply(oDD, args); } } }; /** * Drag and drop initialization. Sets up the global event handlers * @private */ this._onLoad = function() { this.init(); var EU = YAHOO.util.Event; EU.on(document, "mouseup", this.handleMouseUp, this, true); EU.on(document, "mousemove", this.handleMouseMove, this, true); EU.on(window, "unload", this._onUnload, this, true); EU.on(window, "resize", this._onResize, this, true); // EU.on(window, "mouseout", this._test); }; /** * Reset constraints on all drag and drop objs * @private */ this._onResize = function(e) { this._execOnAll("resetConstraints", []); }; /** * Lock all drag and drop functionality */ this.lock = function() { this.locked = true; }; /** * Unlock all drag and drop functionality */ this.unlock = function() { this.locked = false; }; /** * Is drag and drop locked? * * @return {boolean} True if drag and drop is locked, false otherwise. */ this.isLocked = function() { return this.locked; }; /** * Location cache that is set for all drag drop objects when a drag is * initiated, cleared when the drag is finished. * * @private */ this.locationCache = {}; /** * Set useCache to false if you want to force object the lookup of each * drag and drop linked element constantly during a drag. * @type boolean */ this.useCache = true; /** * The number of pixels that the mouse needs to move after the * mousedown before the drag is initiated. Default=3; * @type int */ this.clickPixelThresh = 3; /** * The number of milliseconds after the mousedown event to initiate the * drag if we don't get a mouseup event. Default=1000 * @type int */ this.clickTimeThresh = 1000; /** * Flag that indicates that either the drag pixel threshold or the * mousdown time threshold has been met * @type boolean * @private */ this.dragThreshMet = false; /** * Timeout used for the click time threshold * @type Object * @private */ this.clickTimeout = null; /** * The X position of the mousedown event stored for later use when a * drag threshold is met. * @type int * @private */ this.startX = 0; /** * The Y position of the mousedown event stored for later use when a * drag threshold is met. * @type int * @private */ this.startY = 0; /** * Each DragDrop instance must be registered with the DragDropMgr. * This is executed in DragDrop.init() * * @param {DragDrop} oDD the DragDrop object to register * @param {String} sGroup the name of the group this element belongs to */ this.regDragDrop = function(oDD, sGroup) { if (!this.initialized) { this.init(); } if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } this.ids[sGroup][oDD.id] = oDD; }; /** * Removes the supplied dd instance from the supplied group. Executed * by DragDrop.removeFromGroup. * @private */ this.removeDDFromGroup = function(oDD, sGroup) { if (!this.ids[sGroup]) { this.ids[sGroup] = {}; } var obj = this.ids[sGroup]; if (obj && obj[oDD.id]) { delete obj[oDD.id]; } }; /** * Unregisters a drag and drop item. This is executed in * DragDrop.unreg, use that method instead of calling this directly. * @private */ this._remove = function(oDD) { for (var g in oDD.groups) { if (g && this.ids[g][oDD.id]) { delete this.ids[g][oDD.id]; } } delete this.handleIds[oDD.id]; }; /** * Each DragDrop handle element must be registered. This is done * automatically when executing DragDrop.setHandleElId() * * @param {String} sDDId the DragDrop id this element is a handle for * @param {String} sHandleId the id of the element that is the drag * handle */ this.regHandle = function(sDDId, sHandleId) { if (!this.handleIds[sDDId]) { this.handleIds[sDDId] = {}; } this.handleIds[sDDId][sHandleId] = sHandleId; }; /** * Utility function to determine if a given element has been * registered as a drag drop item. * * @param {String} id the element id to check * @return {boolean} true if this element is a DragDrop item, * false otherwise */ this.isDragDrop = function(id) { return ( this.getDDById(id) ) ? true : false; }; /** * Returns the drag and drop instances that are in all groups the * passed in instance belongs to. * * @param {DragDrop} p_oDD the obj to get related data for * @param {boolean} bTargetsOnly if true, only return targetable objs * @return {DragDrop[]} the related instances */ this.getRelated = function(p_oDD, bTargetsOnly) { var oDDs = []; for (var i in p_oDD.groups) { for (j in this.ids[i]) { var dd = this.ids[i][j]; if (! this.isTypeOfDD(dd)) { continue; } if (!bTargetsOnly || dd.isTarget) { oDDs[oDDs.length] = dd; } } } return oDDs; }; /** * Returns true if the specified dd target is a legal target for * the specifice drag obj * * @param {DragDrop} the drag obj * @param {DragDrop) the target * @return {boolean} true if the target is a legal target for the * dd obj */ this.isLegalTarget = function (oDD, oTargetDD) { var targets = this.getRelated(oDD, true); for (var i=0, len=targets.length;i this.clickPixelThresh || diffY > this.clickPixelThresh) { this.startDrag(this.startX, this.startY); } } if (this.dragThreshMet) { this.dragCurrent.b4Drag(e); this.dragCurrent.onDrag(e); this.fireEvents(e, false); } this.stopEvent(e); return true; }; /** * Iterates over all of the DragDrop elements to find ones we are * hovering over or dropping on * * @param {Event} e the event * @param {boolean} isDrop is this a drop op or a mouseover op? * @private */ this.fireEvents = function(e, isDrop) { var dc = this.dragCurrent; // If the user did the mouse up outside of the window, we could // get here even though we have ended the drag. if (!dc || dc.isLocked()) { return; } var x = YAHOO.util.Event.getPageX(e); var y = YAHOO.util.Event.getPageY(e); var pt = new YAHOO.util.Point(x,y); // cache the previous dragOver array var oldOvers = []; var outEvts = []; var overEvts = []; var dropEvts = []; var enterEvts = []; // Check to see if the object(s) we were hovering over is no longer // being hovered over so we can fire the onDragOut event for (var i in this.dragOvers) { var ddo = this.dragOvers[i]; if (! this.isTypeOfDD(ddo)) { continue; } if (! this.isOverTarget(pt, ddo, this.mode)) { outEvts.push( ddo ); } oldOvers[i] = true; delete this.dragOvers[i]; } for (var sGroup in dc.groups) { if ("string" != typeof sGroup) { continue; } for (i in this.ids[sGroup]) { var oDD = this.ids[sGroup][i]; if (! this.isTypeOfDD(oDD)) { continue; } if (oDD.isTarget && !oDD.isLocked() && oDD != dc) { if (this.isOverTarget(pt, oDD, this.mode)) { // look for drop interactions if (isDrop) { dropEvts.push( oDD ); // look for drag enter and drag over interactions } else { // initial drag over: dragEnter fires if (!oldOvers[oDD.id]) { enterEvts.push( oDD ); // subsequent drag overs: dragOver fires } else { overEvts.push( oDD ); } this.dragOvers[oDD.id] = oDD; } } } } } if (this.mode) { if (outEvts.length) { dc.b4DragOut(e, outEvts); dc.onDragOut(e, outEvts); } if (enterEvts.length) { dc.onDragEnter(e, enterEvts); } if (overEvts.length) { dc.b4DragOver(e, overEvts); dc.onDragOver(e, overEvts); } if (dropEvts.length) { dc.b4DragDrop(e, dropEvts); dc.onDragDrop(e, dropEvts); } } else { // fire dragout events var len = 0; for (i=0, len=outEvts.length; i 2000) { } else { setTimeout(DDM._addListeners, 10); if (document && document.body) { DDM._timeoutCount += 1; } } } }; /** * Recursively searches the immediate parent and all child nodes for * the handle element in order to determine wheter or not it was * clicked. * @param node the html element to inspect */ this.handleWasClicked = function(node, id) { if (this.isHandle(id, node.id)) { return true; } else { // check to see if this is a text node child of the one we want var p = node.parentNode; while (p) { if (this.isHandle(id, p.id)) { return true; } else { p = p.parentNode; } } } return false; }; } (); // shorter alias, save a few bytes YAHOO.util.DDM = YAHOO.util.DragDropMgr; YAHOO.util.DDM._addListeners(); } //YAHOO.util.DragDropMgr.enableWindow = function(win) { //var EU = YAHOO.util.Event; //EU.on(win.document, "mouseup", this.handleMouseUp, this, true); //EU.on(win.document, "mousemove", this.handleMouseMove, this, true); //}; /** * A DragDrop implementation where the linked element follows the * mouse cursor during a drag. * * @extends YAHOO.util.DragDrop * @constructor * @param {String} id the id of the linked element * @param {String} sGroup the group of related DragDrop items * @param {object} config an object containing configurable attributes * Valid properties for DD: * scroll */ YAHOO.util.DD = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); } }; // YAHOO.util.DD.prototype = new YAHOO.util.DragDrop(); YAHOO.extend(YAHOO.util.DD, YAHOO.util.DragDrop); /** * When set to true, the utility automatically tries to scroll the browser * window wehn a drag and drop element is dragged near the viewport boundary. * Defaults to true. * * @type boolean */ YAHOO.util.DD.prototype.scroll = true; /** * Sets the pointer offset to the distance between the linked element's top * left corner and the location the element was clicked * * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click */ YAHOO.util.DD.prototype.autoOffset = function(iPageX, iPageY) { // var el = this.getEl(); // var aCoord = YAHOO.util.Dom.getXY(el); // var x = iPageX - aCoord[0]; // var y = iPageY - aCoord[1]; var x = iPageX - this.startPageX; var y = iPageY - this.startPageY; this.setDelta(x, y); }; /** * Sets the pointer offset. You can call this directly to force the offset to * be in a particular location (e.g., pass in 0,0 to set it to the center of the * object, as done in YAHOO.widget.Slider) * * @param {int} iDeltaX the distance from the left * @param {int} iDeltaY the distance from the top */ YAHOO.util.DD.prototype.setDelta = function(iDeltaX, iDeltaY) { this.deltaX = iDeltaX; this.deltaY = iDeltaY; }; /** * Sets the drag element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ YAHOO.util.DD.prototype.setDragElPos = function(iPageX, iPageY) { // the first time we do this, we are going to check to make sure // the element has css positioning var el = this.getDragEl(); // if (!this.cssVerified) { // var pos = el.style.position; // } this.alignElWithMouse(el, iPageX, iPageY); }; /** * Sets the element to the location of the mousedown or click event, * maintaining the cursor location relative to the location on the element * that was clicked. Override this if you want to place the element in a * location other than where the cursor is. * * @param {HTMLElement} el the element to move * @param {int} iPageX the X coordinate of the mousedown or drag event * @param {int} iPageY the Y coordinate of the mousedown or drag event */ YAHOO.util.DD.prototype.alignElWithMouse = function(el, iPageX, iPageY) { var oCoord = this.getTargetCoord(iPageX, iPageY); // this.deltaSetXY = null; if (!this.deltaSetXY) { var aCoord = [oCoord.x, oCoord.y]; YAHOO.util.Dom.setXY(el, aCoord); var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 ); var newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 ); this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ]; } else { YAHOO.util.Dom.setStyle(el, "left", (oCoord.x + this.deltaSetXY[0]) + "px"); YAHOO.util.Dom.setStyle(el, "top", (oCoord.y + this.deltaSetXY[1]) + "px"); } this.cachePosition(oCoord.x, oCoord.y); this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth); }; /** * Saves the most recent position so that we can reset the constraints and * tick marks on-demand. We need to know this so that we can calculate the * number of pixels the element is offset from its original position. */ YAHOO.util.DD.prototype.cachePosition = function(iPageX, iPageY) { if (iPageX) { this.lastPageX = iPageX; this.lastPageY = iPageY; } else { var aCoord = YAHOO.util.Dom.getXY(this.getEl()); this.lastPageX = aCoord[0]; this.lastPageY = aCoord[1]; } }; /** * Auto-scroll the window if the dragged object has been moved beyond the * visible window boundary. * * @param {int} x the drag element's x position * @param {int} y the drag element's y position * @param {int} h the height of the drag element * @param {int} w the width of the drag element * @private */ YAHOO.util.DD.prototype.autoScroll = function(x, y, h, w) { if (this.scroll) { // The client height var clientH = this.DDM.getClientHeight(); // The client width var clientW = this.DDM.getClientWidth(); // The amt scrolled down var st = this.DDM.getScrollTop(); // The amt scrolled right var sl = this.DDM.getScrollLeft(); // Location of the bottom of the element var bot = h + y; // Location of the right of the element var right = w + x; // The distance from the cursor to the bottom of the visible area, // adjusted so that we don't scroll if the cursor is beyond the // element drag constraints var toBot = (clientH + st - y - this.deltaY); // The distance from the cursor to the right of the visible area var toRight = (clientW + sl - x - this.deltaX); // How close to the edge the cursor must be before we scroll // var thresh = (document.all) ? 100 : 40; var thresh = 40; // How many pixels to scroll per autoscroll op. This helps to reduce // clunky scrolling. IE is more sensitive about this ... it needs this // value to be higher. var scrAmt = (document.all) ? 80 : 30; // Scroll down if we are near the bottom of the visible page and the // obj extends below the crease if ( bot > clientH && toBot < thresh ) { window.scrollTo(sl, st + scrAmt); } // Scroll up if the window is scrolled down and the top of the object // goes above the top border if ( y < st && st > 0 && y - st < thresh ) { window.scrollTo(sl, st - scrAmt); } // Scroll right if the obj is beyond the right border and the cursor is // near the border. if ( right > clientW && toRight < thresh ) { window.scrollTo(sl + scrAmt, st); } // Scroll left if the window has been scrolled to the right and the obj // extends past the left border if ( x < sl && sl > 0 && x - sl < thresh ) { window.scrollTo(sl - scrAmt, st); } } }; /** * Finds the location the element should be placed if we want to move * it to where the mouse location less the click offset would place us. * * @param {int} iPageX the X coordinate of the click * @param {int} iPageY the Y coordinate of the click * @return an object that contains the coordinates (Object.x and Object.y) * @private */ YAHOO.util.DD.prototype.getTargetCoord = function(iPageX, iPageY) { var x = iPageX - this.deltaX; var y = iPageY - this.deltaY; if (this.constrainX) { if (x < this.minX) { x = this.minX; } if (x > this.maxX) { x = this.maxX; } } if (this.constrainY) { if (y < this.minY) { y = this.minY; } if (y > this.maxY) { y = this.maxY; } } x = this.getTick(x, this.xTicks); y = this.getTick(y, this.yTicks); return {x:x, y:y}; }; YAHOO.util.DD.prototype.applyConfig = function() { YAHOO.util.DD.superclass.applyConfig.call(this); this.scroll = (this.config.scroll !== false); }; /** * Event that fires prior to the onMouseDown event. Overrides * YAHOO.util.DragDrop. */ YAHOO.util.DD.prototype.b4MouseDown = function(e) { // this.resetConstraints(); this.autoOffset(YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)); }; /** * Event that fires prior to the onDrag event. Overrides * YAHOO.util.DragDrop. */ YAHOO.util.DD.prototype.b4Drag = function(e) { this.setDragElPos(YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)); }; YAHOO.util.DD.prototype.toString = function() { return ("DD " + this.id); }; /////////////////////////////////////////////////////////////////////////////// // Debugging ygDragDrop events that can be overridden /////////////////////////////////////////////////////////////////////////////// /* YAHOO.util.DD.prototype.startDrag = function(x, y) { }; YAHOO.util.DD.prototype.onDrag = function(e) { }; YAHOO.util.DD.prototype.onDragEnter = function(e, id) { }; YAHOO.util.DD.prototype.onDragOver = function(e, id) { }; YAHOO.util.DD.prototype.onDragOut = function(e, id) { }; YAHOO.util.DD.prototype.onDragDrop = function(e, id) { }; YAHOO.util.DD.prototype.endDrag = function(e) { }; */ /** * A DragDrop implementation that inserts an empty, bordered div into * the document that follows the cursor during drag operations. At the time of * the click, the frame div is resized to the dimensions of the linked html * element, and moved to the exact location of the linked element. * * References to the "frame" element refer to the single proxy element that * was created to be dragged in place of all DDProxy elements on the * page. * * @extends YAHOO.util.DD * @constructor * @param {String} id the id of the linked html element * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDProxy in addition to those in DragDrop: * resizeFrame, centerFrame, dragElId */ YAHOO.util.DDProxy = function(id, sGroup, config) { if (id) { this.init(id, sGroup, config); this.initFrame(); } }; YAHOO.extend(YAHOO.util.DDProxy, YAHOO.util.DD); /** * The default drag frame div id * @type String */ YAHOO.util.DDProxy.dragElId = "ygddfdiv"; /** * By default we resize the drag frame to be the same size as the element * we want to drag (this is to get the frame effect). We can turn it off * if we want a different behavior. * * @type boolean */ YAHOO.util.DDProxy.prototype.resizeFrame = true; /** * By default the frame is positioned exactly where the drag element is, so * we use the cursor offset provided by YAHOO.util.DD. Another option that works only if * you do not have constraints on the obj is to have the drag frame centered * around the cursor. Set centerFrame to true for this effect. * * @type boolean */ YAHOO.util.DDProxy.prototype.centerFrame = false; /** * Create the drag frame if needed */ YAHOO.util.DDProxy.prototype.createFrame = function() { var self = this; var body = document.body; if (!body || !body.firstChild) { setTimeout( function() { self.createFrame(); }, 50 ); return; } var div = this.getDragEl(); if (!div) { div = document.createElement("div"); div.id = this.dragElId; var s = div.style; s.position = "absolute"; s.visibility = "hidden"; s.cursor = "move"; s.border = "2px solid #aaa"; s.zIndex = 999; // appendChild can blow up IE if invoked prior to the window load event // while rendering a table. It is possible there are other scenarios // that would cause this to happen as well. body.insertBefore(div, body.firstChild); } }; /** * Initialization for the drag frame element. Must be called in the * constructor of all subclasses */ YAHOO.util.DDProxy.prototype.initFrame = function() { // YAHOO.util.DDProxy.createFrame(); // this.setDragElId(YAHOO.util.DDProxy.dragElId); this.createFrame(); }; YAHOO.util.DDProxy.prototype.applyConfig = function() { YAHOO.util.DDProxy.superclass.applyConfig.call(this); this.resizeFrame = (this.config.resizeFrame !== false); this.centerFrame = (this.config.centerFrame); this.setDragElId(this.config.dragElId || YAHOO.util.DDProxy.dragElId); }; /** * Resizes the drag frame to the dimensions of the clicked object, positions * it over the object, and finally displays it * * @param {int} iPageX X click position * @param {int} iPageY Y click position * @private */ YAHOO.util.DDProxy.prototype.showFrame = function(iPageX, iPageY) { var el = this.getEl(); var dragEl = this.getDragEl(); var s = dragEl.style; this._resizeProxy(); if (this.centerFrame) { this.setDelta( Math.round(parseInt(s.width, 10)/2), Math.round(parseInt(s.height, 10)/2) ); } this.setDragElPos(iPageX, iPageY); YAHOO.util.Dom.setStyle(dragEl, "visibility", "visible"); }; YAHOO.util.DDProxy.prototype._resizeProxy = function() { if (this.resizeFrame) { var DOM = YAHOO.util.Dom; var el = this.getEl(); var dragEl = this.getDragEl(); var bt = parseInt( DOM.getStyle(dragEl, "borderTopWidth" ), 10); var br = parseInt( DOM.getStyle(dragEl, "borderRightWidth" ), 10); var bb = parseInt( DOM.getStyle(dragEl, "borderBottomWidth" ), 10); var bl = parseInt( DOM.getStyle(dragEl, "borderLeftWidth" ), 10); if (isNaN(bt)) { bt = 0; } if (isNaN(br)) { br = 0; } if (isNaN(bb)) { bb = 0; } if (isNaN(bl)) { bl = 0; } var newWidth = Math.max(0, el.offsetWidth - br - bl); var newHeight = Math.max(0, el.offsetHeight - bt - bb); DOM.setStyle( dragEl, "width", newWidth + "px" ); DOM.setStyle( dragEl, "height", newHeight + "px" ); } }; // overrides YAHOO.util.DragDrop YAHOO.util.DDProxy.prototype.b4MouseDown = function(e) { var x = YAHOO.util.Event.getPageX(e); var y = YAHOO.util.Event.getPageY(e); this.autoOffset(x, y); this.setDragElPos(x, y); }; // overrides YAHOO.util.DragDrop YAHOO.util.DDProxy.prototype.b4StartDrag = function(x, y) { // show the drag frame this.showFrame(x, y); }; // overrides YAHOO.util.DragDrop YAHOO.util.DDProxy.prototype.b4EndDrag = function(e) { YAHOO.util.Dom.setStyle(this.getDragEl(), "visibility", "hidden"); }; // overrides YAHOO.util.DragDrop // By default we try to move the element to the last location of the frame. // This is so that the default behavior mirrors that of YAHOO.util.DD. YAHOO.util.DDProxy.prototype.endDrag = function(e) { var DOM = YAHOO.util.Dom; var lel = this.getEl(); var del = this.getDragEl(); // Show the drag frame briefly so we can get its position // del.style.visibility = ""; DOM.setStyle(del, "visibility", ""); // Hide the linked element before the move to get around a Safari // rendering bug. //lel.style.visibility = "hidden"; DOM.setStyle(lel, "visibility", "hidden"); YAHOO.util.DDM.moveToEl(lel, del); //del.style.visibility = "hidden"; DOM.setStyle(del, "visibility", "hidden"); //lel.style.visibility = ""; DOM.setStyle(lel, "visibility", ""); }; YAHOO.util.DDProxy.prototype.toString = function() { return ("DDProxy " + this.id); }; /** * A DragDrop implementation that does not move, but can be a drop * target. You would get the same result by simply omitting implementation * for the event callbacks, but this way we reduce the processing cost of the * event listener and the callbacks. * * @extends YAHOO.util.DragDrop * @constructor * @param {String} id the id of the element that is a drop target * @param {String} sGroup the group of related DragDrop objects * @param {object} config an object containing configurable attributes * Valid properties for DDTarget in addition to those in DragDrop: * none */ YAHOO.util.DDTarget = function(id, sGroup, config) { if (id) { this.initTarget(id, sGroup, config); } }; // YAHOO.util.DDTarget.prototype = new YAHOO.util.DragDrop(); YAHOO.extend(YAHOO.util.DDTarget, YAHOO.util.DragDrop); YAHOO.util.DDTarget.prototype.toString = function() { return ("DDTarget " + this.id); }; /*** End of file, dragdrop.js ***/ /*** Start of file, connection.js ***/ /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.11.3 */ /** * The Connection Manager provides a simplified interface to the XMLHttpRequest * object. It handles cross-browser instantiantion of XMLHttpRequest, negotiates the * interactive states and server response, returning the results to a pre-defined * callback you create. * @ class */ YAHOO.util.Connect = { /** * Array of MSFT ActiveX ids for XMLHttpRequest. * @private * @type array */ _msxml_progid:[ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ], /** * Object literal of HTTP header(s) * @private * @type object */ _http_header:{}, /** * Determines if HTTP headers are set. * @private * @type boolean */ _has_http_headers:false, /** * Determines if a default header of * Content-Type of 'application/x-www-form-urlencoded' * will be added to any client HTTP headers sent for POST * transactions. * @private * @type boolean */ _use_default_post_header:true, /** * Determines if a default header of * Content-Type of 'application/x-www-form-urlencoded' * will be added to any client HTTP headers sent for POST * transactions. * @private * @type boolean */ _default_post_header:'application/x-www-form-urlencoded', /** * Property modified by setForm() to determine if the data * should be submitted as an HTML form. * @private * @type boolean */ _isFormSubmit:false, /** * Property modified by setForm() to determine if a file(s) * upload is expected. * @private * @type boolean */ _isFileUpload:false, /** * Property modified by setForm() to set a reference to the HTML * form node if the desired action is file upload. * @private * @type object */ _formNode:null, /** * Property modified by setForm() to set the HTML form data * for each transaction. * @private * @type string */ _sFormData:null, /** * Collection of polling references to the polling mechanism in handleReadyState. * @private * @type object */ _poll:{}, /** * Queue of timeout values for each transaction callback with a defined timeout value. * @private * @type object */ _timeOut:{}, /** * The polling frequency, in milliseconds, for HandleReadyState. * when attempting to determine a transaction's XHR readyState. * The default is 50 milliseconds. * @private * @type int */ _polling_interval:50, /** * A transaction counter that increments the transaction id for each transaction. * @private * @type int */ _transaction_id:0, /** * Member to add an ActiveX id to the existing xml_progid array. * In the event(unlikely) a new ActiveX id is introduced, it can be added * without internal code modifications. * @public * @param string id The ActiveX id to be added to initialize the XHR object. * @return void */ setProgId:function(id) { this._msxml_progid.unshift(id); }, /** * Member to enable or disable the default POST header. * @public * @param boolean b Set and use default header - true or false . * @return void */ setDefaultPostHeader:function(b) { this._use_default_post_header = b; }, /** * Member to modify the default polling interval. * @public * @param {int} i The polling interval in milliseconds. * @return void */ setPollingInterval:function(i) { if(typeof i == 'number' && isFinite(i)){ this._polling_interval = i; } }, /** * Instantiates a XMLHttpRequest object and returns an object with two properties: * the XMLHttpRequest instance and the transaction id. * @private * @param {int} transactionId Property containing the transaction id for this transaction. * @return connection object */ createXhrObject:function(transactionId) { var obj,http; try { // Instantiates XMLHttpRequest in non-IE browsers and assigns to http. http = new XMLHttpRequest(); // Object literal with http and tId properties obj = { conn:http, tId:transactionId }; } catch(e) { for(var i=0; i= 200 && httpStatus < 300){ try { responseObject = this.createResponseObject(o, callback.argument); if(callback.success){ if(!callback.scope){ callback.success(responseObject); } else{ // If a scope property is defined, the callback will be fired from // the context of the object. callback.success.apply(callback.scope, [responseObject]); } } } catch(e){} } else{ try { switch(httpStatus){ // The following case labels are wininet.dll error codes that may be encountered. case 12002: // Server timeout case 12029: // 12029 to 12031 correspond to dropped connections. case 12030: case 12031: case 12152: // Connection closed by server. case 13030: // See above comments for variable status. responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort?isAbort:false)); if(callback.failure){ if(!callback.scope){ callback.failure(responseObject); } else{ callback.failure.apply(callback.scope, [responseObject]); } } break; default: responseObject = this.createResponseObject(o, callback.argument); if(callback.failure){ if(!callback.scope){ callback.failure(responseObject); } else{ callback.failure.apply(callback.scope, [responseObject]); } } } } catch(e){} } this.releaseObject(o); responseObject = null; }, /** * This method evaluates the server response, creates and returns the results via * its properties. Success and failure cases will differ in the response * object's property values. * @private * @param {object} o The connection object * @param {} callbackArg User-defined argument or arguments to be passed to the callback * @return object */ createResponseObject:function(o, callbackArg) { var obj = {}; var headerObj = {}; try { var headerStr = o.conn.getAllResponseHeaders(); var header = headerStr.split('\n'); for(var i=0; i < header.length; i++){ var delimitPos = header[i].indexOf(':'); if(delimitPos != -1){ headerObj[header[i].substring(0,delimitPos)] = header[i].substring(delimitPos + 2); } } } catch(e){} obj.tId = o.tId; obj.status = o.conn.status; obj.statusText = o.conn.statusText; obj.getResponseHeader = headerObj; obj.getAllResponseHeaders = headerStr; obj.responseText = o.conn.responseText; obj.responseXML = o.conn.responseXML; if(typeof callbackArg !== undefined){ obj.argument = callbackArg; } return obj; }, /** * If a transaction cannot be completed due to dropped or closed connections, * there may be not be enough information to build a full response object. * The failure callback will be fired and this specific condition can be identified * by a status property value of 0. * * If an abort was successful, the status property will report a value of -1. * * @private * @param {int} tId Transaction Id * @param callbackArg The user-defined arguments * @param isAbort Determines if the exception is an abort. * @return object */ createExceptionObject:function(tId, callbackArg, isAbort) { var COMM_CODE = 0; var COMM_ERROR = 'communication failure'; var ABORT_CODE = -1; var ABORT_ERROR = 'transaction aborted'; var obj = {}; obj.tId = tId; if(isAbort){ obj.status = ABORT_CODE; obj.statusText = ABORT_ERROR; } else{ obj.status = COMM_CODE; obj.statusText = COMM_ERROR; } if(callbackArg){ obj.argument = callbackArg; } return obj; }, /** * Public method that stores the custom HTTP headers for each transaction. * @public * @param {string} label The HTTP header label * @param {string} value The HTTP header value * @return void */ initHeader:function(label,value) { if(this._http_header[label] === undefined){ this._http_header[label] = value; } else{ // Concatenate multiple values, comma-delimited, // for the same header label, this._http_header[label] = value + "," + this._http_header[label]; } this._has_http_headers = true; }, /** * Accessor that sets the HTTP headers for each transaction. * @private * @param {object} o The connection object for the transaction. * @return void */ setHeader:function(o) { for(var prop in this._http_header){ if(this._http_header.hasOwnProperty(prop)){ o.conn.setRequestHeader(prop, this._http_header[prop]); } } delete this._http_header; this._http_header = {}; this._has_http_headers = false; }, /** * This method assembles the form label and value pairs and * constructs an encoded string. * asyncRequest() will automatically initialize the * transaction with a HTTP header Content-Type of * application/x-www-form-urlencoded. * @public * @param {string || object} form id or name attribute, or form object. * @param {string} optional boolean to indicate SSL environment. * @param {string || boolean} optional qualified path of iframe resource for SSL in IE. * @return void */ setForm:function(formId, isUpload, secureUri) { this._sFormData = ''; if(typeof formId == 'string'){ // Determine if the argument is a form id or a form name. // Note form name usage is deprecated by supported // here for legacy reasons. var oForm = (document.getElementById(formId) || document.forms[formId]); } else if(typeof formId == 'object'){ // Treat argument as an HTML form object. var oForm = formId; } else{ return; } // If the isUpload argument is true, setForm will call createFrame to initialize // an iframe as the form target. // // The argument secureURI is also required by IE in SSL environments // where the secureURI string is a fully qualified HTTP path, used to set the source // of the iframe, to a stub resource in the same domain. if(isUpload){ this.createFrame(secureUri?secureUri:null); this._isFormSubmit = true; this._isFileUpload = true; this._formNode = oForm; return; } var oElement, oName, oValue, oDisabled; var hasSubmit = false; // Iterate over the form elements collection to construct the // label-value pairs. for (var i=0; i'); // IE will throw a security exception in an SSL environment if the // iframe source isn't set. if(typeof secureUri == 'boolean'){ io.src = 'javascript:false'; } else{ io.src = secureUri; } } else{ var io = document.createElement('IFRAME'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); }, /** * Uploads HTML form, including files/attachments, targeting the * iframe created in createFrame. * * @private * @param {int} id The transaction id. * @param {object} callback - User-defined callback object. * @param {string} uri Fully qualified path of resource. * @return void */ uploadFile:function(id, callback, uri){ var frameId = 'yuiIO' + id; var io = document.getElementById(frameId); // Initialize the HTML form properties in case they are // not defined in the HTML form. this._formNode.action = uri; this._formNode.enctype = 'multipart/form-data'; this._formNode.method = 'POST'; this._formNode.target = frameId; this._formNode.submit(); // Reset form status properties. this._formNode = null; this._isFileUpload = false; this._isFormSubmit = false; // Create the upload callback handler that fires when the iframe // receives the load event. Subsequently, the event handler is detached // and the iframe removed from the document. var uploadCallback = function() { var obj = {}; obj.tId = id; obj.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; obj.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; obj.argument = callback.argument; if(callback.upload){ if(!callback.scope){ callback.upload(obj); } else{ callback.upload.apply(callback.scope, [obj]); } } if(YAHOO.util.Event){ YAHOO.util.Event.removeListener(io, "load", uploadCallback); } else if(window.ActiveXObject){ io.detachEvent('onload', uploadCallback); } else{ io.removeEventListener('load', uploadCallback, false); } setTimeout(function(){ document.body.removeChild(io); }, 100); }; // Bind the onload handler to the iframe to detect the file upload response. if(YAHOO.util.Event){ YAHOO.util.Event.addListener(io, "load", uploadCallback); } else if(window.ActiveXObject){ io.attachEvent('onload', uploadCallback); } else{ io.addEventListener('load', uploadCallback, false); } }, /** * Public method to terminate a transaction, if it has not reached readyState 4. * @public * @param {object} o The connection object returned by asyncRequest. * @param {object} callback User-defined callback object. * @param {string} isTimeout boolean to indicate if abort was a timeout. * @return void */ abort:function(o, callback, isTimeout) { if(this.isCallInProgress(o)){ o.conn.abort(); window.clearInterval(this._poll[o.tId]); delete this._poll[o.tId]; if(isTimeout){ delete this._timeOut[o.tId]; } this.handleTransactionResponse(o, callback, true); return true; } else{ return false; } }, /** * Public method to check if the transaction is still being processed. * @public * @param {object} o The connection object returned by asyncRequest * @return boolean */ isCallInProgress:function(o) { // if the XHR object assigned to the transaction has not been dereferenced, // then check its readyState status. Otherwise, return false. if(o.conn){ return o.conn.readyState != 4 && o.conn.readyState != 0; } else{ //The XHR object has been destroyed. return false; } }, /** * Dereference the XHR instance and the connection object after the transaction is completed. * @private * @param {object} o The connection object * @return void */ releaseObject:function(o) { //dereference the XHR instance. o.conn = null; //dereference the connection object. o = null; } }; /*** End of file, connection.js ***/ /*** Start of file, autocomplete.js ***/ /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.txt version: 0.11.3 */ /****************************************************************************/ /****************************************************************************/ /****************************************************************************/ /** * Class providing the customizable functionality of a plug-and-play DHTML * auto complete widget. Some key features: *
    *
  • Navigate with up/down arrow keys and/or mouse to pick a selection
    • *
  • The drop down container can "roll down" or "fly out" via configurable * animation
    • *
  • UI look-and-feel customizable through CSS, including container * attributes, borders, position, fonts, etc
    • *
* * requires YAHOO.util.Dom Dom utility * requires YAHOO.util.Event Event utility * requires YAHOO.widget.DataSource Data source class * see YAHOO.util.Animation Animation utility * see JSON JSON library * * @constructor * @param {element | string} inputEl DOM element reference or string ID of the auto complete input field * @param {element | string} containerEl DOM element reference or string ID of the auto complete <div> * container * @param {object} oDataSource Instance of YAHOO.widget.DataSource for query/results * @param {object} oConfigs Optional object literal of config params */ YAHOO.widget.AutoComplete = function(inputEl,containerEl,oDataSource,oConfigs) { if(inputEl && containerEl && oDataSource) { // Validate data source if (oDataSource && (oDataSource instanceof YAHOO.widget.DataSource)) { this.dataSource = oDataSource; } else { return; } // Validate input element if(YAHOO.util.Dom.inDocument(inputEl)) { if(typeof inputEl == "string") { this._sName = "instance" + YAHOO.widget.AutoComplete._nIndex + " " + inputEl; this._oTextbox = document.getElementById(inputEl); } else { this._sName = (inputEl.id) ? "instance" + YAHOO.widget.AutoComplete._nIndex + " " + inputEl.id: "instance" + YAHOO.widget.AutoComplete._nIndex; this._oTextbox = inputEl; } } else { return; } // Validate container element if(YAHOO.util.Dom.inDocument(containerEl)) { if(typeof containerEl == "string") { this._oContainer = document.getElementById(containerEl); } else { this._oContainer = containerEl; } if(this._oContainer.style.display == "none") { } } else { return; } // Set any config params passed in to override defaults if (typeof oConfigs == "object") { for(var sConfig in oConfigs) { if (sConfig) { this[sConfig] = oConfigs[sConfig]; } } } // Initialization sequence this._initContainer(); this._initProps(); this._initList(); this._initContainerHelpers(); // Set up events var oSelf = this; var oTextbox = this._oTextbox; // Events are actually for the content module within the container var oContent = this._oContainer._oContent; // Dom events YAHOO.util.Event.addListener(oTextbox,"keyup",oSelf._onTextboxKeyUp,oSelf); YAHOO.util.Event.addListener(oTextbox,"keydown",oSelf._onTextboxKeyDown,oSelf); YAHOO.util.Event.addListener(oTextbox,"keypress",oSelf._onTextboxKeyPress,oSelf); YAHOO.util.Event.addListener(oTextbox,"focus",oSelf._onTextboxFocus,oSelf); YAHOO.util.Event.addListener(oTextbox,"blur",oSelf._onTextboxBlur,oSelf); YAHOO.util.Event.addListener(oContent,"mouseover",oSelf._onContainerMouseover,oSelf); YAHOO.util.Event.addListener(oContent,"mouseout",oSelf._onContainerMouseout,oSelf); YAHOO.util.Event.addListener(oContent,"scroll",oSelf._onContainerScroll,oSelf); YAHOO.util.Event.addListener(oContent,"resize",oSelf._onContainerResize,oSelf); if(oTextbox.form) { YAHOO.util.Event.addListener(oTextbox.form,"submit",oSelf._onFormSubmit,oSelf); } // Custom events this.textboxFocusEvent = new YAHOO.util.CustomEvent("textboxFocus", this); this.textboxKeyEvent = new YAHOO.util.CustomEvent("textboxKey", this); this.dataRequestEvent = new YAHOO.util.CustomEvent("dataRequest", this); this.dataReturnEvent = new YAHOO.util.CustomEvent("dataReturn", this); this.dataErrorEvent = new YAHOO.util.CustomEvent("dataError", this); this.containerExpandEvent = new YAHOO.util.CustomEvent("containerExpand", this); this.typeAheadEvent = new YAHOO.util.CustomEvent("typeAhead", this); this.itemMouseOverEvent = new YAHOO.util.CustomEvent("itemMouseOver", this); this.itemMouseOutEvent = new YAHOO.util.CustomEvent("itemMouseOut", this); this.itemArrowToEvent = new YAHOO.util.CustomEvent("itemArrowTo", this); this.itemArrowFromEvent = new YAHOO.util.CustomEvent("itemArrowFrom", this); this.itemSelectEvent = new YAHOO.util.CustomEvent("itemSelect", this); this.unmatchedItemSelectEvent = new YAHOO.util.CustomEvent("unmatchedItemSelect", this); this.selectionEnforceEvent = new YAHOO.util.CustomEvent("selectionEnforce", this); this.containerCollapseEvent = new YAHOO.util.CustomEvent("containerCollapse", this); this.textboxBlurEvent = new YAHOO.util.CustomEvent("textboxBlur", this); // Finish up oTextbox.setAttribute("autocomplete","off"); YAHOO.widget.AutoComplete._nIndex++; } // Required arguments were not found else { } }; /*************************************************************************** * Public member variables ***************************************************************************/ /** * The data source object that encapsulates the data used for auto completion. * This object should be an inherited object from YAHOO.widget.DataSource. * * @type object */ YAHOO.widget.AutoComplete.prototype.dataSource = null; /** * Number of characters that must be entered before querying for results. * Default: 1. * * @type number */ YAHOO.widget.AutoComplete.prototype.minQueryLength = 1; /** * Maximum number of results to display in auto complete container. Default: 10. * * @type number */ YAHOO.widget.AutoComplete.prototype.maxResultsDisplayed = 10; /** * Number of seconds to delay before submitting a query request. If a query * request is received before a previous one has completed its delay, the * previous request is cancelled and the new request is set to the delay. * Default: 0.5. * * @type number */ YAHOO.widget.AutoComplete.prototype.queryDelay = 0.5; /** * Class name of a highlighted item within the auto complete container. * Default: "yui-ac-highlight". * * @type string */ YAHOO.widget.AutoComplete.prototype.highlightClassName = "yui-ac-highlight"; /** * Class name of a pre-highlighted item within the auto complete container. * Default: null. * * @type string */ YAHOO.widget.AutoComplete.prototype.prehighlightClassName = null; /** * Query delimiter. A single character separator for multiple delimited * selections. Multiple delimiter characteres may be defined as an array of * strings. A null value or empty string indicates that query results cannot * be delimited. This feature is not recommended if you need forceSelection to * be true. Default: null. * * @type string or array */ YAHOO.widget.AutoComplete.prototype.delimChar = null; /** * Whether or not the first item in the auto complete container should be * automatically highlighted on expand. Default: true. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.autoHighlight = true; /** * Whether or not the auto complete input field should be automatically updated * with the first query result as the user types, auto-selecting the substring * that the user has not typed. Default: false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.typeAhead = false; /** * Whether or not to animate the expansion/collapse of the auto complete * container in the horizontal direction. Default: false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.animHoriz = false; /** * Whether or not to animate the expansion/collapse of the auto complete * container in the vertical direction. Default: true. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.animVert = true; /** * Speed of container expand/collapse animation, in seconds. Default: 0.3. * * @type number */ YAHOO.widget.AutoComplete.prototype.animSpeed = 0.3; /** * Whether or not to force the user's selection to match one of the query * results. Enabling this feature essentially transforms the auto complete form * input field into a <select> field. This feature is not recommended * with delimiter character(s) defined. Default: false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.forceSelection = false; /** * Whether or not to allow browsers to cache user-typed input in the input * field. Disabling this feature will prevent the widget from setting the * autocomplete="off" on the auto complete input field. When autocomplete="off" * and users click the back button after form submission, user-typed input can * be prefilled by the browser from its cache. This caching of user input may * not be desired for sensitive data, such as credit card numbers, in which * case, implementers should consider setting allowBrowserAutocomplete to false. * Default: true. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.allowBrowserAutocomplete = true; /** * Whether or not the auto complete container should always be displayed. * Enabling this feature prevents the toggling of the container to a collapsed * state. Default: false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.alwaysShowContainer = false; /** * Whether or not to use an iFrame to layer over Windows form elements in * IE. Set to true only when the auto complete container will be on top of a * <select> field in IE and thus exposed to the IE z-index bug (i.e., * 5.5 < IE < 7). Default:false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.useIFrame = false; /** * Whether or not the auto complete container should have a shadow. Default:false. * * @type boolean */ YAHOO.widget.AutoComplete.prototype.useShadow = false; /*************************************************************************** * Public methods ***************************************************************************/ /** * Public accessor to the unique name of the auto complete instance. * * @return {string} Unique name of the auto complete instance */ YAHOO.widget.AutoComplete.prototype.toString = function() { return "AutoComplete " + this._sName; }; /** * Public accessor to the internal array of DOM <li> elements that * display query results within the auto complete container. * * @return {array} Array of <li> elements within the auto complete * container */ YAHOO.widget.AutoComplete.prototype.getListItems = function() { return this._aListItems; }; /** * Public accessor to the data held in an <li> element of the * auto complete container. * * @return {object or array} Object or array of result data or null */ YAHOO.widget.AutoComplete.prototype.getListItemData = function(oListItem) { if(oListItem._oResultData) { return oListItem._oResultData; } else { return false; } }; /** * Sets HTML markup for the auto complete container header. This markup will be * inserted within a <div> tag with a class of "ac_hd". * * @param {string} sHeader HTML markup for container header */ YAHOO.widget.AutoComplete.prototype.setHeader = function(sHeader) { if(sHeader) { if(this._oContainer._oContent._oHeader) { this._oContainer._oContent._oHeader.innerHTML = sHeader; this._oContainer._oContent._oHeader.style.display = "block"; } } else { this._oContainer._oContent._oHeader.innerHTML = ""; this._oContainer._oContent._oHeader.style.display = "none"; } }; /** * Sets HTML markup for the auto complete container footer. This markup will be * inserted within a <div> tag with a class of "ac_ft". * * @param {string} sFooter HTML markup for container footer */ YAHOO.widget.AutoComplete.prototype.setFooter = function(sFooter) { if(sFooter) { if(this._oContainer._oContent._oFooter) { this._oContainer._oContent._oFooter.innerHTML = sFooter; this._oContainer._oContent._oFooter.style.display = "block"; } } else { this._oContainer._oContent._oFooter.innerHTML = ""; this._oContainer._oContent._oFooter.style.display = "none"; } }; /** * Sets HTML markup for the auto complete container body. This markup will be * inserted within a <div> tag with a class of "ac_bd". * * @param {string} sHeader HTML markup for container body */ YAHOO.widget.AutoComplete.prototype.setBody = function(sBody) { if(sBody) { if(this._oContainer._oContent._oBody) { this._oContainer._oContent._oBody.innerHTML = sBody; this._oContainer._oContent._oBody.style.display = "block"; this._oContainer._oContent.style.display = "block"; } } else { this._oContainer._oContent._oBody.innerHTML = ""; this._oContainer._oContent.style.display = "none"; } this._maxResultsDisplayed = 0; }; /** * Overridable method that converts a result item object into HTML markup * for display. Return data values are accessible via the oResultItem object, * and the key return value will always be oResultItem[0]. Markup will be * displayed within <li> element tags in the container. * * @param {object} oResultItem Result item object representing one query result * @param {string} sQuery The current query string * @return {string} HTML markup of formatted result data */ YAHOO.widget.AutoComplete.prototype.formatResult = function(oResultItem, sQuery) { var sResult = oResultItem[0]; if(sResult) { return sResult; } else { return ""; } }; /** * Makes query request to the data source. * * @param {string} sQuery Query string. */ YAHOO.widget.AutoComplete.prototype.sendQuery = function(sQuery) { if(sQuery) { this._sendQuery(sQuery); } else { return; } }; /*************************************************************************** * Events ***************************************************************************/ /** * Fired when the auto complete text input box receives focus. Subscribers * receive the following array:
* - args[0] The auto complete object instance */ YAHOO.widget.AutoComplete.prototype.textboxFocusEvent = null; /** * Fired when the auto complete text input box receives key input. Subscribers * receive the following array:
* - args[0] The auto complete object instance * - args[1] The keycode number */ YAHOO.widget.AutoComplete.prototype.textboxKeyEvent = null; /** * Fired when the auto complete instance makes a query to the data source. * Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The query string */ YAHOO.widget.AutoComplete.prototype.dataRequestEvent = null; /** * Fired when the auto complete instance receives query results from the data * source. Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The query string * - args[2] Results array */ YAHOO.widget.AutoComplete.prototype.dataReturnEvent = null; /** * Fired when the auto complete instance does not receive query results from the * data source due to an error. Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The query string */ YAHOO.widget.AutoComplete.prototype.dataErrorEvent = null; /** * Fired when the auto complete container is expanded. If alwaysShowContainer is * enabled, then containerExpandEvent will be fired when the container is * populated with results. Subscribers receive the following array:
* - args[0] The auto complete object instance */ YAHOO.widget.AutoComplete.prototype.containerExpandEvent = null; /** * Fired when the auto complete textbox has been prefilled by the type-ahead * feature. Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The query string * - args[2] The prefill string */ YAHOO.widget.AutoComplete.prototype.typeAheadEvent = null; /** * Fired when result item has been moused over. Subscribers receive the following * array:
* - args[0] The auto complete object instance * - args[1] The <li> element item moused to */ YAHOO.widget.AutoComplete.prototype.itemMouseOverEvent = null; /** * Fired when result item has been moused out. Subscribers receive the * following array:
* - args[0] The auto complete object instance * - args[1] The <li> element item moused from */ YAHOO.widget.AutoComplete.prototype.itemMouseOutEvent = null; /** * Fired when result item has been arrowed to. Subscribers receive the following * array:
* - args[0] The auto complete object instance * - args[1] The <li> element item arrowed to */ YAHOO.widget.AutoComplete.prototype.itemArrowToEvent = null; /** * Fired when result item has been arrowed away from. Subscribers receive the * following array:
* - args[0] The auto complete object instance * - args[1] The <li> element item arrowed from */ YAHOO.widget.AutoComplete.prototype.itemArrowFromEvent = null; /** * Fired when an item is selected via mouse click, ENTER key, or TAB key. * Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The selected <li> element item * - args[2] The data returned for the item, either as an object, or mapped from the schema into an array */ YAHOO.widget.AutoComplete.prototype.itemSelectEvent = null; /** * Fired when an user selection does not match any of the displayed result items. * Note that this event may not behave as expected when delimiter characters * have been defined. Subscribers receive the following array:
* - args[0] The auto complete object instance * - args[1] The user selection */ YAHOO.widget.AutoComplete.prototype.unmatchedItemSelectEvent = null; /** * Fired if forceSelection is enabled and the user's input has been cleared * because it did not match one of the returned query results. Subscribers * receive the following array:
* - args[0] The auto complete object instance */ YAHOO.widget.AutoComplete.prototype.selectionEnforceEvent = null; /** * Fired when the auto complete container is collapsed. If alwaysShowContainer is * enabled, then containerCollapseEvent will be fired when the container is * cleared of results. Subscribers receive the following array:
* - args[0] The auto complete object instance */ YAHOO.widget.AutoComplete.prototype.containerCollapseEvent = null; /** * Fired when the auto complete text input box loses focus. Subscribers receive * an array of the following array:
* - args[0] The auto complete object instance */ YAHOO.widget.AutoComplete.prototype.textboxBlurEvent = null; /*************************************************************************** * Private member variables ***************************************************************************/ /** * Internal class variable to index multiple auto complete instances. * * @type number * @private */ YAHOO.widget.AutoComplete._nIndex = 0; /** * Name of auto complete instance. * * @type string * @private */ YAHOO.widget.AutoComplete.prototype._sName = null; /** * Text input box DOM element. * * @type object * @private */ YAHOO.widget.AutoComplete.prototype._oTextbox = null; /** * Whether or not the textbox is currently in focus. If query results come back * but the user has already moved on, do not proceed with auto complete behavior. * * @type boolean * @private */ YAHOO.widget.AutoComplete.prototype._bFocused = true; /** * Animation instance for container expand/collapse. * * @type boolean * @private */ YAHOO.widget.AutoComplete.prototype._oAnim = null; /** * Container DOM element. * * @type object * @private */ YAHOO.widget.AutoComplete.prototype._oContainer = null; /** * Whether or not the auto complete container is currently open. * * @type boolean * @private */ YAHOO.widget.AutoComplete.prototype._bContainerOpen = false; /** * Whether or not the mouse is currently over the auto complete * container. This is necessary in order to prevent clicks on container items * from being text input box blur events. * * @type boolean * @private */ YAHOO.widget.AutoComplete.prototype._bOverContainer = false; /** * Array of <li> elements references that contain query results within the * auto complete container. * * @type array * @private */ YAHOO.widget.AutoComplete.prototype._aListItems = null; /** * Number of <li> elements currently displayed in auto complete container. * * @type number * @private */ YAHOO.widget.AutoComplete.prototype._nDisplayedItems = 0; /** * Internal count of <li> elements displayed and hidden in auto complete container. * * @type number * @private */ YAHOO.widget.AutoComplete.prototype._maxResultsDisplayed = 0; /** * Current query string * * @type string * @private */ YAHOO.widget.AutoComplete.prototype._sCurQuery = null; /** * Past queries this session (for saving delimited queries). * * @type string * @private */ YAHOO.widget.AutoComplete.prototype._sSavedQuery = null; /** * Pointer to the currently highlighted <li> element in the container. * * @type object * @private */ YAHOO.widget.AutoComplete.prototype._oCurItem = null; /** * Whether or not an item has been selected since the container was populated * with results. Reset to false by _populateList, and set to true when item is * selected. * * @type boolean * @private */ YAHOO.widget.AutoComplete.prototype._bItemSelected = false; /** * Key code of the last key pressed in textbox. * * @type number * @private */ YAHOO.widget.AutoComplete.prototype._nKeyCode = null; /** * Delay timeout ID. * * @type number * @private */ YAHOO.widget.AutoComplete.prototype._nDelayID = -1; /** * Src to iFrame used when useIFrame = true. Supports implementations over SSL * as well. * * @type string * @private */ YAHOO.widget.AutoComplete.prototype._iFrameSrc = "javascript:false;"; /*************************************************************************** * Private methods ***************************************************************************/ /** * Updates and validates latest public config properties. * * @private */ YAHOO.widget.AutoComplete.prototype._initProps = function() { // Correct any invalid values var minQueryLength = this.minQueryLength; if(isNaN(minQueryLength) || (minQueryLength < 1)) { minQueryLength = 1; } var maxResultsDisplayed = this.maxResultsDisplayed; if(isNaN(this.maxResultsDisplayed) || (this.maxResultsDisplayed < 1)) { this.maxResultsDisplayed = 10; } var queryDelay = this.queryDelay; if(isNaN(this.queryDelay) || (this.queryDelay < 0)) { this.queryDelay = 0.5; } var aDelimChar = (this.delimChar) ? this.delimChar : null; if(aDelimChar) { if(typeof aDelimChar == "string") { this.delimChar = [aDelimChar]; } else if(aDelimChar.constructor != Array) { this.delimChar = null; } } var animSpeed = this.animSpeed; if((this.animHoriz || this.animVert) && YAHOO.util.Anim) { if(isNaN(animSpeed) || (animSpeed < 0)) { animSpeed = 0.3; } if(!this._oAnim ) { oAnim = new YAHOO.util.Anim(this._oContainer._oContent, {}, this.animSpeed); this._oAnim = oAnim; } else { this._oAnim.duration = animSpeed; } } if(this.forceSelection && this.delimChar) { } if(this.alwaysShowContainer && (this.useShadow || this.useIFrame)) { } if(this.alwaysShowContainer) { this._bContainerOpen = true; } }; /** * Initializes the auto complete container helpers if they are enabled and do * not exist * * @private */ YAHOO.widget.AutoComplete.prototype._initContainerHelpers = function() { if(this.useShadow && !this._oContainer._oShadow) { var oShadow = document.createElement("div"); oShadow.className = "yui-ac-shadow"; this._oContainer._oShadow = this._oContainer.appendChild(oShadow); } if(this.useIFrame && !this._oContainer._oIFrame) { var oIFrame = document.createElement("iframe"); oIFrame.src = this._iFrameSrc; oIFrame.frameBorder = 0; oIFrame.scrolling = "no"; oIFrame.style.position = "absolute"; oIFrame.style.width = "100%"; oIFrame.style.height = "100%"; this._oContainer._oIFrame = this._oContainer.appendChild(oIFrame); } }; /** * Initializes the auto complete container once at object creation * * @private */ YAHOO.widget.AutoComplete.prototype._initContainer = function() { if(!this._oContainer._oContent) { // The oContent div helps size the iframe and shadow properly var oContent = document.createElement("div"); oContent.className = "yui-ac-content"; oContent.style.display = "none"; this._oContainer._oContent = this._oContainer.appendChild(oContent); var oHeader = document.createElement("div"); oHeader.className = "yui-ac-hd"; oHeader.style.display = "none"; this._oContainer._oContent._oHeader = this._oContainer._oContent.appendChild(oHeader); var oBody = document.createElement("div"); oBody.className = "yui-ac-bd"; this._oContainer._oContent._oBody = this._oContainer._oContent.appendChild(oBody); var oFooter = document.createElement("div"); oFooter.className = "yui-ac-ft"; oFooter.style.display = "none"; this._oContainer._oContent._oFooter = this._oContainer._oContent.appendChild(oFooter); } else { } }; /** * Clears out contents of container body and creates up to * YAHOO.widget.AutoComplete#maxResultsDisplayed <li> elements in an * <ul> element. * * @private */ YAHOO.widget.AutoComplete.prototype._initList = function() { this._aListItems = []; while(this._oContainer._oContent._oBody.hasChildNodes()) { var oldListItems = this.getListItems(); if(oldListItems) { for(var oldi = oldListItems.length-1; oldi >= 0; i--) { oldListItems[oldi] = null; } } this._oContainer._oContent._oBody.innerHTML = ""; } var oList = document.createElement("ul"); oList = this._oContainer._oContent._oBody.appendChild(oList); for(var i=0; i 0) { var nDelayID = setTimeout(function(){oSelf._sendQuery(sText);},(oSelf.queryDelay * 1000)); if (oSelf._nDelayID != -1) { clearTimeout(oSelf._nDelayID); } oSelf._nDelayID = nDelayID; } else { // No delay so send request immediately oSelf._sendQuery(sText); } }; /** * Whether or not key is functional or should be ignored. Note that the right * arrow key is NOT an ignored key since it triggers queries for certain intl * charsets. * * @param {number} nKeycode Code of key pressed * @return {boolean} Whether or not to be ignore key * @private */ YAHOO.widget.AutoComplete.prototype._isIgnoreKey = function(nKeyCode) { if ((nKeyCode == 9) || (nKeyCode == 13) || // tab, enter (nKeyCode == 16) || (nKeyCode == 17) || // shift, ctl (nKeyCode >= 18 && nKeyCode <= 20) || // alt,pause/break,caps lock (nKeyCode == 27) || // esc (nKeyCode >= 33 && nKeyCode <= 35) || // page up,page down,end (nKeyCode >= 36 && nKeyCode <= 38) || // home,left,up (nKeyCode == 40) || // down (nKeyCode >= 44 && nKeyCode <= 45)) { // print screen,insert return true; } return false; }; /** * Handles text input box receiving focus. * * @param {event} v The focus event * @param {object} oSelf The auto complete instance * @private */ YAHOO.widget.AutoComplete.prototype._onTextboxFocus = function (v,oSelf) { oSelf._oTextbox.setAttribute("autocomplete","off"); oSelf._bFocused = true; oSelf.textboxFocusEvent.fire(oSelf); }; /** * Handles text input box losing focus. * * @param {event} v The focus event * @param {object} oSelf The auto complete instance * @private */ YAHOO.widget.AutoComplete.prototype._onTextboxBlur = function (v,oSelf) { // Don't treat as a blur if it was a selection via mouse click if(!oSelf._bOverContainer || (oSelf._nKeyCode == 9)) { // Current query needs to be validated if(!oSelf._bItemSelected) { if(!oSelf._bContainerOpen || (oSelf._bContainerOpen && !oSelf._textMatchesOption())) { if(oSelf.forceSelection) { oSelf._clearSelection(); } else { oSelf.unmatchedItemSelectEvent.fire(oSelf, oSelf._sCurQuery); } } } if(oSelf._bContainerOpen) { oSelf._clearList(); } oSelf._bFocused = false; oSelf.textboxBlurEvent.fire(oSelf); } }; /** * Handles form submission event. * * @param {event} v The submit event * @param {object} oSelf The auto complete instance * @private */ YAHOO.widget.AutoComplete.prototype._onFormSubmit = function(v,oSelf) { if(oSelf.allowBrowserAutocomplete) { oSelf._oTextbox.setAttribute("autocomplete","on"); } else { oSelf._oTextbox.setAttribute("autocomplete","off"); } }; /** * Makes query request to the data source. * * @param {string} sQuery Query string. * @private */ YAHOO.widget.AutoComplete.prototype._sendQuery = function(sQuery) { // Delimiter has been enabled var aDelimChar = (this.delimChar) ? this.delimChar : null; if(aDelimChar) { // Loop through all possible delimiters and find the latest one // A " " may be a false positive if they are defined as delimiters AND // are used to separate delimited queries var nDelimIndex = -1; for(var i = aDelimChar.length-1; i >= 0; i--) { var nNewIndex = sQuery.lastIndexOf(aDelimChar[i]); if(nNewIndex > nDelimIndex) { nDelimIndex = nNewIndex; } } // If we think the last delimiter is a space (" "), make sure it is NOT // a false positive by also checking the char directly before it if(aDelimChar[i] == " ") { for (var j = aDelimChar.length-1; j >= 0; j--) { if(sQuery[nDelimIndex - 1] == aDelimChar[j]) { nDelimIndex--; break; } } } // A delimiter has been found so extract the latest query if (nDelimIndex > -1) { var nQueryStart = nDelimIndex + 1; // Trim any white space from the beginning... while(sQuery.charAt(nQueryStart) == " ") { nQueryStart += 1; } // ...and save the rest of the string for later this._sSavedQuery = sQuery.substring(0,nQueryStart); // Here is the query itself sQuery = sQuery.substr(nQueryStart); } else if(sQuery.indexOf(this._sSavedQuery) < 0){ this._sSavedQuery = null; } } // Don't search queries that are too short if (sQuery.length < this.minQueryLength) { if (this._nDelayID != -1) { clearTimeout(this._nDelayID); } this._clearList(); return; } sQuery = encodeURIComponent(sQuery); this._nDelayID = -1; // Reset timeout ID because request has been made this.dataRequestEvent.fire(this, sQuery); this.dataSource.getResults(this._populateList, sQuery, this); }; /** * Hides all visuals related to the array of <li> elements in the container. * * @private */ YAHOO.widget.AutoComplete.prototype._clearList = function() { this._oContainer._oContent.scrollTop = 0; var aItems = this._aListItems; if(aItems && (aItems.length > 0)) { for(var i = aItems.length-1; i >= 0 ; i--) { aItems[i].style.display = "none"; } } if (this._oCurItem) { this._toggleHighlight(this._oCurItem,"from"); } this._oCurItem = null; this._nDisplayedItems = 0; this._sCurQuery = null; this._toggleContainer(false); }; /** * Populates the array of <li> elements in the container with query * results. This method is passed to YAHOO.widget.DataSource#getResults as a * callback function so results from the datasource are returned to the * auto complete instance. * * @param {string} sQuery The query string * @param {object} aResults An array of query result objects from the data source * @param {string} oSelf The auto complete instance * @private */ YAHOO.widget.AutoComplete.prototype._populateList = function(sQuery, aResults, oSelf) { if(aResults === null) { oSelf.dataErrorEvent.fire(oSelf, sQuery); } if (!oSelf._bFocused || !aResults) { return; } var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); var contentStyle = oSelf._oContainer._oContent.style; contentStyle.width = (!isOpera) ? null : ""; contentStyle.height = (!isOpera) ? null : ""; var sCurQuery = decodeURIComponent(sQuery); oSelf._sCurQuery = sCurQuery; oSelf._bItemSelected = false; if(oSelf._maxResultsDisplayed != oSelf.maxResultsDisplayed) { oSelf._initList(); } var nItems = Math.min(aResults.length,oSelf.maxResultsDisplayed); oSelf._nDisplayedItems = nItems; if (nItems > 0) { oSelf._initContainerHelpers(); var aItems = oSelf._aListItems; // Fill items with data for(var i = nItems-1; i >= 0; i--) { var oItemi = aItems[i]; var oResultItemi = aResults[i]; oItemi.innerHTML = oSelf.formatResult(oResultItemi, sCurQuery); oItemi.style.display = "list-item"; oItemi._sResultKey = oResultItemi[0]; oItemi._oResultData = oResultItemi; } // Empty out remaining items if any for(var j = aItems.length-1; j >= nItems ; j--) { var oItemj = aItems[j]; oItemj.innerHTML = null; oItemj.style.display = "none"; oItemj._sResultKey = null; oItemj._oResultData = null; } if(oSelf.autoHighlight) { // Go to the first item var oFirstItem = aItems[0]; oSelf._toggleHighlight(oFirstItem,"to"); oSelf.itemArrowToEvent.fire(oSelf, oFirstItem); oSelf._typeAhead(oFirstItem,sQuery); } else { oSelf._oCurItem = null; } // Expand the container oSelf._toggleContainer(true); } else { oSelf._clearList(); } oSelf.dataReturnEvent.fire(oSelf, sQuery, aResults); }; /** * When YAHOO.widget.AutoComplete#bForceSelection is true and the user attempts * leave the text input box without selecting an item from the query results, * the user selection is cleared. * * @private */ YAHOO.widget.AutoComplete.prototype._clearSelection = function() { var sValue = this._oTextbox.value; var sChar = (this.delimChar) ? this.delimChar[0] : null; var nIndex = (sChar) ? sValue.lastIndexOf(sChar, sValue.length-2) : -1; if(nIndex > -1) { this._oTextbox.value = sValue.substring(0,nIndex); } else { this._oTextbox.value = ""; } this._sSavedQuery = this._oTextbox.value; // Fire custom event this.selectionEnforceEvent.fire(this); }; /** * Whether or not user-typed value in the text input box matches any of the * query results. * * @private */ YAHOO.widget.AutoComplete.prototype._textMatchesOption = function() { var foundMatch = false; for(var i = this._nDisplayedItems-1; i >= 0 ; i--) { var oItem = this._aListItems[i]; var sMatch = oItem._sResultKey.toLowerCase(); if (sMatch == this._sCurQuery.toLowerCase()) { foundMatch = true; break; } } return(foundMatch); }; /** * Updates in the text input box with the first query result as the user types, * selecting the substring that the user has not typed. * * @param {object} oItem The <li> element item whose data populates the input field * @param {string} sQuery Query string * @private */ YAHOO.widget.AutoComplete.prototype._typeAhead = function(oItem, sQuery) { // Don't update if turned off if (!this.typeAhead) { return; } var oTextbox = this._oTextbox; var sValue = this._oTextbox.value; // any saved queries plus what user has typed // Don't update with type-ahead if text selection is not supported if(!oTextbox.setSelectionRange && !oTextbox.createTextRange) { return; } // Select the portion of text that the user has not typed var nStart = sValue.length; this._updateValue(oItem); var nEnd = oTextbox.value.length; this._selectText(oTextbox,nStart,nEnd); var sPrefill = oTextbox.value.substr(nStart,nEnd); this.typeAheadEvent.fire(this,sQuery,sPrefill); }; /** * Selects text in a text input box. * * @param {object} oTextbox Text input box element in which to select text * @param {number} nStart Starting index of text string to select * @param {number} nEnd Ending index of text selection * @private */ YAHOO.widget.AutoComplete.prototype._selectText = function(oTextbox, nStart, nEnd) { if (oTextbox.setSelectionRange) { // For Mozilla oTextbox.setSelectionRange(nStart,nEnd); } else if (oTextbox.createTextRange) { // For IE var oTextRange = oTextbox.createTextRange(); oTextRange.moveStart("character", nStart); oTextRange.moveEnd("character", nEnd-oTextbox.value.length); oTextRange.select(); } else { oTextbox.select(); } }; /** * Syncs auto complete container with its helpers. * * @param {boolean} bShow True if container is expanded, false if collapsed * @private */ YAHOO.widget.AutoComplete.prototype._toggleContainerHelpers = function(bShow) { var bFireEvent = false; var width = this._oContainer._oContent.offsetWidth + "px"; var height = this._oContainer._oContent.offsetHeight + "px"; if(this.useIFrame && this._oContainer._oIFrame) { bFireEvent = true; if(this.alwaysShowContainer || bShow) { this._oContainer._oIFrame.style.width = width; this._oContainer._oIFrame.style.height = height; } else { this._oContainer._oIFrame.style.width = 0; this._oContainer._oIFrame.style.height = 0; } } if(this.useShadow && this._oContainer._oShadow) { bFireEvent = true; if(this.alwaysShowContainer || bShow) { this._oContainer._oShadow.style.width = width; this._oContainer._oShadow.style.height = height; } else { this._oContainer._oShadow.style.width = 0; this._oContainer._oShadow.style.height = 0; } } }; /** * Animates expansion or collapse of the container. * * @param {boolean} bShow True if container should be expanded, false if * container should be collapsed * @private */ YAHOO.widget.AutoComplete.prototype._toggleContainer = function(bShow) { // Implementer has container always open so don't mess with it if(this.alwaysShowContainer) { // Fire these events to give implementers a hook into the container // being populated and being emptied if(bShow) { this.containerExpandEvent.fire(this); } else { this.containerCollapseEvent.fire(this); } this._bContainerOpen = bShow; return; } var oContainer = this._oContainer; // Container is already closed if (!bShow && !this._bContainerOpen) { oContainer._oContent.style.display = "none"; return; } // If animation is enabled... var oAnim = this._oAnim; if (oAnim && oAnim.getEl() && (this.animHoriz || this.animVert)) { // If helpers need to be collapsed, do it right away... // but if helpers need to be expanded, wait until after the container expands if(!bShow) { this._toggleContainerHelpers(bShow); } if(oAnim.isAnimated()) { oAnim.stop(); } // Clone container to grab current size offscreen var oClone = oContainer._oContent.cloneNode(true); oContainer.appendChild(oClone); oClone.style.top = "-9000px"; oClone.style.display = "block"; // Current size of the container is the EXPANDED size var wExp = oClone.offsetWidth; var hExp = oClone.offsetHeight; // Calculate COLLAPSED sizes based on horiz and vert anim var wColl = (this.animHoriz) ? 0 : wExp; var hColl = (this.animVert) ? 0 : hExp; // Set animation sizes oAnim.attributes = (bShow) ? {width: { to: wExp }, height: { to: hExp }} : {width: { to: wColl}, height: { to: hColl }}; // If opening anew, set to a collapsed size... if(bShow && !this._bContainerOpen) { oContainer._oContent.style.width = wColl+"px"; oContainer._oContent.style.height = hColl+"px"; } // Else, set it to its last known size. else { oContainer._oContent.style.width = wExp+"px"; oContainer._oContent.style.height = hExp+"px"; } oContainer.removeChild(oClone); oClone = null; var oSelf = this; var onAnimComplete = function() { // Finish the collapse oAnim.onComplete.unsubscribeAll(); if(bShow) { oSelf.containerExpandEvent.fire(oSelf); } else { oContainer._oContent.style.display = "none"; oSelf.containerCollapseEvent.fire(oSelf); } oSelf._toggleContainerHelpers(bShow); }; // Display container and animate it oContainer._oContent.style.display = "block"; oAnim.onComplete.subscribe(onAnimComplete); oAnim.animate(); this._bContainerOpen = bShow; } // Else don't animate, just show or hide else { if(bShow) { oContainer._oContent.style.display = "block"; this.containerExpandEvent.fire(this); } else { oContainer._oContent.style.display = "none"; this.containerCollapseEvent.fire(this); } this._toggleContainerHelpers(bShow); this._bContainerOpen = bShow; } }; /** * Toggles the highlight on or off for an item in the container, and also cleans * up highlighting of any previous item. * * @param {object} oNewItem New The <li> element item to receive highlight * behavior * @param {string} sType "mouseover" will toggle highlight on, and "mouseout" * will toggle highlight off. * @private */ YAHOO.widget.AutoComplete.prototype._toggleHighlight = function(oNewItem, sType) { var sHighlight = this.highlightClassName; if(this._oCurItem) { // Remove highlight from old item YAHOO.util.Dom.removeClass(this._oCurItem, sHighlight); } if((sType == "to") && sHighlight) { // Apply highlight to new item YAHOO.util.Dom.addClass(oNewItem, sHighlight); this._oCurItem = oNewItem; } }; /** * Toggles the pre-highlight on or off for an item in the container. * * @param {object} oNewItem New The <li> element item to receive highlight * behavior * @param {string} sType "mouseover" will toggle highlight on, and "mouseout" * will toggle highlight off. * @private */ YAHOO.widget.AutoComplete.prototype._togglePrehighlight = function(oNewItem, sType) { if(oNewItem == this._oCurItem) { return; } var sPrehighlight = this.prehighlightClassName; if((sType == "mouseover") && sPrehighlight) { // Apply prehighlight to new item YAHOO.util.Dom.addClass(oNewItem, sPrehighlight); } else { // Remove prehighlight from old item YAHOO.util.Dom.removeClass(oNewItem, sPrehighlight); } }; /** * Updates the text input box value with selected query result. If a delimiter * has been defined, then the value gets appended with the delimiter. * * @param {object} oItem The <li> element item with which to update the value * @private */ YAHOO.widget.AutoComplete.prototype._updateValue = function(oItem) { var oTextbox = this._oTextbox; var sDelimChar = (this.delimChar) ? this.delimChar[0] : null; var sSavedQuery = this._sSavedQuery; var sResultKey = oItem._sResultKey; oTextbox.focus(); // First clear text field oTextbox.value = ""; // Grab data to put into text field if(sDelimChar) { if(sSavedQuery) { oTextbox.value = sSavedQuery; } oTextbox.value += sResultKey + sDelimChar; if(sDelimChar != " ") { oTextbox.value += " "; } } else { oTextbox.value = sResultKey; } // scroll to bottom of textarea if necessary if(oTextbox.type == "textarea") { oTextbox.scrollTop = oTextbox.scrollHeight; } // move cursor to end var end = oTextbox.value.length; this._selectText(oTextbox,end,end); this._oCurItem = oItem; }; /** * Selects a result item from the container * * @param {object} oItem The selected <li> element item * @private */ YAHOO.widget.AutoComplete.prototype._selectItem = function(oItem) { this._bItemSelected = true; this._updateValue(oItem); this.itemSelectEvent.fire(this, oItem, oItem._oResultData); this._clearList(); }; /** * For values updated by type-ahead, the right arrow key jumps to the end * of the textbox, otherwise the container is closed. * * @private */ YAHOO.widget.AutoComplete.prototype._jumpSelection = function() { if(!this.typeAhead) { return; } else { this._clearList(); } }; /** * Triggered by up and down arrow keys, changes the current highlighted * <li> element item. Scrolls container if necessary. * * @param {number} nKeyCode Code of key pressed * @private */ YAHOO.widget.AutoComplete.prototype._moveSelection = function(nKeyCode) { if(this._bContainerOpen) { // Determine current item's id number var oCurItem = this._oCurItem; var nCurItemIndex = -1; if (oCurItem) { nCurItemIndex = oCurItem._nItemIndex; } var nNewItemIndex = (nKeyCode == 40) ? (nCurItemIndex + 1) : (nCurItemIndex - 1); // Out of bounds if (nNewItemIndex < -2 || nNewItemIndex >= this._nDisplayedItems) { return; } if (oCurItem) { // Unhighlight current item this._toggleHighlight(oCurItem, "from"); this.itemArrowFromEvent.fire(this, oCurItem); } if (nNewItemIndex == -1) { // Go back to query (remove type-ahead string) if(this.delimChar && this._sSavedQuery) { if (!this._textMatchesOption()) { this._oTextbox.value = this._sSavedQuery; } else { this._oTextbox.value = this._sSavedQuery + this._sCurQuery; } } else { this._oTextbox.value = this._sCurQuery; } this._oCurItem = null; return; } if (nNewItemIndex == -2) { // Close container this._clearList(); return; } var oNewItem = this._aListItems[nNewItemIndex]; // Scroll the container if necessary var oContent = this._oContainer._oContent; var scrollOn = ((YAHOO.util.Dom.getStyle(oContent,"overflow") == "auto") || (YAHOO.util.Dom.getStyle(oContent,"overflowY") == "auto")); if(scrollOn && (nNewItemIndex > -1) && (nNewItemIndex < this._nDisplayedItems)) { // User is keying down if(nKeyCode == 40) { // Bottom of selected item is below scroll area... if((oNewItem.offsetTop+oNewItem.offsetHeight) > (oContent.scrollTop + oContent.offsetHeight)) { // Set bottom of scroll area to bottom of selected item oContent.scrollTop = (oNewItem.offsetTop+oNewItem.offsetHeight) - oContent.offsetHeight; } // Bottom of selected item is above scroll area... else if((oNewItem.offsetTop+oNewItem.offsetHeight) < oContent.scrollTop) { // Set top of selected item to top of scroll area oContent.scrollTop = oNewItem.offsetTop; } } // User is keying up else { // Top of selected item is above scroll area if(oNewItem.offsetTop < oContent.scrollTop) { // Set top of scroll area to top of selected item this._oContainer._oContent.scrollTop = oNewItem.offsetTop; } // Top of selected item is below scroll area else if(oNewItem.offsetTop > (oContent.scrollTop + oContent.offsetHeight)) { // Set bottom of selected item to bottom of scroll area this._oContainer._oContent.scrollTop = (oNewItem.offsetTop+oNewItem.offsetHeight) - oContent.offsetHeight; } } } this._toggleHighlight(oNewItem, "to"); this.itemArrowToEvent.fire(this, oNewItem); if(this.typeAhead) { this._updateValue(oNewItem); } } }; /****************************************************************************/ /****************************************************************************/ /****************************************************************************/ /** * Class providing encapsulation of a data source. * * @constructor * */ YAHOO.widget.DataSource = function() { /* abstract class */ }; /*************************************************************************** * Public constants ***************************************************************************/ /** * Error message for null data responses. * * @type constant * @final */ YAHOO.widget.DataSource.prototype.ERROR_DATANULL = "Response data was null"; /** * Error message for data responses with parsing errors. * * @type constant * @final */ YAHOO.widget.DataSource.prototype.ERROR_DATAPARSE = "Response data could not be parsed"; /*************************************************************************** * Public member variables ***************************************************************************/ /** * Max size of the local cache. Set to 0 to turn off caching. Caching is * useful to reduce the number of server connections. Recommended only for data * sources that return comprehensive results for queries or when stale data is * not an issue. Default: 15. * * @type number */ YAHOO.widget.DataSource.prototype.maxCacheEntries = 15; /** * Use this to equate cache matching with the type of matching done by your live * data source. If caching is on and queryMatchContains is true, the cache * returns results that "contain" the query string. By default, * queryMatchContains is set to false, meaning the cache only returns results * that "start with" the query string. Default: false. * * @type boolean */ YAHOO.widget.DataSource.prototype.queryMatchContains = false; /** * Data source query subset matching. If caching is on and queryMatchSubset is * true, substrings of queries will return matching cached results. For * instance, if the first query is for "abc" susequent queries that start with * "abc", like "abcd", will be queried against the cache, and not the live data * source. Recommended only for data sources that return comprehensive results * for queries with very few characters. Default: false. * * @type boolean */ YAHOO.widget.DataSource.prototype.queryMatchSubset = false; /** * Data source query case-sensitivity matching. If caching is on and * queryMatchCase is true, queries will only return results for case-sensitive * matches. Default: false. * * @type boolean */ YAHOO.widget.DataSource.prototype.queryMatchCase = false; /*************************************************************************** * Public methods ***************************************************************************/ /** * Public accessor to the unique name of the data source instance. * * @return {string} Unique name of the data source instance */ YAHOO.widget.DataSource.prototype.getName = function() { return this._sName; }; /** * Public accessor to the unique name of the data source instance. * * @return {string} Unique name of the data source instance */ YAHOO.widget.DataSource.prototype.toString = function() { return "DataSource " + this._sName; }; /** * Retrieves query results, first checking the local cache, then making the * query request to the live data source as defined by the function doQuery. * * @param {object} oCallbackFn Callback function defined by oParent object to * which to return results * @param {string} sQuery Query string * @param {object} oParent The object instance that has requested data */ YAHOO.widget.DataSource.prototype.getResults = function(oCallbackFn, sQuery, oParent) { // First look in cache var aResults = this._doQueryCache(oCallbackFn,sQuery,oParent); // Not in cache, so get results from server if(aResults.length === 0) { this.queryEvent.fire(this, oParent, sQuery); this.doQuery(oCallbackFn, sQuery, oParent); } }; /** * Abstract method implemented by subclasses to make a query to the live data * source. Must call the callback function with the response returned from the * query. Populates cache (if enabled). * * @param {object} oCallbackFn Callback function implemented by oParent to * which to return results * @param {string} sQuery Query string * @param {object} oParent The object instance that has requested data */ YAHOO.widget.DataSource.prototype.doQuery = function(oCallbackFn, sQuery, oParent) { /* override this */ }; /** * Flushes cache. */ YAHOO.widget.DataSource.prototype.flushCache = function() { if(this._aCache) { this._aCache = []; } if(this._aCacheHelper) { this._aCacheHelper = []; } this.cacheFlushEvent.fire(this); }; /*************************************************************************** * Events ***************************************************************************/ /** * Fired when a query is made to the live data source. Subscribers receive the * following array:
* - args[0] The data source instance * - args[1] The requesting object * - args[2] The query string */ YAHOO.widget.DataSource.prototype.queryEvent = null; /** * Fired when a query is made to the local cache. Subscribers receive the * following array:
* - args[0] The data source instance * - args[1] The requesting object * - args[2] The query string */ YAHOO.widget.DataSource.prototype.cacheQueryEvent = null; /** * Fired when data is retrieved from the live data source. Subscribers receive * the following array:
* - args[0] The data source instance * - args[1] The requesting object * - args[2] The query string * - args[3] Array of result objects */ YAHOO.widget.DataSource.prototype.getResultsEvent = null; /** * Fired when data is retrieved from the local cache. Subscribers receive the * following array :
* - args[0] The data source instance * - args[1] The requesting object * - args[2] The query string * - args[3] Array of result objects */ YAHOO.widget.DataSource.prototype.getCachedResultsEvent = null; /** * Fired when an error is encountered with the live data source. Subscribers * receive the following array:
* - args[0] The data source instance * - args[1] The requesting object * - args[2] The query string * - args[3] Error message string */ YAHOO.widget.DataSource.prototype.dataErrorEvent = null; /** * Fired when the local cache is flushed. Subscribers receive the following * array :
* - args[0] The data source instance */ YAHOO.widget.DataSource.prototype.cacheFlushEvent = null; /*************************************************************************** * Private member variables ***************************************************************************/ /** * Internal class variable to index multiple data source instances. * * @type number * @private */ YAHOO.widget.DataSource._nIndex = 0; /** * Name of data source instance. * * @type string * @private */ YAHOO.widget.DataSource.prototype._sName = null; /** * Local cache of data result objects indexed chronologically. * * @type array * @private */ YAHOO.widget.DataSource.prototype._aCache = null; /*************************************************************************** * Private methods ***************************************************************************/ /** * Initializes data source instance. * * @private */ YAHOO.widget.DataSource.prototype._init = function() { // Validate and initialize public configs var maxCacheEntries = this.maxCacheEntries; if(isNaN(maxCacheEntries) || (maxCacheEntries < 0)) { maxCacheEntries = 0; } // Initialize local cache if(maxCacheEntries > 0 && !this._aCache) { this._aCache = []; } this._sName = "instance" + YAHOO.widget.DataSource._nIndex; YAHOO.widget.DataSource._nIndex++; this.queryEvent = new YAHOO.util.CustomEvent("query", this); this.cacheQueryEvent = new YAHOO.util.CustomEvent("cacheQuery", this); this.getResultsEvent = new YAHOO.util.CustomEvent("getResults", this); this.getCachedResultsEvent = new YAHOO.util.CustomEvent("getCachedResults", this); this.dataErrorEvent = new YAHOO.util.CustomEvent("dataError", this); this.cacheFlushEvent = new YAHOO.util.CustomEvent("cacheFlush", this); }; /** * Adds a result object to the local cache, evicting the oldest element if the * cache is full. Newer items will have higher indexes, the oldest item will have * index of 0. * * @param {object} resultObj Object literal of data results, including internal * properties and an array of result objects * @private */ YAHOO.widget.DataSource.prototype._addCacheElem = function(resultObj) { var aCache = this._aCache; // Don't add if anything important is missing. if(!aCache || !resultObj || !resultObj.query || !resultObj.results) { return; } // If the cache is full, make room by removing from index=0 if(aCache.length >= this.maxCacheEntries) { aCache.shift(); } // Add to cache, at the end of the array aCache.push(resultObj); }; /** * Queries the local cache for results. If query has been cached, the callback * function is called with the results, and the cached is refreshed so that it * is now the newest element. * * @param {object} oCallbackFn Callback function defined by oParent object to * which to return results * @param {string} sQuery Query string * @param {object} oParent The object instance that has requested data * @return {array} aResults Result object from local cache if found, otherwise * null * @private */ YAHOO.widget.DataSource.prototype._doQueryCache = function(oCallbackFn, sQuery, oParent) { var aResults = []; var bMatchFound = false; var aCache = this._aCache; var nCacheLength = (aCache) ? aCache.length : 0; var bMatchContains = this.queryMatchContains; // If cache is enabled... if((this.maxCacheEntries > 0) && aCache && (nCacheLength > 0)) { this.cacheQueryEvent.fire(this, oParent, sQuery); // If case is unimportant, normalize query now instead of in loops if(!this.queryMatchCase) { var sOrigQuery = sQuery; sQuery = sQuery.toLowerCase(); } // Loop through each cached element's query property... for(var i = nCacheLength-1; i >= 0; i--) { var resultObj = aCache[i]; var aAllResultItems = resultObj.results; // If case is unimportant, normalize match key for comparison var matchKey = (!this.queryMatchCase) ? encodeURIComponent(resultObj.query.toLowerCase()): encodeURIComponent(resultObj.query); // If a cached match key exactly matches the query... if(matchKey == sQuery) { // Stash all result objects into aResult[] and stop looping through the cache. bMatchFound = true; aResults = aAllResultItems; // The matching cache element was not the most recent, // so now we need to refresh the cache. if(i != nCacheLength-1) { // Remove element from its original location aCache.splice(i,1); // Add element as newest this._addCacheElem(resultObj); } break; } // Else if this query is not an exact match and subset matching is enabled... else if(this.queryMatchSubset) { // Loop through substrings of each cached element's query property... for(var j = sQuery.length-1; j >= 0 ; j--) { var subQuery = sQuery.substr(0,j); // If a substring of a cached sQuery exactly matches the query... if(matchKey == subQuery) { bMatchFound = true; // Go through each cached result object to match against the query... for(var k = aAllResultItems.length-1; k >= 0; k--) { var aRecord = aAllResultItems[k]; var sKeyIndex = (this.queryMatchCase) ? encodeURIComponent(aRecord[0]).indexOf(sQuery): encodeURIComponent(aRecord[0]).toLowerCase().indexOf(sQuery); // A STARTSWITH match is when the query is found at the beginning of the key string... if((!bMatchContains && (sKeyIndex === 0)) || // A CONTAINS match is when the query is found anywhere within the key string... (bMatchContains && (sKeyIndex > -1))) { // Stash a match into aResults[]. aResults.unshift(aRecord); } } // Add the subset match result set object as the newest element to cache, // and stop looping through the cache. resultObj = {}; resultObj.query = sQuery; resultObj.results = aResults; this._addCacheElem(resultObj); break; } } if(bMatchFound) { break; } } } // If there was a match, send along the results. if(bMatchFound) { this.getCachedResultsEvent.fire(this, oParent, sOrigQuery, aResults); oCallbackFn(sOrigQuery, aResults, oParent); } } return aResults; }; /****************************************************************************/ /****************************************************************************/ /****************************************************************************/ /** * Implementation of YAHOO.widget.DataSource using XML HTTP requests that return * query results. * requires YAHOO.util.Connect XMLHTTPRequest library * extends YAHOO.widget.DataSource * * @constructor * @param {string} sScriptURI Absolute or relative URI to script that returns * query results as JSON, XML, or delimited flat data * @param {array} aSchema Data schema definition of results * @param {object} oConfigs Optional object literal of config params */ YAHOO.widget.DS_XHR = function(sScriptURI, aSchema, oConfigs) { // Set any config params passed in to override defaults if(typeof oConfigs == "object") { for(var sConfig in oConfigs) { this[sConfig] = oConfigs[sConfig]; } } // Initialization sequence if(!aSchema || (aSchema.constructor != Array)) { return; } else { this.schema = aSchema; } this.scriptURI = sScriptURI; this._init(); }; YAHOO.widget.DS_XHR.prototype = new YAHOO.widget.DataSource(); /*************************************************************************** * Public constants ***************************************************************************/ /** * JSON data type * * @type constant * @final */ YAHOO.widget.DS_XHR.prototype.TYPE_JSON = 0; /** * XML data type * * @type constant * @final */ YAHOO.widget.DS_XHR.prototype.TYPE_XML = 1; /** * Flat file data type * * @type constant * @final */ YAHOO.widget.DS_XHR.prototype.TYPE_FLAT = 2; /** * Error message for XHR failure. * * @type constant * @final */ YAHOO.widget.DS_XHR.prototype.ERROR_DATAXHR = "XHR response failed"; /*************************************************************************** * Public member variables ***************************************************************************/ /** * Number of milliseconds the XHR connection will wait for a server response. A * a value of zero indicates the XHR connection will wait forever. Any value * greater than zero will use the Connection utility's Auto-Abort feature. * Default: 0. * * @type number */ YAHOO.widget.DS_XHR.prototype.connTimeout = 0; /** * Absolute or relative URI to script that returns query results. For instance, * queries will be sent to * ?=userinput * * @type string */ YAHOO.widget.DS_XHR.prototype.scriptURI = null; /** * Query string parameter name sent to scriptURI. For instance, queries will be * sent to * ?=userinput * Default: "query". * * @type string */ YAHOO.widget.DS_XHR.prototype.scriptQueryParam = "query"; /** * String of key/value pairs to append to requests made to scriptURI. Define * this string when you want to send additional query parameters to your script. * When defined, queries will be sent to * ?=userinput& * Default: "". * * @type string */ YAHOO.widget.DS_XHR.prototype.scriptQueryAppend = ""; /** * XHR response data type. Other types that may be defined are TYPE_XML and * TYPE_FLAT. Default: TYPE_JSON. * * @type type */ YAHOO.widget.DS_XHR.prototype.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_JSON; /** * String after which to strip results. If the results from the XHR are sent * back as HTML, the gzip HTML comment appears at the end of the data and should * be ignored. Default: "\n<!--" * * @type string */ YAHOO.widget.DS_XHR.prototype.responseStripAfter = "\n