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

cleaning up

Browse Source
This commit is contained in:
DadaMonad
2015-01-23 16:00:03 +00:00
parent f23bb36635
commit 31e80f0727
363 changed files with 31007 additions and 116333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
examples/PeerJs-Json/README.md
View File

20
examples/PeerJs-Json/index.html
View File

@@ -1,20 +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="../../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>
<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>

264
examples/PeerJs-Json/index.js
View File

@@ -1,264 +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.
*/
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()*100);
connector = new PeerJsConnector(user_id,options);
//var connector = new TestConnector(user_id);
/**
### 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);
/**
Next, you may want to connect to another peer. Therefore you have to receive his
user_id. If the other peer is connected to other peers, the PeerJsConnector
will automatically connect to them too.
Transmitting the user_id is your job.
See [TextEditing](../../examples/TextEditing/) for a nice example
on how to do that with urls.
*/
console.log("Copy your user-id: " + user_id);
// yatta.connector.connectToPeer(peer_user_id);
/**
Add a integer-property like this
*/
yatta.val('x', 7);
/**
Get the value of property x like this
*/
console.log(yatta.val('x') === 7); // true
/**
A string property can be either mutable or immutable.
*/
yatta.val('mutable_string', "text", "mutable");
yatta.val('immutable_string', "text", "immutable");
console.log(yatta.val('immutable_string') === "text"); // true
yatta.val('mutable_string').insertText(2,"XXX"); // position, string
yatta.val('mutable_string').deleteText(0,1); // position, deletion length
console.log(yatta.val('mutable_string').val() === "eXXXxt"); // true
/**
Did you recognize that we use anoter `.val()` for mutable strings?
Thats because `yatta.val('mutable_string')` is of type *WordType*.
Since WordType implements `toString`, you can use it like a string:
*/
console.log("" + yatta.val("mutable_string") === "eXXXxt") // true, concatenating it with a string will implicitly invoke toString()
/**
You can omit the mutable - parameter. In that case the default will be used.
Initially the default is 'mutable'. You can set it like this:
*/
yatta.setMutableDefault('mutable');
// or
yatta.setMutableDefault('immutable');
yatta.val('new_string', "string");
console.log(yatta.val('new_string') === "string"); // true
/**
Yatta is [chainable](http://schier.co/post/method-chaining-in-javascript):
*/
yatta.val('a', 4).val('b',5);
console.log(yatta.val('a') === 4); // true
console.log(yatta.val('b') === 5); // true
/**
You can alse set objects.
*/
yatta.val('object', {a : {b : "b"}, c : { d : 5 }});
console.log(yatta.val('object').val('c').val('d') === 5); // true
/**
Lists are always immutable.
*/
yatta.val('list', [0,1,2]);
console.log(yatta.val('list')[2] === 2); // true
/**
### Check Types
Certainly you want to check types!
You get the type of an YattaType with the `.type` property.
Here, we create a function that parses a Yatta type to a string.
*/
function show(o){
if (o.type === "JsonType"){
return JSON.stringify(o.toJson());
} else if (o.type === "WordType") {
return o.val();
} else if (o.constructor === {}.constructor) { // It's an Object
return JSON.stringify(o);
} else { // It's a primitive data type (E.g. string, int)
return o;
}
}
/**
### Add listeners
Apply a 'addProperty' - listener to a JsonType.
*/
function addProperty(event_name, property_name, op){
// op is the operation that changed the objects value. In addProperty it is most likely to be a 'Replaceable' (see doc).
console.log("Property '" + property_name + "' was created by '"+op.creator+"'!");
console.log("Value: " + show(this.val(property_name))); // 'this' is the object on which the property was created.
};
yatta.on('addProperty', addProperty);
yatta.val('new', {z: 7}); // Property 'new' was created!
/**
Apply a 'change' - listener to a JsonType.
*/
function change(event_name, property_name, op){
// Check who made this property change!
if(op.creator == yatta.getUserId()){
console.log("You changed the value of property '" + property_name + "'!");
}else{
console.log("User '"+op.creator+"' changed the value of property '" + property_name + "'!");
}
console.log("New value: " + show(this.val(property_name)) + ""); // 'this' is the object on which the property changed.
};
yatta.on('change', change);
yatta.val('mutable_string', "text", 'mutable'); // You changed the value of property 'mutable_string'!
/**
'change' and 'addProperty' do also fire for nested properties.
*/
yatta.val('new').val('z', {'replace' : "x"}); // Property 'z' was replaced or changed!
yatta.val('new').val('z').val('new', {"true": true}); // Property 'z' was replaced or changed! + Property 'new' was created!
/**
Delete the listeners
*/
yatta.deleteListener('addProperty', addProperty);
yatta.deleteListener('change', change);
/**
Apply 'insert' and 'delete' - listeners to Words.
*/
function insert_delete(event_name, op){
if (event_name === "insert"){
console.log("Inserted '" + op.content + "' at position " + op.getPosition());
} else if (event_name === "delete"){
console.log("Deleted character at position " + op.getPosition());
}
};
yatta.val('mutable_string').on(['insert', 'delete'], insert_delete);
yatta.val('mutable_string').insertText(0, 'a'); // Inserted 'a' at position 0
yatta.val('mutable_string').deleteText(0, 1); // Deleted character at position 0
yatta.val('mutable_string').deleteListener('insert_delete', insert_delete);
/**
### Experimental method
Nah.. this is only for the cool kids.
*/
console.log(yatta.value.list[2] === 2) // true
yatta.value.list = [3,4,5]
console.log(yatta.val('list')[2] === 5) // true
yatta.value.object = {c : 4}
console.log(yatta.value.object.c === 4) // true
/**
How did I do that? ^^
In Javascript it is possible set setter- and getter- for properties. This is
why this method feels much more natural.
The downside is that you are only allowed to overwrite existing properties.
*/
yatta.value.newProperty = "Awesome"
console.log(yatta.value.newProperty !== "Awesome") // true, yatta.value.newProperty is undefined.
/**
So, how do we create new properties?
*/
yatta.value = {newProperty : "Awesome"}
console.log(yatta.value.newProperty === "Awesome") // true, it's awesome ;)
/**
This is stupid! I don't want to overwrite all my existing properties!
Very well.. The solution is that we merge yatta.value with the new assignment.
For example: assuming we want to overwrite yatta.value with some object o.
Then these two rules apply:
* The result has all properties of o
* The result has all properties of yatta.value if they don't occur under the same property-name in o
*/
yatta.value = {newProperty : {Awesome : true }}
console.log(yatta.value.list[2] === 5) // true, old value list still exists.
console.log(yatta.value.newProperty.Awesome === true) // true, newProperty is overwritten.
/**
Consider this case.
*/
yatta.value = {newProperty : { x : 4} }
console.log(yatta.value.newProperty.Awesome == null) // true, newProperty was replaced, therefore it is now undefined
/**
Did you notice that you always set immutable objects if you set properties like this?
Even if the default is 'mutable'. If you want to work with mutable objects you have to work with .val().
One last thing. You are only allowed to set properties like this `yatta.value = o`.
Yatta can't observe if you overwrite object references `yatta = "Awesome"`.
*/
w = yatta.value.newProperty
w = "Awesome"
console.log(yatta.value.newProperty !== "Awesome") // true, still not awesome..
/**
Please also read [JsonWrapper](https://rawgit.com/DadaMonad/Yatta/master/doc/class/JsonWrapper.html).
I really want to hear what you think about this method :)
*/

