// Name: DropShadow.DropShadowBehavior.debug.js // Assembly: AjaxControlToolkit // Version: 4.5.7.1213 // FileVersion: 4.5.7.1213 // (c) 2010 CodePlex Foundation /// /// /// /// /// (function () { var scriptName = "ExtendedDropShadow"; var e = null; function execute() { Type.registerNamespace('Sys.Extended.UI'); Sys.Extended.UI.DropShadowBehavior = function (element) { /// /// The DropShadowBehavior is used to attach a drop shadow to the element /// /// /// DOM Element the behavior is associated with /// Sys.Extended.UI.DropShadowBehavior.initializeBase(this, [element]); this._opacity = 1.0; this._width = 5; this._shadowDiv = null; this._trackPosition = null; this._trackPositionDelay = 50; this._timer = null; this._tickHandler = null; this._roundedBehavior = null; this._shadowRoundedBehavior = null; this._rounded = false; this._radius = 5; this._lastX = null; this._lastY = null; this._lastW = null; this._lastH = null; } Sys.Extended.UI.DropShadowBehavior.prototype = { initialize: function () { /// /// Initialize the behavior /// Sys.Extended.UI.DropShadowBehavior.callBaseMethod(this, 'initialize'); e = this.get_element(); if ($common.getCurrentStyle(e, 'position', e.style.position) != "absolute") { e.style.position = "relative"; } if (this._rounded) { this.setupRounded(); } if (this._trackPosition) { this.startTimer(); } this.setShadow(); }, dispose: function () { /// /// Dispose the behavior /// this.stopTimer(); this.disposeShadowDiv(); Sys.Extended.UI.DropShadowBehavior.callBaseMethod(this, 'dispose'); }, buildShadowDiv: function () { /// /// Create the div that we'll use as the shadow /// e = this.get_element(); if (!this.get_isInitialized() || !e || !this._width) return; if (e.style.boxShadow == undefined && e.style.MozBoxShadow == undefined && e.style.WebkitBoxShadow == undefined) { var div = document.createElement("DIV"); div.style.backgroundColor = "black"; div.style.position = "absolute"; if (e.id) { div.id = e.id + "_DropShadow"; } this._shadowDiv = div; e.parentNode.appendChild(div); if (this._rounded) { this._shadowDiv.style.height = Math.max(0, e.offsetHeight - (2 * this._radius)) + "px"; if (!this._shadowRoundedBehavior) { this._shadowRoundedBehavior = $create(Sys.Extended.UI.RoundedCornersBehavior, { "Radius": this._radius }, null, null, this._shadowDiv); } else { this._shadowRoundedBehavior.set_Radius(this._radius); } } else if (this._shadowRoundedBehavior) { this._shadowRoundedBehavior.set_Radius(0); } if (this._opacity != 1.0) { this.setupOpacity(); } this.setShadow(false, true); this.updateZIndex(); } }, disposeShadowDiv: function () { /// /// Dispose of the div we use as the shadow /// if (this._shadowDiv) { if (this._shadowDiv.parentNode) { this._shadowDiv.parentNode.removeChild(this._shadowDiv); } this._shadowDiv = null; } if (this._shadowRoundedBehavior) { this._shadowRoundedBehavior.dispose(); this._shadowRoundedBehavior = null; } }, onTimerTick: function () { /// /// Timer's tick handler that is used to position the shadow when its target moves /// this.setShadow(); }, startTimer: function () { /// /// Start the timer (and hence start tracking the bounds of the target element) /// if (!this._timer) { if (!this._tickHandler) { this._tickHandler = Function.createDelegate(this, this.onTimerTick); } this._timer = new Sys.Timer(); this._timer.set_interval(this._trackPositionDelay); this._timer.add_tick(this._tickHandler); this._timer.set_enabled(true); } }, stopTimer: function () { /// /// Stop the timer (and hence stop tracking the bounds of the target element) /// if (this._timer) { this._timer.remove_tick(this._tickHandler); this._timer.set_enabled(false); this._timer.dispose(); this._timer = null; } }, setShadow: function (force, norecurse) { /// /// This function does the heavy lifting of positioning and sizing the shadow. /// It caches values to avoid extra work - it's called on a timer so we need to /// keep it light weight. /// /// /// Whether to force the bounds change /// /// /// Whether to recurse if we need to recreate the shadow div /// e = this.get_element(); if (!this.get_isInitialized() || !e || (!this._width && !force)) return; if (e.style.boxShadow == undefined && e.style.MozBoxShadow == undefined && e.style.WebkitBoxShadow == undefined) { var existingShadow = this._shadowDiv; if (!existingShadow) { this.buildShadowDiv(); } var location = { x: e.offsetLeft, y: e.offsetTop }; if (force || this._lastX != location.x || this._lastY != location.y || !existingShadow) { this._lastX = location.x; this._lastY = location.y; var w = this.get_Width(); location.x += w; location.y += w; $common.setLocation(this._shadowDiv, location); } var h = e.offsetHeight; var w = e.offsetWidth; if (force || h != this._lastH || w != this._lastW || !existingShadow) { this._lastW = w; this._lastH = h; if (!this._rounded || !existingShadow || norecurse) { this._shadowDiv.style.width = w + "px"; this._shadowDiv.style.height = h + "px"; } else { this.disposeShadowDiv(); this.setShadow(); } } if (this._shadowDiv) { this._shadowDiv.style.visibility = $common.getCurrentStyle(e, 'visibility'); } } else { var boxShadowVals; if (this._opacity == ".25") boxShadowVals = this._width + "px " + this._width + "px " + this._width + "px " + "#D3D3D3"; else if (this._opacity == ".5") boxShadowVals = this._width + "px " + this._width + "px " + this._width + "px " + "#778899"; else if (this._opacity == ".75") boxShadowVals = this._width + "px " + this._width + "px " + this._width + "px " + "#808080"; else boxShadowVals = this._width + "px " + this._width + "px " + this._width + "px " + "#000"; if (e.style.boxShadow != undefined) { e.style.boxShadow = boxShadowVals; } else if (e.style.MozBoxShadow != undefined) { e.style.MozBoxShadow = boxShadowVals; } else if (e.style.WebkitBoxShadow != undefined) { e.style.WebkitBoxShadow = boxShadowVals; } } }, setupOpacity: function () { /// /// Set the opacity of the shadow div /// if (this.get_isInitialized() && this._shadowDiv) { $common.setElementOpacity(this._shadowDiv, this._opacity); } }, setupRounded: function () { /// /// Demand create and initialize the RoundedCornersBehavior /// if (!this._roundedBehavior && this._rounded) { this._roundedBehavior = $create(Sys.Extended.UI.RoundedCornersBehavior, null, null, null, this.get_element()); } if (this._roundedBehavior) { this._roundedBehavior.set_Radius(this._rounded ? this._radius : 0); } }, updateZIndex: function () { /// /// Update the z-Index so the shadow div remains behind the target element /// if (!this._shadowDiv) return; var e = this.get_element(); var targetZIndex = e.style.zIndex; var shadowZIndex = this._shadowDiv.style.zIndex; if (shadowZIndex && targetZIndex && targetZIndex > shadowZIndex) { return; } else { targetZIndex = Math.max(2, targetZIndex); shadowZIndex = targetZIndex - 1; } e.style.zIndex = targetZIndex; this._shadowDiv.style.zIndex = shadowZIndex; }, updateRoundedCorners: function () { /// /// Update the RoundedCorndersBehavior and recreate the shadow div so its corners are rounded as well /// if (this.get_isInitialized()) { this.setupRounded(); this.disposeShadowDiv(); this.setShadow(); } }, get_Opacity: function () { /// /// The opacity of the drop shadow, from 0 (fully transparent) to 1.0 (fully opaque). The default value is .5. /// return this._opacity; }, set_Opacity: function (value) { if (this._opacity != value) { this._opacity = value; this.setShadow(); this.setupOpacity(); this.raisePropertyChanged('Opacity'); } }, get_Rounded: function () { /// /// Whether or not the corners of the target and drop shadow should be rounded /// return this._rounded; }, set_Rounded: function (value) { if (value != this._rounded) { this._rounded = value; this.updateRoundedCorners(); this.raisePropertyChanged('Rounded'); } }, get_Radius: function () { /// /// Radius, in pixels, of the rounded corners /// return this._radius; }, set_Radius: function (value) { if (value != this._radius) { this._radius = value; this.updateRoundedCorners(); this.raisePropertyChanged('Radius'); } }, get_Width: function () { /// /// Width in pixels of the drop shadow. The default value is 5 pixels. /// return this._width; }, set_Width: function (value) { if (value != this._width) { this._width = value; if (this._shadowDiv) { $common.setVisible(this._shadowDiv, value > 0); } this.setShadow(true); this.raisePropertyChanged('Width'); } }, get_TrackPositionDelay: function () { /// /// Length of the timer interval used when tracking the position of the target /// return this._trackPositionDelay; }, set_TrackPositionDelay: function (value) { if (value != this._trackPositionDelay) { this._trackPositionDelay = value; if (!e) e = this.get_element(); if (e.style.boxShadow == undefined && e.style.MozBoxShadow == undefined && e.style.WebkitBoxShadow == undefined) { if (this._trackPosition) { this.stopTimer(); this.startTimer(); } this.raisePropertyChanged('TrackPositionDelay'); } } }, get_TrackPosition: function () { /// /// Whether the drop shadow should track the position of the panel it is attached to. Use this if the panel is absolutely positioned or will otherwise move. /// return this._trackPosition; }, set_TrackPosition: function (value) { if (value != this._trackPosition) { this._trackPosition = value; if (!e) e = this.get_element(); if (e.style.boxShadow == undefined && e.style.MozBoxShadow == undefined && e.style.WebkitBoxShadow == undefined) { if (this.get_element()) { if (value) { this.startTimer(); } else { this.stopTimer(); } } this.raisePropertyChanged('TrackPosition'); } } } } Sys.Extended.UI.DropShadowBehavior.registerClass('Sys.Extended.UI.DropShadowBehavior', Sys.Extended.UI.BehaviorBase); Sys.registerComponent(Sys.Extended.UI.DropShadowBehavior, { name: "dropShadow" }); } // execute if (window.Sys && Sys.loader) { Sys.loader.registerScript(scriptName, ["ExtendedBase", "ExtendedCommon", "ExtendedTimer", "ExtendedRoundedCorners"], execute); } else { execute(); } })();