Type.registerNamespace('Sys.Extended.UI');
Sys.Extended.UI.HoverMenuBehavior = function(element) {
// The HoverMenuBehavior is used to display a popup whenever the target is hovered over
Sys.Extended.UI.HoverMenuBehavior.initializeBase(this, [element]);
// Encapsulated behaviors
this._hoverBehavior = null;
this._popupBehavior = null;
// Handler delegates
this._mouseEnterHandler = null;
this._mouseLeaveHandler = null;
this._unhoverHandler = null;
this._hoverHandler = null;
// State variables
this._inHover = null;
this._oldClass = null;
this._popupElement = null;
this._onShowJson = null;
this._onHideJson = null;
// Property values
this._popupElement = null;
this._hoverCssClass = null;
this._offsetX = 0;
this._offsetY = 0;
this._popDelay = 100;
this._hoverDelay = 0;
this._popupPosition = null;
}
Sys.Extended.UI.HoverMenuBehavior.prototype = {
initialize: function() {
Sys.Extended.UI.HoverMenuBehavior.callBaseMethod(this, 'initialize');
// set up our delegates and handlers
this._hoverHandler = Function.createDelegate(this, this._onHover);
this._unhoverHandler = Function.createDelegate(this, this._onUnhover);
this._mouseEnterHandler = Function.createDelegate(this, this._onmouseover);
this._mouseLeaveHandler = Function.createDelegate(this, this._onmouseout);
var e = this.get_element();
$addHandler(e, "mouseover", this._mouseEnterHandler);
$addHandler(e, "mouseout", this._mouseLeaveHandler);
if(this._popupElement) {
// setup the popup behavior
this._popupBehavior = $create(Sys.Extended.UI.PopupBehavior, { "id": this.get_id() + "_PopupBehavior" }, null, null, this._popupElement);
if(this._popupPosition)
this._popupBehavior.set_positioningMode(Sys.Extended.UI.HoverMenuPopupPosition.Absolute);
else
this._popupBehavior.set_positioningMode(Sys.Extended.UI.HoverMenuPopupPosition.Center);
// Create the animations (if they were set before initialize was called)
if(this._onShowJson)
this._popupBehavior.set_onShow(this._onShowJson);
if(this._onHideJson)
this._popupBehavior.set_onHide(this._onHideJson);
// set up the hover behavior
this._hoverBehavior = $create(Sys.Extended.UI.HoverBehavior, { "id": this.get_id() + "_HoverBehavior", "hoverDelay": this._hoverDelay, "unhoverDelay": this._popDelay, "hoverElement": this._popupElement }, null, null, e);
this._hoverBehavior.add_hover(this._hoverHandler);
this._hoverBehavior.add_unhover(this._unhoverHandler);
}
},
dispose: function() {
// do cleanup
this._onShowJson = null;
this._onHideJson = null;
if(this._popupBehavior) {
this._popupBehavior.dispose();
this._popupBehavior = null;
}
if(this._popupElement)
this._popupElement = null;
if(this._mouseEnterHandler)
$removeHandler(this.get_element(), "mouseover", this._mouseEnterHandler);
if(this._mouseLeaveHandler)
$removeHandler(this.get_element(), "mouseout", this._mouseLeaveHandler);
if(this._hoverBehavior) {
if(this._hoverHandler) {
this._hoverBehavior.remove_hover(this._hoverHandler);
this._hoverHandler = null;
}
if(this._unhoverHandler) {
this._hoverBehavior.remove_hover(this._unhoverHandler);
this._unhoverHandler = null;
}
this._hoverBehavior.dispose();
this._hoverBehavior = null;
}
Sys.Extended.UI.HoverMenuBehavior.callBaseMethod(this, 'dispose');
},
_getLeftOffset: function() {
var defaultLeft = $common.getLocation(this.get_element()).x,
offsetLeft = $common.getLocation(this.get_popupElement().offsetParent).x,
delta = 0;
// this offset is always relative to the left edge of the hover element.
switch(this._popupPosition) {
case Sys.Extended.UI.HoverMenuPopupPosition.Left:
// if it's positioned left, it's the width of the popup plus the offset
delta = (-1 * this._popupElement.offsetWidth);
break;
case Sys.Extended.UI.HoverMenuPopupPosition.Right:
// if it's to the right, it's the width of the hover element plus the offset.
delta = this.get_element().offsetWidth;
break;
}
return delta + defaultLeft - offsetLeft + this._offsetX;
},
_getTopOffset: function() {
var defaultTop = $common.getLocation(this.get_element()).y,
offsetTop = $common.getLocation(this.get_popupElement().offsetParent).y,
delta = 0;
// this offset is always relative to the top edge of the hover element.
switch(this._popupPosition) {
case Sys.Extended.UI.HoverMenuPopupPosition.Top:
// if it's Top positioned, it's the height of the popup plus the offset.
delta = (-1 * this._popupElement.offsetHeight);
break;
case Sys.Extended.UI.HoverMenuPopupPosition.Bottom:
// if it's bottom positioned it's the height of the hover element plus the offset
delta = this.get_element().offsetHeight;
break;
}
return defaultTop - offsetTop + delta + this._offsetY;
},
_onHover: function() {
if(this._inHover)
return;
var eventArgs = new Sys.CancelEventArgs();
this.raise_showing(eventArgs);
if(eventArgs.get_cancel())
return;
this._inHover = true;
this.populate();
this._popupBehavior.show();
if($common.getCurrentStyle(this._popupElement, 'display') == 'none')
this._popupElement.style.display = 'block';
this._popupBehavior.set_x(this._getLeftOffset());
this._popupBehavior.set_y(this._getTopOffset());
this.raise_shown(Sys.EventArgs.Empty);
},
_onUnhover: function() {
var eventArgs = new Sys.CancelEventArgs();
this.raise_hiding(eventArgs);
if(eventArgs.get_cancel())
return;
this._inHover = false;
this._resetCssClass();
this._popupBehavior.hide();
this.raise_hidden(Sys.EventArgs.Empty);
},
_onmouseover: function() {
// Handler to change the CSS class when hovered over
// set up the CSS class
var e = this.get_element();
if(this._hoverCssClass && e.className != this._hoverCssClass) {
this._oldClass = e.className;
e.className = this._hoverCssClass;
}
},
_onmouseout: function() {
this._resetCssClass();
},
_resetCssClass: function() {
// Reset the CSS class if we changed it while hovering
// make sure we're not still in hover mode, and that the class is
// currently the hover class.
var e = this.get_element();
if(!this._inHover && this._hoverCssClass && e.className == this._hoverCssClass)
e.className = this._oldClass;
},
///
/// A JSON definition of a generic OnShow animation.
///
/// get_onShow
/// set_onShow
///
get_onShow: function() {
// Generic OnShow Animation's JSON definition
return this._popupBehavior ? this._popupBehavior.get_onShow() : this._onShowJson;
},
set_onShow: function(value) {
if(this._popupBehavior)
this._popupBehavior.set_onShow(value)
else
this._onShowJson = value;
this.raisePropertyChanged('onShow');
},
///
/// The Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnShow animation behavior.
///
/// get_onShowBehavior
///
get_onShowBehavior: function() {
// Generic OnShow Animation's behavior
return this._popupBehavior ? this._popupBehavior.get_onShowBehavior() : null;
},
///
/// Plays OnHide animation.
///
///
onShow: function() {
if(this._popupBehavior)
this._popupBehavior.onShow();
},
///
/// A JSON definition of a genericOnHide animation.
///
/// get_onHide
/// set_onHide
///
get_onHide: function() {
// Generic OnHide Animation's JSON definition
return this._popupBehavior ? this._popupBehavior.get_onHide() : this._onHideJson;
},
set_onHide: function(value) {
if(this._popupBehavior)
this._popupBehavior.set_onHide(value)
else
this._onHideJson = value;
this.raisePropertyChanged('onHide');
},
///
/// The Sys.Extended.UI.Animation.GenericAnimationBehavior object containing the generic OnHide animation behavior.
///
/// get_onHideBehavior
///
get_onHideBehavior: function() {
// Generic OnHide Animation's behavior
return this._popupBehavior ? this._popupBehavior.get_onHideBehavior() : null;
},
///
/// Plays OnHide animation.
///
///
onHide: function() {
if(this._popupBehavior)
this._popupBehavior.onHide();
},
///
/// Sys.UI.DomElement that acts as a popup and is displayed on hovering.
///
/// get_popupElement
/// set_popupElement
///
get_popupElement: function() {
// Popup that is displayed when hovering
return this._popupElement;
},
set_popupElement: function(value) {
if(this._popupElement != value) {
this._popupElement = value;
if(this.get_isInitialized() && this._hoverBehavior)
this._hoverBehavior.set_hoverElement(this._popupElement);
this.raisePropertyChanged('popupElement');
}
},
///
/// A CSS class used on hovering.
///
/// get_hoverCssClass
/// set_hoverCssClass
///
get_hoverCssClass: function() {
return this._hoverCssClass;
},
set_hoverCssClass: function(value) {
if(this._hoverCssClass != value) {
this._hoverCssClass = value;
this.raisePropertyChanged('hoverCssClass');
}
},
get_HoverCssClass: function() {
Sys.Extended.Deprecated("get_HoverCssClass", "get_hoverCssClass");
return this.get_hoverCssClass();
},
set_HoverCssClass: function(value) {
Sys.Extended.Deprecated("set_HoverCssClass", "set_hoverCssClass");
this.set_hoverCssClass(value);
},
///
/// The number of pixels to offset the popup from its default horizontal position.
///
/// get_offsetX
/// set_offsetX
///
get_offsetX: function() {
return this._offsetX;
},
set_offsetX: function(value) {
if(this._offsetX != value) {
this._offsetX = value;
this.raisePropertyChanged('offsetX');
}
},
get_OffsetX: function() {
Sys.Extended.Deprecated("get_OffsetX()", "get_offsetX()");
return this.get_offsetX();
},
set_OffsetX: function(value) {
Sys.Extended.Deprecated("set_OffsetX(value)", "set_offsetX(value)");
this.set_offsetX(value);
},
///
/// The number of pixels to offset the popup from its default vertical position.
///
/// get_offsetY
/// set_offsetY
///
get_offsetY: function() {
return this._offsetY;
},
set_offsetY: function(value) {
if(this._offsetY != value) {
this._offsetY = value;
this.raisePropertyChanged('offsetY');
}
},
get_OffsetY: function() {
Sys.Extended.Deprecated("get_OffsetY()", "get_offsetY()");
return this.get_offsetY();
},
set_OffsetY: function(value) {
Sys.Extended.Deprecated("set_OffsetY(value)", "set_offsetY(value)");
this.set_offsetY(value);
},
///
/// The Sys.Extended.UI.HoverMenuPopupPosition object that contains the location where the popup should be positioned relative to the target control.
///
///
/// Can be Left, Right, Top, Bottom, Center. Center is default
///
/// get_popupPosition
/// set_popupPosition
///
get_popupPosition: function() {
return this._popupPosition;
},
set_popupPosition: function(value) {
if(this._popupPosition != value) {
this._popupPosition = value;
this.raisePropertyChanged('popupPosition');
}
},
get_PopupPosition: function() {
Sys.Extended.Deprecated("get_PopupPosition()", "get_popupPosition()");
return this.get_popupPosition();
},
set_PopupPosition: function(value) {
Sys.Extended.Deprecated("set_PopupPosition(value)", "set_popupPosition(value)");
this.set_popupPosition(value);
},
///
/// A number representing a time delay from the moment the mouse enters the target to the time when the popup is shown (displayed in milliseconds).
///
///
/// Default is 100.
///
/// get_popDelay
/// set_popDelay
///
get_popDelay: function() {
return this._popDelay;
},
set_popDelay: function(value) {
if(this._popDelay != value) {
this._popDelay = value;
this.raisePropertyChanged('popDelay');
}
},
get_PopDelay: function() {
Sys.Extended.Deprecated("get_PopDelay", "get_popDelay");
return this.get_popDelay();
},
set_PopDelay: function(value) {
Sys.Extended.Deprecated("set_PopDelay", "set_popDelay");
this.set_popDelay(value);
},
///
/// A number representing a time delay after the mouse enters the target and before the popup is shown (in milliseconds).
///
///
/// Default is 0.
///
/// get_hoverDelay
/// set_hoverDelay
///
get_hoverDelay: function() {
return this._hoverDelay;
},
set_hoverDelay: function(value) {
if(this._hoverDelay != value) {
this._hoverDelay = value;
this.raisePropertyChanged('hoverDelay');
}
},
get_HoverDelay: function() {
Sys.Extended.Deprecated("get_HoverDelay", "get_hoverDelay");
return this.get_hoverDelay();
},
set_HoverDelay: function(value) {
Sys.Extended.Deprecated("set_HoverDelay", "set_hoverDelay");
this.set_hoverDelay(value);
},
///
/// Fires when the hover menu is being shown.
///
///
///
add_showing: function(handler) {
this.get_events().addHandler('showing', handler);
},
remove_showing: function(handler) {
this.get_events().removeHandler('showing', handler);
},
raise_showing: function(eventArgs) {
var handler = this.get_events().getHandler('showing');
if(handler)
handler(this, eventArgs);
},
raiseShowing: function(eventArgs) {
Sys.Extended.Deprecated("raiseShowing(eventArgs)", "raise_showing(eventArgs)");
this.raise_showing(eventArgs);
},
///
/// Fires after the hover menu is shown.
///
///
///
add_shown: function(handler) {
this.get_events().addHandler('shown', handler);
},
remove_shown: function(handler) {
this.get_events().removeHandler('shown', handler);
},
raise_shown: function(eventArgs) {
var handler = this.get_events().getHandler('shown');
if(handler)
handler(this, eventArgs);
},
raiseShown: function(eventArgs) {
Sys.Extended.Deprecated("raiseShown(eventArgs)", "raise_shown(eventArgs)");
this.raise_shown(eventArgs);
},
///
/// Fires when the hover menu is being hidden.
///
///
///
add_hiding: function(handler) {
this.get_events().addHandler('hiding', handler);
},
remove_hiding: function(handler) {
this.get_events().removeHandler('hiding', handler);
},
raise_hiding: function(eventArgs) {
var handler = this.get_events().getHandler('hiding');
if(handler)
handler(this, eventArgs);
},
raiseHiding: function(eventArgs) {
Sys.Extended.Deprecated("raiseHiding(eventArgs)", "raise_hiding(eventArgs)");
this.raise_hiding(eventArgs);
},
///
/// Fires after the hover menu is hidden.
///
///
///
add_hidden: function(handler) {
this.get_events().addHandler('hidden', handler);
},
remove_hidden: function(handler) {
this.get_events().removeHandler('hidden', handler);
},
raise_hidden: function(eventArgs) {
var handler = this.get_events().getHandler('hidden');
if(handler)
handler(this, eventArgs);
},
raiseHidden: function(eventArgs) {
Sys.Extended.Deprecated("raiseHidden(eventArgs)", "raise_hidden(eventArgs)");
this.raise_hidden(eventArgs);
}
}
Sys.Extended.UI.HoverMenuBehavior.registerClass('Sys.Extended.UI.HoverMenuBehavior', Sys.Extended.UI.DynamicPopulateBehaviorBase);
Sys.Extended.UI.HoverMenuPopupPosition = function() {
// Where the popup should be positioned relative to the target control
throw Error.invalidOperation();
}
Sys.Extended.UI.HoverMenuPopupPosition.prototype = {
Center: 0,
Top: 1,
Left: 2,
Bottom: 3,
Right: 4
}
Sys.Extended.UI.HoverMenuPopupPosition.registerEnum('Sys.Extended.UI.HoverMenuPopupPosition');