Return-Path: X-Original-To: apmail-corinthia-commits-archive@minotaur.apache.org Delivered-To: apmail-corinthia-commits-archive@minotaur.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 0777E17D8F for ; Thu, 12 Mar 2015 10:50:48 +0000 (UTC) Received: (qmail 36963 invoked by uid 500); 12 Mar 2015 10:50:13 -0000 Delivered-To: apmail-corinthia-commits-archive@corinthia.apache.org Received: (qmail 36946 invoked by uid 500); 12 Mar 2015 10:50:13 -0000 Mailing-List: contact commits-help@corinthia.incubator.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@corinthia.incubator.apache.org Delivered-To: mailing list commits@corinthia.incubator.apache.org Received: (qmail 36937 invoked by uid 99); 12 Mar 2015 10:50:13 -0000 Received: from athena.apache.org (HELO athena.apache.org) (140.211.11.136) by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 12 Mar 2015 10:50:13 +0000 X-ASF-Spam-Status: No, hits=-2000.0 required=5.0 tests=ALL_TRUSTED,T_RP_MATCHES_RCVD X-Spam-Check-By: apache.org Received: from [140.211.11.3] (HELO mail.apache.org) (140.211.11.3) by apache.org (qpsmtpd/0.29) with SMTP; Thu, 12 Mar 2015 10:50:08 +0000 Received: (qmail 36794 invoked by uid 99); 12 Mar 2015 10:49:48 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Thu, 12 Mar 2015 10:49:48 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id E90F5E0A4E; Thu, 12 Mar 2015 10:49:47 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit From: pmkelly@apache.org To: commits@corinthia.incubator.apache.org Message-Id: X-Mailer: ASF-Git Admin Mailer Subject: incubator-corinthia git commit: Add initial version of web-based editor Date: Thu, 12 Mar 2015 10:49:47 +0000 (UTC) X-Virus-Checked: Checked by ClamAV on apache.org Repository: incubator-corinthia Updated Branches: refs/heads/master 6ee0514cd -> ebe52bae4 Add initial version of web-based editor Project: http://git-wip-us.apache.org/repos/asf/incubator-corinthia/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-corinthia/commit/ebe52bae Tree: http://git-wip-us.apache.org/repos/asf/incubator-corinthia/tree/ebe52bae Diff: http://git-wip-us.apache.org/repos/asf/incubator-corinthia/diff/ebe52bae Branch: refs/heads/master Commit: ebe52bae4bc36b477f12720c7312e843d7db2b55 Parents: 6ee0514 Author: Peter Kelly Authored: Thu Mar 12 17:49:23 2015 +0700 Committer: Peter Kelly Committed: Thu Mar 12 17:49:23 2015 +0700 ---------------------------------------------------------------------- consumers/web/client/builtin.css | 36 + consumers/web/client/images/bold-on.png | Bin 0 -> 2288 bytes consumers/web/client/images/bold.png | Bin 0 -> 4847 bytes consumers/web/client/images/indent.png | Bin 0 -> 4257 bytes consumers/web/client/images/italic-on.png | Bin 0 -> 1909 bytes consumers/web/client/images/italic.png | Bin 0 -> 4485 bytes consumers/web/client/images/list-none-on.png | Bin 0 -> 1805 bytes consumers/web/client/images/list-none.png | Bin 0 -> 4364 bytes consumers/web/client/images/list-ol-on.png | Bin 0 -> 1977 bytes consumers/web/client/images/list-ol.png | Bin 0 -> 4509 bytes consumers/web/client/images/list-ul-on.png | Bin 0 -> 1807 bytes consumers/web/client/images/list-ul.png | Bin 0 -> 4385 bytes consumers/web/client/images/outdent.png | Bin 0 -> 4292 bytes consumers/web/client/images/underline-on.png | Bin 0 -> 2082 bytes consumers/web/client/images/underline.png | Bin 0 -> 4671 bytes consumers/web/client/index.html | 88 ++ consumers/web/client/interface.js | 371 +++++++ consumers/web/client/sample.html | 1130 +++++++++++++++++++++ consumers/web/client/ui.js | 75 ++ consumers/web/client/uxeditor.js | 344 +++++++ 20 files changed, 2044 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/builtin.css ---------------------------------------------------------------------- diff --git a/consumers/web/client/builtin.css b/consumers/web/client/builtin.css new file mode 100644 index 0000000..fd6e6b6 --- /dev/null +++ b/consumers/web/client/builtin.css @@ -0,0 +1,36 @@ +.uxwrite-autocorrect { background-color: #c0ffc0; } +.uxwrite-selection { background-color: rgb(201,221,238); } +.uxwrite-spelling { background-color: rgb(255,128,128); } +.uxwrite-match { background-color: rgb(255,255,0); } + +span.footnote::before { + content: " [ "; + color: #157efb; + font-weight: bold; +} + +span.footnote::after { + content: " ] "; + color: #157efb; + font-weight: bold; +} + +span.footnote { + color: #606060; +} + +span.endnote::before { + content: " [ "; + color: #ca1cff; + font-weight: bold; +} + +span.endnote::after { + content: " ] "; + color: #ca1cff; + font-weight: bold; +} + +span.endnote { + color: #606060; +} http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/bold-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/bold-on.png b/consumers/web/client/images/bold-on.png new file mode 100644 index 0000000..b06b225 Binary files /dev/null and b/consumers/web/client/images/bold-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/bold.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/bold.png b/consumers/web/client/images/bold.png new file mode 100644 index 0000000..7e68024 Binary files /dev/null and b/consumers/web/client/images/bold.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/indent.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/indent.png b/consumers/web/client/images/indent.png new file mode 100644 index 0000000..904a6aa Binary files /dev/null and b/consumers/web/client/images/indent.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/italic-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/italic-on.png b/consumers/web/client/images/italic-on.png new file mode 100644 index 0000000..696047a Binary files /dev/null and b/consumers/web/client/images/italic-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/italic.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/italic.png b/consumers/web/client/images/italic.png new file mode 100644 index 0000000..93ca99b Binary files /dev/null and b/consumers/web/client/images/italic.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-none-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-none-on.png b/consumers/web/client/images/list-none-on.png new file mode 100644 index 0000000..b4022fc Binary files /dev/null and b/consumers/web/client/images/list-none-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-none.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-none.png b/consumers/web/client/images/list-none.png new file mode 100644 index 0000000..09b2555 Binary files /dev/null and b/consumers/web/client/images/list-none.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-ol-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-ol-on.png b/consumers/web/client/images/list-ol-on.png new file mode 100644 index 0000000..01e44f3 Binary files /dev/null and b/consumers/web/client/images/list-ol-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-ol.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-ol.png b/consumers/web/client/images/list-ol.png new file mode 100644 index 0000000..7555fbd Binary files /dev/null and b/consumers/web/client/images/list-ol.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-ul-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-ul-on.png b/consumers/web/client/images/list-ul-on.png new file mode 100644 index 0000000..a034288 Binary files /dev/null and b/consumers/web/client/images/list-ul-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/list-ul.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/list-ul.png b/consumers/web/client/images/list-ul.png new file mode 100644 index 0000000..22d6e50 Binary files /dev/null and b/consumers/web/client/images/list-ul.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/outdent.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/outdent.png b/consumers/web/client/images/outdent.png new file mode 100644 index 0000000..582af61 Binary files /dev/null and b/consumers/web/client/images/outdent.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/underline-on.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/underline-on.png b/consumers/web/client/images/underline-on.png new file mode 100644 index 0000000..250268a Binary files /dev/null and b/consumers/web/client/images/underline-on.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/images/underline.png ---------------------------------------------------------------------- diff --git a/consumers/web/client/images/underline.png b/consumers/web/client/images/underline.png new file mode 100644 index 0000000..9e0564c Binary files /dev/null and b/consumers/web/client/images/underline.png differ http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/index.html ---------------------------------------------------------------------- diff --git a/consumers/web/client/index.html b/consumers/web/client/index.html new file mode 100644 index 0000000..9a28b67 --- /dev/null +++ b/consumers/web/client/index.html @@ -0,0 +1,88 @@ + + + + + + + + + + + + +
+ +
+
+Formatting +
+
+
+ +
+ + + + http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/interface.js ---------------------------------------------------------------------- diff --git a/consumers/web/client/interface.js b/consumers/web/client/interface.js new file mode 100644 index 0000000..073d590 --- /dev/null +++ b/consumers/web/client/interface.js @@ -0,0 +1,371 @@ +// 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. + +function UXInterface(core) +{ + var self = this; + var elemFormatting = document.getElementById("_formatting"); + var setupDone = false; + var callbacks = null; + var lastReceivedFormatting = {}; + var formatting = {}; + var cursorDiv = null; + var dragging = false; + var buttons = {}; + + function hideCursor() + { + if (cursorDiv != null) { + core.cdoc.body.removeChild(cursorDiv); + cursorDiv = null; + } + } + + function hideOverlaysWhileExecuting(fun) + { + if (cursorDiv != null) + cursorDiv.style.visibility = "hidden"; + try { + return fun(); + } + finally { + if (cursorDiv != null) + cursorDiv.style.visibility = "visible"; + } + } + + // DOM event handlers + function mouseDown(event) + { + var x = event.clientX; + var y = event.clientY; + + var targetClass = event.target.getAttribute("class"); + console.log("mouseDown "+event.clientX+", "+event.clientY+", class "+targetClass); + console.log("body height = "+core.cdoc.body.getBoundingClientRect().height); + + dragging = true; + hideOverlaysWhileExecuting(function() { + core.op.selection.dragSelectionBegin(x,y,false); + }); + + updateFormatting(); + event.preventDefault(); + } + + function mouseUp(event) + { + dragging = false; + updateFormatting(); + event.preventDefault(); + } + + function mouseMove(event) + { + if (dragging) { + core.op.selection.dragSelectionUpdate(event.clientX,event.clientY,false); + updateFormatting(); + } + event.preventDefault(); + } + + + function keyDown(event) + { + if (event.keyCode == 13) { + core.op.cursor.enterPressed(); + updateFormatting(); + event.preventDefault(); + } + else if (event.keyCode == 8) { + core.op.cursor.deleteCharacter(); + updateFormatting(); + event.preventDefault(); + } + } + + function keyUp(event) + { + if ((event.keyCode == 13) || (event.keyCode == 8)) + event.preventDefault(); + } + + function keyPress(event) + { + core.op.cursor.insertCharacter(String.fromCharCode(event.charCode)); + updateFormatting(); + event.preventDefault(); + } + + + + + + + + + + + + + + function markFormattingDirty() + { + var changes = {}; + for (var key in formatting) + changes[key] = formatting[key]; + + // When calling updateFormatting(), we have to ensure that any properties we + // wish to clear are present in the object, but set to null. While the following + // code might appear to do nothing, what it's actually searching for are missing + // properties, which it explicitly adds as null. + for (var key in lastReceivedFormatting) { + console.log("lastReceivedFormatting["+JSON.stringify(key)+"] = "+ + JSON.stringify(lastReceivedFormatting[key])); + if (changes[key] == null) + changes[key] = null; + } + + console.log("caling applyFormattingChanges: "+JSON.stringify(changes)); + core.op.formatting.applyFormattingChanges(null,changes); + updateFormatting(); + } + + function toggleBold() + { + console.log("toggleBold()"); + if (formatting["font-weight"] != null) + delete formatting["font-weight"]; + else + formatting["font-weight"] = "bold"; + markFormattingDirty(); + } + + function toggleItalic() + { + console.log("toggleItalic()"); + if (formatting["font-style"] != null) + delete formatting["font-style"]; + else + formatting["font-style"] = "italic"; + markFormattingDirty(); + } + + function toggleUnderline() + { + console.log("toggleUnderline()"); + if (formatting["text-decoration"] != null) + delete formatting["text-decoration"]; + else + formatting["text-decoration"] = "underline"; + markFormattingDirty(); + } + + function pressListUL() + { + if (formatting["-uxwrite-in-ul"] != null) + core.op.lists.clearList(); + else + core.op.lists.setUnorderedList(); + markFormattingDirty(); + } + + function pressListOL() + { + if (formatting["-uxwrite-in-ol"] != null) + core.op.lists.clearList(); + else + core.op.lists.setOrderedList(); + markFormattingDirty(); + } + + function pressListOutdent() + { + core.op.lists.decreaseIndent(); + markFormattingDirty(); + } + + function pressListIndent() + { + var inUL = formatting["-uxwrite-in-ul"]; + var inOL = formatting["-uxwrite-in-ol"]; + if (!inUL && !inOL) + core.op.lists.setUnorderedList(); + else + core.op.lists.increaseIndent(); + markFormattingDirty(); + } + + + + + + function retrieveStyles() + { + console.log("retrieveStyles: this = "+this.constructor.name); + console.log("retrieveStyles: self = "+self.constructor.name); + } + + function updateOutline() + { + } + + function shallowCopy(object) + { + var result = {}; + for (var key in object) + result[key] = object[key]; + return result; + } + + function updateFormatting() + { + console.log("updateFormatting()"); + lastReceivedFormatting = core.op.formatting.getFormatting(); + formatting = shallowCopy(lastReceivedFormatting); + console.log("formatting = "+JSON.stringify(formatting)); + while (elemFormatting.firstChild != null) + elemFormatting.removeChild(elemFormatting.firstChild); + for (var key in formatting) { + var str = key+" = "+formatting[key]; + elemFormatting.appendChild(document.createTextNode(str+"\n")); + } + + var inUL = formatting["-uxwrite-in-ul"]; + var inOL = formatting["-uxwrite-in-ol"]; + + buttons.bold.setValue(formatting["font-weight"] != null); + buttons.italic.setValue(formatting["font-style"] != null); + buttons.underline.setValue(formatting["text-decoration"] != null); + buttons.listUL.setValue(inUL); + buttons.listOL.setValue(inOL); + } + + function setup(completion) + { + var toolbar = document.getElementById("_toolbar"); + + buttons.bold = new Button("images/bold"); + buttons.italic = new Button("images/italic"); + buttons.underline = new Button("images/underline"); + buttons.listUL = new Button("images/list-ul"); + buttons.listOL = new Button("images/list-ol"); + buttons.listOutdent = new Button("images/outdent"); + buttons.listIndent = new Button("images/indent"); + + toolbar.appendChild(buttons.bold.element); + toolbar.appendChild(buttons.italic.element); + toolbar.appendChild(buttons.underline.element); + toolbar.appendChild(buttons.listUL.element); + toolbar.appendChild(buttons.listOL.element); + toolbar.appendChild(buttons.listOutdent.element); + toolbar.appendChild(buttons.listIndent.element); + + core.callbacks = callbacks; + core.setup(function() { + setupDone = true; + + retrieveStyles(); + updateOutline(); + updateFormatting(); + + buttons.bold.onMouseDown = toggleBold; + buttons.italic.onMouseDown = toggleItalic; + buttons.underline.onMouseDown = toggleUnderline; + buttons.listUL.onMouseDown = pressListUL; + buttons.listOL.onMouseDown = pressListOL; + buttons.listOutdent.onMouseDown = pressListOutdent; + buttons.listIndent.onMouseDown = pressListIndent; + + core.cdoc.documentElement.addEventListener("mousedown",mouseDown,true); + core.cdoc.documentElement.addEventListener("mouseup",mouseUp,true); + core.cdoc.documentElement.addEventListener("mousemove",mouseMove,true); + + document.body.addEventListener("keydown",keyDown,true); + document.body.addEventListener("keyup",keyUp,true); + document.body.addEventListener("keypress",keyPress,true); + + if (completion != null) + completion(); + }); + } + + callbacks = { + debug: function(str) { + console.log("cb debug("+JSON.stringify(str)+")"); + }, + error: function(error,type) { + console.log("cb error("+JSON.stringify(error)+","+ + JSON.stringify(type)+")"); + }, + addOutlineItem: function(itemId,type,title) { + console.log("cb addOutlineItem("+JSON.stringify(itemId)+","+ + JSON.stringify(type)+","+ + JSON.stringify(title)+")"); + }, + updateOutlineItem: function(itemId,title) { + console.log("cb updateOutlineItem("+JSON.stringify(itemId)+","+ + JSON.stringify(title)+")"); + }, + removeOutlineItem: function(itemId) { + console.log("cb removeOutlineItem("+JSON.stringify(itemId)+")"); + }, + outlineUpdated: function() { + console.log("cb outlineUpdated()"); + }, + setCursor: function(x,y,width,height) { + console.log("cb setCursor("+x+","+y+","+width+","+height+")"); + + + if (cursorDiv == null) { + cursorDiv = document.createElement("div"); + core.cdoc.body.appendChild(cursorDiv); + } + + var iframeRect = core.iframe.getBoundingClientRect(); + cursorDiv.style.display = "block"; + cursorDiv.style.position = "absolute"; + cursorDiv.style.backgroundColor = "blue"; + cursorDiv.style.left = x+"px"; + cursorDiv.style.top = y+"px"; + cursorDiv.style.width = width+"px"; + cursorDiv.style.height = height+"px"; + cursorDiv.setAttribute("class","cursor"); + }, + setSelectionHandles: function(x1,y1,height1,x2,y2,height2) { + console.log("cb setSelectionHandles("+x1+","+y1+","+height1+","+ + x2+","+y2+","+height2+")"); + hideCursor(); + }, + setTableSelection: function(x,y,width,height) { + console.log("cb setTableSelection("+x+","+y+","+width+","+height+")"); + hideCursor(); + }, + setSelectionBounds: function(left,top,right,bottom) { + console.log("cb setSelectionBounds("+left+","+top+","+right+","+bottom+")"); + }, + clearSelectionHandlesAndCursor: function() { + console.log("cb clearSelectionHandlesAndCursor()"); + hideCursor(); + }, + updateAutoCorrect: function() { + console.log("cb updateAutoCorrect()"); + }, + }; + + this.setup = setup; +} http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/sample.html ---------------------------------------------------------------------- diff --git a/consumers/web/client/sample.html b/consumers/web/client/sample.html new file mode 100644 index 0000000..c7a584a --- /dev/null +++ b/consumers/web/client/sample.html @@ -0,0 +1,1130 @@ + + + + + + + + + + + + + +

