- 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.sogomaint-2.0.2
parent
5c4a239224
commit
082212d13f
|
@ -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 -->"/></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 -->"/></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 -->"/></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 -->"/></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;">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue