| <!-- |
| * 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="/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> |
| |
| <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="widgetName" type="text" value="widget name" style="position: relative; width: 200px;"/> |
| <input id="widgetText" type="text" value="widget text" style="position: relative; width: 300px;"/> |
| </th> |
| |
| <th class="thl thr" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; text-align: right;"> |
| <span id="source" style="font-weight: normal;">[atom json]</span> |
| <input type="button" id="saveButton" style="font-weight: bold;" Value="Saved"/> |
| </th> |
| </tr> |
| |
| <tr style="height: 5000px;"><td class="tdl"></td><td class="tdr" colspan="2"></td></tr> |
| </table> |
| |
| <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: 40px;"><h2>Header2</h2></span> |
| <span class="button" id="palette:button" style="position: absolute; left: 0px; top: 80px;"><input type="button" value="button"/></span> |
| <span class="entry" id="palette:entry" style="position: absolute; left: 0px; top: 120px;"><input type="text" value="field" size="5"/></span> |
| <span class="password" id="palette:password" style="position: absolute; left: 0px; top: 160px;"><input type="password" value="password" size="5"/></span> |
| <span class="checkbox" id="palette:checkbox" style="position: absolute; left: 0px; top: 200px;"><input type="checkbox" value="checkbox"/><span>checkbox</span></span> |
| <span class="list" id="palette:list" style="position: absolute; left: 0px; top: 240px;"><select><option value="list">list</option></select></span> |
| <span class="link" id="palette:link" style="position: absolute; left: 0px; top: 280px;"><a href="/"><span>link</span></a></span> |
| <span class="text" id="palette:text" style="position: absolute; left: 0px; top: 320px;"><span>text</span></span> |
| <span class="img" id="palette:img" style="position: absolute; left: 0px; top: 360px;"><img src=""/></span> |
| |
| </div> |
| |
| <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']; |
| $('source').innerHTML = '[<a href="/pages/' + appname + '">atom</a> <a href="/appcache/' + appname + '/app.html">json</a>]'; |
| |
| /** |
| * Return the page in an ATOM entry. |
| */ |
| function atompage(doc) { |
| var entry = atom.readATOMEntryDocument(doc); |
| var item = caddr(entry); |
| return cddr(item); |
| } |
| |
| /** |
| * 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); |
| if (isNil(el)) { |
| |
| // Create a default empty page if necessary |
| buffer.innerHTML = '<DIV id="page">\n</DIV>\n'; |
| } else { |
| buffer.innerHTML = writeStrings(writeXML(atompage(doc), false)); |
| } |
| |
| // Append page nodes to editor |
| map(function(e) { |
| e.style.left = ui.csspos(e.style.left) + 250; |
| edit.appendChild(e); |
| return page.cover(e); |
| }, nodeList(buffer.childNodes[0].childNodes)); |
| |
| savedpagexhtml = pagexhtml(); |
| }); |
| } |
| |
| /** |
| * 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"><item>' + |
| savedpagexhtml + '</item></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() { |
| if (savedpagexhtml == pagexhtml()) |
| return false; |
| $('saveButton').value = 'Save now'; |
| |
| // Autosave after 3 seconds |
| setTimeout(function() { |
| if (savedpagexhtml == pagexhtml()) |
| return false; |
| return save(); |
| }, 3000); |
| return true; |
| } |
| |
| // Initialize the page editor |
| var edit = $('page'); |
| page.edit(edit, $('widgetName'), $('widgetText'), onpagechange); |
| |
| // Get and display the current app page |
| getpage(appname, edit); |
| |
| </script> |
| </body> |
| </html> |