Introduction

+ +

UX Write is designed for long-form, professional writing tasks such as + reports, research papers, theses, and books. With an emphasis on technical + and academic writing, it provides tools to work with the content and + structure of your document separately from its presentation. + The latter is controlled by styles, such as headings, normal + paragraphs, and the document title.

+ +

What you see is what you mean

+ +

The design philosophy of UX Write is “what you see is what you mean”, or + WYSIWYM. By separating content from presentation, and making the logical + structure of documents explicit, it is possible for the layout and rendering + of text to adapt to the output medium. This means your documents look just as + good on a 30“ desktop monitor as they do on a 7” tablet or the printed + page.

+ +

The structure of your document — such as the hierarchy of section headings + — also enables other useful features. A table of contents is generated + automatically, without you having to manually update text or page numbers. + Cross-references can be added and kept up-to-date as section numbers change. + The outline view, accessible from the toolbar, displays all the sections, + figures, and tables in your document, allowing you to navigate around + easily.

+ +

A contrasting approach is “what you see is what you get”, or WYSIWYG, + supported by programs like Microsoft Word and Pages. This attempts to + replicate the precise layout of a printed page on screen during editing, + regardless of whether you're using a desktop computer or a mobile phone. + While useful for some purposes, we believe it's the wrong approach for a + mobile word processor. UX Write is unapologetically WYSIWYM, and is optimised + for readability and ease-of-use across both iPhone and iPad.

