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

There are now "Pseudo operations" that are not sent, and get be queried by a special parameter with the HB.getOperation. This will reduce the number of operations that are sent and is necessary for the Array implementation, that I plan to implement in the near future

Browse Source
This commit is contained in:
DadaMonad
2015-01-16 13:36:15 +00:00
parent 6b46500325
commit b647b2af58
20 changed files with 543 additions and 1254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/README.md
View File

@@ -2,12 +2,4 @@
Here you find some (hopefully) usefull examples on how to use Yatta!
## Tutorials
* [PeerJs-Json Tutorial](./PeerJs-Json/) Tutorial on how to use Yatta! with Json and PeerJs Connector.
* [IWC Tutorial](./Iwc/) Tutorial on how to use IWC Connector.
## Demos
* [Text Editing](http://dadamonad.github.io/Yatta/examples/TextEditing/) Simple collaborative text editing demo with PeerJs and Text Framework.
* [XML Example](http://dadamonad.github.io/Yatta/examples/XmlExample) Collaboratively manipulate the dom with native dom-features and jQuery.
* [IWC Demo](./IwcDemo/) More IWC example widgets.
Please note, that the XMPP Connector is the best supported Connector at the moment.

23
examples/Strophe-Json/index.html
View File

@@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>PeerJs Json Example</title>
<script src="../../../Connector/xmpp-connector/strophe.js"></script>
<script src="../../../Connector/bower_components/strophejs-plugins/muc/strophe.muc.js"></script>
<script src="../../../Connector/xmpp-connector/xmpp-connector.js"></script>
<script src="../../build/browser/yatta.js"></script>
<script src="./index.js"></script>
</head>
<body>
<h1> PeerJs + Json Tutorial</h1>
<p> Collaborative Json editing with <a href="https://github.com/DadaMonad/Yatta/">Yatta</a>
and <a href="http://peerjs.com/">PeerJs</a> (WebRTC). </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/PeerJs-Json">here</a>.
</p>
</body>
</html>

53
examples/Strophe-Json/index.js
View File

@@ -1,53 +0,0 @@
/**
## PeerJs + JSON Example
Here, I will give a short overview on how to enable collaborative json with the
[PeerJs](http://peerjs.com/) Connector and the Json Framework. Open
[index.html](http://dadamonad.github.io/Yatta/examples/PeerJs-Json/index.html) in your Browser and
use the console to explore Yatta!
[PeerJs](http://peerjs.com) is a Framework that enables you to connect to other peers. You just need the
user-id of the peer (browser/client). And then you can connect to it.
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/JsonFramework.js"></script>
<script src="../../build/browser/Connectors/PeerJsConnector.js"></script>
<script src="./index.js"></script>
```
### Create Connector
The PeerJs Framework requires an API key, or you need to set up your own PeerJs server.
Get an API key from the [Website](http://peerjs.com/peerserver).
The first parameter of `createPeerJsConnector` is forwarded as the options object in PeerJs.
Therefore, you may also specify the server/port here, if you have set up your own server.
*/
var yatta, yattaHandler;
/**
This will connect to the server owned by the peerjs team.
For now, you can use my API key.
*/
connector = new XMPPConnector();
/**
### Yatta
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 Yatta(connector);
window.onload = function(){
var textbox = document.getElementById("textfield");
yatta.observe(function(events){
for(var i=0; i<events.length; i++){
var event = events[i];
if(event.name === "textfield" && event.type !== "delete"){
yatta.val("textfield").bind(textbox);
}
}
});
yatta.val("textfield","");
};

106
examples/TextEditing/README.md
View File

@@ -1,106 +0,0 @@
## Text Editing Example
Here, I will give a short overview on how to enable collaborative text editing with the
[PeerJs](http://peerjs.com/) Connector and the TextFramework Framework.
PeerJs is a Framework that enables you to connect to other peers. You just need the
user-id of the peer (browser/client). And then you can connect to it. In this example we will encode
the client-id to which this client shall connect, in the url.
It should look like this: http://../index.html?user_id
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/TextFramework.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(){
```
First create the connector - the underlaying communication protocol.
Here, we use the PeerJs connector. Its first parameter is the API key that you need to specify (see [website](http://peerjs.com/))
This will connect to the server owned by the peerjs team.
For now, you can use my API key.
```js
// var conn = {key: 'h7nlefbgavh1tt9'};
```
This will connect to one of my peerjs instances.
I can't guaranty that this will be always up. This is why you should use the previous method with the api key,
or set up your own server.
```js
var conn = {
host: "terrific-peerjs.herokuapp.com",
port: "", // this works because heroku can forward to the right port.
// debug: true,
};
Y.createPeerJsConnector(conn, function(Connector, user_id){
```
TextFramework 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.TextFramework(user_id, Connector);
```
Get the url of this frame. If it has a url-encoded parameter
we will connect to the foreign peer.
```js
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.
```js
document.getElementById("peer_link").setAttribute("href",url+"?"+user_id);
```
Connect to other peer.
```js
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).
```js
var textbox = document.getElementById("textfield");
yatta.bind(textbox);
});
}
window.onload = init
```

22
examples/TextEditing/index.html
View File

@@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>PeerJs Json Example</title>
<script src="../../bower_components/peerjs/peer.js"></script>
<script src="../../bower_components/connector/peerjs-connector/peerjs-connector.js"></script>
<script src="../../build/browser/yatta.js"></script>
<script src="./index.js"></script>
</head>
<body>
<h1> Text Editing Demo</h1>
<p> Collaborative text editing with <a href="https://github.com/DadaMonad/Yatta/">Yatta</a>
and <a href="http://peerjs.com/">PeerJs</a> (WebRTC). 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>

92
examples/TextEditing/index.js
View File

@@ -1,92 +0,0 @@
/**
## Text Editing Example
Here, I will give a short overview on how to enable collaborative text editing with the
[PeerJs](http://peerjs.com/) Connector and the TextFramework Framework.
PeerJs is a Framework that enables you to connect to other peers. You just need the
user-id of the peer (browser/client). And then you can connect to it. In this example we will encode
the client-id to which this client shall connect, in the url.
It should look like this: http://../index.html?user_id
First you have to include the following libraries in your html file:
```
<script src="../../bower_components/peerjs/peer.js"></script>
<script src="../../bower_components/connector/peerjs-connector/peerjs-connector.js"></script>
<script src="../../yatta.js"></script>
<script src="./index.js"></script>
```
Open [index.html](./index.html) in order to start collaboration.
*/
var yatta;
var connector;
function init(){
/**
First create the connector - the underlaying communication protocol.
Here, we use the PeerJs connector. Its first parameter is the API key that you need to specify (see [website](http://peerjs.com/))
*/
/**
This will connect to the server owned by the peerjs team.
For now, you can use my API key.
*/
var options = {key: 'h7nlefbgavh1tt9'};
/**
This will connect to one of my peerjs instances.
I can't guaranty that this will be always up. This is why you should use the previous method with the api key,
or set up your own server.
*/
/*var options = {
host: "terrific-peerjs.herokuapp.com",
port: "", // this works because heroku can forward to the right port.
// debug: true,
};*/
var user_id = Math.ceil(Math.random()*1000);
connector = new PeerJsConnector(user_id, options);
/**
TextFramework is a shared text object. If you change something on this object,
it will be instantaneously shared with all the other collaborators.
*/
yatta = new Yatta(connector);
yatta.val()
/**
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.join(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");
function textbind(){
yatta.val("textbox").bind(textbox);
}
if(peer_id.length > 0){
connector.whenSynced([textbind]);
} else {
yatta.val("textbox",textbox.value)
textbind()
}
}
window.onload = init

2
examples/XMPP-Json/index.js
View File

@@ -49,5 +49,5 @@ window.onload = function(){
}
}
});
yatta.val("textfield","");
yatta.val("textfield","", "mutable");
};