[Zope-CVS] CVS: Products/PageDesign/www - designTopFrame.pt:1.1.1.1.2.2 pagedesign.css:1.1.1.1.2.2 scripts.js:1.2.2.2

Shane Hathaway shane@cvs.zope.org
Tue, 6 Aug 2002 21:22:21 -0400


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

Modified Files:
      Tag: page-redesign-branch
	designTopFrame.pt pagedesign.css scripts.js 
Log Message:
The Javascript works again on Mozilla and Konqueror.


=== Products/PageDesign/www/designTopFrame.pt 1.1.1.1.2.1 => 1.1.1.1.2.2 ===
    // --></script>
   </head>
   <body bgcolor="black" text="white" link="#ffff00" vlink="#ffff00">
-   <p align="center">
+   <div align="center">
     Page Design: <b tal:content="here/title">home page</b>
     &nbsp;
     &nbsp;
@@ -30,6 +30,6 @@
        href="designFrames?preview=1"
        target="_top">Preview</a> |
     <a href="#" onClick="closeAndReload(); return false;">Close</a>
-   </p>
+   </div>
   </body>
 </html>


=== Products/PageDesign/www/pagedesign.css 1.1.1.1.2.1 => 1.1.1.1.2.2 ===
 
-#design-palette-window {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 400;
-  background-color: white;
-  border: medium outset;
-  z-index: 1001;
-}
-
-#design-palette-titlebar {
-  background-color: darkblue;
-  color: #ffffff;
-  font-weight: bold;
-}
-
-#design-palette-contents-box {
-  border: medium inset;
-}
-
-#design-palette-contents {
-  overflow: scroll;
-  min-height: 64px;
-}
-
 #design-move-box {
-  border: 2px dashed black;
+  border: 1px dotted black;
   position: absolute;
   display: none;
-  z-index: 1002;
+  z-index: 1000;
 }
 
 .design-element {
-  border: 2px dashed transparent;
+  border: 1px solid black;
+}
+
+.design-element-titlebar {
+  background-color: darkblue;
+  color: #ffffff;
+  font-weight: bold;
 }
 
 .design-target {
-  border: 1px solid black;
+  border: 2px solid black;
 }


=== Products/PageDesign/www/scripts.js 1.2.2.1 => 1.2.2.2 ===
 // Page design scripts
 
 var dragging = false;
-var highlighted_element = null;
 var highlighted_target = null;
 var all_targets = [];
 
@@ -34,34 +33,9 @@
 }
 
 
-function unhighlightElement() {
-  if (highlighted_element) {
-    highlighted_element.style.border = "2px dashed transparent";
-    highlighted_element = null;
-  }
-}
-
-
-function highlightElement(e, node) {
-  if (dragging)
-    return;
-  if (!e)
-    e = event;
-  e.stopPropagation();
-  unhighlightElement();
-  node.style.border = "2px dashed black";
-  highlighted_element = node;
-}
-
-
 function unhighlightTarget() {
   if (highlighted_target) {
-    if (highlighted_target.id == "design-palette-window") {
-      highlighted_target.style.border = "medium dashed black";
-    }
-    else {
-      highlighted_target.style.border = "1px dashed black";
-    }
+    highlighted_target.style.border = "2px solid black";
     highlighted_target = null;
   }
 }
@@ -72,18 +46,7 @@
     e = event;
   // e.stopPropagation();
   unhighlightTarget();
-  node.style.border = "1px solid red";
-  highlighted_target = node;
-}
-
-
-function highlightPaletteAsTarget(e) {
-  if (!e)
-    e = event;
-  // e.stopPropagation();
-  unhighlightTarget();
-  var node = document.getElementById('design-palette-window');
-  node.style.border = "medium solid red";
+  node.style.border = "2px dotted red";
   highlighted_target = node;
 }
 
@@ -97,7 +60,6 @@
   var start_x = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft;
   var start_y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
   var dragnode = document.getElementById("design-move-box");
-  var palnode = document.getElementById("design-palette-window");
   var init_complete = false;
 
   function setupDrag(x, y) {
@@ -106,12 +68,11 @@
     var id_after=null;
 
     init_complete = true;
-    dragnode.style.left = x + 3;
-    dragnode.style.top = y + 3;
-    dragnode.style.width = highlighted_element.offsetWidth - 4;
-    dragnode.style.height = highlighted_element.offsetHeight - 4;
+    dragnode.style.left = x + 5;
+    dragnode.style.top = y + 5;
+    dragnode.style.width = highlighted_element.offsetWidth - 2;
+    dragnode.style.height = highlighted_element.offsetHeight - 2;
     dragnode.style.display = "block";
-    unhighlightElement();
 
     id_before = 'targets/' + highlighted_element.id;
     parts = String(highlighted_element.id).split('/', 2);
@@ -131,15 +92,6 @@
         // the inner area shows up more than once on the page.
         continue;
       }
-      node.style.border = "1px dashed black";
-      node.style.visibility = "visible";
-    }
-
-    if (!hasAncestor(highlighted_element, palnode)) {
-      // Enable the palette as a target.
-      palnode.style.border = "medium dashed black";
-      palnode.onmouseover = highlightPaletteAsTarget;
-      palnode.onmouseout = unhighlightTarget;
     }
   }
 
@@ -151,15 +103,15 @@
     var y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
 
     if (!init_complete) {
-      if (Math.abs(x - start_x) <= 2 && Math.abs(y - start_y) <= 2) {
+      if (Math.abs(x - start_x) <= 3 && Math.abs(y - start_y) <= 3) {
         // Didn't move far enough yet.
         return;
       }
       setupDrag(x, y);
     }
 
-    dragnode.style.left = x + 3;
-    dragnode.style.top = y + 3;
+    dragnode.style.left = x + 5;
+    dragnode.style.top = y + 5;
   }
 
   function finish(e) {
@@ -170,27 +122,11 @@
     document.onselectstart = null;
     dragnode.style.display = "none";
 
-    for (i = 0; i < all_targets.length; i++) {
-      all_targets[i].style.visibility = "hidden";
-    }
-
-    palnode.style.border = "medium outset";
-    palnode.onmouseover = null;
-    palnode.onmouseout = null;
-
     if (highlighted_target) {
-      var target_id = highlighted_target.id;
-      if (target_id == 'design-palette-window') {
-        target_id = 'targets//';
-        highlighted_target.style.border = "medium solid #00ff00";
-      }
-      else {
-        highlighted_target.style.visibility = "visible";
-        highlighted_target.style.border = "1px solid #00ff00";
-      }
+      highlighted_target.style.border = "2px solid green";
       document.location = ('moveElement' +
-        "?source_info=" + escape(highlighted_element.id) +
-        "&target_info=" + escape(target_id));
+        "?source_path=" + escape(highlighted_element.id) +
+        "&target_path=" + escape(highlighted_target.id));
     }
   }
 
@@ -205,22 +141,18 @@
 
 function initDesignNodes(node) {
   if (node.className == "design-element") {
-    if (!node.onmouseover) {
-      function callHighlightElement(e) {
-        highlightElement(e, node);
-      }
+    if (!node.onmousedown) {
       function callDragElement(e) {
         dragElement(e, node);
       }
-      node.onmouseover = callHighlightElement;
-      node.onmouseout = unhighlightElement;
       node.onmousedown = callDragElement;
       node.onclick = ignore;
     }
   }
   else if (node.className == "design-target") {
     function callHighlightTarget(e) {
-      highlightTarget(e, node);
+      if (dragging)
+        highlightTarget(e, node);
     }
     node.onmouseover = callHighlightTarget;
     node.onmouseout = unhighlightTarget;