+ +

If you've got this document open for editing, take a moment + now to explore the document outline (third toolbar button from right). Try + adjusting the text size in the “Look & feel” section of the settings menu + (second from right) to suit your reading preferences. Rotate your screen and + watch as the text reflows.

+ +

File formats

+ +

The native file format of UX Write is HTML — the language of the web. You + can view HTML documents on any device or operating system out there, and + publish online without any need for file conversion. If you open a Microsoft + Word document, it is temporarily converted to HTML for editing, and then + saved back again afterwards. Any parts of the document that could not be + converted, such as embedded spreadsheets, are preserved in the original Word + document.

+ +

Basic features

+ +

Accessing your Documents

+ +

You can store your documents on your device only — under + “My iPad” or “My iPhone” — or sync them with a cloud service such as Dropbox. + In the former case, you can transfer files to your computer using iTunes file sharing, and in the + latter case you can either access your files through the respective service's + website, or by installing the service's software on your computer. Box, + Dropbox, Google Drive, and Microsoft OneDrive all have clients available for + Windows and Mac which you can install for free.

+ +

File synchronisation happens automatically. Whenever a + document is saved, it is uploaded  in the background, while you continue + working. If you have your computer set up for syncing, you will usually see + these changes appear within a few seconds. Within UX Write, you can check for + updates to existing documents using the refresh button.

+ +

If you're working offline, you can still add and change documents in any + of the Box, Dropbox, Google Drive, OneDrive or WebDAV locations you have set + up. When you have an Internet connection available again, just launch UX + Write, and it will attempt to upload the documents. To move, copy, or delete + documents, simply tap the “Edit” button in the file browser.

+ +

Tip: We recommend creating and storing all your + documents on Dropbox, because it keeps backup copies of every version + uploaded for 30 days. You can view and recover old versions of your document + if the need arises — see Section 4.1.

+ +

Editing

+ +

Text editing works in much the same way as in any other iOS app, but with + a few enhancements:

