From ff2490e3b4638b421c381946d8b1ebb30e51141b Mon Sep 17 00:00:00 2001 From: jsdelfino Date: Sun, 17 Apr 2011 22:14:11 +0000 Subject: Cleanup HTML pages. Improvements and a few fixes to get consistent behavior across browsers including Safari/iOS. git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1094209 13f79535-47bb-0310-9956-ffa450edef68 --- .../modules/edit/htdocs/app/cache-manifest.cmf | 32 +++++ sca-cpp/trunk/modules/edit/htdocs/app/index.html | 120 +++++++++++------- .../trunk/modules/edit/htdocs/cache-manifest.cmf | 47 ++++++++ .../trunk/modules/edit/htdocs/dash/dashboard.html | 37 +++--- sca-cpp/trunk/modules/edit/htdocs/dash/index.html | 35 +++--- sca-cpp/trunk/modules/edit/htdocs/data/index.html | 35 +++--- sca-cpp/trunk/modules/edit/htdocs/graph/graph.html | 57 ++++----- sca-cpp/trunk/modules/edit/htdocs/graph/graph.js | 134 ++++++++++++++++----- sca-cpp/trunk/modules/edit/htdocs/graph/index.html | 59 +++++---- sca-cpp/trunk/modules/edit/htdocs/index.html | 41 ++++--- sca-cpp/trunk/modules/edit/htdocs/login/index.html | 34 +++--- .../trunk/modules/edit/htdocs/logout/index.html | 34 +++--- sca-cpp/trunk/modules/edit/htdocs/main.html | 55 +++++---- sca-cpp/trunk/modules/edit/htdocs/menu.html | 60 +++++---- sca-cpp/trunk/modules/edit/htdocs/page/index.html | 58 +++++---- sca-cpp/trunk/modules/edit/htdocs/page/page.html | 77 +++++++----- sca-cpp/trunk/modules/edit/htdocs/page/page.js | 115 ++++++++++++++++-- sca-cpp/trunk/modules/edit/htdocs/props/index.html | 59 +++++---- sca-cpp/trunk/modules/edit/htdocs/props/props.html | 35 +++--- .../trunk/modules/edit/htdocs/public/grid72.png | Bin 0 -> 138 bytes .../trunk/modules/edit/htdocs/public/iframe.html | 32 ++--- .../trunk/modules/edit/htdocs/public/notauth.html | 37 +++--- .../trunk/modules/edit/htdocs/public/notfound.html | 37 +++--- .../trunk/modules/edit/htdocs/public/notyet.html | 52 ++++++++ sca-cpp/trunk/modules/edit/htdocs/public/oops.html | 37 +++--- sca-cpp/trunk/modules/edit/htdocs/store/index.html | 42 ++++--- sca-cpp/trunk/modules/edit/htdocs/store/store.html | 91 ++++++++------ 27 files changed, 943 insertions(+), 509 deletions(-) create mode 100644 sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf create mode 100644 sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf create mode 100644 sca-cpp/trunk/modules/edit/htdocs/public/grid72.png create mode 100644 sca-cpp/trunk/modules/edit/htdocs/public/notyet.html (limited to 'sca-cpp/trunk/modules/edit/htdocs') diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf new file mode 100644 index 0000000000..24c05d717b --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf @@ -0,0 +1,32 @@ +CACHE-MANIFEST + +# Common resources +atomutil.js +component.js +elemutil.js +jsconfig.js +jsonutil.js +scdl.js +ui.css +ui.js +util.js +xmlutil.js + +# App resources +app.html +data/index.html +index.html +favicon.ico +login/index.html +logout/index.html +public/app.png +public/grid72.png +public/iframe.html +public/img.png +public/notauth.html +public/notfound.html +public/notyet.html +public/oops.html +public/touchicon.png +robots.txt + diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/index.html b/sca-cpp/trunk/modules/edit/htdocs/app/index.html index 458ba4c00e..f147f729ac 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/app/index.html @@ -1,22 +1,22 @@ - + App @@ -27,6 +27,7 @@ document.title = window.location.hostname.split('.')[0]; + @@ -52,9 +53,10 @@ if (ui.isIE()) $('bodydiv').style.right = -20; /** * Page, every and location components. */ -var pagecomp = sca.httpclient('page', '/page'); +var appstartcomp = sca.httpclient('appstart', '/appstart'); +var appstopcomp = sca.httpclient('appstop', '/appstop'); var everycomp = sca.httpclient('every', '/every'); -var locationcomp = sca.httpclient('location', '/location'); +var geolocationcomp = sca.httpclient('geolocation', '/geolocation'); /** * Find a named value in a tree of elements. @@ -66,7 +68,6 @@ function datavalue(l, id) { // Element matches id segment if (car(id) == elementName(e)) { - log('match', car(id)); // Found element matching the whole id path if (isNil(cdr(id))) @@ -100,9 +101,11 @@ function inputvalue(e) { return car(childElements(e)).value; } if (e.className == 'checkbox') { + if (!car(childElements(e)).checked) + return null; return car(childElements(e)).value; } - if (e.className == 'list') { + if (e.className == 'select') { return car(childElements(car(childElements(e)))).value; } return null; @@ -114,7 +117,10 @@ function inputvalue(e) { function setwidgetvalue(e, dv) { function datatext(dv) { - return elementHasValue(dv)? elementValue(dv) : ''; + if (!elementHasValue(dv)) + return ''; + var t = elementValue(dv); + return t == null? '' : t; } if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') { @@ -138,15 +144,20 @@ function setwidgetvalue(e, dv) { map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes)); return t; } - if (e.className == 'list') { + if (e.className == 'select') { var t = datatext(dv); var ce = car(childElements(car(childElements(e)))); ce.value = t; ce.innerHTML = t; return t; } + if (e.className == 'list') { + var t = ui.datalist(mklist(dv)); + car(childElements(e)).innerHTML = t; + return t; + } if (e.className == 'table') { - var t = ui.datatable(elementChildren(dv)); + var t = ui.datatable(mklist(dv)); car(childElements(e)).innerHTML = t; return t; } @@ -159,7 +170,8 @@ function setwidgetvalue(e, dv) { } if (e.className == 'img') { var t = datatext(dv); - car(childElements(e)).src = t; + var img = car(childElements(e)); + img.setAttribute('src', t); return t; } if (e.className == 'iframe') { @@ -220,7 +232,7 @@ function bindwidgethandler(e) { car(childElements(e)).name = e.id; return e; } - if (e.className == 'list') { + if (e.className == 'select') { var ce = car(childElements(car(childElements(e)))); ce.name = e.id; return e; @@ -241,7 +253,13 @@ function fixupwidget(e) { e.style.width = '100%'; return e; } + if (e.className == 'list') { + car(childElements(e)).innerHTML = ''; + car(childElements(e)).style.width = '100%'; + return e; + } if (e.className == 'table') { + car(childElements(e)).innerHTML = ''; car(childElements(e)).style.width = '100%'; return e; } @@ -266,7 +284,6 @@ function getpagedata() { // Eval a component init script function evalcompinit(doc) { - log('comp init', doc); if (isNil(doc)) return true; var js = car(json.readJSON(mklist(doc))); @@ -283,8 +300,7 @@ function getpagedata() { } // Get the component app data - var doc = pagecomp.get(window.location.search, function(doc) { - log('page return', doc); + var doc = appstartcomp.get(window.location.search, function(doc) { try { $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML; @@ -296,11 +312,11 @@ function getpagedata() { // Get and eval the optional timer and location watch setup scripts everycomp.get('setup', evalcompinit); - locationcomp.get('setup', evalcompinit); + geolocationcomp.get('setup', evalcompinit); return true; } catch(e) { - log('exception on pagecomp.get()', e); + log('exception on appstartcomp.get()', e); } }); @@ -315,7 +331,6 @@ function getpagedata() { */ function getcompdata(comp, qs) { var doc = comp.get(qs, function(doc) { - log('comp data', doc); return displaydoc(doc); }); return true; @@ -329,7 +344,11 @@ function compquery() { return e.id + '=' + inputvalue(e); } - var args = map(queryarg, filter(function(e) { return !isNil(e.id) && !isNil(inputvalue(e)); }, nodeList(ui.elementByID($('app'), 'page').childNodes))); + function childrenList(n) { + return append(nodeList(n.childNodes), reduce(append, mklist(), map(childrenList, nodeList(n.childNodes)))); + } + + var args = map(queryarg, filter(function(e) { return !isNil(e.id) && !isNil(inputvalue(e)); }, childrenList(ui.elementByID($('app'), 'page')))); // Append current location properties if known if (!isNil(geoposition)) { @@ -367,9 +386,9 @@ function intervalHandler() { /** * Setup an interval timer. */ -function setupIntervalHandler(sec) { +function setupIntervalHandler(msec) { try { - return setInterval(intervalHandler, sec); + return setInterval(intervalHandler, msec); } catch(e) { log('exception in setupIntervalHandler()', e); } @@ -378,20 +397,26 @@ function setupIntervalHandler(sec) { /** * Handle a location watch event. */ -var geoposition; +var locationWatch = null; +var geoposition = null; function locationHandler(pos) { - log('location pos', pos); try { geoposition = pos; - return getcompdata(locationcomp, compquery()); + return getcompdata(geolocationcomp, compquery()); } catch(e) { - log('exception in locationHandler()', e); + locationErrorHandler(e); } } function locationErrorHandler(e) { log('location error', e); + if (!isNil(locationWatch)) { + try { + navigator.geolocation.clearWatch(locationWatch); + } catch(e) {} + locationWatch = null; + } return true; } @@ -399,13 +424,18 @@ function locationErrorHandler(e) { * Setup a location watch handler. */ function setupLocationHandler() { - log('setup location'); - try { - navigator.geolocation.getCurrentPosition(locationHandler, locationErrorHandler); - navigator.geolocation.watchPosition(locationHandler, locationErrorHandler); - } catch(e) { - log('exception in setupLocationHandler()', e); + function installLocationHandler() { + if (!isNil(locationWatch)) + return true; + try { + locationWatch = navigator.geolocation.watchPosition(locationHandler, locationErrorHandler); + } catch(e) { + log('exception in installLocationHandler()', e); + } } + + installLocationHandler(); + setInterval(installLocationHandler, 10000); return true; } diff --git a/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf new file mode 100644 index 0000000000..5761c8cf11 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf @@ -0,0 +1,47 @@ +CACHE-MANIFEST + +# Common resources +atomutil.js +component.js +elemutil.js +jsconfig.js +jsonutil.js +scdl.js +ui.css +ui.js +util.js +xmlutil.js + +# App resources +app/index.html +dash/dashboard.html +dash/index.html +data/index.html +favicon.ico +graph/graph.html +graph/graph.js +graph/index.html +home.png +index.html +login/index.html +logout/index.html +main.html +menu.html +page/index.html +page/page.html +page/page.js +props/index.html +props/props.html +public/app.png +public/grid72.png +public/iframe.html +public/img.png +public/notauth.html +public/notfound.html +public/notyet.html +public/oops.html +public/touchicon.png +robots.txt +store/index.html +store/store.html + diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html index 44a971fb14..97b5e37a7b 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html @@ -1,24 +1,25 @@ + @@ -91,7 +92,7 @@ function getapps(sync) { function display(doc) { var apps = ''; apps += '' + - '' + + '' + '' + '' + '' + @@ -103,7 +104,7 @@ function getapps(sync) { var entry = entries[i]; var title = cadr(assoc("'title", entry)) var name = cadr(assoc("'id", entry)) - var editlink = ''; + var editlink = ''; var domainlink = '' + name + '.' + window.location.hostname + ''; var category = 'coolapps'; var updated = 'Feb 4, 2011'; diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html index a2f317175d..52b97b7271 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html @@ -1,20 +1,20 @@ @@ -24,6 +24,7 @@ + @@ -40,7 +41,7 @@ // Load the menu bar ui.loadwidget('menu', '/menu.html', ui.showbody); -$('h1').innerHTML = domaintitle(window.location.hostname); +$('h1').innerHTML = hometitle(window.location.hostname); // Load the dashboard $('dashboard').innerHTML = diff --git a/sca-cpp/trunk/modules/edit/htdocs/data/index.html b/sca-cpp/trunk/modules/edit/htdocs/data/index.html index 6f5db2ba8b..2682acde07 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/data/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/data/index.html @@ -1,20 +1,20 @@ @@ -28,6 +28,7 @@ document.title = 'View - ' + window.location.hostname.split('.')[0] + '/' + cn; + @@ -81,9 +82,7 @@ function mkdoctable(doc) { * Get and display the contents of the current component. */ function getdata() { - log('comp', comp.uri); comp.get('', function(doc) { - log('doc', doc); if (json.isJSON(mklist(doc))) return display(datatable(json.readJSON(mklist(doc)))); diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html index 7d9d472856..1b927de48d 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html @@ -1,24 +1,25 @@ + @@ -161,7 +162,6 @@ $('saveButton').onclick = function(e) { * Save the current composite. */ function save() { - log('saving'); $('saveButton').value = 'Saving'; savedcomposxml = car(writeXML(composite, false)); var entry = '' + @@ -178,15 +178,18 @@ function save() { /** * Handle a composite change event. */ -function oncomposchange() { +function oncomposchange(prop) { if (savedcomposxml == car(writeXML(composite, false))) return false; $('saveButton').value = 'Save now'; - // Autosave after 3 seconds + // Save property changes right away + if (prop) + return save(); + + // Autosave other changes after 3 seconds + $('saveButton').value = 'Save now'; setTimeout(function() { - log('savedcomposxml', savedcomposxml); - log('newddcomposxml', car(writeXML(composite, false))); if (savedcomposxml == car(writeXML(composite, false))) return false; return save(); @@ -281,12 +284,12 @@ $('autoplayButton').onclick = function(e) { if (autoplay) { autoplay = false; showData(''); - $('autoplayButton').value = 'Autorun is off'; + $('autoplayButton').value = 'Preview is off'; return true; } autoplay = true; showData(compname); - $('autoplayButton').value = 'Autorun is on'; + $('autoplayButton').value = 'Preview is on'; return true; }; @@ -299,11 +302,11 @@ var bg = graph.mkgroup(graph.mkpath()); // Install the palettes var gpalettes = new Array(); -var spalette = 'event'; +var spalette = 'control'; var pos = graph.mkpath(); -installpalette('event', pos.rmove(0,0), g, bg, spalette, gpalettes); -installpalette('value', pos.rmove(0,40), g, bg, spalette, gpalettes); -installpalette('list', pos.rmove(0, 40), g, bg, spalette, gpalettes); +installpalette('control', pos.rmove(0,0), g, bg, spalette, gpalettes); +installpalette('values', pos.rmove(0,40), g, bg, spalette, gpalettes); +installpalette('lists', pos.rmove(0, 40), g, bg, spalette, gpalettes); installpalette('transform', pos.rmove(0, 40), g, bg, spalette, gpalettes); installpalette('text', pos.rmove(0, 40), g, bg, spalette, gpalettes); installpalette('http', pos.rmove(0, 40), g, bg, spalette, gpalettes); diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js index 13543b4d61..38909756dc 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -47,6 +47,8 @@ graph.colors.blue1 = '#00c3c9'; graph.colors.red1 = '#d03f41'; graph.colors.yellow1 = '#fcee21'; graph.colors.magenta1 = '#c0688a'; +graph.colors.cyan1 = '#d5dcf9'; +graph.colors.lightgray1 = '#dcdcdc' /** * Default positions and sizes. @@ -55,10 +57,11 @@ var palcx = 250; var trashcx = 230; var proxcx = 20; var proxcy = 20; -var buttoncx = 70; +var buttoncx = 65; var buttoncy = 30; var curvsz = 6; var tabsz = 2; +var fontsz = ''; /** * Base path class. @@ -134,6 +137,8 @@ if (ui.isIE()) { // Track element dragging and selection graph.dragging = null; graph.selected = null; + cname.disabled = true; + pvalue.disabled = true; /** * Find the first draggable element in a hierarchy of elements. @@ -159,7 +164,9 @@ if (ui.isIE()) { // Reset current selection cname.value = ''; + cname.disabled = true; pvalue.value = ''; + pvalue.disabled = true; // Trigger component select event vmlg.oncompselect(''); @@ -187,7 +194,9 @@ if (ui.isIE()) { // Update the component name and property value fields cname.value = graph.selected.id; + cname.disabled = false; pvalue.value = graph.property(graph.selected.comp); + pvalue.disabled = !graph.hasproperty(graph.selected.comp); // Trigger component select event vmlg.oncompselect(vmlg.appname, graph.selected.id); @@ -237,14 +246,16 @@ if (ui.isIE()) { // Reset current selection graph.selected = null; cname.value = ''; + cname.disabled = true; pvalue.value = ''; + pvalue.disabled = true; // Trigger component select event vmlg.oncompselect(''); } // Trigger composite change event - vmlg.oncomposchange(); + vmlg.oncomposchange(false); } // Forget current dragged component @@ -292,6 +303,7 @@ if (ui.isIE()) { // Change component name and refactor references to it var compos = scdl.composite(vmlg.compos); cname.value = graph.ucid(cname.value, compos); + cname.disabled = false; graph.selected.id = cname.value; setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value)); @@ -302,7 +314,7 @@ if (ui.isIE()) { graph.refresh(vmlg); // Trigger composite change event - vmlg.oncomposchange(); + vmlg.oncomposchange(true); return false; }; @@ -313,12 +325,13 @@ if (ui.isIE()) { // Change the component property value graph.setproperty(graph.selected.comp, pvalue.value); pvalue.value = graph.property(graph.selected.comp); + pvalue.disabled = !graph.hasproperty(graph.selected.comp); // Refresh the composite graph.refresh(vmlg); // Trigger composite change event - vmlg.oncomposchange(); + vmlg.oncomposchange(true); return false; }; @@ -326,15 +339,20 @@ if (ui.isIE()) { // component, reference and property titles graph.comptitlewidthdiv = document.createElement('span'); graph.comptitlewidthdiv.style.visibility = 'hidden' + if (fontsz != '') + graph.comptitlewidthdiv.style.fontSize = fontsz; div.appendChild(graph.comptitlewidthdiv); graph.reftitlewidthdiv = document.createElement('span'); graph.reftitlewidthdiv.style.visibility = 'hidden' + if (fontsz != '') + graph.comptitlewidthdiv.style.fontSize = fontsz; div.appendChild(graph.reftitlewidthdiv); graph.proptitlewidthdiv = document.createElement('span'); graph.proptitlewidthdiv.style.visibility = 'hidden' - graph.proptitlewidthdiv.style.fontWeight = 'bold' + if (fontsz != '') + graph.comptitlewidthdiv.style.fontSize = fontsz; div.appendChild(graph.proptitlewidthdiv); return vmlg; @@ -379,14 +397,16 @@ if (ui.isIE()) { /** * Return an element representing a title. */ - graph.mktitle = function(t, bold, pos) { + graph.mktitle = function(t, style, pos) { var title = document.createElement('v:textbox'); title.style.position = 'absolute'; title.style.left = pos.xpos() + 2; title.style.top = pos.ypos(); title.inset = '' + 6 + 'px ' + pos.ypos() + 'px 0px 0px'; - if (bold) - title.style.fontWeight = 'bold'; + if (style != '') + title.style.cssText = style; + if (fontsz != '') + title.style.fontSize = fontsz; var tnode = document.createTextNode(t); title.appendChild(tnode); return title; @@ -399,7 +419,7 @@ if (ui.isIE()) { var tsvcs = graph.tsvcs(comp); var lsvcs = graph.lsvcs(comp); var pos = graph.mkpath().move(isNil(lsvcs)? tabsz : (tabsz * 5), isNil(tsvcs)? tabsz : (tabsz * 5)); - return graph.mktitle(graph.title(comp), false, pos); + return graph.mktitle(graph.title(comp), graph.compstyle(comp), pos); }; /** @@ -420,16 +440,16 @@ if (ui.isIE()) { var tsvcs = graph.tsvcs(comp); var lsvcs = graph.lsvcs(comp); var pos = graph.mkpath().move(graph.comptitlewidth(comp) + 7 + (isNil(lsvcs)? tabsz : (tabsz * 5)), isNil(tsvcs)? tabsz : (tabsz * 5)); - return graph.mktitle(graph.property(comp), true, pos); + return graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp), pos); }; /** * Return the width of the value of a property. */ graph.proptitlewidth = function(comp) { - var t = graph.property(comp); + var t = graph.proptitle(comp); graph.proptitlewidthdiv.innerHTML = t; - var twidth = graph.proptitlewidthdiv.offsetWidth + 2; + var twidth = graph.proptitlewidthdiv.offsetWidth + 4; graph.proptitlewidthdiv.innerHTML = ''; return twidth; }; @@ -438,7 +458,7 @@ if (ui.isIE()) { * Return an element representing the title of a reference. */ graph.reftitle = function(ref) { - return graph.mktitle(graph.title(ref), false, graph.mkpath().move(25,25)); + return graph.mktitle(graph.title(ref), graph.refstyle(ref), graph.mkpath().move(25,25)); }; /** @@ -527,7 +547,7 @@ if (ui.isIE()) { graph.mkbutton = function(t, pos) { // Make the title element - var title = graph.mktitle(t, true, graph.mkpath().move(4,4)); + var title = graph.mktitle(t, '', graph.mkpath().move(4,4)); // Compute the path of the button shape var path = graph.buttonpath().str(); @@ -616,6 +636,8 @@ if (ui.isIE()) { // Track element dragging and selection graph.dragging = null; graph.selected = null; + cname.disabled = true; + pvalue.disabled = true; /** * Find the first draggable element in a hierarchy of elements. @@ -644,7 +666,9 @@ if (ui.isIE()) { // Reset current selection cname.value = ''; + cname.disabled = true; pvalue.value = ''; + pvalue.disabled = true; // Trigger component select event svg.oncompselect(''); @@ -672,7 +696,9 @@ if (ui.isIE()) { // Update the component name and property value fields cname.value = graph.selected.id; + cname.disabled = false; pvalue.value = graph.property(graph.selected.comp); + pvalue.disabled = !graph.hasproperty(graph.selected.comp); // Trigger component select event svg.oncompselect(svg.appname, graph.selected.id); @@ -725,7 +751,9 @@ if (ui.isIE()) { // Reset current selection graph.selected = null; cname.value = ''; + cname.disabled = true; pvalue.value = ''; + pvalue.disabled = true; // Trigger component select event svg.oncompselect(''); @@ -739,7 +767,7 @@ if (ui.isIE()) { graph.refresh(svg); // Trigger composite change event - svg.oncomposchange(); + svg.oncomposchange(false); return false; }; @@ -808,7 +836,7 @@ if (ui.isIE()) { graph.refresh(svg); // Trigger composite change event - svg.oncomposchange(); + svg.oncomposchange(true); return false; }; @@ -819,12 +847,13 @@ if (ui.isIE()) { // Change the component property value graph.setproperty(graph.selected.comp, pvalue.value); pvalue.value = graph.property(graph.selected.comp); + pvalue.disabled = !graph.hasproperty(graph.selected.comp); // Refresh the composite graph.refresh(svg); // Trigger composite change event - svg.oncomposchange(); + svg.oncomposchange(true); return false; }; @@ -878,13 +907,15 @@ if (ui.isIE()) { /** * Return an element representing a title. */ - graph.mktitle = function(t, bold) { + graph.mktitle = function(t, style) { var title = document.createElementNS(graph.svgns, 'text'); - title.setAttribute('text-anchor', 'start'); title.setAttribute('x', 5); title.setAttribute('y', 15); - if (bold) - title.style.fontWeight = 'bold'; + title.setAttribute('text-anchor', 'start'); + if (style != '') + title.style.cssText = style; + if (fontsz != '') + title.style.fontSize = fontsz; title.appendChild(document.createTextNode(t)); return title; }; @@ -893,7 +924,7 @@ if (ui.isIE()) { * Return an element representing the title of a component. */ graph.comptitle = function(comp) { - return graph.mktitle(graph.title(comp), false); + return graph.mktitle(graph.title(comp), graph.compstyle(comp)); }; /** @@ -911,7 +942,7 @@ if (ui.isIE()) { * Return an element representing the title of a reference. */ graph.reftitle = function(ref) { - return graph.mktitle(graph.title(ref), false); + return graph.mktitle(graph.title(ref), graph.refstyle(ref)); }; /** @@ -929,7 +960,7 @@ if (ui.isIE()) { * Return an element representing the value of a property. */ graph.proptitle = function(comp) { - var title = graph.mktitle(graph.property(comp), true); + var title = graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp)); title.setAttribute('x', graph.comptitlewidth(comp) + 7); return title; }; @@ -940,7 +971,7 @@ if (ui.isIE()) { graph.proptitlewidth = function(comp) { var title = graph.proptitle(comp); graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width + 2; + var width = title.getBBox().width + 4; graph.titlewidthsvg.removeChild(title); return width; }; @@ -1006,7 +1037,7 @@ if (ui.isIE()) { graph.mkbutton = function(t, pos) { // Make the button title - var title = graph.mktitle(t, true); + var title = graph.mktitle(t, ''); // Compute the path of the button shape var path = graph.buttonpath().str(); @@ -1085,13 +1116,23 @@ graph.title = function(e) { return '>' if (t == 'lt') return '<'; - if (t.indexOf('{') == -1) + if (t.indexOf('{propval}') != -1) + return ''; + if (t.indexOf('{compname}') == -1) return t; return t.replace('{compname}', scdl.name(e)); } return scdl.name(e); }; +/** + * Return the display style of an SCDL component or reference. + */ +graph.compstyle = graph.refstyle = function(e) { + var s = scdl.style(e); + return isNil(s)? '' : s; +}; + /** * Return the property value of a SCDL component. */ @@ -1101,7 +1142,44 @@ graph.property = function(e) { return ''; if (scdl.visible(car(p)) == 'false') return ''; - return scdl.propertyValue(car(p)); + var pv = scdl.propertyValue(car(p)); + return pv; +}; + +/** + * Return the title of a property of a SCDL component. + */ +graph.propertytitle = function(e) { + var pv = graph.property(e); + var t = scdl.title(e); + if (t.indexOf('{propval}') == -1) + return pv; + return t[0] == ' '? t.substr(1).replace('{propval}', pv) : t.replace('{propval}', pv); +}; + +/** + * Return true if a SCDL component has a property. + */ +graph.hasproperty = function(e) { + var p = scdl.properties(e); + if (isNil(p)) + return false; + if (scdl.visible(car(p)) == 'false') + return false; + return true; +}; + +/** + * Return the display style of the property of an SCDL component. + */ +graph.propstyle = function(e) { + var p = scdl.properties(e); + if (isNil(p)) + return ''; + if (scdl.visible(car(p)) == 'false') + return ''; + var s = scdl.style(car(p)); + return isNil(s)? '' : s; }; /** diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html index f9daa45770..c86b1ef6c1 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html @@ -1,52 +1,67 @@ -Composition +App + -

