summaryrefslogtreecommitdiffstats
path: root/sca-cpp/trunk/modules/edit/htdocs/page
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/index.html10
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/page.html22
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/page.js165
3 files changed, 127 insertions, 70 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
index 92f286fdc6..5f9d93efed 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
@@ -37,14 +37,12 @@
<script type="text/javascript">
/**
- * Return the current app name.
+ * The current app name.
*/
-function appname() {
- return ui.queryParams()['app'];
-}
+var appname = ui.queryParams()['app'];
// Load the menu bar
-ui.loadwidget('menu', '/menu.html?app=' + appname());
+ui.loadwidget('menu', '/menu.html?app=' + appname);
/**
* Display the page editor for an app.
@@ -60,7 +58,7 @@ function editapp(name) {
}
// Display the editor for the current app
-editapp(appname());
+editapp(appname);
</script>
</body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
index e2cd50088e..202fb7aacc 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
@@ -57,11 +57,9 @@ var editWidget = sca.component("EditWidget");
var pages = sca.reference(editWidget, "pages");
/**
- * Return the current app name.
+ * The current app name.
*/
-function appname() {
- return ui.queryParams()['app'];
-}
+var appname = ui.queryParams()['app'];
/**
* Return the page in an ATOM entry.
@@ -79,6 +77,7 @@ function getpage(name, edit) {
if (isNil(name))
return;
pages.get(name, function(doc) {
+
// Convert the page to XHTML
var xhtml = writeStrings(writeXML(atompage(doc), false));
@@ -88,7 +87,7 @@ function getpage(name, edit) {
// Append page nodes to editor
map(function(e) {
- e.style.left = ui.posn(e.style.left) + 350;
+ e.style.left = ui.csspos(e.style.left) + 350;
edit.appendChild(e);
return page.cover(e);
}, nodeList(buffer.childNodes[0].childNodes));
@@ -99,6 +98,7 @@ function getpage(name, edit) {
* Save the current edited page.
*/
$('saveButton').onclick = function(e) {
+
// Copy page DOM to hidden buffer
var edit = $('page');
var buffer = $('buffer');
@@ -114,8 +114,8 @@ $('saveButton').onclick = function(e) {
div.removeChild(e);
return e;
}
- var x = ui.posn(e.style.left) - 350;
- if (x < 0 || ui.posn(e.style.top) < 0) {
+ var x = ui.csspos(e.style.left) - 350;
+ if (x < 0 || ui.csspos(e.style.top) < 0) {
div.removeChild(e);
return e;
}
@@ -128,11 +128,11 @@ $('saveButton').onclick = function(e) {
var xhtml = writeStrings(writeXML(lxhtml, false));
// Update the page ATOM entry
- var name = appname();
- var entry = '<entry xmlns="http://www.w3.org/2005/Atom"><title type="text">' + name + '</title><id>' + name + '</id><content type="application/xml"><item>' +
+ var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' +
+ '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' +
xhtml + '</item></content></entry>';
- pages.put(name, entry, function(e) {});
+ pages.put(appname, entry, function(e) {});
};
// Initialize the page editor
@@ -140,7 +140,7 @@ var edit = $('page');
page.initpage(edit);
// Get and display the current app page
-getpage(appname(), edit);
+getpage(appname, edit);
</script>
</body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
index 25f6399075..4628ec1235 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
@@ -20,56 +20,66 @@
/**
* Page editing functions.
*/
-var page = new Object();
+var page = {};
if (ui.isIE()) {
/**
- * Init a page editor.
+ * Init a page editor. IE-specific implementation.
*/
page.initpage = function(elem) {
- page.dragging = null;
- function draggable(n) {
- if (n == elem)
- return null;
- if (n.id != '')
- return n;
- if (n.covered)
- return n.covered;
- return draggable(n.parentNode);
- }
-
- function bringtotop(n) {
- n.parentNode.appendChild(n);
- n.cover.parentNode.appendChild(n.cover);
- }
+ // Keep track of the current dragged element
+ page.dragging = null;
+ /**
+ * Handle a mouse down event.
+ */
elem.onmousedown = function() {
window.event.returnValue = false;
- page.dragging = draggable(window.event.srcElement);
+
+ // Find a draggable element
+ page.dragging = page.draggable(window.event.srcElement, elem);
if (page.dragging == null)
return false;
- bringtotop(page.dragging);
+
+ // Bring it to the top
+ page.bringtotop(page.dragging);
+
+ // Save the mouse position
page.dragX = window.event.clientX;
page.dragY = window.event.clientY;
elem.setCapture();
return false;
};
+ /**
+ * Handle a mouse up event.
+ */
elem.onmouseup = function() {
if (page.dragging == null)
return false;
+
+ // Discard element dragged out of page area
+ if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:')
+ page.dragging.parentNode.removeChild(page.dragging);
+
+ // Forget current dragged element
page.dragging = null;
elem.releaseCapture();
return false;
};
+ /**
+ * Handle a mouse move event.
+ */
elem.onmousemove = function() {
if (page.dragging == null)
return false;
- var curX = ui.posn(page.dragging.style.left);
- var curY = ui.posn(page.dragging.style.top);
+
+ // Compute dragged element position
+ var curX = ui.csspos(page.dragging.style.left);
+ var curY = ui.csspos(page.dragging.style.top);
var newX = curX + (window.event.clientX - page.dragX);
var newY = curY + (window.event.clientY - page.dragY);
if (newX >= 0)
@@ -81,10 +91,11 @@ if (ui.isIE()) {
else
newY = 0;
- if (page.dragging.id.substring(0, 8) == 'palette:') {
- // Clone the dragged element
+ // Clone element dragged from palette
+ if (page.dragging.id.substring(0, 8) == 'palette:')
page.dragging = page.clone(page.dragging);
- }
+
+ // Move dragged element
page.dragging.style.left = newX;
page.dragging.style.top = newY;
page.dragging.cover.style.left = newX;
@@ -92,7 +103,8 @@ if (ui.isIE()) {
};
- // Cover child elements with span elements
+ // Cover child elements with span elements to prevent
+ // any input events to reach them
map(page.cover, nodeList(elem.childNodes));
return elem;
@@ -101,59 +113,69 @@ if (ui.isIE()) {
} else {
/**
- * Init a page editor.
+ * Init a page editor. Generic implementation for all other browsers.
*/
page.initpage = function(elem) {
page.dragging = null;
- function draggable(n) {
- if (n == elem)
- return null;
- if (n.id != '')
- return n;
- if (n.covered)
- return n.covered;
- return draggable(n.parentNode);
- }
-
- function bringtotop(n) {
- n.parentNode.appendChild(n);
- n.cover.parentNode.appendChild(n.cover);
- }
-
+ /**
+ * Handle a mouse down event.
+ */
elem.onmousedown = function(e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
- page.dragging = draggable(e.target);
+
+ // Find a draggable element
+ page.dragging = page.draggable(e.target, elem);
if (page.dragging == null)
return false;
- bringtotop(page.dragging);
+
+ // Bring it to the top
+ page.bringtotop(page.dragging);
+
+ // Remember mouse position
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
page.dragX = pos.screenX;
page.dragY = pos.screenY;
return false;
};
+ // Support touch devices
elem.ontouchstart = elem.onmousedown;
+ /**
+ * Handle a mouse up event.
+ */
window.onmouseup = function(e) {
if (page.dragging == null)
return false;
+
+ // Discard element if dragged out of page area
+ if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:')
+ page.dragging.parentNode.removeChild(page.dragging);
+
+ // Forget dragged element
page.dragging = null;
return false;
};
+ // Support touch devices
window.top.onmouseup = window.onmouseup;
window.ontouchend = window.onmouseup;
window.top.ontouchend = window.onmouseup;
+ /**
+ * Handle a mouse move event.
+ */
window.onmousemove = function(e) {
if (page.dragging == null)
return false;
- var curX = ui.posn(page.dragging.style.left);
- var curY = ui.posn(page.dragging.style.top);
+
+ // Compute position of dragged element
+ var curX = ui.csspos(page.dragging.style.left);
+ var curY = ui.csspos(page.dragging.style.top);
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
var newX = curX + (pos.screenX - page.dragX);
var newY = curY + (pos.screenY - page.dragY);
@@ -166,10 +188,12 @@ if (ui.isIE()) {
else
newY = 0;
+ // Clone element dragged from palette
if (page.dragging.id.substring(0, 8) == 'palette:') {
- // Clone the dragged element
page.dragging = page.clone(page.dragging);
}
+
+ // Move the dragged element
page.dragging.style.left = newX;
page.dragging.style.top = newY;
page.dragging.cover.style.left = newX;
@@ -177,11 +201,13 @@ if (ui.isIE()) {
return false;
};
+ // Support touch devices
window.top.onmousemove = window.onmousemove;
window.ontouchmove = window.onmousemove;
window.top.ontouchmove = window.onmousemove;
- // Cover child elements with span elements
+ // Cover child elements with span elements to prevent
+ // any input events to reach them
map(page.cover, nodeList(elem.childNodes));
return elem;
@@ -189,15 +215,37 @@ if (ui.isIE()) {
}
/**
- * Cover a page element with a <span> element to prevent mouse events to reach it.
+ * Find a draggable element in a hierarchy of elements.
+ */
+page.draggable = function(n, e) {
+ if (n == e)
+ return null;
+ if (n.id != '')
+ return n;
+ if (n.covered)
+ return n.covered;
+ return page.draggable(n.parentNode, e);
+}
+
+/**
+ * Bring an element and its parent to the top.
+ */
+page.bringtotop = function(n) {
+ n.parentNode.appendChild(n);
+ n.cover.parentNode.appendChild(n.cover);
+}
+
+/**
+ * Cover a page element with a <span> element to prevent
+ * any input events to reach it.
*/
page.cover = function(e) {
if (e.id == '' || isNil(e.style))
return e;
var cover = document.createElement('span');
cover.style.position = 'absolute';
- cover.style.left = ui.posn(e.style.left) - 5;
- cover.style.top = ui.posn(e.style.top) - 5;
+ cover.style.left = ui.csspos(e.style.left) - 5;
+ cover.style.top = ui.csspos(e.style.top) - 5;
cover.style.width = e.clientWidth + 10;
cover.style.height = e.clientHeight + 10;
cover.style.visibility = 'visible';
@@ -208,20 +256,31 @@ page.cover = function(e) {
}
/**
- * Clone a page element.
+ * Clone a palette element.
*/
page.clone = function(e) {
+
+ /**
+ * Clone an element's HTML.
+ */
function mkclone(e) {
var ne = document.createElement('span');
+
+ // Skip the palette: prefix
ne.id = e.id.substr(8);
+
+ // Copy the HTML content
ne.innerHTML = e.innerHTML;
return ne;
}
+ /**
+ * Clone an element's position.
+ */
function posclone(ne, e) {
ne.style.position = 'absolute';
- ne.style.left = ui.posn(e.style.left);
- ne.style.top = ui.posn(e.style.top);
+ ne.style.left = ui.csspos(e.style.left);
+ ne.style.top = ui.csspos(e.style.top);
e.parentNode.appendChild(ne);
page.cover(ne);
return ne;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-06 16:47:29 +0000