+ +
    +
  • +

    An extra row of keys above the keyboard provides access to common + punctuation symbols

    +
    • + +
  • +

    The two leftmost keys let you move the cursor or select text by + holding them down to bring up a virtual trackpad. Swipe with one finger + to move slowly, and two fingers to move faster.

    +
    • + +
  • +

    The formatting key, when held down, replaces the other top-row keys + with keys for basic formatting options like bold, italic, and lists

    +
    • + +
  • +

    The autocorrect key allows you to confirm or revert the latest + autocorrect replacement (see Section 2.5 for more + details)

    +
    • + +
  • +

    You can triple-tap anywhere in the text to select the whole + paragraph

    +
    • +
+ +

Note: The keyboard extensions are only available on the iPad.

+ +

UX Write also includes full support for external bluetooth keyboards, and + supports all of the standard keyboard shortcuts:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Keyboard shortcuts +
+

Cmd-B

+ 		+

Bold

+
+

Cmd-I

+ 		+

Italic

+
+

Cmd-U

+ 		+

Underline

+
+

Cmd-X

+ 		+

Cut

+
+

Cmd-C

+ 		+

Copy

+
+

Cmd-V

+ 		+

Paste

+
+

Cmd-A

+ 		+

Select all

+
+

Option-Left/Right

+ 		+

Move back or forward one word

+
+

Option-Up/Down

+ 		+

Move up or down one paragraph

+
+

Cmd-Left/Right

+ 		+

Move to start or end of line

+
+

Cmd-Up/Down

+ 		+

Move to start of end of document

+
+

Shift-Arrow key (+ Cmd or Option)

+ 		+

Any of the above, but for selection

+
+ +

Styles

+ +

All formatting in UX Write, with the exception of + bold, italic, underline and lists, is controlled using styles — + such as headings and normal paragraphs. A style serves two purposes:

+ +
    +
  1. +

    It determines the formatting of the text, such + as the font, colour, and paragraph alignment. When a style is modified, + all text associated with that style automatically adopts the new + formatting, making it easy to ensure consistent presentation throughout + your document.

    +
    2. + +
  2. +

    It indicates the purpose of a piece of text, + such as a heading or title. UX Write uses this information for various + purposes, such as building a table of contents, displaying the outline + view, and determining the possible targets for cross-references.

    +
    3. +
+ +

UX Write Basic Edition provides a plain set of built-in styles for + headings, block quotes, a document title, and normal text. UX Write + Professional Edition allows you to modify the appearance of these built-in + styles, as well as create your own; see Section 3.1 for details.

+ +

Auto correct

+ +

Automatic correction of typing mistakes can sometimes lead to unexpected + results, since no piece of software can accurately guess what you meant to + type in every case. When UX Write makes a correction, it highlights it in + green, and gives you the opportunity to confirm whether or not it has made + the right replacement.

+ +

Tapping on a highlighted word brings up a menu that allows you to accept + the correction, revert to the original, or bring up a list of more + suggestions, with the option to add the word to the custom dictionary. Any + substitutions you explicitly accept are remembered by UX Write, and will + occur automatically the next time you make the same typing mistake. You can + access the custom dictionary and list of automatic substitutions via the + settings menu.

+ +

Outline Navigation

+ +

You can use the outline view — the third toolbar button + from the right — to view the structure of your document and quickly jump + between sections. This is particularly useful for large documents, where + scrolling would be a hassle.

+ +

The outline view is based on the headings, figures, and + tables in your document. For headings to be included, you must mark them as + such using the formatting menu. Tables and figures are always included. As + you modify your document by adding, removing, or changing content, the + outline is automatically kept up-to-date. UX Write Professional Edition also + allows you to edit the outline — see Section 3.4 for + details.

+ +

In landscape mode on the iPad, you can “pin” the outline to + the left of your screen, and it will be displayed alongside your document. To + pin or unpin it, use the button at the top of the outline. To hide the + outline when it is pinned, press the 'X' button.

+ +

The outline view corresponds directly to what in the table + of contents, list of figures, and list of tables, if you have added any of + these to your document. See Section 3.9 for + details.

+ +

Professional features

+ +

This section describes features that are only available in + UX Write Professional Edition. You can upgrade to this by either purchasing + it outright, or by subscribing on a monthly basis. Go to the settings menu + and select “View upgrade options” to see details.

+ +

Styles

+ +

Styles, introduced in Section 2.3, define both the formatting and purpose of text in your + document. Heading styles, for instance, denote the document outline, and are + used for constructing the table of contents. Each style can have different + formatting properties, such as fonts, colours, margins, paragraph alignment, + borders, and more.

+ +

Using styles enables you to achieve consistent formatting + throughout your entire document. Instead of manually changing formatting on a + case-by-case basis — as many other word processors encourage you to do — you + adjust a style once and it applies to all text in the document associated + with the style. This is useful for ensuring your document complies with + requirements from your organisation or publisher.

+ +

UX Write provides a number of built-in styles, based on + those present in HTML. There are six levels of headings, in addition + to normal paragraphs and block quotes. You can change the way any of + these are formatted, and also add your own custom styles for specific + purposes. For example, this document contains a “Tip” style, which appears as + a light-grey box with rounded corners, and left and right margins that place + it in the center of the page.

+ +

To manage styles, go to the formatting menu, and select + “Edit Styles”. This will bring up the style manager, with a list of styles on + the left, and formatting properties on either the top or right of the screen + (depending on your screen orientation).

+ +

To edit an existing style, simply select it in the list, and change any of + the formatting properties. You will see a preview displayed below the + controls that shows an example piece of text as it would be displayed in the + document.

+ +

To add a new style, scroll down to the bottom of the list and tap next to + the green '+' button. Type in your style name and press enter. You can now + set up the formatting for this style, and subsequently select it from the + formatting menu in the editor.

+ +

Direct formatting is still available if you want it, via + the item near the bottom of the formatting menu. This gives you the same + properties as are available in the style editor, but the changes only apply + to the current selection.

+ +

Styles you create in UX Write are compatible with Word, and + you can also edit and use the styles in Word itself.

+ +

Tip: If you want to re-use your styles with multiple + documents, you can set up a template for creating new documents. See Section + 3.13 for details.

+ +

Formatting

+ +

There are two ways to adjust formatting:

+ +
    +
  • +

    Styles. You can select these from the formatting + menu; they apply at the paragraph level. Generally, you should use styles + to control formatting, as this provides structural information about the + document (in the case of headings), and allows you to easily change + formatting throughout the whole document for any given style.

    +
    • + +
  • +

    Direct formatting. You can also select this from + the formatting menu; this is intended for “one-off” cases where you wish + to format a particular piece of text without defining a style, such as + highlighting something important. You have access to all the same + formatting options as you do for styles. Direct formatting corresponds to + what you would see in the toolbar of Microsoft Word; we've deliberately + de-emphasised it in the user interface to encourage the use of + styles.

    +
    • +
+ +

All of the formatting properties directly correspond to + those of CSS (Cascading Style Sheets), the web standard used in conjunction + with HTML. In most cases, the CSS formatting properties UX Write supports can + also be translated directly to those of Microsoft Word; the main exception is + that Word has a slightly different way of handling paragraph borders and + margins.

+ +

