ModalPanel conflict with mootools js
cbax007 Nov 12, 2007 12:17 PMI've found that I can not use the rich:modalPanel when I have a page that also uses some of the mootools js functions. When the page first loads, I get the 'Object does not support this property or method' javascript error. Then, when I click the button that displays the model panel, I get a 'panel.modalPanel is null or not an object' error. I have included the simple test page below as well as the contents of the js file. If I remove the js declaration, the page works as expected. Any thoughts?
XHTML page
<html xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:rich="http://richfaces.ajax4jsf.org/rich" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:a4j="https://ajax4jsf.dev.java.net/ajax" xmlns:c="http://java.sun.com/jstl/core"> <head> <title>Test</title> <script type="text/javascript" src="/anet_web/js/mootools.v1.11.js"></script> </head> <rich:modalPanel id="MessagesPanel" minHeight="200" minWidth="700" height="200" width="700" zindex="2000"> <table> <tr> <td>This is the model panel</td> </tr> </table> </rich:modalPanel> <h:form id="test"> <a4j:commandButton id="Test" value="Test" onclick="Richfaces.showModalPanel('MessagesPanel')"/> </h:form> </html>
JS File
//MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006-2007 Valerio Proietti, <http://mad4milk.net>, MIT Style License. var MooTools = { version: '1.11' }; function $defined(obj){ return (obj != undefined); }; function $type(obj){ if (!$defined(obj)) return false; if (obj.htmlElement) return 'element'; var type = typeof obj; if (type == 'object' && obj.nodeName){ switch(obj.nodeType){ case 1: return 'element'; case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace'; } } if (type == 'object' || type == 'function'){ switch(obj.constructor){ case Array: return 'array'; case RegExp: return 'regexp'; case Class: return 'class'; } if (typeof obj.length == 'number'){ if (obj.item) return 'collection'; if (obj.callee) return 'arguments'; } } return type; }; function $merge(){ var mix = {}; for (var i = 0; i < arguments.length; i++){ for (var property in arguments){ var ap = arguments[property]; var mp = mix[property]; if (mp && $type(ap) == 'object' && $type(mp) == 'object') mix[property] = $merge(mp, ap); else mix[property] = ap; } } return mix; }; var $extend = function(){ var args = arguments; if (!args[1]) args = [this, args[0]]; for (var property in args[1]) args[0][property] = args[1][property]; return args[0]; }; var $native = function(){ for (var i = 0, l = arguments.length; i < l; i++){ arguments.extend = function(props){ for (var prop in props){ if (!this.prototype[prop]) this.prototype[prop] = props[prop]; if (!this[prop]) this[prop] = $native.generic(prop); } }; } }; $native.generic = function(prop){ return function(bind){ return this.prototype[prop].apply(bind, Array.prototype.slice.call(arguments, 1)); }; }; $native(Function, Array, String, Number); function $chk(obj){ return !!(obj || obj === 0); }; function $pick(obj, picked){ return $defined(obj) ? obj : picked; }; function $random(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }; function $time(){ return new Date().getTime(); }; function $clear(timer){ clearTimeout(timer); clearInterval(timer); return null; }; var Abstract = function(obj){ obj = obj || {}; obj.extend = $extend; return obj; }; var Window = new Abstract(window); var Document = new Abstract(document); document.head = document.getElementsByTagName('head')[0]; window.xpath = !!(document.evaluate); if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true; else if (document.childNodes && !document.all && !navigator.taintEnabled) window.webkit = window[window.xpath ? 'webkit420' : 'webkit419'] = true; else if (document.getBoxObjectFor != null) window.gecko = true; window.khtml = window.webkit; Object.extend = $extend; if (typeof HTMLElement == 'undefined'){ var HTMLElement = function(){}; if (window.webkit) document.createElement("iframe"); HTMLElement.prototype = (window.webkit) ? window["[[DOMElement.prototype]]"] : {}; } HTMLElement.prototype.htmlElement = function(){}; if (window.ie6) try {document.execCommand("BackgroundImageCache", false, true);} catch(e){}; var Class = function(properties){ var klass = function(){ return (arguments[0] !== null && this.initialize && $type(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this; }; $extend(klass, this); klass.prototype = properties; klass.constructor = Class; return klass; }; Class.empty = function(){}; Class.prototype = { extend: function(properties){ var proto = new this(null); for (var property in properties){ var pp = proto[property]; proto[property] = Class.Merge(pp, properties[property]); } return new Class(proto); }, implement: function(){ for (var i = 0, l = arguments.length; i < l; i++) $extend(this.prototype, arguments); } }; Class.Merge = function(previous, current){ if (previous && previous != current){ var type = $type(current); if (type != $type(previous)) return current; switch(type){ case 'function': var merged = function(){ this.parent = arguments.callee.parent; return current.apply(this, arguments); }; merged.parent = previous; return merged; case 'object': return $merge(previous, current); } } return current; }; var Chain = new Class({ chain: function(fn){ this.chains = this.chains || []; this.chains.push(fn); return this; }, callChain: function(){ if (this.chains && this.chains.length) this.chains.shift().delay(10, this); }, clearChain: function(){ this.chains = []; } }); var Events = new Class({ addEvent: function(type, fn){ if (fn != Class.empty){ this.$events = this.$events || {}; this.$events[type] = this.$events[type] || []; this.$events[type].include(fn); } return this; }, fireEvent: function(type, args, delay){ if (this.$events && this.$events[type]){ this.$events[type].each(function(fn){ fn.create({'bind': this, 'delay': delay, 'arguments': args})(); }, this); } return this; }, removeEvent: function(type, fn){ if (this.$events && this.$events[type]) this.$events[type].remove(fn); return this; } }); var Options = new Class({ setOptions: function(){ this.options = $merge.apply(null, [this.options].extend(arguments)); if (this.addEvent){ for (var option in this.options){ if ($type(this.options[option] == 'function') && (/^on[A-Z]/).test(option)) this.addEvent(option, this.options[option]); } } return this; } }); Array.extend({ forEach: function(fn, bind){ for (var i = 0, j = this.length; i < j; i++) fn.call(bind, this, i, this); }, filter: function(fn, bind){ var results = []; for (var i = 0, j = this.length; i < j; i++){ if (fn.call(bind, this, i, this)) results.push(this); } return results; }, map: function(fn, bind){ var results = []; for (var i = 0, j = this.length; i < j; i++) results = fn.call(bind, this, i, this); return results; }, every: function(fn, bind){ for (var i = 0, j = this.length; i < j; i++){ if (!fn.call(bind, this, i, this)) return false; } return true; }, some: function(fn, bind){ for (var i = 0, j = this.length; i < j; i++){ if (fn.call(bind, this, i, this)) return true; } return false; }, indexOf: function(item, from){ var len = this.length; for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){ if (this === item) return i; } return -1; }, copy: function(start, length){ start = start || 0; if (start < 0) start = this.length + start; length = length || (this.length - start); var newArray = []; for (var i = 0; i < length; i++) newArray = this[start++]; return newArray; }, remove: function(item){ var i = 0; var len = this.length; while (i < len){ if (this === item){ this.splice(i, 1); len--; } else { i++; } } return this; }, contains: function(item, from){ return this.indexOf(item, from) != -1; }, associate: function(keys){ var obj = {}, length = Math.min(this.length, keys.length); for (var i = 0; i < length; i++) obj[keys] = this; return obj; }, extend: function(array){ for (var i = 0, j = array.length; i < j; i++) this.push(array); return this; }, merge: function(array){ for (var i = 0, l = array.length; i < l; i++) this.include(array); return this; }, include: function(item){ if (!this.contains(item)) this.push(item); return this; }, getRandom: function(){ return this[$random(0, this.length - 1)] || null; }, getLast: function(){ return this[this.length - 1] || null; } }); Array.prototype.each = Array.prototype.forEach; Array.each = Array.forEach; function $A(array){ return Array.copy(array); }; function $each(iterable, fn, bind){ if (iterable && typeof iterable.length == 'number' && $type(iterable) != 'object'){ Array.forEach(iterable, fn, bind); } else { for (var name in iterable) fn.call(bind || iterable, iterable[name], name); } }; Array.prototype.test = Array.prototype.contains; String.extend({ test: function(regex, params){ return (($type(regex) == 'string') ? new RegExp(regex, params) : regex).test(this); }, toInt: function(){ return parseInt(this, 10); }, toFloat: function(){ return parseFloat(this); }, camelCase: function(){ return this.replace(/-\D/g, function(match){ return match.charAt(1).toUpperCase(); }); }, hyphenate: function(){ return this.replace(/\w[A-Z]/g, function(match){ return (match.charAt(0) + '-' + match.charAt(1).toLowerCase()); }); }, capitalize: function(){ return this.replace(/\b[a-z]/g, function(match){ return match.toUpperCase(); }); }, trim: function(){ return this.replace(/^\s+|\s+$/g, ''); }, clean: function(){ return this.replace(/\s{2,}/g, ' ').trim(); }, rgbToHex: function(array){ var rgb = this.match(/\d{1,3}/g); return (rgb) ? rgb.rgbToHex(array) : false; }, hexToRgb: function(array){ var hex = this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/); return (hex) ? hex.slice(1).hexToRgb(array) : false; }, contains: function(string, s){ return (s) ? (s + this + s).indexOf(s + string + s) > -1 : this.indexOf(string) > -1; }, escapeRegExp: function(){ return this.replace(/([.*+?^${}()|[\]\/\\])/g, '\$1'); } }); Array.extend({ rgbToHex: function(array){ if (this.length < 3) return false; if (this.length == 4 && this[3] == 0 && !array) return 'transparent'; var hex = []; for (var i = 0; i < 3; i++){ var bit = (this - 0).toString(16); hex.push((bit.length == 1) ? '0' + bit : bit); } return array ? hex : '#' + hex.join(''); }, hexToRgb: function(array){ if (this.length != 3) return false; var rgb = []; for (var i = 0; i < 3; i++){ rgb.push(parseInt((this.length == 1) ? this + this : this, 16)); } return array ? rgb : 'rgb(' + rgb.join(',') + ')'; } }); Function.extend({ create: function(options){ var fn = this; options = $merge({ 'bind': fn, 'event': false, 'arguments': null, 'delay': false, 'periodical': false, 'attempt': false }, options); if ($chk(options.arguments) && $type(options.arguments) != 'array') options.arguments = [options.arguments]; return function(event){ var args; if (options.event){ event = event || window.event; args = [(options.event === true) ? event : new options.event(event)]; if (options.arguments) args.extend(options.arguments); } else args = options.arguments || arguments; var returns = function(){ return fn.apply($pick(options.bind, fn), args); }; if (options.delay) return setTimeout(returns, options.delay); if (options.periodical) return setInterval(returns, options.periodical); if (options.attempt) try {return returns();} catch(err){return false;}; return returns(); }; }, pass: function(args, bind){ return this.create({'arguments': args, 'bind': bind}); }, attempt: function(args, bind){ return this.create({'arguments': args, 'bind': bind, 'attempt': true})(); }, bind: function(bind, args){ return this.create({'bind': bind, 'arguments': args}); }, bindAsEventListener: function(bind, args){ return this.create({'bind': bind, 'event': true, 'arguments': args}); }, delay: function(delay, bind, args){ return this.create({'delay': delay, 'bind': bind, 'arguments': args})(); }, periodical: function(interval, bind, args){ return this.create({'periodical': interval, 'bind': bind, 'arguments': args})(); } }); Number.extend({ toInt: function(){ return parseInt(this); }, toFloat: function(){ return parseFloat(this); }, limit: function(min, max){ return Math.min(max, Math.max(min, this)); }, round: function(precision){ precision = Math.pow(10, precision || 0); return Math.round(this * precision) / precision; }, times: function(fn){ for (var i = 0; i < this; i++) fn(i); } }); var Element = new Class({ initialize: function(el, props){ if ($type(el) == 'string'){ if (window.ie && props && (props.name || props.type)){ var name = (props.name) ? ' name="' + props.name + '"' : ''; var type = (props.type) ? ' type="' + props.type + '"' : ''; delete props.name; delete props.type; el = '<' + el + name + type + '>'; } el = document.createElement(el); } el = $(el); return (!props || !el) ? el : el.set(props); } }); var Elements = new Class({ initialize: function(elements){ return (elements) ? $extend(elements, this) : this; } }); Elements.extend = function(props){ for (var prop in props){ this.prototype[prop] = props[prop]; this[prop] = $native.generic(prop); } }; function $(el){ if (!el) return null; if (el.htmlElement) return Garbage.collect(el); if ([window, document].contains(el)) return el; var type = $type(el); if (type == 'string'){ el = document.getElementById(el); type = (el) ? 'element' : false; } if (type != 'element') return null; if (el.htmlElement) return Garbage.collect(el); if (['object', 'embed'].contains(el.tagName.toLowerCase())) return el; $extend(el, Element.prototype); el.htmlElement = function(){}; return Garbage.collect(el); }; document.getElementsBySelector = document.getElementsByTagName; function $$(){ var elements = []; for (var i = 0, j = arguments.length; i < j; i++){ var selector = arguments; switch($type(selector)){ case 'element': elements.push(selector); case 'boolean': break; case false: break; case 'string': selector = document.getElementsBySelector(selector, true); default: elements.extend(selector); } } return $$.unique(elements); }; $$.unique = function(array){ var elements = []; for (var i = 0, l = array.length; i < l; i++){ if (array.$included) continue; var element = $(array); if (element && !element.$included){ element.$included = true; elements.push(element); } } for (var n = 0, d = elements.length; n < d; n++) elements[n].$included = null; return new Elements(elements); }; Elements.Multi = function(property){ return function(){ var args = arguments; var items = []; var elements = true; for (var i = 0, j = this.length, returns; i < j; i++){ returns = this[property].apply(this, args); if ($type(returns) != 'element') elements = false; items.push(returns); }; return (elements) ? $$.unique(items) : items; }; }; Element.extend = function(properties){ for (var property in properties){ HTMLElement.prototype[property] = properties[property]; Element.prototype[property] = properties[property]; Element[property] = $native.generic(property); var elementsProperty = (Array.prototype[property]) ? property + 'Elements' : property; Elements.prototype[elementsProperty] = Elements.Multi(property); } }; Element.extend({ set: function(props){ for (var prop in props){ var val = props[prop]; switch(prop){ case 'styles': this.setStyles(val); break; case 'events': if (this.addEvents) this.addEvents(val); break; case 'properties': this.setProperties(val); break; default: this.setProperty(prop, val); } } return this; }, inject: function(el, where){ el = $(el); switch(where){ case 'before': el.parentNode.insertBefore(this, el); break; case 'after': var next = el.getNext(); if (!next) el.parentNode.appendChild(this); else el.parentNode.insertBefore(this, next); break; case 'top': var first = el.firstChild; if (first){ el.insertBefore(this, first); break; } default: el.appendChild(this); } return this; }, injectBefore: function(el){ return this.inject(el, 'before'); }, injectAfter: function(el){ return this.inject(el, 'after'); }, injectInside: function(el){ return this.inject(el, 'bottom'); }, injectTop: function(el){ return this.inject(el, 'top'); }, adopt: function(){ var elements = []; $each(arguments, function(argument){ elements = elements.concat(argument); }); $$(elements).inject(this); return this; }, remove: function(){ return this.parentNode.removeChild(this); }, clone: function(contents){ var el = $(this.cloneNode(contents !== false)); if (!el.$events) return el; el.$events = {}; for (var type in this.$events) el.$events[type] = { 'keys': $A(this.$events[type].keys), 'values': $A(this.$events[type].values) }; return el.removeEvents(); }, replaceWith: function(el){ el = $(el); this.parentNode.replaceChild(el, this); return el; }, appendText: function(text){ this.appendChild(document.createTextNode(text)); return this; }, hasClass: function(className){ return this.className.contains(className, ' '); }, addClass: function(className){ if (!this.hasClass(className)) this.className = (this.className + ' ' + className).clean(); return this; }, removeClass: function(className){ this.className = this.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1').clean(); return this; }, toggleClass: function(className){ return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); }, setStyle: function(property, value){ switch(property){ case 'opacity': return this.setOpacity(parseFloat(value)); case 'float': property = (window.ie) ? 'styleFloat' : 'cssFloat'; } property = property.camelCase(); switch($type(value)){ case 'number': if (!['zIndex', 'zoom'].contains(property)) value += 'px'; break; case 'array': value = 'rgb(' + value.join(',') + ')'; } this.style[property] = value; return this; }, setStyles: function(source){ switch($type(source)){ case 'object': Element.setMany(this, 'setStyle', source); break; case 'string': this.style.cssText = source; } return this; }, setOpacity: function(opacity){ if (opacity == 0){ if (this.style.visibility != "hidden") this.style.visibility = "hidden"; } else { if (this.style.visibility != "visible") this.style.visibility = "visible"; } if (!this.currentStyle || !this.currentStyle.hasLayout) this.style.zoom = 1; if (window.ie) this.style.filter = (opacity == 1) ? '' : "alpha(opacity=" + opacity * 100 + ")"; this.style.opacity = this.$tmp.opacity = opacity; return this; }, getStyle: function(property){ property = property.camelCase(); var result = this.style[property]; if (!$chk(result)){ if (property == 'opacity') return this.$tmp.opacity; result = []; for (var style in Element.Styles){ if (property == style){ Element.Styles[style].each(function(s){ var style = this.getStyle(s); result.push(parseInt(style) ? style : '0px'); }, this); if (property == 'border'){ var every = result.every(function(bit){ return (bit == result[0]); }); return (every) ? result[0] : false; } return result.join(' '); } } if (property.contains('border')){ if (Element.Styles.border.contains(property)){ return ['Width', 'Style', 'Color'].map(function(p){ return this.getStyle(property + p); }, this).join(' '); } else if (Element.borderShort.contains(property)){ return ['Top', 'Right', 'Bottom', 'Left'].map(function(p){ return this.getStyle('border' + p + property.replace('border', '')); }, this).join(' '); } } if (document.defaultView) result = document.defaultView.getComputedStyle(this, null).getPropertyValue(property.hyphenate()); else if (this.currentStyle) result = this.currentStyle[property]; } if (window.ie) result = Element.fixStyle(property, result, this); if (result && property.test(/color/i) && result.contains('rgb')){ return result.split('rgb').splice(1,4).map(function(color){ return color.rgbToHex(); }).join(' '); } return result; }, getStyles: function(){ return Element.getMany(this, 'getStyle', arguments); }, walk: function(brother, start){ brother += 'Sibling'; var el = (start) ? this[start] : this[brother]; while (el && $type(el) != 'element') el = el[brother]; return $(el); }, getPrevious: function(){ return this.walk('previous'); }, getNext: function(){ return this.walk('next'); }, getFirst: function(){ return this.walk('next', 'firstChild'); }, getLast: function(){ return this.walk('previous', 'lastChild'); }, getParent: function(){ return $(this.parentNode); }, getChildren: function(){ return $$(this.childNodes); }, hasChild: function(el){ return !!$A(this.getElementsByTagName('*')).contains(el); }, getProperty: function(property){ var index = Element.Properties[property]; if (index) return this[index]; var flag = Element.PropertiesIFlag[property] || 0; if (!window.ie || flag) return this.getAttribute(property, flag); var node = this.attributes[property]; return (node) ? node.nodeValue : null; }, removeProperty: function(property){ var index = Element.Properties[property]; if (index) this[index] = ''; else this.removeAttribute(property); return this; }, getProperties: function(){ return Element.getMany(this, 'getProperty', arguments); }, setProperty: function(property, value){ var index = Element.Properties[property]; if (index) this[index] = value; else this.setAttribute(property, value); return this; }, setProperties: function(source){ return Element.setMany(this, 'setProperty', source); }, setHTML: function(){ this.innerHTML = $A(arguments).join(''); return this; }, setText: function(text){ var tag = this.getTag(); if (['style', 'script'].contains(tag)){ if (window.ie){ if (tag == 'style') this.styleSheet.cssText = text; else if (tag == 'script') this.setProperty('text', text); return this; } else { this.removeChild(this.firstChild); return this.appendText(text); } } this[$defined(this.innerText) ? 'innerText' : 'textContent'] = text; return this; }, getText: function(){ var tag = this.getTag(); if (['style', 'script'].contains(tag)){ if (window.ie){ if (tag == 'style') return this.styleSheet.cssText; else if (tag == 'script') return this.getProperty('text'); } else { return this.innerHTML; } } return ($pick(this.innerText, this.textContent)); }, getTag: function(){ return this.tagName.toLowerCase(); }, empty: function(){ Garbage.trash(this.getElementsByTagName('*')); return this.setHTML(''); } }); Element.fixStyle = function(property, result, element){ if ($chk(parseInt(result))) return result; if (['height', 'width'].contains(property)){ var values = (property == 'width') ? ['left', 'right'] : ['top', 'bottom']; var size = 0; values.each(function(value){ size += element.getStyle('border-' + value + '-width').toInt() + element.getStyle('padding-' + value).toInt(); }); return element['offset' + property.capitalize()] - size + 'px'; } else if (property.test(/border(.+)Width|margin|padding/)){ return '0px'; } return result; }; Element.Styles = {'border': [], 'padding': [], 'margin': []}; ['Top', 'Right', 'Bottom', 'Left'].each(function(direction){ for (var style in Element.Styles) Element.Styles[style].push(style + direction); }); Element.borderShort = ['borderWidth', 'borderStyle', 'borderColor']; Element.getMany = function(el, method, keys){ var result = {}; $each(keys, function(key){ result[key] = el[method](key); }); return result; }; Element.setMany = function(el, method, pairs){ for (var key in pairs) el[method](key, pairs[key]); return el; }; Element.Properties = new Abstract({ 'class': 'className', 'for': 'htmlFor', 'colspan': 'colSpan', 'rowspan': 'rowSpan', 'accesskey': 'accessKey', 'tabindex': 'tabIndex', 'maxlength': 'maxLength', 'readonly': 'readOnly', 'frameborder': 'frameBorder', 'value': 'value', 'disabled': 'disabled', 'checked': 'checked', 'multiple': 'multiple', 'selected': 'selected' }); Element.PropertiesIFlag = { 'href': 2, 'src': 2 }; Element.Methods = { Listeners: { addListener: function(type, fn){ if (this.addEventListener) this.addEventListener(type, fn, false); else this.attachEvent('on' + type, fn); return this; }, removeListener: function(type, fn){ if (this.removeEventListener) this.removeEventListener(type, fn, false); else this.detachEvent('on' + type, fn); return this; } } }; window.extend(Element.Methods.Listeners); document.extend(Element.Methods.Listeners); Element.extend(Element.Methods.Listeners); var Garbage = { elements: [], collect: function(el){ if (!el.$tmp){ Garbage.elements.push(el); el.$tmp = {'opacity': 1}; } return el; }, trash: function(elements){ for (var i = 0, j = elements.length, el; i < j; i++){ if (!(el = elements) || !el.$tmp) continue; if (el.$events) el.fireEvent('trash').removeEvents(); for (var p in el.$tmp) el.$tmp[p] = null; for (var d in Element.prototype) el[d] = null; Garbage.elements[Garbage.elements.indexOf(el)] = null; el.htmlElement = el.$tmp = el = null; } Garbage.elements.remove(null); }, empty: function(){ Garbage.collect(window); Garbage.collect(document); Garbage.trash(Garbage.elements); } }; window.addListener('beforeunload', function(){ window.addListener('unload', Garbage.empty); if (window.ie) window.addListener('unload', CollectGarbage); }); var Event = new Class({ initialize: function(event){ if (event && event.$extended) return event; this.$extended = true; event = event || window.event; this.event = event; this.type = event.type; this.target = event.target || event.srcElement; if (this.target.nodeType == 3) this.target = this.target.parentNode; this.shift = event.shiftKey; this.control = event.ctrlKey; this.alt = event.altKey; this.meta = event.metaKey; if (['DOMMouseScroll', 'mousewheel'].contains(this.type)){ this.wheel = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; } else if (this.type.contains('key')){ this.code = event.which || event.keyCode; for (var name in Event.keys){ if (Event.keys[name] == this.code){ this.key = name; break; } } if (this.type == 'keydown'){ var fKey = this.code - 111; if (fKey > 0 && fKey < 13) this.key = 'f' + fKey; } this.key = this.key || String.fromCharCode(this.code).toLowerCase(); } else if (this.type.test(/(click|mouse|menu)/)){ this.page = { 'x': event.pageX || event.clientX + document.documentElement.scrollLeft, 'y': event.pageY || event.clientY + document.documentElement.scrollTop }; this.client = { 'x': event.pageX ? event.pageX - window.pageXOffset : event.clientX, 'y': event.pageY ? event.pageY - window.pageYOffset : event.clientY }; this.rightClick = (event.which == 3) || (event.button == 2); switch(this.type){ case 'mouseover': this.relatedTarget = event.relatedTarget || event.fromElement; break; case 'mouseout': this.relatedTarget = event.relatedTarget || event.toElement; } this.fixRelatedTarget(); } return this; }, stop: function(){ return this.stopPropagation().preventDefault(); }, stopPropagation: function(){ if (this.event.stopPropagation) this.event.stopPropagation(); else this.event.cancelBubble = true; return this; }, preventDefault: function(){ if (this.event.preventDefault) this.event.preventDefault(); else this.event.returnValue = false; return this; } }); Event.fix = { relatedTarget: function(){ if (this.relatedTarget && this.relatedTarget.nodeType == 3) this.relatedTarget = this.relatedTarget.parentNode; }, relatedTargetGecko: function(){ try {Event.fix.relatedTarget.call(this);} catch(e){this.relatedTarget = this.target;} } }; Event.prototype.fixRelatedTarget = (window.gecko) ? Event.fix.relatedTargetGecko : Event.fix.relatedTarget; Event.keys = new Abstract({ 'enter': 13, 'up': 38, 'down': 40, 'left': 37, 'right': 39, 'esc': 27, 'space': 32, 'backspace': 8, 'tab': 9, 'delete': 46 }); Element.Methods.Events = { addEvent: function(type, fn){ this.$events = this.$events || {}; this.$events[type] = this.$events[type] || {'keys': [], 'values': []}; if (this.$events[type].keys.contains(fn)) return this; this.$events[type].keys.push(fn); var realType = type; var custom = Element.Events[type]; if (custom){ if (custom.add) custom.add.call(this, fn); if (custom.map) fn = custom.map; if (custom.type) realType = custom.type; } if (!this.addEventListener) fn = fn.create({'bind': this, 'event': true}); this.$events[type].values.push(fn); return (Element.NativeEvents.contains(realType)) ? this.addListener(realType, fn) : this; }, removeEvent: function(type, fn){ if (!this.$events || !this.$events[type]) return this; var pos = this.$events[type].keys.indexOf(fn); if (pos == -1) return this; var key = this.$events[type].keys.splice(pos,1)[0]; var value = this.$events[type].values.splice(pos,1)[0]; var custom = Element.Events[type]; if (custom){ if (custom.remove) custom.remove.call(this, fn); if (custom.type) type = custom.type; } return (Element.NativeEvents.contains(type)) ? this.removeListener(type, value) : this; }, addEvents: function(source){ return Element.setMany(this, 'addEvent', source); }, removeEvents: function(type){ if (!this.$events) return this; if (!type){ for (var evType in this.$events) this.removeEvents(evType); this.$events = null; } else if (this.$events[type]){ this.$events[type].keys.each(function(fn){ this.removeEvent(type, fn); }, this); this.$events[type] = null; } return this; }, fireEvent: function(type, args, delay){ if (this.$events && this.$events[type]){ this.$events[type].keys.each(function(fn){ fn.create({'bind': this, 'delay': delay, 'arguments': args})(); }, this); } return this; }, cloneEvents: function(from, type){ if (!from.$events) return this; if (!type){ for (var evType in from.$events) this.cloneEvents(from, evType); } else if (from.$events[type]){ from.$events[type].keys.each(function(fn){ this.addEvent(type, fn); }, this); } return this; } }; window.extend(Element.Methods.Events); document.extend(Element.Methods.Events); Element.extend(Element.Methods.Events); Element.Events = new Abstract({ 'mouseenter': { type: 'mouseover', map: function(event){ event = new Event(event); if (event.relatedTarget != this && !this.hasChild(event.relatedTarget)) this.fireEvent('mouseenter', event); } }, 'mouseleave': { type: 'mouseout', map: function(event){ event = new Event(event); if (event.relatedTarget != this && !this.hasChild(event.relatedTarget)) this.fireEvent('mouseleave', event); } }, 'mousewheel': { type: (window.gecko) ? 'DOMMouseScroll' : 'mousewheel' } }); Element.NativeEvents = [ 'click', 'dblclick', 'mouseup', 'mousedown', 'mousewheel', 'DOMMouseScroll', 'mouseover', 'mouseout', 'mousemove', 'keydown', 'keypress', 'keyup', 'load', 'unload', 'beforeunload', 'resize', 'move', 'focus', 'blur', 'change', 'submit', 'reset', 'select', 'error', 'abort', 'contextmenu', 'scroll' ]; Function.extend({ bindWithEvent: function(bind, args){ return this.create({'bind': bind, 'arguments': args, 'event': Event}); } }); Elements.extend({ filterByTag: function(tag){ return new Elements(this.filter(function(el){ return (Element.getTag(el) == tag); })); }, filterByClass: function(className, nocash){ var elements = this.filter(function(el){ return (el.className && el.className.contains(className, ' ')); }); return (nocash) ? elements : new Elements(elements); }, filterById: function(id, nocash){ var elements = this.filter(function(el){ return (el.id == id); }); return (nocash) ? elements : new Elements(elements); }, filterByAttribute: function(name, operator, value, nocash){ var elements = this.filter(function(el){ var current = Element.getProperty(el, name); if (!current) return false; if (!operator) return true; switch(operator){ case '=': return (current == value); case '*=': return (current.contains(value)); case '^=': return (current.substr(0, value.length) == value); case '$=': return (current.substr(current.length - value.length) == value); case '!=': return (current != value); case '~=': return current.contains(value, ' '); } return false; }); return (nocash) ? elements : new Elements(elements); } }); function $E(selector, filter){ return ($(filter) || document).getElement(selector); }; function $ES(selector, filter){ return ($(filter) || document).getElementsBySelector(selector); }; $$.shared = { 'regexp': /^(\w*|\*)(?:#([\w-]+)|\.([\w-]+))?(?:\[(\w+)(?:([!*^$]?=)["']?([^"'\]]*)["']?)?])?$/, 'xpath': { getParam: function(items, context, param, i){ var temp = [context.namespaceURI ? 'xhtml:' : '', param[1]]; if (param[2]) temp.push('[@id="', param[2], '"]'); if (param[3]) temp.push('[contains(concat(" ", @class, " "), " ', param[3], ' ")]'); if (param[4]){ if (param[5] && param[6]){ switch(param[5]){ case '*=': temp.push('[contains(@', param[4], ', "', param[6], '")]'); break; case '^=': temp.push('[starts-with(@', param[4], ', "', param[6], '")]'); break; case '$=': temp.push('[substring(@', param[4], ', string-length(@', param[4], ') - ', param[6].length, ' + 1) = "', param[6], '"]'); break; case '=': temp.push('[@', param[4], '="', param[6], '"]'); break; case '!=': temp.push('[@', param[4], '!="', param[6], '"]'); } } else { temp.push('[@', param[4], ']'); } } items.push(temp.join('')); return items; }, getItems: function(items, context, nocash){ var elements = []; var xpath = document.evaluate('.//' + items.join('//'), context, $$.shared.resolver, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0, j = xpath.snapshotLength; i < j; i++) elements.push(xpath.snapshotItem(i)); return (nocash) ? elements : new Elements(elements.map($)); } }, 'normal': { getParam: function(items, context, param, i){ if (i == 0){ if (param[2]){ var el = context.getElementById(param[2]); if (!el || ((param[1] != '*') && (Element.getTag(el) != param[1]))) return false; items = [el]; } else { items = $A(context.getElementsByTagName(param[1])); } } else { items = $$.shared.getElementsByTagName(items, param[1]); if (param[2]) items = Elements.filterById(items, param[2], true); } if (param[3]) items = Elements.filterByClass(items, param[3], true); if (param[4]) items = Elements.filterByAttribute(items, param[4], param[5], param[6], true); return items; }, getItems: function(items, context, nocash){ return (nocash) ? items : $$.unique(items); } }, resolver: function(prefix){ return (prefix == 'xhtml') ? 'http://www.w3.org/1999/xhtml' : false; }, getElementsByTagName: function(context, tagName){ var found = []; for (var i = 0, j = context.length; i < j; i++) found.extend(context.getElementsByTagName(tagName)); return found; } }; $$.shared.method = (window.xpath) ? 'xpath' : 'normal'; Element.Methods.Dom = { getElements: function(selector, nocash){ var items = []; selector = selector.trim().split(' '); for (var i = 0, j = selector.length; i < j; i++){ var sel = selector; var param = sel.match($$.shared.regexp); if (!param) break; param[1] = param[1] || '*'; var temp = $$.shared[$$.shared.method].getParam(items, this, param, i); if (!temp) break; items = temp; } return $$.shared[$$.shared.method].getItems(items, this, nocash); }, getElement: function(selector){ return $(this.getElements(selector, true)[0] || false); }, getElementsBySelector: function(selector, nocash){ var elements = []; selector = selector.split(','); for (var i = 0, j = selector.length; i < j; i++) elements = elements.concat(this.getElements(selector, true)); return (nocash) ? elements : $$.unique(elements); } }; Element.extend({ getElementById: function(id){ var el = document.getElementById(id); if (!el) return false; for (var parent = el.parentNode; parent != this; parent = parent.parentNode){ if (!parent) return false; } return el; }/*compatibility*/, getElementsByClassName: function(className){ return this.getElements('.' + className); } }); document.extend(Element.Methods.Dom); Element.extend(Element.Methods.Dom); Element.extend({ getValue: function(){ switch(this.getTag()){ case 'select': var values = []; $each(this.options, function(option){ if (option.selected) values.push($pick(option.value, option.text)); }); return (this.multiple) ? values : values[0]; case 'input': if (!(this.checked && ['checkbox', 'radio'].contains(this.type)) && !['hidden', 'text', 'password'].contains(this.type)) break; case 'textarea': return this.value; } return false; }, getFormElements: function(){ return $$(this.getElementsByTagName('input'), this.getElementsByTagName('select'), this.getElementsByTagName('textarea')); }, toQueryString: function(){ var queryString = []; this.getFormElements().each(function(el){ var name = el.name; var value = el.getValue(); if (value === false || !name || el.disabled) return; var qs = function(val){ queryString.push(name + '=' + encodeURIComponent(val)); }; if ($type(value) == 'array') value.each(qs); else qs(value); }); return queryString.join('&'); } }); Element.extend({ scrollTo: function(x, y){ this.scrollLeft = x; this.scrollTop = y; }, getSize: function(){ return { 'scroll': {'x': this.scrollLeft, 'y': this.scrollTop}, 'size': {'x': this.offsetWidth, 'y': this.offsetHeight}, 'scrollSize': {'x': this.scrollWidth, 'y': this.scrollHeight} }; }, getPosition: function(overflown){ overflown = overflown || []; var el = this, left = 0, top = 0; do { left += el.offsetLeft || 0; top += el.offsetTop || 0; el = el.offsetParent; } while (el); overflown.each(function(element){ left -= element.scrollLeft || 0; top -= element.scrollTop || 0; }); return {'x': left, 'y': top}; }, getTop: function(overflown){ return this.getPosition(overflown).y; }, getLeft: function(overflown){ return this.getPosition(overflown).x; }, getCoordinates: function(overflown){ var position = this.getPosition(overflown); var obj = { 'width': this.offsetWidth, 'height': this.offsetHeight, 'left': position.x, 'top': position.y }; obj.right = obj.left + obj.width; obj.bottom = obj.top + obj.height; return obj; } }); Element.Events.domready = { add: function(fn){ if (window.loaded){ fn.call(this); return; } var domReady = function(){ if (window.loaded) return; window.loaded = true; window.timer = $clear(window.timer); this.fireEvent('domready'); }.bind(this); if (document.readyState && window.webkit){ window.timer = function(){ if (['loaded','complete'].contains(document.readyState)) domReady(); }.periodical(50); } else if (document.readyState && window.ie){ if (!$('ie_ready')){ var src = (window.location.protocol == 'https:') ? '://0' : 'javascript:void(0)'; document.write('<script id="ie_ready" defer src="' + src + '"><\/script>'); $('ie_ready').onreadystatechange = function(){ if (this.readyState == 'complete') domReady(); }; } } else { window.addListener("load", domReady); document.addListener("DOMContentLoaded", domReady); } } }; window.onDomReady = function(fn){ return this.addEvent('domready', fn); }; window.extend({ getWidth: function(){ if (this.webkit419) return this.innerWidth; if (this.opera) return document.body.clientWidth; return document.documentElement.clientWidth; }, getHeight: function(){ if (this.webkit419) return this.innerHeight; if (this.opera) return document.body.clientHeight; return document.documentElement.clientHeight; }, getScrollWidth: function(){ if (this.ie) return Math.max(document.documentElement.offsetWidth, document.documentElement.scrollWidth); if (this.webkit) return document.body.scrollWidth; return document.documentElement.scrollWidth; }, getScrollHeight: function(){ if (this.ie) return Math.max(document.documentElement.offsetHeight, document.documentElement.scrollHeight); if (this.webkit) return document.body.scrollHeight; return document.documentElement.scrollHeight; }, getScrollLeft: function(){ return this.pageXOffset || document.documentElement.scrollLeft; }, getScrollTop: function(){ return this.pageYOffset || document.documentElement.scrollTop; }, getSize: function(){ return { 'size': {'x': this.getWidth(), 'y': this.getHeight()}, 'scrollSize': {'x': this.getScrollWidth(), 'y': this.getScrollHeight()}, 'scroll': {'x': this.getScrollLeft(), 'y': this.getScrollTop()} }; }, getPosition: function(){return {'x': 0, 'y': 0};} }); var Fx = {}; Fx.Base = new Class({ options: { onStart: Class.empty, onComplete: Class.empty, onCancel: Class.empty, transition: function(p){ return -(Math.cos(Math.PI * p) - 1) / 2; }, duration: 500, unit: 'px', wait: true, fps: 50 }, initialize: function(options){ this.element = this.element || null; this.setOptions(options); if (this.options.initialize) this.options.initialize.call(this); }, step: function(){ var time = $time(); if (time < this.time + this.options.duration){ this.delta = this.options.transition((time - this.time) / this.options.duration); this.setNow(); this.increase(); } else { this.stop(true); this.set(this.to); this.fireEvent('onComplete', this.element, 10); this.callChain(); } }, set: function(to){ this.now = to; this.increase(); return this; }, setNow: function(){ this.now = this.compute(this.from, this.to); }, compute: function(from, to){ return (to - from) * this.delta + from; }, start: function(from, to){ if (!this.options.wait) this.stop(); else if (this.timer) return this; this.from = from; this.to = to; this.change = this.to - this.from; this.time = $time(); this.timer = this.step.periodical(Math.round(1000 / this.options.fps), this); this.fireEvent('onStart', this.element); return this; }, stop: function(end){ if (!this.timer) return this; this.timer = $clear(this.timer); if (!end) this.fireEvent('onCancel', this.element); return this; }/*compatibility*/, custom: function(from, to){ return this.start(from, to); }, clearTimer: function(end){ return this.stop(end); } }); Fx.Base.implement(new Chain, new Events, new Options); Fx.CSS = { select: function(property, to){ if (property.test(/color/i)) return this.Color; var type = $type(to); if ((type == 'array') || (type == 'string' && to.contains(' '))) return this.Multi; return this.Single; }, parse: function(el, property, fromTo){ if (!fromTo.push) fromTo = [fromTo]; var from = fromTo[0], to = fromTo[1]; if (!$chk(to)){ to = from; from = el.getStyle(property); } var css = this.select(property, to); return {'from': css.parse(from), 'to': css.parse(to), 'css': css}; } }; Fx.CSS.Single = { parse: function(value){ return parseFloat(value); }, getNow: function(from, to, fx){ return fx.compute(from, to); }, getValue: function(value, unit, property){ if (unit == 'px' && property != 'opacity') value = Math.round(value); return value + unit; } }; Fx.CSS.Multi = { parse: function(value){ return value.push ? value : value.split(' ').map(function(v){ return parseFloat(v); }); }, getNow: function(from, to, fx){ var now = []; for (var i = 0; i < from.length; i++) now = fx.compute(from, to); return now; }, getValue: function(value, unit, property){ if (unit == 'px' && property != 'opacity') value = value.map(Math.round); return value.join(unit + ' ') + unit; } }; Fx.CSS.Color = { parse: function(value){ return value.push ? value : value.hexToRgb(true); }, getNow: function(from, to, fx){ var now = []; for (var i = 0; i < from.length; i++) now = Math.round(fx.compute(from, to)); return now; }, getValue: function(value){ return 'rgb(' + value.join(',') + ')'; } }; Fx.Style = Fx.Base.extend({ initialize: function(el, property, options){ this.element = $(el); this.property = property; this.parent(options); }, hide: function(){ return this.set(0); }, setNow: function(){ this.now = this.css.getNow(this.from, this.to, this); }, set: function(to){ this.css = Fx.CSS.select(this.property, to); return this.parent(this.css.parse(to)); }, start: function(from, to){ if (this.timer && this.options.wait) return this; var parsed = Fx.CSS.parse(this.element, this.property, [from, to]); this.css = parsed.css; return this.parent(parsed.from, parsed.to); }, increase: function(){ this.element.setStyle(this.property, this.css.getValue(this.now, this.options.unit, this.property)); } }); Element.extend({ effect: function(property, options){ return new Fx.Style(this, property, options); } }); Fx.Styles = Fx.Base.extend({ initialize: function(el, options){ this.element = $(el); this.parent(options); }, setNow: function(){ for (var p in this.from) this.now[p] = this.css[p].getNow(this.from[p], this.to[p], this); }, set: function(to){ var parsed = {}; this.css = {}; for (var p in to){ this.css[p] = Fx.CSS.select(p, to[p]); parsed[p] = this.css[p].parse(to[p]); } return this.parent(parsed); }, start: function(obj){ if (this.timer && this.options.wait) return this; this.now = {}; this.css = {}; var from = {}, to = {}; for (var p in obj){ var parsed = Fx.CSS.parse(this.element, p, obj[p]); from[p] = parsed.from; to[p] = parsed.to; this.css[p] = parsed.css; } return this.parent(from, to); }, increase: function(){ for (var p in this.now) this.element.setStyle(p, this.css[p].getValue(this.now[p], this.options.unit, p)); } }); Element.extend({ effects: function(options){ return new Fx.Styles(this, options); } }); Fx.Elements = Fx.Base.extend({ initialize: function(elements, options){ this.elements = $$(elements); this.parent(options); }, setNow: function(){ for (var i in this.from){ var iFrom = this.from, iTo = this.to, iCss = this.css, iNow = this.now = {}; for (var p in iFrom) iNow[p] = iCss[p].getNow(iFrom[p], iTo[p], this); } }, set: function(to){ var parsed = {}; this.css = {}; for (var i in to){ var iTo = to, iCss = this.css = {}, iParsed = parsed = {}; for (var p in iTo){ iCss[p] = Fx.CSS.select(p, iTo[p]); iParsed[p] = iCss[p].parse(iTo[p]); } } return this.parent(parsed); }, start: function(obj){ if (this.timer && this.options.wait) return this; this.now = {}; this.css = {}; var from = {}, to = {}; for (var i in obj){ var iProps = obj, iFrom = from = {}, iTo = to = {}, iCss = this.css = {}; for (var p in iProps){ var parsed = Fx.CSS.parse(this.elements, p, iProps[p]); iFrom[p] = parsed.from; iTo[p] = parsed.to; iCss[p] = parsed.css; } } return this.parent(from, to); }, increase: function(){ for (var i in this.now){ var iNow = this.now, iCss = this.css; for (var p in iNow) this.elements.setStyle(p, iCss[p].getValue(iNow[p], this.options.unit, p)); } } }); Fx.Scroll = Fx.Base.extend({ options: { overflown: [], offset: {'x': 0, 'y': 0}, wheelStops: true }, initialize: function(element, options){ this.now = []; this.element = $(element); this.bound = {'stop': this.stop.bind(this, false)}; this.parent(options); if (this.options.wheelStops){ this.addEvent('onStart', function(){ document.addEvent('mousewheel', this.bound.stop); }.bind(this)); this.addEvent('onComplete', function(){ document.removeEvent('mousewheel', this.bound.stop); }.bind(this)); } }, setNow: function(){ for (var i = 0; i < 2; i++) this.now = this.compute(this.from, this.to); }, scrollTo: function(x, y){ if (this.timer && this.options.wait) return this; var el = this.element.getSize(); var values = {'x': x, 'y': y}; for (var z in el.size){ var max = el.scrollSize[z] - el.size[z]; if ($chk(values[z])) values[z] = ($type(values[z]) == 'number') ? values[z].limit(0, max) : max; else values[z] = el.scroll[z]; values[z] += this.options.offset[z]; } return this.start([el.scroll.x, el.scroll.y], [values.x, values.y]); }, toTop: function(){ return this.scrollTo(false, 0); }, toBottom: function(){ return this.scrollTo(false, 'full'); }, toLeft: function(){ return this.scrollTo(0, false); }, toRight: function(){ return this.scrollTo('full', false); }, toElement: function(el){ var parent = this.element.getPosition(this.options.overflown); var target = $(el).getPosition(this.options.overflown); return this.scrollTo(target.x - parent.x, target.y - parent.y); }, increase: function(){ this.element.scrollTo(this.now[0], this.now[1]); } }); Fx.Slide = Fx.Base.extend({ options: { mode: 'vertical' }, initialize: function(el, options){ this.element = $(el); this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden'})}).injectAfter(this.element).adopt(this.element); this.element.setStyle('margin', 0); this.setOptions(options); this.now = []; this.parent(this.options); this.open = true; this.addEvent('onComplete', function(){ this.open = (this.now[0] === 0); }); if (window.webkit419) this.addEvent('onComplete', function(){ if (this.open) this.element.remove().inject(this.wrapper); }); }, setNow: function(){ for (var i = 0; i < 2; i++) this.now = this.compute(this.from, this.to); }, vertical: function(){ this.margin = 'margin-top'; this.layout = 'height'; this.offset = this.element.offsetHeight; }, horizontal: function(){ this.margin = 'margin-left'; this.layout = 'width'; this.offset = this.element.offsetWidth; }, slideIn: function(mode){ this[mode || this.options.mode](); return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [0, this.offset]); }, slideOut: function(mode){ this[mode || this.options.mode](); return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [-this.offset, 0]); }, hide: function(mode){ this[mode || this.options.mode](); this.open = false; return this.set([-this.offset, 0]); }, show: function(mode){ this[mode || this.options.mode](); this.open = true; return this.set([0, this.offset]); }, toggle: function(mode){ if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) return this.slideIn(mode); return this.slideOut(mode); }, increase: function(){ this.element.setStyle(this.margin, this.now[0] + this.options.unit); this.wrapper.setStyle(this.layout, this.now[1] + this.options.unit); } }); Fx.Transition = function(transition, params){ params = params || []; if ($type(params) != 'array') params = [params]; return $extend(transition, { easeIn: function(pos){ return transition(pos, params); }, easeOut: function(pos){ return 1 - transition(1 - pos, params); }, easeInOut: function(pos){ return (pos <= 0.5) ? transition(2 * pos, params) / 2 : (2 - transition(2 * (1 - pos), params)) / 2; } }); }; Fx.Transitions = new Abstract({ linear: function(p){ return p; } }); Fx.Transitions.extend = function(transitions){ for (var transition in transitions){ Fx.Transitions[transition] = new Fx.Transition(transitions[transition]); Fx.Transitions.compat(transition); } }; Fx.Transitions.compat = function(transition){ ['In', 'Out', 'InOut'].each(function(easeType){ Fx.Transitions[transition.toLowerCase() + easeType] = Fx.Transitions[transition]['ease' + easeType]; }); }; Fx.Transitions.extend({ Pow: function(p, x){ return Math.pow(p, x[0] || 6); }, Expo: function(p){ return Math.pow(2, 8 * (p - 1)); }, Circ: function(p){ return 1 - Math.sin(Math.acos(p)); }, Sine: function(p){ return 1 - Math.sin((1 - p) * Math.PI / 2); }, Back: function(p, x){ x = x[0] || 1.618; return Math.pow(p, 2) * ((x + 1) * p - x); }, Bounce: function(p){ var value; for (var a = 0, b = 1; 1; a += b, b /= 2){ if (p >= (7 - 4 * a) / 11){ value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b; break; } } return value; }, Elastic: function(p, x){ return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3); } }); ['Quad', 'Cubic', 'Quart', 'Quint'].each(function(transition, i){ Fx.Transitions[transition] = new Fx.Transition(function(p){ return Math.pow(p, [i + 2]); }); Fx.Transitions.compat(transition); }); var Drag = {}; Drag.Base = new Class({ options: { handle: false, unit: 'px', onStart: Class.empty, onBeforeStart: Class.empty, onComplete: Class.empty, onSnap: Class.empty, onDrag: Class.empty, limit: false, modifiers: {x: 'left', y: 'top'}, grid: false, snap: 6 }, initialize: function(el, options){ this.setOptions(options); this.element = $(el); this.handle = $(this.options.handle) || this.element; this.mouse = {'now': {}, 'pos': {}}; this.value = {'start': {}, 'now': {}}; this.bound = { 'start': this.start.bindWithEvent(this), 'check': this.check.bindWithEvent(this), 'drag': this.drag.bindWithEvent(this), 'stop': this.stop.bind(this) }; this.attach(); if (this.options.initialize) this.options.initialize.call(this); }, attach: function(){ this.handle.addEvent('mousedown', this.bound.start); return this; }, detach: function(){ this.handle.removeEvent('mousedown', this.bound.start); return this; }, start: function(event){ this.fireEvent('onBeforeStart', this.element); this.mouse.start = event.page; var limit = this.options.limit; this.limit = {'x': [], 'y': []}; for (var z in this.options.modifiers){ if (!this.options.modifiers[z]) continue; this.value.now[z] = this.element.getStyle(this.options.modifiers[z]).toInt(); this.mouse.pos[z] = event.page[z] - this.value.now[z]; if (limit && limit[z]){ for (var i = 0; i < 2; i++){ if ($chk(limit[z])) this.limit[z] = ($type(limit[z]) == 'function') ? limit[z]() : limit[z]; } } } if ($type(this.options.grid) == 'number') this.options.grid = {'x': this.options.grid, 'y': this.options.grid}; document.addListener('mousemove', this.bound.check); document.addListener('mouseup', this.bound.stop); this.fireEvent('onStart', this.element); event.stop(); }, check: function(event){ var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2))); if (distance > this.options.snap){ document.removeListener('mousemove', this.bound.check); document.addListener('mousemove', this.bound.drag); this.drag(event); this.fireEvent('onSnap', this.element); } event.stop(); }, drag: function(event){ this.out = false; this.mouse.now = event.page; for (var z in this.options.modifiers){ if (!this.options.modifiers[z]) continue; this.value.now[z] = this.mouse.now[z] - this.mouse.pos[z]; if (this.limit[z]){ if ($chk(this.limit[z][1]) && (this.value.now[z] > this.limit[z][1])){ this.value.now[z] = this.limit[z][1]; this.out = true; } else if ($chk(this.limit[z][0]) && (this.value.now[z] < this.limit[z][0])){ this.value.now[z] = this.limit[z][0]; this.out = true; } } if (this.options.grid[z]) this.value.now[z] -= (this.value.now[z] % this.options.grid[z]); this.element.setStyle(this.options.modifiers[z], this.value.now[z] + this.options.unit); } this.fireEvent('onDrag', this.element); event.stop(); }, stop: function(){ document.removeListener('mousemove', this.bound.check); document.removeListener('mousemove', this.bound.drag); document.removeListener('mouseup', this.bound.stop); this.fireEvent('onComplete', this.element); } }); Drag.Base.implement(new Events, new Options); Element.extend({ makeResizable: function(options){ return new Drag.Base(this, $merge({modifiers: {x: 'width', y: 'height'}}, options)); } }); Drag.Move = Drag.Base.extend({ options: { droppables: [], container: false, overflown: [] }, initialize: function(el, options){ this.setOptions(options); this.element = $(el); this.droppables = $$(this.options.droppables); this.container = $(this.options.container); this.position = {'element': this.element.getStyle('position'), 'container': false}; if (this.container) this.position.container = this.container.getStyle('position'); if (!['relative', 'absolute', 'fixed'].contains(this.position.element)) this.position.element = 'absolute'; var top = this.element.getStyle('top').toInt(); var left = this.element.getStyle('left').toInt(); if (this.position.element == 'absolute' && !['relative', 'absolute', 'fixed'].contains(this.position.container)){ top = $chk(top) ? top : this.element.getTop(this.options.overflown); left = $chk(left) ? left : this.element.getLeft(this.options.overflown); } else { top = $chk(top) ? top : 0; left = $chk(left) ? left : 0; } this.element.setStyles({'top': top, 'left': left, 'position': this.position.element}); this.parent(this.element); }, start: function(event){ this.overed = null; if (this.container){ var cont = this.container.getCoordinates(); var el = this.element.getCoordinates(); if (this.position.element == 'absolute' && !['relative', 'absolute', 'fixed'].contains(this.position.container)){ this.options.limit = { 'x': [cont.left, cont.right - el.width], 'y': [cont.top, cont.bottom - el.height] }; } else { this.options.limit = { 'y': [0, cont.height - el.height], 'x': [0, cont.width - el.width] }; } } this.parent(event); }, drag: function(event){ this.parent(event); var overed = this.out ? false : this.droppables.filter(this.checkAgainst, this).getLast(); if (this.overed != overed){ if (this.overed) this.overed.fireEvent('leave', [this.element, this]); this.overed = overed ? overed.fireEvent('over', [this.element, this]) : null; } return this; }, checkAgainst: function(el){ el = el.getCoordinates(this.options.overflown); var now = this.mouse.now; return (now.x > el.left && now.x < el.right && now.y < el.bottom && now.y > el.top); }, stop: function(){ if (this.overed && !this.out) this.overed.fireEvent('drop', [this.element, this]); else this.element.fireEvent('emptydrop', this); this.parent(); return this; } }); Element.extend({ makeDraggable: function(options){ return new Drag.Move(this, options); } }); var XHR = new Class({ options: { method: 'post', async: true, onRequest: Class.empty, onSuccess: Class.empty, onFailure: Class.empty, urlEncoded: true, encoding: 'utf-8', autoCancel: false, headers: {} }, setTransport: function(){ this.transport = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ie ? new ActiveXObject('Microsoft.XMLHTTP') : false); return this; }, initialize: function(options){ this.setTransport().setOptions(options); this.options.isSuccess = this.options.isSuccess || this.isSuccess; this.headers = {}; if (this.options.urlEncoded && this.options.method == 'post'){ var encoding = (this.options.encoding) ? '; charset=' + this.options.encoding : ''; this.setHeader('Content-type', 'application/x-www-form-urlencoded' + encoding); } if (this.options.initialize) this.options.initialize.call(this); }, onStateChange: function(){ if (this.transport.readyState != 4 || !this.running) return; this.running = false; var status = 0; try {status = this.transport.status;} catch(e){}; if (this.options.isSuccess.call(this, status)) this.onSuccess(); else this.onFailure(); this.transport.onreadystatechange = Class.empty; }, isSuccess: function(status){ return ((status >= 200) && (status < 300)); }, onSuccess: function(){ this.response = { 'text': this.transport.responseText, 'xml': this.transport.responseXML }; this.fireEvent('onSuccess', [this.response.text, this.response.xml]); this.callChain(); }, onFailure: function(){ this.fireEvent('onFailure', this.transport); }, setHeader: function(name, value){ this.headers[name] = value; return this; }, send: function(url, data){ if (this.options.autoCancel) this.cancel(); else if (this.running) return this; this.running = true; if (data && this.options.method == 'get'){ url = url + (url.contains('?') ? '&' : '?') + data; data = null; } this.transport.open(this.options.method.toUpperCase(), url, this.options.async); this.transport.onreadystatechange = this.onStateChange.bind(this); if ((this.options.method == 'post') && this.transport.overrideMimeType) this.setHeader('Connection', 'close'); $extend(this.headers, this.options.headers); for (var type in this.headers) try {this.transport.setRequestHeader(type, this.headers[type]);} catch(e){}; this.fireEvent('onRequest'); this.transport.send($pick(data, null)); return this; }, cancel: function(){ if (!this.running) return this; this.running = false; this.transport.abort(); this.transport.onreadystatechange = Class.empty; this.setTransport(); this.fireEvent('onCancel'); return this; } });