Support for changing component names and properties, and some edit improvements.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1067563 13f79535-47bb-0310-9956-ffa450edef68
author: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2011-02-06 01:06:46 +0000
committer: jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68> 2011-02-06 01:06:46 +0000
commit: 3e1309dbb69d64d91c328763c7a2dd4a6bcf9427 (patch)
tree: 4383fcd49cfe9ca131c34a2efd8d69e911b4aeed /sca-cpp/trunk/modules/edit/htdocs/page
parent: ce4092ca7f7e16a9a9b9b67da22055012e895c25 (diff)
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;
     }
author	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2011-02-06 01:06:46 +0000
committer	jsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>	2011-02-06 01:06:46 +0000
commit	3e1309dbb69d64d91c328763c7a2dd4a6bcf9427 (patch)
tree	4383fcd49cfe9ca131c34a2efd8d69e911b4aeed /sca-cpp/trunk/modules/edit/htdocs/page
parent	ce4092ca7f7e16a9a9b9b67da22055012e895c25 (diff)