[Zope-CVS] CVS: Products/CompositePage/manual - body.pt:1.2
header.pt:1.2 manual.js:1.2 manual_styles.css:1.2
Shane Hathaway
shane at zope.com
Thu Feb 26 16:38:44 EST 2004
Update of /cvs-repository/Products/CompositePage/manual
In directory cvs.zope.org:/tmp/cvs-serv1031/manual
Added Files:
body.pt header.pt manual.js manual_styles.css
Log Message:
Merged composite-flat-ui-branch.
This adds a manual slotting interface (non-WYSIWYG). The manual
UI still supports drag and drop, but has many links and no
context menus.
=== Products/CompositePage/manual/body.pt 1.1 => 1.2 ===
--- /dev/null Thu Feb 26 16:38:43 2004
+++ Products/CompositePage/manual/body.pt Thu Feb 26 16:38:13 2004
@@ -0,0 +1,109 @@
+<div>
+
+<form name="manual_composite_ui">
+<table border="0" cellspacing="0" cellpadding="0">
+<tbody tal:repeat="slot_info options/slot_data">
+<tr>
+<td class="slot_top">
+ <span tal:content="slot_info/title">Headliner story</span>
+ - Slot <span tal:content="repeat/slot_info/number">1</span>
+<span target_index="0" tal:attributes="target_path slot_info/target_path">
+ <a href="#" onclick="manual_add(this.parentNode); return false;">+</a>
+ <a href="#" onclick="manual_delete(); return false;">-</a>
+ <a href="#" onclick="manual_copy(); return false;">C</a>
+ <a href="#" onclick="manual_cut(); return false;">X</a>
+ <tal:block tal:condition="request/__cp|nothing">
+ <a href="#" onclick="manual_paste(this.parentNode); return false;">P</a>
+ </tal:block>
+</span>
+</td>
+</tr>
+
+<tr tal:repeat="element_info slot_info/elements">
+<td class="slot_element" tal:attributes="source_path element_info/source_path">
+<table border="0" cellspacing="0" cellpadding="0" width="100%">
+<tr>
+<td colspan="3" class="slot_target"
+ tal:attributes="target_path slot_info/target_path;
+ target_index element_info/index"></td>
+</tr>
+<tr>
+<td valign="top" width="0%">
+ <input type="checkbox" name="source_paths:list"
+ tal:attributes="value element_info/source_path;
+ source_path element_info/source_path" />
+</td>
+<td width="100%">
+<div>
+ <img tal:condition="element_info/icon"
+ tal:attributes="src element_info/icon"
+ width="16" height="16" border="0" />
+ <b tal:content="element_info/title">Reducing Post-Bypass Readmissions</b>
+</div>
+<div>
+<span tal:attributes="source_path element_info/source_path">
+ <a href="#" onclick="manual_edit(this); return false;">edit</a> |
+ <a href="#" onclick="manual_preview(this); return false;">preview</a>
+ <span tal:condition="element_info/can_move_up"> |
+ <a href="#" onclick="manual_move(this); return false;"
+ tal:attributes="target_path slot_info/target_path;
+ target_index python: element_info['index'] - 1">move up</a>
+ </span>
+ <span tal:condition="element_info/can_move_down"> |
+ <a href="#" onclick="manual_move(this); return false;"
+ tal:attributes="target_path slot_info/target_path;
+ target_index python: element_info['index'] + 2">move down</a>
+ </span>
+</span>
+</div>
+</td>
+<td valign="top" align="right">
+<select>
+<option value="">Choose a view...<option>
+</select>
+</td>
+</tr>
+<tr>
+<td colspan="3" class="slot_target"
+ tal:attributes="target_path slot_info/target_path;
+ target_index element_info/next_index"></td>
+</tr>
+</table>
+</td>
+</tr>
+
+<tr tal:condition="not: slot_info/elements">
+<td class="slot_empty">
+<div class="slot_target"
+ tal:attributes="target_path slot_info/target_path;
+ target_index string:0"></div>
+<em>Empty space</em>
+<div class="slot_target"
+ tal:attributes="target_path slot_info/target_path;
+ target_index string:0"></div>
+</td>
+</tr>
+
+<tr>
+<td class="slot_bottom">
+<span target_index="0" tal:attributes="target_path slot_info/target_path">
+ <a href="#" onclick="manual_add(this); return false;">Add</a> |
+ <a href="#" onclick="manual_delete(); return false;">Remove</a> |
+ <a href="#" onclick="manual_copy(); return false;">Copy</a> |
+ <a href="#" onclick="manual_cut(); return false;">Cut</a>
+ <tal:block tal:condition="request/__cp|nothing"> |
+ <a href="#" onclick="manual_paste(this); return false;">Paste</a>
+ </tal:block>
+</span>
+</td>
+</tr>
+
+<tr class="slot_spacer">
+<td height="10"></td>
+</tr>
+
+</tbody>
+</table>
+</form>
+
+</div>
=== Products/CompositePage/manual/header.pt 1.1 => 1.2 ===
--- /dev/null Thu Feb 26 16:38:43 2004
+++ Products/CompositePage/manual/header.pt Thu Feb 26 16:38:13 2004
@@ -0,0 +1,16 @@
+<!-- manual/header.pt -->
+<tal:block tal:define="url options/ui/absolute_url">
+<link rel="stylesheet" type="text/css"
+ tal:attributes="href string:${url}/pdstyles_css" />
+<link rel="stylesheet" type="text/css"
+ tal:attributes="href string:${url}/manual_styles_css" />
+<script type="text/javascript"
+ tal:attributes="src string:${url}/pdlib_js"></script>
+<script type="text/javascript"
+ tal:attributes="src string:${url}/edit_js"></script>
+<script type="text/javascript"
+ tal:attributes="src string:${url}/manual_js"></script>
+<script type="text/javascript" tal:content="structure string:
+var ui_url = '${url}';
+"></script>
+</tal:block>
=== Products/CompositePage/manual/manual.js 1.1 => 1.2 ===
--- /dev/null Thu Feb 26 16:38:43 2004
+++ Products/CompositePage/manual/manual.js Thu Feb 26 16:38:13 2004
@@ -0,0 +1,116 @@
+// Copyright (c) 2004 Zope Corporation and Contributors.
+// All Rights Reserved.
+//
+// This software is subject to the provisions of the Zope Public License,
+// Version 2.0 (ZPL). A copy of the ZPL should accompany this distribution.
+// THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
+// WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+// WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
+// FOR A PARTICULAR PURPOSE.
+
+// Composite editing scripts (based on PDLib)
+
+function setUpSlotTarget(node) {
+ pd_setupDropTarget(node, 0);
+}
+
+pd_node_setup['slot_target'] = setUpSlotTarget;
+
+function setUpSlotElement(node) {
+ pd_setupDragUI(node, composite_move, composite_checkmove);
+}
+
+pd_node_setup['slot_element'] = setUpSlotElement;
+
+
+function getSelectedElements() {
+ var f = document.forms.manual_composite_ui;
+ var p, e, i, res=[];
+ for (i = 0; i < f.elements.length; i++) {
+ e = f.elements[i];
+ if (e.name == "source_paths:list" && e.checked) {
+ res[res.length] = e;
+ }
+ }
+ return res;
+}
+
+function findSourceNode(node) {
+ while (node) {
+ if (node.getAttribute("source_path"))
+ return node;
+ node = node.parentNode;
+ }
+}
+
+function findTargetNode(node) {
+ while (node) {
+ if (node.getAttribute("target_path"))
+ return node;
+ node = node.parentNode;
+ }
+}
+
+function manual_edit(element) {
+ element = findSourceNode(element);
+ var path = escape(element.getAttribute("source_path"));
+ window.top.document.location = ui_url + "/showElement?path=" + path;
+}
+
+function manual_preview(element) {
+ element = findSourceNode(element);
+ var path = escape(element.getAttribute("source_path"));
+ var url = ui_url + "/previewElement?path=" + path;
+ window.open(url, '', 'width=640, height=480, resizable, scrollbars, status');
+}
+
+function manual_move(element) {
+ var s = findSourceNode(element);
+ var t = findTargetNode(element);
+ composite_move([s], t);
+}
+
+function manual_add(target) {
+ // Note that target_index is also available.
+ target = findTargetNode(target);
+ var path = target.getAttribute("target_path");
+ var index = target.getAttribute("target_index");
+ //window.top.document.location = transformer_url + "/showSlot?path=" + path;
+ var url = ui_url + '/add_element_dialog?target_path=' + escape(path);
+ if (index) {
+ url = url + '&target_index=' + escape(index);
+ }
+ window.open(url, '', 'width=640, height=480, resizable, scrollbars, status');
+}
+
+function manual_delete() {
+ var nodes = getSelectedElements();
+ if (!nodes.length) {
+ window.alert("To remove, select elements then click 'Remove'.");
+ return;
+ }
+ composite_delete(nodes);
+}
+
+function manual_copy() {
+ var nodes = getSelectedElements();
+ if (!nodes.length) {
+ window.alert("To copy, select elements then click 'Copy'.");
+ return;
+ }
+ composite_copycut(nodes, false);
+}
+
+function manual_cut() {
+ var nodes = getSelectedElements();
+ if (!nodes.length) {
+ window.alert("To cut, select elements then click 'Cut'.");
+ return;
+ }
+ composite_copycut(nodes, true);
+}
+
+function manual_paste(target) {
+ target = findTargetNode(target);
+ composite_paste(target);
+}
=== Products/CompositePage/manual/manual_styles.css 1.1 => 1.2 ===
--- /dev/null Thu Feb 26 16:38:43 2004
+++ Products/CompositePage/manual/manual_styles.css Thu Feb 26 16:38:13 2004
@@ -0,0 +1,57 @@
+
+.slot_top {
+ background-color: #003366;
+ color: white;
+ font-weight: bold;
+ padding: 2px 0.5em 2px 0.5em;
+}
+
+.slot_element, .slot_empty {
+ background-color: #cccccc;
+}
+
+.slot_element_highlighted {
+ background-color: #b5d5ff;
+}
+
+.slot_element, .slot_element_highlighted, .slot_empty {
+ border-bottom: 1px solid black;
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+
+.slot_element select, .slot_element_highlighted select {
+ margin-left: 1em;
+}
+
+.slot_element input, .slot_element_highlighted input {
+ margin-right: 0.5em;
+}
+
+.slot_element a, .slot_element_highlighted a {
+ font-size: small;
+}
+
+.slot_bottom {
+ background-color: #336699;
+ padding: 2px 0.5em 2px 0.5em;
+ color: white;
+}
+
+.slot_bottom a {
+ color: white;
+}
+
+.slot-element-grip {
+ display: none;
+}
+
+.slot_target, .slot_target_highlighted {
+ height: 4px;
+}
+
+.slot_target_highlighted {
+ background-color: black;
+}
More information about the Zope-CVS
mailing list