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

2
examples/IwcJson/README.md
View File

@@ -14,7 +14,7 @@ A working widget implementation is [IwcJson.xml](./IwcJson.xml) and the js-file
```js
function init(){
Y.createIwcConnector(function(Connector, user_id){
Y.createPeerJsConnector(function(Connector, user_id){
```

2
examples/IwcJson/index.js
View File

@@ -14,7 +14,7 @@
A working widget implementation is [IwcJson.xml](./IwcJson.xml) and the js-file is [index.js](./index.js)
*/
function init(){
Y.createIwcConnector(function(Connector, user_id){
Y.createPeerJsConnector(function(Connector, user_id){
/**
yatta is the shared json object. If you change something on this object,
it will be instantly shared with all the other collaborators.

19
examples/PeerJsJson/PeerJsJson.html
View File

@@ -1,19 +0,0 @@
<!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/JsonYatta.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>
</head>
<body>
<h1> Yatta PeerJs Demo </h1>
<p> 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>
</body>
</html>

54
examples/PeerJsJson/README.md
View File

@@ -1,54 +0,0 @@
## IWC + JSON Example
Here, I will give a short overview on how to use the IwcJson Framework in Role-SDK widgets.
First you have to include the following libraries in your widget file:
```
<script src="http://open-app.googlecode.com/files/openapp.js"></script>
<script src="http://dbis.rwth-aachen.de/gadgets/iwc/lib/iwc.js"></script>
<script src="http://dbis.rwth-aachen.de/~jahns/role-widgets/widgetbundles/libraries/DUIClient.js"></script>
<script src="../../build/browser/Frameworks/JsonYatta.min.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.min.js"></script>
<script src="./index.js"></script>
```
A working widget implementation is [IwcJson.xml](./IwcJson.xml) and the js-file is [index.js](./index.js)
```js
var yatta;
function init(){
Y.createPeerJsConnector(function(Connector, user_id){
```
yatta is the shared json object. If you change something on this object,
it will be instantly shared with all the other collaborators.
```js
yatta = new Y.JsonYatta(user_id, Connector);
var url = window.location.href;
var peer_id = location.search
var url = url.substring(0,-peer_id.length);
peer_id = peer_id.substring(1);
document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);
var textbox = document.getElementById("textfield");
if (peer_id.length > 0) {
yatta.connector.connectToPeer(peer_id);
function f() {
if (yatta.val('x') == null) {
setTimeout(f, 500);
} else {
yatta.val('x').bind(textbox);
}
}
f();
} else {
yatta.val('x', "");
yatta.val('x').bind(textbox);
}
});
}
window.onload = init
```

49
examples/PeerJsJson/index.js
View File

@@ -1,49 +0,0 @@
/**
## IWC + JSON Example
Here, I will give a short overview on how to use the IwcJson Framework in Role-SDK widgets.
First you have to include the following libraries in your widget file:
```
<script src="http://open-app.googlecode.com/files/openapp.js"></script>
<script src="http://dbis.rwth-aachen.de/gadgets/iwc/lib/iwc.js"></script>
<script src="http://dbis.rwth-aachen.de/~jahns/role-widgets/widgetbundles/libraries/DUIClient.js"></script>
<script src="../../build/browser/Frameworks/JsonYatta.min.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.min.js"></script>
<script src="./index.js"></script>
```
A working widget implementation is [IwcJson.xml](./IwcJson.xml) and the js-file is [index.js](./index.js)
*/
var yatta;
function init(){
Y.createPeerJsConnector(function(Connector, user_id){
/**
yatta is the shared json object. If you change something on this object,
it will be instantly shared with all the other collaborators.
*/
yatta = new Y.JsonYatta(user_id, Connector);
var url = window.location.href;
var peer_id = location.search
var url = url.substring(0,-peer_id.length);
peer_id = peer_id.substring(1);
document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);
var textbox = document.getElementById("textfield");
if (peer_id.length > 0) {
yatta.connector.connectToPeer(peer_id);
function f() {
if (yatta.val('x') == null) {
setTimeout(f, 500);
} else {
yatta.val('x').bind(textbox);
}
}
f();
} else {
yatta.val('x', "");
yatta.val('x').bind(textbox);
}
});
}
window.onload = init

2
examples/README.md
View File

@@ -2,6 +2,6 @@
Here you find some (hopefully) usefull examples on how to use Yatta!
* [Text Editing](./TextEditing/) Simple collaborative text editing demo with PeerJs and Text Framework
* [IWC + Json](./IwcJson/) Tutorial on how to use Yatta! with Json and IWC
* [IWC](./IwcJson/) More IWC example widgets.

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