[Zope3-checkins] CVS: Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www - pdlib.js:1.2 spacer3.gif:1.3 view_macros.pt:1.4 widget_macros.pt:1.5 zopetopStructure.css:1.4 zopetop_scripts.js:1.2
Shane Hathaway
shane@zope.com
Thu, 21 Nov 2002 14:57:40 -0500
Update of /cvs-repository/Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www
In directory cvs.zope.org:/tmp/cvs-serv6187
Modified Files:
pdlib.js spacer3.gif view_macros.pt widget_macros.pt
zopetopStructure.css zopetop_scripts.js
Log Message:
Incorporated feedback.
- You have to drag the box top, not the box, thereby allowing mouse
interaction with the box.
- Now the separators only show up when you are dragging.
- Selection now highlights the area around the box rather than the box itself.
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/pdlib.js 1.1 => 1.2 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/pdlib.js:1.1 Wed Nov 20 16:27:21 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/pdlib.js Thu Nov 21 14:57:39 2002
@@ -45,9 +45,10 @@
var pd_drag_select_mode = null; // In drag-select mode, -1 or 1, otherwise null
var pd_node_setup = {}; // Object containing node setup functions
var pd_max_contextmenu_width = 250; // Threshold for faulty browsers
+var pd_invisible_targets = []; // A list of normally invisible drop targets
var pd_target_normal_border = "2px solid transparent";
-var pd_target_highlighted_border = "2px dotted red"
+var pd_target_highlighted_border = "2px dotted red";
var pd_target_loading_border = "2px solid green";
@@ -86,6 +87,11 @@
return null;
}
+function pd_highlight(node, enabled) {
+ node.style.color = enabled ? "HighlightText" : "";
+ node.style.backgroundColor = enabled ? "Highlight" : "";
+}
+
//
// Context menu functions
//
@@ -142,20 +148,16 @@
if (!e)
e = event;
var node = pd_getContextMenuItem(e);
- if (node) {
- node.style.backgroundColor = "Highlight";
- node.style.color = "HighlightText";
- }
+ if (node)
+ pd_highlight(node, true);
}
function pd_unhighlightContextMenuItem(e) {
if (!e)
e = event;
var node = pd_getContextMenuItem(e);
- if (node) {
- node.style.backgroundColor = "";
- node.style.color = "";
- }
+ if (node)
+ pd_highlight(node, false);
}
function pd_filterContextMenuItems(node) {
@@ -187,6 +189,7 @@
this.start_y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
this.feedback_node = document.getElementById("drag-feedback-box");
this.began_moving = false;
+ this.revealed = [];
}
function pd_unhighlightDropTarget() {
@@ -196,31 +199,35 @@
}
}
-function pd_highlightDropTarget(target, e) {
+function pd_allowDrop(target) {
if (!pd_drag_event)
- return;
- if (!e)
- e = event;
+ return false;
var i;
for (i = 0; i < pd_selected_items.length; i++) {
if (pd_hasAncestor(target, pd_selected_items[i])) {
// Don't let the user drag an element inside itself.
- return;
+ return false;
}
}
if (pd_drag_event.checkmove_func) {
if (!pd_drag_event.checkmove_func(pd_selected_items, target))
- return;
+ return false;
+ }
+ return true;
+}
+
+function pd_highlightDropTarget(target) {
+ if (pd_allowDrop(target)) {
+ pd_unhighlightDropTarget();
+ target.style.border = pd_target_highlighted_border;
+ pd_drag_event.target = target;
}
- pd_unhighlightDropTarget();
- target.style.border = pd_target_highlighted_border;
- pd_drag_event.target = target;
}
function pd_firstDrag(x, y) {
if (!pd_drag_event)
return;
- var i;
+ var i, target;
var feedback_node_style = pd_drag_event.feedback_node.style;
var item = pd_selected_items[0]; // TODO: expand box to include all items
@@ -230,6 +237,18 @@
feedback_node_style.width = item.offsetWidth - 2;
feedback_node_style.height = item.offsetHeight - 2;
feedback_node_style.display = "block";
+
+ // Show some of the normally invisible targets.
+ for (i = 0; i < pd_invisible_targets.length; i++) {
+ target = pd_invisible_targets[i];
+ if (pd_allowDrop(target)) {
+ if (pd_drag_event.revealed.push)
+ pd_drag_event.revealed.push(target);
+ else
+ pd_drag_event.revealed = pd_drag_event.revealed.concat([target]);
+ target.style.visibility = "visible";
+ }
+ }
}
function pd_dragging(e) {
@@ -253,6 +272,10 @@
}
function pd_finishDrag() {
+ var i;
+ for (i = 0; i < pd_drag_event.revealed.length; i++)
+ pd_drag_event.revealed[i].style.visibility = '';
+
document.onmousemove = null;
document.onmouseup = null;
document.onselectstart = null;
@@ -321,8 +344,7 @@
pd_selected_items = newsel;
pd_changedSelection();
}
- node.style.color = '';
- node.style.backgroundColor = '';
+ pd_highlight(node, false);
}
function pd_select(node) {
@@ -334,19 +356,14 @@
else
pd_selected_items = pd_selected_items.concat([node]);
}
- pd_changedSelection();
- node.style.color = 'HighlightText';
- node.style.backgroundColor = 'Highlight';
+ pd_highlight(node, true);
}
function pd_clearSelection() {
- var i, node;
+ var i, node, n;
if (pd_selected_items) {
- for (i = 0; i < pd_selected_items.length; i++) {
- node = pd_selected_items[i];
- node.style.color = '';
- node.style.backgroundColor = '';
- }
+ for (i = 0; i < pd_selected_items.length; i++)
+ pd_highlight(pd_selected_items[i], false);
}
pd_selected_items = [];
pd_changedSelection();
@@ -374,33 +391,34 @@
// On-page object management functions
//
-function pd_itemOnMousedown(mo, e, move_func, checkmove_func) {
+function pd_itemOnMousedown(mo, e, move_func, checkmove_func, box) {
if (!e)
e = event;
if (e.button == 0 || e.button == 1) {
pd_hideContextMenu();
+ if (!box)
+ box = mo;
if (e.shiftKey) {
// Toggle the selected state of this item and start drag select.
- if (pd_isSelected(mo)) {
- pd_deselect(mo);
+ if (pd_isSelected(box)) {
+ pd_deselect(box);
pd_startDragSelect(-1);
}
else {
- pd_select(mo);
+ pd_select(box);
pd_startDragSelect(1);
}
}
else if (e.ctrlKey) {
- if (pd_isSelected(mo))
- pd_deselect(mo);
+ if (pd_isSelected(box))
+ pd_deselect(box);
else
- pd_select(mo);
- // No dragging
+ pd_select(box);
}
else {
- if (!pd_isSelected(mo)) {
+ if (!pd_isSelected(box)) {
pd_clearSelection();
- pd_select(mo);
+ pd_select(box);
}
pd_startDrag(e, move_func, checkmove_func);
}
@@ -408,21 +426,21 @@
return pd_stopEvent(e);
}
-function pd_itemOnMouseover(mo, e) {
+function pd_itemOnMouseover(mo, e, box) {
if (pd_drag_select_mode) {
- if (!e)
- e = event;
- pd_dragSelecting(mo);
+ pd_dragSelecting(box || mo);
return pd_stopEvent(e);
}
}
-function pd_itemOnContextMenu(mo, e, contextMenuId) {
+function pd_itemOnContextMenu(mo, e, contextMenuId, box) {
if (!e)
e = event;
- if (!pd_isSelected(mo)) {
+ if (!box)
+ box = mo;
+ if (!pd_isSelected(box)) {
pd_clearSelection();
- pd_select(mo);
+ pd_select(box);
}
var menu = document.getElementById(contextMenuId);
if (menu) {
@@ -432,23 +450,23 @@
}
}
-function pd_setupDragUI(mo, move_func, checkmove_func) {
+function pd_setupDragUI(mo, move_func, checkmove_func, box) {
// Adds selection and drag and drop functionality to an element
function call_onmousedown(e) {
- return pd_itemOnMousedown(mo, e, move_func, checkmove_func);
+ return pd_itemOnMousedown(mo, e, move_func, checkmove_func, box);
}
function call_onmouseover(e) {
- return pd_itemOnMouseover(mo, e);
+ return pd_itemOnMouseover(mo, e, box);
}
mo.onmousedown = call_onmousedown;
mo.onmouseover = call_onmouseover;
mo.onselectstart = pd_stopEvent; // IE: Don't start a selection.
}
-function pd_setupContextMenu(mo, contextMenuId) {
+function pd_setupContextMenu(mo, contextMenuId, box) {
// Adds context menu functionality to an element
function oncontextmenu(e) {
- return pd_itemOnContextMenu(mo, e, contextMenuId);
+ return pd_itemOnContextMenu(mo, e, contextMenuId, box);
}
mo.oncontextmenu = oncontextmenu;
}
@@ -479,8 +497,8 @@
}
function pd_setupDropTarget(node) {
- function call_highlight(e) {
- return pd_highlightDropTarget(node, e);
+ function call_highlight() {
+ return pd_highlightDropTarget(node);
}
node.onmouseover = call_highlight;
node.onmouseout = pd_unhighlightDropTarget;
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/spacer3.gif 1.2 => 1.3 ===
<Binary-ish file>
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt 1.3 => 1.4 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt:1.3 Wed Nov 20 16:27:21 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt Thu Nov 21 14:57:39 2002
@@ -78,13 +78,16 @@
class="main-table">
<tr>
<td width="160" align="center" valign="top" class="left-column">
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr><td class="drop-target"> </td></tr>
- </table>
+ <div class="box-holder">
+ <img src="spacer3.gif" width="150" height="8" class="drop-target"
+ tal:attributes="src context/++resource++spacer3.gif" />
<span metal:use-macro="views/standard_macros/explorer_box" />
+ </div>
+ <div class="box-holder">
<img src="spacer3.gif" width="150" height="8" class="drop-target"
tal:attributes="src context/++resource++spacer3.gif" />
<span metal:use-macro="views/standard_macros/search_box" />
+ </div>
<img src="spacer3.gif" width="150" height="8" class="drop-target"
tal:attributes="src context/++resource++spacer3.gif" />
</td>
@@ -155,16 +158,21 @@
</table>
</td>
<td width="160" align="center" valign="top" class="right-column">
- <table width="100%" border="0" cellspacing="0" cellpadding="0">
- <tr><td> </td></tr>
- </table>
+ <div class="box-holder">
+ <img src="spacer3.gif" width="150" height="8" class="drop-target"
+ tal:attributes="src context/++resource++spacer3.gif" />
<span metal:use-macro="views/standard_macros/metadata_box" />
+ </div>
+ <div class="box-holder">
<img src="spacer3.gif" width="150" height="8" class="drop-target"
tal:attributes="src context/++resource++spacer3.gif" />
<span metal:use-macro="views/standard_macros/views_box" />
+ </div>
+ <div class="box-holder">
<img src="spacer3.gif" width="150" height="8" class="drop-target"
tal:attributes="src context/++resource++spacer3.gif" />
<span metal:use-macro="views/standard_macros/services_box" />
+ </div>
<img src="spacer3.gif" width="150" height="8" class="drop-target"
tal:attributes="src context/++resource++spacer3.gif" />
</td>
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt 1.4 => 1.5 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt:1.4 Wed Nov 20 16:27:21 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt Thu Nov 21 14:57:39 2002
@@ -18,13 +18,13 @@
width="150">
<thead>
<tr>
- <th align="center">Services</th>
+ <th align="center" class="boxtop">Services</th>
<th class="empty"> </th>
</tr>
</thead>
<tbody>
<tr>
- <td colspan="2" nowrap="nowrap">
+ <td colspan="2" nowrap="nowrap" class="highlightable">
<span tal:condition="not: context/hasServiceManager">
<a href="@@addServiceManager.html">Allow Services</a>
@@ -55,7 +55,7 @@
<table metal:define-macro="explorer_box" align="center" class="box" width="150">
<thead>
<tr>
- <th align="center" >Root Folder</th>
+ <th align="center" class="boxtop">Root Folder</th>
<th class="empty"> </th>
</tr>
</thead>
@@ -69,7 +69,7 @@
</td>
</tr>
<tr>
- <td colspan="2" class="odd"><a href="#"><img src="plus.gif"
+ <td colspan="2" class="odd"><a href="#"><img src="plus.gif"
width="19" height="25"
tal:attributes="src context/++resource++plus.gif"/><img
src="closed_folder.gif" width="26" height="25"
@@ -92,7 +92,7 @@
<table metal:define-macro="views_box" align="center" class="box" width="150">
<thead>
<tr>
- <th align="center">Views</th>
+ <th align="center" class="boxtop">Views</th>
<th class="empty"> </th>
</tr>
</thead>
@@ -112,7 +112,7 @@
width="150">
<thead>
<tr>
- <th align="center">Search</th>
+ <th align="center" class="boxtop">Search</th>
<th class="empty"> </th>
</tr>
</thead>
@@ -132,7 +132,7 @@
width="150">
<thead>
<tr>
- <th align="center">Metadata</th>
+ <th align="center" class="boxtop">Metadata</th>
<th class="empty"> </th>
</tr>
</thead>
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css 1.3 => 1.4 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css:1.3 Wed Nov 20 16:27:21 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css Thu Nov 21 14:57:39 2002
@@ -277,4 +277,5 @@
.drop-target {
border: 2px solid transparent;
+ visibility: hidden;
}
=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetop_scripts.js 1.1 => 1.2 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetop_scripts.js:1.1 Wed Nov 20 16:27:21 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetop_scripts.js Thu Nov 21 14:57:39 2002
@@ -35,11 +35,15 @@
}
function Boxes_move(pd_selected_items, target_node) {
- var i, node;
+ var i, node, peer;
+ if (target_node.parentNode.className == 'box-holder')
+ peer = target_node.parentNode;
+ else
+ peer = target_node;
for (i = 0; i < pd_selected_items.length; i++) {
node = pd_selected_items[i];
node.parentNode.removeChild(node);
- target_node.parentNode.insertBefore(node, target_node);
+ peer.parentNode.insertBefore(node, peer);
target_node.style.border = "2px solid transparent";
}
}
@@ -48,10 +52,34 @@
return true;
}
-function setupBox(node) {
- pd_setupDragUI(node, Boxes_move, Boxes_checkmove);
- pd_setupContextMenu(node, 'box-context-menu');
+function zopetop_findDescendant(node, className) {
+ // Returns a descendant with the given class name, or null.
+ if (node.className == className)
+ return node;
+ var i, c;
+ for (i = 0; i < node.childNodes.length; i++) {
+ c = zopetop_findDescendant(node.childNodes[i], className);
+ if (c != null)
+ return c;
+ }
+ return null;
+}
+
+function zopetop_setupBoxHolder(holder) {
+ var boxtop = zopetop_findDescendant(holder, "boxtop") || holder;
+ pd_setupDragUI(boxtop, Boxes_move, Boxes_checkmove, holder);
+ pd_setupContextMenu(boxtop, 'box-context-menu', holder);
+}
+
+pd_node_setup['box-holder'] = zopetop_setupBoxHolder;
+
+function zopetop_setupDropTarget(node) {
+ pd_setupDropTarget(node);
+ if (pd_invisible_targets.push)
+ pd_invisible_targets.push(node);
+ else
+ pd_invisible_targets = pd_invisible_targets.concat([node]);
}
-pd_node_setup['box'] = setupBox;
+pd_node_setup['drop-target'] = zopetop_setupDropTarget;