yonote/yjs
14
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
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/README.md
View File

@@ -8,5 +8,6 @@ Here you find some (hopefully) usefull examples on how to use Yatta!
## Demos
* [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>
<head>
<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="../../build/browser/Frameworks/XmlFramework.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.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>
<body id="collaborative">
<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.
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>
</body>

9
examples/XmlExample/index.js
View File

@@ -54,12 +54,5 @@ Y.createPeerJsConnector({key: 'h7nlefbgavh1tt9'}, function(Connector, user_id){
yatta.val($("#collaborative")[0])
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");
}
});