yonote/yjs
24
0
Fork 0
Code Pull Requests 1 Releases Activity

finishing xml

Browse Source
This commit is contained in:
Kevin Jahns 2014-10-06 14:16:32 +02:00
parent 6caab5e853
commit 98e582c413
4 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -8,12 +8,13 @@ but does not require you to understand how the internals work. The predefined da
Predefined data structures: Predefined data structures:
* Text - [Collaborative Text Editing Example](http://dadamonad.github.io/Yatta/examples/TextEditing/) and [Source](./examples/TextEditing/) * Text - [Collaborative Text Editing Example](http://dadamonad.github.io/Yatta/examples/TextEditing/) and [Source](./examples/TextEditing/)
* Json - [Tutorial](./examples/PeerJs-Json/) * Json - [Tutorial](./examples/PeerJs-Json/)
* XML (coming soon) * XML - [XML Example](./XmlExample) Collaboratively manipulate the dom with native dom-features and jQuery.
Unlike other frameworks, Yatta! supports P2P message propagation and is not bound to a specific communication protocol. Unlike other frameworks, Yatta! supports P2P message propagation and is not bound to a specific communication protocol.
It is possible to add any communication protocol to Yatta. Currently it supports: It is possible to add any communication protocol to Yatta. Currently it supports:
* [PeerJs](http://peerjs.com/) - A WebRTC Framework * [PeerJs](http://peerjs.com/) - A WebRTC Framework
* [SimpleWebRTC](http://simplewebrtc.com/) - Another WebRTC Framework
* [IWC](http://dbis.rwth-aachen.de/cms/projects/the-xmpp-experience#interwidget-communication) - Inter-widget Communication * [IWC](http://dbis.rwth-aachen.de/cms/projects/the-xmpp-experience#interwidget-communication) - Inter-widget Communication
## Use it! ## Use it!
@ -75,10 +76,16 @@ Yatta! is still in an early development phase. Don't expect that everything is w
But I would become really motivated if you gave me some feedback :) ([github](https://github.com/DadaMonad/Yatta/issues)). But I would become really motivated if you gave me some feedback :) ([github](https://github.com/DadaMonad/Yatta/issues)).
### Current Issues ### Current Issues
* XML support * HTML editable tag
* More efficient representation of text.
* Use a better data structure for the History Buffer - it should be possible to use Arrays.
* SimpleRTC support
## Support ## Support
Please report any issues to the [Github issue page](https://github.com/DadaMonad/Yatta/issues)! Please report _any_ issues to the [Github issue page](https://github.com/DadaMonad/Yatta/issues)!
I would appreciate if developers gave me feedback on how _convenient_ the framework is, and if it is easy to use. Particularly the XML-support may not support every DOM-methods - if you encounter a method that does not cause any change on other peers,
please state function name, and sample parameters. However, there are browser-specific features, that Yatta won't support.
## License ## License
Yatta! is licensed under the [MIT License](./LICENSE.txt). Yatta! is licensed under the [MIT License](./LICENSE.txt).

3
examples/README.md
View File

@ -8,5 +8,6 @@ Here you find some (hopefully) usefull examples on how to use Yatta!
## Demos ## Demos
* [Text Editing](./TextEditing/) Simple collaborative text editing demo with PeerJs and Text Framework. * [Text Editing](./TextEditing/) Simple collaborative text editing demo with PeerJs and Text Framework.
* [IWC Demo](./IwcDemo/) More IWC example widgets.. * [XML Example](./XmlExample) Collaboratively manipulate the dom with native dom-features and jQuery.
* [IWC Demo](./IwcDemo/) More IWC example widgets.

25
examples/XmlExample/index.html
View File

@ -2,12 +2,18 @@
<html> <html>
<head> <head>
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>PeerJs Json Example</title> <title>PeerJs Xml Example</title>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script> <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="../../build/browser/Frameworks/XmlFramework.js"></script> <script src="../../build/browser/Frameworks/XmlFramework.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script> <script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
/* Browser specific (not valid) styles to make preformatted text wrap */
code {
white-space: nowrap; /* css-3 */
}
</style>
</head> </head>
<body id="collaborative"> <body id="collaborative">
<h1> PeerJs + XML Example</h1> <h1> PeerJs + XML Example</h1>
@ -16,9 +22,22 @@ and <a href="http://peerjs.com/">PeerJs</a> (WebRTC). </p>
<p> <a href="https://github.com/DadaMonad/Yatta/">Yatta</a> is a Framework for Real-Time collaboration on arbitrary data structures. <p> <a href="https://github.com/DadaMonad/Yatta/">Yatta</a> is a Framework for Real-Time collaboration on arbitrary data structures.
You can find the code for this example <a href="https://github.com/DadaMonad/Yatta/tree/master/examples/PeerJs-Json">here</a>. You can find the code for this example <a href="https://github.com/DadaMonad/Yatta/tree/master/examples/XmlExample">here</a>.
<p>Open this link on other clients: <a id="peer_link" target="_blank">Drop me </a></p>. Share this link and build a peer-to-peer based network. Changes won't be recorded by any server.
<p>Open the console and use DOM and jQuery in order to manipulate the body-element of this website. You can see live changes on other clients.</p>
<h4>Sample code for the console </h4>
<nowrap>
<code>$("body").append('&lt;div id="div_tag"&gt;some new div tag &lt;/div&gt;');</code><br />
<code>$("#div_tag").empty();</code><br />
<code>$("&lt;p&gt;&lt;i&gt;This is inserted after every p tag&lt;/i&gt;&lt;/p&gt;").insertAfter("p");</code><br />
<code>$("p i").remove();</code><br />
</nowrap>
<a id="peer_link" target="_blank">Drop me </a>
</p> </p>
</body> </body>

9
examples/XmlExample/index.js
View File

@ -54,12 +54,5 @@ Y.createPeerJsConnector({key: 'h7nlefbgavh1tt9'}, function(Connector, user_id){
yatta.val($("#collaborative")[0]) yatta.val($("#collaborative")[0])
console.log(yatta.getUserId()); console.log(yatta.getUserId());
$("#collaborative").attr("contenteditable","true");
$("#collaborative")[0].onkeyup = function(){
console.log("dtrn");
console.log("rtdn");
}
$("p")[0].onfocus = function(){
console.log("nrtduiaenrtduiaer");
}
}); });