Author: jmorliaguet
Date: Sat Mar 25 12:13:48 2006
New Revision: 2721
Modified:
cpsskins/branches/jmo-perspectives/ui/authoring/authoring.js
cpsskins/branches/jmo-perspectives/ui/authoring/configure.zcml
cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/doc/index.txt
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
cpsskins/branches/jmo-perspectives/ui/screens/editor.pt
cpsskins/branches/jmo-perspectives/ui/screens/layoutdesigner/filters/cell.pt
Log:
- reimplemented the adding of portlets through DnD (still experimental,
but much fewer lines of code, since the logic is now in the toolkit.)
Modified: cpsskins/branches/jmo-perspectives/ui/authoring/authoring.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/authoring/authoring.js
(original)
+++ cpsskins/branches/jmo-perspectives/ui/authoring/authoring.js Sat Mar
25 12:13:48 2006
@@ -1,381 +1,20 @@
-var model = null;
-var moved = null;
-var copied = null;
-var factory = null;
-var current_elem = null;
-var current_container = null;
-var drag_destination = null;
+function insertPortlet(info) {
-var drag_box = null;
-
-function getEngineName() {
- var engine = '';
- var engine_tag = $('engine');
- if (engine_tag) engine = engine_tag.getAttribute('name');
- return engine;
-}
-
-var newwindow = '';
-
-function newWindow(url) {
- if (!newwindow.closed && newwindow.location) {
- newwindow.close();
- }
- newwindow=window.open(url, 'selector', "width=760, height=600, location=no,
menubar=no, status=no, toolbar=no, scrollbars=yes, resizable=yes");
- if (!newwindow.opener) newwindow.opener = self;
- if (window.focus) {newwindow.focus()}
- return false;
-}
-
-/* Box */
-Box = Class.create();
-Box.prototype = {
- initialize: function(node) {
- var node = $(node);
- this.node = node;
- this.bg = node.style.background;
- this.container = node.parentNode;
- this.order = CPSSkins.Identifiable.getOrder(node);
- this.xpos = null;
- this.ypos = null;
- this.can_move = true;
- this.constraint = node.getAttribute("constraint");
- },
- clear: function() {
- var node = this.node;
- while (node.childNodes.length)
- node.removeChild(node.childNodes[0]);
- Element.setStyle(node, {border: '', background: ''});
- },
- fill: function() {
- this.clear();
- Element.setStyle(this.node, {border: '1px solid gray', background:
'#fc6'});
- },
- cloneContent: function(source) {
- this.clear();
- this.node.appendChild(source.cloneNode(true));
- },
- cloneDimensions: function(source) {
- Element.setStyle(this.node, {
- width: '' + source.offsetWidth - 2 + 'px',
- height: '' + source.offsetHeight - 2 + 'px'
- });
- }
-}
-
-/* MODELS */
-Model = Class.create();
-Model.prototype = {
- initialize: function() {
- },
- call: function(url, args, options) {
- var opts = {};
- Object.extend(opts, {parameters: $H(args).toQueryString()});
- Object.extend(opts, options || {});
- new Ajax.Request(url, opts);
- },
- edit: function(args) {
- this.call(url='editElement', args=args);
- },
- duplicate: function(args) {
- this.call(url='duplicateElement', args=args, options={
- onComplete: function(request) {
- if (!current_elem) return;
- var new_id = request.responseText;
- var rendered = render_element(id=new_id);
- var container = current_elem.parentNode;
- container.insertBefore(rendered,
CPSSkins.Identifiable.getNext(current_elem));
- // set up the new nodes
- pd_setupPage();
- }
- });
- },
- copy: function(args) {
- this.call(url='copyElement', args=args);
- },
- paste: function(args) {
- this.call(url='pasteElement', args=args);
- },
- remove: function(args) {
- this.call(url='deleteElement', args=args);
- },
- reorder: function(args) {
- this.call(url='reorderElement', args=args, options={
- parameters: $(parameters).toQueryString(),
- onComplete: function(request) {
- if (!current_elem) return;
- current_elem = null;
- }
- });
- },
- move: function(args) {
- this.call(url='moveElement', args=args, options={
- onComplete: function(request) {
- if (!current_elem) return;
- if (!current_container) return;
- var new_id = resp;
- if (current_container.getAttribute("render")) {
- var rendered = render_element(id=new_id);
- current_elem.parentNode.replaceChild(rendered, current_elem);
- current_elem = rendered;
- }
- current_container = null;
- current_elem = null;
- pd_setupPage();
- }
- });
- },
- add: function(args) {
- this.call(url='addElement', args=args, options={
- onComplete: function(request) {
- var new_id = request.responseText;
- var rendered = render_element(id=new_id);
- if (current_elem) {
- current_container.insertBefore(rendered, current_elem);
- } else {
- current_container.appendChild(rendered);
- }
- current_elem = null;
- pd_setupPage();
- }
- });
- }
-}
-
-/* VIEWS */
-function render_element(id) {
- // XXX the wrapper is not necessarily a div
- var wrapper = document.createElement('div');
- new Ajax.Updater(wrapper, 'renderElement', options={
- parameters: $H({'id':id, 'engine':getEngineName()}).toQueryString()
- });
- return wrapper;
-}
-
-function setCursor(cursor) {
- edit_space.style.cursor = cursor;
-}
-
-function horizontal_speed(e) {
- if (!moved) return;
- var xpos = e.clientX;
- if (!moved.xpos) moved.xpos = xpos;
- var speed = xpos - moved.xpos;
- moved.xpos = xpos;
- return speed;
-}
-
-function vertical_speed(e) {
- if (!moved) return;
- var ypos = e.clientY;
- if (!moved.ypos) moved.ypos = ypos;
- var speed = ypos - moved.ypos;
- moved.ypos = ypos;
- return speed;
-}
-
-
-/* CONTROLLERS */
-
-/* Drag-and-drop, etc */
-function drag_element(el, e) {
- if (!pd_drag_event) return;
- if (!pd_selected_item) return;
-
- var moving = pd_selected_item;
- if (moving == el) return;
-
- if (drag_destination != null) {
- if (el.getAttribute("destination") != drag_destination) return;
- }
-
- if (!Element.hasClassName(moving, 'draggable')) return;
-
- if (!e) e = event;
- var speed = vertical_speed(e);
- if (Math.abs(speed) < 1) return;
- if (speed > 0) {
- var target = CPSSkins.Identifiable.getNext(el);
- } else {
- var target = el;
- }
-
- var container = el.parentNode;
- if (target) {
- container.insertBefore(moving, target);
- } else {
- container.appendChild(moving);
- }
- current_elem = moving;
-}
-
-function save_move(elem) {
- var parent = CPSSkins.Identifiable.getParent(elem);
- var src_id = elem.getAttribute("id");
- var dest_id = parent.getAttribute("id");
- var order = CPSSkins.Identifiable.getOrder(elem);
- current_elem = elem;
- current_container = parent;
- model.move({'src_id': src_id, 'dest_id': dest_id, 'order': order});
-}
-
-function move_to_container(el, e) {
- if (!pd_drag_event) return;
- if (!pd_selected_item) return;
- var moving = pd_selected_item;
- if (moving == el) return;
- if (!Element.hasClassName(moving, 'draggable')) return;
- var target = Event.element(e);
- if (!Element.hasClassName(target, 'container')) return;
- if (!CPSSkins.Identifiable.isEmpty(target)) return;
- target.appendChild(moving);
- current_elem = moving;
-}
-
-function add_element(container, el, type_name) {
- var container_id =
CPSSkins.Identifiable.getIdentifiableElement(container).getAttribute("id");
- if (el) {
- var order = CPSSkins.Identifiable.getOrder(el);
- } else {
- var order = 0;
- }
- current_elem = el;
- current_container = container;
- model.add({'id': container_id, 'type_name': type_name, 'order': order});
-}
-
-function edit_element(target, name, value) {
- // update the view
- var view_id = target.getAttribute("view_id");
- if (view_id) {
- var view = $(view_id);
- if (view) view.setAttribute(name, value);
- }
- // update the model
- var model_id = target.getAttribute("model_id");
- model.edit({'id': model_id, 'name': name, 'value': value});
-}
-
-/* Event handlers */
-function setupDraggable(mo) {
- pd_setupDragUI(mo);
- Event.observe(mo, 'mousedown', function(e) {
- drag_destination = mo.getAttribute("destination");
- var target = Event.element(e);
- if (!target) return;
- if (target.getAttribute("grip") || mo.getAttribute("grip")) {
- moved = new Box(mo);
- drag_box.cloneContent(mo);
- setCursor("default");
- pd_itemOnMousedown(mo, e);
- }
- });
- Event.observe(mo, 'mousemove', function(e) {
- drag_element(mo, e);
- });
- Event.observe(mo, 'mouseover', function(e) {
- if (!moved) return;
- setCursor("pointer");
- drag_box.cloneDimensions(mo);
- });
- Event.observe(mo, 'mouseup', function(e) {
- setCursor("default");
- if (!moved) return;
- if (!current_elem) return;
- if ((moved.order == CPSSkins.Identifiable.getOrder(current_elem))
- && (moved.container == current_elem.parentNode)) return;
- save_move(current_elem);
- moved = null;
- });
- Event.observe(mo, 'mouseout', function(e) {
- setCursor("default");
- });
-}
-
-function setupFactory(mo) {
- Event.observe(mo, 'mousedown', function(e) {
- factory = new Box(mo);
- setCursor("crosshair");
- drag_box.fill();
- pd_itemOnMousedown(mo, e);
- });
- Event.observe(mo, 'mouseup', function(e) {
- setCursor("default");
- });
-}
-
-function setupContainer(mo) {
- Event.observe(mo, 'mouseover', function(e) {
- move_to_container(mo, e);
- pd_stopEvent(e);
- });
- Event.observe(mo, 'mouseup', function(e) {
- if (factory) {
- var type_name = factory.node.getAttribute("type_name");
- if (CPSSkins.Identifiable.isEmpty(mo)) {
- var el = null;
- } else {
- var target = Event.element(e);
- var el = CPSSkins.Identifiable.getIdentifiableElement(target);
- }
- add_element(mo, el, type_name);
+ var url = '@@addElement'
+ var args = {
+ 'id': info.target.getAttribute('targetid'),
+ 'type_name': info.source.getAttribute('type_name'),
+ 'order': 0
+ }
+ var options = {
+ 'parameters': $H(args).toQueryString(),
+ 'onComplete': function(req) {
+ CPSSkins.getViewById('layout-designer').refresh();
}
- factory = null;
- });
-}
-
-function setupEditable(mo) {
- Event.observe(mo, 'mousedown', function(e) {
- var target = Event.element(e);
- if (Element.hasClassName(target, 'editable')) return;
- });
- Event.observe(mo, 'change', function(e) {
- var target = Event.element(e);
- edit_element(target, target.name, target.value);
- pd_stopEvent(e);
- });
-}
-
-/* Setup editor, JSON-RPC */
-function setupEditor() {
- edit_space = $("editSpace");
- drag_box = new Box('drag-feedback-box');
-
- model = new Model();
-
- new CPSSkins.Controller('menuactions').register({
- 'edit': function(selected, choice) {
- var id = selected.getAttribute('id');
- var new_url = '@@edit-panel.html?id=' + id;
- newWindow(new_url);
- },
- 'duplicate': function(selected, choice) {
- var id = selected.getAttribute('id');
- current_elem = selected;
- model.duplicate({'id': id});
- },
- 'copy': function(selected, choice) {
- var id = selected.getAttribute('id');
- model.copy({'id': id});
- },
- 'paste': function(selected, choice) {
- var id = selected.getAttribute('id');
- model.paste({'id': id});
- },
- 'format': function(selected, choice) {
- var id = selected.getAttribute('id');
- var new_url = '@@edit-panel.html?id=' + id + '&format=' + choice;
- newWindow(new_url);
- },
- 'remove': function(selected, choice) {
- var id = selected.getAttribute('id');
- model.remove({'id': id});
- var container = selected.parentNode;
- container.removeChild(selected);
- }
- });
+ };
+ new Ajax.Request(url, options);
}
-Event.observe(window, "load", setupEditor);
+CPSSkins.addActions({'insert_portlet': insertPortlet});
Modified: cpsskins/branches/jmo-perspectives/ui/authoring/configure.zcml
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/authoring/configure.zcml
(original)
+++ cpsskins/branches/jmo-perspectives/ui/authoring/configure.zcml Sat Mar
25 12:13:48 2006
@@ -16,7 +16,7 @@
layer="cpsskins.browser.skin.cpsskins" />
<browser:pages
- for="cpsskins.elements.interfaces.IElement"
+ for="*"
layer="cpsskins.browser.skin.cpsskins"
permission="zope.ManageContent"
class=".views.Authoring">
Modified: cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py
(original)
+++ cpsskins/branches/jmo-perspectives/ui/authoring/definitions.py Sat Mar
25 12:13:48 2006
@@ -387,6 +387,8 @@
'type': 'drag-and-drop',
'dragging': {
'sources': ['.toolbox .factory'],
+ 'offset_x': -5,
+ 'offset_y': -5,
'feedback': {
'opacity': 0.8,
},
@@ -395,16 +397,17 @@
}
},
'dropping': {
- 'targets': ['.container'],
+ 'targets': ['.portletTarget'],
'highlight': {
'duration': 800,
- }
+ },
+ 'action': 'insert_portlet',
},
},
'menu-actions': {
'id': 'menu-actions',
'type': 'command',
- 'handlers': {
+ 'actions': {
'edit': 'displayChoice',
}
},
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Sat Mar 25
12:13:48 2006
@@ -45,7 +45,7 @@
_models: $H({}),
_views: $H({}),
_controllers: $H({}),
- _handlers: $H({}),
+ _action_handlers: $H({}),
_initialized: $H({}),
_defs: $H({}),
@@ -110,8 +110,12 @@
},
/* Action handlers */
- addActions: function(handlers) {
- Object.extend(this._handlers, handlers);
+ addActions: function(actions) {
+ Object.extend(this._action_handlers, actions);
+ },
+
+ getAction: function(action_id) {
+ return this._action_handlers[action_id];
},
/* Event system */
@@ -505,10 +509,10 @@
var action = event.options.action;
// TODO: to refactor
/* the event handler calls the controller's registered handler */
- var handler_id = controller.def.handlers[action];
- if (handler_id) {
- var handler = CPSSkins._handlers[handler_id];
- if (handler) handler(event);
+ var action_id = controller.def.actions[action];
+ if (action_id) {
+ var action_handler = CPSSkins.getAction(action_id);
+ if (action_handler) action_handler(event);
}
});
@@ -536,8 +540,8 @@
if (selector) {
$H(r.value).each(function(s) {
var event_name = s.key;
- var handler_name = s.value;
- var handler = CPSSkins._handlers[handler_name];
+ var action_id = s.value;
+ var handler = CPSSkins.getAction(action_id);
selector.each(function(el) {
Event.observe(el, event_name, handler.bindAsEventListener(info));
});
@@ -768,9 +772,13 @@
var y = Event.pointerY(e);
this.x0 = pos[0];
this.y0 = pos[1];
- if (this.def.dragging.shift || this.def.dragging.container) {
- this.x1 = -5;
- this.y1 = -5;
+
+ var dragging = this.def.dragging;
+
+ if (dragging.shift || dragging.container ||
+ dragging.offset_x || dragging.offset_y ) {
+ this.x1 = dragging.offset_x || -5;
+ this.y1 = dragging.offset_y || -5;
} else {
this.x1 = x - this.x0;
this.y1 = y - this.y0;
@@ -869,14 +877,22 @@
var inTarget = false;
this._dropzones.each(function(d) {
- if (Position.within(d, x, y)) { inTarget = true; }
- });
+ if (Position.within(d, x, y)) {
+ inTarget = true;
+ this.target = d;
+ };
+ }.bind(this));
var zoomback = this.def.dragging.zoomback;
if (inTarget) {
zoomback = false;
- /* TODO: handle action */
- alert('Not Implemented');
+ var action_id = this.def.dropping.action;
+ if (action_id) {
+ var action_handler = CPSSkins.getAction(action_id);
+ if (action_handler) action_handler(
+ {'source': this.dragged, 'target': this.target}
+ );
+ }
}
if (this.def.dragging.feedback) {
@@ -2211,12 +2227,10 @@
this.selected = selected;
this.show();
- Event.stop(e);
},
hideEvent: function(e) {
this.hide();
- Event.stop(e);
},
callEvent: function(e) {
@@ -2231,13 +2245,13 @@
if (!window.confirm(confirm)) return;
}
/* notify the controller to take action */
- var event = {
+ var info = {
"context": this.selected,
"publisher": this,
"subscriber": this.controller,
"options": {'action': action, 'choice': choice}
}
- CPSSkins.notify("command", event);
+ CPSSkins.notify("command", info);
Event.stop(e);
},
@@ -2254,7 +2268,6 @@
);
$(menu).show();
}
- Event.stop(e);
}
});
@@ -2320,11 +2333,9 @@
hideEvent: function(e) {
this.hide();
- Event.stop(e);
},
mouseOverEvent: function(e) {
- Event.stop(e);
}
});
Modified: cpsskins/branches/jmo-perspectives/ui/framework/doc/index.txt
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/doc/index.txt
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/doc/index.txt Sat Mar
25 12:13:48 2006
@@ -322,8 +322,9 @@
- action handlers
- - addActions(handlers)
+ - addActions(actions)
+ - getAction(action_id)
- events
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
Sat Mar 25 12:13:48 2006
@@ -23,7 +23,7 @@
<ins class="controller">
{"id": "do-action",
"type": "command",
- "handlers": {
+ "actions": {
"edit": "displayChoice",
"copy": "displayChoice",
"paste": "displayChoice",
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
Sat Mar 25 12:13:48 2006
@@ -25,7 +25,7 @@
<ins class="controller">
{"id": "do-action",
"type": "command",
- "handlers": {
+ "actions": {
"edit": "displayChoice",
"copy": "displayChoice",
"paste": "displayChoice",
Modified: cpsskins/branches/jmo-perspectives/ui/screens/editor.pt
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/screens/editor.pt (original)
+++ cpsskins/branches/jmo-perspectives/ui/screens/editor.pt Sat Mar 25
12:13:48 2006
@@ -17,6 +17,8 @@
src="/++skin++cpsskins/@@/++resource++ctal.js"></script>
<script type="text/javascript"
src="/++skin++cpsskins/@@/++resource++cpsskins.js"></script>
+ <script type="text/javascript"
+ src="/++skin++cpsskins/@@/++resource++authoring.js"></script>
</head>
<body>
<div class="floatingHeader">
Modified:
cpsskins/branches/jmo-perspectives/ui/screens/layoutdesigner/filters/cell.pt
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/screens/layoutdesigner/filters/cell.pt
(original)
+++
cpsskins/branches/jmo-perspectives/ui/screens/layoutdesigner/filters/cell.pt
Sat Mar 25 12:13:48 2006
@@ -34,7 +34,8 @@
view_id id" />
</form>
- <div class="container" focus="1" destination="cellcontained"
+ <div class="container portletTarget" focus="1" destination="cellcontained"
+ tal:attributes="targetid id"
tal:content="structure options/markup" />
</td>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
