Author: SergeySmirnov Date: 2007-11-28 15:25:28 -0500 (Wed, 28 Nov 2007) New Revision: 4336 Modified: trunk/framework/impl/src/main/javascript/scriptaculous/builder.js trunk/framework/impl/src/main/javascript/scriptaculous/controls.js trunk/framework/impl/src/main/javascript/scriptaculous/dragdrop.js trunk/framework/impl/src/main/javascript/scriptaculous/effects.js trunk/framework/impl/src/main/javascript/scriptaculous/slider.js trunk/framework/impl/src/main/javascript/scriptaculous/sound.js trunk/framework/impl/src/main/javascript/scriptaculous/unittest.js Log: scriptaculous has been upgraded up to 1.8.0 Modified: trunk/framework/impl/src/main/javascript/scriptaculous/builder.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/builder.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/builder.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us builder.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us builder.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // Modified: trunk/framework/impl/src/main/javascript/scriptaculous/controls.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/controls.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/controls.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us controls.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us controls.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // (c) 2005-2007 Ivan Krstic (http://blogs.law.harvard.edu/ivan) @@ -39,9 +39,8 @@ if(typeof Effect == 'undefined') throw("controls.js requires including script.aculo.us' effects.js library"); -var Autocompleter = {} -Autocompleter.Base = function() {}; -Autocompleter.Base.prototype = { +var Autocompleter = { } +Autocompleter.Base = Class.create({ baseInitialize: function(element, update, options) { element = $(element) this.element = element; @@ -51,11 +50,12 @@ this.active = false; this.index = 0; this.entryCount = 0; + this.oldElementValue = this.element.value; if(this.setOptions) this.setOptions(options); else - this.options = options || {}; + this.options = options || { }; this.options.paramName = this.options.paramName || this.element.name; this.options.tokens = this.options.tokens || []; @@ -77,6 +77,9 @@ if(typeof(this.options.tokens) == 'string') this.options.tokens = new Array(this.options.tokens); + // Force carriage returns as token delimiters anyway + if (!this.options.tokens.include('\n')) + this.options.tokens.push('\n'); this.observer = null; @@ -86,12 +89,6 @@ Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this)); Event.observe(this.element, 'keypress', this.onKeyPress.bindAsEventListener(this)); - - // Turn autocomplete back on when the user leaves the page, so that the - // field's value will be remembered on Mozilla-based browsers. - Event.observe(window, 'beforeunload', function(){ - element.setAttribute('autocomplete', 'on'); - }); }, show: function() { @@ -245,21 +242,22 @@ } var value = ''; if (this.options.select) { - var nodes = document.getElementsByClassName(this.options.select, selectedElement) || []; + var nodes = $(selectedElement).select('.' + this.options.select) || []; if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select); } else value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal'); - var lastTokenPos = this.findLastToken(); - if (lastTokenPos != -1) { - var newValue = this.element.value.substr(0, lastTokenPos + 1); - var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/); + var bounds = this.getTokenBounds(); + if (bounds[0] != -1) { + var newValue = this.element.value.substr(0, bounds[0]); + var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/); if (whitespace) newValue += whitespace[0]; - this.element.value = newValue + value; + this.element.value = newValue + value + this.element.value.substr(bounds[1]); } else { this.element.value = value; } + this.oldElementValue = this.element.value; this.element.focus(); if (this.options.afterUpdateElement) @@ -303,38 +301,48 @@ onObserverEvent: function() { this.changed = false; + this.tokenBounds = null; if(this.getToken().length>=this.options.minChars) { this.getUpdatedChoices(); } else { this.active = false; this.hide(); } + this.oldElementValue = this.element.value; }, getToken: function() { - var tokenPos = this.findLastToken(); - if (tokenPos != -1) - var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,''); - else - var ret = this.element.value; - - return /\n/.test(ret) ? '' : ret; + var bounds = this.getTokenBounds(); + return this.element.value.substring(bounds[0], bounds[1]).strip(); }, - findLastToken: function() { - var lastTokenPos = -1; - - for (var i=0; i<this.options.tokens.length; i++) { - var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]); - if (thisTokenPos > lastTokenPos) - lastTokenPos = thisTokenPos; + getTokenBounds: function() { + if (null != this.tokenBounds) return this.tokenBounds; + var value = this.element.value; + if (value.strip().empty()) return [-1, 0]; + var diff = arguments.callee.getFirstDifferencePos(value, this.oldElementValue); + var offset = (diff == this.oldElementValue.length ? 1 : 0); + var prevTokenPos = -1, nextTokenPos = value.length; + var tp; + for (var index = 0, l = this.options.tokens.length; index < l; ++index) { + tp = value.lastIndexOf(this.options.tokens[index], diff + offset - 1); + if (tp > prevTokenPos) prevTokenPos = tp; + tp = value.indexOf(this.options.tokens[index], diff + offset); + if (-1 != tp && tp < nextTokenPos) nextTokenPos = tp; } - return lastTokenPos; + return (this.tokenBounds = [prevTokenPos + 1, nextTokenPos]); } -} +}); -Ajax.Autocompleter = Class.create(); -Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), { +Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) { + var boundary = Math.min(newS.length, oldS.length); + for (var index = 0; index < boundary; ++index) + if (newS[index] != oldS[index]) + return index; + return boundary; +}; + +Ajax.Autocompleter = Class.create(Autocompleter.Base, { initialize: function(element, update, url, options) { this.baseInitialize(element, update, options); this.options.asynchronous = true; @@ -361,7 +369,6 @@ onComplete: function(request) { this.updateChoices(request.responseText); } - }); // The local array autocompleter. Used when you'd prefer to @@ -399,8 +406,7 @@ // In that case, the other options above will not apply unless // you support them. -Autocompleter.Local = Class.create(); -Autocompleter.Local.prototype = Object.extend(new Autocompleter.Base(), { +Autocompleter.Local = Class.create(Autocompleter.Base, { initialize: function(element, update, array, options) { this.baseInitialize(element, update, options); this.options.array = array; @@ -456,13 +462,12 @@ ret = ret.concat(partial.slice(0, instance.options.choices - ret.length)) return "<ul>" + ret.join('') + "</ul>"; } - }, options || {}); + }, options || { }); } }); -// AJAX in-place editor -// -// see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor +// AJAX in-place editor and collection editor +// Full rewrite by Christophe Porteneuve <tdd(a)tddsworld.com&gt; (April 2007). // Use this if you notice weird scrolling problems on some browsers, // the DOM might be a bit confused when this gets called so do this @@ -473,387 +478,472 @@ }, 1); } -Ajax.InPlaceEditor = Class.create(); -Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99"; -Ajax.InPlaceEditor.prototype = { +Ajax.InPlaceEditor = Class.create({ initialize: function(element, url, options) { this.url = url; - this.element = $(element); - - this.options = Object.extend({ - paramName: "value", - okButton: true, - okLink: false, - okText: "ok", - cancelButton: false, - cancelLink: true, - cancelText: "cancel", - textBeforeControls: '', - textBetweenControls: '', - textAfterControls: '', - savingText: "Saving...", - clickToEditText: "Click to edit", - okText: "ok", - rows: 1, - onComplete: function(transport, element) { - new Effect.Highlight(element, {startcolor: this.options.highlightcolor}); - }, - onFailure: function(transport) { - alert("Error communicating with the server: " + transport.responseText.stripTags()); - }, - callback: function(form) { - return Form.serialize(form); - }, - handleLineBreaks: true, - loadingText: 'Loading...', - savingClassName: 'inplaceeditor-saving', - loadingClassName: 'inplaceeditor-loading', - formClassName: 'inplaceeditor-form', - highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor, - highlightendcolor: "#FFFFFF", - externalControl: null, - submitOnBlur: false, - ajaxOptions: {}, - evalScripts: false - }, options || {}); - - if(!this.options.formId && this.element.id) { - this.options.formId = this.element.id + "-inplaceeditor"; - if ($(this.options.formId)) { - // there's already a form with that name, don't specify an id - this.options.formId = null; - } + this.element = element = $(element); + this.prepareOptions(); + this._controls = { }; + arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!! + Object.extend(this.options, options || { }); + if (!this.options.formId && this.element.id) { + this.options.formId = this.element.id + '-inplaceeditor'; + if ($(this.options.formId)) + this.options.formId = ''; } - - if (this.options.externalControl) { + if (this.options.externalControl) this.options.externalControl = $(this.options.externalControl); - } - - this.originalBackground = Element.getStyle(this.element, 'background-color'); - if (!this.originalBackground) { - this.originalBackground = "transparent"; - } - + if (!this.options.externalControl) + this.options.externalControlOnly = false; + this._originalBackground = this.element.getStyle('background-color') || 'transparent'; this.element.title = this.options.clickToEditText; - - this.onclickListener = this.enterEditMode.bindAsEventListener(this); - this.mouseoverListener = this.enterHover.bindAsEventListener(this); - this.mouseoutListener = this.leaveHover.bindAsEventListener(this); - Event.observe(this.element, 'click', this.onclickListener); - Event.observe(this.element, 'mouseover', this.mouseoverListener); - Event.observe(this.element, 'mouseout', this.mouseoutListener); - if (this.options.externalControl) { - Event.observe(this.options.externalControl, 'click', this.onclickListener); - Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener); - Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener); - } + this._boundCancelHandler = this.handleFormCancellation.bind(this); + this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this); + this._boundFailureHandler = this.handleAJAXFailure.bind(this); + this._boundSubmitHandler = this.handleFormSubmission.bind(this); + this._boundWrapperHandler = this.wrapUp.bind(this); + this.registerListeners(); }, - enterEditMode: function(evt) { - if (this.saving) return; - if (this.editing) return; - this.editing = true; - this.onEnterEditMode(); - if (this.options.externalControl) { - Element.hide(this.options.externalControl); - } - Element.hide(this.element); - this.createForm(); - this.element.parentNode.insertBefore(this.form, this.element); - if (!this.options.loadTextURL) Field.scrollFreeActivate(this.editField); - // stop the event to avoid a page refresh in Safari - if (evt) { - Event.stop(evt); - } - return false; + checkForEscapeOrReturn: function(e) { + if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return; + if (Event.KEY_ESC == e.keyCode) + this.handleFormCancellation(e); + else if (Event.KEY_RETURN == e.keyCode) + this.handleFormSubmission(e); }, - createForm: function() { - this.form = document.createElement("form"); - this.form.id = this.options.formId; - Element.addClassName(this.form, this.options.formClassName) - this.form.onsubmit = this.onSubmit.bind(this); - - this.createEditField(); - - if (this.options.textarea) { - var br = document.createElement("br"); - this.form.appendChild(br); + createControl: function(mode, handler, extraClasses) { + var control = this.options[mode + 'Control']; + var text = this.options[mode + 'Text']; + if ('button' == control) { + var btn = document.createElement('input'); + btn.type = 'submit'; + btn.value = text; + btn.className = 'editor_' + mode + '_button'; + if ('cancel' == mode) + btn.onclick = this._boundCancelHandler; + this._form.appendChild(btn); + this._controls[mode] = btn; + } else if ('link' == control) { + var link = document.createElement('a'); + link.href = '#'; + link.appendChild(document.createTextNode(text)); + link.onclick = 'cancel' == mode ? this._boundCancelHandler : this._boundSubmitHandler; + link.className = 'editor_' + mode + '_link'; + if (extraClasses) + link.className += ' ' + extraClasses; + this._form.appendChild(link); + this._controls[mode] = link; } - - if (this.options.textBeforeControls) - this.form.appendChild(document.createTextNode(this.options.textBeforeControls)); - - if (this.options.okButton) { - var okButton = document.createElement("input"); - okButton.type = "submit"; - okButton.value = this.options.okText; - okButton.className = 'editor_ok_button'; - this.form.appendChild(okButton); - } - - if (this.options.okLink) { - var okLink = document.createElement("a"); - okLink.href = "#"; - okLink.appendChild(document.createTextNode(this.options.okText)); - okLink.onclick = this.onSubmit.bind(this); - okLink.className = 'editor_ok_link'; - this.form.appendChild(okLink); - } - - if (this.options.textBetweenControls && - (this.options.okLink || this.options.okButton) && - (this.options.cancelLink || this.options.cancelButton)) - this.form.appendChild(document.createTextNode(this.options.textBetweenControls)); - - if (this.options.cancelButton) { - var cancelButton = document.createElement("input"); - cancelButton.type = "submit"; - cancelButton.value = this.options.cancelText; - cancelButton.onclick = this.onclickCancel.bind(this); - cancelButton.className = 'editor_cancel_button'; - this.form.appendChild(cancelButton); - } - - if (this.options.cancelLink) { - var cancelLink = document.createElement("a"); - cancelLink.href = "#"; - cancelLink.appendChild(document.createTextNode(this.options.cancelText)); - cancelLink.onclick = this.onclickCancel.bind(this); - cancelLink.className = 'editor_cancel editor_cancel_link'; - this.form.appendChild(cancelLink); - } - - if (this.options.textAfterControls) - this.form.appendChild(document.createTextNode(this.options.textAfterControls)); }, - hasHTMLLineBreaks: function(string) { - if (!this.options.handleLineBreaks) return false; - return string.match(/<br/i) || string.match(/<p>/i); - }, - convertHTMLLineBreaks: function(string) { - return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, ""); - }, createEditField: function() { - var text; - if(this.options.loadTextURL) { - text = this.options.loadingText; - } else { - text = this.getText(); - } - - var obj = this; - - if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) { - this.options.textarea = false; - var textField = document.createElement("input"); - textField.obj = this; - textField.type = "text"; - textField.name = this.options.paramName; - textField.value = text; - textField.style.backgroundColor = this.options.highlightcolor; - textField.className = 'editor_field'; + var text = (this.options.loadTextURL ? this.options.loadingText : this.getText()); + var fld; + if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) { + fld = document.createElement('input'); + fld.type = 'text'; var size = this.options.size || this.options.cols || 0; - if (size != 0) textField.size = size; - if (this.options.submitOnBlur) - textField.onblur = this.onSubmit.bind(this); - this.editField = textField; + if (0 < size) fld.size = size; } else { - this.options.textarea = true; - var textArea = document.createElement("textarea"); - textArea.obj = this; - textArea.name = this.options.paramName; - textArea.value = this.convertHTMLLineBreaks(text); - textArea.rows = this.options.rows; - textArea.cols = this.options.cols || 40; - textArea.className = 'editor_field'; - if (this.options.submitOnBlur) - textArea.onblur = this.onSubmit.bind(this); - this.editField = textArea; + fld = document.createElement('textarea'); + fld.rows = (1 >= this.options.rows ? this.options.autoRows : this.options.rows); + fld.cols = this.options.cols || 40; } - - if(this.options.loadTextURL) { + fld.name = this.options.paramName; + fld.value = text; // No HTML breaks conversion anymore + fld.className = 'editor_field'; + if (this.options.submitOnBlur) + fld.onblur = this._boundSubmitHandler; + this._controls.editor = fld; + if (this.options.loadTextURL) this.loadExternalText(); - } - this.form.appendChild(this.editField); + this._form.appendChild(this._controls.editor); }, - getText: function() { - return this.element.innerHTML; + createForm: function() { + var ipe = this; + function addText(mode, condition) { + var text = ipe.options['text' + mode + 'Controls']; + if (!text || condition === false) return; + ipe._form.appendChild(document.createTextNode(text)); + }; + this._form = $(document.createElement('form')); + this._form.id = this.options.formId; + this._form.addClassName(this.options.formClassName); + this._form.onsubmit = this._boundSubmitHandler; + this.createEditField(); + if ('textarea' == this._controls.editor.tagName.toLowerCase()) + this._form.appendChild(document.createElement('br')); + if (this.options.onFormCustomization) + this.options.onFormCustomization(this, this._form); + addText('Before', this.options.okControl || this.options.cancelControl); + this.createControl('ok', this._boundSubmitHandler); + addText('Between', this.options.okControl && this.options.cancelControl); + this.createControl('cancel', this._boundCancelHandler, 'editor_cancel'); + addText('After', this.options.okControl || this.options.cancelControl); }, - loadExternalText: function() { - Element.addClassName(this.form, this.options.loadingClassName); - this.editField.disabled = true; - new Ajax.Request( - this.options.loadTextURL, - Object.extend({ - asynchronous: true, - onComplete: this.onLoadedExternalText.bind(this) - }, this.options.ajaxOptions) - ); + destroy: function() { + if (this._oldInnerHTML) + this.element.innerHTML = this._oldInnerHTML; + this.leaveEditMode(); + this.unregisterListeners(); }, - onLoadedExternalText: function(transport) { - Element.removeClassName(this.form, this.options.loadingClassName); - this.editField.disabled = false; - this.editField.value = transport.responseText.stripTags(); - Field.scrollFreeActivate(this.editField); + enterEditMode: function(e) { + if (this._saving || this._editing) return; + this._editing = true; + this.triggerCallback('onEnterEditMode'); + if (this.options.externalControl) + this.options.externalControl.hide(); + this.element.hide(); + this.createForm(); + this.element.parentNode.insertBefore(this._form, this.element); + if (!this.options.loadTextURL) + this.postProcessEditField(); + if (e) Event.stop(e); }, - onclickCancel: function() { - this.onComplete(); - this.leaveEditMode(); - return false; + enterHover: function(e) { + if (this.options.hoverClassName) + this.element.addClassName(this.options.hoverClassName); + if (this._saving) return; + this.triggerCallback('onEnterHover'); }, - onFailure: function(transport) { - this.options.onFailure(transport); - if (this.oldInnerHTML) { - this.element.innerHTML = this.oldInnerHTML; - this.oldInnerHTML = null; + getText: function() { + return this.element.innerHTML; + }, + handleAJAXFailure: function(transport) { + this.triggerCallback('onFailure', transport); + if (this._oldInnerHTML) { + this.element.innerHTML = this._oldInnerHTML; + this._oldInnerHTML = null; } - return false; }, - onSubmit: function() { - // onLoading resets these so we need to save them away for the Ajax call - var form = this.form; - var value = this.editField.value; - - // do this first, sometimes the ajax call returns before we get a chance to switch on Saving... - // which means this will actually switch on Saving... *after* we've left edit mode causing Saving... - // to be displayed indefinitely - this.onLoading(); - - if (this.options.evalScripts) { - new Ajax.Request( - this.url, Object.extend({ - parameters: this.options.callback(form, value), - onComplete: this.onComplete.bind(this), - onFailure: this.onFailure.bind(this), - asynchronous:true, - evalScripts:true - }, this.options.ajaxOptions)); - } else { - new Ajax.Updater( - { success: this.element, - // don't update on failure (this could be an option) - failure: null }, - this.url, Object.extend({ - parameters: this.options.callback(form, value), - onComplete: this.onComplete.bind(this), - onFailure: this.onFailure.bind(this) - }, this.options.ajaxOptions)); + handleFormCancellation: function(e) { + this.wrapUp(); + if (e) Event.stop(e); + }, + handleFormSubmission: function(e) { + var form = this._form; + var value = $F(this._controls.editor); + this.prepareSubmission(); + var params = this.options.callback(form, value) || ''; + if (Object.isString(params)) + params = params.toQueryParams(); + params.editorId = this.element.id; + if (this.options.htmlResponse) { + var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions); + Object.extend(options, { + parameters: params, + onComplete: this._boundWrapperHandler, + onFailure: this._boundFailureHandler + }); + new Ajax.Updater({ success: this.element }, this.url, options); + } else { + var options = Object.extend({ method: 'get' }, this.options.ajaxOptions); + Object.extend(options, { + parameters: params, + onComplete: this._boundWrapperHandler, + onFailure: this._boundFailureHandler + }); + new Ajax.Request(this.url, options); } - // stop the event to avoid a page refresh in Safari - if (arguments.length > 1) { - Event.stop(arguments[0]); - } - return false; + if (e) Event.stop(e); }, - onLoading: function() { - this.saving = true; + leaveEditMode: function() { + this.element.removeClassName(this.options.savingClassName); this.removeForm(); this.leaveHover(); + this.element.style.backgroundColor = this._originalBackground; + this.element.show(); + if (this.options.externalControl) + this.options.externalControl.show(); + this._saving = false; + this._editing = false; + this._oldInnerHTML = null; + this.triggerCallback('onLeaveEditMode'); + }, + leaveHover: function(e) { + if (this.options.hoverClassName) + this.element.removeClassName(this.options.hoverClassName); + if (this._saving) return; + this.triggerCallback('onLeaveHover'); + }, + loadExternalText: function() { + this._form.addClassName(this.options.loadingClassName); + this._controls.editor.disabled = true; + var options = Object.extend({ method: 'get' }, this.options.ajaxOptions); + Object.extend(options, { + parameters: 'editorId=' + encodeURIComponent(this.element.id), + onComplete: Prototype.emptyFunction, + onSuccess: function(transport) { + this._form.removeClassName(this.options.loadingClassName); + var text = transport.responseText; + if (this.options.stripLoadedTextTags) + text = text.stripTags(); + this._controls.editor.value = text; + this._controls.editor.disabled = false; + this.postProcessEditField(); + }.bind(this), + onFailure: this._boundFailureHandler + }); + new Ajax.Request(this.options.loadTextURL, options); + }, + postProcessEditField: function() { + var fpc = this.options.fieldPostCreation; + if (fpc) + $(this._controls.editor)['focus' == fpc ? 'focus' : 'activate'](); + }, + prepareOptions: function() { + this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions); + Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks); + [this._extraDefaultOptions].flatten().compact().each(function(defs) { + Object.extend(this.options, defs); + }.bind(this)); + }, + prepareSubmission: function() { + this._saving = true; + this.removeForm(); + this.leaveHover(); this.showSaving(); }, + registerListeners: function() { + this._listeners = { }; + var listener; + $H(Ajax.InPlaceEditor.Listeners).each(function(pair) { + listener = this[pair.value].bind(this); + this._listeners[pair.key] = listener; + if (!this.options.externalControlOnly) + this.element.observe(pair.key, listener); + if (this.options.externalControl) + this.options.externalControl.observe(pair.key, listener); + }.bind(this)); + }, + removeForm: function() { + if (!this._form) return; + this._form.remove(); + this._form = null; + this._controls = { }; + }, showSaving: function() { - this.oldInnerHTML = this.element.innerHTML; + this._oldInnerHTML = this.element.innerHTML; this.element.innerHTML = this.options.savingText; - Element.addClassName(this.element, this.options.savingClassName); - this.element.style.backgroundColor = this.originalBackground; - Element.show(this.element); + this.element.addClassName(this.options.savingClassName); + this.element.style.backgroundColor = this._originalBackground; + this.element.show(); }, - removeForm: function() { - if(this.form) { - if (this.form.parentNode) Element.remove(this.form); - this.form = null; + triggerCallback: function(cbName, arg) { + if ('function' == typeof this.options[cbName]) { + this.options[cbName](this, arg); } }, - enterHover: function() { - if (this.saving) return; - this.element.style.backgroundColor = this.options.highlightcolor; - if (this.effect) { - this.effect.cancel(); - } - Element.addClassName(this.element, this.options.hoverClassName) + unregisterListeners: function() { + $H(this._listeners).each(function(pair) { + if (!this.options.externalControlOnly) + this.element.stopObserving(pair.key, pair.value); + if (this.options.externalControl) + this.options.externalControl.stopObserving(pair.key, pair.value); + }.bind(this)); }, - leaveHover: function() { - if (this.options.backgroundColor) { - this.element.style.backgroundColor = this.oldBackground; - } - Element.removeClassName(this.element, this.options.hoverClassName) - if (this.saving) return; - this.effect = new Effect.Highlight(this.element, { - startcolor: this.options.highlightcolor, - endcolor: this.options.highlightendcolor, - restorecolor: this.originalBackground + wrapUp: function(transport) { + this.leaveEditMode(); + // Can't use triggerCallback due to backward compatibility: requires + // binding + direct element + this._boundComplete(transport, this.element); + } +}); + +Object.extend(Ajax.InPlaceEditor.prototype, { + dispose: Ajax.InPlaceEditor.prototype.destroy +}); + +Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, { + initialize: function($super, element, url, options) { + this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions; + $super(element, url, options); + }, + + createEditField: function() { + var list = document.createElement('select'); + list.name = this.options.paramName; + list.size = 1; + this._controls.editor = list; + this._collection = this.options.collection || []; + if (this.options.loadCollectionURL) + this.loadCollection(); + else + this.checkForExternalText(); + this._form.appendChild(this._controls.editor); + }, + + loadCollection: function() { + this._form.addClassName(this.options.loadingClassName); + this.showLoadingText(this.options.loadingCollectionText); + var options = Object.extend({ method: 'get' }, this.options.ajaxOptions); + Object.extend(options, { + parameters: 'editorId=' + encodeURIComponent(this.element.id), + onComplete: Prototype.emptyFunction, + onSuccess: function(transport) { + var js = transport.responseText.strip(); + if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check + throw 'Server returned an invalid collection representation.'; + this._collection = eval(js); + this.checkForExternalText(); + }.bind(this), + onFailure: this.onFailure }); + new Ajax.Request(this.options.loadCollectionURL, options); }, - leaveEditMode: function() { - Element.removeClassName(this.element, this.options.savingClassName); - this.removeForm(); - this.leaveHover(); - this.element.style.backgroundColor = this.originalBackground; - Element.show(this.element); - if (this.options.externalControl) { - Element.show(this.options.externalControl); + + showLoadingText: function(text) { + this._controls.editor.disabled = true; + var tempOption = this._controls.editor.firstChild; + if (!tempOption) { + tempOption = document.createElement('option'); + tempOption.value = ''; + this._controls.editor.appendChild(tempOption); + tempOption.selected = true; } - this.editing = false; - this.saving = false; - this.oldInnerHTML = null; - this.onLeaveEditMode(); + tempOption.update((text || '').stripScripts().stripTags()); }, - onComplete: function(transport) { - this.leaveEditMode(); - this.options.onComplete.bind(this)(transport, this.element); + + checkForExternalText: function() { + this._text = this.getText(); + if (this.options.loadTextURL) + this.loadExternalText(); + else + this.buildOptionList(); }, - onEnterEditMode: function() {}, - onLeaveEditMode: function() {}, - dispose: function() { - if (this.oldInnerHTML) { - this.element.innerHTML = this.oldInnerHTML; - } - this.leaveEditMode(); - Event.stopObserving(this.element, 'click', this.onclickListener); - Event.stopObserving(this.element, 'mouseover', this.mouseoverListener); - Event.stopObserving(this.element, 'mouseout', this.mouseoutListener); - if (this.options.externalControl) { - Event.stopObserving(this.options.externalControl, 'click', this.onclickListener); - Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener); - Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener); - } + + loadExternalText: function() { + this.showLoadingText(this.options.loadingText); + var options = Object.extend({ method: 'get' }, this.options.ajaxOptions); + Object.extend(options, { + parameters: 'editorId=' + encodeURIComponent(this.element.id), + onComplete: Prototype.emptyFunction, + onSuccess: function(transport) { + this._text = transport.responseText.strip(); + this.buildOptionList(); + }.bind(this), + onFailure: this.onFailure + }); + new Ajax.Request(this.options.loadTextURL, options); + }, + + buildOptionList: function() { + this._form.removeClassName(this.options.loadingClassName); + this._collection = this._collection.map(function(entry) { + return 2 === entry.length ? entry : [entry, entry].flatten(); + }); + var marker = ('value' in this.options) ? this.options.value : this._text; + var textFound = this._collection.any(function(entry) { + return entry[0] == marker; + }.bind(this)); + this._controls.editor.update(''); + var option; + this._collection.each(function(entry, index) { + option = document.createElement('option'); + option.value = entry[0]; + option.selected = textFound ? entry[0] == marker : 0 == index; + option.appendChild(document.createTextNode(entry[1])); + this._controls.editor.appendChild(option); + }.bind(this)); + this._controls.editor.disabled = false; + Field.scrollFreeActivate(this._controls.editor); } +}); + +//**** DEPRECATION LAYER FOR InPlace[Collection]Editor! **** +//**** This only exists for a while, in order to let **** +//**** users adapt to the new API. Read up on the new **** +//**** API and convert your code to it ASAP! **** + +Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) { + if (!options) return; + function fallback(name, expr) { + if (name in options || expr === undefined) return; + options[name] = expr; + }; + fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' : + options.cancelLink == options.cancelButton == false ? false : undefined))); + fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' : + options.okLink == options.okButton == false ? false : undefined))); + fallback('highlightColor', options.highlightcolor); + fallback('highlightEndColor', options.highlightendcolor); }; -Ajax.InPlaceCollectionEditor = Class.create(); -Object.extend(Ajax.InPlaceCollectionEditor.prototype, Ajax.InPlaceEditor.prototype); -Object.extend(Ajax.InPlaceCollectionEditor.prototype, { - createEditField: function() { - if (!this.cached_selectTag) { - var selectTag = document.createElement("select"); - var collection = this.options.collection || []; - var optionTag; - 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); - }.bind(this)); - this.cached_selectTag = selectTag; +Object.extend(Ajax.InPlaceEditor, { + DefaultOptions: { + ajaxOptions: { }, + autoRows: 3, // Use when multi-line w/ rows == 1 + cancelControl: 'link', // 'link'|'button'|false + cancelText: 'cancel', + clickToEditText: 'Click to edit', + externalControl: null, // id|elt + externalControlOnly: false, + fieldPostCreation: 'activate', // 'activate'|'focus'|false + formClassName: 'inplaceeditor-form', + formId: null, // id|elt + highlightColor: '#ffff99', + highlightEndColor: '#ffffff', + hoverClassName: '', + htmlResponse: true, + loadingClassName: 'inplaceeditor-loading', + loadingText: 'Loading...', + okControl: 'button', // 'link'|'button'|false + okText: 'ok', + paramName: 'value', + rows: 1, // If 1 and multi-line, uses autoRows + savingClassName: 'inplaceeditor-saving', + savingText: 'Saving...', + size: 0, + stripLoadedTextTags: false, + submitOnBlur: false, + textAfterControls: '', + textBeforeControls: '', + textBetweenControls: '' + }, + DefaultCallbacks: { + callback: function(form) { + return Form.serialize(form); + }, + onComplete: function(transport, element) { + // For backward compatibility, this one is bound to the IPE, and passes + // the element directly. It was too often customized, so we don't break it. + new Effect.Highlight(element, { + startcolor: this.options.highlightColor, keepBackgroundImage: true }); + }, + onEnterEditMode: null, + onEnterHover: function(ipe) { + ipe.element.style.backgroundColor = ipe.options.highlightColor; + if (ipe._effect) + ipe._effect.cancel(); + }, + onFailure: function(transport, ipe) { + alert('Error communication with the server: ' + transport.responseText.stripTags()); + }, + onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls. + onLeaveEditMode: null, + onLeaveHover: function(ipe) { + ipe._effect = new Effect.Highlight(ipe.element, { + startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor, + restorecolor: ipe._originalBackground, keepBackgroundImage: true + }); } - - this.editField = this.cached_selectTag; - if(this.options.loadTextURL) this.loadExternalText(); - this.form.appendChild(this.editField); - this.options.callback = function(form, value) { - return "value=" + encodeURIComponent(value); - } + }, + Listeners: { + click: 'enterEditMode', + keydown: 'checkForEscapeOrReturn', + mouseover: 'enterHover', + mouseout: 'leaveHover' } }); +Ajax.InPlaceCollectionEditor.DefaultOptions = { + loadingCollectionText: 'Loading options...' +}; + // Delayed observer, like Form.Element.Observer, // but waits for delay after last key input // Ideal for live-search fields -Form.Element.DelayedObserver = Class.create(); -Form.Element.DelayedObserver.prototype = { +Form.Element.DelayedObserver = Class.create({ initialize: function(element, delay, callback) { this.delay = delay || 0.5; this.element = $(element); @@ -872,4 +962,4 @@ this.timer = null; this.callback(this.element, $F(this.element)); } -}; +}); Modified: trunk/framework/impl/src/main/javascript/scriptaculous/dragdrop.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/dragdrop.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/dragdrop.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us dragdrop.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us dragdrop.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // (c) 2005-2007 Sammi Williams (http://www.oriontransfer.co.nz, sammi(a)oriontransfer.co.nz) @@ -6,7 +6,7 @@ // 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') +if(Object.isUndefined(Effect)) throw("dragdrop.js requires including script.aculo.us' effects.js library"); var Droppables = { @@ -22,14 +22,13 @@ greedy: true, hoverclass: null, tree: false - }, arguments[1] || {}); + }, arguments[1] || { }); // cache containers if(options.containment) { options._containers = []; var containment = options.containment; - if((typeof containment == 'object') && - (containment.constructor == Array)) { + if(Object.isArray(containment)) { containment.each( function(c) { options._containers.push($(c)) }); } else { options._containers.push($(containment)); @@ -89,21 +88,23 @@ show: function(point, element) { if(!this.drops.length) return; - var affected = []; + var drop, affected = []; - if(this.last_active) this.deactivate(this.last_active); this.drops.each( function(drop) { if(Droppables.isAffected(point, element, drop)) affected.push(drop); }); - if(affected.length>0) { + if(affected.length>0) drop = Droppables.findDeepestChild(affected); + + if(this.last_active && this.last_active != drop) this.deactivate(this.last_active); + if (drop) { Position.within(drop.element, point[0], point[1]); if(drop.onHover) drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element)); - Droppables.activate(drop); + if (drop != this.last_active) Droppables.activate(drop); } }, @@ -223,10 +224,7 @@ /*--------------------------------------------------------------------------*/ -var Draggable = Class.create(); -Draggable._dragging = {}; - -Draggable.prototype = { +var Draggable = Class.create({ initialize: function(element) { var defaults = { handle: false, @@ -237,7 +235,7 @@ }); }, endeffect: function(element) { - var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0; + var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0; new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity, queue: {scope:'_draggable', position:'end'}, afterFinish: function(){ @@ -255,7 +253,7 @@ delay: 0 }; - if(!arguments[1] || typeof arguments[1].endeffect == 'undefined') + if(!arguments[1] || Object.isUndefined(arguments[1].endeffect)) Object.extend(defaults, { starteffect: function(element) { element._opacity = Element.getOpacity(element); @@ -264,11 +262,11 @@ } }); - var options = Object.extend(defaults, arguments[1] || {}); + var options = Object.extend(defaults, arguments[1] || { }); this.element = $(element); - if(options.handle && (typeof options.handle == 'string')) + if(options.handle && Object.isString(options.handle)) this.handle = this.element.down('.'+options.handle, 0); if(!this.handle) this.handle = $(options.handle); @@ -281,7 +279,6 @@ Element.makePositioned(this.element); // fix IE - this.delta = this.currentDelta(); this.options = options; this.dragging = false; @@ -303,7 +300,7 @@ }, initDrag: function(event) { - if(typeof Draggable._dragging[this.element] != 'undefined' && + if(!Object.isUndefined(Draggable._dragging[this.element]) && Draggable._dragging[this.element]) return; if(Event.isLeftClick(event)) { // abort on form elements, fixes a Firefox issue @@ -326,6 +323,8 @@ startDrag: function(event) { this.dragging = true; + if(!this.delta) + this.delta = this.currentDelta(); if(this.options.zindex) { this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0); @@ -334,7 +333,9 @@ if(this.options.ghosting) { this._clone = this.element.cloneNode(true); - Position.absolutize(this.element); + this.element._originallyAbsolute = (this.element.getStyle('position') == 'absolute'); + if (!this.element._originallyAbsolute) + Position.absolutize(this.element); this.element.parentNode.insertBefore(this._clone, this.element); } @@ -404,7 +405,9 @@ } if(this.options.ghosting) { - Position.relativize(this.element); + if (!this.element._originallyAbsolute) + Position.relativize(this.element); + delete this.element._originallyAbsolute; Element.remove(this._clone); this._clone = null; } @@ -418,7 +421,7 @@ Draggables.notify('onEnd', this, event); var revert = this.options.revert; - if(revert && typeof revert == 'function') revert = revert(this.element); + if(revert && Object.isFunction(revert)) revert = revert(this.element); var d = this.currentDelta(); if(revert && this.options.reverteffect) { @@ -472,15 +475,15 @@ }.bind(this)); if(this.options.snap) { - if(typeof this.options.snap == 'function') { + if(Object.isFunction(this.options.snap)) { p = this.options.snap(p[0],p[1],this); } else { - if(this.options.snap instanceof Array) { + if(Object.isArray(this.options.snap)) { p = p.map( function(v, i) { - return Math.round(v/this.options.snap[i])*this.options.snap[i] }.bind(this)) + return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this)) } else { p = p.map( function(v) { - return Math.round(v/this.options.snap)*this.options.snap }.bind(this)) + return (v/this.options.snap).round()*this.options.snap }.bind(this)) } }} @@ -564,12 +567,13 @@ } return { top: T, left: L, width: W, height: H }; } -} +}); +Draggable._dragging = { }; + /*--------------------------------------------------------------------------*/ -var SortableObserver = Class.create(); -SortableObserver.prototype = { +var SortableObserver = Class.create({ initialize: function(element, observer) { this.element = $(element); this.observer = observer; @@ -585,12 +589,12 @@ if(this.lastValue != Sortable.serialize(this.element)) this.observer(this.element) } -} +}); var Sortable = { SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/, - sortables: {}, + sortables: { }, _findRootElement: function(element) { while (element.tagName.toUpperCase() != "BODY") { @@ -646,7 +650,7 @@ onChange: Prototype.emptyFunction, onUpdate: Prototype.emptyFunction - }, arguments[1] || {}); + }, arguments[1] || { }); // clear any old sortable with same element this.destroy(element); @@ -710,7 +714,7 @@ (options.elements || this.findElements(element, options) || []).each( function(e,i) { var handle = options.handles ? $(options.handles[i]) : - (options.handle ? $(e).getElementsByClassName(options.handle)[0] : e); + (options.handle ? $(e).select('.' + options.handle)[0] : e); options.draggables.push( new Draggable(e, Object.extend(options_for_draggable, { handle: handle }))); Droppables.add(e, options_for_droppable); @@ -870,7 +874,7 @@ only: sortableOptions.only, name: element.id, format: sortableOptions.format - }, arguments[1] || {}); + }, arguments[1] || { }); var root = { id: null, @@ -894,7 +898,7 @@ sequence: function(element) { element = $(element); - var options = Object.extend(this.options(element), arguments[1] || {}); + var options = Object.extend(this.options(element), arguments[1] || { }); return $(this.findElements(element, options) || []).map( function(item) { return item.id.match(options.format) ? item.id.match(options.format)[1] : ''; @@ -903,9 +907,9 @@ setSequence: function(element, new_sequence) { element = $(element); - var options = Object.extend(this.options(element), arguments[2] || {}); + var options = Object.extend(this.options(element), arguments[2] || { }); - var nodeMap = {}; + var nodeMap = { }; this.findElements(element, options).each( function(n) { if (n.id.match(options.format)) nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode]; @@ -923,7 +927,7 @@ serialize: function(element) { element = $(element); - var options = Object.extend(Sortable.options(element), arguments[1] || {}); + var options = Object.extend(Sortable.options(element), arguments[1] || { }); var name = encodeURIComponent( (arguments[1] && arguments[1].name) ? arguments[1].name : element.id); Modified: trunk/framework/impl/src/main/javascript/scriptaculous/effects.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/effects.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/effects.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us effects.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us effects.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // Contributors: @@ -13,17 +13,17 @@ // returns self (or first argument) if not convertable String.prototype.parseColor = function() { var color = '#'; - if(this.slice(0,4) == 'rgb(') { + if (this.slice(0,4) == 'rgb(') { var cols = this.slice(4,this.length-1).split(','); var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3); } else { - if(this.slice(0,1) == '#') { - if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); - if(this.length==7) color = this.toLowerCase(); + if (this.slice(0,1) == '#') { + if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase(); + if (this.length==7) color = this.toLowerCase(); } } - return(color.length==7 ? color : (arguments[0] || this)); -} + return (color.length==7 ? color : (arguments[0] || this)); +}; /*--------------------------------------------------------------------------*/ @@ -32,7 +32,7 @@ return (node.nodeType==3 ? node.nodeValue : (node.hasChildNodes() ? Element.collectTextNodes(node) : '')); }).flatten().join(''); -} +}; Element.collectTextNodesIgnoreClass = function(element, className) { return $A($(element).childNodes).collect( function(node) { @@ -40,18 +40,18 @@ ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? Element.collectTextNodesIgnoreClass(node, className) : '')); }).flatten().join(''); -} +}; Element.setContentZoom = function(element, percent) { element = $(element); element.setStyle({fontSize: (percent/100) + 'em'}); - if(Prototype.Browser.WebKit) window.scrollBy(0,0); + if (Prototype.Browser.WebKit) window.scrollBy(0,0); return element; -} +}; Element.getInlineOpacity = function(element){ return $(element).style.opacity || ''; -} +}; Element.forceRerendering = function(element) { try { @@ -64,31 +64,63 @@ /*--------------------------------------------------------------------------*/ -Array.prototype.call = function() { - var args = arguments; - this.each(function(f){ f.apply(this, args) }); -} - -/*--------------------------------------------------------------------------*/ - var Effect = { _elementDoesNotExistError: { name: 'ElementDoesNotExistError', message: 'The specified DOM element does not exist, but is required for this effect to operate' }, + 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) { + var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; + return pos > 1 ? 1 : pos; + }, + wobble: function(pos) { + return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; + }, + pulse: function(pos, pulses) { + pulses = pulses || 5; + return ( + ((pos % (1/pulses)) * pulses).round() == 0 ? + ((pos * pulses * 2) - (pos * pulses * 2).floor()) : + 1 - ((pos * pulses * 2) - (pos * pulses * 2).floor()) + ); + }, + spring: function(pos) { + return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); + }, + none: function(pos) { + return 0; + }, + full: function(pos) { + return 1; + } + }, + DefaultOptions: { + duration: 1.0, // seconds + fps: 100, // 100= assume 66fps max. + sync: false, // true for combining + from: 0.0, + to: 1.0, + delay: 0.0, + queue: 'parallel' + }, tagifyText: function(element) { - if(typeof Builder == 'undefined') - throw("Effect.tagifyText requires including script.aculo.us' builder.js library"); - var tagifyStyle = 'position:relative'; - if(Prototype.Browser.IE) tagifyStyle += ';zoom:1'; + if (Prototype.Browser.IE) tagifyStyle += ';zoom:1'; element = $(element); $A(element.childNodes).each( function(child) { - if(child.nodeType==3) { + if (child.nodeType==3) { child.nodeValue.toArray().each( function(character) { element.insertBefore( - Builder.node('span',{style: tagifyStyle}, + new Element('span', {style: tagifyStyle}).update( character == ' ' ? String.fromCharCode(160) : character), child); }); @@ -98,8 +130,8 @@ }, multiple: function(element, effect) { var elements; - if(((typeof element == 'object') || - (typeof element == 'function')) && + if (((typeof element == 'object') || + Object.isFunction(element)) && (element.length)) elements = element; else @@ -108,7 +140,7 @@ var options = Object.extend({ speed: 0.1, delay: 0.0 - }, arguments[2] || {}); + }, arguments[2] || { }); var masterDelay = options.delay; $A(elements).each( function(element, index) { @@ -125,51 +157,17 @@ effect = (effect || 'appear').toLowerCase(); var options = Object.extend({ queue: { position:'end', scope:(element.id || 'global'), limit: 1 } - }, arguments[2] || {}); + }, arguments[2] || { }); Effect[element.visible() ? Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options); } }; -var Effect2 = Effect; // deprecated +Effect.DefaultOptions.transition = Effect.Transitions.sinoidal; -/* ------------- transitions ------------- */ - -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) { - var pos = ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4; - return (pos > 1 ? 1 : pos); - }, - 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 ------------- */ -Effect.ScopedQueue = Class.create(); -Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), { +Effect.ScopedQueue = Class.create(Enumerable, { initialize: function() { this.effects = []; this.interval = null; @@ -180,7 +178,7 @@ add: function(effect) { var timestamp = new Date().getTime(); - var position = (typeof effect.options.queue == 'string') ? + var position = Object.isString(effect.options.queue) ? effect.options.queue : effect.options.queue.position; switch(position) { @@ -203,15 +201,15 @@ effect.startOn += timestamp; effect.finishOn += timestamp; - if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) + if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit)) this.effects.push(effect); - if(!this.interval) + if (!this.interval) this.interval = setInterval(this.loop.bind(this), 15); }, remove: function(effect) { this.effects = this.effects.reject(function(e) { return e==effect }); - if(this.effects.length == 0) { + if (this.effects.length == 0) { clearInterval(this.interval); this.interval = null; } @@ -226,29 +224,15 @@ Effect.Queues = { instances: $H(), get: function(queueName) { - if(typeof queueName != 'string') return queueName; + if (!Object.isString(queueName)) return queueName; - if(!this.instances[queueName]) - this.instances[queueName] = new Effect.ScopedQueue(); - - return this.instances[queueName]; + return this.instances.get(queueName) || + this.instances.set(queueName, new Effect.ScopedQueue()); } -} +}; Effect.Queue = Effect.Queues.get('global'); -Effect.DefaultOptions = { - transition: Effect.Transitions.sinoidal, - duration: 1.0, // seconds - fps: 100, // 100= assume 66fps max. - sync: false, // true for combining - from: 0.0, - to: 1.0, - delay: 0.0, - queue: 'parallel' -} - -Effect.Base = function() {}; -Effect.Base.prototype = { +Effect.Base = Class.create({ position: null, start: function(options) { function codeForEvent(options,eventName){ @@ -257,8 +241,8 @@ (options[eventName] ? 'this.options.'+eventName+'(this);' : '') ); } - if(options.transition === false) options.transition = Effect.Transitions.linear; - this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {}); + if (options && options.transition === false) options.transition = Effect.Transitions.linear; + this.options = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { }); this.currentFrame = 0; this.state = 'idle'; this.startOn = this.options.delay*1000; @@ -268,61 +252,60 @@ this.totalFrames = this.options.fps*this.options.duration; eval('this.render = function(pos){ '+ - 'if(this.state=="idle"){this.state="running";'+ - codeForEvent(options,'beforeSetup')+ + 'if (this.state=="idle"){this.state="running";'+ + codeForEvent(this.options,'beforeSetup')+ (this.setup ? 'this.setup();':'')+ - codeForEvent(options,'afterSetup')+ - '};if(this.state=="running"){'+ + codeForEvent(this.options,'afterSetup')+ + '};if (this.state=="running"){'+ 'pos=this.options.transition(pos)*'+this.fromToDelta+'+'+this.options.from+';'+ 'this.position=pos;'+ - codeForEvent(options,'beforeUpdate')+ + codeForEvent(this.options,'beforeUpdate')+ (this.update ? 'this.update(pos);':'')+ - codeForEvent(options,'afterUpdate')+ + codeForEvent(this.options,'afterUpdate')+ '}}'); this.event('beforeStart'); - if(!this.options.sync) - Effect.Queues.get(typeof this.options.queue == 'string' ? + if (!this.options.sync) + Effect.Queues.get(Object.isString(this.options.queue) ? 'global' : this.options.queue.scope).add(this); }, loop: function(timePos) { - if(timePos >= this.startOn) { - if(timePos >= this.finishOn) { + if (timePos >= this.startOn) { + if (timePos >= this.finishOn) { this.render(1.0); this.cancel(); this.event('beforeFinish'); - if(this.finish) this.finish(); + if (this.finish) this.finish(); this.event('afterFinish'); return; } var pos = (timePos - this.startOn) / this.totalTime, - frame = Math.round(pos * this.totalFrames); - if(frame > this.currentFrame) { + frame = (pos * this.totalFrames).round(); + if (frame > this.currentFrame) { this.render(pos); this.currentFrame = frame; } } }, cancel: function() { - if(!this.options.sync) - Effect.Queues.get(typeof this.options.queue == 'string' ? + if (!this.options.sync) + Effect.Queues.get(Object.isString(this.options.queue) ? 'global' : this.options.queue.scope).remove(this); this.state = 'finished'; }, event: function(eventName) { - if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); - if(this.options[eventName]) this.options[eventName](this); + if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this); + if (this.options[eventName]) this.options[eventName](this); }, inspect: function() { var data = $H(); for(property in this) - if(typeof this[property] != 'function') data[property] = this[property]; + if (!Object.isFunction(this[property])) data.set(property, this[property]); return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>'; } -} +}); -Effect.Parallel = Class.create(); -Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), { +Effect.Parallel = Class.create(Effect.Base, { initialize: function(effects) { this.effects = effects || []; this.start(arguments[1]); @@ -335,35 +318,45 @@ effect.render(1.0); effect.cancel(); effect.event('beforeFinish'); - if(effect.finish) effect.finish(position); + if (effect.finish) effect.finish(position); effect.event('afterFinish'); }); } }); -Effect.Event = Class.create(); -Object.extend(Object.extend(Effect.Event.prototype, Effect.Base.prototype), { +Effect.Tween = Class.create(Effect.Base, { + initialize: function(object, from, to) { + object = Object.isString(object) ? $(object) : object; + var args = $A(arguments), method = args.last(), + options = args.length == 5 ? args[3] : null; + this.method = Object.isFunction(method) ? method.bind(object) : + Object.isFunction(object[method]) ? object[method].bind(object) : + function(value) { object[method] = value }; + this.start(Object.extend({ from: from, to: to }, options || { })); + }, + update: function(position) { + this.method(position); + } +}); + +Effect.Event = Class.create(Effect.Base, { initialize: function() { - var options = Object.extend({ - duration: 0 - }, arguments[0] || {}); - this.start(options); + this.start(Object.extend({ duration: 0 }, arguments[0] || { })); }, update: Prototype.emptyFunction }); -Effect.Opacity = Class.create(); -Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), { +Effect.Opacity = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); // make this work on IE on elements without 'layout' - if(Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) + if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) this.element.setStyle({zoom: 1}); var options = Object.extend({ from: this.element.getOpacity() || 0.0, to: 1.0 - }, arguments[1] || {}); + }, arguments[1] || { }); this.start(options); }, update: function(position) { @@ -371,36 +364,30 @@ } }); -Effect.Move = Class.create(); -Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), { +Effect.Move = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ x: 0, y: 0, mode: 'relative' - }, arguments[1] || {}); + }, arguments[1] || { }); this.start(options); }, setup: function() { - // Bug in Opera: Opera returns the "real" position of a static element or - // relative element that does not have top/left explicitly set. - // ==> Always set top and left for position relative elements in your stylesheets - // (to 0 if you do not need them) this.element.makePositioned(); this.originalLeft = parseFloat(this.element.getStyle('left') || '0'); this.originalTop = parseFloat(this.element.getStyle('top') || '0'); - if(this.options.mode == 'absolute') { - // absolute movement, so we need to calc deltaX and deltaY + if (this.options.mode == 'absolute') { this.options.x = this.options.x - this.originalLeft; this.options.y = this.options.y - this.originalTop; } }, update: function(position) { this.element.setStyle({ - left: Math.round(this.options.x * position + this.originalLeft) + 'px', - top: Math.round(this.options.y * position + this.originalTop) + 'px' + left: (this.options.x * position + this.originalLeft).round() + 'px', + top: (this.options.y * position + this.originalTop).round() + 'px' }); } }); @@ -408,30 +395,29 @@ // for backwards compatibility Effect.MoveBy = function(element, toTop, toLeft) { return new Effect.Move(element, - Object.extend({ x: toLeft, y: toTop }, arguments[3] || {})); + Object.extend({ x: toLeft, y: toTop }, arguments[3] || { })); }; -Effect.Scale = Class.create(); -Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), { +Effect.Scale = Class.create(Effect.Base, { initialize: function(element, percent) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ scaleX: true, scaleY: true, scaleContent: true, scaleFromCenter: false, - scaleMode: 'box', // 'box' or 'contents' or {} with provided values + scaleMode: 'box', // 'box' or 'contents' or { } with provided values scaleFrom: 100.0, scaleTo: percent - }, arguments[2] || {}); + }, arguments[2] || { }); this.start(options); }, setup: function() { this.restoreAfterFinish = this.options.restoreAfterFinish || false; this.elementPositioning = this.element.getStyle('position'); - this.originalStyle = {}; + this.originalStyle = { }; ['top','left','width','height','fontSize'].each( function(k) { this.originalStyle[k] = this.element.style[k]; }.bind(this)); @@ -441,7 +427,7 @@ var fontSize = this.element.getStyle('font-size') || '100%'; ['em','px','%','pt'].each( function(fontSizeType) { - if(fontSize.indexOf(fontSizeType)>0) { + if (fontSize.indexOf(fontSizeType)>0) { this.fontSize = parseFloat(fontSize); this.fontSizeType = fontSizeType; } @@ -450,62 +436,61 @@ this.factor = (this.options.scaleTo - this.options.scaleFrom)/100; this.dims = null; - if(this.options.scaleMode=='box') + if (this.options.scaleMode=='box') this.dims = [this.element.offsetHeight, this.element.offsetWidth]; - if(/^content/.test(this.options.scaleMode)) + if (/^content/.test(this.options.scaleMode)) this.dims = [this.element.scrollHeight, this.element.scrollWidth]; - if(!this.dims) + if (!this.dims) this.dims = [this.options.scaleMode.originalHeight, this.options.scaleMode.originalWidth]; }, update: function(position) { var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position); - if(this.options.scaleContent && this.fontSize) + if (this.options.scaleContent && this.fontSize) this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType }); 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 = {}; - if(this.options.scaleX) d.width = Math.round(width) + 'px'; - if(this.options.scaleY) d.height = Math.round(height) + 'px'; - if(this.options.scaleFromCenter) { + var d = { }; + if (this.options.scaleX) d.width = width.round() + 'px'; + if (this.options.scaleY) d.height = height.round() + 'px'; + if (this.options.scaleFromCenter) { var topd = (height - this.dims[0])/2; var leftd = (width - this.dims[1])/2; - if(this.elementPositioning == 'absolute') { - if(this.options.scaleY) d.top = this.originalTop-topd + 'px'; - if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px'; + if (this.elementPositioning == 'absolute') { + if (this.options.scaleY) d.top = this.originalTop-topd + 'px'; + if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px'; } else { - if(this.options.scaleY) d.top = -topd + 'px'; - if(this.options.scaleX) d.left = -leftd + 'px'; + if (this.options.scaleY) d.top = -topd + 'px'; + if (this.options.scaleX) d.left = -leftd + 'px'; } } this.element.setStyle(d); } }); -Effect.Highlight = Class.create(); -Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), { +Effect.Highlight = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); - var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {}); + if (!this.element) throw(Effect._elementDoesNotExistError); + var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { }); this.start(options); }, setup: function() { // Prevent executing on elements not in the layout flow - if(this.element.getStyle('display')=='none') { this.cancel(); return; } + if (this.element.getStyle('display')=='none') { this.cancel(); return; } // Disable background image during the effect - this.oldStyle = {}; + this.oldStyle = { }; if (!this.options.keepBackgroundImage) { this.oldStyle.backgroundImage = this.element.getStyle('background-image'); this.element.setStyle({backgroundImage: 'none'}); } - if(!this.options.endcolor) + if (!this.options.endcolor) this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff'); - if(!this.options.restorecolor) + if (!this.options.restorecolor) this.options.restorecolor = this.element.getStyle('background-color'); // init color calculations this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this)); @@ -513,7 +498,7 @@ }, update: function(position) { this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){ - return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) }); + return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) }); }, finish: function() { this.element.setStyle(Object.extend(this.oldStyle, { @@ -522,45 +507,37 @@ } }); -Effect.ScrollTo = Class.create(); -Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), { - initialize: function(element) { - this.element = $(element); - this.start(arguments[1] || {}); - }, - setup: function() { - Position.prepare(); - var offsets = Position.cumulativeOffset(this.element); - if(this.options.offset) offsets[1] += this.options.offset; - var max = window.innerHeight ? - window.height - window.innerHeight : - document.body.scrollHeight - - (document.documentElement.clientHeight ? - document.documentElement.clientHeight : document.body.clientHeight); - this.scrollStart = Position.deltaY; - this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart; - }, - update: function(position) { - Position.prepare(); - window.scrollTo(Position.deltaX, - this.scrollStart + (position*this.delta)); - } -}); +Effect.ScrollTo = function(element) { + var options = arguments[1] || { }, + scrollOffsets = document.viewport.getScrollOffsets(), + elementOffsets = $(element).cumulativeOffset(), + max = (window.height || document.body.scrollHeight) - document.viewport.getHeight(); + if (options.offset) elementOffsets[1] += options.offset; + + return new Effect.Tween(null, + scrollOffsets.top, + elementOffsets[1] > max ? max : elementOffsets[1], + options, + function(p){ scrollTo(scrollOffsets.left, p.round()) } + ); +}; + /* ------------- combination effects ------------- */ Effect.Fade = function(element) { element = $(element); var oldOpacity = element.getInlineOpacity(); var options = Object.extend({ - from: element.getOpacity() || 1.0, - to: 0.0, - afterFinishInternal: function(effect) { - if(effect.options.to!=0) return; - effect.element.hide().setStyle({opacity: oldOpacity}); - }}, arguments[1] || {}); + from: element.getOpacity() || 1.0, + to: 0.0, + afterFinishInternal: function(effect) { + if (effect.options.to!=0) return; + effect.element.hide().setStyle({opacity: oldOpacity}); + } + }, arguments[1] || { }); return new Effect.Opacity(element,options); -} +}; Effect.Appear = function(element) { element = $(element); @@ -573,9 +550,9 @@ }, beforeSetup: function(effect) { effect.element.setOpacity(effect.options.from).show(); - }}, arguments[1] || {}); + }}, arguments[1] || { }); return new Effect.Opacity(element,options); -} +}; Effect.Puff = function(element) { element = $(element); @@ -597,9 +574,9 @@ }, afterFinishInternal: function(effect) { effect.effects[0].element.hide().setStyle(oldStyle); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.BlindUp = function(element) { element = $(element); @@ -611,9 +588,9 @@ afterFinishInternal: function(effect) { effect.element.hide().undoClipping(); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.BlindDown = function(element) { element = $(element); @@ -630,8 +607,8 @@ afterFinishInternal: function(effect) { effect.element.undoClipping(); } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.SwitchOff = function(element) { element = $(element); @@ -652,8 +629,8 @@ } }) } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.DropOut = function(element) { element = $(element); @@ -672,29 +649,35 @@ afterFinishInternal: function(effect) { effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle); } - }, arguments[1] || {})); -} + }, arguments[1] || { })); +}; Effect.Shake = function(element) { element = $(element); + var options = Object.extend({ + distance: 20, + duration: 0.5 + }, arguments[1] || {}); + var distance = parseFloat(options.distance); + var split = parseFloat(options.duration) / 10.0; var oldStyle = { top: element.getStyle('top'), left: element.getStyle('left') }; - return new Effect.Move(element, - { x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { + return new Effect.Move(element, + { x: distance, y: 0, duration: split, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: -distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) { + { x: distance*2, y: 0, duration: split*2, afterFinishInternal: function(effect) { new Effect.Move(effect.element, - { x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { + { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) { effect.element.undoPositioned().setStyle(oldStyle); }}) }}) }}) }}) }}) }}); -} +}; Effect.SlideDown = function(element) { element = $(element).cleanWhitespace(); @@ -710,7 +693,7 @@ afterSetup: function(effect) { effect.element.makePositioned(); effect.element.down().makePositioned(); - if(window.opera) effect.element.setStyle({top: ''}); + if (window.opera) effect.element.setStyle({top: ''}); effect.element.makeClipping().setStyle({height: '0px'}).show(); }, afterUpdateInternal: function(effect) { @@ -720,23 +703,25 @@ afterFinishInternal: function(effect) { effect.element.undoClipping().undoPositioned(); effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; Effect.SlideUp = function(element) { element = $(element).cleanWhitespace(); var oldInnerBottom = element.down().getStyle('bottom'); + var elementDimensions = element.getDimensions(); return new Effect.Scale(element, window.opera ? 0 : 1, Object.extend({ scaleContent: false, scaleX: false, scaleMode: 'box', scaleFrom: 100, + scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width}, restoreAfterFinish: true, - beforeStartInternal: function(effect) { + afterSetup: function(effect) { effect.element.makePositioned(); effect.element.down().makePositioned(); - if(window.opera) effect.element.setStyle({top: ''}); + if (window.opera) effect.element.setStyle({top: ''}); effect.element.makeClipping().show(); }, afterUpdateInternal: function(effect) { @@ -744,12 +729,12 @@ (effect.dims[0] - effect.element.clientHeight) + 'px' }); }, afterFinishInternal: function(effect) { - effect.element.hide().undoClipping().undoPositioned().setStyle({bottom: oldInnerBottom}); - effect.element.down().undoPositioned(); + effect.element.hide().undoClipping().undoPositioned(); + effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); } - }, arguments[1] || {}) + }, arguments[1] || { }) ); -} +}; // Bug in opera makes the TD containing this element expand for a instance after finish Effect.Squish = function(element) { @@ -762,7 +747,7 @@ effect.element.hide().undoClipping(); } }); -} +}; Effect.Grow = function(element) { element = $(element); @@ -771,7 +756,7 @@ moveTransition: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.full - }, arguments[1] || {}); + }, arguments[1] || { }); var oldStyle = { top: element.style.top, left: element.style.left, @@ -836,7 +821,7 @@ ) } }); -} +}; Effect.Shrink = function(element) { element = $(element); @@ -845,7 +830,7 @@ moveTransition: Effect.Transitions.sinoidal, scaleTransition: Effect.Transitions.sinoidal, opacityTransition: Effect.Transitions.none - }, arguments[1] || {}); + }, arguments[1] || { }); var oldStyle = { top: element.style.top, left: element.style.left, @@ -890,11 +875,11 @@ effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); } }, options) ); -} +}; Effect.Pulsate = function(element) { element = $(element); - var options = arguments[1] || {}; + 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, options.pulses)) }; @@ -903,7 +888,7 @@ Object.extend(Object.extend({ duration: 2.0, from: 0, afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); } }, options), {transition: reverser})); -} +}; Effect.Fold = function(element) { element = $(element); @@ -923,46 +908,43 @@ afterFinishInternal: function(effect) { effect.element.hide().undoClipping().setStyle(oldStyle); } }); - }}, arguments[1] || {})); + }}, arguments[1] || { })); }; -Effect.Morph = Class.create(); -Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), { +Effect.Morph = Class.create(Effect.Base, { initialize: function(element) { this.element = $(element); - if(!this.element) throw(Effect._elementDoesNotExistError); + if (!this.element) throw(Effect._elementDoesNotExistError); var options = Object.extend({ - style: {} - }, arguments[1] || {}); - if (typeof options.style == 'string') { - if(options.style.indexOf(':') == -1) { - var cssText = '', selector = '.' + options.style; - $A(document.styleSheets).reverse().each(function(styleSheet) { - if (styleSheet.cssRules) cssRules = styleSheet.cssRules; - else if (styleSheet.rules) cssRules = styleSheet.rules; - $A(cssRules).reverse().each(function(rule) { - if (selector == rule.selectorText) { - cssText = rule.style.cssText; - throw $break; - } - }); - if (cssText) throw $break; + style: { } + }, arguments[1] || { }); + + if (!Object.isString(options.style)) this.style = $H(options.style); + else { + if (options.style.include(':')) + this.style = options.style.parseStyle(); + else { + this.element.addClassName(options.style); + this.style = $H(this.element.getStyles()); + this.element.removeClassName(options.style); + var css = this.element.getStyles(); + this.style = this.style.reject(function(style) { + return style.value == css[style.key]; }); - this.style = cssText.parseStyle(); - options.afterFinishInternal = function(effect){ + options.afterFinishInternal = function(effect) { effect.element.addClassName(effect.options.style); effect.transforms.each(function(transform) { - if(transform.style != 'opacity') - effect.element.style[transform.style] = ''; + effect.element.style[transform.style] = ''; }); } - } else this.style = options.style.parseStyle(); - } else this.style = $H(options.style) + } + } this.start(options); }, + setup: function(){ function parseColor(color){ - if(!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; + if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff'; color = color.parseColor(); return $R(0,2).map(function(i){ return parseInt( color.slice(i*2+1,i*2+3), 16 ) @@ -971,14 +953,14 @@ this.transforms = this.style.map(function(pair){ var property = pair[0], value = pair[1], unit = null; - if(value.parseColor('#zzzzzz') != '#zzzzzz') { + if (value.parseColor('#zzzzzz') != '#zzzzzz') { value = value.parseColor(); unit = 'color'; - } else if(property == 'opacity') { + } else if (property == 'opacity') { value = parseFloat(value); - if(Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) + if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout)) this.element.setStyle({zoom: 1}); - } else if(Element.CSS_LENGTH.test(value)) { + } else if (Element.CSS_LENGTH.test(value)) { var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/); value = parseFloat(components[1]); unit = (components.length == 3) ? components[2] : null; @@ -1002,7 +984,7 @@ }); }, update: function(position) { - var style = {}, transform, i = this.transforms.length; + var style = { }, transform, i = this.transforms.length; while(i--) style[(transform = this.transforms[i]).style] = transform.unit=='color' ? '#'+ @@ -1012,24 +994,25 @@ (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() + (Math.round(transform.originalValue[2]+ (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() : - transform.originalValue + Math.round( - ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit; + (transform.originalValue + + (transform.targetValue - transform.originalValue) * position).toFixed(3) + + (transform.unit === null ? '' : transform.unit); this.element.setStyle(style, true); } }); -Effect.Transform = Class.create(); -Object.extend(Effect.Transform.prototype, { +Effect.Transform = Class.create({ initialize: function(tracks){ this.tracks = []; - this.options = arguments[1] || {}; + this.options = arguments[1] || { }; this.addTracks(tracks); }, addTracks: function(tracks){ tracks.each(function(track){ - var data = $H(track).values().first(); + track = $H(track); + var data = track.values().first(); this.tracks.push($H({ - ids: $H(track).keys().first(), + ids: track.keys().first(), effect: Effect.Morph, options: { style: data } })); @@ -1039,8 +1022,9 @@ play: function(){ return new Effect.Parallel( this.tracks.map(function(track){ - var elements = [$(track.ids) || $$(track.ids)].flatten(); - return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) }); + var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options'); + var elements = [$(ids) || $$(ids)].flatten(); + return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) }); }).flatten(), this.options ); @@ -1060,35 +1044,79 @@ Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/; +String.__parseStyleElement = document.createElement('div'); String.prototype.parseStyle = function(){ - var element = document.createElement('div'); - element.innerHTML = '<div style="' + this + '"></div>'; - var style = element.childNodes[0].style, styleRules = $H(); + var style, styleRules = $H(); + if (Prototype.Browser.WebKit) + style = new Element('div',{style:this}).style; + else { + String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>'; + style = String.__parseStyleElement.childNodes[0].style; + } Element.CSS_PROPERTIES.each(function(property){ - if(style[property]) styleRules[property] = style[property]; + if (style[property]) styleRules.set(property, style[property]); }); - if(Prototype.Browser.IE && this.indexOf('opacity') > -1) { - styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]; - } + + if (Prototype.Browser.IE && this.include('opacity')) + styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]); + return styleRules; }; -Element.morph = function(element, style) { - new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {})); - return element; +if (document.defaultView && document.defaultView.getComputedStyle) { + Element.getStyles = function(element) { + var css = document.defaultView.getComputedStyle($(element), null); + return Element.CSS_PROPERTIES.inject({ }, function(styles, property) { + styles[property] = css[property]; + return styles; + }); + }; +} else { + Element.getStyles = function(element) { + element = $(element); + var css = element.currentStyle, styles; + styles = Element.CSS_PROPERTIES.inject({ }, function(hash, property) { + hash.set(property, css[property]); + return hash; + }); + if (!styles.opacity) styles.set('opacity', element.getOpacity()); + return styles; + }; }; -['getInlineOpacity','forceRerendering','setContentZoom', - 'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( - function(f) { Element.Methods[f] = Element[f]; } +Effect.Methods = { + morph: function(element, style) { + element = $(element); + new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { })); + return element; + }, + visualEffect: function(element, effect, options) { + element = $(element) + var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1); + new Effect[klass](element, options); + return element; + }, + highlight: function(element, options) { + element = $(element); + new Effect.Highlight(element, options); + return element; + } +}; + +$w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+ + 'pulsate shake puff squish switchOff dropOut').each( + function(effect) { + Effect.Methods[effect] = function(element, options){ + element = $(element); + Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options); + return element; + } + } ); -Element.Methods.visualEffect = function(element, effect, options) { - s = effect.dasherize().camelize(); - effect_class = s.charAt(0).toUpperCase() + s.substring(1); - new Effect[effect_class](element, options); - return $(element); -}; +$w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each( + function(f) { Effect.Methods[f] = Element[f]; } +); -Element.addMethods(); \ No newline at end of file +Element.addMethods(Effect.Methods); Modified: trunk/framework/impl/src/main/javascript/scriptaculous/slider.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/slider.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/slider.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,12 +1,11 @@ -// script.aculo.us slider.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us slider.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Marty Haught, Thomas Fuchs // // 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(!Control) var Control = {}; -Control.Slider = Class.create(); +if (!Control) var Control = { }; // options: // axis: 'vertical', or 'horizontal' (default) @@ -14,18 +13,18 @@ // callbacks: // onChange(value) // onSlide(value) -Control.Slider.prototype = { +Control.Slider = Class.create({ initialize: function(handle, track, options) { var slider = this; - if(handle instanceof Array) { + if (Object.isArray(handle)) { this.handles = handle.collect( function(e) { return $(e) }); } else { this.handles = [$(handle)]; } this.track = $(track); - this.options = options || {}; + this.options = options || { }; this.axis = this.options.axis || 'horizontal'; this.increment = this.options.increment || 1; @@ -59,11 +58,11 @@ this.dragging = false; this.disabled = false; - if(this.options.disabled) this.setDisabled(); + if (this.options.disabled) this.setDisabled(); // Allowed values array this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false; - if(this.allowedValues) { + if (this.allowedValues) { this.minimum = this.allowedValues.min(); this.maximum = this.allowedValues.max(); } @@ -76,16 +75,15 @@ this.handles.each( function(h,i) { i = slider.handles.length-1-i; slider.setValue(parseFloat( - (slider.options.sliderValue instanceof Array ? + (Object.isArray(slider.options.sliderValue) ? slider.options.sliderValue[i] : slider.options.sliderValue) || slider.range.start), i); - Element.makePositioned(h); // fix IE - Event.observe(h, "mousedown", slider.eventMouseDown); + h.makePositioned().observe("mousedown", slider.eventMouseDown); }); - Event.observe(this.track, "mousedown", this.eventMouseDown); - Event.observe(document, "mouseup", this.eventMouseUp); - Event.observe(document, "mousemove", this.eventMouseMove); + this.track.observe("mousedown", this.eventMouseDown); + document.observe("mouseup", this.eventMouseUp); + document.observe("mousemove", this.eventMouseMove); this.initialized = true; }, @@ -105,36 +103,36 @@ this.disabled = false; }, getNearestValue: function(value){ - if(this.allowedValues){ - if(value >= this.allowedValues.max()) return(this.allowedValues.max()); - if(value <= this.allowedValues.min()) return(this.allowedValues.min()); + if (this.allowedValues){ + if (value >= this.allowedValues.max()) return(this.allowedValues.max()); + if (value <= this.allowedValues.min()) return(this.allowedValues.min()); var offset = Math.abs(this.allowedValues[0] - value); var newValue = this.allowedValues[0]; this.allowedValues.each( function(v) { var currentOffset = Math.abs(v - value); - if(currentOffset <= offset){ + if (currentOffset <= offset){ newValue = v; offset = currentOffset; } }); return newValue; } - if(value > this.range.end) return this.range.end; - if(value < this.range.start) return this.range.start; + if (value > this.range.end) return this.range.end; + if (value < this.range.start) return this.range.start; return value; }, setValue: function(sliderValue, handleIdx){ - if(!this.active) { + if (!this.active) { this.activeHandleIdx = handleIdx || 0; this.activeHandle = this.handles[this.activeHandleIdx]; this.updateStyles(); } handleIdx = handleIdx || this.activeHandleIdx || 0; - if(this.initialized && this.restricted) { - if((handleIdx>0) && (sliderValue<this.values[handleIdx-1])) + if (this.initialized && this.restricted) { + if ((handleIdx>0) && (sliderValue<this.values[handleIdx-1])) sliderValue = this.values[handleIdx-1]; - if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1])) + if ((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1])) sliderValue = this.values[handleIdx+1]; } sliderValue = this.getNearestValue(sliderValue); @@ -145,7 +143,7 @@ this.translateToPx(sliderValue); this.drawSpans(); - if(!this.dragging || !this.event) this.updateFinished(); + if (!this.dragging || !this.event) this.updateFinished(); }, setValueBy: function(delta, handleIdx) { this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta, @@ -173,24 +171,24 @@ (this.track.offsetHeight != 0 ? this.track.offsetHeight : this.track.style.height.replace(/px$/,"")) - this.alignY : (this.track.offsetWidth != 0 ? this.track.offsetWidth : - this.track.style.width.replace(/px$/,"")) - this.alignY); + this.track.style.width.replace(/px$/,"")) - this.alignX); }, isVertical: function(){ return (this.axis == 'vertical'); }, drawSpans: function() { var slider = this; - if(this.spans) + if (this.spans) $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) }); - if(this.options.startSpan) + if (this.options.startSpan) this.setSpan(this.options.startSpan, $R(0, this.values.length>1 ? this.getRange(0).min() : this.value )); - if(this.options.endSpan) + if (this.options.endSpan) this.setSpan(this.options.endSpan, $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum)); }, setSpan: function(span, range) { - if(this.isVertical()) { + if (this.isVertical()) { span.style.top = this.translateToPx(range.start); span.style.height = this.translateToPx(range.end - range.start + this.range.start); } else { @@ -203,14 +201,14 @@ Element.addClassName(this.activeHandle, 'selected'); }, startDrag: function(event) { - if(Event.isLeftClick(event)) { - if(!this.disabled){ + if (Event.isLeftClick(event)) { + if (!this.disabled){ this.active = true; var handle = Event.element(event); var pointer = [Event.pointerX(event), Event.pointerY(event)]; var track = handle; - if(track==this.track) { + if (track==this.track) { var offsets = Position.cumulativeOffset(this.track); this.event = event; this.setValue(this.translateToValue( @@ -224,7 +222,7 @@ while((this.handles.indexOf(handle) == -1) && handle.parentNode) handle = handle.parentNode; - if(this.handles.indexOf(handle)!=-1) { + if (this.handles.indexOf(handle)!=-1) { this.activeHandle = handle; this.activeHandleIdx = this.handles.indexOf(this.activeHandle); this.updateStyles(); @@ -239,10 +237,10 @@ } }, update: function(event) { - if(this.active) { - if(!this.dragging) this.dragging = true; + if (this.active) { + if (!this.dragging) this.dragging = true; this.draw(event); - if(Prototype.Browser.WebKit) window.scrollBy(0,0); + if (Prototype.Browser.WebKit) window.scrollBy(0,0); Event.stop(event); } }, @@ -253,11 +251,11 @@ pointer[1] -= this.offsetY + offsets[1]; this.event = event; this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] )); - if(this.initialized && this.options.onSlide) + if (this.initialized && this.options.onSlide) this.options.onSlide(this.values.length>1 ? this.values : this.value, this); }, endDrag: function(event) { - if(this.active && this.dragging) { + if (this.active && this.dragging) { this.finishDrag(event, true); Event.stop(event); } @@ -270,8 +268,8 @@ this.updateFinished(); }, updateFinished: function() { - if(this.initialized && this.options.onChange) + if (this.initialized && this.options.onChange) this.options.onChange(this.values.length>1 ? this.values : this.value, this); this.event = null; } -} \ No newline at end of file +}); Modified: trunk/framework/impl/src/main/javascript/scriptaculous/sound.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/sound.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/sound.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us sound.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us sound.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // @@ -39,16 +39,11 @@ this.tracks[options.track].id++; options.id = this.tracks[options.track].id; - if (Prototype.Browser.IE) { - var sound = document.createElement('bgsound'); - sound.setAttribute('id','sound_'+options.track+'_'+options.id); - sound.setAttribute('src',options.url); - sound.setAttribute('loop','1'); - sound.setAttribute('autostart','true'); - $$('body')[0].appendChild(sound); - } - else - new Insertion.Bottom($$('body')[0], Sound.template.evaluate(options)); + $$('body')[0].insert( + Prototype.Browser.IE ? new Element('bgsound',{ + id: 'sound_'+options.track+'_'+options.id, + src: options.url, loop: 1, autostart: true + }) : Sound.template.evaluate(options)); } }; Modified: trunk/framework/impl/src/main/javascript/scriptaculous/unittest.js =================================================================== --- trunk/framework/impl/src/main/javascript/scriptaculous/unittest.js 2007-11-28 20:23:44 UTC (rev 4335) +++ trunk/framework/impl/src/main/javascript/scriptaculous/unittest.js 2007-11-28 20:25:28 UTC (rev 4336) @@ -1,4 +1,4 @@ -// script.aculo.us unittest.js v1.7.1_beta3, Fri May 25 17:19:41 +0200 2007 +// script.aculo.us unittest.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007 // Copyright (c) 2005-2007 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us) // (c) 2005-2007 Jon Tirsen (http://www.tirsen.com) @@ -524,15 +524,19 @@ shouldNotBe: 'assertReturnsFalse', shouldRespondTo: 'assertRespondsTo' }; - Test.BDDMethods = {}; - for(m in METHODMAP) { - Test.BDDMethods[m] = eval( - 'function(){'+ - 'var args = $A(arguments);'+ - 'var scope = args.shift();'+ - 'scope.'+METHODMAP[m]+'.apply(scope,(args || []).concat([this])); }'); + var makeAssertion = function(assertion, args, object) { + this[assertion].apply(this,(args || []).concat([object])); } - [Array.prototype, String.prototype, Number.prototype].each( + + Test.BDDMethods = {}; + $H(METHODMAP).each(function(pair) { + Test.BDDMethods[pair.key] = function() { + var args = $A(arguments); + var scope = args.shift(); + makeAssertion.apply(scope, [pair.value, args, this]); }; + }); + + [Array.prototype, String.prototype, Number.prototype, Boolean.prototype].each( function(p){ Object.extend(p, Test.BDDMethods) } ); }