[Zope-CVS] CVS: Products/PageDesign/www - addElementDialog.pt:1.2 edit.gif:1.2 element_add.gif:1.2 example_template.pt:1.2 main.pt:1.2 movedown.gif:1.2 moveup.gif:1.2 object_list_rows.pt:1.2 remove.gif:1.2 sorted_down.gif:1.2 sorted_up.gif:1.2 designFrames.pt:1.2 designTopFrame.pt:1.2 pagedesign.css:1.2 scripts.js:1.3 areas.pt:NONE
Shane Hathaway
shane@cvs.zope.org
Mon, 12 Aug 2002 10:39:29 -0400
Update of /cvs-repository/Products/PageDesign/www
In directory cvs.zope.org:/tmp/cvs-serv8780/www
Modified Files:
designFrames.pt designTopFrame.pt pagedesign.css scripts.js
Added Files:
addElementDialog.pt edit.gif element_add.gif
example_template.pt main.pt movedown.gif moveup.gif
object_list_rows.pt remove.gif sorted_down.gif sorted_up.gif
Removed Files:
areas.pt
Log Message:
Merged page-redesign-branch. This is almost ready to try out.
=== Products/PageDesign/www/addElementDialog.pt 1.1 => 1.2 ===
--- /dev/null Mon Aug 12 10:39:29 2002
+++ Products/PageDesign/www/addElementDialog.pt Mon Aug 12 10:39:29 2002
@@ -0,0 +1,34 @@
+<html>
+<head>
+<title>Add page element</title>
+</head>
+<body tal:define="source_path python:
+ request.get('source_path') or '/'.join(here.aq_parent.getPhysicalPath())">
+<form action="addElementDialog" method="GET">
+<input type="hidden" name="target_path"
+ tal:attributes="value request/target_path" />
+Folder:
+<select name="source_path" onchange="go.click()"
+ tal:define="parent_paths python: here.computeParentPaths(source_path)">
+<option tal:content="source_path"
+ tal:attributes="value source_path">/a/b/c</option>
+<option tal:repeat="parent_path parent_paths" tal:content="parent_path"
+ tal:attributes="value parent_path">/site/folder/stuff</option>
+</select>
+<input type="submit" value="Go" name="go" />
+</form>
+
+<div tal:define="folder python: here.restrictedTraverse(source_path);
+ items python: here.getFolderContentsInfo(folder, request)">
+<form action="addElements" tal:condition="items">
+<table>
+<tbody metal:use-macro="here/object_list_rows/macros/tbody" />
+</table>
+<input type="hidden" name="target_path"
+ tal:attributes="value request/target_path" />
+<input type="submit" value="Add elements" name="submit" />
+</form>
+</div>
+
+</body>
+</html>
=== Products/PageDesign/www/edit.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/element_add.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/example_template.pt 1.1 => 1.2 ===
--- /dev/null Mon Aug 12 10:39:29 2002
+++ Products/PageDesign/www/example_template.pt Mon Aug 12 10:39:29 2002
@@ -0,0 +1,66 @@
+<html>
+ <head>
+ <title tal:content="template/title">The title</title>
+ </head>
+ <body>
+
+<table border="4" width="100%">
+<tr>
+<th colspan="3">
+<h2>
+Slotted Page Example
+</h2>
+</th>
+</tr>
+<tr>
+
+<td width="25%" valign="top">
+Left column
+<div class="column-element" tal:repeat="element options/slots/left/multiple|nothing"
+ tal:content="structure element">
+Element here...
+</div>
+</td>
+
+<td width="50%" valign="top">
+Middle column
+<div class="main-element" tal:repeat="element options/slots/middle/multiple|nothing"
+ tal:content="structure element">
+Element here...
+</div>
+</td>
+
+<td width="50%" valign="top">
+
+Small ad
+
+<table border="1" width="100%">
+<tr>
+<td tal:content="structure options/slots/small_ad/single|default">
+
+</td>
+</tr>
+</table>
+
+Right column
+<div class="column-element" tal:repeat="element options/slots/right/multiple|nothing"
+ tal:content="structure element">
+Element here...
+</div>
+</td>
+
+</tr>
+
+</table>
+
+<br />
+
+<div align="center">
+Copyrights and trademarks
+<div tal:content="structure options/slots/bottom/single|default">
+</div>
+</div>
+
+ </body>
+</html>
+
=== Products/PageDesign/www/main.pt 1.1 => 1.2 ===
--- /dev/null Mon Aug 12 10:39:29 2002
+++ Products/PageDesign/www/main.pt Mon Aug 12 10:39:29 2002
@@ -0,0 +1,40 @@
+<h1 tal:replace="structure here/manage_page_header">Header</h1>
+<h2 tal:define="manage_tabs_message options/manage_tabs_message | nothing"
+ tal:replace="structure here/manage_tabs">Tabs</h2>
+
+<p>
+<a href="designFrames" target="design">Edit!</a>
+</p>
+
+<form action="manage_changeProperties" method="POST">
+<table>
+
+<tr>
+<th>
+Title
+</th>
+<td>
+<input type="text" name="title" size="50"
+ tal:attributes="value here/title" />
+</td>
+</tr>
+
+<tr>
+<th>
+Template ID
+</th>
+<td>
+<input type="text" name="template_id" size="30"
+ tal:attributes="value here/template_id" />
+</td>
+</tr>
+
+<tr>
+<td colspan="2">
+<input type="submit" name="submit" value="Save Changes" />
+</td>
+</tr>
+</table>
+
+
+<h1 tal:replace="structure here/manage_page_footer">Footer</h1>
=== Products/PageDesign/www/movedown.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/moveup.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/object_list_rows.pt 1.1 => 1.2 ===
--- /dev/null Mon Aug 12 10:39:29 2002
+++ Products/PageDesign/www/object_list_rows.pt Mon Aug 12 10:39:29 2002
@@ -0,0 +1,72 @@
+<!-- Invoke this macro with "items" in the namespace. -->
+
+<table>
+<tbody metal:define-macro="tbody"
+ tal:define="my_url python: request['URL'] + '?';
+ mq python: modules['ZTUtils'].make_query;
+ sort_on python: request.get('sort_on', 'ID');
+ sort_order python: request.get('sort_order', 'normal');">
+<tr>
+<th nowrap="nowrap" width="5%"></th>
+<th tal:repeat="column python: ['ID', 'Title', 'Type']"
+ tal:attributes="width python: column == 'Title' and '50%' or default"
+ align="left">
+ <a href="" tal:omit-tag="python: sort_on == column"
+ tal:attributes="href python: my_url +
+ mq(request.form, sort_on=column, sort_order='normal')"
+ tal:content="column">Column</a>
+ <a href="" tal:condition="python: sort_on == column"
+ tal:attributes="href python: my_url + mq(request.form,
+ sort_on=column, sort_order=(sort_order == 'normal'
+ and 'reverse' or 'normal'))"><img border="0" tal:attributes="src
+ python: here.absolute_url() + '/' + (
+ sort_order == 'normal' and 'sorted_down_icon' or
+ 'sorted_up_icon')" /></a>
+</th>
+</tr>
+
+<tr tal:repeat="item items">
+
+<tal:block tal:condition="item/folderish" tal:define="item_path item/path">
+ <td>
+ </td>
+ <td valign="top" nowrap="nowrap">
+ <a href="#" tal:attributes="href python: my_url +
+ mq(request.form, source_path=item_path)">
+ <img src="document_icon.gif" border="0" tal:condition="item/icon"
+ tal:attributes="src item/icon" />
+ <span tal:content="item/id">ID</span>
+ </a>
+ </td>
+ <td valign="top" nowrap="nowrap">
+ <span tal:content="item/title">TITLE</span>
+ </td>
+</tal:block>
+
+<tal:block tal:condition="not:item/folderish" tal:define="item_path item/path">
+ <td valign="top" nowrap="nowrap">
+ <input type="checkbox" name="source_paths:list"
+ tal:attributes="value item_path; id item_path" />
+ </td>
+
+ <td valign="top" nowrap="nowrap">
+ <label tal:attributes="for item_path">
+ <img src="document_icon.gif" border="0" tal:condition="item/icon"
+ tal:attributes="src item/icon" />
+ <span tal:content="item/id">ID</span>
+ </label>
+ </td>
+
+ <td valign="top" nowrap="nowrap">
+ <label tal:attributes="for item_path">
+ <span tal:content="item/title">TITLE</span>
+ </label>
+ </td>
+</tal:block>
+
+<td valign="top" tal:content="item/type" nowrap="nowrap">
+ Type
+</td>
+</tr>
+</tbody>
+</table>
=== Products/PageDesign/www/remove.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/sorted_down.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/sorted_up.gif 1.1 => 1.2 ===
=== Products/PageDesign/www/designFrames.pt 1.1.1.1 => 1.2 ===
--- Products/PageDesign/www/designFrames.pt:1.1.1.1 Sat Jun 8 12:09:34 2002
+++ Products/PageDesign/www/designFrames.pt Mon Aug 12 10:39:29 2002
@@ -5,16 +5,16 @@
</head>
<frameset rows="24, *"
tal:define="pq python: request.get('preview', 0) and '?preview=1' or ''">
- <frame src="manage_designTopFrame" name="manage_designTopFrame"
+ <frame src="designTopFrame" name="designTopFrame"
tal:attributes="src
- string:${here/absolute_url}/manage_designTopFrame${pq}"
+ string:${here/absolute_url}/designTopFrame${pq}"
marginheight="0" scrolling="no" />
- <frame src="manage_editForm" name="manage_editForm"
+ <frame src="editForm" name="editForm"
tal:attributes="src python:
- here.absolute_url() + (not pq and '/manage_editForm' or '')"
+ here.absolute_url() + (not pq and '/editForm' or '')"
marginwidth="2" marginheight="2" scrolling="auto" />
</frameset>
<noframes>
- <a href="manage_editForm">Edit page elements</a>
+ <a href="editForm">Edit page elements</a>
</noframes>
</html>
=== Products/PageDesign/www/designTopFrame.pt 1.1.1.1 => 1.2 ===
--- Products/PageDesign/www/designTopFrame.pt:1.1.1.1 Sat Jun 8 12:09:34 2002
+++ Products/PageDesign/www/designTopFrame.pt Mon Aug 12 10:39:29 2002
@@ -15,7 +15,7 @@
// --></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>
@@ -24,12 +24,12 @@
editable python: (not locktool or (locktool.locked(here)
and not locktool.isLockedOut(here)));"
tal:condition="editable"><a
- href="manage_designFrames" target="_top">Edit</a> |
+ href="designFrames" target="_top">Edit</a> |
</span>
<a
- href="manage_designFrames?preview=1"
+ 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 => 1.2 ===
--- Products/PageDesign/www/pagedesign.css:1.1.1.1 Sat Jun 8 12:09:34 2002
+++ Products/PageDesign/www/pagedesign.css Mon Aug 12 10:39:29 2002
@@ -1,42 +1,29 @@
-#design-palette-window {
- position: fixed;
- left: 0;
- top: 0;
- width: 400;
- background-color: white;
- border: medium outset;
- z-index: 1001;
+#design-move-box {
+ border: 1px dotted black;
+ position: absolute;
+ display: none;
+ z-index: 1000;
+}
+
+.design-element {
+ border: 1px outset darkblue;
}
-#design-palette-titlebar {
+.design-element-titlebar {
background-color: darkblue;
color: #ffffff;
font-weight: bold;
+ text-align: left;
+ border: 1px outset darkblue;
+ border-spacing: 0px;
}
-#design-palette-contents-box {
- border: medium inset;
-}
-
-#design-palette-contents {
- overflow: scroll;
- min-height: 64px;
-}
-
-#design-move-box {
- border: 2px dashed black;
- position: absolute;
- display: none;
- z-index: 1002;
-}
-
-.design-element {
- border: 2px dashed transparent;
+.design-element-body {
+ border: 1px inset darkblue;
}
.design-target {
- border: 1px dashed black;
- padding: 2px;
- visibility: hidden;
+ border: 2px solid #eeeeee;
+ background-color: #eeeeee;
}
=== Products/PageDesign/www/scripts.js 1.2 => 1.3 ===
--- Products/PageDesign/www/scripts.js:1.2 Sat Jun 8 12:22:56 2002
+++ Products/PageDesign/www/scripts.js Mon Aug 12 10:39:29 2002
@@ -13,9 +13,13 @@
// Page design scripts
var dragging = false;
-var highlighted_element = null;
var highlighted_target = null;
var all_targets = [];
+var design_url = ''; // Set by PageDesign outside this script
+
+var target_normal_border = "2px solid #eeeeee";
+var target_highlighted_border = "2px dotted red"
+var target_loading_border = "2px solid green";
function hasAncestor(node, ancestor) {
@@ -34,73 +38,9 @@
}
-function setupPalette() {
- var node = document.getElementById('design-palette-window');
- node.style.width = window.innerWidth * 2 / 3;
- node.style.top = window.innerHeight - node.offsetHeight;
- node.style.left = (window.innerWidth - node.offsetWidth) / 2;
-}
-
-
-function dragWindow(e, node) {
- if (!e)
- e = event;
- var dx = parseInt(node.style.left || '0') - e.screenX;
- var dy = parseInt(node.style.top || '0') - e.screenY;
-
- function drag(e) {
- if (!e)
- e = event;
- node.style.left = e.screenX + dx;
- node.style.top = e.screenY + dy;
- }
-
- function finish(e) {
- dragging = false;
- document.onmousemove = null;
- document.onmouseup = null;
- document.onselectstart = null;
- // Store the new position on the server somehow.
- }
-
- dragging = true;
- document.onmousemove = drag;
- document.onmouseup = finish;
- document.onselectstart = ignore;
-
- if (e.preventDefault)
- e.preventDefault(); // Mozilla / NS 6: Don't start a selection.
-}
-
-
-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 = target_normal_border;
highlighted_target = null;
}
}
@@ -111,18 +51,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 = target_highlighted_border;
highlighted_target = node;
}
@@ -136,49 +65,26 @@
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) {
var i;
- var id_before=null;
- 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);
- if (parts.length == 2) {
- i = parseInt(parts[1]);
- id_after = 'targets/' + parts[0] + '/' + (i + 1);
- }
for (i = 0; i < all_targets.length; i++) {
node = all_targets[i];
- if (node.id == id_before || node.id == id_after) {
- // Don't let the user drag to the same spot.
- continue;
- }
if (hasAncestor(node, highlighted_element)) {
// 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.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;
}
}
@@ -190,15 +96,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) {
@@ -209,27 +115,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 = target_loading_border;
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));
}
}
@@ -243,23 +133,23 @@
function initDesignNodes(node) {
- if (node.className == "design-element") {
- if (!node.onmouseover) {
- function callHighlightElement(e) {
- highlightElement(e, node);
- }
+ if (node.className == "design-element-body") {
+ if (!node.onclick) {
+ node.onclick = ignore;
+ }
+ }
+ else if (node.className == "design-element-titlebar") {
+ if (!node.onmousedown) {
function callDragElement(e) {
- dragElement(e, node);
+ dragElement(e, node.parentNode);
}
- 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;
@@ -278,7 +168,10 @@
}
function initPageDesign() {
- setupPalette();
initDesignNodes(document);
}
+function addElementDialog(target_path) {
+ var url = design_url + '/addElementDialog?target_path=' + target_path;
+ window.open(url, '', 'width=640, height=480, resizable, scrollbars, status');
+}
=== Removed File Products/PageDesign/www/areas.pt ===