lib/unittest.js tasks/javascripttest.rb test/test.css test/unit/partial_test.html @@ -1 +1,17 @@ Dir["tasks/*.rake"].each { |ext| load ext } +require 'tasks/javascripttest' +desc "Runs all the JavaScript unit tests and collects the results" +JavaScriptTestTask.new(:unittest) do |t| + t.mount("/lib") + t.mount("/src") + t.mount("/test") + + Dir["test/**/*.html"].each do |file| + t.run("/#{file}") + end + + t.browser(:safari) + t.browser(:firefox) + t.browser(:ie) + t.browser(:konqueror) +end Rakefile @@ -1,6 +1,7 @@ // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // -// See scriptaculous.js for full license. +// script.aculo.us is freely distributable under the terms of an MIT-style license. +// For details, see the script.aculo.us web site: http://script.aculo.us/ var Builder = { NODEMAP: { @@ -75,10 +76,16 @@ var Builder = { _text: function(text) { return document.createTextNode(text); }, + + ATTR_MAP: { + 'className': 'class', + 'htmlFor': 'for' + }, + _attributes: function(attributes) { var attrs = []; for(attribute in attributes) - attrs.push((attribute=='className' ? 'class' : attribute) + + attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) + '="' + attributes[attribute].toString().escapeHTML() + '"'); return attrs.join(" "); }, @@ -97,5 +104,26 @@ var Builder = { }, _isStringOrNumber: function(param) { return(typeof param=='string' || typeof param=='number'); + }, + build: function(html) { + var element = this.node('div'); + $(element).update(html.strip()); + return element.down(); + }, + dump: function(scope) { + if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope + + var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " + + "BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " + + "FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+ + "KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+ + "PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+ + "TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/); + + tags.each( function(tag){ + scope[tag] = function() { + return Builder.node.apply(Builder, [tag].concat($A(arguments))); + } + }); } -} \ No newline at end of file +} lib/builder.js @@ -6,7 +6,8 @@ // Rahul Bhargava // Rob Wills // -// See scriptaculous.js for full license. +// script.aculo.us is freely distributable under the terms of an MIT-style license. +// For details, see the script.aculo.us web site: http://script.aculo.us/ // Autocompleter.Base handles all the autocompletion functionality // that's independent of the data source for autocompletion. This @@ -48,7 +49,7 @@ Autocompleter.Base.prototype = { this.index = 0; this.entryCount = 0; - if (this.setOptions) + if(this.setOptions) this.setOptions(options); else this.options = options || {}; @@ -58,17 +59,20 @@ Autocompleter.Base.prototype = { this.options.frequency = this.options.frequency || 0.4; this.options.minChars = this.options.minChars || 1; this.options.onShow = this.options.onShow || - function(element, update){ - if(!update.style.position || update.style.position=='absolute') { - update.style.position = 'absolute'; - Position.clone(element, update, {setHeight: false, offsetTop: element.offsetHeight}); - } - Effect.Appear(update,{duration:0.15}); - }; + function(element, update){ + if(!update.style.position || update.style.position=='absolute') { + update.style.position = 'absolute'; + Position.clone(element, update, { + setHeight: false, + offsetTop: element.offsetHeight + }); + } + Effect.Appear(update,{duration:0.15}); + }; this.options.onHide = this.options.onHide || - function(element, update){ new Effect.Fade(update,{duration:0.15}) }; + function(element, update){ new Effect.Fade(update,{duration:0.15}) }; - if (typeof(this.options.tokens) == 'string') + if(typeof(this.options.tokens) == 'string') this.options.tokens = new Array(this.options.tokens); this.observer = null; @@ -259,11 +263,11 @@ Autocompleter.Base.prototype = { if(!this.changed && this.hasFocus) { this.update.innerHTML = choices; Element.cleanWhitespace(this.update); - Element.cleanWhitespace(this.update.firstChild); + Element.cleanWhitespace(this.update.down()); - if(this.update.firstChild && this.update.firstChild.childNodes) { + if(this.update.firstChild && this.update.down().childNodes) { this.entryCount = - this.update.firstChild.childNodes.length; + this.update.down().childNodes.length; for (var i = 0; i < this.entryCount; i++) { var entry = this.getEntry(i); entry.autocompleteIndex = i; @@ -274,9 +278,14 @@ Autocompleter.Base.prototype = { } this.stopIndicator(); - this.index = 0; - this.render(); + + if(this.entryCount==1 && this.options.autoSelect) { + this.selectEntry(); + this.hide(); + } else { + this.render(); + } } }, @@ -778,6 +787,8 @@ Object.extend(Ajax.InPlaceCollectionEditor.prototype, { collection.each(function(e,i) { optionTag = document.createElement("option"); optionTag.value = (e instanceof Array) ? e[0] : e; + if((typeof this.options.value == 'undefined') && + ((e instanceof Array) ? this.element.innerHTML == e[1] : e == optionTag.value)) optionTag.selected = true; if(this.options.value==optionTag.value) optionTag.selected = true; optionTag.appendChild(document.createTextNode((e instanceof Array) ? e[1] : e)); selectTag.appendChild(optionTag); lib/controls.js @@ -1,9 +1,8 @@ // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // (c) 2005 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz) // -// See scriptaculous.js for full license. - -/*--------------------------------------------------------------------------*/ +// script.aculo.us is freely distributable under the terms of an MIT-style license. +// For details, see the script.aculo.us web site: http://script.aculo.us/ if(typeof Effect == 'undefined') throw("dragdrop.js requires including script.aculo.us' effects.js library"); @@ -148,8 +147,16 @@ var Draggables = { }, activate: function(draggable) { - window.focus(); // allows keypress events if window isn't currently focused, fails for Safari - this.activeDraggable = draggable; + if(draggable.options.delay) { + this._timeout = setTimeout(function() { + Draggables._timeout = null; + window.focus(); + Draggables.activeDraggable = draggable; + }.bind(this), draggable.options.delay); + } else { + window.focus(); // allows keypress events if window isn't currently focused, fails for Safari + this.activeDraggable = draggable; + } }, deactivate: function() { @@ -163,10 +170,15 @@ var Draggables = { // the same coordinates, prevent needless redrawing (moz bug?) if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return; this._lastPointer = pointer; + this.activeDraggable.updateDrag(event, pointer); }, endDrag: function(event) { + if(this._timeout) { + clearTimeout(this._timeout); + this._timeout = null; + } if(!this.activeDraggable) return; this._lastPointer = null; this.activeDraggable.endDrag(event); @@ -193,6 +205,7 @@ var Draggables = { this.observers.each( function(o) { if(o[eventName]) o[eventName](eventName, draggable, event); }); + if(draggable.options[eventName]) draggable.options[eventName](draggable, event); }, _cacheObserverCallbacks: function() { @@ -207,30 +220,25 @@ var Draggables = { /*--------------------------------------------------------------------------*/ var Draggable = Class.create(); -Draggable._revertCache = {}; Draggable._dragging = {}; Draggable.prototype = { initialize: function(element) { - var options = Object.extend({ + var defaults = { handle: false, - starteffect: function(element) { - element._opacity = Element.getOpacity(element); - Draggable._dragging[element] = true; - new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); - }, reverteffect: function(element, top_offset, left_offset) { var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02; - Draggable._revertCache[element] = - new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, - queue: {scope:'_draggable', position:'end'} - }); + new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, + queue: {scope:'_draggable', position:'end'} + }); }, endeffect: function(element) { var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0; new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, queue: {scope:'_draggable', position:'end'}, - afterFinish: function(){ Draggable._dragging[element] = false } + afterFinish: function(){ + Draggable._dragging[element] = false + } }); }, zindex: 1000, @@ -238,20 +246,33 @@ Draggable.prototype = { scroll: false, scrollSensitivity: 20, scrollSpeed: 15, - snap: false // false, or xy or [x,y] or function(x,y){ return [x,y] } - }, arguments[1] || {}); + snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] } + delay: 0 + }; + + if(!arguments[1] || typeof arguments[1].endeffect == 'undefined') + Object.extend(defaults, { + starteffect: function(element) { + element._opacity = Element.getOpacity(element); + Draggable._dragging[element] = true; + new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7}); + } + }); + + var options = Object.extend(defaults, arguments[1] || {}); this.element = $(element); - if(options.handle && (typeof options.handle == 'string')) { - var h = Element.childrenWithClassName(this.element, options.handle, true); - if(h.length>0) this.handle = h[0]; - } + if(options.handle && (typeof options.handle == 'string')) + this.handle = this.element.down('.'+options.handle, 0); + if(!this.handle) this.handle = $(options.handle); if(!this.handle) this.handle = this.element; - if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) + if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) { options.scroll = $(options.scroll); + this._isScrollChild = Element.childOf(this.element, options.scroll); + } Element.makePositioned(this.element); // fix IE @@ -277,7 +298,7 @@ Draggable.prototype = { }, initDrag: function(event) { - if(typeof Draggable._dragging[this.element] != undefined && + if(typeof Draggable._dragging[this.element] != 'undefined' && Draggable._dragging[this.element]) return; if(Event.isLeftClick(event)) { // abort on form elements, fixes a Firefox issue @@ -289,11 +310,6 @@ Draggable.prototype = { src.tagName=='BUTTON' || src.tagName=='TEXTAREA')) return; - if(Draggable._revertCache[this.element]) { - Draggable._revertCache[this.element].cancel(); - Draggable._revertCache[this.element] = null; - } - var pointer = [Event.pointerX(event), Event.pointerY(event)]; var pos = Position.cumulativeOffset(this.element); this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) }); @@ -329,6 +345,7 @@ Draggable.prototype = { } Draggables.notify('onStart', this, event); + if(this.options.starteffect) this.options.starteffect(this.element); }, @@ -337,6 +354,7 @@ Draggable.prototype = { Position.prepare(); Droppables.show(pointer, this.element); Draggables.notify('onDrag', this, event); + this.draw(pointer); if(this.options.change) this.options.change(this); @@ -348,8 +366,8 @@ Draggable.prototype = { with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; } } else { p = Position.page(this.options.scroll); - p[0] += this.options.scroll.scrollLeft; - p[1] += this.options.scroll.scrollTop; + p[0] += this.options.scroll.scrollLeft + Position.deltaX; + p[1] += this.options.scroll.scrollTop + Position.deltaY; p.push(p[0]+this.options.scroll.offsetWidth); p.push(p[1]+this.options.scroll.offsetHeight); } @@ -395,7 +413,7 @@ Draggable.prototype = { if(this.options.endeffect) this.options.endeffect(this.element); - + Draggables.deactivate(this); Droppables.reset(); }, @@ -415,10 +433,15 @@ Draggable.prototype = { draw: function(point) { var pos = Position.cumulativeOffset(this.element); + if(this.options.ghosting) { + var r = Position.realOffset(this.element); + pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY; + } + var d = this.currentDelta(); pos[0] -= d[0]; pos[1] -= d[1]; - if(this.options.scroll && (this.options.scroll != window)) { + if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) { pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft; pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop; } @@ -445,6 +468,7 @@ Draggable.prototype = { style.left = p[0] + "px"; if((!this.options.constraint) || (this.options.constraint=='vertical')) style.top = p[1] + "px"; + if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering }, @@ -482,14 +506,16 @@ Draggable.prototype = { Position.prepare(); Droppables.show(Draggables._lastPointer, this.element); Draggables.notify('onDrag', this); - Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer); - Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000; - Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000; - if (Draggables._lastScrollPointer[0] < 0) - Draggables._lastScrollPointer[0] = 0; - if (Draggables._lastScrollPointer[1] < 0) - Draggables._lastScrollPointer[1] = 0; - this.draw(Draggables._lastScrollPointer); + if (this._isScrollChild) { + Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer); + Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000; + Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000; + if (Draggables._lastScrollPointer[0] < 0) + Draggables._lastScrollPointer[0] = 0; + if (Draggables._lastScrollPointer[1] < 0) + Draggables._lastScrollPointer[1] = 0; + this.draw(Draggables._lastScrollPointer); + } if(this.options.change) this.options.change(this); }, @@ -541,6 +567,8 @@ SortableObserver.prototype = { } var Sortable = { + SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/, + sortables: {}, _findRootElement: function(element) { @@ -581,12 +609,13 @@ var Sortable = { containment: element, // also takes array of elements (or id's); or false handle: false, // or a CSS class only: false, + delay: 0, hoverclass: null, ghosting: false, scroll: false, scrollSensitivity: 20, scrollSpeed: 15, - format: /^[^_]*_(.*)$/, + format: this.SERIALIZE_RULE, onChange: Prototype.emptyFunction, onUpdate: Prototype.emptyFunction }, arguments[1] || {}); @@ -600,6 +629,7 @@ var Sortable = { scroll: options.scroll, scrollSpeed: options.scrollSpeed, scrollSensitivity: options.scrollSensitivity, + delay: options.delay, ghosting: options.ghosting, constraint: options.constraint, handle: options.handle }; @@ -628,7 +658,6 @@ var Sortable = { tree: options.tree, hoverclass: options.hoverclass, onHover: Sortable.onHover - //greedy: !options.dropOnEmpty } var options_for_tree = { @@ -653,7 +682,7 @@ var Sortable = { (this.findElements(element, options) || []).each( function(e) { // handles are per-draggable var handle = options.handle ? - Element.childrenWithClassName(e, options.handle)[0] : e; + $(e).down('.'+options.handle,0) : e; options.draggables.push( new Draggable(e, Object.extend(options_for_draggable, { handle: handle }))); Droppables.add(e, options_for_droppable); @@ -751,7 +780,7 @@ var Sortable = { }, unmark: function() { - if(Sortable._marker) Element.hide(Sortable._marker); + if(Sortable._marker) Sortable._marker.hide(); }, mark: function(dropon, position) { @@ -760,23 +789,21 @@ var Sortable = { if(sortable && !sortable.ghosting) return; if(!Sortable._marker) { - Sortable._marker = $('dropmarker') || document.createElement('DIV'); - Element.hide(Sortable._marker); - Element.addClassName(Sortable._marker, 'dropmarker'); - Sortable._marker.style.position = 'absolute'; + Sortable._marker = + ($('dropmarker') || Element.extend(document.createElement('DIV'))). + hide().addClassName('dropmarker').setStyle({position:'absolute'}); document.getElementsByTagName("body").item(0).appendChild(Sortable._marker); } var offsets = Position.cumulativeOffset(dropon); - Sortable._marker.style.left = offsets[0] + 'px'; - Sortable._marker.style.top = offsets[1] + 'px'; + Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'}); if(position=='after') if(sortable.overlap == 'horizontal') - Sortable._marker.style.left = (offsets[0]+dropon.clientWidth) + 'px'; + Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'}); else - Sortable._marker.style.top = (offsets[1]+dropon.clientHeight) + 'px'; + Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'}); - Element.show(Sortable._marker); + Sortable._marker.show(); }, _tree: function(element, options, parent) { @@ -791,9 +818,9 @@ var Sortable = { id: encodeURIComponent(match ? match[1] : null), element: element, parent: parent, - children: new Array, + children: [], position: parent.children.length, - container: Sortable._findChildrenElement(children[i], options.treeTag.toUpperCase()) + container: $(children[i]).down(options.treeTag) } /* Get the element containing the children and recurse over it */ @@ -806,17 +833,6 @@ var Sortable = { return parent; }, - /* Finds the first element of the given tag type within a parent element. - Used for finding the first LI[ST] within a L[IST]I[TEM].*/ - _findChildrenElement: function (element, containerTag) { - if (element && element.hasChildNodes) - for (var i = 0; i < element.childNodes.length; ++i) - if (element.childNodes[i].tagName == containerTag) - return element.childNodes[i]; - - return null; - }, - tree: function(element) { element = $(element); var sortableOptions = this.options(element); @@ -831,12 +847,12 @@ var Sortable = { var root = { id: null, parent: null, - children: new Array, + children: [], container: element, position: 0 } - return Sortable._tree (element, options, root); + return Sortable._tree(element, options, root); }, /* Construct a [i] index for a particular node */ @@ -896,12 +912,10 @@ var Sortable = { } } -/* Returns true if child is contained within element */ +// Returns true if child is contained within element Element.isParent = function(child, element) { if (!child.parentNode || child == element) return false; - if (child.parentNode == element) return true; - return Element.isParent(child.parentNode, element); } @@ -924,8 +938,5 @@ Element.findChildren = function(element, only, recursive, tagName) { } Element.offsetSize = function (element, type) { - if (type == 'vertical' || type == 'height') - return element.offsetHeight; - else - return element.offsetWidth; -} \ No newline at end of file + return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')]; +} lib/dragdrop.js @@ -4,7 +4,8 @@ // Mark Pilgrim (http://diveintomark.org/) // Martin Bialasinki // -// See scriptaculous.js for full license. +// script.aculo.us is freely distributable under the terms of an MIT-style license. +// For details, see the script.aculo.us web site: http://script.aculo.us/ // converts rgb() and #xxx to #xxxxxx format, // returns self (or first argument) if not convertable @@ -41,15 +42,17 @@ Element.collectTextNodesIgnoreClass = function(element, className) { Element.setContentZoom = function(element, percent) { element = $(element); - Element.setStyle(element, {fontSize: (percent/100) + 'em'}); + element.setStyle({fontSize: (percent/100) + 'em'}); if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0); + return element; } -Element.getOpacity = function(element){ +Element.getOpacity = function(element){ + element = $(element); var opacity; - if (opacity = Element.getStyle(element, 'opacity')) + if (opacity = element.getStyle('opacity')) return parseFloat(opacity); - if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/)) + if (opacity = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) if(opacity[1]) return parseFloat(opacity[1]) / 100; return 1.0; } @@ -57,34 +60,26 @@ Element.getOpacity = function(element){ Element.setOpacity = function(element, value){ element= $(element); if (value == 1){ - Element.setStyle(element, { opacity: + element.setStyle({ opacity: (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? - 0.999999 : null }); - if(/MSIE/.test(navigator.userAgent)) - Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); + 0.999999 : 1.0 }); + if(/MSIE/.test(navigator.userAgent) && !window.opera) + element.setStyle({filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')}); } else { if(value < 0.00001) value = 0; - Element.setStyle(element, {opacity: value}); - if(/MSIE/.test(navigator.userAgent)) - Element.setStyle(element, - { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') + - 'alpha(opacity='+value*100+')' }); + element.setStyle({opacity: value}); + if(/MSIE/.test(navigator.userAgent) && !window.opera) + element.setStyle( + { filter: element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') + + 'alpha(opacity='+value*100+')' }); } + return element; } Element.getInlineOpacity = function(element){ return $(element).style.opacity || ''; } -Element.childrenWithClassName = function(element, className, findFirst) { - var classNameRegExp = new RegExp("(^|\\s)" + className + "(\\s|$)"); - var results = $A($(element).getElementsByTagName('*'))[findFirst ? 'detect' : 'select']( function(c) { - return (c.className && c.className.match(classNameRegExp)); - }); - if(!results) results = []; - return results; -} - Element.forceRerendering = function(element) { try { element = $(element); @@ -104,12 +99,17 @@ Array.prototype.call = function() { /*--------------------------------------------------------------------------*/ var Effect = { + _elementDoesNotExistError: { + name: 'ElementDoesNotExistError', + message: 'The specified DOM element does not exist, but is required for this effect to operate' + }, tagifyText: function(element) { if(typeof Builder == 'undefined') throw("Effect.tagifyText requires including script.aculo.us' builder.js library"); var tagifyStyle = 'position:relative'; - if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1'; + if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1'; + element = $(element); $A(element.childNodes).each( function(child) { if(child.nodeType==3) { @@ -162,32 +162,35 @@ var Effect2 = Effect; // deprecated /* ------------- transitions ------------- */ -Effect.Transitions = {} - -Effect.Transitions.linear = Prototype.K; - -Effect.Transitions.sinoidal = function(pos) { - return (-Math.cos(pos*Math.PI)/2) + 0.5; -} -Effect.Transitions.reverse = function(pos) { - return 1-pos; -} -Effect.Transitions.flicker = function(pos) { - return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; -} -Effect.Transitions.wobble = function(pos) { - return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; -} -Effect.Transitions.pulse = function(pos) { - return (Math.floor(pos*10) % 2 == 0 ? - (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10))); -} -Effect.Transitions.none = function(pos) { - return 0; -} -Effect.Transitions.full = function(pos) { - return 1; -} +Effect.Transitions = { + linear: Prototype.K, + sinoidal: function(pos) { + return (-Math.cos(pos*Math.PI)/2) + 0.5; + }, + reverse: function(pos) { + return 1-pos; + }, + flicker: function(pos) { + return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; + }, + wobble: function(pos) { + return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; + }, + pulse: function(pos, pulses) { + pulses = pulses || 5; + return ( + Math.round((pos % (1/pulses)) * pulses) == 0 ? + ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) : + 1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) + ); + }, + none: function(pos) { + return 0; + }, + full: function(pos) { + return 1; + } +}; /* ------------- core effects ------------- */ @@ -214,6 +217,9 @@ Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { e.finishOn += effect.finishOn; }); break; + case 'with-last': + timestamp = this.effects.pluck('startOn').max() || timestamp; + break; case 'end': // start effect after last queued effect has finished timestamp = this.effects.pluck('finishOn').max() || timestamp; @@ -350,12 +356,24 @@ Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { } }); +Effect.Event = Class.create(); +Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), { + initialize: function() { + var options = Object.extend({ + duration: 0 + }, arguments[0] || {}); + this.start(options); + }, + update: Prototype.emptyFunction +}); + Effect.Opacity = Class.create(); Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); + if(!this.element) throw(Effect._elementDoesNotExistError); // make this work on IE on elements without 'layout' - if(/MSIE/.test(navigator.userAgent) && (!this.element.currentStyle.hasLayout)) + if(/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout)) this.element.setStyle({zoom: 1}); var options = Object.extend({ from: this.element.getOpacity() || 0.0, @@ -372,6 +390,7 @@ Effect.Move = Class.create(); Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); + if(!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ x: 0, y: 0, @@ -410,7 +429,8 @@ Effect.MoveBy = function(element, toTop, toLeft) { Effect.Scale = Class.create(); Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { initialize: function(element, percent) { - this.element = $(element) + this.element = $(element); + if(!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ scaleX: true, scaleY: true, @@ -460,7 +480,7 @@ Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale); }, finish: function(position) { - if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle); + if(this.restoreAfterFinish) this.element.setStyle(this.originalStyle); }, setDimensions: function(height, width) { var d = {}; @@ -485,6 +505,7 @@ Effect.Highlight = Class.create(); Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { initialize: function(element) { this.element = $(element); + if(!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); this.start(options); }, @@ -549,8 +570,7 @@ Effect.Fade = function(element) { to: 0.0, afterFinishInternal: function(effect) { if(effect.options.to!=0) return; - effect.element.hide(); - effect.element.setStyle({opacity: oldOpacity}); + effect.element.hide().setStyle({opacity: oldOpacity}); }}, arguments[1] || {}); return new Effect.Opacity(element,options); } @@ -565,25 +585,31 @@ Effect.Appear = function(element) { effect.element.forceRerendering(); }, beforeSetup: function(effect) { - effect.element.setOpacity(effect.options.from); - effect.element.show(); + effect.element.setOpacity(effect.options.from).show(); }}, arguments[1] || {}); return new Effect.Opacity(element,options); } Effect.Puff = function(element) { element = $(element); - var oldStyle = { opacity: element.getInlineOpacity(), position: element.getStyle('position') }; + var oldStyle = { + opacity: element.getInlineOpacity(), + position: element.getStyle('position'), + top: element.style.top, + left: element.style.left, + width: element.style.width, + height: element.style.height + }; return new Effect.Parallel( [ new Effect.Scale(element, 200, { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], Object.extend({ duration: 1.0, beforeSetupInternal: function(effect) { - effect.effects[0].element.setStyle({position: 'absolute'}); }, + Position.absolutize(effect.effects[0].element) + }, afterFinishInternal: function(effect) { - effect.effects[0].element.hide(); - effect.effects[0].element.setStyle(oldStyle); } + effect.effects[0].element.hide().setStyle(oldStyle); } }, arguments[1] || {}) ); } @@ -596,8 +622,7 @@ Effect.BlindUp = function(element) { scaleX: false, restoreAfterFinish: true, afterFinishInternal: function(effect) { - effect.element.hide(); - effect.element.undoClipping(); + effect.element.hide().undoClipping(); } }, arguments[1] || {}) ); @@ -613,9 +638,7 @@ Effect.BlindDown = function(element) { scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, afterSetup: function(effect) { - effect.element.makeClipping(); - effect.element.setStyle({height: '0px'}); - effect.element.show(); + effect.element.makeClipping().setStyle({height: '0px'}).show(); }, afterFinishInternal: function(effect) { effect.element.undoClipping(); @@ -635,14 +658,10 @@ Effect.SwitchOff = function(element) { duration: 0.3, scaleFromCenter: true, scaleX: false, scaleContent: false, restoreAfterFinish: true, beforeSetup: function(effect) { - effect.element.makePositioned(); - effect.element.makeClipping(); + effect.element.makePositioned().makeClipping(); }, afterFinishInternal: function(effect) { - effect.element.hide(); - effect.element.undoClipping(); - effect.element.undoPositioned(); - effect.element.setStyle({opacity: oldOpacity}); + effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity}); } }) } @@ -664,9 +683,7 @@ Effect.DropOut = function(element) { effect.effects[0].element.makePositioned(); }, afterFinishInternal: function(effect) { - effect.effects[0].element.hide(); - effect.effects[0].element.undoPositioned(); - effect.effects[0].element.setStyle(oldStyle); + effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle); } }, arguments[1] || {})); } @@ -688,16 +705,14 @@ Effect.Shake = function(element) { { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { new Effect.Move(effect.element, { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { - effect.element.undoPositioned(); - effect.element.setStyle(oldStyle); + effect.element.undoPositioned().setStyle(oldStyle); }}) }}) }}) }}) }}) }}); } Effect.SlideDown = function(element) { - element = $(element); - element.cleanWhitespace(); + element = $(element).cleanWhitespace(); // SlideDown need to have the content of the element wrapped in a container element with fixed height! - var oldInnerBottom = $(element.firstChild).getStyle('bottom'); + var oldInnerBottom = element.down().getStyle('bottom'); var elementDimensions = element.getDimensions(); return new Effect.Scale(element, 100, Object.extend({ scaleContent: false, @@ -707,34 +722,24 @@ Effect.SlideDown = function(element) { restoreAfterFinish: true, afterSetup: function(effect) { effect.element.makePositioned(); - effect.element.firstChild.makePositioned(); + effect.element.down().makePositioned(); if(window.opera) effect.element.setStyle({top: ''}); - effect.element.makeClipping(); - effect.element.setStyle({height: '0px'}); - effect.element.show(); }, + effect.element.makeClipping().setStyle({height: '0px'}).show(); + }, afterUpdateInternal: function(effect) { - effect.element.firstChild.setStyle({bottom: + effect.element.down().setStyle({bottom: (effect.dims[0] - effect.element.clientHeight) + 'px' }); }, afterFinishInternal: function(effect) { - effect.element.undoClipping(); - // IE will crash if child is undoPositioned first - if(/MSIE/.test(navigator.userAgent)){ - effect.element.undoPositioned(); - effect.element.firstChild.undoPositioned(); - }else{ - effect.element.firstChild.undoPositioned(); - effect.element.undoPositioned(); - } - effect.element.firstChild.setStyle({bottom: oldInnerBottom}); } + effect.element.undoClipping().undoPositioned(); + effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } }, arguments[1] || {}) ); } Effect.SlideUp = function(element) { - element = $(element); - element.cleanWhitespace(); - var oldInnerBottom = $(element.firstChild).getStyle('bottom'); + element = $(element).cleanWhitespace(); + var oldInnerBottom = element.down().getStyle('bottom'); return new Effect.Scale(element, window.opera ? 0 : 1, Object.extend({ scaleContent: false, scaleX: false, @@ -743,32 +748,32 @@ Effect.SlideUp = function(element) { restoreAfterFinish: true, beforeStartInternal: function(effect) { effect.element.makePositioned(); - effect.element.firstChild.makePositioned(); + effect.element.down().makePositioned(); if(window.opera) effect.element.setStyle({top: ''}); - effect.element.makeClipping(); - effect.element.show(); }, + effect.element.makeClipping().show(); + }, afterUpdateInternal: function(effect) { - effect.element.firstChild.setStyle({bottom: - (effect.dims[0] - effect.element.clientHeight) + 'px' }); }, + effect.element.down().setStyle({bottom: + (effect.dims[0] - effect.element.clientHeight) + 'px' }); + }, afterFinishInternal: function(effect) { - effect.element.hide(); - effect.element.undoClipping(); - effect.element.firstChild.undoPositioned(); - effect.element.undoPositioned(); - effect.element.setStyle({bottom: oldInnerBottom}); } + effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom}); + effect.element.down().undoPositioned(); + } }, arguments[1] || {}) ); } // Bug in opera makes the TD containing this element expand for a instance after finish Effect.Squish = function(element) { - return new Effect.Scale(element, window.opera ? 1 : 0, - { restoreAfterFinish: true, - beforeSetup: function(effect) { - effect.element.makeClipping(effect.element); }, - afterFinishInternal: function(effect) { - effect.element.hide(effect.element); - effect.element.undoClipping(effect.element); } + return new Effect.Scale(element, window.opera ? 1 : 0, { + restoreAfterFinish: true, + beforeSetup: function(effect) { + effect.element.makeClipping(); + }, + afterFinishInternal: function(effect) { + effect.element.hide().undoClipping(); + } }); } @@ -824,9 +829,7 @@ Effect.Grow = function(element) { y: initialMoveY, duration: 0.01, beforeSetup: function(effect) { - effect.element.hide(); - effect.element.makeClipping(); - effect.element.makePositioned(); + effect.element.hide().makeClipping().makePositioned(); }, afterFinishInternal: function(effect) { new Effect.Parallel( @@ -837,13 +840,10 @@ Effect.Grow = function(element) { sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true}) ], Object.extend({ beforeSetup: function(effect) { - effect.effects[0].element.setStyle({height: '0px'}); - effect.effects[0].element.show(); + effect.effects[0].element.setStyle({height: '0px'}).show(); }, afterFinishInternal: function(effect) { - effect.effects[0].element.undoClipping(); - effect.effects[0].element.undoPositioned(); - effect.effects[0].element.setStyle(oldStyle); + effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle); } }, options) ) @@ -897,13 +897,10 @@ Effect.Shrink = function(element) { new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }) ], Object.extend({ beforeStartInternal: function(effect) { - effect.effects[0].element.makePositioned(); - effect.effects[0].element.makeClipping(); }, + effect.effects[0].element.makePositioned().makeClipping(); + }, afterFinishInternal: function(effect) { - effect.effects[0].element.hide(); - effect.effects[0].element.undoClipping(); - effect.effects[0].element.undoPositioned(); - effect.effects[0].element.setStyle(oldStyle); } + effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); } }, options) ); } @@ -913,10 +910,10 @@ Effect.Pulsate = function(element) { var options = arguments[1] || {}; var oldOpacity = element.getInlineOpacity(); var transition = options.transition || Effect.Transitions.sinoidal; - var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) }; + var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos, options.pulses)) }; reverser.bind(transition); return new Effect.Opacity(element, - Object.extend(Object.extend({ duration: 3.0, from: 0, + Object.extend(Object.extend({ duration: 2.0, from: 0, afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); } }, options), {transition: reverser})); } @@ -928,7 +925,7 @@ Effect.Fold = function(element) { left: element.style.left, width: element.style.width, height: element.style.height }; - Element.makeClipping(element); + element.makeClipping(); return new Effect.Scale(element, 5, Object.extend({ scaleContent: false, scaleX: false, @@ -937,15 +934,13 @@ Effect.Fold = function(element) { scaleContent: false, scaleY: false, afterFinishInternal: function(effect) { - effect.element.hide(); - effect.element.undoClipping(); - effect.element.setStyle(oldStyle); + effect.element.hide().undoClipping().setStyle(oldStyle); } }); }}, arguments[1] || {})); }; ['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom', - 'collectTextNodes','collectTextNodesIgnoreClass','childrenWithClassName'].each( + 'collectTextNodes','collectTextNodesIgnoreClass'].each( function(f) { Element.Methods[f] = Element[f]; } ); lib/effects.js 34d37aeb4421e0c764e3059321fbf223951ee6ee schlueter schlueter@aa19dc56-961c-0410-9a23-801c11b689e8 http://github.com/schlueter/simpltryjs/commit/76a24357fe69cb235771a4a62344014de3b568ec 76a24357fe69cb235771a4a62344014de3b568ec 2006-10-31T20:00:56-08:00 2006-10-31T20:00:56-08:00 started writing js tests git-svn-id: http://svn.captureimportant.info/simpltryjs@77 aa19dc56-961c-0410-9a23-801c11b689e8 973ef97a22d9c21e25f0e6436d384effea58cf45 schlueter schlueter@aa19dc56-961c-0410-9a23-801c11b689e8