Formatting properties are divided into two categories: + text and paragraph. Text properties, in the case of direct + formatting, can be applied to only a portion of a paragraph. The rest apply + to the paragraph as a whole.

+ +

Document structure

+ +

Most formal documents like reports and books are divided + into multiple levels of sections, with cross-references between + them, and a table of contents at the front. Styles are key to + achieving this, because the program needs to be told which pieces of text are + headings — it can't simply guess that “18 point bold” means a second-level + heading. By using styles to mark all your headings, you can take advantage of + the following features:

+ +
    +
  • +

    Table of contents (Insert menu)

    +
    • + +
  • +

    Cross-references (Insert menu)

    +
    • + +
  • +

    Automatic numbering

    +
    • + +
  • +

    Outline editor (Outline button on toolbar)

    +
    • +
+ +

Whenever a section number changes as a result of changes + earlier in the document, its number is automatically updated, as are those of + all references that point to it, and the table of contents. The same is true + of figures and tables. When you print or generate a PDF, page numbers are + automatically calculated for you and included in the table of contents.

+ +

Outline editing

+ +

You can rearrange and delete sections in the outline by + pressing the “Edit button”. To change the order of sections, tap and drag the + section name to your desired position. To delete an item, just press the red + button on the left, and confirm by pressing the “Delete” button that appears. + All changes you make in the outline editor are immediately reflected in the + document, including updates to numbering.

+ +

Find and replace

+ +

On iPad, a search bar is visible at the top of the screen, + and you can just type in your search term and hit enter. Tap the down arrow + to view options, including replacement text. On iPhone, the search bar and + options are accessible via the settings menu.

+ +

By default, searching will look for the exact text you have + entered, with case sensitivity determined by whether you have selected that + option. Alternatively, you can search and replace text using regular + expressions, which allow you to enter patterns that can match multiple + snippets of text. Regular expression support is mainly intended for advanced + users, such as programmers, who are already familiar with the concept. If you + would like to learn more, we recommend the tutorial at at regexone.com.

+ +

Spell checking

+ +

The spell checking option will search through your document + and highlight any instances of words it finds which are not in the system or + custom dictionaries.

+ +

The language used is determined by the following three + settings, in order:

+ +
    +
  • +

    Language for the current document (Settings > This + Document > Language)

    +
    • + +
  • +

    Default language for UX Write (Settings > + Application > Language)

    +
    • + +
  • +

    System language (set in the Settings app of your iPad + or iPhone)

    +
    • +
+ +

There is currently no support for handling multiple + languages in a single document. The set of languages available for spell + checking is determined by the built-in dictionaries provided by the operating + system, which as of 7.1 are:

+ +
    +
  • +

    Danish

    +
    • + +
  • +

    Dutch

    +
    • + +
  • +

    English (Australia)

    +
    • + +
  • +

    English (Canada)

    +
    • + +
  • +

    English (United Kingdom)

    +
    • + +
  • +

    English (United States)

    +
    • + +
  • +

    French

    +
    • + +
  • +

    German

    +
    • + +
  • +

    Italian

    +
    • + +
  • +

    Portuguese (Brazil)

    +
    • + +
  • +

    Portuguese (Portugal)

    +
    • + +
  • +

    Russian

    +
    • + +
  • +

    Spanish

    +
    • + +
  • +

    Swedish

    +
    • +
+ +

Word count

+ +

You can view the word count for your document from the + settings menu. This also includes the total number of characters and + paragraphs.

+ +

Automatic numbering

+ +

UX Write can assign numbers to all headings, figures, and + tables automatically. For headings, you can turn this on using the “Heading + numbering” option in the settings menu. For figures and tables, you can set + this on an individual basis either at insertion time, or by tapping on the + item and selecting “Figure” or “Table” in the popup menu.

+ +

Numbering is updated automatically as the document changes. + If you add or remove a heading, change it's nesting level (e.g. + from Heading 2 to Heading 1), or move sections around using the outline + editor, the numbers will be updated to reflect the changes. The same is also + true for figures and tables.

+ +

All cross-references, plus the table of contents, list of + figures, and list of tables (if present) are also kept up to date whenever + the numbers change. This ensures that you never have out-of-date references + and you don't have to remember to manually update other parts of the + document. 

+ +

Table of contents

+ +

While it's possible to manually create a table of contents + in any word processor, doing so is tedious, particularly when keeping all the + section titles and page numbers up to date. In UX Write, inserting a table of + contents causes it to be constructed automatically based on the headings, + just like the outline view described in Section 3.4. And like automatic numbering and the outline view, every + time you add or remove a section, or change its title, the table of contents + automatically updates to reflect the change.

+ +

Page numbers are not displayed in the table of + contents during editing or when saving as a HTML file, as neither has any + concept of distinct pages. When you print or export to PDF, the correct page + numbers will be filled in for you. There's no need to do this manually.

+ +

You can also insert a list of figures or list of tables, + which work similarly to the table of contents. The text shown in these comes + from the captions, with the numbers shown in the same way as section numbers. + As with the table of contents, these are always kept in sync with the rest of + document.

+ +

If your document is in HTML format, the table of contents, + list of figures, and list of tables will appear as links that can be clicked + to jump to the appropriate section when viewed in a web browser.

+ +

Cross-references

+ +

You can insert a cross-reference to any section heading, + figure, or table in your document. When you select this option from the + insert menu, you'll see a document outline (the same as in the outline view), + and can select a target of the cross-reference.

+ +

References appear as hyperlinks in the document. When you + tap on one, you'll have the option to either go to the target of the + reference, or change it to point to a different section, figure, or + table.

+ +

If your reference is to a numbered heading, figure, or + table, the number will be updated whenever that of its target changes. If the + target is not numbered, the reference will contain the text instead, and will + also update whenever the text changes.

+ +

Footnotes and endnotes

+ +

Because UX Write uses a continuous layout for editing, in + which the document is not divided into separate pages, footnotes are + displayed inline with the textA footnote looks like + this. For consistency, and to avoid the need to jump back and forth + between the content and the end of the document, endnotes are handled in the + same wayAn endnote looks like this.

+ +

HTML does not have any explicit support for either + footnotes or endnotes, in the sense that there is no <footnote> element + that can clearly indicate its purpose. UX Write uses <span> elements + with a class of “footnote” or “endnote” to represent these.

+ +

Microsoft Word documents do have explicit support + for both, so when editing a .docx file, UX Write will save them in the + appropriate format. When you open the document in Word, you'll see footnotes + at the bottom of the page, and endnotes at the end of the document.

+ +

To have footnotes and endnotes appear in their correct + positions in a print or PDF output, you must use the LaTeX typesetting option + (see Section 3.12). WebKit does not have the + capabilities to support pagination features.

+ +

Printing and PDF export

+ +

Two different typesetting systems are supported for + producing print and PDF output. You can choose between these using the + “Typesetting” option under the settings menu:

+ +
    +
  • +

    WebKit (recommended). Safari's layout engine, + optimised for on-screen rendering of HTML content.

    + +

    This is the layout engine used for displaying your + documents during editing, and the PDF files it generates match exactly + the formatting you see on screen; though line breaks will be different + for the printed page.

    +
    • + +
  • +

    LaTeX (new). The de-facto standard in many + scientific disciplines, optimised for high-quality typography and + paginated output.

    + +

    Support for LaTeX is new in 2.0. Currently, only + limited formatting options are supported, and English is the only + supported language. We'll be improving this throughout the 2.x release + cycle, with support for other languages and many other features, such as + equations, bibliographies, and headers/footers.

    +
    • +
+ +

Of these two, only LaTeX is capable of correctly + typesetting footnotes and endnotes, as well as other pagination-dependent + features we'll be adding in the future. If you print or export to PDF using + WebKit, footnotes and endnotes will appear inline with the text, as they do + during editing.

+ +

Creating Templates

+ +

Often you'll want to create a series of documents which all have a + consistent look and feel, based on styles that you have set up, as described + in Section 3.1. While UX Write does not have a “proper” + template feature (yet), you can get the same effect by creating a normal + document with your desired settings, and treating that as a starting point + for new documents.

+ +

To create a template:

+ +
    +
  1. +

    Create a new document, calling it “My template” (or whatever you + like)

    +
    2. + +
  2. +

    Open the document and use the style manager to change the default + fonts, colours, and other formatting properties that you want

    +
    3. + +
  3. +

    Create any custom styles that you will use regularly — e.g. “Title” or + “Abstract”

    +
    4. +
+ +

To create a new document based on a template:

+ +
    +
  1. +

    Tap and hold on the template document in the file manager

    +
    2. + +
  2. +

    Select “Duplicate”

    +
    3. + +
  3. +

    Type in the name for your new document

    +
    4. + +
  4. +

    Open the new document and start writing

    +
    5. +
+ +

We'll be adding a more sophisticated mechanism for browsing and previewing + template files, along with a few nice samples, in a future update.

+ +

Common Tasks

+ +

Dropbox Versioning

+ +

One of the best features of Dropbox is that it automatically keeps old + versions of every file that's uploaded to it. It's always been possible to + log into the Dropbox website and access these old versions via their web + interface, but now you can do it directly from within UX Write itself.

+ +

If you ever need to recover an older version of a document, simply tap and + hold on it in the file browser, and select “Versions” in the popup menu. You + can then browse through all the versions that Dropbox has kept, and restore + the one you want. UX Write autosaves every three minutes, so if you're + connected to the Internet while you're working, you'll have regular snapshots + of your documents.

+ +

Converting from HTML to docx

+ +

If you've upgraded from a previous version of UX Write and wish to convert + your HTML documents to .docx so they can be used with Microsoft Word, you can + do so as follows:

+ +
    +
  • +

    Tap and hold on the document in the file browser

    +
    • + +
  • +

    Select Convert to docx

    +
    • +
+ +

Note that due to differences between the two file formats, there may be + some loss of formatting during the transition — for example, the rounded + borders used in the “Tip” style in this document can't be represented in + docx. For this reason, the original HTML file will be kept as a backup.

+ +

Troubleshooting

+ +

Reporting Bugs

+ +

If you encounter a crash in UX Write, you will be asked if you would like + to submit a bug report. This report includes a crash log indicating exactly + where in the program the problem occurred, as well as a redacted copy of your + document in which all text and images have been removed. An email window will + appear where you can add comments about what happened, and the bug report + will be sent to us when you hit “Send”. You can CC yourself a copy for + reference if you like.

+ +

If we can't reproduce it, we can't fix it. Many people send in bug + reports containing just the crash log. Often, we can to determine from this + what went wrong, but this isn't always the case. To increase the chances of + us being able to fix the problem, try to provide a detailed description of + what you were doing right before the crash occurred.

+ +

The best bug reports provide a clear set of steps that explain how to + reproduce the problem. During beta testing of 2.0, one particularly helpful + person even used iPad screen recording software to make a video demonstrating + how to trigger a bug, edited the video in iMovie, and added an audio track + with narration to explain what was going on. You certainly don't have to go + to this much effort, but a few simple instructions in your email which + explain how to reliably reproduce a problem will help a lot.

+ +

If you encounter any other issues that do not involve a crash, such as + formatting inconsistencies or strange user interface behaviour, just select + the Submit bug report option from the settings menu and send us a + note. Remember, the more information, the better.

+ +

The app store does not provide developers with any way to directly respond + to bug reports included in reviews. You can say whatever you want, but + please also let us know about your problem in case we need to ask you + for more information in order to fix it.

+ +

Purchase and Subscription

+ +

Every time you install something from the app store, iOS + includes a receipt file which is accessible to the app. This file + includes information about the version number of the app that you originally + downloaded, as well as any in-app payments you have made. UX Write looks at + this file to determine whether or not to enable the features in the + professional edition.

+ +

If you buy a new iPad or iPhone and install UX Write on it + via iTunes, this receipt file might not be present. If you have purchased or + subscribed to the app, it's necessary for UX Write to request a copy of the + receipt file from the app store so it can verify your upgrade status. You can + do this either from the intro screen shown at first launch, or by selecting + “Reactivate existing upgrade” from the settings menu.

+ +

If you originally purchased UX Write prior to the release + of version 2.0 (when it was a paid-only app), you should automatically have + access to the professional edition. The way UX Write determines this is by + looking at the receipt file and checking what the version number of the app + was at the time of your purchase. So if you see the app running as basic + edition, select “Reactivate existing upgrade” from the settings menu.

+ +

If you have any problems with upgrades or payments, + please contact us.

+ +

The Field Update Problem

+ +

If you open a .docx file in Word after editing it in UX Write, you'll see + the following message:

+ +
+ “This document contains fields that may refer to other files. Do you want + to update the fields in this document?” +
+ +

When you see this message, just click Yes (or press the Y + key).

+ +

Sadly, this is a symptom of a design flaw in Word, and is something only + Microsoft can fix. Unlike UX Write, Word does not keep the table of contents, + cross references, or figure/table numbers (all collectively known as + Fields) up to date automatically. Instead, it forces you to manually + tell it when it to update the fields after you have made changes to your + document.

+ +

Despite the fact that UX Write never actually produces fields that refer + to other files, this message is still displayed in every version of Word that + we have tested with, including Word 2013. The only way we could prevent such + a dialog from appearing is to store a setting in the document that tells Word + that there is no need to update the fields — but this would simply leave you + with an invalid table of contents and incorrect cross-references. While we've + done our best to ensure that UX Write provides the best user experience + within the app itself, we're not able to fix Word.

+ +

Opening .doc files

+ +

Microsoft Word has used a number of different file formats over the years, + and UX Write only supports the most recent version, .docx, which is a modern, + XML-based, well-documented open standard. The older .doc format is a + proprietary and very complex binary file format that would take a minimum of + six months to support. We've decided that time is better spent on other + useful features instead.

+ +

If you have a .doc file that you wish to edit in UX Write, you can convert + it to .docx by opening it in any recent version of Word (2007 and later), and + using “Save as” to convert it to docx. Doing so will maintain all of the + content and formatting, and provide exactly the same experience when working + with the document in Word itself. You will then have your document in a much + more portable format, and be able to edit it in Word, UX Write, and other + word processors such as LibreOffice.

+ +

More information

+ +

If you have a question that isn't answered here, check out + our support website for + more info. We also maintain a blog discussing the development of the + app and new features that are in the works. Many of our posts discuss various + questions people have had about UX Write and may provide you with a deeper + understanding of why certain aspects of the app are the way they are.

+ +

