[Zope-CVS] CVS: Products/PageDesign/www - pagedesign.css.dtml:1.2 scripts.js:1.5

[Shane Hathaway]

Update of /cvs-repository/Products/PageDesign/www
In directory cvs.zope.org:/tmp/cvs-serv20012/www

Modified Files:
	pagedesign.css.dtml scripts.js 
Log Message:
- Allowed designs to embed other designs.

- Prevented dragging an item into itself.

- Renamed the JS functions and changed argument order to structure the script
  in a class-oriented way.


=== Products/PageDesign/www/pagedesign.css.dtml 1.1 => 1.2 ===
--- Products/PageDesign/www/pagedesign.css.dtml:1.1	Mon Aug 12 22:42:39 2002
+++ Products/PageDesign/www/pagedesign.css.dtml	Tue Aug 13 14:01:02 2002
@@ -38,3 +38,8 @@
   border: 2px solid #eeeeee;
   background-color: #eeeeee;
 }
+
+.design-target-nodrop {
+  border: 2px solid #eeeeee;
+  background-color: #eeeeee;
+}


=== Products/PageDesign/www/scripts.js 1.4 => 1.5 ===
--- Products/PageDesign/www/scripts.js:1.4	Mon Aug 12 22:42:39 2002
+++ Products/PageDesign/www/scripts.js	Tue Aug 13 14:01:02 2002
@@ -43,7 +43,7 @@
 }
 
 
-function unhighlightTarget() {
+function DesignTarget_unhighlight() {
   if (highlighted_target) {
     highlighted_target.style.border = target_normal_border;
     highlighted_target = null;
@@ -51,17 +51,17 @@
 }
 
 
-function highlightTarget(e, node) {
+function DesignTarget_highlight(node, e) {
   if (!e)
     e = event;
   // e.stopPropagation();
-  unhighlightTarget();
+  DesignTarget_unhighlight();
   node.style.border = target_highlighted_border;
   highlighted_target = node;
 }
 
 
-function dragElement(e, highlighted_element) {
+function DesignElement_drag(highlighted_element, e) {
   if (dragging)
     return;
   dragging = true;
@@ -88,8 +88,10 @@
         // Don't let the user drag an outer element to an inner target.
         // If we allowed this, the item would just disappear unless
         // the inner area shows up more than once on the page.
-        continue;
+        node.className = "design-target-nodrop";
       }
+      else
+        node.className = "design-target";
     }
   }
 
@@ -137,13 +139,13 @@
 }
 
 
-function toggleElement(e, node) {
-  var i, child, parent;
+function DesignElement_toggle(design_element, e) {
+  var i, child;
+  var body_node = null;
   var hide = false;
 
-  parent = node.parentNode;
-  for (i = 0; i < parent.childNodes.length; i++) {
-    child = parent.childNodes[i];
+  for (i = 0; i < design_element.childNodes.length; i++) {
+    child = design_element.childNodes[i];
     if (child.className == "design-element-titlebar") {
       if (child.style.display && child.style.display != "none") {
         hide = true;
@@ -157,14 +159,48 @@
       }
       break;
     }
+    else if (child.className == "design-element-body")
+      body_node = child;
   }
   if (hide) {
-    parent.style.border = element_hidden_border;
-    node.style.border = elementbody_hidden_border;
+    design_element.style.border = element_hidden_border;
+    if (body_node)
+      body_node.style.border = elementbody_hidden_border;
   }
   else {
-    parent.style.border = element_visible_border;
-    node.style.border = elementbody_visible_border;
+    design_element.style.border = element_visible_border;
+    if (body_node)
+      body_node.style.border = elementbody_visible_border;
+  }
+}
+
+
+function DesignElement_managesNode(design_element, node) {
+  // Returns true if the design element manages the specified node.
+  var n = node;
+  while (n) {
+    if (n == design_element)
+      return true;
+    else if (n.className == 'design-element')
+      return false;  // node belongs to another design element
+    else if (n.className == 'design-target')
+      return false;  // node belongs to a design target
+    n = n.parentNode;
+  }
+  return false;
+}
+
+
+function DesignElement_clicked(design_element, e) {
+  if (!e)
+    e = event;
+  if (DesignElement_managesNode(design_element, e.target)) {
+    DesignElement_toggle(design_element, e);
+    return false;  // Finished processing the event.
+  }
+  else {
+    // Let the event bubble up.
+    return true;
   }
 }
 
@@ -172,34 +208,33 @@
 function initDesignNodes(node) {
   if (node.className == "design-element-body") {
     if (!node.onclick) {
-      function callToggleElement(e) {
-        toggleElement(e, node);
-        return false;
+      function call_element_clicked(e) {
+        return DesignElement_clicked(node.parentNode, e);
       }
-      node.onclick = callToggleElement;
+      node.onclick = call_element_clicked;
     }
     if (!node.onmousedown) {
-      function callDragElement(e) {
-        dragElement(e, node.parentNode);
+      function call_element_drag(e) {
+        DesignElement_drag(node.parentNode, e);
       }
-      node.onmousedown = callDragElement;
+      node.onmousedown = call_element_drag;
     }
   }
   else if (node.className == "design-element-titlebar") {
     if (!node.onmousedown) {
-      function callDragElement(e) {
-        dragElement(e, node.parentNode);
+      function call_element_drag(e) {
+        DesignElement_drag(node.parentNode, e);
       }
-      node.onmousedown = callDragElement;
+      node.onmousedown = call_element_drag;
     }
   }
   else if (node.className == "design-target") {
-    function callHighlightTarget(e) {
-      if (dragging)
-        highlightTarget(e, node);
+    function call_target_highlight(e) {
+      if (dragging && node.className == "design-target")
+        DesignTarget_highlight(node, e);
     }
-    node.onmouseover = callHighlightTarget;
-    node.onmouseout = unhighlightTarget;
+    node.onmouseover = call_target_highlight;
+    node.onmouseout = DesignTarget_unhighlight;
     if (all_targets.push) {
       all_targets.push(node);
     }
@@ -222,4 +257,3 @@
   var url = design_url + '/addElementDialog?target_path=' + target_path;
   window.open(url, '', 'width=640, height=480, resizable, scrollbars, status');
 }
-