Created
March 9, 2015 13:04
-
-
Save cphyc/cb2886d66d8c3fc86809 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Yjs test</title> | |
| <script src="jquery.min.js"></script> | |
| <script src="bower_components/webcomponentsjs/webcomponents.js"></script> | |
| <script src="bower_components/yjs/y.js"></script> | |
| <script src="bower_components/yjs/y-object.js"></script> | |
| <script src="bower_components/y-list/y-list.js"></script> | |
| <script src="bower_components/y-xml/y-xml.js"></script> | |
| <script src="bower_components/y-webrtc/y-webrtc.js"></script> | |
| <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script> | |
| </head> | |
| <body> | |
| <div id="shared_div" contentEditable> | |
| <h1> yjs HTML </h1> | |
| <p> Collaborative editing on HTML with <a href="https://github.com/rwth-acis/yjs/">yjs</a> | |
| </div> | |
| <div id="" style="display: none"></div> | |
| </body> | |
| <script src="main.js"></script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function track() { | |
| console.log("In track"); | |
| var selection = window.getSelection(); | |
| var range = document.getSelection().getRangeAt(0), | |
| old = selection.anchorNode; | |
| var so = range.startOffset, | |
| eo = range.endOffset, | |
| newer = document.createTextNode(old.nodeValue), | |
| parent = old.parentNode; | |
| parent.replaceChild(newer, old); | |
| // // Replace the carret at the right position | |
| // var newRange = document.createRange(); | |
| // newRange.selectNode(newer); | |
| // newRange.setStart(newer, so); | |
| // newRange.setEnd(newer, eo); | |
| // selection.removeAllRanges(); | |
| // selection.addRange(newRange); | |
| console.log("Out track"); | |
| } | |
| // Initialize Yjs variables | |
| var connector = new Y.WebRTC("xml-webrtc-example"); //, {url: config.server}); | |
| var y = new Y(connector); | |
| connector.debug = true; | |
| // Set up shared object | |
| connector.whenSynced(function(){ | |
| if(y.val("dom") == null){ | |
| y.val("dom", new Y.Xml($('#shared_div').get(0))); | |
| } | |
| }); | |
| // Add callback to yjs | |
| y.observe(function(events){ | |
| for(i in events){ | |
| if(events[i].type === "add" || events[i].type === "update") { | |
| if (events[i].name === "dom") { | |
| // Replace by new dom | |
| $('#shared_div').replaceWith(y.val("dom").getDom()); | |
| } | |
| } | |
| console.log(events[i]); | |
| } | |
| }); | |
| // Add callback to any change | |
| $('#shared_div').on("input", function(){ | |
| track(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment