- added code to handle cascading menus, drag handles (DIV separators) and a debugging log window;

Monotone-Parent: 71f5497685935ad02acaf78a809e3fbb32e91905
Monotone-Revision: 4b71e3eef15cd1ab9ca89e11d3ac734a8d821243

Monotone-Author: wsourdeau@inverse.ca
Monotone-Date: 2006-07-13T19:13:18
Monotone-Branch: ca.inverse.sogo

UI/Templates/MailerUI/UIxMailListView.wox

@@ -31,17 +31,29 @@
 	  onclick=""><var:string label:value="Edit As New..."/></li>
 	<li class="separator"></li>
 	<li
+	  class="submenu"
+	  submenu="dummymenu"
+	  onmouseover="dropDownSubmenu(event);"
 	  onmousedown="return false;"
-	  onclick=""><var:string label:value="Move To --&gt;"/></li>
+	  onclick=""><var:string label:value="Move To"/></li>
 	<li
+	  class="submenu"
+	  submenu="dummymenu"
+	  onmouseover="dropDownSubmenu(event);"
 	  onmousedown="return false;"
-	  onclick=""><var:string label:value="Copy To --&gt;"/></li>
+	  onclick=""><var:string label:value="Copy To"/></li>
 	<li
+	  class="submenu"
+	  submenu="dummymenu"
+	  onmouseover="dropDownSubmenu(event);"
 	  onmousedown="return false;"
-	  onclick=""><var:string label:value="Label --&gt;"/></li>
+	  onclick=""><var:string label:value="Label"/></li>
 	<li
+	  class="submenu"
+	  submenu="dummymenu"
+	  onmouseover="dropDownSubmenu(event);"
 	  onmousedown="return false;"
-	  onclick=""><var:string label:value="Mark --&gt;"/></li>
+	  onclick=""><var:string label:value="Mark"/></li>
 	<li class="separator"></li>
 	<li
 	  onmousedown="return false;"
@@ -56,6 +68,49 @@
 	  onmousedown="return false;"
 	  onclick=""><var:string label:value="Delete Message"/></li>
       </ul>
+
+      <div class="menu" id="dummymenu">
+	<ul id="sourceLisdassdadst">
+	<li
+	  class="submenu"
+	  submenu="dummymenu2"
+	  onmouseover="dropDownSubmenu(event);"
+	  onmousedown="return false;"
+	  onclick="">tdasdsadsa</li>
+	  <li onmousedown="return false;">really</li>
+	  <li onmousedown="return false;">is</li>
+	  <li onmousedown="return false;">a</li>
+	  <li onmousedown="return false;">dumb dummy!</li>
+	</ul>
+	
+	<div class="menu" id="dummymenu2">
+	  <ul id="sourdsadsaceList">
+	<li
+	  class="submenu"
+	  submenu="dummymenu3"
+	  onmouseover="dropDownSubmenu(event);"
+	  onmousedown="return false;"
+	  onclick="">Dummy 2</li>
+	    <li onmousedown="return false;">really</li>
+	    <li onmousedown="return false;">is</li>
+	    <li onmousedown="return false;">another</li>
+	    <li onmousedown="return false;">dumb dummy!</li>
+	  </ul>
+
+	<div class="menu" id="dummymenu3">
+	  <ul id="sourdsadsaceList">
+	    <li onmousedown="return false;">Dummy 3</li>
+	    <li onmousedown="return false;">really</li>
+	    <li onmousedown="return false;">is</li>
+	    <li onmousedown="return false;">another</li>
+	    <li onmousedown="return false;">dumb dummy!</li>
+	  </ul>
+	</div>
+
+	</div>
+
+
+      </div>
     </div>
 
     <div id="mailboxContent" oncontextmenu="return false;">

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -65,7 +65,7 @@
 
 	  <form name="pageform" var:href="pageFormURL" _wosid="0">
 
-	    <div class="folderTree">
+	    <div class="folderTree" id="mailerFolderTree">
 	      <var:if condition="hideFolderTree">
 		<var:component-content/>
 	      </var:if>
@@ -79,7 +79,15 @@
 	      </var:if>
 	    </div>
 
-	    <div class="mailPageContent">
+	    <div id="dragHandle"
+	      onmousedown="startHandleDragging(event);"
+	      onmousemove=""
+	      ondblclick="dragHandleDoubleClick(event);"
+	      leftblock="mailerFolderTree"
+	      rightblock="mailerPageContent">
+	    </div>
+
+	    <div class="mailPageContent" id="mailerPageContent">
 	      <var:component-content/>
 	    </div>
 	  </form>

UI/WebServerResources/UIxMailToSelection.js

@@ -127,9 +127,15 @@ function addressFieldGotFocus(sender) {
   idx = this.getIndexFromIdentifier(sender.id);
   if ((lastIndex == idx) || (idx == 0)) return;
   this.removeLastEditedRowIfEmpty();
+
+
+  return false;
 }
+
 function addressFieldLostFocus(sender) {
   lastIndex = this.getIndexFromIdentifier(sender.id);
+
+  return false;
 }
 
 function removeLastEditedRowIfEmpty() {

UI/WebServerResources/generic.js

@@ -24,6 +24,18 @@
 
 /* generic stuff */
 
+logWindow = window.open('', 'logWindow',
+			'directories = no; location = no; menubar = no; resizable = no;'
+			+ 'scrollbars = yes; status = no; toolbar = no; width = 80em; height = 25em;');
+logWindow.document.write('<html><head><title>JavaScript log</title></head>'
+			 + '<body style="font-family: monospace;'
+			 + 'font-size: 10pt;">'
+			 + '<div class="log" id="logArea"></div></body>'
+			 +'</html>');
+logWindow.resizeTo(640,480);
+logArea = logWindow.document.getElementById('logArea');
+logArea.innerHTML = '';
+
 function ml_stripActionInURL(url) {
   if (url[url.length - 1] != '/') {
     var i;
@@ -282,9 +294,10 @@ function onRowClick(node, event) {
 
 /* popup menus */
 
-bodyOnClick = "";
-acceptClick = false;
-menuClickNode = null;
+var bodyOnClick = "";
+var acceptClick = false;
+var menuClickNode = null;
+var currentSubmenu = null;
 
 function onMenuClick(node, event, menuId)
 {
@@ -295,9 +308,11 @@ function onMenuClick(node, event, menuId)
     acceptClick = false;
   bodyOnClick = "" + document.body.getAttribute("onclick");
   document.body.setAttribute("onclick", "onBodyClick('" + menuId + "'); return false;");
-  popup = document.getElementById(menuId);
-  popup.setAttribute("style", "visibility: visible; top: " + event.pageY
-		     + "px; left: " + event.pageX + "px;" );
+  var popup = document.getElementById(menuId);
+  hideMenu(popup);
+  popup.style.top = event.pageY + "px";
+  popup.style.left = event.pageX + "px";
+  popup.style.visibility = "visible";
   menuClickNode = node;
 
   return false;
@@ -310,13 +325,25 @@ function onBodyClick(menuId)
   else
     {
       popup = document.getElementById(menuId);
-      popup.setAttribute("style", "visibility: hidden");
+      hideMenu(popup);
       document.body.setAttribute("onclick", bodyOnClick);
     }
 
   return false;
 }
 
+function hideMenu(menuNode)
+{
+//   log('hiding menu "' + menuNode.getAttribute('id') + '"');
+  if (menuNode.submenu)
+    {
+      hideMenu(menuNode.submenu);
+      menuNode.submenu = null;
+    }
+
+  menuNode.style.visibility = "hidden";
+}
+
 function onMenuEntryClick(node, event, menuId)
 {
   id = node.getAttribute("id");
@@ -325,3 +352,116 @@ function onMenuEntryClick(node, event, menuId)
   return false;
 }
 
+function log(message) {
+  if (logArea)
+    logArea.innerHTML = logArea.innerHTML + message + '<br />' + "\n";
+}
+
+function dropDownSubmenu(event)
+{
+  var node = event.target;
+  var submenu = node.getAttribute("submenu");
+  if (submenu && submenu != "") {
+    if (node.parentNode.parentNode.submenu)
+      hideMenu(node.parentNode.parentNode.submenu);
+ 
+    var submenuNode = document.getElementById(submenu);
+    node.parentNode.parentNode.submenu = submenuNode;
+    var menuTop = (node.parentNode.parentNode.offsetTop
+      + node.offsetTop - 1);
+    var menuLeft = (node.parentNode.parentNode.offsetLeft
+		    + node.parentNode.parentNode.offsetWidth
+		    - 2);
+    submenuNode.style.top = menuTop + "px";
+    submenuNode.style.left = menuLeft + "px";
+    submenuNode.style.visibility = "visible";
+  }
+}
+
+/* drag handle */
+
+var dragHandle;
+var dragHandleOrigX;
+var dragHandleOrigLeft;
+var dragHandleOrigRight;
+
+function startHandleDragging(event) {
+  if (event.button == 0) {
+    var leftBlock = event.target.getAttribute('leftblock');
+    var rightBlock = event.target.getAttribute('rightblock');
+
+    dragHandle = event.target;
+    dragHandleOrigX = dragHandle.offsetLeft;
+    dragHandleOrigLeft = document.getElementById(leftBlock).offsetWidth;
+    dragHandleOrigRight = document.getElementById(rightBlock).offsetLeft;
+
+    document.body.setAttribute('onmouseup', 'stopHandleDragging(event);');
+    document.body.setAttribute('onmousemove', 'dragHandleMove(event, "'
+			       + leftBlock
+			       + '", "'
+			       + rightBlock
+			       + '");');
+    document.body.style.cursor = "e-resize";
+
+    dragHandleMove(event, leftBlock, rightBlock);
+    event.cancelBubble = true;
+  }
+
+  return false;
+}
+
+function stopHandleDragging(event) {
+  var diffX = (event.clientX - dragHandleOrigX
+	       - (dragHandle.offsetWidth / 2));
+  var lBlock
+    = document.getElementById(dragHandle.getAttribute('leftblock'));
+  var rBlock
+    = document.getElementById(dragHandle.getAttribute('rightblock'));
+
+  lBlock.style.width = (dragHandleOrigLeft + diffX) + 'px';
+  rBlock.style.left = (dragHandleOrigRight + diffX) + 'px';
+
+  document.body.setAttribute('onmousemove', '');
+  document.body.setAttribute('onmouseup', '');
+  document.body.setAttribute('style', '');
+  event.cancelBubble = true;
+
+  return false;
+}
+
+function dragHandleMove(event, leftBlock, rightBlock) {
+  if (typeof(dragHandle) == undefined
+      || !dragHandle)
+    stopHandling(event);
+  else {
+    var width = dragHandle.offsetWidth;
+
+    var hX = event.clientX;
+    if (hX > -1) {
+      var newLeft = hX - (width / 2);
+      
+      dragHandle.style.left = newLeft + 'px';
+      event.cancelBubble = true;
+      
+      return false;
+    }
+  }
+}
+
+function dragHandleDoubleClick(event) {
+  dragHandle = event.target;
+  var lBlock
+    = document.getElementById(dragHandle.getAttribute('leftblock'));
+  var lLeft = lBlock.offsetLeft;
+
+  if (dragHandle.offsetLeft > lLeft) {
+    var rBlock
+      = document.getElementById(dragHandle.getAttribute('rightblock'));
+    var leftDiff = rBlock.offsetLeft - dragHandle.offsetLeft;
+    
+    dragHandle.style.left = lLeft + 'px';
+    lBlock.style.width = '0px';
+    rBlock.style.left = (lLeft + leftDiff) + 'px';
+  }
+}
+

UI/WebServerResources/mailer.css

@@ -544,3 +544,22 @@ SPAN.searchBox INPUT
   background-repeat: no-repeat;
   background-position: 2px 2px;
 }
+
+
+/* drag handles */
+DIV#dragHandle
+{ 
+  position: absolute;
+  z-index: 1;
+  top: 5.5em;
+  left: 14.6em;
+  width: .4em;
+  bottom: 0px;
+}
+
+DIV#dragHandle:active
+{
+  cursor: e-resize;
+  background: #dbdad5;
+  -moz-opacity: 0.5;
+}

UI/WebServerResources/uix.css

@@ -378,6 +378,7 @@ SPAN.toolbarButton:active
   padding-bottom: .2em;
   margin: 0px;
   width: auto;
+  white-space: nowrap;
 }
 
 .menu LI:hover
@@ -394,3 +395,27 @@ SPAN.toolbarButton:active
   border-top: 1px solid #aaa;
   border-bottom: 1px solid #fff;
 }
+
+.menu LI.submenu
+{
+  padding-right: .5em;
+  background-image: url('submenu.gif');
+  background-position: 98% 50%;
+  background-repeat: no-repeat; }
+
+.menu LI.submenu:hover
+{
+  background-image: url('submenu-active.gif');
+}
+
+DIV.log#logArea
+{
+  z-index: 1000;
+  font-family: monospace;
+  position: absolute;
+  background: #000;
+  color: #fff;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+}