From 392ae65a49fb8bf7db08a63ddd8cc3e548f21804 Mon Sep 17 00:00:00 2001 From: Jeremy Moresmau Date: Mon, 29 Sep 2014 17:59:02 +0200 Subject: [PATCH] Use markdown editor for demo --- .bowerrc | 3 +++ .gitignore | 6 ++++- README.md | 5 ++-- bower.json | 7 ++++++ client_src/client.coffee | 18 +++++++++------ client_src/dom2share.coffee | 26 ++++++++++----------- html/_client.html | 46 ++++++++++++++++++++++--------------- html/client.css | 37 ++++++++++++++++++++++++++++- webstrate.coffee | 2 +- 9 files changed, 107 insertions(+), 43 deletions(-) create mode 100644 .bowerrc create mode 100644 bower.json diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..1e6420b --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "lib/vendor" +} diff --git a/.gitignore b/.gitignore index 5a64db9..8f7d8cb 100644 --- a/.gitignore +++ b/.gitignore @@ -5,8 +5,12 @@ lib/client.js lib/dom2share.js +lib/ot2dom.js + lib/tests.js lib/util.js -node_modules \ No newline at end of file +node_modules + +lib/vendor diff --git a/README.md b/README.md index 556dcef..ced0243 100644 --- a/README.md +++ b/README.md @@ -14,16 +14,17 @@ To install: * Clone this repository * From the repository root do: * npm install + * bower install * cake build * coffee webstrate.coffee - + Usage ===== Webstrate serves (and creates) any named webpage you ask for.
Simply navigate your browser* to http://localhost:7007/[some_page_name].
Now any changes you make to the DOM will be persisted and distributed to any other clients that may have the page open. -\* Webstrate is currently only tested to work in Chrome Version 37.0.2062.120 +\* Webstrate is currently only tested to work in Chrome Version 37.0.2062.120 Disclaimer ========== diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..9ebd65e --- /dev/null +++ b/bower.json @@ -0,0 +1,7 @@ +{ + "name": "webstrate", + "version": "0.0.1", + "dependencies": { + "medium-editor": "~1.9.4" + } +} diff --git a/client_src/client.coffee b/client_src/client.coffee index f4ed65b..10a6662 100644 --- a/client_src/client.coffee +++ b/client_src/client.coffee @@ -19,15 +19,19 @@ $(document).ready () => document.title = "Webstrate - " + sharejsDoc if sharejsDoc.length == 0 throw "Error: No document id provided" - + socket = new BCSocket null, {reconnect: true} window._sjs = new sharejs.Connection socket - - doc = _sjs.get 'webstrates', sharejsDoc - + + doc = _sjs.get 'webstrates', sharejsDoc + container = document.querySelector ".container" + + $(".header").find('h1').append(" - " + sharejsDoc) doc.subscribe() - $(document).empty() doc.whenReady () -> - window.dom2shareInstance = new DOM2Share doc, document, () -> + window.dom2shareInstance = new DOM2Share doc, container, () -> event = new CustomEvent "loaded", { "detail": "The share.js document has finished loading" } - document.dispatchEvent event \ No newline at end of file + document.dispatchEvent event + editor = new MediumEditor(document.getElementById("wysiwyg-editor"), { + 'buttons': ['bold', 'italic', 'underline', 'superscript', 'subscript', 'anchor', 'image', 'header1', 'header2', 'quote', 'orderedlist', 'unorderedlist', 'pre', 'indent', 'outdent'] + }) diff --git a/client_src/dom2share.coffee b/client_src/dom2share.coffee index d1a5f61..504b3b5 100644 --- a/client_src/dom2share.coffee +++ b/client_src/dom2share.coffee @@ -17,7 +17,7 @@ limitations under the License. root = exports ? window class root.DOM2Share - + constructor: (@doc, @targetDOMElement, callback = ->) -> if not @doc.type console.log "Creating new doc", @doc.name @@ -27,21 +27,21 @@ class root.DOM2Share return if @targetDOMElement.parentNode? #Its not the document root if not @doc.getSnapshot() - body = ["div",{id:"doc_"+@doc.name, class:"document"}] + body = ["div", {"id": "wysiwyg-editor"}] @doc.submitOp([{"p":[], "oi":body}]) else #Its the document root if not @doc.getSnapshot() - body = ["html", {}, ['body', {}]] + body = ["div", {"id": "wysiwyg-editor"}] @doc.submitOp([{"p":[], "oi":body}]) @loadDocIntoDOM() callback @doc, @rootDiv - + loadDocIntoDOM: () -> @targetDOMElement.appendChild($.jqml(@doc.getSnapshot())[0]) - + @rootDiv = $(@targetDOMElement).children()[0] @pathTree = util.createPathTree @rootDiv, null, true - + @dmp = new diff_match_patch() @context = @doc.createContext() @@ -50,16 +50,16 @@ class root.DOM2Share for op in ops ot2dom.applyOp op, @rootDiv util.check(@rootDiv, @pathTree) - + @observer.observe @rootDiv, { childList: true, subtree: true, attributes: true, characterData: true, attributeOldValue: true, characterDataOldValue: true } - + @observer = new MutationObserver (mutations) => @handleMutations(mutations) @observer.observe @rootDiv, { childList: true, subtree: true, attributes: true, characterData: true, attributeOldValue: true, characterDataOldValue: true } - + disconnect: () -> @observer.disconnect() @context.destroy() - + handleMutations: (mutations) -> if not @doc? return @@ -89,7 +89,7 @@ class root.DOM2Share addedPathNode = util.getPathNode(added, mutation.target) targetPathNode = util.getPathNode(mutation.target) if targetPathNode.id == addedPathNode.parent.id - continue + continue #Add the new node to the path tree newPathNode = util.createPathTree added, util.getPathNode(mutation.target) targetPathNode = util.getPathNode(mutation.target) @@ -117,5 +117,5 @@ class root.DOM2Share childIndex = targetPathNode.children.indexOf pathNode targetPathNode.children.splice childIndex, 1 util.removePathNodes removed, targetPathNode - - util.check(@rootDiv, @pathTree) \ No newline at end of file + + util.check(@rootDiv, @pathTree) diff --git a/html/_client.html b/html/_client.html index 0d3a5ca..381fde1 100644 --- a/html/_client.html +++ b/html/_client.html @@ -14,22 +14,32 @@ limitations under the License. --> - - - Webstrate - - - - - - - - - - - - + + + Webstrate + + + + + + + + + + + + + + + + + - - - \ No newline at end of file + +
+

Webstrate Demo

+
+
+
+ + diff --git a/html/client.css b/html/client.css index e1bac93..6ebb4ed 100644 --- a/html/client.css +++ b/html/client.css @@ -12,4 +12,39 @@ 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. -*/ \ No newline at end of file +*/ + +body { + margin: 0; +} + +.header { + position : absolute; + top: 0; + right: 0; + left: 0; + background-color: #F1F1F1; + padding: 30px 20px; +} + +.header h1 { + color: #474D57; + margin: 0; +} + +.container { + position: absolute; + top: 100px; + right: 10px; + bottom: 10px; + left: 10px; + padding: 30px 20px; +} +.container > * { + width: 100%; + height: 100%; +} + +#wysiwyg-editor { + overflow: auto; +} diff --git a/webstrate.coffee b/webstrate.coffee index 69daa19..70bbe1f 100644 --- a/webstrate.coffee +++ b/webstrate.coffee @@ -81,7 +81,7 @@ webserver.get '/:id', (req, res) -> res.sendFile __dirname+'/html/_client.html' else res.redirect '/frontpage' - + webserver.get '/', (req, res) -> res.redirect '/frontpage'