Author: jmorliaguet
Date: Mon Dec 19 19:28:54 2005
New Revision: 2055
Modified:
cpsskins/branches/jmo-perspectives/ui/authoring/authoring.js
Log:
- simplifications, added a Box class
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 Mon Dec
19 19:28:54 2005
@@ -9,9 +9,7 @@
var context_menu = null;
var drag_box = null;
-var selection_box = null;
var tooltip_box = null;
-
var tooltip_active = false;
var menu_actions = null;
@@ -23,15 +21,39 @@
return engine;
}
-function Box(node) {
- this.node = node;
- this.bg = node.style.background;
- this.container = node.parentNode;
- this.order = getElementOrder(node);
- this.xpos = null;
- this.ypos = null;
- this.can_move = true;
- this.constraint = node.getAttribute("constraint");
+/* Box */
+Box = Class.create();
+Box.prototype = {
+ initialize: function(node) {
+ this.node = node;
+ this.bg = node.style.background;
+ this.container = node.parentNode;
+ this.order = getElementOrder(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',
+ });
+ },
}
/* Actions */
@@ -94,8 +116,6 @@
var rendered = render_element(id=new_id);
var container = current_elem.parentNode;
container.insertBefore(rendered, getNextElement(current_elem));
-
- highlight(rendered);
// set up the new nodes
pd_setupPage();
}
@@ -115,7 +135,6 @@
parameters: $(parameters).toQueryString(),
onComplete: function(request) {
if (!current_elem) return;
- highlight(current_elem);
current_elem = null;
}
});
@@ -131,7 +150,6 @@
current_elem.parentNode.replaceChild(rendered, current_elem);
current_elem = rendered;
}
- highlight(current_elem);
current_container = null;
current_elem = null;
pd_setupPage();
@@ -150,7 +168,6 @@
}
current_elem = null;
pd_setupPage();
- highlight(rendered);
},
});
},
@@ -158,7 +175,7 @@
/* VIEWS */
function render_element(id) {
- // XXX the wrapper is not mecessarily a div
+ // 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(),
@@ -166,55 +183,6 @@
return wrapper;
}
-function set_dragbox_dimensions(el) {
- drag_box.style.width = '' + (el.offsetWidth - 2) + 'px';
- drag_box.style.height = '' + (el.offsetHeight - 2) + 'px';
-}
-
-function set_dragbox_content(source) {
- var el = source.cloneNode(true);
- clear_dragbox();
- drag_box.appendChild(el);
-}
-
-function clear_dragbox() {
- while (drag_box.childNodes.length)
- drag_box.removeChild(drag_box.childNodes[0]);
- drag_box.style.border = '';
- drag_box.style.background = '';
-}
-
-function highlight(node, duration) {
- node.style.position = "relative";
- selection_box.style.top = '' + (node.offsetTop) + 'px';
- selection_box.style.left = '' + (node.offsetLeft) + 'px';
- selection_box.style.width = '' + (node.offsetWidth -2) + 'px';
- selection_box.style.height = '' + (node.offsetHeight -2) + 'px';
- node.style.position = "static";
- selection_box.style.visibility = "visible";
- selection_box.style.display = "block";
- if (!duration) duration = '250';
- setTimeout(dehighlight, duration);
-}
-
-function dehighlight() {
- selection_box.style.visibility = "hidden";
- selection_box.style.display = "none";
-}
-
-function focus(node) {
- if (!node.getAttribute("focus")) return;
- if (node.innerHTML) return;
- setCursor("default");
- node.bg = node.style.background;
- node.style.backgroundColor = '#ff3';
-}
-
-function defocus(node) {
- if (!node.getAttribute("focus")) return;
- node.style.background = node.bg;
-}
-
function setCursor(cursor) {
edit_space.style.cursor = cursor;
}
@@ -345,7 +313,7 @@
if (!target) return;
if (target.getAttribute("grip") || mo.getAttribute("grip")) {
moved = new Box(mo);
- set_dragbox_content(mo);
+ drag_box.cloneContent(mo);
setCursor("default");
pd_itemOnMousedown(mo, e);
}
@@ -356,7 +324,7 @@
Event.observe(mo, 'mouseover', function(e) {
if (!moved) return;
setCursor("pointer");
- set_dragbox_dimensions(mo);
+ drag_box.cloneDimensions(mo);
});
Event.observe(mo, 'mouseup', function(e) {
setCursor("default");
@@ -376,9 +344,7 @@
Event.observe(mo, 'mousedown', function(e) {
factory = new Box(mo);
setCursor("crosshair");
- clear_dragbox();
- drag_box.style.border = "1px solid gray";
- drag_box.style.background = "#fc6";
+ drag_box.fill();
pd_itemOnMousedown(mo, e);
});
Event.observe(mo, 'mouseup', function(e) {
@@ -390,10 +356,6 @@
Event.observe(mo, 'mouseover', function(e) {
move_to_container(mo, e);
pd_stopEvent(e);
- focus(mo);
- });
- Event.observe(mo, 'mouseout', function() {
- defocus(mo);
});
Event.observe(mo, 'mouseup', function(e) {
if (factory) {
@@ -407,7 +369,6 @@
add_element(mo, el, type_name);
}
factory = null;
- defocus(mo);
});
}
@@ -417,7 +378,6 @@
if (Element.hasClassName(target, 'editable') || !moved) {
return pd_stopEvent(e);
} else {
- highlight(mo);
return pd_itemOnContextMenu(mo, e, "choice-context-menu");
}
}
@@ -469,10 +429,9 @@
/* Setup editor, JSON-RPC */
function setupEditor() {
- drag_box = $("drag-feedback-box");
edit_space = $("editSpace");
+ drag_box = new Box($("drag-feedback-box"));
context_menu = $("choice-context-menu");
- selection_box = $("selection-box");
tooltip_box = $("tooltip-box");
Element.hide('tooltip-box')
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
