renamed to yjs
This commit is contained in:
DadaMonad
@@ -2,14 +2,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>Yatta+Polymer Example</title>
|
||||
<title>Y Example</title>
|
||||
<script src="../../../webcomponentsjs/webcomponents.min.js"></script>
|
||||
<link rel="import" href="../../../polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="yatta-test.html">
|
||||
<link rel="import" href="y-test.html">
|
||||
</head>
|
||||
<body>
|
||||
<yatta-test></yatta-test>
|
||||
<y-test></y-test>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
|
||||
setTimeout(function(){
|
||||
window.x = document.querySelector("yatta-test");
|
||||
// x.yatta.HB.stopGarbageCollection();
|
||||
x.yatta.val("stuff",{otherstuff:{nostuff:"this is no stuff"}})
|
||||
window.y_test = document.querySelector("y-test");
|
||||
|
||||
window.y_test.y.val("stuff",{otherstuff:{nostuff:"this is no stuff"}})
|
||||
setTimeout(function(){
|
||||
var res = x.yatta.val("stuff");
|
||||
if(!(x.nostuff === "this is no stuff")){
|
||||
var res = y_test.y.val("stuff");
|
||||
if(!(y_test.nostuff === "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 === "this is also no stuff")){
|
||||
if(!(y_test.nostuff === "this is also no stuff")){
|
||||
console.log("Element val overwrite doesn't work")
|
||||
}
|
||||
console.log("Everything is fine :)");
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<link rel="import" href="../../yatta-element.html">
|
||||
<link rel="import" href="../../../Yatta-Connectors/xmpp-connector/xmpp-connector.html">
|
||||
<link rel="import" href="../../../paper-slider/paper-slider.html">
|
||||
|
||||
<polymer-element name="yatta-test" attributes="yatta connector stuff">
|
||||
<template>
|
||||
<h1 id="text" contentEditable> Check this out !</h1>
|
||||
<xmpp-connector id="connector" connector={{connector}} room="testy-xmpp-polymer"></xmpp-connector>
|
||||
<yatta-element connector={{connector}} val={{yatta}}>
|
||||
<yatta-property name="slider" val={{slider}}>
|
||||
</yatta-property>
|
||||
<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>
|
||||
<paper-slider min="0" max="200" immediateValue={{slider}}></paper-slider>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
ready: function(){
|
||||
window.y_stuff_property = this.$.otherstuff;
|
||||
this.yatta.val("slider",50)
|
||||
var that = this;
|
||||
this.connector.whenSynced(function(){
|
||||
if(that.yatta.val("text") == null){
|
||||
that.yatta.val("text","stuff","mutable");
|
||||
}
|
||||
that.yatta.val("text").bind(that.$.text,that.shadowRoot)
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</polymer-element>
|
||||
@@ -2,20 +2,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>PeerJs Json Example</title>
|
||||
<script src="../../../Yatta-Connectors/xmpp-connector/xmpp-connector.js"></script>
|
||||
<script src="../../build/browser/yatta.js"></script>
|
||||
<title>Y Example</title>
|
||||
<script src="../../build/browser/y.js"></script>
|
||||
<script src="../../../y-connectors/y-xmpp/y-xmpp.js"></script>
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 contentEditable> 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>
|
||||
<h1 contentEditable> yjs Tutorial</h1>
|
||||
<p> Collaborative Json editing with <a href="https://github.com/rwth-acis/yjs/">yjs</a>
|
||||
and XMPP Connector. </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> <a href="https://github.com/rwth-acis/yjs/">yjs</a> is a Framework for Real-Time collaboration on arbitrary data types.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,59 +1,25 @@
|
||||
|
||||
/**
|
||||
## 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("testy-xmpp-json2");
|
||||
connector = new Y.XMPP("testy-xmpp-json2");
|
||||
connector.debug = true
|
||||
/**
|
||||
### 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);
|
||||
|
||||
y = new Y(connector);
|
||||
|
||||
window.onload = function(){
|
||||
var textbox = document.getElementById("textfield");
|
||||
yatta.observe(function(events){
|
||||
y.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("headline").bind(document.querySelector("h1"))
|
||||
y.val("textfield").bind(textbox);
|
||||
y.val("headline").bind(document.querySelector("h1"))
|
||||
}
|
||||
}
|
||||
});
|
||||
connector.whenSynced(function(){
|
||||
if(yatta.val("textfield") == null){
|
||||
yatta.val("headline","headline", "mutable");
|
||||
yatta.val("textfield","stuff", "mutable")
|
||||
if(y.val("textfield") == null){
|
||||
y.val("headline","headline", "mutable");
|
||||
y.val("textfield","stuff", "mutable")
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user