diff options
Diffstat (limited to 'sca-cpp/trunk/modules/edit/htdocs')
32 files changed, 2070 insertions, 2799 deletions
diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf index 24c05d717b..460f0b6bbd 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf +++ b/sca-cpp/trunk/modules/edit/htdocs/app/cache-manifest.cmf @@ -1,26 +1,16 @@ -CACHE-MANIFEST +CACHE MANIFEST # Common resources -atomutil.js -component.js -elemutil.js -jsconfig.js -jsonutil.js -scdl.js -ui.css -ui.js -util.js -xmlutil.js +all-min.js +config.js +ui-min.css # App resources app.html data/index.html -index.html favicon.ico -login/index.html -logout/index.html +index.html public/app.png -public/grid72.png public/iframe.html public/img.png public/notauth.html @@ -30,3 +20,6 @@ public/oops.html public/touchicon.png robots.txt +NETWORK: +* + diff --git a/sca-cpp/trunk/modules/edit/htdocs/app/index.html b/sca-cpp/trunk/modules/edit/htdocs/app/index.html index f147f729ac..fe7edd44b9 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/app/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/app/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -16,7 +17,7 @@ * specific language governing permissions and limitations * under the License. --> -<html manifest="cache-manifest.cmf"> +<html manifest="/cache-manifest.cmf"> <head> <title>App</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/> @@ -26,20 +27,13 @@ document.title = window.location.hostname.split('.')[0]; </script> <link rel="apple-touch-icon" href="/public/touchicon.png"/> -<link rel="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/jsonutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> +<script type="text/javascript" src="/all-min.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> +<div id="bodydiv" class="devicewidth"> <div id="app"></div> @@ -51,11 +45,11 @@ document.title = window.location.hostname.split('.')[0]; if (ui.isIE()) $('bodydiv').style.right = -20; /** - * Page, every and location components. + * Start, stop, timer and geolocation components. */ -var appstartcomp = sca.httpclient('appstart', '/appstart'); -var appstopcomp = sca.httpclient('appstop', '/appstop'); -var everycomp = sca.httpclient('every', '/every'); +var startcomp = sca.httpclient('start', '/start'); +var stopcomp = sca.httpclient('stop', '/stop'); +var timercomp = sca.httpclient('timer', '/timer'); var geolocationcomp = sca.httpclient('geolocation', '/geolocation'); /** @@ -255,11 +249,13 @@ function fixupwidget(e) { } if (e.className == 'list') { car(childElements(e)).innerHTML = ''; + e.style.width = '100%'; car(childElements(e)).style.width = '100%'; return e; } if (e.className == 'table') { car(childElements(e)).innerHTML = ''; + e.style.width = '100%'; car(childElements(e)).style.width = '100%'; return e; } @@ -300,26 +296,24 @@ function getpagedata() { } // Get the component app data - var doc = appstartcomp.get(window.location.search, function(doc) { - try { - $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML; - - // Initial setup of the widgets - map(setupwidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID($('app'), 'page').childNodes))); + var doc = startcomp.get(window.location.search); + try { + $('app').innerHTML = $('appFrame').contentDocument.body.innerHTML; - // Display data on the page - displaypage(doc); + // Initial setup of the widgets + map(setupwidget, filter(function(e) { return !isNil(e.id); }, nodeList(ui.elementByID($('app'), 'page').childNodes))); - // Get and eval the optional timer and location watch setup scripts - everycomp.get('setup', evalcompinit); - geolocationcomp.get('setup', evalcompinit); - return true; + // Display data on the page + displaypage(doc); - } catch(e) { - log('exception on appstartcomp.get()', e); - } - }); + // Get and eval the optional timer and location watch setup scripts + evalcompinit(timercomp.get('setup')); + evalcompinit(geolocationcomp.get('setup')); + return true; + } catch(e) { + log('exception on startcomp.get()', e); + } } catch(e) { log('exception in getpagedata()', e); } @@ -330,10 +324,7 @@ function getpagedata() { * Get app data from a component. */ function getcompdata(comp, qs) { - var doc = comp.get(qs, function(doc) { - return displaydoc(doc); - }); - return true; + return displaydoc(comp.get(qs)); } /** @@ -377,7 +368,7 @@ function buttonClickHandler(id) { */ function intervalHandler() { try { - return getcompdata(everycomp, compquery()); + return getcompdata(timercomp, compquery()); } catch(e) { log('exception in intervalHandler()', e); } diff --git a/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf index 5761c8cf11..d734f1f2c7 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf +++ b/sca-cpp/trunk/modules/edit/htdocs/cache-manifest.cmf @@ -1,37 +1,24 @@ -CACHE-MANIFEST +CACHE MANIFEST # Common resources -atomutil.js -component.js -elemutil.js -jsconfig.js -jsonutil.js -scdl.js -ui.css -ui.js -util.js -xmlutil.js +all-min.js +config.js +ui-min.css # App resources app/index.html -dash/dashboard.html -dash/index.html +clone/index.html +data/index.html +create/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 +menu.js page/index.html -page/page.html page/page.js -props/index.html -props/props.html public/app.png public/grid72.png public/iframe.html @@ -42,6 +29,9 @@ public/notyet.html public/oops.html public/touchicon.png robots.txt +stats/index.html store/index.html -store/store.html + +NETWORK: +* diff --git a/sca-cpp/trunk/modules/edit/htdocs/clone/index.html b/sca-cpp/trunk/modules/edit/htdocs/clone/index.html new file mode 100644 index 0000000000..a68943b072 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/clone/index.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<!-- + * 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></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-min.css"/> +<script type="text/javascript" src="/config.js"></script> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> +</head> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + +<div id="menu"></div> + +<table style="width: 100%;"> +<tr> +<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td> +</tr> +</table> + +<table style="width: 100%;"> +<tr> +<th id="th" class="thl thr" style="padding-top: 4px; padding-bottom:4px;">Clone this App</th> +</tr> +</table> + +<form id="cloneAppForm" style="position: absolute; top: 90px; left: 0px;"> +<table style="width: 100%;"> +<tr><td><b>New App Name:</b></td></tr> +<tr><td><input type="text" id="appName" size="15" placeholder="Your app name"/> <span id="appDomain"></span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr> +<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr> +<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr> +<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr> +<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr> +<tr><td> +<input id="cloneAppOKButton" type="submit" class="greenbutton" style="font-weight: bold;" value="Clone" title="Clone the app"/> +<input id="cloneAppCancelButton" type="button" class="redbutton" value="Cancel"/> +</td></tr> +</table> +</form> + +</div> + +<script type="text/javascript"> +// Get the app name +var appname = ui.queryParams()['app']; +if (isNil(appname)) + window.open('/', '_self'); + +/** + * 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; +} + +// Set page titles +var tclone = isNil(config.clone)? 'Clone' : config.clone; +document.title = windowtitle(window.location.hostname) + ' - ' + tclone + ' - ' + appname; +$('h1').innerHTML = hometitle(window.location.hostname); +$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>'; +$('th').innerHTML = tclone + ' this App'; +$('cloneAppOKButton').value = tclone; +$('cloneAppOKButton').title = tclone + ' the app'; + +// Load the menu bar +displaymenu(); + +// Init form +$('appDomain').innerHTML = '.' + window.location.hostname; + +// Show the page +ui.showbody(); + +// Init service references +var editWidget = sca.component("EditWidget"); +var dashboard = sca.reference(editWidget, "dashboard"); +var apps = sca.reference(editWidget, "apps"); + +/** + * The current app entry and corresponding saved XML content. + */ +var appentry; +var savedappentryxml = ''; + +/** + * Get and display an app. + */ +function getapp(name) { + if (isNil(name)) + return false; + return apps.get(name, function(doc) { + appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name)); + var title = cadr(assoc("'title", cdr(appentry))); + $('appTitle').value = title; + $('appDescription').innerHTML = ''; + savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))); + return true; + }); +} + +/** + * Clone an app. + */ +$('cloneAppForm').onsubmit = function() { + var name = $('appName').value; + if (name == '') + return false; + var title = $('appTitle').value; + var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", appname))); + var entry = atom.writeATOMEntry(valuesToElements(app)); + dashboard.put(name, car(entry)); + window.open('/store/', '_self'); + return false; +}; + +/** + * Cancel cloning an app. + */ +$('cloneAppCancelButton').onclick = function() { + return window.open('/store/', '_self'); +}; + +// Get the current app +getapp(appname); + +</script> + +</body> +</html> + diff --git a/sca-cpp/trunk/modules/edit/htdocs/create/index.html b/sca-cpp/trunk/modules/edit/htdocs/create/index.html new file mode 100644 index 0000000000..9452275a83 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/create/index.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<!-- + * 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>Create 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-min.css"/> +<script type="text/javascript" src="/config.js"></script> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> +</head> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + +<div id="menu"></div> + +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> + +<table style="width: 100%;"> +<tr> +<th class="thl thr" style="padding-top: 4px; padding-bottom:4px;">Create an App</th> +</tr> +</table> + +<form id="createAppForm" style="position: absolute; top: 90px; left: 0px;"> +<table style="width: 100%;"> +<tr><td><b>App Name:</b></td></tr> +<tr><td><input type="text" id="appName" size="15" placeholder="Your app name"/> <span id="appDomain"></span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>App Icon:</b></td></tr> +<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr> +<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr> +<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr> +<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr> +<tr><td> +<input id="createAppOKButton" type="submit" class="greenbutton" style="font-weight: bold;" value="Create" title="Create the app"/> +<input id="createAppCancelButton" type="button" class="redbutton" value="Cancel"/> +</td></tr> +</table> +</form> + +</div> + +<script type="text/javascript"> +// Set page titles +document.title = windowtitle(window.location.hostname) + ' - Create App'; +$('h1').innerHTML = hometitle(window.location.hostname); + +// Load the menu bar +displaymenu(); + +// Init form +$('appDomain').innerHTML = '.' + window.location.hostname; + +// Show the page +ui.showbody(); + +// Init service references +var editWidget = sca.component("EditWidget"); +var dashboard = sca.reference(editWidget, "dashboard"); + +/** + * Create an app. + */ +$('createAppForm').onsubmit = function() { + var name = $('appName').value; + if (name == '') + return false; + var title = $('appTitle').value; + var app = mklist(mklist("'entry", mklist("'title", title != ''? title : name), mklist("'id", name))); + var entry = atom.writeATOMEntry(valuesToElements(app)); + dashboard.put(name, car(entry)); + window.open('/store/', '_self'); + return false; +}; + +/** + * Cancel creating an app. + */ +$('createAppCancelButton').onclick = function() { + return window.open('/store/', '_self'); +}; + +</script> + +</body> +</html> + diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html deleted file mode 100644 index 97b5e37a7b..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html +++ /dev/null @@ -1,212 +0,0 @@ -<!-- - * 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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<div id="apps"></div> -<br/> -<input type="button" id="createAppButton" value="Create App" title="Create a new app"/> -<br/> -<br/> - -<div id="newApp" style="visibility: hidden; height: 100%;"> -<table style="width: 100%;"> -<tr><th id="newAppHeader" class="thl thr" style="padding-top: 4px; padding-bottom:4px; border-style: none;">Create an App</th></tr> -<tr><td></td></tr> -</table> -<br/> - -<table style="width: 100%;"> -<tr><td><b>App Name:</b></td></tr> -<tr><td><input type="text" id="appName" size="10"/> <span id="appDomain"></span></td></tr> -<tr><tr><td><b>App Title:</b></td></tr> -<tr><td><input type="text" id="appTitle" size="80"/></td></tr> -<tr><tr><td><b>Category:</b></td></tr> -<tr><td><input type="text" id="appCategory" size="15" value="Cool Apps"/></td></tr> -<tr><tr><td><b>Description:</b></td></tr> -<tr><td><textarea id="appDescription" cols="80" rows="5">Enter a short description of your app here</textarea></td></tr> -<tr><td> -<input id="createAppOKButton" type="submit" style="font-weight: bold;" value="Create" title="Create the app"/> -<input id="createAppCancelButton" type="button" value="Cancel"/> -</td></tr> -</table> -<br/> -<br/> -</div> - -</div> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -// Init service references -var editWidget = sca.component("EditWidget"); -var dashboard = sca.reference(editWidget, "dashboard"); - -/** - * 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 and display list of apps. - */ -function getapps(sync) { - function display(doc) { - var apps = '<table style="width: 100%;">'; - apps += '<tr><th class="thl thr" style="width: 20px; padding-top: 4px; padding-right: 4px;">App</th>' + - '<th class="thr thl" style="width: 20px;">URL</th>' + - '<th class="thr thl">Category</th>' + - '<th class="thr thl" style="width: 100%;">Title</th>' + - '<th class="thr thl">Updated</th>' + - '<th class="thl thr">Sharing</th></tr>'; - - 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]; - var title = cadr(assoc("'title", entry)) - var name = cadr(assoc("'id", entry)) - var editlink = '<a href=\"' + '/page/?app=' + name + '\" target=\"_parent\">'; - var domainlink = '<a href=\"' + applink(name) + '\" target=\"' + '_blank' + '\">' + name + '.' + window.location.hostname + '</a>'; - var category = 'coolapps'; - var updated = 'Feb 4, 2011'; - var sharing = 'Public'; - - apps += '<tr class="trb"><td>'; - apps += editlink + '<img src="/public/app.png" width="50" height="50" style="width: 50px; height: 50px; margin-right: 10px; vertical-align: middle;"></img>' + '</a>'; - apps += ' ' + editlink + name + '</a></td>'; - apps += '<td>' + domainlink + '</td>'; - apps += '<td>' + category + '</td>'; - apps += '<td class="tdw">' + title + '</td>'; - apps += '<td>' + updated + '</td>'; - apps += '<td>' + sharing + '</td>'; - apps += '</tr>'; - } - apps += '</table>'; - $('apps').innerHTML = apps; - - // Show the page - ui.showbody(); - } - - if (sync) { - display(dashboard.get('')); - } else { - dashboard.get('', function(doc) { - display(doc); - }); - } -} - -/** - * Default field values. - */ -var deftitle = 'Enter the title of your app here'; -var defcategory = 'Cool Apps'; -var defdate = 'Feb 4, 2011'; -var defdesc = 'Enter a short description of your app here'; - -/** - * Display create app form. - */ -$('createAppButton').onclick = function() { - $('appName').value = ''; - $('appDomain').innerHTML = '.' + window.location.hostname; - $('appTitle').value = deftitle; - $('appCategory').value = defcategory; - $('appDescription').value = defdesc; - $('newAppHeader').style.borderStyle = 'solid'; - $('newApp').style.visibility = 'visible'; - $('appName').focus(); - return false; -}; - -/** - * Create an app. - */ -$('createAppOKButton').onclick = function() { - var name = $('appName').value; - if (name == '') - return false; - var title = $('appTitle').value; - var app = mklist(mklist("'entry", mklist("'title", title != deftitle && title != ''? title : name), mklist("'id", name))); - var entry = atom.writeATOMEntry(valuesToElements(app)); - dashboard.put(name, car(entry)); - getapps(); - $('newApp').style.visibility = 'hidden'; - return false; -}; - -/** - * Cancel creating an app. - */ -$('createAppCancelButton').onclick = function() { - $('newApp').style.visibility = 'hidden'; - return false; -}; - -/** - * Delete an app. - */ -/* -$('deleteAppLink').onclick = function() { - var apps = $('apps'); - if (isNil(apps)) - return false; - if (isNil(apps.length)) - apps = mklist(apps); - for (var i = 0; i < length(apps); i++) { - if (apps[i].checked) { - var name = apps[i].value; - dashboard.del(name); - } - } - getapps(); - return false; -}; -*/ - -// Get and display the list of apps -getapps(true); - -</script> -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html deleted file mode 100644 index 52b97b7271..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html +++ /dev/null @@ -1,54 +0,0 @@ -<!-- - * 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>App Dashboard</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 id="h1"></h1> -<br/> - -<div id="dashboard"></div> - -<script type="text/javascript"> - -// Load the menu bar -ui.loadwidget('menu', '/menu.html', ui.showbody); - -$('h1').innerHTML = hometitle(window.location.hostname); - -// Load the dashboard -$('dashboard').innerHTML = - '<iframe id="dashboardFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="dashboard.html"></iframe>'; - -</script> - -</body> -</html> - diff --git a/sca-cpp/trunk/modules/edit/htdocs/data/index.html b/sca-cpp/trunk/modules/edit/htdocs/data/index.html index 2682acde07..1f078f7b87 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/data/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/data/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -27,18 +28,11 @@ document.title = 'View - ' + window.location.hostname.split('.')[0] + '/' + cn; <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"> +<link rel="stylesheet" type="text/css" href="/ui-min.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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/jsonutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> +<script type="text/javascript" src="/all-min.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> <div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> @@ -75,15 +69,14 @@ function datatable(e) { */ function mkdoctable(doc) { var tr = '<tr><td class="datatdl">' + 'value' + '</td>' + '<td class="datatdr">' + doc + '</td></tr>'; - return '<table class="datatable ' + (window.name == 'dataFrame'? ' databg' : '') + '" style="width: 100%;">' + tr + '</table>'; + return '<table class="datatable ' + (window.name == 'previewFrame'? ' databg' : '') + '" style="width: 100%;">' + tr + '</table>'; } /** * Get and display the contents of the current component. */ function getdata() { - comp.get('', function(doc) { - + return comp.get('', function(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 deleted file mode 100644 index 1b927de48d..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html +++ /dev/null @@ -1,326 +0,0 @@ -<!-- - * 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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -<script type="text/javascript" src="graph.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<table style="width: 100%;"> -<tr> -<th class="thl" style="width: 225px; min-width: 225px;">Palette</th> - -<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;"> -<input id="compName" type="text" value="component name" title="Component name" style="position: relative; width: 200px;"/> -<input id="propValue" type="text" value="property value" title="Component property value" style="position: relative; width: 300px;"/> -<input type="button" id="autoplayButton" title="Turn preview on/off" style="font-weight: bold;" Value="Preview is on"/> -<span id="compValue" style="position: relative; font-weight: normal;"></span> -<span id="compDebug" style="position: relative; font-weight: normal;"></span> -</th> - -<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> -<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/> -</th> -</tr> - -<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"> -</td></tr> -</table> - -<div style="position:absolute; top: 40px; left: 240px; right: 0px; height: 5000px;"> -<iframe id="dataFrame" class="databg" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0"></iframe> -</div> - -</div> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -var editWidget = sca.component("EditWidget"); -var palettes = sca.reference(editWidget, "palettes"); -var apps = sca.reference(editWidget, "apps"); - -// Setup remote log -//rconsole = sca.defun(sca.reference(editWidget, "log"), "log"); - -/** - * The current app and component names. - */ -var appname = ui.queryParams()['app']; -var compname = ''; - -/** - * The current app composite and corresponding saved XML content. - */ -var savedcomposxml = ''; -var composite; - -/** - * Return the composite in an ATOM entry. - */ -function atomcomposite(doc) { - var entry = atom.readATOMEntry(mklist(doc)); - if (isNil(entry)) - return mklist(); - var content = namedElementChild("'content", car(entry)); - if (content == null) - return mklist(); - return elementChildren(content); -} - -/** - * Get and display an app. - */ -function getapp(name, g) { - if (isNil(name)) - return; - apps.get(name, function(doc) { - composite = atomcomposite(doc); - if (isNil(composite)) { - - // Create a default empty composite if necessary - var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' + - 'targetNamespace="http://' + name + '" ' + - 'name="' + name + '">' + - '</composite>'; - composite = readXML(mklist(x)); - } - graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g); - - // Track the saved composite XML - savedcomposxml = car(writeXML(composite, false)); - - // Show the page - ui.showbody(); - }); -} - -/** - * Get and display a palette of components. - */ -function getpalette(name, g, bg, palette, gpalettes) { - if (isNil(name)) - return; - palettes.get(name, function(doc) { - gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0)); - graph.display(gpalettes[name], name == spalette? g : bg); - }); -} - -/** - * Install a palette, including a button to select the palette, and - * the palette content. - */ -function installpalette(name, pos, g, bg, palette, gpalettes) { - var b = graph.mkbutton(name, pos); - graph.display(mklist(b), g); - b.onclick = function() { - - // Display the selected palette - spalette = name; - for (var pn in gpalettes) - graph.display(gpalettes[pn], pn == spalette? g : bg); - } - getpalette(name, g, bg, palette, gpalettes); -} - -/** - * Handle save button click event. - */ -$('saveButton').onclick = function(e) { - return save(); -}; - -/** - * 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">' + - savedcomposxml + '</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(prop) { - if (savedcomposxml == car(writeXML(composite, false))) - return false; - $('saveButton').value = 'Save now'; - - // Save property changes right away - if (prop) - return save(); - - // Autosave other changes after 3 seconds - $('saveButton').value = 'Save now'; - setTimeout(function() { - if (savedcomposxml == car(writeXML(composite, false))) - return false; - return save(); - }, 3000); - return true; -} - -/** - * Return the link to a component value. - */ -function compvaluelink(appname, cname) { - if (cname == '' || isNil(cname)) - return ''; - 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 + '/data/?component=' + cname; - return link; -} - -/** - * Return the link to a component raw data. - */ -function compdebuglink(appname, cname) { - if (cname == '' || isNil(cname)) - return ''; - 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 + '/components/' + cname; - return link; -} - -/** - * Track whether we're always showing the result data of the selected component. - */ -var autoplay = true; - -/** - * Show the result data of a component. - */ -function showData(cname) { - var rframe = $('dataFrame'); - if (cname == '') { - rframe.src = ''; - return true; - } - rframe.src = compvaluelink(appname, cname); - return true; -} - -/** - * Handle a component select event. - */ -function oncompselect(appname, cname) { - if (cname == compname) - return true; - compname = cname; - var link = compvaluelink(appname, cname); - $('compValue').innerHTML = link != ''? '<input type="button" id="playButton" title="View the component value" style="font-weight: bold;" value="View" onclick="playcomp()"/>' : ''; - $('compDebug').innerHTML = link != ''? '<input type="button" id="debugButton" title="View the component raw data" style="font-weight: bold;" value="URL" onclick="debugcomp()"/>' : ''; - - if (autoplay) - return showData(cname); - return true; -} - -/** - * Play the current component. - */ -function playcomp() { - var link = compvaluelink(appname, compname); - return window.open(link, '_' + appname + '_' + compname); -} - -/** - * Debug the current component. - */ -function debugcomp() { - var link = compdebuglink(appname, compname); - return window.open(link, '_' + appname + '_' + compname); -} - -/** - * Handle autoplay on/off click event. - */ -$('autoplayButton').onclick = function(e) { - if (autoplay) { - autoplay = false; - showData(''); - $('autoplayButton').value = 'Preview is off'; - return true; - } - autoplay = true; - showData(compname); - $('autoplayButton').value = 'Preview is on'; - return true; -}; - -// Init the play app button - - -// Create editor graph area -var g = graph.mkgraph(graph.mkpath().move(0,40), $('compName'), $('propValue')); -var bg = graph.mkgroup(graph.mkpath()); - -// Install the palettes -var gpalettes = new Array(); -var spalette = 'control'; -var pos = graph.mkpath(); -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); -installpalette('talk', pos.rmove(0, 40), g, bg, spalette, gpalettes); -installpalette('social', pos.rmove(0, 40), g, bg, spalette, gpalettes); -installpalette('search', pos.rmove(0, 40), g, bg, spalette, gpalettes); -installpalette('database', 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('python', pos.rmove(0, 40), g, bg, spalette, gpalettes); - -// Get and display the current app -getapp(appname, g); - -</script> -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js index 38909756dc..2de6a40d6c 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -53,15 +53,15 @@ graph.colors.lightgray1 = '#dcdcdc' /** * Default positions and sizes. */ -var palcx = 250; -var trashcx = 230; +var palcx = 2500; +var trashcx = 2480; var proxcx = 20; var proxcy = 20; var buttoncx = 65; var buttoncy = 30; var curvsz = 6; var tabsz = 2; -var fontsz = ''; +var fontsz = '11px'; /** * Base path class. @@ -103,986 +103,520 @@ graph.BasePath = function() { }; /** - * Rendering functions that work both with VML and SVG. + * SVG rendering functions. */ +graph.svgns='http://www.w3.org/2000/svg'; + /** - * VML rendering. + * Make an SVG graph. */ -if (ui.isIE()) { - - graph.vmlns='urn:schemas-microsoft-com:vml'; - document.write('<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />'); +graph.mkgraph = function(pos, cvalue, cadd, cdelete) { + + // Create a div element to host the graph + var div = document.createElement('div'); + div.id = 'svgdiv'; + div.style.position = 'absolute'; + div.style.left = ui.pixpos(pos.xpos()); + div.style.top = ui.pixpos(pos.ypos()); + div.style.overflow = 'hidden'; + document.body.appendChild(div); + + // Create SVG element + var svg = document.createElementNS(graph.svgns, 'svg'); + svg.style.height = ui.pixpos(5000); + svg.style.width = ui.pixpos(5000); + div.appendChild(svg); + + // Track element dragging and selection + graph.dragging = null; + graph.selected = null; + cvalue.disabled = true; + cdelete.disabled = true; /** - * Make a VML graph. + * Find the first draggable element in a hierarchy of elements. */ - graph.mkgraph = function(pos, cname, pvalue) { - - // Create div element to host the graph - var div = document.createElement('div'); - div.id = 'vmldiv'; - div.style.position = 'absolute'; - div.style.left = pos.xpos(); - div.style.top = pos.ypos(); - document.body.appendChild(div); - - // Create a VML group - var vmlg = document.createElement('v:group'); - vmlg.style.width = 5000; - vmlg.style.height = 5000; - vmlg.coordsize = '5000,5000'; - div.appendChild(vmlg); - - // 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. - */ - function draggable(n) { - if (n == vmlg) - return null; - if (n.nodeName == 'group' && n.id != '') - return n; - return draggable(n.parentNode); - } - - /** - * Handle a mousedown event. - */ - vmlg.onmousedown = function() { - window.event.returnValue = false; - - // Find draggable element - graph.dragging = draggable(window.event.srcElement); - graph.selected = graph.dragging; - if (graph.dragging == null) { - - // Reset current selection - cname.value = ''; - cname.disabled = true; - pvalue.value = ''; - pvalue.disabled = true; - - // Trigger component select event - vmlg.oncompselect(''); - return false; - } - - // Clone component from the palette - var compos = scdl.composite(vmlg.compos); - if (graph.dragging.id.substring(0, 8) == 'palette:') { - graph.dragging = graph.clonepalette(graph.dragging, compos); - graph.selected = graph.dragging; - } - - // Cut wire to component - if (graph.dragging.parentNode != vmlg) - setElement(compos, graph.cutwire(graph.dragging, compos, vmlg)); + function draggable(n) { + if (n == div || n == svg || n == null) + return null; + if (n.nodeName == 'g' && !isNil(n.id) && n.id != '') + return n; + return draggable(n.parentNode); + } - // Bring component to the top - graph.bringtotop(graph.dragging, vmlg); + /** + * Handle a mouse down event. + */ + div.onmousedown = function(e) { - // Remember mouse position - graph.dragX = window.event.clientX; - graph.dragY = window.event.clientY; - vmlg.setCapture(); + // Find draggable component + graph.dragging = draggable(e.target); + graph.selected = graph.dragging; + if (graph.dragging == null) { - // 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); + // Reset current selection + cvalue.value = ''; + cvalue.disabled = true; + cdelete.disabled = true; // Trigger component select event - vmlg.oncompselect(vmlg.appname, graph.selected.id); - return false; - }; - - /** - * Handle a mouseup event. - */ - vmlg.onmouseup = function() { - if (graph.dragging == null) - return false; - - if (graph.dragging.parentNode == vmlg && graph.dragging.id.substring(0, 8) != 'palette:') { - var gpos = graph.relpos(graph.dragging); - if (gpos.xpos() >= trashcx) { - - // If component close enough to editing area, move it there - if (gpos.xpos() < palcx) - graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos())); - - // Add new dragged component to the composite - if (isNil(graph.dragging.compos)) { - var compos = scdl.composite(vmlg.compos); - setElement(compos, graph.addcomp(graph.dragging.comp, compos)); - graph.dragging.compos = vmlg.compos; - } - - // Update component position - setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, vmlg))); - - // Wire component to neighboring reference - if (!isNil(graph.dragging.svcpos)) { - var compos = scdl.composite(vmlg.compos); - setElement(compos, grah.clonerefs(graph.wire(graph.dragging, compos, vmlg))); - } - - } else { - - // Discard component dragged out of composite - vmlg.removeChild(graph.dragging); - if (!isNil(graph.dragging.compos)) { - var compos = scdl.composite(vmlg.compos); - setElement(compos, graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos)))); - } - - // 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(false); - } - - // Forget current dragged component - graph.dragging = null; - vmlg.releaseCapture(); - - // Refresh the composite - graph.refresh(vmlg); - return false; - }; + svg.oncompselect(''); + return true; + } - /** - * Handle a mousemove event. - */ - vmlg.onmousemove = function() { - if (graph.dragging == null) - return false; + // Clone component from the palette + var compos = scdl.composite(svg.compos); + if (graph.dragging.id.substring(0, 8) == 'palette:') { + graph.dragging = graph.clonepalette(graph.dragging, compos); + graph.selected = graph.dragging; - // Calculate new position of dragged element + // Move into the editing area and hide the palette var gpos = graph.relpos(graph.dragging); - var newX = gpos.xpos() + (window.event.clientX - graph.dragX); - var newY = gpos.ypos() + (window.event.clientY - graph.dragY); - if (newX >= 0) - graph.dragX = window.event.clientX; - else - newX = 0; - if (newY >= 0) - graph.dragY = window.event.clientY; - else - newY = 0; - - // Move the dragged element - graph.move(graph.dragging, graph.mkpath().move(newX, newY)); + graph.move(graph.dragging, graph.mkpath().move(gpos.xpos() + palcx, gpos.ypos())); + div.style.left = ui.pixpos(palcx * -1); + } - return false; - }; + // Cut wire to component + if (graph.dragging.parentNode != svg) + setElement(compos, graph.sortcompos(graph.cutwire(graph.dragging, compos, svg))); - /** - * Handle field on change events. - */ - cname.onchange = function() { - if (graph.selected == null) - return false; + // Bring component to the top + graph.bringtotop(graph.dragging, svg); - // 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)); + // Remember current mouse position + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + graph.dragX = pos.screenX; + graph.dragY = pos.screenY; - // Trigger component select event - vmlg.oncompselect(vmlg.appname, graph.selected.id); + // Update the component name and property value fields + cvalue.value = graph.hasproperty(graph.selected.comp)? graph.property(graph.selected.comp) : graph.selected.id; + cvalue.disabled = false; + cdelete.disabled = false; + + // Trigger component select event + svg.oncompselect(graph.selected.id); + + if (e.preventDefault) + e.preventDefault(); + else + e.returnValue = false; + return true; + }; - // Refresh the composite - graph.refresh(vmlg); + // Support touch devices + div.ontouchstart = div.onmousedown; - // Trigger composite change event - vmlg.oncomposchange(true); - return false; - }; + /** + * Handle a mouse up event. + */ + div.onmouseup = function(e) { + if (graph.dragging == null) + return true; - pvalue.onchange = function() { - if (graph.selected == null) - return false; + if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') { + var gpos = graph.relpos(graph.dragging); + if (gpos.xpos() >= trashcx) { - // 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); + // If component close enough to editing area, move it there + if (gpos.xpos() < palcx) + graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos())); - // Refresh the composite - graph.refresh(vmlg); + // Add new dragged component to the composite + if (isNil(graph.dragging.compos)) { + var compos = scdl.composite(svg.compos); + setElement(compos, graph.sortcompos(graph.addcomp(graph.dragging.comp, compos))); + graph.dragging.compos = svg.compos; + } - // Trigger composite change event - vmlg.oncomposchange(true); - return false; - }; + // Update component position + setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg))); - // Create hidden spans to help compute the width of - // 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' - if (fontsz != '') - graph.comptitlewidthdiv.style.fontSize = fontsz; - div.appendChild(graph.proptitlewidthdiv); - - return vmlg; - }; + // Wire component to neighboring reference + if (!isNil(graph.dragging.svcpos)) { + var compos = scdl.composite(svg.compos); + setElement(compos, graph.sortcompos(graph.clonerefs(graph.wire(graph.dragging, compos, svg)))); + } - /** - * Make a shape path. - */ - graph.mkpath = function() { - function Path() { - this.BasePath = graph.BasePath; - this.BasePath(); - - this.clone = function() { - return graph.mkpath().pos(this.xpos(), this.ypos()); - }; - - this.move = function(x, y) { - this.path += 'M ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.line = function(x, y) { - this.path += 'L ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.curve = function(x1, y1, x, y) { - this.path += 'QB ' + x1 + ',' + y1 + ',' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.end = function() { - this.path += 'X E'; - return this; - }; - } + } else { - return new Path(); - }; + // Discard component dragged out of composite + svg.removeChild(graph.dragging); + if (!isNil(graph.dragging.compos)) { + var compos = scdl.composite(svg.compos); + setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos))))); + } - /** - * Return an element representing a title. - */ - 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 (style != '') - title.style.cssText = style; - if (fontsz != '') - title.style.fontSize = fontsz; - var tnode = document.createTextNode(t); - title.appendChild(tnode); - return title; - }; + // Reset current selection + graph.selected = null; + cvalue.value = ''; + cvalue.disabled = true; + cdelete.disabled = true; - /** - * Return an element representing the title of a component. - */ - graph.comptitle = function(comp) { - 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), graph.compstyle(comp), pos); - }; + // Trigger component select event + svg.oncompselect(''); + } + } - /** - * Return the width of the title of a component. - */ - graph.comptitlewidth = function(comp) { - var t = graph.title(comp); - graph.comptitlewidthdiv.innerHTML = t; - var twidth = graph.comptitlewidthdiv.offsetWidth + 2; - graph.comptitlewidthdiv.innerHTML = ''; - return twidth; - }; + // Forget current dragged component + graph.dragging = null; - /** - * Return an element representing the value of a property. - */ - graph.proptitle = function(comp) { - 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.propertytitle(comp), graph.propstyle(comp), pos); - }; + // Refresh the composite + graph.refresh(svg); - /** - * Return the width of the value of a property. - */ - graph.proptitlewidth = function(comp) { - var t = graph.proptitle(comp); - graph.proptitlewidthdiv.innerHTML = t; - var twidth = graph.proptitlewidthdiv.offsetWidth + 4; - graph.proptitlewidthdiv.innerHTML = ''; - return twidth; + // Trigger composite change event + svg.oncomposchange(false); + return true; }; - /** - * Return an element representing the title of a reference. - */ - graph.reftitle = function(ref) { - return graph.mktitle(graph.title(ref), graph.refstyle(ref), graph.mkpath().move(25,25)); - }; + // Support touch devices + div.ontouchend = div.onmouseup; - /** - * Return the width of the title of a reference. - */ - graph.reftitlewidth = function(ref) { - var t = graph.title(ref); - graph.reftitlewidthdiv.innerHTML = t; - var twidth = graph.reftitlewidthdiv.offsetWidth; - graph.reftitlewidthdiv.innerHTML = ''; - return twidth; - }; + // Handle a mouse click event. + div.onclick = function(e) { + if (graph.dragging == null && (e.target == div || e.target == svg)) { - /** - * Return a node representing a component. - */ - graph.compnode = function(comp, cassoc, pos) { - - // Make the component and property title elements - var title = graph.comptitle(comp); - var prop = graph.proptitle(comp); - - // Compute the component shape path - var path = graph.comppath(comp, cassoc); - var d = path.str(); - - // Create the main component shape - var shape = document.createElement('v:shape'); - shape.style.width = 5000; - shape.style.height = 5000; - shape.coordsize = '5000,5000'; - shape.path = d; - shape.fillcolor = graph.color(comp); - shape.stroked = 'false'; - - // Create an overlay contour shape - var contour = document.createElement('v:shape'); - contour.style.width = 5000; - contour.style.height = 5000; - contour.coordsize = '5000,5000'; - contour.path = d; - contour.filled = 'false'; - contour.strokecolor = graph.colors.gray; - contour.strokeweight = '1'; - contour.style.left = 1; - contour.style.top = 1; - var stroke = document.createElement('v:stroke'); - stroke.opacity = '20%'; - contour.appendChild(stroke); - - // Create a group and add the component and contour shapes to it - var g = document.createElement('v:group'); - g.id = scdl.name(comp); - g.style.width = 5000; - g.style.height = 5000; - g.coordsize = '5000,5000'; - g.style.left = pos.xpos(); - g.style.top = pos.ypos(); - g.appendChild(shape); - shape.appendChild(title); - shape.appendChild(prop); - g.appendChild(contour) - - // Store the component and the positions of its services - // and references in the component shape - g.comp = comp; - g.refpos = reverse(path.refpos); - g.svcpos = reverse(path.svcpos); - - return g; - }; + // Dismiss the palette + if (ui.numpos(div.style.left) != (palcx * -1)) + div.style.left = ui.pixpos(palcx * -1); + } + return true; + } /** - * Return a graphical group. + * Handle a mouse move event. */ - graph.mkgroup = function(pos) { - var g = document.createElement('v:group'); - g.style.left = pos.xpos(); - g.style.top = pos.ypos(); - return g; - }; + window.onmousemove = function(e) { + if (graph.dragging == null) + return true; - /** - * Return a node representing a button. - */ - graph.mkbutton = function(t, pos) { - - // Make the title element - var title = graph.mktitle(t, '', graph.mkpath().move(4,4)); - - // Compute the path of the button shape - var path = graph.buttonpath().str(); - - // Create the main button shape - var shape = document.createElement('v:shape'); - shape.style.width = 5000; - shape.style.height = 5000; - shape.coordsize = '5000,5000'; - shape.path = path; - shape.fillcolor = graph.colors.lightgray; - shape.stroked = 'false'; - - // Create an overlay contour shape - var contour = document.createElement('v:shape'); - contour.style.width = 5000; - contour.style.height = 5000; - contour.coordsize = '5000,5000'; - contour.path = path; - contour.filled = 'false'; - contour.strokecolor = graph.colors.gray; - contour.strokeweight = '1'; - contour.style.left = 1; - contour.style.top = 1; - var stroke = document.createElement('v:stroke'); - stroke.opacity = '20%'; - contour.appendChild(stroke); - - // Create a group and add the button and contour shapes to it - var g = document.createElement('v:group'); - g.style.width = 5000; - g.style.height = 5000; - g.coordsize = '5000,5000'; - g.style.left = pos.xpos(); - g.style.top = pos.ypos(); - g.appendChild(shape); - shape.appendChild(title); - g.appendChild(contour) - return g; - }; + // Calculate new position of dragged element + var gpos = graph.relpos(graph.dragging); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var newX = gpos.xpos() + (pos.screenX - graph.dragX); + var newY = gpos.ypos() + (pos.screenY - graph.dragY); + if (newX >= 0) + graph.dragX = pos.screenX; + else + newX = 0; + if (newY >= 0) + graph.dragY = pos.screenY; + else + newY = 0; - /** - * Return the relative position of a node. - */ - graph.relpos = function(e) { - var curX = ui.csspos(e.style.left); - var curY = ui.csspos(e.style.top); - return graph.mkpath().move(curX, curY); - }; + // Move the dragged element + graph.move(graph.dragging, graph.mkpath().move(newX, newY)); - /** - * Move a node. - */ - graph.move = function(e, pos) { - e.style.left = pos.xpos(); - e.style.top = pos.ypos(); + return true; }; -} else { - - /** - * SVG rendering. - */ - graph.svgns='http://www.w3.org/2000/svg'; + // Support touch devices + div.ontouchmove = window.onmousemove; /** - * Make an SVG graph. + * Handle field on change events. */ - graph.mkgraph = function(pos, cname, pvalue) { - - // Create a div element to host the graph - var div = document.createElement('div'); - div.id = 'svgdiv'; - div.style.position = 'absolute'; - div.style.left = pos.xpos(); - div.style.top = pos.ypos(); - // -webkit-user-select: none; - document.body.appendChild(div); - - // Create SVG element - var svg = document.createElementNS(graph.svgns, 'svg'); - svg.style.height = 5000; - svg.style.width = 5000; - div.appendChild(svg); - - // 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. - */ - function draggable(n) { - if (n == svg) - return null; - if (n.nodeName == 'g' && n.id != '') - return n; - return draggable(n.parentNode); - } - - /** - * Handle a mouse down event. - */ - svg.onmousedown = function(e) { - if (e.preventDefault) - e.preventDefault(); - else - e.returnValue = false; - - // Find draggable component - graph.dragging = draggable(e.target); - graph.selected = graph.dragging; - if (graph.dragging == null) { - - // Reset current selection - cname.value = ''; - cname.disabled = true; - pvalue.value = ''; - pvalue.disabled = true; - - // Trigger component select event - svg.oncompselect(''); - return false; - } + cvalue.onchange = function() { + if (graph.selected == null) + return false; - // Clone component from the palette + // Change component name and refactor references to it + function changename() { var compos = scdl.composite(svg.compos); - if (graph.dragging.id.substring(0, 8) == 'palette:') { - graph.dragging = graph.clonepalette(graph.dragging, compos); - graph.selected = graph.dragging; - } + cvalue.value = graph.ucid(cvalue.value, compos); + graph.selected.id = cvalue.value; + setElement(compos, graph.sortcompos(graph.renamecomp(graph.selected.comp, compos, cvalue.value))); - // Cut wire to component - if (graph.dragging.parentNode != svg) - setElement(compos, graph.cutwire(graph.dragging, compos, svg)); - - // Bring component to the top - graph.bringtotop(graph.dragging, svg); - - // Remember current mouse position - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - graph.dragX = pos.screenX; - graph.dragY = pos.screenY; - - // 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); - return false; - }; - - // Support touch devices - svg.ontouchstart = svg.onmousedown; - - /** - * Handle a mouse up event. - */ - window.onmouseup = function(e) { - if (graph.dragging == null) - return false; - - if (graph.dragging.parentNode == svg && graph.dragging.id.substring(0, 8) != 'palette:') { - var gpos = graph.relpos(graph.dragging); - if (gpos.xpos() >= trashcx) { - - // If component close enough to editing area, move it there - if (gpos.xpos() < palcx) - graph.move(graph.dragging, graph.mkpath().move(palcx, gpos.ypos())); - - // Add new dragged component to the composite - if (isNil(graph.dragging.compos)) { - var compos = scdl.composite(svg.compos); - setElement(compos, graph.addcomp(graph.dragging.comp, compos)); - graph.dragging.compos = svg.compos; - } - - // Update component position - setElement(graph.dragging.comp, graph.movecomp(graph.dragging.comp, graph.abspos(graph.dragging, svg))); - - // Wire component to neighboring reference - if (!isNil(graph.dragging.svcpos)) { - var compos = scdl.composite(svg.compos); - setElement(compos, graph.clonerefs(graph.wire(graph.dragging, compos, svg))); - } - - } else { - - // Discard component dragged out of composite - svg.removeChild(graph.dragging); - if (!isNil(graph.dragging.compos)) { - var compos = scdl.composite(svg.compos); - setElement(compos, graph.clonerefs(graph.gcollect(graph.removecomp(graph.dragging.comp, compos)))); - } - - // Reset current selection - graph.selected = null; - cname.value = ''; - cname.disabled = true; - pvalue.value = ''; - pvalue.disabled = true; - - // Trigger component select event - svg.oncompselect(''); - } - } - - // Forget current dragged component - graph.dragging = null; + svg.oncompselect(graph.selected.id); // Refresh the composite graph.refresh(svg); // Trigger composite change event - svg.oncomposchange(false); + svg.oncomposchange(true); return false; - }; + } - // Support touch devices - window.top.onmouseup = window.onmouseup; - window.ontouchend = window.onmouseup; - window.gestureend = window.onmouseup; - window.top.gestureend = window.onmouseup; - window.top.ontouchend = window.onmouseup; - window.ontouchcancel = window.onmouseup; - window.top.ontouchcancel = window.onmouseup; + // Change the component property value + function changeprop() { + graph.setproperty(graph.selected.comp, cvalue.value); + cvalue.value = graph.property(graph.selected.comp); + cvalue.disabled = !graph.hasproperty(graph.selected.comp); - /** - * Handle a mouse move event. - */ - window.onmousemove = function(e) { - if (graph.dragging == null) - return false; - if (e.preventDefault) - e.preventDefault(); - else - e.returnValue = false; - - // Calculate new position of dragged element - var gpos = graph.relpos(graph.dragging); - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - var newX = gpos.xpos() + (pos.screenX - graph.dragX); - var newY = gpos.ypos() + (pos.screenY - graph.dragY); - if (newX >= 0) - graph.dragX = pos.screenX; - else - newX = 0; - if (newY >= 0) - graph.dragY = pos.screenY; - else - newY = 0; - - // Move the dragged element - graph.move(graph.dragging, graph.mkpath().move(newX, newY)); + // Refresh the composite + graph.refresh(svg); + // Trigger composite change event + svg.oncomposchange(true); return false; - }; - - // Support touch devices - window.top.onmousemove = window.onmousemove; - window.ontouchmove = window.onmousemove; - window.top.ontouchmove = window.onmousemove; + } - /** - * Handle field on change events. - */ - cname.onchange = function() { - if (graph.selected == null) - return false; + return graph.hasproperty(graph.selected.comp)? changeprop() : changename(); + }; + + // Handle delete event + cdelete.onclick = function() { + if (graph.selected == null) + return false; + if (graph.selected.id.substring(0, 8) != 'palette:' && !isNil(graph.selected.compos)) { - // Change component name and refactor references to it + // Remove selected component var compos = scdl.composite(svg.compos); - cname.value = graph.ucid(cname.value, compos); - graph.selected.id = cname.value; - setElement(compos, graph.renamecomp(graph.selected.comp, compos, cname.value)); + setElement(compos, graph.sortcompos(graph.clonerefs(graph.gcollect(graph.removecomp(graph.selected.comp, compos))))); - // Trigger component select event - svg.oncompselect(svg.appname, graph.selected.id); + // Reset current selection + graph.selected = null; + cvalue.value = ''; + cvalue.disabled = true; + cdelete.disabled = true; // Refresh the composite graph.refresh(svg); + // Trigger component select event + svg.oncompselect(''); + // Trigger composite change event svg.oncomposchange(true); - return false; - }; - - pvalue.onchange = function() { - if (graph.selected == null) - return false; + } + return false; + }; - // 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); + // Handle add event + cadd.onclick = function() { - // Refresh the composite - graph.refresh(svg); + // Show the palette + div.style.left = ui.pixpos(0); + return false; + }; - // Trigger composite change event - svg.oncomposchange(true); - return false; + // Create a hidden SVG element to help compute the width + // of component and reference titles + graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); + graph.titlewidthsvg.style.visibility = 'hidden'; + graph.titlewidthsvg.style.height = ui.pixpos(0); + graph.titlewidthsvg.style.width = ui.pixpos(0); + div.appendChild(graph.titlewidthsvg); + + return svg; +}; + +/** + * Make a path. + */ +graph.mkpath = function() { + function Path() { + this.BasePath = graph.BasePath; + this.BasePath(); + + this.clone = function() { + return graph.mkpath().pos(this.xpos(), this.ypos()); }; - // Create a hidden SVG element to help compute the width - // of component and reference titles - graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); - graph.titlewidthsvg.style.visibility = 'hidden'; - graph.titlewidthsvg.style.height = 0; - graph.titlewidthsvg.style.width = 0; - div.appendChild(graph.titlewidthsvg); + this.move = function(x, y) { + this.path += 'M' + x + ',' + y + ' '; + return this.pos(x, y); + }; - return svg; - }; + this.line = function(x, y) { + this.path += 'L' + x + ',' + y + ' '; + return this.pos(x, y); + }; - /** - * Make a path. - */ - graph.mkpath = function() { - function Path() { - this.BasePath = graph.BasePath; - this.BasePath(); - - this.clone = function() { - return graph.mkpath().pos(this.xpos(), this.ypos()); - }; - - this.move = function(x, y) { - this.path += 'M' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.line = function(x, y) { - this.path += 'L' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.curve = function(x1, y1, x, y) { - this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' '; - return this.pos(x, y); - }; - - this.end = function() { - this.path += 'Z'; - return this; - }; - } + this.curve = function(x1, y1, x, y) { + this.path += 'Q' + x1 + ',' + y1 + ' ' + x + ',' + y + ' '; + return this.pos(x, y); + }; - return new Path(); - }; + this.end = function() { + this.path += 'Z'; + return this; + }; + } - /** - * Return an element representing a title. - */ - graph.mktitle = function(t, style) { - var title = document.createElementNS(graph.svgns, 'text'); - title.setAttribute('x', 5); - title.setAttribute('y', 15); - title.setAttribute('text-anchor', 'start'); - if (style != '') - title.style.cssText = style; - if (fontsz != '') - title.style.fontSize = fontsz; - title.appendChild(document.createTextNode(t)); - return title; - }; + return new Path(); +}; - /** - * Return an element representing the title of a component. - */ - graph.comptitle = function(comp) { - return graph.mktitle(graph.title(comp), graph.compstyle(comp)); - }; +/** + * Return an element representing a title. + */ +graph.mktitle = function(t, style) { + var title = document.createElementNS(graph.svgns, 'text'); + title.setAttribute('x', 5); + title.setAttribute('y', 15); + title.setAttribute('text-anchor', 'start'); + if (style != '') + title.style.cssText = style; + if (fontsz != '') + title.style.fontSize = fontsz; + title.style.cursor = 'default'; + title.appendChild(document.createTextNode(t)); + return title; +}; - /** - * Return the width of the title of a component. - */ - graph.comptitlewidth = function(comp) { - var title = graph.comptitle(comp); - graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width + 2; - graph.titlewidthsvg.removeChild(title); - return width; - }; +/** + * Return an element representing the title of a component. + */ +graph.comptitle = function(comp) { + return graph.mktitle(graph.title(comp), graph.compstyle(comp)); +}; - /** - * Return an element representing the title of a reference. - */ - graph.reftitle = function(ref) { - return graph.mktitle(graph.title(ref), graph.refstyle(ref)); - }; +/** + * Return the width of the title of a component. + */ +graph.comptitlewidth = function(comp) { + var title = graph.comptitle(comp); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width + 2; + graph.titlewidthsvg.removeChild(title); + return width; +}; - /** - * Return the width of the title of a reference. - */ - graph.reftitlewidth = function(ref) { - var title = graph.reftitle(ref); - graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width; - graph.titlewidthsvg.removeChild(title); - return width; - }; +/** + * Return an element representing the title of a reference. + */ +graph.reftitle = function(ref) { + return graph.mktitle(graph.title(ref), graph.refstyle(ref)); +}; - /** - * Return an element representing the value of a property. - */ - graph.proptitle = function(comp) { - var title = graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp)); - title.setAttribute('x', graph.comptitlewidth(comp) + 7); - return title; - }; +/** + * Return the width of the title of a reference. + */ +graph.reftitlewidth = function(ref) { + var title = graph.reftitle(ref); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width; + graph.titlewidthsvg.removeChild(title); + return width; +}; - /** - * Return the width of the title of a property. - */ - graph.proptitlewidth = function(comp) { - var title = graph.proptitle(comp); - graph.titlewidthsvg.appendChild(title); - var width = title.getBBox().width + 4; - graph.titlewidthsvg.removeChild(title); - return width; - }; +/** + * Return an element representing the value of a property. + */ +graph.proptitle = function(comp) { + var title = graph.mktitle(graph.propertytitle(comp), graph.propstyle(comp)); + title.setAttribute('x', graph.comptitlewidth(comp) + 7); + return title; +}; - /** - * Return a node representing a component. - */ - graph.compnode = function(comp, cassoc, pos) { - - // Make the component and property title elements - var title = graph.comptitle(comp); - var prop = graph.proptitle(comp); - - // Compute the path of the component shape - var path = graph.comppath(comp, cassoc); - var d = path.str(); - - // Create the main component shape - var shape = document.createElementNS(graph.svgns, 'path'); - shape.setAttribute('d', d); - shape.setAttribute('fill', graph.color(comp)); - shape.setAttribute('fill-opacity', '0.60'); - - // Create an overlay contour shape - var contour = document.createElementNS(graph.svgns, 'path'); - contour.setAttribute('d', d); - contour.setAttribute('fill', 'none'); - contour.setAttribute('stroke', graph.colors.gray); - contour.setAttribute('stroke-width', '3'); - contour.setAttribute('stroke-opacity', '0.20'); - contour.setAttribute('transform', 'translate(1,1)'); - - // Create a group and add the component and contour shapes to it. - var g = document.createElementNS(graph.svgns, 'g'); - g.id = scdl.name(comp); - g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); - g.appendChild(shape); - g.appendChild(contour); - g.appendChild(title); - g.appendChild(prop); - - // Store the component and the positions of its services - // and references in the component shape - g.comp = comp; - g.refpos = reverse(path.refpos); - g.svcpos = reverse(path.svcpos); - - return g; - }; +/** + * Return the width of the title of a property. + */ +graph.proptitlewidth = function(comp) { + var title = graph.proptitle(comp); + graph.titlewidthsvg.appendChild(title); + var width = title.getBBox().width + 4; + graph.titlewidthsvg.removeChild(title); + return width; +}; - /** - * Return a graphical group. - */ - graph.mkgroup = function(pos) { - var g = document.createElementNS(graph.svgns, 'g'); - g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); - return g; - }; +/** + * Return a node representing a component. + */ +graph.compnode = function(comp, cassoc, pos) { + + // Make the component and property title elements + var title = graph.comptitle(comp); + var prop = graph.proptitle(comp); + + // Compute the path of the component shape + var path = graph.comppath(comp, cassoc); + var d = path.str(); + + // Create the main component shape + var shape = document.createElementNS(graph.svgns, 'path'); + shape.setAttribute('d', d); + shape.setAttribute('fill', graph.color(comp)); + shape.setAttribute('fill-opacity', '0.60'); + + // Create an overlay contour shape + var contour = document.createElementNS(graph.svgns, 'path'); + contour.setAttribute('d', d); + contour.setAttribute('fill', 'none'); + contour.setAttribute('stroke', graph.colors.gray); + contour.setAttribute('stroke-width', '3'); + contour.setAttribute('stroke-opacity', '0.20'); + contour.setAttribute('transform', 'translate(1,1)'); + + // Create a group and add the component and contour shapes to it. + var g = document.createElementNS(graph.svgns, 'g'); + g.id = scdl.name(comp); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + g.appendChild(prop); + + // Store the component and the positions of its services + // and references in the component shape + g.comp = comp; + g.refpos = reverse(path.refpos); + g.svcpos = reverse(path.svcpos); - /** - * Return a node representing a button. - */ - graph.mkbutton = function(t, pos) { - - // Make the button title - var title = graph.mktitle(t, ''); - - // Compute the path of the button shape - var path = graph.buttonpath().str(); - - // Create the main button shape - var shape = document.createElementNS(graph.svgns, 'path'); - shape.setAttribute('d', path); - shape.setAttribute('fill', graph.colors.lightgray); - shape.setAttribute('fill-opacity', '0.60'); - - // Create an overlay contour shape - var contour = document.createElementNS(graph.svgns, 'path'); - contour.setAttribute('d', path); - contour.setAttribute('fill', 'none'); - contour.setAttribute('stroke', graph.colors.gray); - contour.setAttribute('stroke-width', '3'); - contour.setAttribute('stroke-opacity', '0.20'); - contour.setAttribute('transform', 'translate(1,1)'); - - // Create a group and add the button and contour shapes to it - var g = document.createElementNS(graph.svgns, 'g'); - g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); - g.appendChild(shape); - g.appendChild(contour); - g.appendChild(title); - return g; - }; + return g; +}; - /** - * Return the relative position of a node. - */ - graph.relpos = function(e) { - var pmatrix = e.parentNode.getCTM(); - var matrix = e.getCTM(); - var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e); - var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f); - return graph.mkpath().move(curX, curY); - }; +/** + * Return a graphical group. + */ +graph.mkgroup = function(pos) { + var g = document.createElementNS(graph.svgns, 'g'); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + return g; +}; - /** - * Move a node. - */ - graph.move = function(e, pos) { - e.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); - }; +/** + * Return a node representing a button. + */ +graph.mkbutton = function(t, pos) { + + // Make the button title + var title = graph.mktitle(t, ''); + + // Compute the path of the button shape + var path = graph.buttonpath().str(); + + // Create the main button shape + var shape = document.createElementNS(graph.svgns, 'path'); + shape.setAttribute('d', path); + shape.setAttribute('fill', graph.colors.lightgray); + shape.setAttribute('fill-opacity', '0.60'); + + // Create an overlay contour shape + var contour = document.createElementNS(graph.svgns, 'path'); + contour.setAttribute('d', path); + contour.setAttribute('fill', 'none'); + contour.setAttribute('stroke', graph.colors.gray); + contour.setAttribute('stroke-width', '3'); + contour.setAttribute('stroke-opacity', '0.20'); + contour.setAttribute('transform', 'translate(1,1)'); + + // Create a group and add the button and contour shapes to it + var g = document.createElementNS(graph.svgns, 'g'); + g.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); + g.appendChild(shape); + g.appendChild(contour); + g.appendChild(title); + return g; +}; + +/** + * Return the relative position of a node. + */ +graph.relpos = function(e) { + var pmatrix = e.parentNode.getCTM(); + var matrix = e.getCTM(); + var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e); + var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f); + return graph.mkpath().move(curX, curY); +}; + +/** + * Move a node. + */ +graph.move = function(e, pos) { + e.setAttribute('transform', 'translate(' + pos.xpos() + ',' + pos.ypos() + ')'); }; /** @@ -1725,11 +1259,46 @@ graph.clonepalette = function(e, compos) { * Move a SCDL component to the given position. */ graph.movecomp = function(comp, pos) { + if (isNil(pos)) + return append(mklist(element, "'component"), + filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp))); return append(mklist(element, "'component", mklist(attribute, "'t:x", '' + (pos.xpos() - palcx)), mklist(attribute, "'t:y", '' + pos.ypos())), filter(function(e) { return !(isAttribute(e) && (attributeName(e) == "'t:x" || attributeName(e) == "'t:y")); }, elementChildren(comp))); }; /** + * Sort elements of a composite. + */ +graph.sortcompos = function(compos) { + return append(mklist(element, "'composite"), elementChildren(compos).sort(function(a, b) { + + // Sort attributes, place them at the top + var aa = isAttribute(a); + var ba = isAttribute(b); + if (aa && !ba) return -1; + if (!aa && ba) return 1; + if (aa && ba) { + var aan = attributeName(a); + var ban = attributeName(b); + if (aan < ban) return -1; + if (aan > ban) return 1; + return 0; + } + + // Sort elements, place services before components + var aen = elementName(a); + var ben = elementName(b); + if (aen == "'service" && ben == "'component") return -1; + if (aen == "'component" && ben == "'service") return 1; + var an = scdl.name(a); + var bn = scdl.name(b); + if (an < bn) return -1; + if (an > bn) return 1; + return 0; + })); +} + +/** * Add a component to a SCDL composite. */ graph.addcomp = function(comp, compos) { @@ -1865,7 +1434,7 @@ graph.cutwire = function(node, compos, g) { var name = scdl.name(comp); var prom = mklist(element, "'service", mklist(attribute, "'name", name), mklist(attribute, "'promote", name)); return append(mklist(element, "'composite"), - append(filter(function(c) { return !(isElement(c) && scdl.name(c) == name); }, elementChildren(compos)), mklist(prom, comp))); + append(mklist(prom), filter(function(c) { return !(isElement(c) && elementName(c) == "'service" && scdl.name(c) == name); }, elementChildren(compos)))); } /** @@ -1933,6 +1502,7 @@ graph.wire = function(n, compos, g) { // Wire component to that reference, un-promote it, and // update the SCDL reference and composite + setElement(n.comp, graph.movecomp(graph.dragging.comp, null)); n.compos = null; setElement(car(cref), append(mklist(element, "'reference", mklist(attribute, "'target", scdl.name(n.comp))), elementChildren(car(cref)))); var name = scdl.name(n.comp); @@ -1981,6 +1551,10 @@ graph.edit = function(appname, compos, nodes, onchange, onselect, g) { g.appname = appname; g.compos = compos; + // Sort the composite elements now to allow for change detection later + var scompos = scdl.composite(g.compos); + setElement(scompos, graph.sortcompos(scompos)); + // Store event listeners g.oncomposchange = onchange; g.oncompselect = onselect; diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html index c86b1ef6c1..942433235c 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -18,25 +19,50 @@ --> <html> <head> -<title>App</title> +<title></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"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> +<script type="text/javascript" src="graph.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1><span id="h1"></span><span id="appNameHeader"></span></h1> -<br/> +<table style="width: 100%;"> +<tr> +<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td> +<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td> +</tr> +</table> + +<table style="width: 100%;"> +<tr> +<th class="thr thl" style="padding-left: 2px; padding-right: 2px;"> +<input id="compValue" type="text" value="" title="Component value" placeholder="Name" style="position: relative; width: 170px;"/> +<span id="deleteComponentButton" title="Delete a component" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span> +<span id="addComponentButton" title="Add a component" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span> +<span id="playComponentButton" title="View component value" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">></span> +</th> +</tr> +</table> + +<div id="dataDiv" style="position:absolute; top: 95px; left: 0px; right: 0px; height: 5000px; visibility: hidden"> +</div> -<div id="graph"></div> +</div> <script type="text/javascript"> +// Get the app name +var appname = ui.queryParams()['app']; +if (isNil(appname)) + window.open('/', '_self'); /** * Return the link to an app. @@ -51,31 +77,275 @@ function applink(appname) { return link; } -// Get the app name -var appname = ui.queryParams()['app']; - -// Update the window title +// Set page titles 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); +displaymenu(); + +// Show the page +ui.showbody(); + +// Init componnent references +var editWidget = sca.component("EditWidget"); +var palettes = sca.reference(editWidget, "palettes"); +var composites = sca.reference(editWidget, "composites"); + +// Setup remote log +//rconsole = sca.defun(sca.reference(editWidget, "log"), "log"); + +/** + * The current app composite, corresponding saved XML content and component name. + */ +var savedcomposxml = ''; +var composite; +var compname = ''; + +/** + * Track the composition graph and whether it's visible or not. + */ +var g; +var gdiv; +var bg; +var gvisible = true; + +// Track the palettes +var gpalettes = new Array(); +var spalette = 'control'; + +/** + * Return the composite in an ATOM entry. + */ +function atomcomposite(doc) { + var entry = atom.readATOMEntry(mklist(doc)); + if (isNil(entry)) + return mklist(); + var content = namedElementChild("'content", car(entry)); + if (content == null) + return mklist(); + return elementChildren(content); +} /** - * Display the editor for an app. + * Get and display an app. */ -function editapp(name) { +function getapp(name, g) { + if (isNil(name)) + return false; + return composites.get(name, function(doc) { + composite = atomcomposite(doc); + if (isNil(composite)) { + + // Create a default empty composite if necessary + var x = '<composite xmlns="http://docs.oasis-open.org/ns/opencsa/sca/200912" xmlns:t="http://tuscany.apache.org/xmlns/sca/1.1"' + + 'targetNamespace="http://app" name="app"></composite>'; + composite = readXML(mklist(x)); + } + graph.edit(name, composite, graph.composite(composite, graph.mkpath().move(palcx,0)), oncomposchange, oncompselect, g); + + // Track the saved composite XML + savedcomposxml = car(writeXML(composite, false)); + return true; + }); +} + +/** + * Display a palette. Get it from the server if needed. + */ +function displaypalette(name, g, palette, gpalettes) { if (isNil(name)) return; - $('graph').innerHTML = - '<iframe id="graphFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="graph.html?' + - 'app=' + name + - '"></iframe>'; + if (isNil(gpalettes[name])) { + + // Get the palette from the server + var doc = palettes.get(name); + gpalettes[name] = graph.composite(atomcomposite(doc), graph.mkpath().move(80,0)); + } + graph.display(gpalettes[name], g); + return true; +} + +/** + * Install a palette, including a button to select the palette, and + * the palette content. + */ +function installpalette(name, pos, g, bg, palette, gpalettes) { + var b = graph.mkbutton(name, pos); + graph.display(mklist(b), g); + b.onclick = function(e) { + + // Swap the selected palette + displaypalette(spalette, bg, palette, gpalettes); + spalette = name; + return displaypalette(spalette, g, palette, gpalettes); + }; + + if (name != spalette) { + + // Will get the palette from the server later if needed + gpalettes[name] = null; + return true; + } + + // Display the selected palette + return displaypalette(name, g, palette, gpalettes); +} + +/** + * Save the current composite. + */ +function save(savexml) { + $('saveStatus').innerHTML = 'Saving'; + savedcomposxml = savexml; + var entry = '<entry xmlns="http://www.w3.org/2005/Atom">' + + '<title type="text">' + appname + '</title><id>' + appname + '</id><content type="application/xml">' + + savedcomposxml + '</content></entry>'; + composites.put(appname, entry); + $('saveStatus').innerHTML = 'Saved'; + return true; +} + +/** + * Handle a composite change event. + */ +function oncomposchange(prop) { + var newxml = car(writeXML(composite, false)); + if (savedcomposxml == newxml) + return false; + $('saveStatus').innerHTML = 'Modified'; + + // Save property changes right away + if (prop) + return save(newxml); + + // Autosave other changes after 3 seconds + $('saveStatus').innerHTML = 'Modified'; + setTimeout(function() { + var savexml = car(writeXML(composite, false)); + if (savedcomposxml == savexml) { + $('saveStatus').innerHTML = 'Saved'; + return false; + } + return save(savexml); + }, 1000); + return true; +} + +/** + * Return the link to a component value. + */ +function compvaluelink(appname, cname) { + if (cname == '' || isNil(cname)) + return ''; + 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 + '/data/?component=' + cname; + return link; +} + +/** + * Return the link to a component raw data. + */ +function compdebuglink(appname, cname) { + if (cname == '' || isNil(cname)) + return ''; + 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 + '/components/' + cname; + return link; +} + +/** + * Handle a component select event. + */ +function oncompselect(cname) { + if (cname == compname) + return true; + compname = cname; + var link = compvaluelink(appname, cname); + + function updateButton(b, v) { + b.style.color = v? '#000000' : '#808080'; + } + + updateButton($('deleteComponentButton'), link != ''); + updateButton($('playComponentButton'), link != ''); + return true; +} + +/** + * Show the result data of a component. + */ +function showdata(cname) { + if (!gvisible) + return true; + gvisible = false; + $('playComponentButton').innerHTML = '<'; + gdiv.style.visibility = 'hidden' + var rdiv = $('dataDiv'); + rdiv.style.visibility = 'visible'; + rdiv.innerHTML = '<iframe id="dataFrame" style="position: relative; height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="' + + compvaluelink(appname, cname) + '"></iframe>'; + return true; +} + +/** + * Show the composition graph. + */ +function showgraph() { + if (gvisible) + return true; + gvisible = true; + $('playComponentButton').innerHTML = '>'; + var rdiv = $('dataDiv'); + rdiv.style.visibility = 'hidden'; + rdiv.innerHTML = ''; + gdiv.style.visibility = 'visible' + return true; } -// Display the editor for the current app -editapp(appname); +/** + * Play the current component. + */ +$('playComponentButton').onclick = function() { + if (compname == '') + return false; + if (!gvisible) + return showgraph(); + return showdata(compname); +} + +// Create editor graph area +g = graph.mkgraph(graph.mkpath().move(-2500,95), $('compValue'), $('addComponentButton'), $('deleteComponentButton')); +gdiv = g.parentNode; +bg = graph.mkgroup(graph.mkpath()); + +// Install the palettes +var pos = graph.mkpath(); +installpalette('control', pos.rmove(5,0), g, bg, spalette, gpalettes); +installpalette('values', pos.rmove(0,35), g, bg, spalette, gpalettes); +installpalette('lists', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('transform', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('text', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('http', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('talk', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('social', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('search', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('database', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('logic', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('math', pos.rmove(0, 35), g, bg, spalette, gpalettes); +installpalette('python', pos.rmove(0, 35), g, bg, spalette, gpalettes); + +// Get and display the current app +getapp(appname, g); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/index.html b/sca-cpp/trunk/modules/edit/htdocs/index.html index 266c696267..68aa6f7f7b 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -16,41 +17,62 @@ * specific language governing permissions and limitations * under the License. --> -<html manifest="cache-manifest.cmf"> +<html manifest="/cache-manifest.cmf"> <head> <title>Home</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"/> +<link rel="stylesheet" type="text/css" href="/ui-min.css"/> <script type="text/javascript" src="/config.js"></script> -<script type="text/javascript" src="/util.js"></script> -<script type="text/javascript"> -document.title = windowtitle(window.location.hostname); -</script> -<script type="text/javascript" src="/ui.js"></script> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> <br/> -<div id="main"></div> +<div style="margin-left: auto; margin-right: auto; text-align: center;"> -<script type="text/javascript"> +<h1><span id="maintitle"><span></h1> +<br/><br/><br/><br/> + +<div id="maindiagram"></div> +<br/><br/><br/><br/> + +<input type="button" class="greenbutton" style="font-size: 150%; font-weight: bold; font-style: italic; padding: 10px;" id="getstarted" title="Get Started" value="Get Started"/> +<br/><br/><br/> +<div>Safari, Chrome, Firefox only for now.</div> + +</div> + +</div> + +<script type="text/javascript"> +// Set page titles +document.title = windowtitle(window.location.hostname); $('h1').innerHTML = hometitle(window.location.hostname); -// Load the menu bar -ui.loadwidget('menu', '/menu.html', ui.showbody); +// Display the menu bar +displaymenu(); -// Load the main page -ui.loadiframe('main', 'main.html'); +$('maintitle').innerHTML = isNil(config.maintitle)? 'Simple App Builder' : config.maintitle; +$('maindiagram').innerHTML = isNil(config.maindiagram)? '<< insert diagram here >>' : config.maindiagram; +$('getstarted').onclick = function() { + return window.open('/store/', '_self'); +}; +// Show the page +ui.showbody(); </script> </body> </html> - diff --git a/sca-cpp/trunk/modules/edit/htdocs/login/index.html b/sca-cpp/trunk/modules/edit/htdocs/login/index.html index 165838be82..618a9eed7a 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/login/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/login/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -23,20 +24,19 @@ <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> +<link rel="stylesheet" type="text/css" href="/ui-min.css"/> +<script type="text/javascript" src="/all-min.js"></script> </head> -<body> +<body onorientationchange="ui.reload();"> <h1>Sign in</h1> -<br/> -<form name="formSignin" method="POST" action="/login/dologin/"> +<form name="formSignin" onsubmit="submitSignin();" method="POST" action="/login/dologin/"> <table border="0"> -<tr><td>Username:</td><td><input type="text" id="httpd_username" name="httpd_username" value=""/></td></tr> -<tr><td>Password:</td><td><input type="password" name="httpd_password" value=""/></td></tr> -<tr><td><input type="submit" onclick="submitFormSignin()" value="Sign in"/></td><td></td></tr> +<tr><td><b>Username:</b></td></tr> +<tr><td><input type="text" id="httpd_username" name="httpd_username" value="" size="15" placeholder="Enter your user name" style="width: 300px;"/></td></tr> +<tr><td><b>Password:</b></td></tr> +<tr><td><input type="password" name="httpd_password" value="" size="15" placeholder="Enter your password" style="width: 300px;"/></td></tr> +<tr><td><input type="submit" value="Sign in" class="greenbutton" style="font-weight: bold;"/></td><td></td></tr> </table> <input type="hidden" name="httpd_location" value="/"/> </form> @@ -66,14 +66,13 @@ function oauthReferrer() { return r; } -function submitFormSignin() { +function submitSignin() { var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE'; document.cookie = reset; document.formSignin.httpd_location.value = oauthReferrer(); document.formSignin.submit(); } -$('httpd_username').focus(); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html index 84aa08ef80..7c326463cf 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/logout/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/logout/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -23,17 +24,14 @@ <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> +<link rel="stylesheet" type="text/css" href="/ui-min.css"/> +<script type="text/javascript" src="/all-min.js"></script> </head> -<body> +<body onorientationchange="ui.reload();"> <h1>Sign out</h1> -<br/> -<form name="signout" action="/" method="GET"> -<input type="submit" onclick="submitSignout()" id="signOut" value="Sign out"/> +<form name="signout" onsubmit="submitSignout();" action="/" method="GET"> +<input type="submit" id="signOut" value="Sign out" class="greenbutton" style="font-weight: bold"/> </form> <script type="text/javascript"> @@ -44,7 +42,6 @@ function submitSignout() { return true; } -$('signOut').focus(); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/main.html b/sca-cpp/trunk/modules/edit/htdocs/main.html deleted file mode 100644 index 9555e8a54d..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/main.html +++ /dev/null @@ -1,64 +0,0 @@ -<!-- - * 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="/ui.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<div style="margin-left: auto; margin-right: auto; text-align: center;"> - -<h2><span id="maintitle"><span></h2> -<br/><br/><br/><br/> - -<!-- -<a href="/dash/" target="_parent"><img src="home.png" width="426" height="145" style="width: 426px; height: 145px;"/></a> -<br/><br/> ---> - -<div id="maindiagram"></div> -<br/><br/><br/><br/> - -<h1><a id="getstarted" href="">Get Started</a></h1> - -<br/><br/><br/> -<div>Safari, Chrome, Firefox only for now.</div> - -</div> - -</div> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -$('maintitle').innerHTML = isNil(config.maintitle)? 'Simple App Builder' : config.maintitle; -$('maindiagram').innerHTML = isNil(config.maindiagram)? '<< insert diagram here >>' : config.maindiagram; -$('getstarted').href = ui.href('/store/', '_parent'); - -ui.showbody(); - -</script> - -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html deleted file mode 100644 index 8cdeddb1dc..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/menu.html +++ /dev/null @@ -1,71 +0,0 @@ -<!-- - * 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="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -</head> -<body> -<div id="menu"></div> - -<script type="text/javascript"> -ui.installwidget(); - -var menuWidget = sca.component("MenuWidget"); -var user = sca.defun(sca.reference(menuWidget, "user"), "id"); - -/** - * Display the current signed in user. - */ -function userMenu() { - function UserMenu() { - this.content = function() { - u = user.id() - return '<span>' + u + '</span>'; - }; - } - return new UserMenu(); -} - -/** - * Return the current app name. - */ -function appname() { - return ui.queryParams()['app']; -} - -// Display the menu bar -var mdiv = $('menu'); -var name = appname(); - -mdiv.innerHTML = ui.menubar( - 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/'))); - -</script> -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.js b/sca-cpp/trunk/modules/edit/htdocs/menu.js new file mode 100644 index 0000000000..2b30a6f6b8 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/menu.js @@ -0,0 +1,52 @@ +/* + * 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. + */ + +var menuWidget = sca.component("MenuWidget"); +var userService = sca.defun(sca.reference(menuWidget, "user"), "id"); + +/** + * Display the current signed in user. + */ +function userMenu() { + function UserMenu() { + this.content = function() { + u = userService.id() + return '<span>' + u + '</span>'; + }; + } + return new UserMenu(); +} + +/** + * Display the menu bar. + */ +function displaymenu() { + var mdiv = $('menu'); + var name = ui.queryParams()['app']; + + mdiv.innerHTML = ui.menubar( + 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', '/stats/?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 bcda316504..b498e8d77c 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -23,21 +24,78 @@ <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"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> +<script type="text/javascript" src="page.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1><span id="h1"></span><span id="appNameHeader"></span></h1> -<br/> +<table style="width: 100%;"> +<tr> +<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td> +<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td> +</tr> +</table> + +<table style="width: 100%;"> +<tr> +<th class="thr thl" style="padding-left: 2px; padding-right: 2px;"> +<input id="widgetName" type="text" value="" title="Widget name" placeholder="Name" style="position: relative; width: 65px;"/> +<input id="widgetText" type="text" value="" title="Widget text" placeholder="Text" style="position: relative; width: 120px;"/> +<span id="deleteWidgetButton" title="Delete a Widget" class="redbutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">-</span> +<span id="addWidgetButton" title="Add a Widget" class="greenbutton" style="font-weight: bold; font-size: 16px; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">+</span> +<!-- +<span id="playWidgetButton" title="View" class="bluebutton" style="font-weight: bold; font-size: 16px; color: #808080; display: inline-block; width: 24px; height: 20px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; text-align: center; margin-left: 0px; margin-right: 0px;">></span> +--> +</th> +</tr> +</table> + +<div id="page" style="position: absolute; top: 95px; left: -2500px; right: 0px; height: 5000px;"> -<div id="page"></div> +<div style="position: absolute; left: 2500px; top: 0px; right: 0px; height: 5000px; border:1px; border-style: solid; border-color: #a2bae7; background: url(/public/grid72.png);"></div> +<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 320px; height: 460px;"></div> +<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 480px; height: 300px;"></div> +<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 768px; height: 911px;"></div> +<div class="guide" style="position: absolute; left: 2500px; top: 0px; width: 1024px; height: 655px;"></div> + +<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: 30px;"><h2>Header2</h2></span> +<span class="section" id="palette:section" style="position: absolute; left: 0px; top: 60px; width: 200px;"><span class="section">section</span></span> +<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 90px;"><input type="button" value="button" class="graybutton"/></span> +<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="20" autocapitalize="off"/></span> +<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 150px;"><input type="password" value="password" size="20"/></span> +<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 180px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span> +<span class="select" id="palette:select" style="position: absolute; left: 0px; top: 210px;"><select><option value="select">select</option></select></span> +<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 240px; width: 200px;"> +<table class="datatable" style="width: 200px;"><tr><td class="datatd">list</td></tr><tr><td class="datatd">...</td></tr></table> +</span> +<span class="table" id="palette:table" style="position: absolute; left: 0px; top: 290px; width: 200px;"> +<table class="datatable" style="width: 200px;"><tr><td class="datatdl">table</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table> +</span> +<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 340px;"><a href="/"><span>link</span></a></span> +<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 370px;"><span>text</span></span> +<span class="iframe fakeframe" id="palette:iframe" style="position: absolute; left: 0px; top: 400px; width: 200px;"><a href="/public/iframe.html"><span class="fakeframe"><span>frame ...</span></span></a></span> +<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img src="/public/img.png"/></span> + +</div> + +<div id="buffer" style="visibility: hidden; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px"></div> + +</div> <script type="text/javascript"> +// Get the app name +var appname = ui.queryParams()['app']; +if (isNil(appname)) + window.open('/', '_self'); + /** * Return the link to an app. */ @@ -51,30 +109,229 @@ function applink(appname) { return link; } -// Get the app name -var appname = ui.queryParams()['app']; - -// Update the window title +// Set page titles document.title = windowtitle(window.location.hostname) + ' - Page - ' + 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); +displaymenu(); + +// Show the page +ui.showbody(); + +// Init component references +var editWidget = sca.component("EditWidget"); +var pages = sca.reference(editWidget, "pages"); + +/** + * Return the page in an ATOM entry. + */ +function atompage(doc) { + var entry = atom.readATOMEntry(mklist(doc)); + if (isNil(entry)) + return mklist(); + var content = namedElementChild("'content", car(entry)); + if (content == null) + return mklist(); + return elementChildren(content); +} + +/** + * Track the current widget and page saved XHTML content. + */ +var widgetname = ''; +var savedpagexhtml = ''; /** - * Display the page editor for an app. + * Get and display an app page. */ -function editapp(name) { +function getpage(name, edit) { if (isNil(name)) + return false; + return pages.get(name, function(doc) { + + // Convert the page to XHTML and place it in a hidden buffer + var buffer = $('buffer'); + var el = atompage(doc); + + // Create a default empty page if necessary + if (isNil(el)) + buffer.innerHTML = '<DIV id="page">\n</DIV>\n'; + else + buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); + + // Append page nodes to editor + map(function(e) { + edit.appendChild(e); + if (!isNil(e.style)) + e.style.left = ui.pixpos(ui.numpos(e.style.left) + 2500); + return page.cover(e); + }, nodeList(buffer.childNodes[0].childNodes)); + + savedpagexhtml = pagexhtml(); + return true; + }); +} + +/** + * Handle add widget button click event. + */ +$('addWidgetButton').onclick = function(e) { + // Show the widget palette + $('page').style.left = ui.pixpos(0); +}; + +/** + * 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">\n</DIV>\n' + var div = buffer.childNodes[0]; + div.innerHTML = edit.innerHTML; + + // Filter out palette and editor artifacts, which are not + // part of the page, as well as nodes positioned out the + // editing area + var fnodes = filter(function(e) { + if (isNil(e.id) || e.id == '' || e.id.substr(0, 8) == 'palette:') + return false; + var x = ui.numpos(e.style.left) - 2500; + if (x < 0 || ui.numpos(e.style.top) < 0) + return false; + return true; + }, nodeList(div.childNodes)); + + // Reposition nodes + map(function(e) { + var x = ui.numpos(e.style.left) - 2500; + e.style.left = ui.pixpos(x); + return e; + }, fnodes); + + // Sort them by position + var snodes = fnodes.sort(function(a, b) { + var ay = ui.numpos(a.style.top); + var by = ui.numpos(b.style.top); + if (ay < by) return -1; + if (ay > by) return 1; + var ax = ui.numpos(a.style.left); + var bx = ui.numpos(b.style.left); + if (ax < bx) return -1; + if (ax > bx) return 1; + return 0; + }); + + // Append them back to the div in order + div.innerHTML = ''; + map(function(e) { + div.appendChild(e); + return e; + }, snodes); + + // Convert the page to XHTML + var lxhtml = readXHTMLElement(div); + var xhtml = writeStrings(writeXML(lxhtml, false)); + return xhtml; +} + +/** + * Save the current page. + */ +function save() { + $('saveStatus').innerHTML = '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">' + + savedpagexhtml + '</content></entry>'; + + pages.put(appname, entry); + if (savedpagexhtml == pagexhtml()) + $('saveStatus').innerHTML = 'Saved'; + return true; +}; + +/** + * Handle a page change event + */ +function onpagechange(prop) { + if (savedpagexhtml == pagexhtml()) + return false; + $('saveStatus').innerHTML = 'Modified'; + + // Save property changes right away + if (prop) + return save(); + + // Autosave other changes after 3 seconds + setTimeout(function() { + if (savedpagexhtml == pagexhtml()) + return false; + return save(); + }, 1000); + return true; +} + +/** + * Return the link to a component value. + */ +function compvaluelink(appname, cname) { + if (cname == '' || isNil(cname)) + return ''; + 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 + '/data/?component=' + cname; + return link; +} + +/** + * Handle a widget select event. + */ +function onwidgetselect(wname) { + if (wname == widgetname) + return true; + widgetname = wname; + var link = compvaluelink(appname, wname); + + function updateButton(b, v) { + b.style.color = v? '#000000' : '#808080'; + } + + updateButton($('deleteWidgetButton'), link != ''); + //updateButton($('playWidgetButton'), link != ''); + + return true; +} + +/** + * Play the component associated with the current widget. + */ +/* +$('playWidgetButton').onclick = function() { + var link = compvaluelink(appname, widgetname); + if (link == '') return; - $('page').innerHTML = - '<iframe id="pageFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="page.html?' + - 'app=' + name + - '"></iframe>'; + return window.open(link, '_' + appname + '_' + widgetname); } +*/ + +// Initialize the page editor +var edit = $('page'); +page.edit(edit, $('widgetName'), $('widgetText'), $('addWidgetButton'), $('deleteWidgetButton'), onpagechange, onwidgetselect); -editapp(appname); +// Get and display the current app page +getpage(appname, edit); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html deleted file mode 100644 index 87cdd7edb8..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html +++ /dev/null @@ -1,243 +0,0 @@ -<!-- - * 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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -<script type="text/javascript" src="page.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<table style="width: 100%;"> -<tr> -<th class="thl" style="width: 225px; min-width: 225px; padding-top: 4px; padding-bottom: 4px;">Palette</th> - -<th class="thr" style="padding-left: 4px; padding-top: 0px; padding-bottom: 0px;"> -<input id="widgetName" type="text" value="widget name" title="Widget name" style="position: relative; width: 200px;"/> -<input id="widgetText" type="text" value="widget text" title="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;"> -<input type="button" id="saveButton" title="Save the page" style="font-weight: bold;" Value="Saved"/> -</th> -</tr> - -<tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr> -</table> - -<div id="bigscreen" style="position: absolute; left: 250px; top: 40px; right: 0px; bottom: 0px; border:1px; border-style: solid; border-color: #a2bae7; background: url(/public/grid72.png);"></div> -<div id="iosportraitscreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 320px; height: 460px;"></div> -<div id="ioslandscapescreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 480px; height: 300px;"></div> -<div id="ipadportraitscreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 768px; height: 911px;"></div> -<div id="ipadlandscapescreen" class="guide" style="position: absolute; left: 250px; top: 40px; width: 1024px; height: 655px;"></div> - -<div id="page" style="position: absolute; top: 40px; left: 0px; width: 5000px; height: 5000px;"> - -<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: 35px;"><h2>Header2</h2></span> -<span class="section" id="palette:section" style="position: absolute; left: 0px; top: 70px; width: 200px;"><span class="section">section</span></span> -<span class="button" id="palette:button" style="position: absolute; left: 0px; top: 100px;"><input type="button" value="button"/></span> -<span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 130px;"><input type="text" value="field" size="20" autocapitalize="off"/></span> -<span class="password" id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="20"/></span> -<span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 190px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span> -<span class="select" id="palette:select" style="position: absolute; left: 0px; top: 220px;"><select><option value="select">select</option></select></span> -<span class="list" id="palette:list" style="position: absolute; left: 0px; top: 250px; width: 200px;"> -<table class="datatable" style="width: 200px;"><tr><td class="datatd">list</td></tr><tr><td class="datatd">...</td></tr></table> -</span> -<span class="table" id="palette:table" style="position: absolute; left: 0px; top: 300px; width: 200px;"> -<table class="datatable" style="width: 200px;"><tr><td class="datatdl">table</td><td class="datatdr">...</td></tr><tr><td class="datatdl">...</td><td class="datatdr">...</td></tr></table> -</span> -<span class="link" id="palette:link" style="position: absolute; left: 0px; top: 350px;"><a href="/"><span>link</span></a></span> -<span class="text" id="palette:text" style="position: absolute; left: 0px; top: 380px;"><span>text</span></span> -<span class="iframe fakeframe" id="palette:iframe" style="position: absolute; left: 0px; top: 410px; width: 200px;"><a href="/public/iframe.html"><span class="fakeframe"><span>frame ...</span></span></a></span> -<span class="img" id="palette:img" style="position: absolute; left: 0px; top: 430px;"><img src="/public/img.png"/></span> - -</div> - -<div id="buffer" style="visibility: hidden; width: 0px; height: 0px"></div> - -</div> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -var editWidget = sca.component("EditWidget"); -var pages = sca.reference(editWidget, "pages"); - -/** - * The current app name. - */ -var appname = ui.queryParams()['app']; - -/** - * Return the page in an ATOM entry. - */ -function atompage(doc) { - var entry = atom.readATOMEntry(mklist(doc)); - if (isNil(entry)) - return mklist(); - var content = namedElementChild("'content", car(entry)); - if (content == null) - return mklist(); - return elementChildren(content); -} - -/** - * Track the current page saved XHTML content. - */ -var savedpagexhtml = ''; - -/** - * Get and display an app page. - */ -function getpage(name, edit) { - if (isNil(name)) - return; - pages.get(name, function(doc) { - - // Convert the page to XHTML and place it in a hidden buffer - var buffer = $('buffer'); - var el = atompage(doc); - - // Create a default empty page if necessary - if (isNil(el)) - buffer.innerHTML = '<DIV id="page">\n</DIV>\n'; - else - buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); - - // Append page nodes to editor - map(function(e) { - 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)); - - savedpagexhtml = pagexhtml(); - - // Show the page - ui.showbody(); - }); -} - -/** - * 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">\n</DIV>\n' - var div = buffer.childNodes[0]; - div.innerHTML = edit.innerHTML; - - // Remove nodes from palette and editor artifacts, which are - // not part of the page, as well as nodes positioned out of - // the editing area - map(function(e) { - if (isNil(e.id) || e.id == '' || e.id.substr(0, 8) == 'palette:') { - div.removeChild(e); - return e; - } - var x = ui.csspos(e.style.left) - 250; - if (x < 0 || ui.csspos(e.style.top) < 0) { - div.removeChild(e); - return e; - } - e.style.left = x; - return e; - }, nodeList(div.childNodes)); - - // Convert the page to XHTML - 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">' + - savedpagexhtml + '</content></entry>'; - - pages.put(appname, entry, function(e) { - if (savedpagexhtml == pagexhtml()) - $('saveButton').value = 'Saved'; - return true; - }); - return true; -}; - -/** - * Handle a page change event - */ -function onpagechange(prop) { - if (savedpagexhtml == pagexhtml()) - return false; - $('saveButton').value = 'Save now'; - - // Save property changes right away - if (prop) - return save(); - - // Autosave other changes 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'), onpagechange); - -// Get and display the current app page -getpage(appname, edit); - -</script> -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index 7ecf5c148e..09617d9720 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -25,349 +25,252 @@ var page = {}; /** * Default positions and sizes. */ -var palcx = 250; -var trashcx = 230; +var palcx = 2500; +var trashcx = 2480; -if (ui.isIE()) { - - /** - * Init a page editor. IE-specific implementation. - */ - page.edit = function(elem, wname, wtext, onchange) { - - // Track element dragging and selection - page.dragging = null; - page.selected = null; - wname.disabled = true; - wtext.disabled = true; +/** + * Init a page editor. Works with all browsers except IE. + */ +page.edit = function(elem, wname, wtext, wadd, wdelete, onchange, onselect) { - // Trigger page change events - page.onpagechange = onchange; + // Track element dragging and selection + page.dragging = null; + page.selected = null; + wname.disabled = true; + wtext.disabled = true; + wdelete.disabled = true; - /** - * Handle a mouse down event. - */ - elem.onmousedown = function() { - window.event.returnValue = false; + // Trigger widget select and page change events + page.onpagechange = onchange; + page.onwidgetselect = onselect; - // Find a draggable element - page.dragging = page.draggable(window.event.srcElement, elem); + /** + * Handle a mouse down event. + */ + elem.onmousedown = function(e) { + + // Find a draggable element + page.dragging = page.draggable(e.target, elem); + page.selected = page.dragging; + if (page.dragging == null) { + + // Reset current selection + wname.value = ''; + wname.disabled = true; + wtext.value = ''; + wtext.disabled = true; + wdelete.disabled = true; + + // Trigger widget select event + page.onwidgetselect(''); + return true; + } + + // Clone element dragged from palette + if (page.dragging.id.substring(0, 8) == 'palette:') { + page.dragging = page.clone(page.dragging); page.selected = page.dragging; - if (page.dragging == null) { - - // Reset current selection - wname.value = ''; - wname.disabled = true; - wtext.value = ''; - wtext.disabled = true; - 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; - } + // Move into the editing area and hide the palette + page.selected.style.left = ui.pixpos(ui.numpos(page.selected.style.left) + palcx); + elem.style.left = ui.pixpos(palcx * -1); + // Bring it to the top page.bringtotop(page.dragging); - // Save the mouse position - page.dragX = window.event.clientX; - page.dragY = window.event.clientY; - elem.setCapture(); - - // 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; - }; - - /** - * Handle a mouse up event. - */ - elem.onmouseup = function() { - 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) { - - // Unless it's close enough to page area, then move it there - page.dragging.style.left = palcx; - page.dragging.cover.style.left = palcx; - } else { - page.dragging.parentNode.removeChild(page.dragging); - - // Reset current selection - page.selected = null; - wname.value = ''; - wname.disabled = true; - wtext.value = ''; - wtext.disabled = true; - } - } - - // Forget current dragged element - page.dragging = null; - elem.releaseCapture(); - - // Trigger page change event - page.onpagechange(false); - return false; - }; - - /** - * Handle a mouse move event. - */ - elem.onmousemove = function() { - if (page.dragging == null) - return false; - - // Compute dragged element position - var curX = ui.csspos(page.dragging.style.left); - var curY = ui.csspos(page.dragging.style.top); - var newX = curX + (window.event.clientX - page.dragX); - var newY = curY + (window.event.clientY - page.dragY); - if (newX >= 0) - page.dragX = window.event.clientX; - else - newX = 0; - if (newY >= 0) - page.dragY = window.event.clientY; - else - newY = 0; - - // 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; - // Trigger page change event page.onpagechange(true); - return false; - }; - - wtext.onchange = wtext.onblur = function() { - if (page.selected == null) - return false; - page.settext(page.selected, wtext.value); - // Trigger page change event - page.onpagechange(true); - return false; - }; + } else { - // Cover child elements with span elements to prevent - // any input events to reach them - map(page.cover, nodeList(elem.childNodes)); - - return elem; + // Bring it to the top + page.bringtotop(page.dragging); + } + + // Remember mouse position + 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; + wname.disabled = false; + wtext.value = page.text(page.selected); + wtext.disabled = !page.hastext(page.selected); + wdelete.disabled = false; + + // Trigger widget select event + page.onwidgetselect(page.selected.id); + + if (e.preventDefault) + e.preventDefault(); + else + e.returnValue = false; + return true; }; -} else { + // Support touch devices + elem.ontouchstart = elem.onmousedown; /** - * Init a page editor. Generic implementation for all other browsers. + * Handle a mouse up event. */ - page.edit = function(elem, wname, wtext, onchange) { - - // Track element dragging and selection - page.dragging = null; - page.selected = null; - wname.disabled = true; - wtext.disabled = true; - - // Trigger page change events - page.onpagechange = onchange; - - /** - * Handle a mouse down event. - */ - elem.onmousedown = function(e) { - if (e.preventDefault) - e.preventDefault(); - else - e.returnValue = false; - - // Find a draggable element - page.dragging = page.draggable(e.target, elem); - page.selected = page.dragging; - if (page.dragging == null) { + elem.onmouseup = function(e) { + if (page.dragging == null) + return true; + + // Snap to grid + var newX = page.gridsnap(ui.numpos(page.dragging.style.left)); + var newY = page.gridsnap(ui.numpos(page.dragging.style.top)); + page.dragging.style.left = ui.pixpos(newX); + page.dragging.style.top = ui.pixpos(newY); + page.dragging.cover.style.left = ui.pixpos(newX); + page.dragging.cover.style.top = ui.pixpos(newY); + + // Fixup widget style + page.fixupwidget(page.dragging); + + // Discard element dragged out of page area + if (ui.numpos(page.dragging.style.left) < palcx && page.dragging.id.substring(0, 8) != 'palette:') { + if (ui.numpos(page.dragging.style.left) >= trashcx) { + + // Unless it's close enough to page area, then move it there + page.dragging.style.left = ui.pixpos(palcx); + page.dragging.cover.style.left = ui.pixpos(palcx); + } else { + page.dragging.parentNode.removeChild(page.dragging); // Reset current selection + page.selected = null; wname.value = ''; wname.disabled = true; wtext.value = ''; wtext.disabled = true; - return false; - } + wdelete.disabled = true; - // Clone element dragged from palette - if (page.dragging.id.substring(0, 8) == 'palette:') { - page.dragging = page.clone(page.dragging); - page.selected = page.dragging; + // Trigger widget select event + page.onwidgetselect(''); } + } - // Bring it to the top - page.bringtotop(page.dragging); + // Forget dragged element + page.dragging = null; - // Remember mouse position - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + // Trigger page change event + page.onpagechange(false); + return true; + }; + + // Support touch devices + elem.ontouchend = elem.onmouseup; + + /** + * Handle a mouse move event. + */ + window.onmousemove = function(e) { + if (page.dragging == null) + return true; + + // Compute position of dragged element + var curX = ui.numpos(page.dragging.style.left); + var curY = ui.numpos(page.dragging.style.top); + var pos = typeof e.touches != "undefined" ? e.touches[0] : e; + var newX = curX + (pos.screenX - page.dragX); + var newY = curY + (pos.screenY - page.dragY); + if (newX >= 0) page.dragX = pos.screenX; + else + newX = 0; + if (newY >= 0) page.dragY = pos.screenY; + else + newY = 0; + + // Move the dragged element + page.dragging.style.left = ui.pixpos(newX); + page.dragging.style.top = ui.pixpos(newY); + page.dragging.cover.style.left = ui.pixpos(newX); + page.dragging.cover.style.top = ui.pixpos(newY); + return true; + }; - // 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; - }; - - // Support touch devices - elem.ontouchstart = elem.onmousedown; - - /** - * Handle a mouse up event. - */ - window.onmouseup = function(e) { - 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) { - - // Unless it's close enough to page area, then move it there - page.dragging.style.left = palcx; - page.dragging.cover.style.left = palcx; - } else { - page.dragging.parentNode.removeChild(page.dragging); - - // Reset current selection - page.selected = null; - wname.value = ''; - wname.disabled = true; - wtext.value = ''; - wtext.disabled = true; - } - } + // Support touch devices + elem.ontouchmove = window.onmousemove; - // Forget dragged element - page.dragging = null; + /** + * Handle a mouse click event. + */ + elem.onclick = function(e) { + if (page.dragging == null) { - // Trigger page change event - page.onpagechange(false); + // Dismiss the palette + if (ui.numpos(elem.style.left) != (palcx * -1)) + elem.style.left = ui.pixpos(palcx * -1); + } + return true; + }; + + /** + * Handle field on change events. + */ + wname.onchange = wname.onblur = function() { + if (page.selected == null) return false; - }; - - // Support touch devices - window.top.onmouseup = window.onmouseup; - window.ontouchend = window.onmouseup; - window.top.ontouchend = window.onmouseup; - - /** - * Handle a mouse move event. - */ - window.onmousemove = function(e) { - if (page.dragging == null) - return false; - - // Compute position of dragged element - var curX = ui.csspos(page.dragging.style.left); - var curY = ui.csspos(page.dragging.style.top); - var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - var newX = curX + (pos.screenX - page.dragX); - var newY = curY + (pos.screenY - page.dragY); - if (newX >= 0) - page.dragX = pos.screenX; - else - newX = 0; - if (newY >= 0) - page.dragY = pos.screenY; - else - newY = 0; - - // Move the dragged element - page.dragging.style.left = newX; - page.dragging.style.top = newY; - page.dragging.cover.style.left = newX; - page.dragging.cover.style.top = newY; + page.selected.id = wname.value; + + // Trigger page change event + page.onpagechange(true); + return false; + }; + + wtext.onchange = wtext.onblur = function() { + if (page.selected == null) return false; - }; + page.settext(page.selected, wtext.value); + + // Trigger page change event + page.onpagechange(true); + return false; + }; - // Support touch devices - window.top.onmousemove = window.onmousemove; - window.ontouchmove = window.onmousemove; - window.top.ontouchmove = window.onmousemove; + // Handle add widget event. + wadd.onclick = function() { - /** - * Handle field on change events. - */ - wname.onchange = wname.onblue = function() { - if (page.selected == null) - return false; - page.selected.id = wname.value; + // Show the palette + elem.style.left = ui.pixpos(0); + return false; + }; - // Trigger page change event - page.onpagechange(true); + // Handle delete event. + wdelete.onclick = function() { + if (page.selected == null) return false; - }; - wtext.onchange = wtext.onblur = function() { - if (page.selected == null) - return false; - page.settext(page.selected, wtext.value); + // Remove selected widget + page.selected.parentNode.removeChild(page.selected); - // Trigger page change event - page.onpagechange(true); - return false; - }; + // Reset current selection + page.selected = null; + wname.value = ''; + wname.disabled = true; + wtext.value = ''; + wtext.disabled = true; + wdelete.disabled = true; - // Cover child elements with span elements to prevent - // any input events to reach them - map(page.cover, nodeList(elem.childNodes)); + // Trigger widget select event + page.onwidgetselect(''); - return elem; + // Trigger page change event + page.onpagechange(true); + return false; }; -} + + // Cover child elements with span elements to prevent + // any input events to reach them + map(page.cover, nodeList(elem.childNodes)); + + return elem; +}; /** * Return the text of a widget. @@ -532,8 +435,8 @@ page.cover = function(e) { return e; var cover = document.createElement('span'); cover.style.position = 'absolute'; - cover.style.left = ui.csspos(e.style.left) - 5; - cover.style.top = ui.csspos(e.style.top) - 5; + cover.style.left = ui.pixpos(ui.numpos(e.style.left) - 5); + cover.style.top = ui.pixpos(ui.numpos(e.style.top) - 5); cover.style.width = e.clientWidth + 10; cover.style.height = e.clientHeight + 10; cover.style.visibility = 'visible'; @@ -568,8 +471,8 @@ page.clone = function(e) { */ function posclone(ne, e) { ne.style.position = 'absolute'; - ne.style.left = ui.csspos(e.style.left); - ne.style.top = ui.csspos(e.style.top); + ne.style.left = ui.pixpos(ui.numpos(e.style.left)); + ne.style.top = ui.pixpos(ui.numpos(e.style.top)); e.parentNode.appendChild(ne); page.cover(ne); return ne; diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/index.html b/sca-cpp/trunk/modules/edit/htdocs/props/index.html deleted file mode 100644 index a6a8bc92fe..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/props/index.html +++ /dev/null @@ -1,81 +0,0 @@ -<!-- - * 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>Stats</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"></span></h1> -<br/> - -<div id="props"></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) + ' - Stats - ' + 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); - -/** - * Display the properties editor for an app. - */ -function editapp(name) { - if (isNil(name)) - return; - ui.loadiframe('props', 'props.html?app=' + name); -} - -// Display the editor for the current app -editapp(appname); - -</script> - -</body> -</html> - diff --git a/sca-cpp/trunk/modules/edit/htdocs/props/props.html b/sca-cpp/trunk/modules/edit/htdocs/props/props.html deleted file mode 100644 index 93910a2022..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/props/props.html +++ /dev/null @@ -1,160 +0,0 @@ -<!-- - * 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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<table style="width: 100%;"> -<tr> -<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Stats</th> - -<th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> -<input type="button" id="saveButton" title="Save the app" style="font-weight: bold;" Value="Saved"/> -</th> -</tr> -</table> -<br> - -<div> -<form id="appForm"> -<table style="width: 100%;"> -<tr><tr><td><b>App Icon:</b></td></tr> -<tr><td><img src="/public/app.png" style="width: 50px; height: 50px;"></td></tr> -<tr><tr><td><b>App Title:</b></td></tr> -<tr><td><input type="text" id="appTitle" size="80"/></td></tr> -<tr><tr><td><b>Category:</b></td></tr> -<tr><td><input type="text" id="appCategory" size="15"/></td></tr> -<tr><tr><td><b>Updated:</b></td></tr> -<tr><td><span id="appUpdated"></span></td></tr> -<tr><tr><td><b>Description:</b></td></tr> -<tr><td><textarea id="appDescription" cols="80" rows="5"></textarea></td></tr> -</table> -</form> -</div> - -</div> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -// Init service references -var editWidget = sca.component("EditWidget"); -var dashboard = sca.reference(editWidget, "dashboard"); - -/** - * The current app name. - */ -var appname = ui.queryParams()['app']; - -/** - * 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'; -var defcategory = 'Cool Apps'; -var defdate = 'Feb 4, 2011'; -var defdesc = 'Enter a short description of your app here'; - -/** - * Get and display an app. - */ -function getapp(name) { - dashboard.get(name, function(doc) { - appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name)); - var title = cadr(assoc("'title", cdr(appentry))); - $('appTitle').value = title != ''? title : deftitle; - $('appCategory').value = defcategory; - $('appUpdated').innerHTML = defdate; - $('appDescription').innerHTML = defdesc; - savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))); - - // Show the page - ui.showbody(); - }); -} - -/** - * Handle save button click event. - */ -$('saveButton').onclick = function() { - return save(); -}; - -/** - * Save the current app. - */ -function save() { - $('saveButton').value = 'Saving'; - var title = $('appTitle').value; - var appentry = mklist("'entry", mklist("'title", title != deftitle && title != ''? title : appname), mklist("'id", appname)); - savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))); - dashboard.put(appname, savedappentryxml, function() { - if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry))))) - $('saveButton').value = 'Saved'; - return true; - }); - return true; -} - -/** - * Handle a change event - */ -function onappchange() { - var title = $('appTitle').value; - var appentry = mklist("'entry", mklist("'title", title != deftitle && title != ''? title : appname), mklist("'id", appname)); - if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry))))) - return false; - $('saveButton').value = 'Save now'; - - // Autosave after 3 seconds - setTimeout(function() { - if (savedappentryxml == car(atom.writeATOMEntry(valuesToElements(mklist(appentry))))) - return false; - return save(); - }, 3000); - return true; -} - -$('appTitle').onchange = onappchange; -$('appCategory').onchange = onappchange; -$('appDescription').onchange = onappchange; - -// Get the current app -getapp(appname); - -</script> -</body> -</html> diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/delete.png b/sca-cpp/trunk/modules/edit/htdocs/public/delete.png Binary files differnew file mode 100644 index 0000000000..fb56bae030 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/public/delete.png diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf b/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf Binary files differnew file mode 100644 index 0000000000..7691f50cc5 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/public/delete.xcf diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html index cc44f5d428..060e929dd1 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/iframe.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -22,7 +23,7 @@ <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="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.css"/> </head> <body style="margin:3px; padding: 0px; background-color: #dcdcdc;"> diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html index a283b3e89e..c4db51cfd3 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/notauth.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -22,42 +23,52 @@ <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="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> <br/> +<div style="margin-left: auto; margin-right: auto; text-align: center;"> <div class="hd2">Sorry, you're not authorized to view this page.</div> +</div> + +</div> <form name="signout" action="/public/notauth.html" method="GET"> </form> <script type="text/javascript"> +// Set page title +$('h1').innerHTML = hometitle(window.location.hostname); // Load the menu bar if (!issubdomain(window.location.hostname)) - ui.loadwidget('menu', '/menu.html', ui.showbody); + displaymenu(); -$('h1').innerHTML = hometitle(window.location.hostname); +// Show the page +ui.showbody(); -if (issubdomain(window.location.hostname)) - ui.showbody(); +// Sign out +if (window.top.location.pathname != '/public/notauth.html') { + function submitSignout() { + var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE'; + document.cookie = reset; + document.signout.submit(); + return true; + } -function submitSignout() { - var reset = 'TuscanyOpenAuth=;expires=' + new Date(1970,01,01).toGMTString() + ';domain=.' + domainname(window.location.hostname) + ';path=/;secure=TRUE'; - document.cookie = reset; - document.signout.submit(); - return true; -} - -if (window.top.location.pathname != '/public/notauth.html') submitSignout(); +} </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html index da56789a66..9721804eb2 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/notfound.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -22,30 +23,38 @@ <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="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> <br/> +<div style="margin-left: auto; margin-right: auto; text-align: center;"> <div class="hd2">Sorry, that page was not found.</div> <div>You may have clicked an expired link or mistyped the address.</div> +</div> + +</div> <script type="text/javascript"> +// Set page title +$('h1').innerHTML = hometitle(window.location.hostname); // Load the menu bar if (!issubdomain(window.location.hostname)) - ui.loadwidget('menu', '/menu.html', ui.showbody); - -$('h1').innerHTML = hometitle(window.location.hostname); + displaymenu(); -if (issubdomain(window.location.hostname)) - ui.showbody(); +// Show the page +ui.showbody(); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html b/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html index 7a6a82ded6..bec4731415 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/notyet.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -22,30 +23,38 @@ <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="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> <br/> +<div style="margin-left: auto; margin-right: auto; text-align: center;"> <div class="hd2">Sorry, that page is still under construction.</div> <div>Please check back later.</div> +</div> + +</div> <script type="text/javascript"> +// Set page title +$('h1').innerHTML = hometitle(window.location.hostname); // Load the menu bar if (!issubdomain(window.location.hostname)) - ui.loadwidget('menu', '/menu.html', ui.showbody); - -$('h1').innerHTML = hometitle(window.location.hostname); + displaymenu(); -if (issubdomain(window.location.hostname)) - ui.showbody(); +// Show the page +ui.showbody(); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html index 4c926ac6d2..305e2c66e1 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/public/oops.html +++ b/sca-cpp/trunk/modules/edit/htdocs/public/oops.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -22,29 +23,37 @@ <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="stylesheet" type="text/css" href="/ui.css"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> <br/> +<div style="margin-left: auto; margin-right: auto; text-align: center;"> <div class="hd2">Oops, something went wrong...</div> +</div> + +</div> <script type="text/javascript"> +// Set page title +$('h1').innerHTML = hometitle(window.location.hostname); // Load the menu bar if (!issubdomain(window.location.hostname)) - ui.loadwidget('menu', '/menu.html', ui.showbody); - -$('h1').innerHTML = hometitle(window.location.hostname); + displaymenu(); -if (issubdomain(window.location.hostname)) - ui.showbody(); +// Show the page +ui.showbody(); </script> </body> diff --git a/sca-cpp/trunk/modules/edit/htdocs/stats/index.html b/sca-cpp/trunk/modules/edit/htdocs/stats/index.html new file mode 100644 index 0000000000..737bb0bef4 --- /dev/null +++ b/sca-cpp/trunk/modules/edit/htdocs/stats/index.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<!-- + * 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>Stats</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-min.css"/> +<script type="text/javascript" src="/config.js"></script> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> +</head> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + +<div id="menu"></div> + +<table style="width: 100%;"> +<tr> +<td><h1><span id="h1"></span><span id="appNameHeader"></span></h1></td> +<td style="vertical-align: middle; text-align: right;"><span id="saveStatus" style="font-weight: bold; color: #808080;">Saved</span></td> +</tr> +</table> + +<table style="width: 100%;"> +<tr> +<th class="thl thr" style="padding-top: 4px; padding-bottom: 4px;">Stats</th> +</tr> +</table> + +<form id="appForm" style="position: absolute; top: 90px; left: 0px;"> +<table style="width: 100%;"> +<tr><tr><td><b>App Icon:</b></td></tr> +<tr><td><img src="/public/app.png" style="width: 50px; height: 50px; vertical-align: top;"></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Sharing:</b></td></tr> +<tr><td><input type="checkbox" value="shared"/><span>Shared</span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>App Title:</b></td></tr> +<tr><td><input type="text" id="appTitle" size="30" placeholder="Enter the title of your app" style="width: 300px;"/></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Updated:</b></td></tr> +<tr><td><span id="appUpdated"></span></td></tr> +<tr><tr><td style="padding-top: 6px;"><b>Description:</b></td></tr> +<tr><td><textarea id="appDescription" cols="40" rows="3" placeholder="Enter a short description of your app" style="width: 300px;"></textarea></td></tr> +</table> +</form> + +</div> + +<script type="text/javascript"> +// Get the app name +var appname = ui.queryParams()['app']; +if (isNil(appname)) + window.open('/', '_self'); + +/** + * 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; +} + +// Set page titles +document.title = windowtitle(window.location.hostname) + ' - Stats - ' + appname; +$('h1').innerHTML = hometitle(window.location.hostname); +$('appNameHeader').innerHTML = ' - <a href=\"' + applink(appname) + '\" target=\"' + '_blank' + '\">' + appname + '</a>'; + +// Load the menu bar +displaymenu(); + +// Show the page +ui.showbody(); + +// Init service references +var editWidget = sca.component("EditWidget"); +var dashboard = sca.reference(editWidget, "dashboard"); + +/** + * The current app entry and corresponding saved XML content. + */ +var appentry; +var savedappentryxml = ''; + +/** + * Get and display an app. + */ +function getapp(name) { + if (isNil(name)) + return false; + return dashboard.get(name, function(doc) { + appentry = doc != null? car(elementsToValues(atom.readATOMEntry(mklist(doc)))) : mklist("'entry", mklist("'title", ''), mklist("'id", name)); + var title = cadr(assoc("'title", cdr(appentry))); + $('appTitle').value = title; + $('appUpdated').innerHTML = 'Apr 24, 2011' + $('appDescription').innerHTML = ''; + savedappentryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))); + return true; + }); +} + +/** + * Save the current app. + */ +function save(entryxml) { + $('saveStatus').innerHTML = 'Saving'; + savedappentryxml = entryxml; + dashboard.put(appname, savedappentryxml); + $('saveStatus').innerHTML = 'Saved'; + return true; +} + +/** + * Handle a change event + */ +function onappchange() { + var title = $('appTitle').value; + var appentry = mklist("'entry", mklist("'title", title != ''? title : appname), mklist("'id", appname)); + var entryxml = car(atom.writeATOMEntry(valuesToElements(mklist(appentry)))); + if (savedappentryxml == entryxml) + return false; + $('saveStatus').innerHTML = 'Modified'; + return save(entryxml); +} + +$('appTitle').onchange = onappchange; +$('appDescription').onchange = onappchange; + +/** + * Handle a form submit event. + */ +$('appForm').onsubmit = function() { + onappchange(); + return false; +}; + +// Get the current app +getapp(appname); + +</script> + +</body> +</html> + diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/index.html b/sca-cpp/trunk/modules/edit/htdocs/store/index.html index 596f2e00c8..3c79f6c780 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/store/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/store/index.html @@ -1,3 +1,4 @@ +<!DOCTYPE html> <!-- * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -23,37 +24,162 @@ <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"/> +<link rel="stylesheet" type="text/css" href="/ui-min.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> -<script type="text/javascript"> -document.title = windowtitle(window.location.hostname) + ' - Store'; -</script> +<script type="text/javascript" src="/all-min.js"></script> +<script type="text/javascript" src="/menu.js"></script> </head> -<body class="delayed"> +<body class="delayed" onorientationchange="ui.reload();"> +<div id="bodydiv" class="devicewidth"> + <div id="menu"></div> -<h1 id="h1"></h1> -<br/> +<table style="width: 100%;"> +<tr><td><h1><span id="h1"></span></h1></td></tr> +</table> -<div id="store"></div> +<div id="catmenu"></div> -<script type="text/javascript"> +<div id="apps"></div> -// Load the menu bar -ui.loadwidget('menu', '/menu.html', ui.showbody); +</div> +<script type="text/javascript"> +// Set page titles +document.title = windowtitle(window.location.hostname) + ' - Store'; $('h1').innerHTML = hometitle(window.location.hostname); +// Display the menu bar +displaymenu(); + // Get the store category var category = ui.queryParams()['category']; if (isNil(category)) category = 'myapps'; -// Load the store -$('store').innerHTML = - '<iframe id="storeFrame" style="height: 5000px; width: 100%; border: 0px;" scrolling="no" frameborder="0" src="store.html?category=' + category + '"></iframe>'; +/** + * Build store menu bar + */ +function catmenu() { + function catmenuitem(name, cat) { + var c = cat == category? 'smenu' : 'amenu'; + return '<th class="thl thr" style="width: 10px; padding-top: 4px; padding-bottom: 4px; padding-right: 6px;">' + + ui.ahref('/store/?category=' + cat, '_self', '<span class="' + c + '">' + name + '</span>') + '</th>'; + } + + var m = '<table style="width: 100%;"><tr>'; + m += catmenuitem('My Apps', 'myapps'); + m += catmenuitem('New', 'new'); + m += catmenuitem('Top', 'top'); + m += catmenuitem('Featured', 'featured'); + m += catmenuitem('All', 'all'); + if (category == 'myapps') { + m += '<th class="thl thr" style="width: 100%; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;">'; + m += '<input type="button" class="greenbutton" id="createApp" title="Create a new app" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px; height: 24px;" Value="New App"/>'; + m += '</th></tr></table>'; + return m; + } + m += '<th class="thl thr" style="width: 100%;"></th></tr></table>'; + return m; +} + +// Build store menu bar +$('catmenu').innerHTML = catmenu(); + +// Show the page +ui.showbody(); + +/** + * Service references. + */ +var editWidget = sca.component("EditWidget"); +var store = sca.reference(editWidget, "store"); +var dashboard = sca.reference(editWidget, "dashboard"); + +/** + * 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; +} + +/** + * Edit an app. + */ +function editApp(appname) { + return window.open('/page/?app=' + appname, '_self'); +} + +/** + * Create an app. + */ +if (category == 'myapps') { + $('createApp').onclick = function() { + return window.open('/create/', '_self'); + } +} + +/** + * Clone an app. + */ +function cloneApp(appname) { + return window.open('/clone/?app=' + appname, '_self'); +} + +/** + * Get and display list of apps. + */ +function getapps(category) { + function display(doc) { + var apps = '<div>'; + 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]; + var title = cadr(assoc("'title", entry)) + var name = cadr(assoc("'id", entry)) + var author = 'joe'; + var clone = isNil(config.clone)? 'Clone' : config.clone; + + apps += '<div class="box" style="width: 285px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 5px; padding: 10px; vertical-align: top;">' + apps += '<table><tr>'; + apps += '<td>'; + apps += '<div>' + ui.ahref(applink(name), '_blank', '<img src="/public/app.png" width="50" height="50" style="height: 50px; width: 50px; vertical-align: top; margin-right: 10px; margin-bottom: 5px;"></img>') + '</div>'; + apps += '<div><input type="button" class="greenbutton" id="cloneApp" value="' + clone + '" title="' + clone + ' this app" onclick="cloneApp(\'' + name + '\');"></div>'; + if (category == 'myapps') + apps += '<div><input type="button" id="editApp" class="bluebutton" value="Edit" title="Edit this app" onclick="editApp(\'' + name + '\');"></div>'; + apps += '</td>'; + apps += '<td class="tdw">'; + apps += '<div style="font-weight: bold">' + ui.ahref(applink(name), '_blank', name) + '</div>'; + if (category == 'myapps') + apps += '<div style="color: #808080;">Shared</div>'; + else + apps += '<div>' + 'by ' + '<span style="font-weight: bold;">' + author + '</span></div>'; + apps += '<div>Feb 4, 2011</div>'; + apps += '<br/>'; + apps += '<div>' + title + '</div>'; + apps += '<br/>'; + apps += '</td>'; + apps += '</tr></table>'; + apps += '</div>'; + } + apps += '</div>'; + $('apps').innerHTML = apps; + } + + if (category == 'myapps') + return dashboard.get('', display); + return store.get(category, display); +} + +// Get and display the list of apps +getapps(category); </script> diff --git a/sca-cpp/trunk/modules/edit/htdocs/store/store.html b/sca-cpp/trunk/modules/edit/htdocs/store/store.html deleted file mode 100644 index c074cc24c2..0000000000 --- a/sca-cpp/trunk/modules/edit/htdocs/store/store.html +++ /dev/null @@ -1,165 +0,0 @@ -<!-- - * 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> -<script type="text/javascript" src="/atomutil.js"></script> -<script type="text/javascript" src="/scdl.js"></script> -<script type="text/javascript" src="/ui.js"></script> -<script type="text/javascript" src="/component.js"></script> -</head> -<body class="delayed"> - -<div id="bodydiv" style="position: absolute; top: 0px; left: 0px; right: 0px;"> - -<div id="catmenu"></div> - -<div id="apps"></div> -<br/> - -<script type="text/javascript"> -if (ui.isIE()) $('bodydiv').style.right = -20; - -/** - * The current app category. - */ -var category = ui.queryParams()['category']; -if (isNil(category)) - category = 'myapps'; -log('category', category); - -/** - * Build store menu bar - */ -function catmenu() { - function catmenuitem(name, cat) { - var c = cat == category? 'smenu' : 'amenu'; - return '<th class="thl thr" style="width: 30px; padding-top: 4px; padding-bottom: 4px; padding-right: 10px;">' - + ui.ahref('/store/?category=' + cat, '_parent', '<span class="' + c + '">' + name + '</span>') + '</th>'; - } - - var m = '<table style="width: 100%;"><tr>'; - m += catmenuitem('My Apps', 'myapps'); - m += catmenuitem('New Apps', 'new'); - m += catmenuitem('Top Charts', 'top'); - m += catmenuitem('Featured', 'featured'); - m += '<th class="thl thr" style="width: 100%;"></th></tr></table>'; - return m; -} - -// Build store menu bar -$('catmenu').innerHTML = catmenu(); - -/** - * Service references. - */ -var editWidget = sca.component("EditWidget"); -var store = sca.reference(editWidget, "store"); -var dashboard = sca.reference(editWidget, "dashboard"); - -/** - * 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; -} - -/** - * 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) { - function display(doc) { - var apps = '<div>'; - 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]; - 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 += '<div class="box" style="width: 250px; display: inline-block; border: 1px; border-style: solid; border-color: #dcdcdc; border-collapse: collapse; margin: 5px; padding: 10px; vertical-align: top;">' - apps += '<table><tr>'; - apps += '<td>'; - apps += '<div>' + ui.ahref(applink(name), '_blank', '<img src="/public/app.png" width="50" height="50" style="height: 50px; width: 50px; vertical-align: top; margin-right: 10px; margin-bottom: 5px;"></img>') + '</div>'; - apps += '<div><input type="button" id="cloneApp" value="' + clone + '" title="' + clone + ' this app" onclick="cloneApp(\'' + name + '\');"></div>'; - if (category == 'myapps') - apps += '<div><input type="button" id="editApp" value="Edit" title="Edit this app" onclick="editApp(\'' + name + '\');"></div>'; - apps += '</td>'; - apps += '<td class="tdw">'; - apps += '<div style="font-weight: bold">' + ui.ahref(applink(name), '_blank', name) + '</div>'; - apps += '<div>' + 'by ' + '<span style="font-weight: bold;">' + author + '</span></div>'; - apps += '<div>Feb 4, 2011</div>'; - apps += '<br/>'; - apps += '<div>' + title + '</div>'; - apps += '<br/>'; - apps += '</td>'; - apps += '</tr></table>'; - apps += '</div>'; - } - apps += '</div>'; - $('apps').innerHTML = apps; - - // Show the page - ui.showbody(); - } - - 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); - -</script> -</body> -</html> |
