diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs')
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/app/app.html | 60 | ||||
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/graph/graph.html | 60 | ||||
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/graph/graph.js | 43 | ||||
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.html | 67 | ||||
-rw-r--r-- | sca-cpp/trunk/modules/edit/htdocs/page/page.js | 28 |
5 files changed, 213 insertions, 45 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/app.html b/sca-cpp/trunk/modules/edit/htdocs/app/app.html index 46de9d61c9..c4bc54a8d7 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/app.html +++ b/sca-cpp/trunk/modules/edit/htdocs/app/app.html @@ -37,7 +37,7 @@ <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]</span> -<input type="button" id="saveButton" style="font-weight: bold;" Value="Save"/> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/> </th> </tr> </table> @@ -74,6 +74,12 @@ var appname = ui.queryParams()['app']; $('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a>]'; /** + * The current app entry and corresponding saved XML content. + */ +var appentry; +var savedappentryxml = ''; + +/** * Default field values. */ var deftitle = 'Enter the title of your app here'; @@ -86,25 +92,61 @@ var defdesc = 'Enter a short description of your app here'; */ function getapp(name) { dashboard.get(name, function(doc) { - var entry = doc != null? atom.readATOMEntryDocument(doc) : mklist('', name); - $('appTitle').value = car(entry) != ''? car(entry) : deftitle; + appentry = doc != null? atom.readATOMEntryDocument(doc) : mklist('', name); + $('appTitle').value = car(appentry) != ''? car(appentry) : deftitle; $('appCategory').value = defcategory; $('appUpdated').innerHTML = defdate; $('appDescription').innerHTML = defdesc; + savedappentryxml = car(atom.writeATOMEntry(appentry)); }); } /** - * Save an app. + * Handle save button click event. */ $('saveButton').onclick = function() { - var title = $('appTitle').value; - var app = mklist(title != deftitle && title != ''? title : appname, appname, mklist()); - var entry = atom.writeATOMEntry(app); - dashboard.put(appname, car(entry)); - return false; + return save(); }; +/** + * Save the current app. + */ +function save() { + $('saveButton').value = 'Saving'; + var title = $('appTitle').value; + appentry = mklist(title != deftitle && title != ''? title : appname, appname, mklist()); + savedappentryxml = car(atom.writeATOMEntry(appentry)); + dashboard.put(appname, savedappentryxml, function() { + if (savedappentryxml == car(atom.writeATOMEntry(appentry))) + $('saveButton').value = 'Saved'; + return true; + }); + return true; +} + +/** + * Handle a change event + */ +function onappchange() { + var title = $('appTitle').value; + appentry = mklist(title != deftitle && title != ''? title : appname, appname, mklist()); + if (savedappentryxml == car(atom.writeATOMEntry(appentry))) + return false; + $('saveButton').value = 'Save now'; + + // Autosave after 3 seconds + setTimeout(function() { + if (savedappentryxml == car(atom.writeATOMEntry(appentry))) + return false; + return save(); + }, 3000); + return true; +} + +$('appTitle').onchange = onappchange; +$('appCategory').onchange = onappchange; +$('appDescription').onchange = onappchange; + // Get the current app getapp(appname); diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html index e03cc6038d..2a92a5d11e 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html @@ -44,7 +44,7 @@ <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"/> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/> </th> </tr> @@ -70,8 +70,9 @@ var appname = ui.queryParams()['app']; $('source').innerHTML = '[<a href="/apps/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.composite">json</a>]'; /** - * The current app composite. + * The current app composite and corresponding saved XML content. */ +var savedcomposxml = ''; var composite; /** @@ -100,7 +101,10 @@ function getapp(name, g) { '</composite>'; composite = readXML(mklist(x)); } - graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), g); + graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, g); + + // Track the saved composite XML + savedcomposxml = car(writeXML(composite, false)); }); } @@ -134,18 +138,45 @@ function installpalette(name, pos, g, bg, palette, gpalettes) { } /** - * Save the current edited page. + * Handle save button click event. */ $('saveButton').onclick = function(e) { + return save(); +}; - // Update the page ATOM entry - var compxml = writeXML(composite, false); +/** + * Save the current composite. + */ +function save() { + $('saveButton').value = 'Saving'; + savedcomposxml = car(writeXML(composite, false)); var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' + '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' + - compxml + '</item></content></entry>'; + savedcomposxml + '</item></content></entry>'; apps.put(appname, entry, function() { + if (savedcomposxml == car(writeXML(composite, false))) + $('saveButton').value = 'Saved'; + return true; }); -}; + return true; +} + +/** + * Handle a composite change event + */ +function oncomposchange() { + if (savedcomposxml == car(writeXML(composite, false))) + return false; + $('saveButton').value = 'Save now'; + + // Autosave after 3 seconds + setTimeout(function() { + if (savedcomposxml == car(writeXML(composite, false))) + return false; + return save(); + }, 3000); + return true; +} // Create editor graph area var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue'), $('compValue')); @@ -153,17 +184,20 @@ var bg = graph.mkgroup(graph.mkpath()); // Install the palettes var gpalettes = new Array(); -var spalette = 'events'; +var spalette = 'event'; var pos = graph.mkpath(); -installpalette('events', pos.rmove(0,0), g, bg, spalette, gpalettes); -installpalette('values', pos.rmove(0,40), g, bg, spalette, gpalettes); +installpalette('event', pos.rmove(0,0), g, bg, spalette, gpalettes); +installpalette('value', pos.rmove(0,40), g, bg, spalette, gpalettes); installpalette('url', pos.rmove(0, 40), g, bg, spalette, gpalettes); -installpalette('lists', pos.rmove(0, 40), g, bg, spalette, gpalettes); +installpalette('list', 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('logic', pos.rmove(0, 40), g, bg, spalette, gpalettes); installpalette('math', pos.rmove(0, 40), g, bg, spalette, gpalettes); +installpalette('talk', pos.rmove(0, 40), g, bg, spalette, gpalettes); installpalette('social', pos.rmove(0, 40), g, bg, spalette, gpalettes); -installpalette('sensors', pos.rmove(0, 40), g, bg, spalette, gpalettes); +installpalette('search', pos.rmove(0, 40), g, bg, spalette, gpalettes); +installpalette('sensor', pos.rmove(0, 40), g, bg, spalette, gpalettes); // Get and display the current app getapp(appname, g); diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js index 7273dae1bf..5e1de60c65 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -58,7 +58,7 @@ var proxcy = 20; var buttoncx = 70; var buttoncy = 30; var curvsz = 6; -var tabsz = 3; +var tabsz = 2; /** * Base path class. @@ -236,6 +236,9 @@ if (ui.isIE()) { pvalue.value = ''; cvalue.innerHTML = ''; } + + // Trigger composite change event + vmlg.oncomposchange(); } // Forget current dragged component @@ -281,14 +284,17 @@ if (ui.isIE()) { return false; // Change component name and refactor references to it - var compos = scdl.composite(svg.compos); + var compos = scdl.composite(vmlg.compos); cname.value = graph.ucid(cname.value, compos); graph.selected.id = cname.value; - cvalue.innerHTML = graph.compvaluelink(svg.appname, graph.selected.id); + cvalue.innerHTML = graph.compvaluelink(vmlg.appname, graph.selected.id); setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value)); // Refresh the composite - graph.refresh(svg); + graph.refresh(vmlg); + + // Trigger composite change event + vmlg.oncomposchange(); return false; }; @@ -301,7 +307,10 @@ if (ui.isIE()) { pvalue.value = graph.property(graph.selected.comp); // Refresh the composite - graph.refresh(svg); + graph.refresh(vmlg); + + // Trigger composite change event + vmlg.oncomposchange(); return false; }; @@ -391,7 +400,7 @@ if (ui.isIE()) { graph.comptitlewidth = function(comp) { var t = graph.title(comp); graph.comptitlewidthdiv.innerHTML = t; - var twidth = graph.comptitlewidthdiv.offsetWidth; + var twidth = graph.comptitlewidthdiv.offsetWidth + 4; graph.comptitlewidthdiv.innerHTML = ''; return twidth; }; @@ -412,7 +421,7 @@ if (ui.isIE()) { graph.proptitlewidth = function(comp) { var t = graph.property(comp); graph.proptitlewidthdiv.innerHTML = t; - var twidth = graph.proptitlewidthdiv.offsetWidth; + var twidth = graph.proptitlewidthdiv.offsetWidth + 4; graph.proptitlewidthdiv.innerHTML = ''; return twidth; }; @@ -714,6 +723,9 @@ if (ui.isIE()) { // Refresh the composite graph.refresh(svg); + + // Trigger composite change event + svg.oncomposchange(); return false; }; @@ -778,6 +790,9 @@ if (ui.isIE()) { // Refresh the composite graph.refresh(svg); + + // Trigger composite change event + svg.oncomposchange(); return false; }; @@ -791,6 +806,9 @@ if (ui.isIE()) { // Refresh the composite graph.refresh(svg); + + // Trigger composite change event + svg.oncomposchange(); return false; }; @@ -868,7 +886,7 @@ if (ui.isIE()) { graph.comptitlewidth = function(comp) { var title = graph.comptitle(comp); graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width; + var width = title.getBBox().width + 4; graph.titlewidthsvg.removeChild(title); return width; }; @@ -906,7 +924,7 @@ if (ui.isIE()) { graph.proptitlewidth = function(comp) { var title = graph.proptitle(comp); graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width; + var width = title.getBBox().width + 4; graph.titlewidthsvg.removeChild(title); return width; }; @@ -1200,6 +1218,8 @@ graph.compheight = function(comp, cassoc) { var height = Math.max(lsvcsh, rrefsh); if (!isNil(graph.brefs(comp))) height = Math.max(height, (tabsz * 10) + (tabsz * 4) + (tabsz * 2)); + if (graph.property(comp) != '') + height = Math.max(40, height); return height; }); }; @@ -1532,7 +1552,7 @@ graph.composite = function(compos, pos) { * Move the rendering cursor down below a component. */ function rendermove(comp, cassoc, pos) { - return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + (tabsz * 2)); + return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + Math.max((tabsz * 2), 8)); } if (isNil(svcs)) @@ -1803,11 +1823,12 @@ graph.refresh = function(g) { * Display and enable editing of a composite and the graphical * nodes that represent it. */ -graph.edit = function(appname, compos, nodes, g) { +graph.edit = function(appname, compos, nodes, onchange, g) { // Store the appname and composite in the graphical canvas g.appname = appname; g.compos = compos; + g.oncomposchange = onchange; // Display the composite nodes return graph.display(nodes, g); diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html index e305058475..7ace732526 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html @@ -43,7 +43,7 @@ <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"/> +<input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/> </th> </tr> @@ -57,7 +57,7 @@ <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="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"/><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> @@ -92,6 +92,11 @@ function atompage(doc) { } /** + * Track the current page saved XHTML content. + */ +var savedpagexhtml = ''; + +/** * Get and display an app page. */ function getpage(name, edit) { @@ -105,10 +110,9 @@ function getpage(name, edit) { if (isNil(el)) { // Create a default empty page if necessary - buffer.innerHTML = '<div id="page"></div>'; + buffer.innerHTML = '<DIV id="page">\n</DIV>\n'; } else { - var xhtml = writeStrings(writeXML(atompage(doc), false)); - buffer.innerHTML = xhtml; + buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); } // Append page nodes to editor @@ -117,18 +121,27 @@ function getpage(name, edit) { edit.appendChild(e); return page.cover(e); }, nodeList(buffer.childNodes[0].childNodes)); + + savedpagexhtml = pagexhtml(); }); } /** - * Save the current edited page. + * Handle save button click event. */ $('saveButton').onclick = function(e) { + return save(); +}; + +/** + * Return the current page XHTML content. + */ +function pagexhtml() { // Copy page DOM to hidden buffer var edit = $('page'); var buffer = $('buffer'); - buffer.innerHTML = '<div id="page"></div>' + buffer.innerHTML = '<DIV id="page">\n</DIV>\n' var div = buffer.childNodes[0]; div.innerHTML = edit.innerHTML; @@ -153,17 +166,51 @@ $('saveButton').onclick = function(e) { var lxhtml = readXHTMLElement(div); var xhtml = writeStrings(writeXML(lxhtml, false)); + return xhtml; +} + +/** + * Save the current page. + */ +function save() { + $('saveButton').value = 'Saving'; + + // Get the current page XHTML content + savedpagexhtml = pagexhtml(); + // Update the page ATOM entry var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' + '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml"><item>' + - xhtml + '</item></content></entry>'; + savedpagexhtml + '</item></content></entry>'; - pages.put(appname, entry, function(e) {}); + pages.put(appname, entry, function(e) { + if (savedpagexhtml == pagexhtml()) + $('saveButton').value = 'Saved'; + return true; + }); + return true; }; +/** + * Handle a page change event + */ +function onpagechange() { + if (savedpagexhtml == pagexhtml()) + return false; + $('saveButton').value = 'Save now'; + + // Autosave after 3 seconds + setTimeout(function() { + if (savedpagexhtml == pagexhtml()) + return false; + return save(); + }, 3000); + return true; +} + // Initialize the page editor var edit = $('page'); -page.edit(edit, $('widgetName'), $('widgetText')); +page.edit(edit, $('widgetName'), $('widgetText'), onpagechange); // 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 c1a2311fa2..6e886fb774 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -33,12 +33,15 @@ if (ui.isIE()) { /** * Init a page editor. IE-specific implementation. */ - page.edit = function(elem, wname, wtext) { + page.edit = function(elem, wname, wtext, onchange) { // Track element dragging and selection page.dragging = null; page.selected = null; + // Trigger page change events + page.onpagechange = onchange; + /** * Handle a mouse down event. */ @@ -103,6 +106,9 @@ if (ui.isIE()) { // Forget current dragged element page.dragging = null; elem.releaseCapture(); + + // Trigger page change event + page.onpagechange(); return false; }; @@ -142,6 +148,9 @@ if (ui.isIE()) { if (page.selected == null) return false; page.selected.id = wname.value; + + // Trigger page change event + page.onpagechange(); return false; }; @@ -149,6 +158,9 @@ if (ui.isIE()) { if (page.selected == null) return false; page.settext(page.selected, wtext.value); + + // Trigger page change event + page.onpagechange(); return false; }; @@ -164,12 +176,15 @@ if (ui.isIE()) { /** * Init a page editor. Generic implementation for all other browsers. */ - page.edit = function(elem, wname, wtext) { + page.edit = function(elem, wname, wtext, onchange) { // Track element dragging and selection page.dragging = null; page.selected = null; + // Trigger page change events + page.onpagechange = onchange; + /** * Handle a mouse down event. */ @@ -239,6 +254,9 @@ if (ui.isIE()) { // Forget dragged element page.dragging = null; + + // Trigger page change event + page.onpagechange(); return false; }; @@ -289,6 +307,9 @@ if (ui.isIE()) { if (page.selected == null) return false; page.selected.id = wname.value; + + // Trigger page change event + page.onpagechange(); return false; }; @@ -296,6 +317,9 @@ if (ui.isIE()) { if (page.selected == null) return false; page.settext(page.selected, wtext.value); + + // Trigger page change event + page.onpagechange(); return false; }; |