Refactor component palettes a bit and support autosave.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1074983 13f79535-47bb-0310-9956-ffa450edef68

2 files changed, 83 insertions, 12 deletions

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;
         };