summaryrefslogtreecommitdiffstats
path: root/sca-cpp/trunk/modules/edit/htdocs/graph
diff options
context:
space:
mode:
authorjsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>2011-04-17 22:14:11 +0000
committerjsdelfino <jsdelfino@13f79535-47bb-0310-9956-ffa450edef68>2011-04-17 22:14:11 +0000
commitff2490e3b4638b421c381946d8b1ebb30e51141b (patch)
treea6c82a4be8fa72edafa2279913dd94f733e0ef88 /sca-cpp/trunk/modules/edit/htdocs/graph
parent7df272063ba2167d797bda383680bfcf648418f8 (diff)
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
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs/graph')
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.html57
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/graph.js134
-rw-r--r--sca-cpp/trunk/modules/edit/htdocs/graph/index.html59
3 files changed, 173 insertions, 77 deletions
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 @@
<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ui.css">
+<script type="text/javascript" src="/config.js"></script>
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/elemutil.js"></script>
<script type="text/javascript" src="/xmlutil.js"></script>
@@ -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 = '<entry xmlns="http://www.w3.org/2005/Atom">' +
@@ -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,7 +1116,9 @@ 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));
}
@@ -1093,6 +1126,14 @@ graph.title = function(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.
*/
graph.property = function(e) {
@@ -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 @@
<!--
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
-->
<html>
<head>
-<title>Composition</title>
+<title>App</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="/public/touchicon.png"/>
<link rel="stylesheet" type="text/css" href="/ui.css"/>
+<script type="text/javascript" src="/config.js"></script>
<script type="text/javascript" src="/util.js"></script>
<script type="text/javascript" src="/ui.js"></script>
</head>
<body class="delayed">
<div id="menu"></div>
-<h1><span id="h1"></span> <span id="appNameHeader" style="font-weight: normal;"></span></h1>
+<h1><span id="h1"></span><span id="appNameHeader"></span></h1>
<br/>
<div id="graph"></div>
<script type="text/javascript">
+/**
+ * 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;
+}
+
// Get the app name
var appname = ui.queryParams()['app'];
+// Update the window title
+document.title = windowtitle(window.location.hostname) + ' - ' + (isNil(config.compose)? 'Composition' : config.compose) + ' - ' + appname;
+$('h1').innerHTML = hometitle(window.location.hostname);
+$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>';
+
// Load the menu bar
ui.loadwidget('menu', '/menu.html?app=' + appname, ui.showbody);
-$('h1').innerHTML = domaintitle(window.location.hostname);
-document.title = 'Composition - ' + appname;
-$('appNameHeader').innerHTML = ' - ' + appname;
-
/**
* Display the editor for an app.
*/
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 10:31:25 +0000