We value any feedback you have about the app, and you can + send it to us any time via the option on the settings menu. We receive a + lot of email, and can't guarantee to respond individually or add every + requested feature, but we certainly take into account your feedback when + deciding on priorities for future updates.

+ + http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/ui.js ---------------------------------------------------------------------- diff --git a/consumers/web/client/ui.js b/consumers/web/client/ui.js new file mode 100644 index 0000000..08e263b --- /dev/null +++ b/consumers/web/client/ui.js @@ -0,0 +1,75 @@ +// 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. + +function Button(imagePrefix) +{ + var self = this; + var mouseInside = false; + + this.element = document.createElement("div"); + this.element.style.display = "inline-block"; + this.element.style.width = "20px"; + this.element.style.height = "20px"; + this.element.style.padding = "10px"; + this.element.style.margin = "8px"; + this.element.style.borderWidth = "4px"; + this.element.style.borderRadius = "4px"; + this.element.addEventListener("mousedown",function() { + if (self.onMouseDown != null) + self.onMouseDown(); + }); + this.element.addEventListener("mouseover",function() { + mouseInside = true; + updateBackgroundColor(); + }); + this.element.addEventListener("mouseout",function() { + mouseInside = false; + updateBackgroundColor(); + }); + + + this.img = document.createElement("img"); + this.img.style.width = "20px"; + this.img.style.height = "20px"; + this.element.appendChild(this.img); + + + this.value = false; + + this.setValue = function(newValue) + { + this.value = newValue; + if (this.value) + this.img.setAttribute("src",imagePrefix+"-on.png"); + else + this.img.setAttribute("src",imagePrefix+".png"); + updateBackgroundColor(); + } + + function updateBackgroundColor() + { + var color = "transparent"; + if (mouseInside) + color = "#ccc"; + else if (self.value) + color = "#000"; + self.element.style.backgroundColor = color; + self.element.style.borderColor = color; + } + + this.setValue(false); +} http://git-wip-us.apache.org/repos/asf/incubator-corinthia/blob/ebe52bae/consumers/web/client/uxeditor.js ---------------------------------------------------------------------- diff --git a/consumers/web/client/uxeditor.js b/consumers/web/client/uxeditor.js new file mode 100644 index 0000000..b071297 --- /dev/null +++ b/consumers/web/client/uxeditor.js @@ -0,0 +1,344 @@ +// 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 IMPL_DIR = "../../../Editor/src"; + +function UXEditor(element) +{ + var self = this; + var doc = element.ownerDocument; + var iframeWrapper = null; + var iframe = null; + var setupCompletion = null; + var pendingScripts = {}; + var doneScriptInit = false; + + console.log("UXEditor: element = "+element); + console.log("UXEditor: doc = "+doc); + + function setup(completion) + { + setupCompletion = completion; + iframeWrapper = doc.createElement("div"); +// iframeWrapper.setAttribute("id","_contentWrapper"); + iframeWrapper.setAttribute("tabindex","0"); + iframeWrapper.style.border = "none"; + + iframe = doc.createElement("iframe"); + iframe.setAttribute("id","_content"); + iframe.addEventListener("load",iframeLoaded); + iframe.setAttribute("src","sample.html"); + iframe.style.border = "none"; +// iframe.setAttribute("class","contentframe"); + + iframeWrapper.appendChild(iframe); + element.appendChild(iframeWrapper); + + self.iframeWrapper = iframeWrapper; + self.iframe = iframe; + + window.onresize = updateIFrameSize; + updateIFrameSize(); + } + + function updateIFrameSize() + { + var width = window.innerWidth; + var height = window.innerHeight - 64; + + iframe.style.width = width+"px"; + iframe.style.height = height+"px"; + iframeWrapper.style.width = width+"px"; + iframeWrapper.style.height = height+"px"; + } + + function iframeLoaded() + { + console.log("iframe loaded"); + self.cdoc = iframe.contentDocument; + self.cwin = iframe.contentWindow; + + var javascriptFiles = ["first.js", + "ElementTypes.js", + "AutoCorrect.js", + "ChangeTracking.js", + "Clipboard.js", + "Cursor.js", + "DOM.js", + "Editor.js", + "Equations.js", + "Figures.js", + "Formatting.js", + "Hierarchy.js", + "Input.js", + "Lists.js", + "Main.js", + "Metadata.js", + "NodeSet.js", + "Outline.js", + "Position.js", + "PostponedActions.js", + "Range.js", + "Selection.js", + "3rdparty/showdown/showdown.js", + "Scan.js", + "StringBuilder.js", + "Styles.js", + "Tables.js", + "Text.js", + "traversal.js", + "types.js", + "UndoManager.js", + "util.js", + "Viewport.js"]; + + // We first create all the script objects and set their onload properties. Only *after* + // that do we actually add them to the document. This ensures that pendingScripts will + // only ever become empty after all the scripts have definitely loaded. + var scripts = []; + for (var i = 0; i < javascriptFiles.length; i++) { + var src = IMPL_DIR+"/"+javascriptFiles[i]; + var script = document.createElement("script"); + script.setAttribute("src",src); + pendingScripts[src] = true; + script.onload = function(e) { scriptLoaded(e.target); } + scripts.push(script); + } + + // Now add the script elements to the document, triggering their load + for (var i = 0; i < scripts.length; i++) + self.cdoc.head.appendChild(scripts[i]); + } + + function scriptLoaded(script) + { + delete pendingScripts[script.getAttribute("src")]; + console.log("loadedScript: "+script.getAttribute("src")+ + "; remaining = "+Object.keys(pendingScripts).length); + if (Object.keys(pendingScripts).length > 0) + return; + + if (!doneScriptInit) { + doneScriptInit = true; + console.log("Now we should init"); +/* + self.cwin.Editor_debug = Editor_debug; + self.cwin.Editor_error = Editor_error; + self.cwin.Editor_addOutlineItem = Editor_addOutlineItem; + self.cwin.Editor_updateOutlineItem = Editor_updateOutlineItem; + self.cwin.Editor_removeOutlineItem = Editor_removeOutlineItem; + self.cwin.Editor_outlineUpdated = Editor_outlineUpdated; + self.cwin.Editor_setCursor = Editor_setCursor; + self.cwin.Editor_setSelectionHandles = Editor_setSelectionHandles; + self.cwin.Editor_setTableSelection = Editor_setTableSelection; + self.cwin.Editor_setSelectionBounds = Editor_setSelectionBounds; + self.cwin.Editor_clearSelectionHandlesAndCursor = Editor_clearSelectionHandlesAndCursor; + self.cwin.Editor_updateAutoCorrect = Editor_updateAutoCorrect; + self.cwin.debug = Editor_debug; +*/ +// self.cwin.debug("loadedScript: before calling Main_init"); +// self.cwin.eval("Main_init(800,150,'../uxwrite/resources/builtin.css',false)"); + self.cwin.Main_init(800,150,"builtin.css",false); +// self.cwin.debug("loadedScript: after calling Main_init"); + +// self.cdoc.documentElement.addEventListener("mousedown",mouseDown,true); +// self.cdoc.documentElement.addEventListener("mouseup",mouseUp,true); +// self.cdoc.documentElement.addEventListener("mousemove",mouseMove,true); + +// ifwrapper.addEventListener("keydown",keyDown,true); +// ifwrapper.addEventListener("keyup",keyUp,true); +// ifwrapper.addEventListener("keypress",keyPress,true); +// ifwrapper.focus(); +// document.body.focus(); + + if (setupCompletion != null) + setupCompletion(); + } + } + + function invokeCallbacks() + { + var messages = JSON.parse(self.cwin.Editor_getBackMessages()); + + if (self.callbacks == null) + return; + console.log("messages.length = "+messages.length); + for (var i = 0; i < messages.length; i++) { + var name = messages[i][0]; + var args = messages[i].slice(1); + if ((self.callbacks != null) && (self.callbacks[name] != null)) + self.callbacks[name].apply(null,args); + } + } + + function wrap(name) + { + return function() { + var argsArray = []; + var args = new Array(); + console.log("arguments.length = "+arguments.length); + for (var i = 0; i < arguments.length; i++) { + args.push(arguments[i]); + } + var res = self.cwin.Main_execute(function() { + return self.cwin[name].apply(null,args); + }); + invokeCallbacks(); + + // Ensure we have a completely separate copy of the data + if (res == null) { + return null; + } + else { + var str = JSON.stringify(res); + return JSON.parse(str); + } + } + } + + var op = { + clipboard: { + cut: wrap("Clipboard_cut"), + copy: wrap("Clipboard_copy"), + pasteText: wrap("Clipboard_pasteText"), + pasteHTML: wrap("Clipboard_pasteHTML"), + }, + cursor: { + positionCursor: wrap("Cursor_positionCursor"), + getCursorPosition: wrap("Cursor_getCursorPosition"), + insertReference: wrap("Cursor_insertReference"), + insertLink: wrap("Cursor_insertLink"), + insertCharacter: wrap("Cursor_insertCharacter"), + deleteCharacter: wrap("Cursor_deleteCharacter"), + enterPressed: wrap("Cursor_enterPressed"), + getPrecedingWord: wrap("Cursor_getPrecedingWord"), + getLinkProperties: wrap("Cursor_getLinkProperties"), + setLinkProperties: wrap("Cursor_setLinkProperties"), + setReferenceTarget: wrap("Cursor_setReferenceTarget"), + insertFootnote: wrap("Cursor_insertFootnote"), + insertEndnote: wrap("Cursor_insertEndnote"), + test: wrap("Cursor_test"), + }, + figures: { + insertFigure: wrap("Figures_insertFigure"), + getSelectedFigureId: wrap("Figures_getSelectedFigureId"), + getProperties: wrap("Figures_getProperties"), + setProperties: wrap("Figures_setProperties"), + getGeometry: wrap("Figures_getGeometry"), + }, + formatting: { + getFormatting: wrap("Formatting_getFormatting"), + applyFormattingChanges: wrap("Formatting_applyFormattingChanges"), + }, + input: { + }, + lists: { + increaseIndent: wrap("Lists_increaseIndent"), + decreaseIndent: wrap("Lists_decreaseIndent"), + clearList: wrap("Lists_clearList"), + setUnorderedList: wrap("Lists_setUnorderedList"), + setOrderedList: wrap("Lists_setOrderedList"), + }, + main: { + getLanguage: wrap("Main_getLanguage"), + setLanguage: wrap("Main_setLanguage"), + setGenerator: wrap("Main_setGenerator"), + prepareForSave: wrap("Main_prepareForSave"), + getHTML: wrap("Main_getHTML"), + isEmptyDocument: wrap("Main_isEmptyDocument"), + }, + outline: { + getOutline: wrap("Outline_getOutline"), + moveSection: wrap("Outline_moveSection"), + deleteItem: wrap("Outline_deleteItem"), + goToItem: wrap("Outline_goToItem"), + scheduleUpdateStructure: wrap("Outline_scheduleUpdateStructure"), + setTitle: wrap("Outline_setTitle"), + setNumbered: wrap("Outline_setNumbered"), + insertTableOfContents: wrap("Outline_insertTableOfContents"), + insertListOfFigures: wrap("Outline_insertListOfFigures"), + insertListOfTables: wrap("Outline_insertListOfTables"), + setPrintMode: wrap("Outline_setPrintMode"), + examinePrintLayout: wrap("Outline_examinePrintLayout"), + detectSectionNumbering: wrap("Outline_detectSectionNumbering"), + findUsedStyles: wrap("Outline_findUsedStyles"), + }, + scan: { + reset: wrap("Scan_reset"), + next: wrap("Scan_next"), + addMatch: wrap("Scan_addMatch"), + showMatch: wrap("Scan_showMatch"), + replaceMatch: wrap("Scan_replaceMatch"), + removeMatch: wrap("Scan_removeMatch"), + goToMatch: wrap("Scan_goToMatch"), + }, + selection: { + update: wrap("Selection_update"), + selectAll: wrap("Selection_selectAll"), + selectParagraph: wrap("Selection_selectParagraph"), + selectWordAtCursor: wrap("Selection_selectWordAtCursor"), + dragSelectionBegin: wrap("Selection_dragSelectionBegin"), + dragSelectionUpdate: wrap("Selection_dragSelectionUpdate"), + moveStartLeft: wrap("Selection_moveStartLeft"), + moveStartRight: wrap("Selection_moveStartRight"), + moveEndLeft: wrap("Selection_moveEndLeft"), + moveEndRight: wrap("Selection_moveEndRight"), + setSelectionStartAtCoords: wrap("Selection_setSelectionStartAtCoords"), + setSelectionEndAtCoords: wrap("Selection_setSelectionEndAtCoords"), + setTableSelectionEdgeAtCoords: wrap("Selection_setTableSelectionEdgeAtCoords"), + print: wrap("Selection_print"), + }, + styles: { + getCSSText: wrap("Styles_getCSSText"), + setCSSText: wrap("Styles_setCSSText"), + getParagraphClass: wrap("Styles_getParagraphClass"), + setParagraphClass: wrap("Styles_setParagraphClass"), + }, + tables: { + insertTable: wrap("Tables_insertTable"), + addAdjacentRow: wrap("Tables_addAdjacentRow"), + addAdjacentColumn: wrap("Tables_addAdjacentColumn"), + removeAdjacentRow: wrap("Tables_removeAdjacentRow"), + removeAdjacentColumn: wrap("Tables_removeAdjacentColumn"), + clearCells: wrap("Tables_clearCells"), + mergeCells: wrap("Tables_mergeCells"), + splitSelection: wrap("Tables_splitSelection"), + getSelectedTableId: wrap("Tables_getSelectedTableId"), + getProperties: wrap("Tables_getProperties"), + setProperties: wrap("Tables_setProperties"), + setColWidths: wrap("Tables_setColWidths"), + getGeometry: wrap("Tables_getGeometry"), + }, + undoManager: { + getLength: wrap("UndoManager_getLength"), + getIndex: wrap("UndoManager_getIndex"), + setIndex: wrap("UndoManager_setIndex"), + undo: wrap("UndoManager_undo"), + redo: wrap("UndoManager_redo"), + newGroup: wrap("UndoManager_newGroup"), + groupType: wrap("UndoManager_groupType"), + }, + }; + + self.setup = setup; + self.op = op; + self.callbacks = null; + self.cdoc = null; + self.cwin = null; + self.iframeWrapper = null; + self.iframe = null; +}