[Zope-CVS] CVS: Products/CompositePage/common -
grip_horizontal.gif:1.1 grip_horizontal_active.gif:1.1
grip_vertical.gif:1.1 grip_vertical_active.gif:1.1
edit.js:1.2 editstyles.css:1.3 pdlib.js:1.2 pdstyles.css:1.3
Shane Hathaway
shane at zope.com
Mon Dec 22 12:28:12 EST 2003
Update of /cvs-repository/Products/CompositePage/common
In directory cvs.zope.org:/tmp/cvs-serv10853/common
Modified Files:
edit.js editstyles.css pdlib.js pdstyles.css
Added Files:
grip_horizontal.gif grip_horizontal_active.gif
grip_vertical.gif grip_vertical_active.gif
Log Message:
Changed to use images for insertion points and element handles.
Test with IE, but we could simplify somewhat. I think the handles can
be simple image objects.
=== Added File Products/CompositePage/common/grip_horizontal.gif ===
<Binary-ish file>
=== Added File Products/CompositePage/common/grip_horizontal_active.gif ===
<Binary-ish file>
=== Added File Products/CompositePage/common/grip_vertical.gif ===
<Binary-ish file>
=== Added File Products/CompositePage/common/grip_vertical_active.gif ===
<Binary-ish file>
=== Products/CompositePage/common/edit.js 1.1 => 1.2 ===
--- Products/CompositePage/common/edit.js:1.1 Fri Sep 26 17:21:05 2003
+++ Products/CompositePage/common/edit.js Mon Dec 22 12:28:10 2003
@@ -61,11 +61,11 @@
function composite_highlightTarget(node, state) {
if (state == 0)
- node.style.background = "inherit";
+ node.style.className = "slot_target";
else if (state == 1)
- node.style.background = "black";
+ node.style.className = "slot_target_active";
else if (state == 2)
- node.style.background = "green";
+ node.style.className = "";
}
=== Products/CompositePage/common/editstyles.css 1.2 => 1.3 ===
--- Products/CompositePage/common/editstyles.css:1.2 Mon Sep 29 14:12:18 2003
+++ Products/CompositePage/common/editstyles.css Mon Dec 22 12:28:10 2003
@@ -1,13 +1,49 @@
/* Composite editing styles */
-.slot_target {
- padding: 2px;
- border-top: 1px dashed #0000ff;
- border-left: 1px dashed #0000ff;
- margin: 1px;
+div.slot_target {
+ padding: 4px;
+ border: 1px outset #cccccc;
+ background-color: #cccccc;
+ background-image: url("%(parent_url)s/grip_horizontal");
+ background-repeat: repeat;
+ clear: left;
}
-.slot_element {
- background: #dddddd;
- border: 1px inset #dddddd;
+div.slot_target_highlighted {
+ padding: 4px;
+ border: 1px outset #777777;
+ background-color: #777777;
+ background-image: url("%(parent_url)s/grip_horizontal_active");
+ background-repeat: repeat;
+ clear: left;
+}
+
+div.slot_element {
+}
+
+div.slot_element_header {
+ float: left;
+ width: 8px;
+ height: 16px;
+ margin: 0px 2px 2px 0px;
+ border: 1px outset #cccccc;
+ background-color: #cccccc;
+ background-image: url("%(parent_url)s/grip_vertical");
+ background-repeat: repeat;
+}
+
+div.slot_element_body {
+ display: table-cell;
+}
+
+div.slot_element_highlighted {
+ color: HighlightText;
+ background-color: Highlight;
+}
+
+div.slot_element_highlighted div.slot_element_header {
+ border: 1px outset #777777;
+ background-color: #777777;
+ background-image: url("%(parent_url)s/grip_vertical_active");
+ background-repeat: repeat;
}
=== Products/CompositePage/common/pdlib.js 1.1 => 1.2 ===
--- Products/CompositePage/common/pdlib.js:1.1 Fri Sep 26 17:21:05 2003
+++ Products/CompositePage/common/pdlib.js Mon Dec 22 12:28:10 2003
@@ -39,7 +39,7 @@
// See the documentation for descriptions.
// All other names are subject to change in future revisions.
-var pd_library_version = '0.2'; // The pdlib version. Avoid using this!
+var pd_library_version = '0.3'; // The pdlib version. Avoid depending on this!
var pd_open_context_menu = null; // The context menu node being displayed
var pd_drag_event = null; // A pd_DragEvent object while dragging
var pd_selected_items = null; // List of selected items
@@ -87,18 +87,16 @@
return null;
}
-function pd_highlight(node, enabled) {
- node.style.color = enabled ? "HighlightText" : "";
- node.style.backgroundColor = enabled ? "Highlight" : "";
-}
-
-function pd_defaultHighlightTarget(node, state) {
- if (state == 0)
- node.style.border = "2px solid transparent";
- else if (state == 1)
- node.style.border = "2px dotted red";
- else if (state == 2)
- node.style.border = "2px solid green";
+function pd_highlight(node, state) {
+ var cn = node.className;
+ if (state) {
+ if (cn.length < 12 || cn.substr(cn.length - 12) != "_highlighted")
+ node.className = cn + "_highlighted";
+ }
+ else {
+ if (cn.length >= 12 && cn.substr(cn.length - 12) == "_highlighted")
+ node.className = cn.substr(0, cn.length - 12);
+ }
}
//
@@ -151,26 +149,6 @@
}
}
-function pd_getContextMenuItem(e) {
- return pd_findEventTarget(e, "context-menu-item", "context-menu");
-}
-
-function pd_highlightContextMenuItem(e) {
- if (!e)
- e = event;
- var node = pd_getContextMenuItem(e);
- if (node)
- pd_highlight(node, true);
-}
-
-function pd_unhighlightContextMenuItem(e) {
- if (!e)
- e = event;
- var node = pd_getContextMenuItem(e);
- if (node)
- pd_highlight(node, false);
-}
-
function pd_filterContextMenuItems(node) {
// Execute filter scripts and set the "display" style property
var i, f, enabled;
@@ -196,7 +174,6 @@
this.target = null;
this.move_func = move_func;
this.checkmove_func = checkmove_func;
- this.highlight_func = null;
this.start_x = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft;
this.start_y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
this.feedback_node = document.getElementById("drag-feedback-box");
@@ -223,19 +200,16 @@
function pd_unhighlightTarget() {
if (pd_drag_event && pd_drag_event.target) {
- pd_drag_event.highlight_func(pd_drag_event.target, 0);
+ pd_highlight(pd_drag_event.target, "");
pd_drag_event.target = null;
}
}
-function pd_setHighlightedTarget(target, highlight_func) {
+function pd_setHighlightedTarget(target) {
if (pd_allowDrop(target)) {
pd_unhighlightTarget();
- if (!highlight_func)
- highlight_func = pd_defaultHighlightTarget;
- highlight_func(target, 1);
+ pd_highlight(target, "target");
pd_drag_event.target = target;
- pd_drag_event.highlight_func = highlight_func;
}
}
@@ -299,8 +273,7 @@
pd_drag_event = null;
if (ev.target) {
- if (ev.highlight_func)
- ev.highlight_func(ev.target, 2);
+ pd_highlight(ev.target, "wait");
if (ev.move_func)
ev.move_func(pd_selected_items, ev.target);
}
@@ -360,7 +333,7 @@
pd_selected_items = newsel;
pd_changedSelection();
}
- pd_highlight(node, false);
+ pd_highlight(node, "");
}
function pd_select(node) {
@@ -373,14 +346,14 @@
pd_selected_items = pd_selected_items.concat([node]);
pd_changedSelection();
}
- pd_highlight(node, true);
+ pd_highlight(node, "selected");
}
function pd_clearSelection() {
var i, node, n;
if (pd_selected_items) {
for (i = 0; i < pd_selected_items.length; i++)
- pd_highlight(pd_selected_items[i], false);
+ pd_highlight(pd_selected_items[i], "");
}
pd_selected_items = [];
pd_changedSelection();
@@ -520,9 +493,9 @@
pd_setupNodeAndDescendants(node);
}
-function pd_setupDropTarget(node, selectable, highlight_func) {
+function pd_setupDropTarget(node, selectable) {
function call_highlight() {
- return pd_setHighlightedTarget(node, highlight_func);
+ return pd_setHighlightedTarget(node);
}
node.onmouseover = call_highlight;
node.onmouseout = pd_unhighlightTarget;
@@ -531,11 +504,21 @@
}
function pd_setupContextMenuDefinition(node) {
- node.onmouseover = pd_highlightContextMenuItem;
- node.onmouseout = pd_unhighlightContextMenuItem;
node.onmousedown = pd_stopEvent;
node.onmouseup = pd_hideContextMenu;
}
+function pd_setupContextMenuItem(node) {
+ function call_highlight() {
+ pd_highlight(node, "hover");
+ }
+ function call_unhighlight() {
+ pd_highlight(node, "");
+ }
+ node.onmouseover = call_highlight;
+ node.onmouseout = call_unhighlight;
+}
+
pd_node_setup['drop-target'] = pd_setupDropTarget;
pd_node_setup['context-menu'] = pd_setupContextMenuDefinition;
+pd_node_setup['context-menu-item'] = pd_setupContextMenuItem;
=== Products/CompositePage/common/pdstyles.css 1.2 => 1.3 ===
--- Products/CompositePage/common/pdstyles.css:1.2 Mon Sep 29 14:12:18 2003
+++ Products/CompositePage/common/pdstyles.css Mon Dec 22 12:28:10 2003
@@ -7,25 +7,36 @@
z-index: 1000;
}
-.context-menu {
+div.context-menu {
position: absolute;
- border: 1px outset Menu;
- background-color: Menu;
- color: MenuText;
- cursor: default;
+ border: 1px outset;
+ background-color: #ddd;
+ color: black;
z-index: 1000;
visibility: hidden;
display: table;
+ padding: 1px;
}
-.context-menu-item {
+div.context-menu-item {
+ cursor: default;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+
+div.context-menu-item_highlighted {
+ cursor: default;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
+ color: HighlightText;
+ background-color: Highlight;
}
-.separator {
- border-top: 1px inset Menu;
- border-bottom: 1px inset Menu;
+div.context-menu div.separator {
+ border-top: 1px inset #ccc;
+ border-bottom: 1px inset #ccc;
}
More information about the Zope-CVS
mailing list