Use markdown editor for demo

djeremh · Sep 29, 2014 · 392ae65 · 392ae65
1 parent 06824b1
commit 392ae65
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 43 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "lib/vendor"
+}
diff --git 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
+node_modules
+
+lib/vendor
diff --git 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.<br>
 Simply navigate your browser* to http://localhost:7007/[some_page_name].<br>
 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
@@ -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
@@ -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
+            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
@@ -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)
+
+        util.check(@rootDiv, @pathTree)
diff --git a/html/_client.html b/html/_client.html
@@ -14,22 +14,32 @@
 limitations under the License.
 -->
 
-<html> 
-    <head> 
-		<title>Webstrate</title>
-
-		<script src="jquery-1.7.2.min.js"></script>
-		<script src="jquery.jqml.js"></script>
-		<script src="jsonml-dom.js"></script>
-		<script src="channel/bcsocket.js"></script>
-		<script src="share.uncompressed.js"></script>
-		<script src="diff_match_patch.js"></script>
-		<script src="util.js"></script>
-		<script src="ot2dom.js"></script>
-		<script src="dom2share.js"></script>
-		<script src="client.js"></script>
-
+<html>
+    <head>
+    <title>Webstrate</title>
+
+    <link rel="stylesheet" href="vendor/medium-editor/dist/css/medium-editor.css">
+    <link rel="stylesheet" href="vendor/medium-editor/dist/css/themes/default.css">
+    <link rel="stylesheet" href="client.css">
+
+    <script src="jquery-1.7.2.min.js"></script>
+    <script src="jquery.jqml.js"></script>
+    <script src="jsonml-dom.js"></script>
+    <script src="channel/bcsocket.js"></script>
+    <script src="share.uncompressed.js"></script>
+    <script src="diff_match_patch.js"></script>
+    <script src="util.js"></script>
+    <script src="ot2dom.js"></script>
+    <script src="dom2share.js"></script>
+    <script src="vendor/medium-editor/dist/js/medium-editor.js"></script>
+    <script src="client.js"></script>
+
     </head>
-	<body>
-    </body> 
-</html>
+    <body>
+        <div class="header">
+            <h1>Webstrate Demo</h1>
+        </div>
+        <div class="container">
+        </div>
+    </body>
+</html>
diff --git 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.
-*/
+*/
+
+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
@@ -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'