diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/fx/dom.js')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/fx/dom.js | 653 |
1 files changed, 0 insertions, 653 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/fx/dom.js b/contexts/data/lib/closure-library/closure/goog/fx/dom.js deleted file mode 100644 index 0d32cf1..0000000 --- a/contexts/data/lib/closure-library/closure/goog/fx/dom.js +++ /dev/null @@ -1,653 +0,0 @@ -// Copyright 2005 The Closure Library Authors. All Rights Reserved. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS-IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -/** - * @fileoverview Predefined DHTML animations such as slide, resize and fade. - * - * @see ../demos/effects.html - */ - -goog.provide('goog.fx.dom'); -goog.provide('goog.fx.dom.BgColorTransform'); -goog.provide('goog.fx.dom.ColorTransform'); -goog.provide('goog.fx.dom.Fade'); -goog.provide('goog.fx.dom.FadeIn'); -goog.provide('goog.fx.dom.FadeInAndShow'); -goog.provide('goog.fx.dom.FadeOut'); -goog.provide('goog.fx.dom.FadeOutAndHide'); -goog.provide('goog.fx.dom.PredefinedEffect'); -goog.provide('goog.fx.dom.Resize'); -goog.provide('goog.fx.dom.ResizeHeight'); -goog.provide('goog.fx.dom.ResizeWidth'); -goog.provide('goog.fx.dom.Scroll'); -goog.provide('goog.fx.dom.Slide'); -goog.provide('goog.fx.dom.SlideFrom'); -goog.provide('goog.fx.dom.Swipe'); - -goog.require('goog.color'); -goog.require('goog.events'); -goog.require('goog.fx.Animation'); -goog.require('goog.fx.Transition.EventType'); -goog.require('goog.style'); -goog.require('goog.style.bidi'); - - - -/** - * Abstract class that provides reusable functionality for predefined animations - * that manipulate a single DOM element - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start Array for start coordinates. - * @param {Array.<number>} end Array for end coordinates. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.Animation} - * @constructor - */ -goog.fx.dom.PredefinedEffect = function(element, start, end, time, opt_acc) { - goog.fx.Animation.call(this, start, end, time, opt_acc); - - /** - * DOM Node that will be used in the animation - * @type {Element} - */ - this.element = element; - - /** - * Whether the element is rendered right-to-left. We cache this here for - * efficiency. - * @type {boolean|undefined} - * @private - */ - this.rightToLeft_; -}; -goog.inherits(goog.fx.dom.PredefinedEffect, goog.fx.Animation); - - -/** - * Called to update the style of the element. - * @protected - */ -goog.fx.dom.PredefinedEffect.prototype.updateStyle = goog.nullFunction; - - -/** - * Whether the element is rendered right-to-left. We initialize this lazily. - * @type {boolean|undefined} - * @private - */ -goog.fx.dom.PredefinedEffect.prototype.rightToLeft_; - - -/** - * Whether the DOM element being manipulated is rendered right-to-left. - * @return {boolean} True if the DOM element is rendered right-to-left, false - * otherwise. - */ -goog.fx.dom.PredefinedEffect.prototype.isRightToLeft = function() { - if (!goog.isDef(this.rightToLeft_)) { - this.rightToLeft_ = goog.style.isRightToLeft(this.element); - } - return this.rightToLeft_; -}; - - -/** @override */ -goog.fx.dom.PredefinedEffect.prototype.onAnimate = function() { - this.updateStyle(); - goog.fx.dom.PredefinedEffect.superClass_.onAnimate.call(this); -}; - - -/** @override */ -goog.fx.dom.PredefinedEffect.prototype.onEnd = function() { - this.updateStyle(); - goog.fx.dom.PredefinedEffect.superClass_.onEnd.call(this); -}; - - -/** @override */ -goog.fx.dom.PredefinedEffect.prototype.onBegin = function() { - this.updateStyle(); - goog.fx.dom.PredefinedEffect.superClass_.onBegin.call(this); -}; - - - -/** - * Creates an animation object that will slide an element from A to B. (This - * in effect automatically sets up the onanimate event for an Animation object) - * - * Start and End should be 2 dimensional arrays - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 2D array for start coordinates (X, Y). - * @param {Array.<number>} end 2D array for end coordinates (X, Y). - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.Slide = function(element, start, end, time, opt_acc) { - if (start.length != 2 || end.length != 2) { - throw Error('Start and end points must be 2D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); -}; -goog.inherits(goog.fx.dom.Slide, goog.fx.dom.PredefinedEffect); - - -/** @override */ -goog.fx.dom.Slide.prototype.updateStyle = function() { - var pos = (this.isRightPositioningForRtlEnabled() && this.isRightToLeft()) ? - 'right' : 'left'; - this.element.style[pos] = Math.round(this.coords[0]) + 'px'; - this.element.style.top = Math.round(this.coords[1]) + 'px'; -}; - - - -/** - * Slides an element from its current position. - * - * @param {Element} element DOM node to be used in the animation. - * @param {Array.<number>} end 2D array for end coordinates (X, Y). - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.Slide} - * @constructor - */ -goog.fx.dom.SlideFrom = function(element, end, time, opt_acc) { - var offsetLeft = this.isRightPositioningForRtlEnabled() ? - goog.style.bidi.getOffsetStart(element) : element.offsetLeft; - var start = [offsetLeft, element.offsetTop]; - goog.fx.dom.Slide.call(this, element, start, end, time, opt_acc); -}; -goog.inherits(goog.fx.dom.SlideFrom, goog.fx.dom.Slide); - - -/** @override */ -goog.fx.dom.SlideFrom.prototype.onBegin = function() { - var offsetLeft = this.isRightPositioningForRtlEnabled() ? - goog.style.bidi.getOffsetStart(this.element) : this.element.offsetLeft; - this.startPoint = [offsetLeft, this.element.offsetTop]; - goog.fx.dom.SlideFrom.superClass_.onBegin.call(this); -}; - - - -/** - * Creates an animation object that will slide an element into its final size. - * Requires that the element is absolutely positioned. - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 2D array for start size (W, H). - * @param {Array.<number>} end 2D array for end size (W, H). - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.Swipe = function(element, start, end, time, opt_acc) { - if (start.length != 2 || end.length != 2) { - throw Error('Start and end points must be 2D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); - - /* - * Maximum width for element. - * @type {number} - * @private - */ - this.maxWidth_ = Math.max(this.endPoint[0], this.startPoint[0]); - - /* - * Maximum height for element. - * @type {number} - * @private - */ - this.maxHeight_ = Math.max(this.endPoint[1], this.startPoint[1]); -}; -goog.inherits(goog.fx.dom.Swipe, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will resize an element by setting its width, - * height and clipping. - * @protected - * @override - */ -goog.fx.dom.Swipe.prototype.updateStyle = function() { - var x = this.coords[0]; - var y = this.coords[1]; - this.clip_(Math.round(x), Math.round(y), this.maxWidth_, this.maxHeight_); - this.element.style.width = Math.round(x) + 'px'; - var marginX = (this.isRightPositioningForRtlEnabled() && - this.isRightToLeft()) ? 'marginRight' : 'marginLeft'; - - this.element.style[marginX] = Math.round(x) - this.maxWidth_ + 'px'; - this.element.style.marginTop = Math.round(y) - this.maxHeight_ + 'px'; -}; - - -/** - * Helper function for setting element clipping. - * @param {number} x Current element width. - * @param {number} y Current element height. - * @param {number} w Maximum element width. - * @param {number} h Maximum element height. - * @private - */ -goog.fx.dom.Swipe.prototype.clip_ = function(x, y, w, h) { - this.element.style.clip = - 'rect(' + (h - y) + 'px ' + w + 'px ' + h + 'px ' + (w - x) + 'px)'; -}; - - - -/** - * Creates an animation object that will scroll an element from A to B. - * - * Start and End should be 2 dimensional arrays - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 2D array for start scroll left and top. - * @param {Array.<number>} end 2D array for end scroll left and top. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.Scroll = function(element, start, end, time, opt_acc) { - if (start.length != 2 || end.length != 2) { - throw Error('Start and end points must be 2D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); -}; -goog.inherits(goog.fx.dom.Scroll, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will set the scroll posiiton of an element - * @protected - * @override - */ -goog.fx.dom.Scroll.prototype.updateStyle = function() { - if (this.isRightPositioningForRtlEnabled()) { - goog.style.bidi.setScrollOffset(this.element, Math.round(this.coords[0])); - } else { - this.element.scrollLeft = Math.round(this.coords[0]); - } - this.element.scrollTop = Math.round(this.coords[1]); -}; - - - -/** - * Creates an animation object that will resize an element between two widths - * and heights. - * - * Start and End should be 2 dimensional arrays - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 2D array for start width and height. - * @param {Array.<number>} end 2D array for end width and height. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.Resize = function(element, start, end, time, opt_acc) { - if (start.length != 2 || end.length != 2) { - throw Error('Start and end points must be 2D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); -}; -goog.inherits(goog.fx.dom.Resize, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will resize an element by setting its width and - * height. - * @protected - * @override - */ -goog.fx.dom.Resize.prototype.updateStyle = function() { - this.element.style.width = Math.round(this.coords[0]) + 'px'; - this.element.style.height = Math.round(this.coords[1]) + 'px'; -}; - - - -/** - * Creates an animation object that will resize an element between two widths - * - * Start and End should be numbers - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} start Start width. - * @param {number} end End width. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.ResizeWidth = function(element, start, end, time, opt_acc) { - goog.fx.dom.PredefinedEffect.call(this, element, [start], - [end], time, opt_acc); -}; -goog.inherits(goog.fx.dom.ResizeWidth, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will resize an element by setting its width. - * @protected - * @override - */ -goog.fx.dom.ResizeWidth.prototype.updateStyle = function() { - this.element.style.width = Math.round(this.coords[0]) + 'px'; -}; - - - -/** - * Creates an animation object that will resize an element between two heights - * - * Start and End should be numbers - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} start Start height. - * @param {number} end End height. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.ResizeHeight = function(element, start, end, time, opt_acc) { - goog.fx.dom.PredefinedEffect.call(this, element, [start], - [end], time, opt_acc); -}; -goog.inherits(goog.fx.dom.ResizeHeight, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will resize an element by setting its height. - * @protected - * @override - */ -goog.fx.dom.ResizeHeight.prototype.updateStyle = function() { - this.element.style.height = Math.round(this.coords[0]) + 'px'; -}; - - - -/** - * Creates an animation object that fades the opacity of an element between two - * limits. - * - * Start and End should be floats between 0 and 1 - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>|number} start 1D Array or Number with start opacity. - * @param {Array.<number>|number} end 1D Array or Number for end opacity. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.Fade = function(element, start, end, time, opt_acc) { - if (goog.isNumber(start)) start = [start]; - if (goog.isNumber(end)) end = [end]; - - goog.fx.dom.PredefinedEffect.call(this, element, start, end, time, opt_acc); - - if (start.length != 1 || end.length != 1) { - throw Error('Start and end points must be 1D'); - } -}; -goog.inherits(goog.fx.dom.Fade, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will set the opacity of an element. - * @protected - * @override - */ -goog.fx.dom.Fade.prototype.updateStyle = function() { - goog.style.setOpacity(this.element, this.coords[0]); -}; - - -/** - * Animation event handler that will show the element. - */ -goog.fx.dom.Fade.prototype.show = function() { - this.element.style.display = ''; -}; - - -/** - * Animation event handler that will hide the element - */ -goog.fx.dom.Fade.prototype.hide = function() { - this.element.style.display = 'none'; -}; - - - -/** - * Fades an element out from full opacity to completely transparent. - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.Fade} - * @constructor - */ -goog.fx.dom.FadeOut = function(element, time, opt_acc) { - goog.fx.dom.Fade.call(this, element, 1, 0, time, opt_acc); -}; -goog.inherits(goog.fx.dom.FadeOut, goog.fx.dom.Fade); - - - -/** - * Fades an element in from completely transparent to fully opacity. - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.Fade} - * @constructor - */ -goog.fx.dom.FadeIn = function(element, time, opt_acc) { - goog.fx.dom.Fade.call(this, element, 0, 1, time, opt_acc); -}; -goog.inherits(goog.fx.dom.FadeIn, goog.fx.dom.Fade); - - - -/** - * Fades an element out from full opacity to completely transparent and then - * sets the display to 'none' - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.Fade} - * @constructor - */ -goog.fx.dom.FadeOutAndHide = function(element, time, opt_acc) { - goog.fx.dom.Fade.call(this, element, 1, 0, time, opt_acc); -}; -goog.inherits(goog.fx.dom.FadeOutAndHide, goog.fx.dom.Fade); - - -/** @override */ -goog.fx.dom.FadeOutAndHide.prototype.onBegin = function() { - this.show(); - goog.fx.dom.FadeOutAndHide.superClass_.onBegin.call(this); -}; - - -/** @override */ -goog.fx.dom.FadeOutAndHide.prototype.onEnd = function() { - this.hide(); - goog.fx.dom.FadeOutAndHide.superClass_.onEnd.call(this); -}; - - - -/** - * Sets an element's display to be visible and then fades an element in from - * completely transparent to fully opacity - * - * @param {Element} element Dom Node to be used in the animation. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.Fade} - * @constructor - */ -goog.fx.dom.FadeInAndShow = function(element, time, opt_acc) { - goog.fx.dom.Fade.call(this, element, 0, 1, time, opt_acc); -}; -goog.inherits(goog.fx.dom.FadeInAndShow, goog.fx.dom.Fade); - - -/** @override */ -goog.fx.dom.FadeInAndShow.prototype.onBegin = function() { - this.show(); - goog.fx.dom.FadeInAndShow.superClass_.onBegin.call(this); -}; - - - -/** - * Provides a transformation of an elements background-color. - * - * Start and End should be 3D arrays representing R,G,B - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 3D Array for RGB of start color. - * @param {Array.<number>} end 3D Array for RGB of end color. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @extends {goog.fx.dom.PredefinedEffect} - * @constructor - */ -goog.fx.dom.BgColorTransform = function(element, start, end, time, opt_acc) { - if (start.length != 3 || end.length != 3) { - throw Error('Start and end points must be 3D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); -}; -goog.inherits(goog.fx.dom.BgColorTransform, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will set the background-color of an element - */ -goog.fx.dom.BgColorTransform.prototype.setColor = function() { - var coordsAsInts = []; - for (var i = 0; i < this.coords.length; i++) { - coordsAsInts[i] = Math.round(this.coords[i]); - } - var color = 'rgb(' + coordsAsInts.join(',') + ')'; - this.element.style.backgroundColor = color; -}; - - -/** @override */ -goog.fx.dom.BgColorTransform.prototype.updateStyle = function() { - this.setColor(); -}; - - -/** - * Fade elements background color from start color to the element's current - * background color. - * - * Start should be a 3D array representing R,G,B - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 3D Array for RGB of start color. - * @param {number} time Length of animation in milliseconds. - * @param {goog.events.EventHandler=} opt_eventHandler Optional event handler - * to use when listening for events. - */ -goog.fx.dom.bgColorFadeIn = function(element, start, time, opt_eventHandler) { - var initialBgColor = element.style.backgroundColor || ''; - var computedBgColor = goog.style.getBackgroundColor(element); - var end; - - if (computedBgColor && computedBgColor != 'transparent' && - computedBgColor != 'rgba(0, 0, 0, 0)') { - end = goog.color.hexToRgb(goog.color.parse(computedBgColor).hex); - } else { - end = [255, 255, 255]; - } - - var anim = new goog.fx.dom.BgColorTransform(element, start, end, time); - - function setBgColor() { - element.style.backgroundColor = initialBgColor; - } - - if (opt_eventHandler) { - opt_eventHandler.listen( - anim, goog.fx.Transition.EventType.END, setBgColor); - } else { - goog.events.listen( - anim, goog.fx.Transition.EventType.END, setBgColor); - } - - anim.play(); -}; - - - -/** - * Provides a transformation of an elements color. - * - * @param {Element} element Dom Node to be used in the animation. - * @param {Array.<number>} start 3D Array representing R,G,B. - * @param {Array.<number>} end 3D Array representing R,G,B. - * @param {number} time Length of animation in milliseconds. - * @param {Function=} opt_acc Acceleration function, returns 0-1 for inputs 0-1. - * @constructor - * @extends {goog.fx.dom.PredefinedEffect} - */ -goog.fx.dom.ColorTransform = function(element, start, end, time, opt_acc) { - if (start.length != 3 || end.length != 3) { - throw Error('Start and end points must be 3D'); - } - goog.fx.dom.PredefinedEffect.apply(this, arguments); -}; -goog.inherits(goog.fx.dom.ColorTransform, goog.fx.dom.PredefinedEffect); - - -/** - * Animation event handler that will set the color of an element. - * @protected - * @override - */ -goog.fx.dom.ColorTransform.prototype.updateStyle = function() { - var coordsAsInts = []; - for (var i = 0; i < this.coords.length; i++) { - coordsAsInts[i] = Math.round(this.coords[i]); - } - var color = 'rgb(' + coordsAsInts.join(',') + ')'; - this.element.style.color = color; -}; |