Changeset 228 for Dev/branches/Demo

Timestamp:

01/12/12 19:52:32 (13 years ago)

Author:

fpvanagthoven

Message:

 

Location:

Dev/branches/Demo

Files:

• classes/Toolbox.php (modified) (1 diff)
• classes/sessionEditorWidget.php (modified) (2 diffs)
• css/visualeditors.css (modified) (1 diff)
• js/generalScripts.js (modified) (1 diff)
• register.php (modified) (3 diffs)
• selectSession.php (modified) (1 diff)
• sessionEditor.php (modified) (2 diffs)

Dev/branches/Demo/classes/Toolbox.php

@@ -21 +21 @@
             <div class="content">
                 <p style="float: left; clear:both; margin-bottom: 1em;">Add new:</p>
-                <div class="bigButton toolbox" onClick="submitToolbox('Survey');"><img src="images/icons/survey.png" class="buttonIcon" /><p>Survey</p></div>
-                <div class="bigButton toolbox" onClick="submitToolbox('Application');"><img src="images/icons/application.png" class="buttonIcon" /><p>Application</p></div>
-                <div class="bigButton toolbox" onClick="submitToolbox('Dashboard');"><img src="images/icons/dashboard.png" class="buttonIcon" /><p>Dashboard</p></div>
+                <ul id="toolboxMenu">
+                    <li>
+                        <div class="bigButton toolbox" onclick="ddMenu.Open('toolbox_m1')"><img src="images/icons/survey.png" class="buttonIcon" /><p>Survey</p>
+                            <div id="toolbox_m1" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                                <a href="#" >+ Add new</a>
+                                <a href="#">> Add existing</a>
+                            </div>
+
+                        </div>
+                    </li>
+                    <li>
+                        <div class="bigButton toolbox" onClick="ddMenu.Open('toolbox_m2')"><img src="images/icons/application.png" class="buttonIcon" /><p>Application</p>
+                            <div id="toolbox_m2" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                                <a href="#">+ Add new</a>
+                                <a href="#">> Add existing</a>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="bigButton toolbox" onClick="ddMenu.Open('toolbox_m3')"><img src="images/icons/dashboard.png" class="buttonIcon" /><p>Dashboard</p>
+                            <div id="toolbox_m3" onmouseover="ddMenu.CancelCloseTimer()" onmouseout="ddMenu.SetCloseTimer()">
+                                <a href="#">+ Add new</a>
+                                <a href="#">> Add existing</a>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
             </div>
         </div>

Dev/branches/Demo/classes/sessionEditorWidget.php

@@ -80 +80 @@
         <script type="text/javascript" src="js/jquery.js"></script>
         <script type="text/javascript">
+            var ddMenu = new DDMenu();
+            
             $(document).ready(function() {
                 loadSequencer();
+                ddMenu.Init();
             });
         </script>
@@ -94 +97 @@
         // Store the current session in internal variable
         $results = $this->dbi->get("Session", array("uid"=> $_SESSION['currentSession']));
-                print_r($results);
+                //print_r($results);
         if (!empty($results)) {
             if ($results[0]->evaluate()) {

Dev/branches/Demo/css/visualeditors.css

@@ -551 +551 @@
     height: 415px;
 }
+
+/*******************/
+/* DDMenu specific */
+/*******************/
+
+#toolboxMenu li .bigButton.toolbox div {
+    position: absolute;
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #555;
+    background: #eaebd8;
+}
+
+#toolboxMenu li .bigButton.toolbox div a {
+    position: relative;
+    float: left;
+    clear: left;
+    margin: 0;
+    padding: 5px 10px;
+    width: 75px;
+    white-space: nowrap;
+    text-align: left;
+    text-decoration: none;
+    color: #2875de;
+    font: 11px arial;
+}
+
+#toolboxMenu li .bigButton.toolbox div a:hover {
+    background: #49a3ff;
+    color: #fff;
+}

Dev/branches/Demo/js/generalScripts.js

@@ -155 +155 @@
     return document.getElementById(s);
 }
+
+// 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) {
+        do {
+            posX += element.offsetLeft;
+            posY += element.offsetTop;
+        } while (element = element.offSetParent);
+    }
+    
+    var result = {
+        X: posX,
+        Y: posY
+    }
+    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() {
+        debugger;
+        instance.closeTimer = window.setTimeout(instance.Close, instance.timeout);
+    }
+    
+    this.Close = function() {
+        if (instance.ddMenuItem) {
+            instance.ddMenuItem.style.visibility = "hidden";
+        }
+        instance.Toggle();
+        
+    }
+    
+    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.Toggle = function() {
+        debugger;
+        if (instance.visible) {
+            // Hide the menu
+            instance.menuElement.style.visibility = "hidden";
+            instance.parentButton.className = "";
+            instance.visible = false;
+        }
+        else{
+            //Show the menu
+            if (instance.menuElement) {
+                instance.menuElement.style.visibility = "visible";
+                instance.parentButton.className = "down";
+            }
+            instance.visible = true;
+        }
+    }
+}

Dev/branches/Demo/register.php

@@ -1 @@
-<?php require 'classes/master.php'; //should be at top of every page    ?>
+<?php require 'classes/master.php'; //should be at top of every page     ?>
 
 <!DOCTYPE html>
@@ -6 +6 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>Facilitator</title>
-        <?php new StyleSheet("awesome"); ?>
+        <?php new StyleSheet("visualEditors"); ?>
         <script type="text/javascript" src="js/menu.js"></script>
     </head>
@@ -16 +16 @@
         <div id="wrapper">
             <div id="content">
-                <div class="menu">
-                    <form action="index.php" method="POST"><br/>
-                        <h3>Username</h3>
-                        <input type="text" name="username"><br/>
-                        <h3>Password</h3>
-                        <input type="password" name="password"><br/><br/>
-                        <input type="submit" name="register" class="bigSurveyButton surveyButton" value="Register">
-                    </form>
+                <div class="largeFrame">
+                    <div class="largeTitle">Register</div>
+                    <div class="content">
+                        <form action="index.php" method="POST"><br/>
+                            <h3>Username</h3>
+                            <input type="text" name="username"><br/>
+                            <h3>Password</h3>
+                            <input type="password" name="password"><br/><br/>
+                            <input type="submit" name="register" class="bigButton vertical" value="Register">
+                        </form>
+                    </div>
                 </div>
             </div>

Dev/branches/Demo/selectSession.php

@@ -107 +107 @@
 
                 <div id="sessionInfoPanel" class="largeFrame" style="margin-top: 10px; width: 400px; height: 100px;">
-                    <div class="largeTitle">
-                        Info
-                    </div>
-                    <div id="infoPanelContent" style="float: left; clear: left;">
-                        Info goes here
+                    <div class="largeTitle">Info</div>
+                    <div id="infoPanelContent" class="content" style="float: left; clear: left;">
                     </div>
                 </div>

Dev/branches/Demo/sessionEditor.php

@@ -2 +2 @@
 require 'classes/master.php'; //should be at top of every page
 /*
-if (!isset($_SESSION['userUid'])) {
-    redirect('index.php');
-}
-*/
+  if (!isset($_SESSION['userUid'])) {
+  redirect('index.php');
+  }
+ */
 $sequencer = new SessionEditorWidget();
 $sequencer->LoadSession(); //load session into php part of the sequencer
@@ -25 +25 @@
         $sequencer->Javascript();
         ?>
-
+        <script type='text/javascript'>
+            var onloadFunction = function() {
+                debugger;
+                var ddMenu = new DDMenu();
+                ddMenu.Init();
+            }
+        </script>
     </head>
     <body>