diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/page')
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/index.html | 103 | ||||
| -rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.js | 166 |
2 files changed, 192 insertions, 77 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html index 0102f4edac..ca2619e07b 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -17,7 +17,7 @@ * specific language governing permissions and limitations * under the License. --> -<html> +<html manifest="/cache-manifest.cmf"> <head> <title>Page</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> @@ -29,40 +29,54 @@ <script type="text/javascript" src="/menu.js"></script> <script type="text/javascript" src="page.js"></script> </head> -<body class="delayed" onload="ui.onload();"> -<div id="bodydiv" class="devicewidth"> +<body class="delayed" onload="ui.onload();" onbeforeunload="ui.onbeforeunload();"> +<div id="bodydiv" class="bodydiv" style="overflow: visible;"> <div id="headdiv" class="hsection"> <script type="text/javascript" src="/headconfig.js"></script> </div> +<div id="menubackground" style="position: absolute; top: 0px; left: 0px; z-index: -1; width: 2500px;"> +<table cellpadding="0" cellspacing="0" width="100%" class="tbar"><tr><td class="dtbar"> +<table border="0" cellspacing="0" cellpadding="0"><tr><td class="ltbar"><span class="tbarsmenu"> </span></td></tr></table> +</td></tr></table> +</div> + <div id="menu"></div> <table style="width: 100%;"> <tr> -<td><h2><span id="h1"></span><span id="appNameHeader"></span></h2></td> -<td style="vertical-align: middle; text-align: right; padding-right: 2px;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td> +<td><h2><span id="appNameHeader"></span></h2></td> +<td style="vertical-align: middle; text-align: right; padding-right: 8px;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td> </tr> </table> -<table style="width: 100%;"> +<table id="widgetValueBackground" style="width: 2500px; position: absolute; top: 59px; left: 0px; z-index: -1;"> +<tr> +<th class="thr thl"><span style="display: inline-block; padding-top: 0px; padding-bottom: 0px; height: 24px;"></span></th> +</tr> +</table> + +<table id="widgetValueTable" style="width: 100%;"> <tr> -<th class="thr thl" style="padding-left: 2px; padding-right: 2px; width: 100%;"> +<td class="thr thl" style="padding-left: 2px; padding-right: 2px; vertical-align: top; width: 100%;"> <input id="widgetValue" type="text" value="" title="Widget value" autocapitalize="off" placeholder="Value" style="position: relative; width: 100%;"/> -</th> +</td> + +<td class="thl thr" style="text-align: right; padding-right: 2px; vertical-align: top;"> +<span id="deleteWidgetButton" title="Delete a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">-</span> -<th class="thl thr" style="text-align: right; padding-right: 2px;"> -<span id="deleteWidgetButton" title="Delete a Widget" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span> +<span id="copyWidgetButton" title="Copy a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; text-align: center; margin-left: 0px; margin-right: 0px;">c</span> -<span id="addWidgetButton" title="Add a Widget" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span> +<span id="addWidgetButton" title="Add a Widget" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span> -<span id="playPageButton" title="View page" class="bluebutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">></span> -</th> +<span id="playPageButton" title="View page" class="graybutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; middle; text-align: center; margin-left: 0px; margin-right: 0px;">></span> +</td> </tr> </table> -<div id="contentdiv" style="margin-top: 4px; width: 100%;"> -<div id="editdiv" style="visibility: visible; position: relative; top: 0px; left: -2500px; right: 0px; height: 5000px;"> +<div id="contentdiv" style="margin-top: 4px; width: 2500px"> +<div id="editdiv" style="visibility: visible; position: relative; top: 0px; left: -2500px; width: 2500px; height: 5000px;"> <div style="position: relative; left: 2500px; top: 0px; right: 0px; height: 5000px; border:1px; border-style: solid; border-color: #a2bae7; background: url(/public/grid72.png);"></div> <div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 320px; height: 460px;"></div> @@ -90,15 +104,18 @@ <span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img src="/public/img.png"/></span> </div> -<div id="playdiv" style="visibility: hidden; position: absolute; top: 0px; left: 0px; right: 0px; height: 5000px;"> +<div id="playdiv" style="visibility: hidden; position: absolute; top: 0px; left: 0px; width: 2500px; height: 5000px;"> </div> + </div> <div id="buffer" style="visibility: hidden; width: 0px; height: 0px"></div> <script type="text/javascript"> +ui.initbody(); + // Get the app name -var appname = ui.queryParams()['app']; +var appname = ui.fragmentParams()['app']; if (isNil(appname)) window.open('/', '_self'); @@ -117,8 +134,7 @@ function applink(appname) { // Set page titles document.title = windowtitle(window.location.hostname) + ' - Page - ' + appname; -//$('h1').innerHTML = hometitle(window.location.hostname); -$('appNameHeader').innerHTML = '<a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '.' + window.location.hostname + '</a>'; +$('appNameHeader').innerHTML = '<a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>'; // Load the menu bar displaymenu(); @@ -133,6 +149,7 @@ var pdiv = $('playdiv'); var wvalue = $('widgetValue'); var wadd = $('addWidgetButton'); var wdelete = $('deleteWidgetButton'); +var wcopy = $('copyWidgetButton'); var pplay = $('playPageButton'); // Position edit and play divs inside the content div @@ -141,8 +158,17 @@ ediv.style.top = cdiv.offsetTop + 'px'; pdiv.style.position = 'absolute'; pdiv.style.top = cdiv.offsetTop + 'px'; +// Position background divs +var mbackground = $('menubackground'); +var menudiv = $('menu'); +mbackground.style.top = ui.pixpos(menudiv.offsetTop); + +var wvbackground = $('widgetValueBackground'); +var wvtable = $('widgetValueTable'); +wvbackground.style.top = ui.pixpos(wvtable.offsetTop); + /** - * Adjust fields sizes. + * Adjust widget value field size. */ function resizeFields() { wvalue.style.width = '0px'; @@ -188,6 +214,10 @@ function getpage(name, ediv) { return false; return pages.get(name, function(doc) { + // Stop now if we didn't get a page + if (doc == null) + return false; + // Convert the page to XHTML and place it in a hidden buffer var buffer = $('buffer'); var el = atompage(doc); @@ -198,7 +228,21 @@ function getpage(name, ediv) { else buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); - // Append page nodes to editor + // Remove any existing page nodes from the editor div + var fnodes = filter(function(e) { + if (isNil(e.id) || e.id == '' || e.id.substr(0, 8) == 'palette:') + return false; + var x = ui.numpos(e.style.left) - 2500; + if (x < 0 || ui.numpos(e.style.top) < 0) + return false; + return true; + }, nodeList(ediv.childNodes)); + + map(function(e) { + ediv.removeChild(e); + }, fnodes); + + // Append new page nodes to editor map(function(e) { ediv.appendChild(e); if (!isNil(e.style)) @@ -295,8 +339,11 @@ function save(newxml) { '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' + newxml + '</content></entry>'; - pages.put(appname, entry, function(r) { + pages.put(appname, entry, function(e) { + if (e) + return false; $('saveStatus').innerHTML = 'Saved'; + return false; }); return true; }; @@ -336,7 +383,7 @@ function compvaluelink(appname, cname) { var port = ':' + window.location.port; if (port == ':80' || port == ':443' || port == ':') port = ''; - var link = protocol + '//' + appname + '.' + host + port + '/data/?component=' + cname; + var link = protocol + '//' + appname + '.' + host + port + '/data/#component=' + cname; return link; } @@ -354,6 +401,7 @@ function onwidgetselect(w) { } updateButton(wdelete, link != ''); + updateButton(wcopy, link != ''); return true; } @@ -363,14 +411,15 @@ function onwidgetselect(w) { function playpage() { if (!evisible) return true; - page.widgetselect(widget, false, wvalue, wdelete); + page.widgetselect(widget, false, wvalue, wcopy, wdelete); page.selected = null; wvalue.value = applink(appname); pplay.innerHTML = '<'; ediv.style.visibility = 'hidden' evisible = false; pdiv.style.visibility = 'visible'; - pdiv.innerHTML = '<iframe id="playappframe" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="' + + pdiv.innerHTML = ''; + pdiv.innerHTML = '<iframe id="playappframe" style="position: relative; height: 5000px; width: 2500px; border: 0px;" scrolling="no" frameborder="0" src="' + applink(appname) + '"></iframe>'; return true; } @@ -386,7 +435,7 @@ function showedit() { pdiv.innerHTML = ''; ediv.style.visibility = 'visible' evisible = true; - page.widgetselect(widget, true, wvalue, wdelete); + page.widgetselect(widget, true, wvalue, wcopy, wdelete); page.selected = widget; return true; } @@ -401,7 +450,7 @@ pplay.onclick = function() { } // Initialize the page editor -page.edit(ediv, wvalue, wadd, wdelete, onpagechange, onwidgetselect); +page.edit(ediv, wvalue, wadd, wcopy, wdelete, onpagechange, onwidgetselect); // Get and display the current app page getpage(appname, ediv); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index d316cb72dd..2fd88c0c6b 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -30,12 +30,13 @@ var palcx = 2500; /** * Init a page editor. Works with all browsers except IE. */ -page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { +page.edit = function(elem, wvalue, wadd, wcopy, wdelete, onchange, onselect) { // Track element dragging and selection page.dragging = null; page.selected = null; wvalue.disabled = true; + wcopy.disabled = true; wdelete.disabled = true; // Trigger widget select and page change events @@ -59,7 +60,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { page.dragging = dragging; // Remember mouse position - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var pos = typeof e.touches != "undefined"? e.touches[0] : e; page.dragX = pos.screenX; page.dragY = pos.screenY; @@ -110,7 +111,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { return true; // Get the mouse position - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var pos = typeof e.touches != "undefined"? e.touches[0] : e; if (pos.screenX == page.dragX && pos.screenY == page.dragY) return true; @@ -150,7 +151,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { if (page.selected != null) { // Reset current selection - page.widgetselect(page.selected, false, wvalue, wdelete); + page.widgetselect(page.selected, false, wvalue, wcopy, wdelete); page.selected = null; // Trigger widget select event @@ -165,7 +166,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { } // Deselect the previously selected element - page.widgetselect(page.selected, false, wvalue, wdelete); + page.widgetselect(page.selected, false, wvalue, wcopy, wdelete); // Clone element dragged from palette if (selected.id.substring(0, 8) == 'palette:') { @@ -190,7 +191,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { } // Select the element - page.widgetselect(page.selected, true, wvalue, wdelete); + page.widgetselect(page.selected, true, wvalue, wcopy, wdelete); // Trigger widget select event page.onwidgetselect(page.selected); @@ -227,7 +228,7 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { return false; // Reset current selection - page.widgetselect(page.selected, false, wvalue, wdelete); + page.widgetselect(page.selected, false, wvalue, wcopy, wdelete); // Remove selected widget page.selected.parentNode.removeChild(page.selected); @@ -242,6 +243,39 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { return false; }; + // Handle copy event. + wcopy.onclick = function() { + if (page.selected == null) + return false; + if (page.selected.id.substring(0, 8) == 'palette:') + return false; + + // Reset current selection + page.widgetselect(page.selected, false, wvalue, wcopy, wdelete); + + // Clone selected widget + page.selected = page.clone(page.selected); + + // Move 10 pixels down right + page.selected.style.left = ui.pixpos(ui.numpos(page.selected.style.left) + 10); + page.selected.style.top = ui.pixpos(ui.numpos(page.selected.style.top) + 10); + page.selected.cover.style.left = ui.pixpos(ui.numpos(page.selected.cover.style.left) + 10); + page.selected.cover.style.top = ui.pixpos(ui.numpos(page.selected.cover.style.top) + 10); + + // Bring it to the top + page.bringtotop(page.selected); + + // Select the element + page.widgetselect(page.selected, true, wvalue, wcopy, wdelete); + + // Trigger widget select event + page.onwidgetselect(page.selected); + + // Trigger page change event + page.onpagechange(true); + return false; + }; + // Cover child elements with span elements to prevent // any input events to reach them map(page.cover, nodeList(elem.childNodes)); @@ -253,35 +287,54 @@ page.edit = function(elem, wvalue, wadd, wdelete, onchange, onselect) { * Return the text of a widget. */ page.text = function(e) { - var formula = e.id; - if (formula.substring(0, 5) != 'page:') { - return '=' + formula; + function formula(e) { + var f = e.id; + if (f.substring(0, 5) != 'page:') + return '=' + f; + return ''; } - if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') - return car(childElements(e)).innerHTML; - if (e.className == 'button' || e.className == 'checkbox') - return car(childElements(e)).value; - if (e.className == 'entry' || e.className == 'password') - return car(childElements(e)).defaultValue; - if (e.className == 'select') - return car(childElements(car(childElements(e)))).value; - if (e.className == 'link') { - var hr = car(childElements(e)).href; - var t = car(childElements(car(childElements(e)))).innerHTML; - return hr == t? hr : hr + ',' + t; - } - if (e.className == 'img') { - var src = car(childElements(e)).src; - return src == window.location.href? '' : src; - } - if (e.className == 'iframe') - return car(childElements(e)).href; - if (e.className == 'list') - return ''; - if (e.className == 'table') + function constant(e, f) { + if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') { + var t = car(childElements(e)).innerHTML; + return t == f? '' : t; + } + if (e.className == 'button' || e.className == 'checkbox') { + var t = car(childElements(e)).value; + return t == f? '' : t; + } + if (e.className == 'entry' || e.className == 'password') { + var t = car(childElements(e)).defaultValue; + return t == f? '' : t; + } + if (e.className == 'select') { + var t = car(childElements(car(childElements(e)))).value; + return t == f? '' : t; + } + if (e.className == 'link') { + var lhr = car(childElements(e)).href; + var hr = lhr.substring(0, 5) == 'link:'? lhr.substring(5) : ''; + var t = car(childElements(car(childElements(e)))).innerHTML; + return t == f? hr : (t == hr? hr : (t == ''? hr : hr + ',' + t)); + } + if (e.className == 'img') { + var src = car(childElements(e)).src; + return src == window.location.href? '' : src; + } + if (e.className == 'iframe') { + var hr = car(childElements(e)).href; + return hr == window.location.href? '' : hr; + } + if (e.className == 'list') + return ''; + if (e.className == 'table') + return ''; return ''; - return ''; + } + + var f = formula(e); + var c = constant(e, f); + return f == ''? c : (c == ''? f : f + ',' + c); }; /** @@ -313,49 +366,60 @@ page.hastext = function(e) { * Set the text of a widget. */ page.settext = function(e, t) { - var formula = t.length > 1 && t.substring(0, 1) == '='; - e.id = formula? t.substring(1) : 'page:' + e.className; + function formula(t) { + if (t.length > 1 && t.substring(0, 1) == '=') + return car(t.split(',')); + return ''; + } + + function constant(t) { + return t.length > 1 && t.substring(0, 1) == '='? cdr(t.split(',')) : t.split(','); + } + + var f = formula(t); + var c = constant(t); + + e.id = f != ''? f.substring(1) : ('page:' + e.className); if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') { - car(childElements(e)).innerHTML = t; + car(childElements(e)).innerHTML = isNil(c)? f : car(c); return t; } if (e.className == 'button' || e.className == 'entry' || e.className == 'password') { - car(childElements(e)).defaultValue = t; + car(childElements(e)).defaultValue = isNil(c)? f : car(c); return t; } if (e.className == 'checkbox') { - car(childElements(e)).value = t; - map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes)); + car(childElements(e)).value = isNil(c)? f : car(c); + map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = isNil(c)? f : car(c); return n; }, nodeList(e.childNodes)); return t; } if (e.className == 'select') { var ce = car(childElements(car(childElements(e)))); - ce.value = t; - ce.innerHTML = t; + ce.value = isNil(c)? f : car(c); + ce.innerHTML = isNil(c)? f : car(c); return t; } if (e.className == 'list') { - e.innerHTML = '<table class="datatable" style="width: 100%;;"><tr><td class="datatd">' + t + '</td></tr><tr><td class="datatd">...</td></tr></table>'; - return ''; + e.innerHTML = '<table class="datatable" style="width: 100%;;"><tr><td class="datatd">' + (isNil(c)? f : car(c)) + '</td></tr><tr><td class="datatd">...</td></tr></table>'; + return t; } if (e.className == 'table') { - e.innerHTML = '<table class="datatable" style="width: 100%;"><tr><td class="datatdl">' + t + '</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table>'; + e.innerHTML = '<table class="datatable" style="width: 100%;"><tr><td class="datatdl">' + (isNil(c)? f : car(c)) + '</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table>'; return t; } if (e.className == 'link') { - var l = t.split(','); var ce = car(childElements(e)); - ce.href = car(l); - car(childElements(ce)).innerHTML = isNil(cdr(l))? car(l) : cadr(l); + ce.href = isNil(c)? 'link:/index.html' : ('link:' + car(c)); + car(childElements(ce)).innerHTML = isNil(c)? (f != ''? f : '/index.html') : isNil(cdr(c))? (f != ''? f : car(c)) : cadr(c); return t; } if (e.className == 'img') { - car(childElements(e)).src = formula? '/public/img.png' : t; + car(childElements(e)).src = isNil(c)? '/public/img.png' : car(c); return t; } if (e.className == 'iframe') { - car(childElements(e)).href = formula? '/public/iframe.html' : t; + car(childElements(e)).href = isNil(c)? '/public/iframe.html' : car(c); return t; } return ''; @@ -418,11 +482,12 @@ page.bringtotop = function(n) { /** * Draw widget selection. */ -page.widgetselect = function(n, s, wvalue, wdelete) { +page.widgetselect = function(n, s, wvalue, wcopy, wdelete) { if (isNil(n) || !s) { // Clear the widget value field wvalue.value = ''; wvalue.disabled = true; + wcopy.disabled = true; wdelete.disabled = true; // Clear the widget outline @@ -434,6 +499,7 @@ page.widgetselect = function(n, s, wvalue, wdelete) { // Update the widget value field wvalue.value = page.text(n); wvalue.disabled = false; + wcopy.disabled = false; wdelete.disabled = false; // Outline the widget |