| 1 |
|
|---|
| 2 | // Dropdown menu control
|
|---|
| 3 |
|
|---|
| 4 | function Dropdown(activatorId, dropdownId) {
|
|---|
| 5 |
|
|---|
| 6 | // store activator and dropdown elements
|
|---|
| 7 | this.activator = document.getElementById(activatorId);
|
|---|
| 8 | this.dropdown = document.getElementById(dropdownId);
|
|---|
| 9 |
|
|---|
| 10 | // wire up show/hide events
|
|---|
| 11 | registerEventHandler(this.activator,'mouseover', getInstanceDelegate(this, "show"));
|
|---|
| 12 | registerEventHandler(this.activator,'mouseout', getInstanceDelegate(this, "requestHide"));
|
|---|
| 13 | registerEventHandler(this.dropdown,'mouseover', getInstanceDelegate(this, "show"));
|
|---|
| 14 | registerEventHandler(this.dropdown,'mouseout', getInstanceDelegate(this, "requestHide"));
|
|---|
| 15 |
|
|---|
| 16 | // fix visibility and position
|
|---|
| 17 | this.dropdown.style.visibility = 'hidden';
|
|---|
| 18 | this.dropdown.style.position = 'absolute';
|
|---|
| 19 | this.reposition(null);
|
|---|
| 20 |
|
|---|
| 21 | // wire up repositioning event
|
|---|
| 22 | registerEventHandler(window, 'resize', getInstanceDelegate(this, "reposition"));
|
|---|
| 23 |
|
|---|
| 24 |
|
|---|
| 25 | }
|
|---|
| 26 |
|
|---|
| 27 | Dropdown.prototype.show = function(e) {
|
|---|
| 28 | clearTimeout(this.timer);
|
|---|
| 29 | this.dropdown.style.visibility = 'visible';
|
|---|
| 30 | }
|
|---|
| 31 |
|
|---|
| 32 | Dropdown.prototype.hide = function(e) {
|
|---|
| 33 | this.dropdown.style.visibility = 'hidden';
|
|---|
| 34 | }
|
|---|
| 35 |
|
|---|
| 36 | Dropdown.prototype.requestHide = function(e) {
|
|---|
| 37 | this.timer = setTimeout( getInstanceDelegate(this, "hide"), 250);
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | Dropdown.prototype.reposition = function(e) {
|
|---|
| 41 |
|
|---|
| 42 | // get position of activator
|
|---|
| 43 | var offsetLeft = 0;
|
|---|
| 44 | var offsetTop = 0;
|
|---|
| 45 | var offsetElement = this.activator;
|
|---|
| 46 | while (offsetElement) {
|
|---|
| 47 | offsetLeft += offsetElement.offsetLeft;
|
|---|
| 48 | offsetTop += offsetElement.offsetTop;
|
|---|
| 49 | offsetElement = offsetElement.offsetParent;
|
|---|
| 50 | }
|
|---|
| 51 |
|
|---|
| 52 | // set position of dropdown relative to it
|
|---|
| 53 | this.dropdown.style.left = offsetLeft;
|
|---|
| 54 | this.dropdown.style.top = offsetTop + this.activator.offsetHeight;
|
|---|
| 55 |
|
|---|
| 56 | }
|
|---|