15
examples/PeerJs-Polymer/index.html
View File

@@ -1,15 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Yatta+Polymer Example</title>
<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="yatta-test.html">
</head>
<body>
<yatta-test></yatta-test>
<script src="./index.js"></script>
</body>
</html>

18
examples/PeerJs-Polymer/index.js
View File

@@ -1,18 +0,0 @@
window.onload = function(){
window.x = document.querySelector("yatta-test");
x.yatta.val("stuff",{otherstuff:{nostuff:"this is no stuff"}});
setTimeout(function(){
var res = x.yatta.val("stuff");
if(!(x.nostuff.val() === "this is no stuff")){
console.log("Deep inherit doesn't work")
}
window.y_stuff_property.val = {nostuff: "this is also no stuff"};
setTimeout(function(){
if(!(x.nostuff.val() === "this is also no stuff")){
console.log("Element val overwrite doesn't work")
}
console.log("res");
},500)
},500);
}

26
examples/PeerJs-Polymer/yatta-test.html
View File

@@ -1,26 +0,0 @@
<link rel="import" href="../../yatta-element.html">
<link rel="import" href="../../bower_components/connector/peerjs-connector/peerjs-connector.html">
<polymer-element name="yatta-test" attributes="yatta connector stuff">
<template>
<peerjs-connector id="connector" conn_id="1234" key="h7nlefbgavh1tt9" connector={{connector}}></peerjs-connector>
<yatta-element connector={{connector}} val={{yatta}}>
<yatta-property name="stuff" val={{stuff}}>
<yatta-property id="otherstuff" name="otherstuff" val={{otherstuff}}>
</yatta-property>
</yatta-property>
</yatta-element>
<yatta-element val={{otherstuff}}>
<yatta-property name="nostuff" val={{nostuff}}>
</yatta-property>
</yatta-element>
</template>
<script>
Polymer({
ready: function(){
window.y_stuff_property = this.$.otherstuff;
}
})
</script>
</polymer-element>

