- 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>
|
onclick=""><var:string label:value="Edit As New..."/></li>
|
||||||
<li class="separator"></li>
|
<li class="separator"></li>
|
||||||
<li
|
<li
|
||||||
|
class="submenu"
|
||||||
|
submenu="dummymenu"
|
||||||
|
onmouseover="dropDownSubmenu(event);"
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
onclick=""><var:string label:value="Move To -->"/></li>
|
onclick=""><var:string label:value="Move To"/></li>
|
||||||
<li
|
<li
|
||||||
|
class="submenu"
|
||||||
|
submenu="dummymenu"
|
||||||
|
onmouseover="dropDownSubmenu(event);"
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
onclick=""><var:string label:value="Copy To -->"/></li>
|
onclick=""><var:string label:value="Copy To"/></li>
|
||||||
<li
|
<li
|
||||||
|
class="submenu"
|
||||||
|
submenu="dummymenu"
|
||||||
|
onmouseover="dropDownSubmenu(event);"
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
onclick=""><var:string label:value="Label -->"/></li>
|
onclick=""><var:string label:value="Label"/></li>
|
||||||
<li
|
<li
|
||||||
|
class="submenu"
|
||||||
|
submenu="dummymenu"
|
||||||
|
onmouseover="dropDownSubmenu(event);"
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
onclick=""><var:string label:value="Mark -->"/></li>
|
onclick=""><var:string label:value="Mark"/></li>
|
||||||
<li class="separator"></li>
|
<li class="separator"></li>
|
||||||
<li
|
<li
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
|
@ -56,6 +68,49 @@
|
||||||
onmousedown="return false;"
|
onmousedown="return false;"
|
||||||
onclick=""><var:string label:value="Delete Message"/></li>
|
onclick=""><var:string label:value="Delete Message"/></li>
|
||||||
</ul>
|
</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>
|
||||||
|
|
||||||
<div id="mailboxContent" oncontextmenu="return false;">
|
<div id="mailboxContent" oncontextmenu="return false;">
|
||||||
|
|
|
@ -65,7 +65,7 @@
|
||||||
|
|
||||||
<form name="pageform" var:href="pageFormURL" _wosid="0">
|
<form name="pageform" var:href="pageFormURL" _wosid="0">
|
||||||
|
|
||||||
<div class="folderTree">
|
<div class="folderTree" id="mailerFolderTree">
|
||||||
<var:if condition="hideFolderTree">
|
<var:if condition="hideFolderTree">
|
||||||
<var:component-content/>
|
<var:component-content/>
|
||||||
</var:if>
|
</var:if>
|
||||||
|
@ -79,7 +79,15 @@
|
||||||
</var:if>
|
</var:if>
|
||||||
</div>
|
</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/>
|
<var:component-content/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -127,9 +127,15 @@ function addressFieldGotFocus(sender) {
|
||||||
idx = this.getIndexFromIdentifier(sender.id);
|
idx = this.getIndexFromIdentifier(sender.id);
|
||||||
if ((lastIndex == idx) || (idx == 0)) return;
|
if ((lastIndex == idx) || (idx == 0)) return;
|
||||||
this.removeLastEditedRowIfEmpty();
|
this.removeLastEditedRowIfEmpty();
|
||||||
|
|
||||||
|
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function addressFieldLostFocus(sender) {
|
function addressFieldLostFocus(sender) {
|
||||||
lastIndex = this.getIndexFromIdentifier(sender.id);
|
lastIndex = this.getIndexFromIdentifier(sender.id);
|
||||||
|
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeLastEditedRowIfEmpty() {
|
function removeLastEditedRowIfEmpty() {
|
||||||
|
|
|
@ -24,6 +24,18 @@
|
||||||
|
|
||||||
/* generic stuff */
|
/* 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) {
|
function ml_stripActionInURL(url) {
|
||||||
if (url[url.length - 1] != '/') {
|
if (url[url.length - 1] != '/') {
|
||||||
var i;
|
var i;
|
||||||
|
@ -282,9 +294,10 @@ function onRowClick(node, event) {
|
||||||
|
|
||||||
/* popup menus */
|
/* popup menus */
|
||||||
|
|
||||||
bodyOnClick = "";
|
var bodyOnClick = "";
|
||||||
acceptClick = false;
|
var acceptClick = false;
|
||||||
menuClickNode = null;
|
var menuClickNode = null;
|
||||||
|
var currentSubmenu = null;
|
||||||
|
|
||||||
function onMenuClick(node, event, menuId)
|
function onMenuClick(node, event, menuId)
|
||||||
{
|
{
|
||||||
|
@ -295,9 +308,11 @@ function onMenuClick(node, event, menuId)
|
||||||
acceptClick = false;
|
acceptClick = false;
|
||||||
bodyOnClick = "" + document.body.getAttribute("onclick");
|
bodyOnClick = "" + document.body.getAttribute("onclick");
|
||||||
document.body.setAttribute("onclick", "onBodyClick('" + menuId + "'); return false;");
|
document.body.setAttribute("onclick", "onBodyClick('" + menuId + "'); return false;");
|
||||||
popup = document.getElementById(menuId);
|
var popup = document.getElementById(menuId);
|
||||||
popup.setAttribute("style", "visibility: visible; top: " + event.pageY
|
hideMenu(popup);
|
||||||
+ "px; left: " + event.pageX + "px;" );
|
popup.style.top = event.pageY + "px";
|
||||||
|
popup.style.left = event.pageX + "px";
|
||||||
|
popup.style.visibility = "visible";
|
||||||
menuClickNode = node;
|
menuClickNode = node;
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
@ -310,13 +325,25 @@ function onBodyClick(menuId)
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
popup = document.getElementById(menuId);
|
popup = document.getElementById(menuId);
|
||||||
popup.setAttribute("style", "visibility: hidden");
|
hideMenu(popup);
|
||||||
document.body.setAttribute("onclick", bodyOnClick);
|
document.body.setAttribute("onclick", bodyOnClick);
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
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)
|
function onMenuEntryClick(node, event, menuId)
|
||||||
{
|
{
|
||||||
id = node.getAttribute("id");
|
id = node.getAttribute("id");
|
||||||
|
@ -325,3 +352,116 @@ function onMenuEntryClick(node, event, menuId)
|
||||||
return false;
|
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-repeat: no-repeat;
|
||||||
background-position: 2px 2px;
|
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;
|
padding-bottom: .2em;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu LI:hover
|
.menu LI:hover
|
||||||
|
@ -394,3 +395,27 @@ SPAN.toolbarButton:active
|
||||||
border-top: 1px solid #aaa;
|
border-top: 1px solid #aaa;
|
||||||
border-bottom: 1px solid #fff;
|
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