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

finished text editing demo

Browse Source
This commit is contained in:
Kevin Jahns
2014-08-16 04:48:00 +02:00
parent 2a10fe45fa
commit 184f0efdff
35 changed files with 650 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
examples/TextEditing/README.md Normal file
View File

@@ -0,0 +1,59 @@
## Text Editing Example
Here, I will give a short overview on how to enable collaborative text editing with the PeerJs Connector and the TextYatta Framework.
First you have to include the following libraries in your html file:
```
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="../../build/browser/Frameworks/TextYatta.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>
```
Open [index.html](./index.html) in order to start collaboration.
```js
var yatta;
function init(){
Y.createPeerJsConnector(function(Connector, user_id){
```
TextYatta is a shared text object. If you change something on this object,
it will be instantaneously shared with all the other collaborators.
```js
yatta = new Y.TextYatta(user_id, Connector);
/*
Get the url of this frame. If it has a url-encoded parameter
we will connect to the foreign peer.
*/
var url = window.location.href;
var peer_id = location.search
var url = url.substring(0,-peer_id.length);
peer_id = peer_id.substring(1);
/*
Set the shareable link.
*/
document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);
/*
Connect to other peer.
*/
if (peer_id.length > 0){
yatta.connector.connectToPeer(peer_id);
}
/*
Bind yatta to the textfield.
The .bind property is a method of the Word class. You can also use it with all the other Frameworks in Yatta (e.g. Json).
*/
var textbox = document.getElementById("textfield");
yatta.bind(textbox);
});
}
window.onload = init
```

21
examples/TextEditing/index.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>PeerJs Json Example</title>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="../../build/browser/Frameworks/TextYatta.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>
</head>
<body>
<h1> Text Editing Demo</h1>
<p> This demo enables P2P text editing. Open this link in other browsers: <a id="peer_link" target="_blank">Drop me </a> </p>
<textarea style="width:80%;" rows=40 id="textfield"></textarea>
<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/TextEditing">here</a>.
</p>
</body>
</html>

54
examples/TextEditing/index.js Normal file
View File

@@ -0,0 +1,54 @@
/**
## Text Editing Example
Here, I will give a short overview on how to enable collaborative text editing with the PeerJs Connector and the TextYatta Framework.
First you have to include the following libraries in your html file:
```
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="../../build/browser/Frameworks/TextYatta.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>
```
Open [index.html](./index.html) in order to start collaboration.
*/
var yatta;
function init(){
Y.createPeerJsConnector(function(Connector, user_id){
/**
TextYatta is a shared text object. If you change something on this object,
it will be instantaneously shared with all the other collaborators.
*/
yatta = new Y.TextYatta(user_id, Connector);
/*
Get the url of this frame. If it has a url-encoded parameter
we will connect to the foreign peer.
*/
var url = window.location.href;
var peer_id = location.search
var url = url.substring(0,-peer_id.length);
peer_id = peer_id.substring(1);
/*
Set the shareable link.
*/
document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);
/*
Connect to other peer.
*/
if (peer_id.length > 0){
yatta.connector.connectToPeer(peer_id);
}
/*
Bind yatta to the textfield.
The .bind property is a method of the Word class. You can also use it with all the other Frameworks in Yatta (e.g. Json).
*/
var textbox = document.getElementById("textfield");
yatta.bind(textbox);
});
}
window.onload = init