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

cleaning up

Browse Source
This commit is contained in:
DadaMonad 2015-01-07 14:09:04 +00:00
parent d898136f64
commit af3cd2361a
7 changed files with 93 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/browser/yatta-element.js
View File

File diff suppressed because one or more lines are too long

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

@ -0,0 +1,23 @@
<!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 Normal file
View File

@ -0,0 +1,53 @@
/**
## 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","");
};

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

@ -3,8 +3,6 @@
<head> <head>
<meta charset=utf-8 /> <meta charset=utf-8 />
<title>PeerJs Json Example</title> <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="../../../Connector/xmpp-connector/xmpp-connector.js"></script>
<script src="../../build/browser/yatta.js"></script> <script src="../../build/browser/yatta.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>

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

@ -1,11 +1,11 @@
<link rel="import" href="../../yatta-element.html"> <link rel="import" href="../../yatta-element.html">
<link rel="import" href="../../../Connector/xmpp-connector/xmpp-connector.html"> <link rel="import" href="../../../Connector/strophe-connector/strophe-connector.html">
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html"> <link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
<polymer-element name="yatta-test" attributes="yatta connector stuff"> <polymer-element name="yatta-test" attributes="yatta connector stuff">
<template> <template>
<xmpp-connector id="connector" connector={{connector}}></xmpp-connector> <strophe-connector id="connector" connector={{connector}}></strophe-connector>
<yatta-element connector={{connector}} val={{yatta}}> <yatta-element connector={{connector}} val={{yatta}}>
<yatta-property name="slider" val={{slider}}> <yatta-property name="slider" val={{slider}}>
</yatta-property> </yatta-property>
@ -24,6 +24,7 @@
Polymer({ Polymer({
ready: function(){ ready: function(){
window.y_stuff_property = this.$.otherstuff; window.y_stuff_property = this.$.otherstuff;
this.yatta.val("slider",50) this.yatta.val("slider",50)
} }
}) })

5
lib/yatta-element.coffee
View File

@ -28,6 +28,11 @@ Polymer "yatta-element",
if @val? and @val.type is "JsonType" if @val? and @val.type is "JsonType"
bindToChildren @ bindToChildren @
connectorChanged: ()->
if (not @val?)
@val = new Yatta @connector
bindToChildren @
Polymer "yatta-property", Polymer "yatta-property",
ready: ()-> ready: ()->
if @val? and @name? if @val? and @name?

4
yatta-element.js
View File

File diff suppressed because one or more lines are too long