var DropDown = Class.create({ initialize: function (A) { this.Options = A; this.showing = false; this.Timeout = 0; this.Effect = A.effects; this.AlignLeft = A.align == null || A.align == "left" ? true : false; this.Padding = A.padding == null ? { top: 0, left: 0, right: 0} : A.padding; this.Shadow = A.shadow == null ? null : A.shadow; this.CloseOnClick = A.closeOnClick != null && A.closeOnClick; this.CloseOnMouseout = A.closeOnMouseout != null && A.closeOnMouseout; this.ShowOnMouseover = A.showOnMouseover != null && A.showOnMouseover; this.Trigger = $(A.trigger); this.BaseElement = A.baseElement == "parent" ? this.Trigger.parentNode : $(A.baseElement); this.DisplayElement = $(A.displayElement); this.hideListener = this.Hide.bindAsEventListener(this); this.showFinishListener = this.ShowFinish.bindAsEventListener(this); this.hideFinishListener = this.HideFinish.bindAsEventListener(this); this.HideDropDown = function () { clearTimeout(this.Timeout); this.DisplayElement.setStyle({ display: "none" }); if (this.Shadow && this.Shadow.obj) { this.Shadow.obj.setStyle({ display: "none" }) } } .bind(this); this.MakeTrigger() }, MakeTrigger: function () { if (this.Trigger == null) { return } Event.observe(this.Trigger, "click", this.TriggerClick.bind(this)); if (this.ShowOnMouseover) { Event.observe(this.Trigger, "mouseover", this.Show.bind(this)); this.CloseOnMouseout = true } var A = this; if (this.CloseOnMouseout) { Event.observe(this.DisplayElement, "mouseout", function () { A.Timeout = setTimeout(A.Hide.bind(A), 300) }); Event.observe(this.BaseElement, "mouseout", function () { A.Timeout = setTimeout(A.Hide.bind(A), 300) }); Event.observe(this.DisplayElement, "mouseover", function () { clearTimeout(A.Timeout) }); Event.observe(this.BaseElement, "mouseover", function () { clearTimeout(A.Timeout) }); if (this.ShowOnMouseover) { Event.observe(this.Trigger, "mouseout", function () { A.Timeout = setTimeout(A.Hide.bind(A), 300) }); Event.observe(this.Trigger, "mouseover", function () { clearTimeout(A.Timeout) }) } } if (!this.CloseOnClick) { Event.observe(this.DisplayElement, "click", this.Show.bind(this)) } Event.observe(this.BaseElement, "click", function () { this.showing = true }); Event.observe(window, "load", this.MoveDisplayElement.bind(this)) }, TriggerClick: function () { if (this.DisplayElement.getStyle("display") == "block") { this.Hide() } else { this.Show() } }, MoveDisplayElement: function () { $(document.body).appendChild(this.DisplayElement); if (this.Shadow != null) { var A = new Element("div").update(" "); A.setStyle({ position: "absolute", opacity: this.Shadow.opacity, background: "#000000", display: "none" }); this.Shadow.obj = A; $(document.body).appendChild(A) } }, Show: function () { Event.observe(document.body, "click", this.hideListener); this.ShowBegin(); var A = this.BaseElement.cumulativeOffset(); var B = this.Effect != null && this.Effect.show != "none" && this.Effect.show != null && this.DisplayElement.getStyle("display") == "none"; var C = A.left + this.DisplayElement.getWidth() > document.viewport.getWidth(); this.DisplayElement.setStyle({ position: "absolute", top: A.top + this.BaseElement.getHeight() + this.Padding.top + "px", display: "none", zIndex: 1000 }); if (this.AlignLeft) { this.DisplayElement.setStyle({ left: C ? A.left + this.BaseElement.getWidth() - this.DisplayElement.getWidth() + this.Padding.left + "px" : A.left + this.Padding.left + "px" }) } else { this.DisplayElement.setStyle({ right: C ? document.viewport.getWidth() - (A.left + this.BaseElement.getWidth()) + this.Padding.right + "px" : document.viewport.getWidth() - (A.left + this.DisplayElement.getWidth()) + this.Padding.right + "px" }) } this.showing = true; if (B) { Effect.toggle(this.DisplayElement, this.Effect.show, { duration: this.Effect.duration, afterFinish: this.showFinishListener }) } else { this.DisplayElement.setStyle({ display: "block" }); this.ShowFinish() } }, ResizeShadow: function () { this.ShowShadow() }, ShowShadow: function () { var A = this.DisplayElement.cumulativeOffset(); if (A.top == 0 && A.left == 0) { return } this.Shadow.obj.setStyle({ top: A.top + this.Shadow.offset + "px", left: A.left + this.Shadow.offset + "px", width: this.DisplayElement.getWidth() + "px", height: this.DisplayElement.getHeight() + "px", display: "block" }) }, ShowBegin: function () { if (this.Options.onShowBegin) { this.Options.onShowBegin(this) } }, ShowFinish: function () { if (this.Shadow != null && this.Shadow.obj) { this.ShowShadow() } if (this.Options.onShowFinish) { this.Options.onShowFinish(this) } }, Close: function () { this.Hide() }, Hide: function () { if (this.showing) { this.showing = false; return } if (this.Shadow != null && this.Shadow.obj != null) { this.Shadow.obj.setStyle({ display: "none" }) } var A = this.Effect != null && this.Effect.hide != "none" && this.Effect.hide != null && this.DisplayElement.getStyle("display") == "block"; if (A) { Effect.toggle(this.DisplayElement, this.Effect.hide, { duration: this.Effect.duration, afterFinish: this.hideFinishListener }) } else { this.DisplayElement.setStyle({ display: !A ? "none" : "block" }); this.HideFinish() } Event.stopObserving(document.body, "click", this.hideListener) }, HideFinish: function () { if (this.Options.onHideFinish) { this.Options.onHideFinish(this) } } }); var UserDropDown = Class.create(DropDown, { initialize: function ($super, A) { $super({ trigger: "userDropDown_Trigger_" + A, baseElement: "parent", displayElement: "userDropDown_" + A, closeOnClick: false, align: "right", padding: { top: 1, left: 0, right: 0 }, shadow: { opacity: 0.2, offset: 2 }, effects: { show: "blind", hide: "none", duration: 0.2 }, onShowBegin: function (B) { B.Trigger.addClassName("userDropDown_Over") }, onShowFinish: function (B) { }, onHideFinish: function (B) { B.Trigger.removeClassName("userDropDown_Over") } }) } });