+


@@ -40,11 +41,11 @@ document.title = domaintitle(window.location.hostname); diff --git a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html index e17b325eb3..84aa08ef80 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html @@ -1,22 +1,21 @@ - Sign out @@ -25,6 +24,7 @@ + diff --git a/sca-cpp/trunk/modules/edit/htdocs/main.html b/sca-cpp/trunk/modules/edit/htdocs/main.html index c9cdf37145..9555e8a54d 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/main.html +++ b/sca-cpp/trunk/modules/edit/htdocs/main.html @@ -1,24 +1,25 @@ + @@ -27,19 +28,23 @@
-


- +

+



+ + +
+



-

Get Started

+

Get Started




-
This module implements a simple App store to help you create and share Tuscany apps.
-
The user interface is minimalistic, by design.
-
-
Works with Safari, Chrome and Firefox. Doesn't work with IE.
+
Safari, Chrome, Firefox only for now.
+
@@ -47,6 +52,10 @@ diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html index fe3e228c62..8cdeddb1dc 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/menu.html +++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html @@ -1,24 +1,25 @@ + @@ -38,7 +39,8 @@ var user = sca.defun(sca.reference(menuWidget, "user"), "id"); function userMenu() { function UserMenu() { this.content = function() { - return '' + user.id() + ''; + u = user.id() + return '' + u + ''; }; } return new UserMenu(); @@ -51,26 +53,18 @@ function appname() { return ui.queryParams()['app']; } -/** - * Return the link to an app. - */ -function applink(appname) { - var protocol = window.location.protocol; - var host = window.location.hostname; - var port = ':' + window.location.port; - if (port == ':80' || port == ':443' || port == ':') - port = ''; - var link = protocol + '//' + appname + '.' + host + port + '/'; - return link; -} - // Display the menu bar var mdiv = $('menu'); var name = appname(); + mdiv.innerHTML = ui.menubar( - append(mklist(ui.menu('Home', '/'), ui.menu('Store', '/store/'), ui.menu('Dashboard', '/dash/')), - (isNil(name) || name == 'undefined')? mklist() : mklist(ui.menu('Composition', '/graph/?app=' + name), ui.menu('Page', '/page/?app=' + name), ui.menu('Settings', '/props/?app=' + name), ui.menu(name + '.' + window.location.hostname, applink(name), '_blank'))), - mklist(userMenu(), ui.menu('Account', '/account/'), ui.menu('Sign out', '/logout/'))); + append(mklist(ui.menu('Home', '/'), ui.menu('Store', '/store/')), + (isNil(name) || name == 'undefined')? + mklist() : + mklist(ui.menu('Page', '/page/?app=' + name), + ui.menu(isNil(config.compose)? 'Composition' : config.compose, '/graph/?app=' + name), + ui.menu('Stats', '/props/?app=' + name))), + mklist(ui.menu('Account', '/public/notyet.html'), ui.menu('Sign out', '/logout/'))); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html index e26231475e..bcda316504 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -1,20 +1,20 @@ @@ -24,30 +24,44 @@ + -

+


@@ -49,28 +50,36 @@
AppDomainURLCategoryTitleUpdated
+
+
+
+
+
+

Header1

Header2

 section - + checkbox - - + + +
list
...
+ +
table...
......
 -link -text -frame ... - +link +text +frame ... +
- + @@ -114,17 +123,17 @@ function getpage(name, edit) { // Convert the page to XHTML and place it in a hidden buffer var buffer = $('buffer'); var el = atompage(doc); - if (isNil(el)) { - // Create a default empty page if necessary + // Create a default empty page if necessary + if (isNil(el)) buffer.innerHTML = '
\n
\n'; - } else { + else buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); - } // Append page nodes to editor map(function(e) { - e.style.left = ui.csspos(e.style.left) + 250; + if (!isNil(e.style)) + e.style.left = ui.csspos(e.style.left) + 250; edit.appendChild(e); return page.cover(e); }, nodeList(buffer.childNodes[0].childNodes)); @@ -204,12 +213,16 @@ function save() { /** * Handle a page change event */ -function onpagechange() { +function onpagechange(prop) { if (savedpagexhtml == pagexhtml()) return false; $('saveButton').value = 'Save now'; - // Autosave after 3 seconds + // Save property changes right away + if (prop) + return save(); + + // Autosave other changes after 3 seconds setTimeout(function() { if (savedpagexhtml == pagexhtml()) return false; diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index 54b3751900..7ecf5c148e 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -38,6 +38,8 @@ if (ui.isIE()) { // Track element dragging and selection page.dragging = null; page.selected = null; + wname.disabled = true; + wtext.disabled = true; // Trigger page change events page.onpagechange = onchange; @@ -55,7 +57,9 @@ if (ui.isIE()) { // Reset current selection wname.value = ''; + wname.disabled = true; wtext.value = ''; + wtext.disabled = true; return false; } @@ -75,7 +79,9 @@ if (ui.isIE()) { // Update the widget name and text fields wname.value = page.selected.id; + wname.disabled = false; wtext.value = page.text(page.selected); + wtext.disabled = !page.hastext(page.selected); return false; }; @@ -86,6 +92,17 @@ if (ui.isIE()) { if (page.dragging == null) return false; + // Snap to grid + var newX = page.gridsnap(ui.csspos(page.dragging.style.left)); + var newY = page.gridsnap(ui.csspos(page.dragging.style.top)); + page.dragging.style.left = newX; + page.dragging.style.top = newY; + page.dragging.cover.style.left = newX; + page.dragging.cover.style.top = newY; + + // Fixup widget style + page.fixupwidget(page.dragging); + // Discard element dragged out of page area if (ui.csspos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') { if (ui.csspos(page.dragging.style.left) >= trashcx) { @@ -99,7 +116,9 @@ if (ui.isIE()) { // Reset current selection page.selected = null; wname.value = ''; + wname.disabled = true; wtext.value = ''; + wtext.disabled = true; } } @@ -108,7 +127,7 @@ if (ui.isIE()) { elem.releaseCapture(); // Trigger page change event - page.onpagechange(); + page.onpagechange(false); return false; }; @@ -150,7 +169,7 @@ if (ui.isIE()) { page.selected.id = wname.value; // Trigger page change event - page.onpagechange(); + page.onpagechange(true); return false; }; @@ -160,7 +179,7 @@ if (ui.isIE()) { page.settext(page.selected, wtext.value); // Trigger page change event - page.onpagechange(); + page.onpagechange(true); return false; }; @@ -181,6 +200,8 @@ if (ui.isIE()) { // Track element dragging and selection page.dragging = null; page.selected = null; + wname.disabled = true; + wtext.disabled = true; // Trigger page change events page.onpagechange = onchange; @@ -201,7 +222,9 @@ if (ui.isIE()) { // Reset current selection wname.value = ''; + wname.disabled = true; wtext.value = ''; + wtext.disabled = true; return false; } @@ -221,7 +244,9 @@ if (ui.isIE()) { // Update the widget name and text fields wname.value = page.selected.id; + wname.disabled = false; wtext.value = page.text(page.selected); + wtext.disabled = !page.hastext(page.selected); return false; }; @@ -235,6 +260,17 @@ if (ui.isIE()) { if (page.dragging == null) return false; + // Snap to grid + var newX = page.gridsnap(ui.csspos(page.dragging.style.left)); + var newY = page.gridsnap(ui.csspos(page.dragging.style.top)); + page.dragging.style.left = newX; + page.dragging.style.top = newY; + page.dragging.cover.style.left = newX; + page.dragging.cover.style.top = newY; + + // Fixup widget style + page.fixupwidget(page.dragging); + // Discard element dragged out of page area if (ui.csspos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') { if (ui.csspos(page.dragging.style.left) >= trashcx) { @@ -248,7 +284,9 @@ if (ui.isIE()) { // Reset current selection page.selected = null; wname.value = ''; + wname.disabled = true; wtext.value = ''; + wtext.disabled = true; } } @@ -256,7 +294,7 @@ if (ui.isIE()) { page.dragging = null; // Trigger page change event - page.onpagechange(); + page.onpagechange(false); return false; }; @@ -309,7 +347,7 @@ if (ui.isIE()) { page.selected.id = wname.value; // Trigger page change event - page.onpagechange(); + page.onpagechange(true); return false; }; @@ -319,7 +357,7 @@ if (ui.isIE()) { page.settext(page.selected, wtext.value); // Trigger page change event - page.onpagechange(); + page.onpagechange(true); return false; }; @@ -341,7 +379,7 @@ page.text = function(e) { return car(childElements(e)).value; if (e.className == 'entry' || e.className == 'password') return car(childElements(e)).defaultValue; - if (e.className == 'list') + if (e.className == 'select') return car(childElements(car(childElements(e)))).value; if (e.className == 'link') { var hr = car(childElements(e)).href; @@ -354,11 +392,38 @@ page.text = function(e) { } if (e.className == 'iframe') return car(childElements(e)).href; + if (e.className == 'list') + return ''; if (e.className == 'table') return ''; return ''; }; +/** + * Return true if a widget has editable text. + */ +page.hastext = function(e) { + if (e.className == 'h1' || e.className == 'h2' || e.className == 'text' || e.className == 'section') + return true; + if (e.className == 'button' || e.className == 'checkbox') + return true; + if (e.className == 'entry' || e.className == 'password') + return true; + if (e.className == 'select') + return false; + if (e.className == 'link') + return true; + if (e.className == 'img') + return true; + if (e.className == 'iframe') + return true; + if (e.className == 'list') + return false; + if (e.className == 'table') + return false; + return false; +}; + /** * Set the text of a widget. */ @@ -376,12 +441,15 @@ page.settext = function(e, t) { map(function(n) { if (n.nodeName == "SPAN") n.innerHTML = t; return n; }, nodeList(e.childNodes)); return t; } - if (e.className == 'list') { + if (e.className == 'select') { var ce = car(childElements(car(childElements(e)))); ce.value = t; ce.innerHTML = t; return t; } + if (e.className == 'list') { + return ''; + } if (e.className == 'table') { return ''; } @@ -403,6 +471,30 @@ page.settext = function(e, t) { return ''; }; +/** + * Initial fixup of a widget. + */ +page.fixupwidget = function(e) { + if (e.className == 'iframe') { + var f = car(childElements(e)); + //e.innerHTML = ''; + return e; + } + if (e.className == 'section') { + e.style.width = '100%'; + return e; + } + if (e.className == 'list') { + car(childElements(e)).style.width = '100%'; + return e; + } + if (e.className == 'table') { + car(childElements(e)).style.width = '100%'; + return e; + } + return e; +} + /** * Find a draggable element in a hierarchy of elements. */ @@ -416,6 +508,13 @@ page.draggable = function(n, e) { return page.draggable(n.parentNode, e); } +/** + * Align a pos along a 9pixel grid. + */ +page.gridsnap = function(x) { + return Math.round(x / 9) * 9; +} + /** * Bring an element and its parent to the top. */ diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/index.html b/sca-cpp/trunk/modules/edit/htdocs/props/index.html index 8236c77153..a6a8bc92fe 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/props/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/props/index.html @@ -1,52 +1,67 @@ -Settings +Stats + -

+


@@ -33,7 +34,7 @@ - +'; + + ui.ahref('/store/?category=' + cat, '_parent', '' + name + '') + ''; } var m = '
SettingsStats diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/grid72.png b/sca-cpp/trunk/modules/edit/htdocs/public/grid72.png new file mode 100644 index 0000000000..cf6008171a Binary files /dev/null and b/sca-cpp/trunk/modules/edit/htdocs/public/grid72.png differ diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html index 8c5bc03a91..cc44f5d428 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html @@ -1,20 +1,20 @@ diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html index c34f4b1f03..a283b3e89e 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html @@ -1,20 +1,20 @@ @@ -23,6 +23,7 @@ + @@ -32,7 +33,7 @@


-
Sorry, you're not authorized to view this page.
+
Sorry, you're not authorized to view this page.
@@ -43,7 +44,7 @@ if (!issubdomain(window.location.hostname)) ui.loadwidget('menu', '/menu.html', ui.showbody); -$('h1').innerHTML = domaintitle(window.location.hostname); +$('h1').innerHTML = hometitle(window.location.hostname); if (issubdomain(window.location.hostname)) ui.showbody(); diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html index ecd0a160fd..da56789a66 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html @@ -1,20 +1,20 @@ @@ -23,6 +23,7 @@ + @@ -32,7 +33,7 @@


-
Sorry, that page was not found.
+
Sorry, that page was not found.
You may have clicked an expired link or mistyped the address.
+ + + + + + +

+
+ +
Sorry, that page is still under construction.
+
Please check back later.
+ + + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html index bd1e488c5e..4c926ac6d2 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html @@ -1,20 +1,20 @@ @@ -23,6 +23,7 @@ + @@ -32,7 +33,7 @@


-
Oops, something went wrong...
+
Oops, something went wrong...
+ @@ -40,12 +44,12 @@ // Load the menu bar ui.loadwidget('menu', '/menu.html', ui.showbody); -$('h1').innerHTML = domaintitle(window.location.hostname); +$('h1').innerHTML = hometitle(window.location.hostname); // Get the store category var category = ui.queryParams()['category']; if (isNil(category)) - category = 'new'; + category = 'myapps'; // Load the store $('store').innerHTML = diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/store.html b/sca-cpp/trunk/modules/edit/htdocs/store/store.html index 33285d9145..c074cc24c2 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/store/store.html +++ b/sca-cpp/trunk/modules/edit/htdocs/store/store.html @@ -1,24 +1,25 @@ + @@ -44,24 +45,24 @@ if (ui.isIE()) $('bodydiv').style.right = -20; */ var category = ui.queryParams()['category']; if (isNil(category)) - category = 'new'; + category = 'myapps'; +log('category', category); /** * Build store menu bar */ function catmenu() { function catmenuitem(name, cat) { - var c = cat == category? "smenu" : "amenu"; + var c = cat == category? 'smenu' : 'amenu'; return '		' - + '' + name + '
'; + m += catmenuitem('My Apps', 'myapps'); m += catmenuitem('New Apps', 'new'); m += catmenuitem('Top Charts', 'top'); m += catmenuitem('Featured', 'featured'); - m += catmenuitem('Services', 'services'); - m += catmenuitem('Tests', 'tests'); m += '
'; return m; } @@ -74,6 +75,7 @@ $('catmenu').innerHTML = catmenu(); */ var editWidget = sca.component("EditWidget"); var store = sca.reference(editWidget, "store"); +var dashboard = sca.reference(editWidget, "dashboard"); /** * Return the link to an app. @@ -88,32 +90,50 @@ function applink(appname) { return link; } +/** + * Edit an app. + */ +function editApp(appname) { + return window.open('/page?app=' + appname, '_parent'); +} + +/** + * Clone an app. + */ +function cloneApp(appname) { + return window.open('/public/notyet.html', '_parent'); +} + /** * Get and display list of apps. */ -function getapps(category, sync) { +function getapps(category) { function display(doc) { var apps = '
'; var feed = car(elementsToValues(atom.readATOMFeed(mklist(doc)))); var entries = cadr(assoc("'entry", cdr(feed))); for (var i = 0; i < length(entries); i++) { var entry = entries[i]; - title = cadr(assoc("'title", entry)) - name = cadr(assoc("'id", entry)) - author = 'joe@localhost'; - hreflink = ''; + var title = cadr(assoc("'title", entry)) + var name = cadr(assoc("'id", entry)) + var author = 'joe@localhost'; + var clone = isNil(config.clone)? 'Clone' : config.clone; apps += '
' apps += ''; apps += ''; apps += ''; apps += '
'; - apps += '
' + hreflink + '' + '
'; - apps += '
'; + apps += '
' + ui.ahref(applink(name), '_blank', '') + '
'; + apps += '
'; + if (category == 'myapps') + apps += '
'; apps += '		'; - apps += '
' + hreflink + name + '
'; + apps += '
' + ui.ahref(applink(name), '_blank', name) + '
'; apps += '
' + 'by ' + '' + author + '
'; + apps += '
Feb 4, 2011
'; apps += '
'; apps += '
' + title + '
'; + apps += '
'; apps += '
'; apps += '
'; @@ -125,17 +145,20 @@ function getapps(category, sync) { ui.showbody(); } - if (sync) { - display(store.get(category)); - } else { - store.get(category, function(doc) { + if (category == 'myapps') { + dashboard.get('', function(doc) { display(doc); }); + return true; } + store.get(category, function(doc) { + display(doc); + }); + return true; } // Get and display the list of apps -getapps(category, true); +getapps(category); -- cgit v1.2.3