4
examples/README.md
View File

@@ -2,6 +2,4 @@
Here you find some (hopefully) usefull examples on how to use Yatta!
Please note, that the XMPP Connector is the best supported Connector at the moment.
Note: currently only the XMPP stuff is supported.
Please note, that the XMPP Connector is the best supported Connector at the moment.

4
examples/XMPP-Polymer/index.html
View File

@@ -3,8 +3,8 @@
<head>
<meta charset=utf-8 />
<title>Yatta+Polymer Example</title>
<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../../webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="yatta-test.html">
</head>

2
examples/XMPP-Polymer/yatta-test.html
View File

@@ -1,6 +1,6 @@
<link rel="import" href="../../yatta-element.html">
<link rel="import" href="../../../Yatta-Connectors/xmpp-connector/xmpp-connector.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<link rel="import" href="../../../paper-slider/paper-slider.html">
<polymer-element name="yatta-test" attributes="yatta connector stuff">
<template>

93
examples/XmlExample/README.md
View File

@@ -1,93 +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/XmlFramework.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.
```js
var yatta, yattaHandler;
```
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,
};*/
var rid = Math.floor(Math.random()*100 + 1)
Y.createPeerJsConnector(rid, conn, function(Connector, user_id){
yatta = new Y.XmlFramework(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);
}
yatta.connector.onNewConnection(function(){
$("#collaborative").replaceWith(yatta.val())
});
yatta.val($("#collaborative")[0])
console.log(yatta.getUserId());
});
```

44
examples/XmlExample/index.html
View File

@@ -1,44 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<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>
<p> Collaborative XML editing with <a href="https://github.com/DadaMonad/Yatta/">Yatta</a>
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/XmlExample">here</a>.
<p>Open this link on other clients: <a id="peer_link" target="_blank">Drop me </a></p> Share this link, in order to build a peer-to-peer based network via WebRTC. 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>
</p>
</body>
</html>

78
examples/XmlExample/index.js
View File

@@ -1,78 +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/XmlFramework.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.
*/
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.
*/
/*var conn = {
host: "terrific-peerjs.herokuapp.com",
port: "", // this works because heroku can forward to the right port.
// debug: true,
};*/
var rid = Math.floor(Math.random()*100 + 1)
Y.createPeerJsConnector(rid, conn, function(Connector, user_id){
yatta = new Y.XmlFramework(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);
}
yatta.connector.onNewConnection(function(){
$("#collaborative").replaceWith(yatta.val())
});
yatta.val($("#collaborative")[0])
console.log(yatta.getUserId());
});