summaryrefslogtreecommitdiffstats
path: root/sca-cpp/trunk/modules/edit/htdocs
diff options
context:
space:
mode:
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs')
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html7
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/dash/index.html7
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.html26
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.js76
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/index.html9
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/index.html6
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/menu.html15
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/index.html37
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/page.html74
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/page/page.js122
10 files changed, 266 insertions, 113 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
index 60d869abde..b45c0ffe24 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html
@@ -44,9 +44,9 @@
</table>
<br>
-<table>
-<tr><td>App name:</td><td><input type="text" id="appName" size="50"/></td></td><td>e.g. mycoolapp</td></tr>
-<tr><td>Title:</td><td><input type="text" id="appTitle" size="50"/></td></td><td>e.g. My really cool app</td></tr>
+<table width="100%">
+<tr><td>App name:</td><td><input type="text" id="appName" size="10"/></td></tr>
+<tr><td>Title:</td><td><input type="text" id="appTitle" size="20"/></td></tr>
</table>
<input id="addAppButton" type="button" value="Add"/>
</form>
@@ -105,6 +105,7 @@ function getapps(sync) {
$('addAppLink').onclick = function() {
var div = $('newApp');
div.style.visibility = div.style.visibility == 'hidden'? 'visible' : 'hidden';
+ $('appName').focus();
return false;
};
diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
index d1da06d71c..b9ad29b235 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html
@@ -19,9 +19,10 @@
<html>
<head>
<title>App Dashboard</title>
-<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
-<link rel="stylesheet" type="text/css" href="/ui.css">
-<script type="text/javascript" src="/util.js"></script>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<link rel="stylesheet" type="text/css" href="/ui.css"/>
<script type="text/javascript" src="/ui.js"></script>
</head>
<body>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
index 618d638e7d..a7d185da42 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html
@@ -30,9 +30,13 @@
</head>
<body>
+<div>
+<span style="position: absolute; left: 0px; top: 0px"><h2>Palette</h2></span>
+<span style="position: absolute; left: 350px; top: 0px"><h2>App</h2></span>
+</div>
+
<script type="text/javascript">
var editWidget = sca.component("EditWidget");
-var dashboard = sca.reference(editWidget, "dashboard");
var palettes = sca.reference(editWidget, "palettes");
var apps = sca.reference(editWidget, "apps");
@@ -53,46 +57,46 @@ function atomcomposite(doc) {
}
/**
- * Load and display an app.
+ * Get and display an app.
*/
function getapp(name, g) {
if (isNil(name))
return;
apps.get(name, function(doc) {
- graph.append(graph.composite(atomcomposite(doc), graph.mkpath().move(300,0)), g);
+ appendNodes(graph.composite(atomcomposite(doc), graph.mkpath().move(350,0)), g);
});
}
/**
- * Load and display a palette content.
+ * Get and display a palette of components.
*/
-
function getpalette(name, g, bg, palette, gpalettes) {
if (isNil(name))
return;
palettes.get(name, function(doc) {
gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(150,0));
- graph.append(gpalettes[name], name == spalette? g : bg);
+ appendNodes(gpalettes[name], name == spalette? g : bg);
});
}
/**
- * Install a palette button and content.
+ * Install a palette, including a button to select the palette, and
+ * the palette content.
*/
function installpalette(name, pos, g, bg, palette, gpalettes) {
var b = graph.mkbutton(name, pos);
- graph.append(mklist(b), g);
+ appendNodes(mklist(b), g);
b.onclick = function() {
// Display the selected palette
spalette = name;
for (var pn in gpalettes)
- graph.append(gpalettes[pn], pn == spalette? g : bg);
+ appendNodes(gpalettes[pn], pn == spalette? g : bg);
}
getpalette(name, g, bg, palette, gpalettes);
}
// Create editor graph area
-var g = graph.mkgraph();
+var g = graph.mkgraph(graph.mkpath().move(0,50));
var bg = graph.mkgroup(graph.mkpath());
// Install the palettes.
@@ -104,7 +108,7 @@ installpalette('operators', graph.mkpath().move(0,150), g, bg, spalette, gpalett
installpalette('social', graph.mkpath().move(0,220), g, bg, spalette, gpalettes);
installpalette('sensors', graph.mkpath().move(0,290), g, bg, spalette, gpalettes);
-// Display the current app
+// Get and display the current app
getapp(appname(), g);
</script>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
index 88a2efd50b..1d3b730539 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js
@@ -223,7 +223,6 @@ if (ui.isIE()) {
var tnode = document.createTextNode(t);
title.appendChild(tnode);
return title;
- return title;
};
/**
@@ -373,9 +372,12 @@ if (ui.isIE()) {
/**
* Make a graph.
*/
- graph.mkgraph = function() {
+ graph.mkgraph = function(pos) {
var div = document.createElement('div');
div.id = 'svgdiv';
+ div.style.position = 'absolute';
+ div.style.left = pos.xpos();
+ div.style.top = pos.ypos();
document.body.appendChild(div);
var svg = document.createElementNS(graph.svgns, 'svg');
@@ -410,23 +412,25 @@ if (ui.isIE()) {
return false;
bringtotop(graph.dragging);
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
- graph.dragX = pos.clientX;
- graph.dragY = pos.clientY;
+ graph.dragX = pos.screenX;
+ graph.dragY = pos.screenY;
return false;
};
svg.ontouchstart = svg.onmousedown;
- svg.onmouseup = function(e) {
+ window.onmouseup = function(e) {
if (graph.dragging == null)
return false;
graph.dragging = null;
return false;
};
- svg.ontouchend = svg.onmouseup;
+ window.top.onmouseup = window.onmouseup;
+ window.ontouchend = window.onmouseup;
+ window.top.ontouchend = window.onmouseup;
- svg.onmousemove = function(e) {
+ window.onmousemove = function(e) {
if (graph.dragging == null)
return false;
var pmatrix = graph.dragging.parentNode.getCTM();
@@ -434,10 +438,16 @@ if (ui.isIE()) {
var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e);
var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f);
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
- var newX = curX + (pos.clientX - graph.dragX);
- var newY = curY + (pos.clientY - graph.dragY);
- graph.dragX = pos.clientX;
- graph.dragY = pos.clientY;
+ var newX = curX + (pos.screenX - graph.dragX);
+ var newY = curY + (pos.screenY - graph.dragY);
+ if (newX >= 0)
+ graph.dragX = pos.screenX;
+ else
+ newX = 0;
+ if (newY >= 0)
+ graph.dragY = pos.screenY;
+ else
+ newY = 0;
if (graph.dragging.id.substring(0, 8) == 'palette:') {
// Clone an element dragged from the palette
@@ -449,7 +459,9 @@ if (ui.isIE()) {
return false;
};
- svg.ontouchmove = svg.onmousemove;
+ window.top.onmousemove = window.onmousemove;
+ window.ontouchmove = window.onmousemove;
+ window.top.ontouchmove = window.onmousemove;
graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg');
graph.titlewidthsvg.style.visibility = 'hidden';
@@ -630,7 +642,7 @@ graph.title = function(e) {
graph.tsvcs = function(comp) {
return memo(comp, 'tsvcs', function() {
var svcs = scdl.services(comp);
- var l = filter(function(s) { return scdl.align(s) == 'top'; }, svcs);
+ var l = filter(function(s) { return scdl.align(s) == 'top' && scdl.visible(s) != 'false'; }, svcs);
if (isNil(l))
return mklist();
return mklist(car(l));
@@ -642,7 +654,11 @@ graph.lsvcs = function(comp) {
var svcs = scdl.services(comp);
if (isNil(svcs))
return mklist(mklist("'element","'service","'attribute","'name",scdl.name(comp)));
- var l = filter(function(s) { var a = scdl.align(s); return a == null || a == 'left'; }, svcs);
+ var l = filter(function(s) {
+ var a = scdl.align(s);
+ var v = scdl.visible(s);
+ return (a == null || a == 'left') && v != 'false';
+ }, svcs);
if (isNil(l))
return mklist();
if (!isNil(graph.tsvcs(comp)))
@@ -677,7 +693,7 @@ graph.color = function(comp) {
* Return the height of a reference on the right side of a component.
*/
graph.rrefheight = function(ref, cassoc) {
- return memo(ref, 'height', function() {
+ return memo(ref, 'rheight', function() {
var target = assoc(scdl.target(ref), cassoc);
if (isNil(target))
return 60;
@@ -686,6 +702,18 @@ graph.rrefheight = function(ref, cassoc) {
};
/**
+ * Return the height of a reference on the bottom side of a component.
+ */
+graph.brefheight = function(ref, cassoc) {
+ return memo(ref, 'bheight', function() {
+ var target = assoc(scdl.target(ref), cassoc);
+ if (isNil(target))
+ return 0;
+ return graph.compclosureheight(cadr(target), cassoc);
+ });
+};
+
+/**
* Return the total height of the references on the right side of a component.
*/
graph.rrefsheight = function(refs, cassoc) {
@@ -700,7 +728,7 @@ graph.rrefsheight = function(refs, cassoc) {
graph.brefsheight = function(refs, cassoc) {
if (isNil(refs))
return 0;
- return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc));
+ return Math.max(graph.brefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc));
};
/**
@@ -870,16 +898,6 @@ graph.buttonpath = function(t) {
};
/**
- * Append a list of graphical elements to a parent.
- */
-graph.append = function(nodes, p) {
- if (isNil(nodes))
- return p;
- p.appendChild(car(nodes));
- return graph.append(cdr(nodes), p);
-};
-
-/**
* Render a composite.
*/
graph.composite = function(compos, pos) {
@@ -927,11 +945,11 @@ graph.composite = function(compos, pos) {
var rrefs = graph.rrefs(comp);
var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0);
- graph.append(renderrrefs(rrefs, cassoc, rpos), gcomp);
+ appendNodes(renderrrefs(rrefs, cassoc, rpos), gcomp);
var brefs = graph.brefs(comp);
var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc));
- graph.append(renderbrefs(brefs, cassoc, bpos), gcomp);
+ appendNodes(renderbrefs(brefs, cassoc, bpos), gcomp);
return mklist(gcomp);
}
@@ -951,7 +969,7 @@ graph.composite = function(compos, pos) {
}
function rendermove(comp, cassoc, pos) {
- return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 20);
+ return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 40);
}
if (isNil(svcs))
diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
index 105e240389..c02f7b44d0 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html
@@ -19,7 +19,9 @@
<html>
<head>
<title>App Editor</title>
-<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="stylesheet" type="text/css" href="/ui.css">
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/ui.js"></script>
@@ -32,8 +34,6 @@
<div id="graph"></div>
<script type="text/javascript">
-ui.loadwidget('menu', '/menu.html');
-
/**
* Return the current app name.
*/
@@ -41,6 +41,9 @@ function appname() {
return ui.queryParams()['app'];
}
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html?app=' + appname());
+
/**
* Display the editor for an app.
*/
diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html
index d9791a8b78..a9e149c7b1 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/index.html
@@ -19,8 +19,10 @@
<html>
<head>
<title>App Edit Tools</title>
-<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
-<link rel="stylesheet" type="text/css" href="/ui.css">
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<link rel="stylesheet" type="text/css" href="/ui.css"/>
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/ui.js"></script>
</head>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html
index 7bf2ef931e..50bc2371fb 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/menu.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html
@@ -28,8 +28,21 @@
<script type="text/javascript">
ui.installwidget();
+/**
+ * Return the current app name.
+ */
+function appname() {
+ return ui.queryParams()['app'];
+}
+
+// Display the menu bar
var mdiv = $('menu');
-mdiv.innerHTML = ui.menubar(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')), mklist(ui.menu('Sign out', '/logout')));
+var name = appname();
+mdiv.innerHTML = ui.menubar(
+ append(mklist(ui.menu('Home', '/'), ui.menu('Dashboard', '/dash')),
+ isNil(name)? mklist() : mklist(ui.menu('App', '/graph/?app=' + name), ui.menu('Page', '/page/?app=' + name))),
+ mklist(ui.menu('Sign out', '/logout')));
+
</script>
</body>
</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
index e34aca0bea..839c246122 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html
@@ -19,22 +19,47 @@
<html>
<head>
<title>App Page Editor</title>
-<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1.0"/>
-<link rel="stylesheet" type="text/css" href="/ui.css">
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<link rel="stylesheet" type="text/css" href="/ui.css"/>
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/ui.js"></script>
</head>
<body>
<div id="menu"></div>
-<h1>Editing: HTML Page</h1>
+<h1><span id="title"></span></h1>
+
<div id="page"></div>
<script type="text/javascript">
-ui.loadwidget('menu', '/menu.html');
+/**
+ * Return the current app name.
+ */
+function appname() {
+ return ui.queryParams()['app'];
+}
+
+// Load the menu bar
+ui.loadwidget('menu', '/menu.html?app=' + appname());
+
+/**
+ * Display the page editor for an app.
+ */
+function editapp(name) {
+ if (isNil(name))
+ return;
+ $('title').innerHTML = 'Editing: ' + name;
+ $('page').innerHTML =
+ '<iframe id="pageFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="page.html?' +
+ 'app=' + name +
+ '"></iframe>';
+}
+
+// Display the editor for the current app
+editapp(appname());
-// Display the page widget
-ui.loadwidget('page', 'page.html');
</script>
</body>
</html>
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
index 75405ce163..ca2d51af19 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html
@@ -30,20 +30,78 @@
</head>
<body>
-<div id="page" style="position: absolute; width: 5000px; height: 5000px;">
+<div>
+<span style="position: absolute; left: 0px; top: 0px;"><h2>Palette</h2></span>
+<span style="position: absolute; left: 350px; top: 0px;"><h2>Page</h2></span>
+</div>
+
+<div id="page" style="position: absolute; top: 60px; left: 0px; width: 5000px; height: 5000px;">
-<input id="palette:button" type="button" value="sample button" style="position: absolute; left:20px; top: 20px;"/>
-<input id="palette:entry" type="text" value="sample value" style="position: absolute; left:20px; top: 60px;"/>
-<span id="palette:text" style="position: absolute; left:20px; top: 100px;">sample text</span>
+<span id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1 style="margin: 0px;">Header1</h1></span>
+<span id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2 style="margin: 0px;">Header2</h2></span>
+<span id="palette:button" style="position: absolute; left: 0px; top: 80px;"><input type="button" value="button"/></span>
+<span id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="5"/></span>
+<span id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="5"/></span>
+<span id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"/>checkbox</span>
+<span id="palette:select" style="position: absolute; left: 0px; top: 240px;"><select><option value="list">list</option></select></span>
+<span id="palette:link" style="position: absolute; left: 0px; top: 280px;"><a href="">link</a></span>
+<span id="palette:text" style="position: absolute; left: 0px; top: 320px;"><span>text</span></span>
+<span id="palette:img" style="position: absolute; left: 0px; top: 360px;"><img/></span>
</div>
+<div id="buffer" style="visibility: hidden; width: 0px; height: 0px">
+</div>
+
<script type="text/javascript">
-// Install the widget
-ui.installwidget();
+var editWidget = sca.component("EditWidget");
+var pages = sca.reference(editWidget, "pages");
+
+/**
+ * Return the current app name.
+ */
+function appname() {
+ return ui.queryParams()['app'];
+}
+
+/**
+ * Return the page in an ATOM entry.
+ */
+function atompage(doc) {
+ var entry = atom.readATOMEntryDocument(doc);
+ var item = caddr(entry);
+ return cddr(item);
+}
+
+/**
+ * Get and display an app page.
+ */
+function getpage(name, e) {
+ if (isNil(name))
+ return;
+ pages.get(name, function(doc) {
+ // Convert the page to XML
+ var x = writeStrings(writeXML(atompage(doc), false));
+
+ // Prepare page DOM in hidden buffer
+ var buffer = $('buffer');
+ buffer.innerHTML = x;
+
+ // Append page nodes to editor
+ map(function(e) {
+ e.style.left = ui.posn(e.style.left) + 350;
+ pageedit.appendChild(e);
+ return page.cover(e);
+ }, nodeList(buffer.childNodes[0].childNodes));
+ });
+}
+
+// Initialize the page editor
+var pageedit = $('page');
+page.initpage(pageedit);
-// Enable drag&drop on sample UI elements
-page.initpage($('page'));
+// Get and display the current app page
+getpage(appname(), pageedit);
</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 e4554195c1..25f6399075 100644
--- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js
+++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js
@@ -25,7 +25,7 @@ var page = new Object();
if (ui.isIE()) {
/**
- * Init a page.
+ * Init a page editor.
*/
page.initpage = function(elem) {
page.dragging = null;
@@ -35,14 +35,14 @@ if (ui.isIE()) {
return null;
if (n.id != '')
return n;
+ if (n.covered)
+ return n.covered;
return draggable(n.parentNode);
}
function bringtotop(n) {
- if (n == elem)
- return null;
n.parentNode.appendChild(n);
- return bringtotop(n.parentNode);
+ n.cover.parentNode.appendChild(n.cover);
}
elem.onmousedown = function() {
@@ -68,12 +68,18 @@ if (ui.isIE()) {
elem.onmousemove = function() {
if (page.dragging == null)
return false;
- var origX = page.dragging.coordorigin.X;
- var origY = page.dragging.coordorigin.Y;
- var newX = origX - (window.event.clientX - page.dragX);
- var newY = origY - (window.event.clientY - page.dragY);
- page.dragX = window.event.clientX;
- page.dragY = window.event.clientY;
+ var curX = ui.posn(page.dragging.style.left);
+ var curY = ui.posn(page.dragging.style.top);
+ var newX = curX + (window.event.clientX - page.dragX);
+ var newY = curY + (window.event.clientY - page.dragY);
+ if (newX >= 0)
+ page.dragX = window.event.clientX;
+ else
+ newX = 0;
+ if (newY >= 0)
+ page.dragY = window.event.clientY;
+ else
+ newY = 0;
if (page.dragging.id.substring(0, 8) == 'palette:') {
// Clone the dragged element
@@ -81,16 +87,21 @@ if (ui.isIE()) {
}
page.dragging.style.left = newX;
page.dragging.style.top = newY;
- return false;
+ page.dragging.cover.style.left = newX;
+ page.dragging.cover.style.top = newY;
+
};
+ // Cover child elements with span elements
+ map(page.cover, nodeList(elem.childNodes));
+
return elem;
};
} else {
/**
- * Init a page.
+ * Init a page editor.
*/
page.initpage = function(elem) {
page.dragging = null;
@@ -100,14 +111,14 @@ if (ui.isIE()) {
return null;
if (n.id != '')
return n;
+ if (n.covered)
+ return n.covered;
return draggable(n.parentNode);
}
function bringtotop(n) {
- if (n == elem)
- return null;
n.parentNode.appendChild(n);
- return bringtotop(n.parentNode);
+ n.cover.parentNode.appendChild(n.cover);
}
elem.onmousedown = function(e) {
@@ -120,32 +131,40 @@ if (ui.isIE()) {
return false;
bringtotop(page.dragging);
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
- page.dragX = pos.clientX;
- page.dragY = pos.clientY;
+ page.dragX = pos.screenX;
+ page.dragY = pos.screenY;
return false;
};
elem.ontouchstart = elem.onmousedown;
- elem.onmouseup = function(e) {
+ window.onmouseup = function(e) {
if (page.dragging == null)
return false;
page.dragging = null;
return false;
};
- elem.ontouchend = elem.onmouseup;
+ window.top.onmouseup = window.onmouseup;
+ window.ontouchend = window.onmouseup;
+ window.top.ontouchend = window.onmouseup;
- elem.onmousemove = function(e) {
+ 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);
var pos = typeof e.touches != "undefined" ? e.touches[0] : e;
- var newX = curX + (pos.clientX - page.dragX);
- var newY = curY + (pos.clientY - page.dragY);
- page.dragX = pos.clientX;
- page.dragY = pos.clientY;
+ var newX = curX + (pos.screenX - page.dragX);
+ var newY = curY + (pos.screenY - page.dragY);
+ if (newX >= 0)
+ page.dragX = pos.screenX;
+ else
+ newX = 0;
+ if (newY >= 0)
+ page.dragY = pos.screenY;
+ else
+ newY = 0;
if (page.dragging.id.substring(0, 8) == 'palette:') {
// Clone the dragged element
@@ -153,42 +172,50 @@ if (ui.isIE()) {
}
page.dragging.style.left = newX;
page.dragging.style.top = newY;
+ page.dragging.cover.style.left = newX;
+ page.dragging.cover.style.top = newY;
return false;
};
- elem.ontouchmove = elem.onmousemove;
+ window.top.onmousemove = window.onmousemove;
+ window.ontouchmove = window.onmousemove;
+ window.top.ontouchmove = window.onmousemove;
+
+ // Cover child elements with span elements
+ map(page.cover, nodeList(elem.childNodes));
return elem;
};
}
/**
- * Clone an HTML element.
+ * Cover a page element with a <span> element to prevent mouse events to reach it.
*/
-page.elemcount = 0;
+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.width = e.clientWidth + 10;
+ cover.style.height = e.clientHeight + 10;
+ cover.style.visibility = 'visible';
+ cover.covered = e;
+ e.cover = cover;
+ e.parentNode.appendChild(cover);
+ return e;
+}
+/**
+ * Clone a page element.
+ */
page.clone = function(e) {
function mkclone(e) {
- if (e.nodeName == 'INPUT' && e.type == 'button') {
- var ne = document.createElement('input');
- ne.type = 'button';
- ne.id = 'button' + (++page.elemcount);
- ne.value = ne.id;
- return ne;
- }
- if (e.nodeName == 'INPUT' && e.type == 'text') {
- var ne = document.createElement('input');
- ne.type = 'text';
- ne.id = 'entry' + (++page.elemcount);
- ne.value = ne.id;
- return ne;
- }
- if (e.nodeName == 'SPAN') {
- var ne = document.createElement('span');
- ne.id = 'text' + (++page.elemcount);
- ne.innerHTML = ne.id;
- return ne;
- }
+ var ne = document.createElement('span');
+ ne.id = e.id.substr(8);
+ ne.innerHTML = e.innerHTML;
+ return ne;
}
function posclone(ne, e) {
@@ -196,6 +223,7 @@ page.clone = function(e) {
ne.style.left = ui.posn(e.style.left);
ne.style.top = ui.posn(e.style.top);
e.parentNode.appendChild(ne);
+ page.cover(ne);
return ne;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 04:41:09 +0000