diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/page')
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/index.html | 5 | ||||
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.html | 48 | ||||
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.js | 173 |
3 files changed, 190 insertions, 36 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html index f8bfa273c7..23aeeb9e2a 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -38,6 +38,9 @@ var appname = ui.queryParams()['app']; ui.loadwidget('menu', '/menu.html?app=' + appname); </script> +<h1>App Edit <span id="appNameHeader" style="font-weight: normal;"></span></h1> +<br/> + <div id="page"></div> <script type="text/javascript"> @@ -55,6 +58,8 @@ function editapp(name) { } // Display the editor for the current app +document.title = 'Page - ' + appname; +$('appNameHeader').innerHTML = ' - ' + appname; editapp(appname); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html index d0a26fdad0..f3fdb9def7 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html @@ -30,24 +30,38 @@ </head> <body> -<div style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> -<table width="100%"> -<tr><th style="width: 338px;">Widgets</th><th style="padding-top: 0px; padding-bottom: 0px;"><span id="appname"></span><span style="position: absolute; top: 2px; right: 8px;"><input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/></span></th></tr> +<table style="width: 100%;"> +<tr> +<th class="thl thr" style="width: 330px; min-width: 330px;">Palette</th><th class="ths" style="width: 3px; min-width: 3px;"></th> + +<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px;"> +<input id="widgetName" type="text" value="widget name" style="position: relative; width: 150px;"/> +<input id="widgetText" type="text" value="widget text" style="position: relative; width: 300px;"/> +</th> + +<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> +<span id="source" style="font-weight: normal;">[atom json]</span> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/> +</th> +</tr> + +<tr style="height: 5000px;"><td class="tdl"></td><th class="ths"></th><td class="tdr" colspan="2"></td></tr> </table> -<div id="page" style="position: absolute; top: 60px; left: 0px; width: 5000px; height: 5000px;"> +<div id="page" style="position: absolute; top: 40px; left: 0px; width: 5000px; height: 5000px;"> -<span id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span> -<span id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2>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"></input><span>checkbox</span></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="/"><span>link</span></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> +<span class="h1" id="palette:h1" style="position: absolute; left: 0px; top: 0px;"><h1>Header1</h1></span> +<span class="h2" id="palette:h2" style="position: absolute; left: 0px; top: 40px;"><h2>Header2</h2></span> +<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 80px;"><input type="button" value="button"/></span> +<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="5"/></span> +<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="5"/></span> +<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"></input><span>checkbox</span></span> +<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 240px;"><select><option value="list">list</option></select></span> +<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 280px;"><a href="/"><span>link</span></a></span> +<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 320px;"><span>text</span></span> +<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 360px;"><img src=""/></span> </div> @@ -57,6 +71,8 @@ </div> <script type="text/javascript"> +if (ui.isIE()) $('bodydiv').style.right = -20; + var editWidget = sca.component("EditWidget"); var pages = sca.reference(editWidget, "pages"); @@ -64,7 +80,7 @@ var pages = sca.reference(editWidget, "pages"); * The current app name. */ var appname = ui.queryParams()['app']; -$('appname').innerHTML = 'Page: ' + appname; +$('source').innerHTML = '[<a href="/pages/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.html">json</a>]'; /** * Return the page in an ATOM entry. @@ -142,7 +158,7 @@ $('saveButton').onclick = function(e) { // Initialize the page editor var edit = $('page'); -page.initpage(edit); +page.edit(edit, $('widgetName'), $('widgetText')); // Get and display the current app page getpage(appname, edit); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index 4628ec1235..41273d9824 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -27,10 +27,11 @@ if (ui.isIE()) { /** * Init a page editor. IE-specific implementation. */ - page.initpage = function(elem) { + page.edit = function(elem, wname, wtext) { - // Keep track of the current dragged element + // Track element dragging and selection page.dragging = null; + page.selected = null; /** * Handle a mouse down event. @@ -40,8 +41,20 @@ if (ui.isIE()) { // Find a draggable element page.dragging = page.draggable(window.event.srcElement, elem); - if (page.dragging == null) + page.selected = page.dragging; + if (page.dragging == null) { + + // Reset current selection + wname.value = ''; + wtext.value = ''; return false; + } + + // Clone element dragged from palette + if (page.dragging.id.substring(0, 8) == 'palette:') { + page.dragging = page.clone(page.dragging); + page.selected = page.dragging; + } // Bring it to the top page.bringtotop(page.dragging); @@ -50,6 +63,10 @@ if (ui.isIE()) { page.dragX = window.event.clientX; page.dragY = window.event.clientY; elem.setCapture(); + + // Update the widget name and text fields + wname.value = page.selected.id; + wtext.value = page.text(page.selected); return false; }; @@ -61,8 +78,21 @@ if (ui.isIE()) { 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); + if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') { + if (ui.csspos(page.dragging.style.left) >= 330) { + + // Unless it's close enough to page area, then move it there + page.dragging.style.left = 350; + page.dragging.cover.style.left = 350; + } else { + page.dragging.parentNode.removeChild(page.dragging); + + // Reset current selection + page.selected = null; + wname.value = ''; + wtext.value = ''; + } + } // Forget current dragged element page.dragging = null; @@ -91,16 +121,29 @@ if (ui.isIE()) { else newY = 0; - // 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; page.dragging.cover.style.top = newY; + return false; + }; + + /** + * Handle field on change events. + */ + wname.onchange = wname.onblur = function() { + if (page.selected == null) + return false; + page.selected.id = wname.value; + return false; + }; + wtext.onchange = wtext.onblur = function() { + if (page.selected == null) + return false; + page.settext(page.selected, wtext.value); + return false; }; // Cover child elements with span elements to prevent @@ -115,8 +158,11 @@ if (ui.isIE()) { /** * Init a page editor. Generic implementation for all other browsers. */ - page.initpage = function(elem) { + page.edit = function(elem, wname, wtext) { + + // Track element dragging and selection page.dragging = null; + page.selected = null; /** * Handle a mouse down event. @@ -129,8 +175,20 @@ if (ui.isIE()) { // Find a draggable element page.dragging = page.draggable(e.target, elem); - if (page.dragging == null) + page.selected = page.dragging; + if (page.dragging == null) { + + // Reset current selection + wname.value = ''; + wtext.value = ''; return false; + } + + // Clone element dragged from palette + if (page.dragging.id.substring(0, 8) == 'palette:') { + page.dragging = page.clone(page.dragging); + page.selected = page.dragging; + } // Bring it to the top page.bringtotop(page.dragging); @@ -139,6 +197,10 @@ if (ui.isIE()) { var pos = typeof e.touches != "undefined" ? e.touches[0] : e; page.dragX = pos.screenX; page.dragY = pos.screenY; + + // Update the widget name and text fields + wname.value = page.selected.id; + wtext.value = page.text(page.selected); return false; }; @@ -152,9 +214,22 @@ if (ui.isIE()) { 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); + // Discard element dragged out of page area + if (ui.csspos(page.dragging.style.left) < 350 && page.dragging.id.substring(0, 8) != 'palette:') { + if (ui.csspos(page.dragging.style.left) >= 330) { + + // Unless it's close enough to page area, then move it there + page.dragging.style.left = 350; + page.dragging.cover.style.left = 350; + } else { + page.dragging.parentNode.removeChild(page.dragging); + + // Reset current selection + page.selected = null; + wname.value = ''; + wtext.value = ''; + } + } // Forget dragged element page.dragging = null; @@ -188,11 +263,6 @@ if (ui.isIE()) { else newY = 0; - // Clone element dragged from palette - if (page.dragging.id.substring(0, 8) == 'palette:') { - page.dragging = page.clone(page.dragging); - } - // Move the dragged element page.dragging.style.left = newX; page.dragging.style.top = newY; @@ -206,6 +276,23 @@ if (ui.isIE()) { window.ontouchmove = window.onmousemove; window.top.ontouchmove = window.onmousemove; + /** + * Handle field on change events. + */ + wname.onchange = wname.onblue = function() { + if (page.selected == null) + return false; + page.selected.id = wname.value; + return false; + }; + + wtext.onchange = wtext.onblur = function() { + if (page.selected == null) + return false; + page.settext(page.selected, wtext.value); + return false; + }; + // Cover child elements with span elements to prevent // any input events to reach them map(page.cover, nodeList(elem.childNodes)); @@ -215,6 +302,51 @@ if (ui.isIE()) { } /** + * Return the text of a widget. + */ +page.text = function(e) { + if (e.className == 'h1' || e.className == 'h2' || e.className == 'text') + return e.childNodes[0].innerHTML; + if (e.className == 'button' || e.className == 'entry' || e.className == 'password' || e.className == 'checkbox') + return e.childNodes[0].value; + if (e.className == 'list') + return e.childNodes[0].childNodes[0].value; + if (e.className == 'link') + return e.childNodes[0].childNodes[0].innerHTML; + return ''; +}; + +/** + * Set the text of a widget. + */ +page.settext = function(e, t) { + if (e.className == 'h1' || e.className == 'h2' || e.className == 'text') { + e.childNodes[0].innerHTML = t; + return t; + } + if (e.className == 'button' || e.className == 'entry' || e.className == 'password') { + e.childNodes[0].value = t; + return t; + } + if (e.className == 'checkbox') { + e.childNodes[0].value = t; + map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes)); + return t; + } + if (e.className == 'list') { + e.childNodes[0].childNodes[0].value = t; + e.childNodes[0].childNodes[0].innerHTML = t; + return t; + } + if (e.className == 'link') { + e.childNodes[0].childNodes[0].href = t; + e.childNodes[0].childNodes[0].innerHTML = t; + return t; + } + return ''; +}; + +/** * Find a draggable element in a hierarchy of elements. */ page.draggable = function(n, e) { @@ -269,7 +401,8 @@ page.clone = function(e) { // Skip the palette: prefix ne.id = e.id.substr(8); - // Copy the HTML content + // Copy the class and HTML content + ne.className = e.className; ne.innerHTML = e.innerHTML; return ne; } |