// Name: Animation.AnimationBehavior.debug.js // Assembly: AjaxControlToolkit // Version: 4.5.7.1213 // FileVersion: 4.5.7.1213 // (c) 2010 CodePlex Foundation /// /// /// /// /// /// /// (function() { var scriptName = "ExtendedAnimationBehavior"; function execute() { Type.registerNamespace('Sys.Extended.UI.Animation'); Sys.Extended.UI.Animation.AnimationBehavior = function(element) { /// /// The AnimationBehavior allows us to associate animations (described by JSON) with events and /// have them play when the events are fired. It relies heavily on the AJAX Control Toolkit /// animation framework provided in Animation.js, and the GenericAnimationBehavior defined below. /// /// /// The DOM element the behavior is associated with /// Sys.Extended.UI.Animation.AnimationBehavior.initializeBase(this, [element]); this._onLoad = null; this._onClick = null; this._onMouseOver = null; this._onMouseOut = null; this._onHoverOver = null; this._onHoverOut = null; this._onClickHandler = null; this._onMouseOverHandler = null; this._onMouseOutHandler = null; } Sys.Extended.UI.Animation.AnimationBehavior.prototype = { initialize : function() { /// /// Setup the animations/handlers /// /// Sys.Extended.UI.Animation.AnimationBehavior.callBaseMethod(this, 'initialize'); var element = this.get_element(); if (element) { this._onClickHandler = Function.createDelegate(this, this.OnClick); $addHandler(element, 'click', this._onClickHandler); this._onMouseOverHandler = Function.createDelegate(this, this.OnMouseOver); $addHandler(element, 'mouseover', this._onMouseOverHandler); this._onMouseOutHandler = Function.createDelegate(this, this.OnMouseOut); $addHandler(element, 'mouseout', this._onMouseOutHandler); } }, dispose : function() { /// /// Dispose of the animations/handlers /// /// var element = this.get_element(); if (element) { if (this._onClickHandler) { $removeHandler(element, 'click', this._onClickHandler); this._onClickHandler = null; } if (this._onMouseOverHandler) { $removeHandler(element, 'mouseover', this._onMouseOverHandler); this._onMouseOverHandler = null; } if (this._onMouseOutHandler) { $removeHandler(element, 'mouseout', this._onMouseOutHandler); this._onMouseOutHandler = null; } } this._onLoad = null; this._onClick = null; this._onMouseOver = null; this._onMouseOut = null; this._onHoverOver = null; this._onHoverOut = null; Sys.Extended.UI.Animation.AnimationBehavior.callBaseMethod(this, 'dispose'); }, get_OnLoad : function() { /// /// Generic OnLoad Animation's JSON definition /// /// /// Setting the OnLoad property will cause it to be played immediately /// return this._onLoad ? this._onLoad.get_json() : null; }, set_OnLoad : function(value) { if (!this._onLoad) { this._onLoad = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onLoad.initialize(); } this._onLoad.set_json(value); this.raisePropertyChanged('OnLoad'); this._onLoad.play(); }, get_OnLoadBehavior : function() { /// /// Generic OnLoad Animation's behavior /// return this._onLoad; }, get_OnClick : function() { /// /// Generic OnClick Animation's JSON definition /// return this._onClick ? this._onClick.get_json() : null; }, set_OnClick : function(value) { if (!this._onClick) { this._onClick = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onClick.initialize(); } this._onClick.set_json(value); this.raisePropertyChanged('OnClick'); }, get_OnClickBehavior : function() { /// /// Generic OnClick Animation's behavior /// return this._onClick; }, OnClick : function() { /// /// Play the OnClick animation /// /// if (this._onClick) { this._onClick.play(); } }, get_OnMouseOver : function() { /// /// Generic OnMouseOver Animation's JSON definition /// return this._onMouseOver ? this._onMouseOver.get_json() : null; }, set_OnMouseOver : function(value) { if (!this._onMouseOver) { this._onMouseOver = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onMouseOver.initialize(); } this._onMouseOver.set_json(value); this.raisePropertyChanged('OnMouseOver'); }, get_OnMouseOverBehavior : function() { /// /// Generic OnMouseOver Animation's behavior /// return this._onMouseOver; }, OnMouseOver : function() { /// /// Play the OnMouseOver/OnHoverOver animations /// /// if (this._mouseHasEntered) { return; } if (this._onMouseOver) { this._onMouseOver.play(); } if (this._onHoverOver) { if (this._onHoverOut) { this._onHoverOut.quit(); } this._onHoverOver.play(); } this._mouseHasEntered = true; }, get_OnMouseOut : function() { /// /// Generic OnMouseOut Animation's JSON definition /// return this._onMouseOut ? this._onMouseOut.get_json() : null; }, set_OnMouseOut : function(value) { if (!this._onMouseOut) { this._onMouseOut = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onMouseOut.initialize(); } this._onMouseOut.set_json(value); this.raisePropertyChanged('OnMouseOut'); }, get_OnMouseOutBehavior : function() { /// /// Generic OnMouseOut Animation's behavior /// return this._onMouseOut; }, OnMouseOut: function(e) { /// /// Play the OnMouseOver/OnHoverOver animations /// /// var ev = e.rawEvent; var pt = this.get_element(); var tg = e.target; if (tg.nodeName !== pt.nodeName) return; var rel = ev.relatedTarget || ev.toElement; if (pt != rel && !this._isChild(pt, rel)) { this._mouseHasEntered = false; if (this._onMouseOut) { this._onMouseOut.play(); } if (this._onHoverOut) { if (this._onHoverOver) { this._onHoverOver.quit(); } this._onHoverOut.play(); } } }, _isChild: function(elmtA, elmtB) { var body = document.body; while (elmtB && elmtA != elmtB && body != elmtB) { try { elmtB = elmtB.parentNode; } catch (e) { return false; } } return elmtA == elmtB; }, get_OnHoverOver : function() { /// /// Generic OnHoverOver Animation's JSON definition /// return this._onHoverOver ? this._onHoverOver.get_json() : null; }, set_OnHoverOver : function(value) { if (!this._onHoverOver) { this._onHoverOver = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onHoverOver.initialize(); } this._onHoverOver.set_json(value); this.raisePropertyChanged('OnHoverOver'); }, get_OnHoverOverBehavior : function() { /// /// Generic OnHoverOver Animation's behavior /// return this._onHoverOver; }, get_OnHoverOut : function() { /// /// Generic OnHoverOut Animation's JSON definition /// return this._onHoverOut ? this._onHoverOut.get_json() : null; }, set_OnHoverOut : function(value) { if (!this._onHoverOut) { this._onHoverOut = new Sys.Extended.UI.Animation.GenericAnimationBehavior(this.get_element()); this._onHoverOut.initialize(); } this._onHoverOut.set_json(value); this.raisePropertyChanged('OnHoverOut'); }, get_OnHoverOutBehavior : function() { /// /// Generic OnHoverOut Animation's behavior /// return this._onHoverOut; } } Sys.Extended.UI.Animation.AnimationBehavior.registerClass('Sys.Extended.UI.Animation.AnimationBehavior', Sys.Extended.UI.BehaviorBase); Sys.Extended.UI.Animation.GenericAnimationBehavior = function(element) { /// /// The GenericAnimationBehavior handles the creation, playing, and disposing of animations /// created from a JSON description. As we intend to expose a lot of generic animations /// across the Toolkit, this behavior serves to simplify the amount of work required. /// /// /// The DOM element the behavior is associated with /// Sys.Extended.UI.Animation.GenericAnimationBehavior.initializeBase(this, [element]); this._json = null; this._animation = null; } Sys.Extended.UI.Animation.GenericAnimationBehavior.prototype = { dispose : function() { /// /// Dispose the behavior and its animation /// /// this.disposeAnimation(); Sys.Extended.UI.Animation.GenericAnimationBehavior.callBaseMethod(this, 'dispose'); }, disposeAnimation : function() { /// /// Dispose the animation /// /// if (this._animation) { this._animation.dispose(); } this._animation = null; }, play : function() { /// /// Play the animation if it isn't already playing. If it's already playing, this does nothing. /// /// if (this._animation && !this._animation.get_isPlaying()) { this.stop(); this._animation.play(); } }, stop : function() { /// /// Stop the animation if it's already playing /// /// if (this._animation) { if (this._animation.get_isPlaying()) { this._animation.stop(true); } } }, quit : function() { /// /// Quit playing the animation without updating the final state (i.e. if /// the animation was moving, this would leave it in the middle of its path). /// /// /// /// This differs from the stop function which will update the final state. The /// quit function is most useful for scenarios where you're toggling back and forth /// between two animations (like those used in OnHoverOver/OnHoverOut) and you don't /// want to completely finish one animation if its counterpart is triggered. /// if (this._animation) { if (this._animation.get_isPlaying()) { this._animation.stop(false); } } }, get_json : function() { /// /// JSON animation description /// return this._json; }, set_json : function(value) { if (this._json != value) { this._json = value; this.raisePropertyChanged('json'); this.disposeAnimation(); var element = this.get_element(); if (element) { this._animation = Sys.Extended.UI.Animation.buildAnimation(this._json, element); if (this._animation) { this._animation.initialize(); } this.raisePropertyChanged('animation'); } } }, get_animation : function() { /// /// Animation created from the JSON description /// return this._animation; } } Sys.Extended.UI.Animation.GenericAnimationBehavior.registerClass('Sys.Extended.UI.Animation.GenericAnimationBehavior', Sys.Extended.UI.BehaviorBase); } // execute if (window.Sys && Sys.loader) { Sys.loader.registerScript(scriptName, ["ExtendedAnimations", "ExtendedBase"], execute); } else { execute(); } })();