diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/page')
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/index.html | 37 | ||||
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.html | 74 | ||||
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.js | 122 |
3 files changed, 172 insertions, 61 deletions
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; } |