Changeset 220

Timestamp:

01/10/12 01:41:36 (13 years ago)

Author:

tschipper

Message:

Nieuwe implementatie van dropdown menus. Voorbeeld staat in positiontest.html, maar alle code staat in generalScripts.js, dus kan op alle pagina's gebruikt worden.

Location:

Dev/trunk

Files:

• js/generalScripts.js (modified) (2 diffs)
• positiontest.html (added)

Dev/trunk/js/generalScripts.js

@@ -156 +156 @@
 }
 
-function createMenuPanel (parentButton, cb1, cb2) {
-    var outerDiv = ce("div");
-    outerDiv.className = "ddMenu";
-    outerDiv.id = "ddAddObjectMenu";
-    outerDiv.style.position = "absolute";
-    
-    var button1 = ce("input");
-    button1.className = "ddMenuButton";
-    button1.type = "button";
-    button1.value = "Add new";
-    button1.addEventListener("click", cb1, false);
-    
-    var button2 = ce("input");
-    button2.className = "ddMenuButton";
-    button2.type = "button";
-    button2.value = "Add existing";
-    button2.addEventListener("click", cb2, false);
-    
-    outerDiv.appendChild(button1);
-    outerDiv.appendChild(button2);
-    
-    var parentPos = findPos(parentButton);
-    var parentWidth = parentButton.offsetWidth;
-    var menuPosX = parentPos.X + parentWidth;
-    var menuPosY = parentPos.Y;
-    outerDiv.style.left = menuPosX+"px";
-    outerDiv.style.top = menuPosY+"px";
-}
-
-function findPos(element) {
+// Function for getting the absolute position of the top left corner of an element, relative to the window
+function getPos(element) {
     var posX = posY = 0;
     if (element.offsetParent) {
@@ -200 +172 @@
     return result;
 }
+
+// Returns the computed width of an element
+function getWidth(element) {
+    var width = 0;
+    if (element.offsetWidth) {
+        width = element.offsetWidth;
+    }
+    
+    return width;
+}
+
+// Drop down menu implementation. Supports three levels: Base button, 1st level categories, and 2nd level links
+function DDMenu() {
+    // Initialize function, setting all needed variables.
+    var instance = this;
+    this.closeTimer = 0;
+    this.ddMenuItem = null;
+    this.timeout = 350;
+    this.visible = false;
+    this.menuElement = null;
+    this.parentButton = null
+    
+    this.Init = function(id1, id2) {    
+        instance.menuElement = ge(id1);
+        instance.parentButton = ge(id2);
+    }
+    
+    this.SetCloseTimer = function() {
+        instance.closeTimer = window.setTimeout(instance.Close, instance.timeout);
+    }
+    
+    this.Close = function() {
+        if (instance.ddMenuItem) {
+            instance.ddMenuItem.style.visibility = "hidden";
+        }
+        instance.Show();
+        
+    }
+    
+    this.CancelCloseTimer = function() {
+        if (instance.closeTimer) {
+            window.clearTimeout(instance.closeTimer);
+            instance.closeTimer = null;
+        }
+    }
+    
+    this.Open = function(id) {
+        instance.CancelCloseTimer();
+        if (instance.ddMenuItem) {
+            instance.ddMenuItem.style.visibility = "hidden";
+        }
+        
+        instance.ddMenuItem = ge(id);
+        instance.ddMenuItem.style.visibility = "visible";
+        var parentPos = getPos(instance.ddMenuItem.parentNode);
+        var parentWidth = getWidth(instance.ddMenuItem.parentNode);
+        instance.ddMenuItem.style.left = (parentPos.X + parentWidth)+"px";
+        instance.ddMenuItem.style.top = parentPos.Y+"px";
+        
+    }
+    
+    this.Show = function() {
+        debugger;
+        if (instance.visible) {
+            // Hide the menu
+            instance.menuElement.style.visibility = "hidden";
+            instance.parentButton.className = "";
+            instance.visible = false;
+        }
+        else{
+            //Show the menu
+            instance.menuElement.style.visibility = "visible";
+            instance.parentButton.className = "down";
+            instance.visible = true;
+        }
+    }
+}