cleaning up
This commit is contained in:
DadaMonad
parent
d898136f64
commit
af3cd2361a
File diff suppressed because one or more lines are too long
23
examples/Strophe-Json/index.html
Normal file
23
examples/Strophe-Json/index.html
Normal 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
53
examples/Strophe-Json/index.js
Normal 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","");
|
||||
};
|
||||
@ -3,8 +3,6 @@
|
||||
<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>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<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">
|
||||
|
||||
<polymer-element name="yatta-test" attributes="yatta connector stuff">
|
||||
<template>
|
||||
<xmpp-connector id="connector" connector={{connector}}></xmpp-connector>
|
||||
<strophe-connector id="connector" connector={{connector}}></strophe-connector>
|
||||
<yatta-element connector={{connector}} val={{yatta}}>
|
||||
<yatta-property name="slider" val={{slider}}>
|
||||
</yatta-property>
|
||||
@ -24,6 +24,7 @@
|
||||
Polymer({
|
||||
ready: function(){
|
||||
window.y_stuff_property = this.$.otherstuff;
|
||||
|
||||
this.yatta.val("slider",50)
|
||||
}
|
||||
})
|
||||
|
||||
@ -28,6 +28,11 @@ Polymer "yatta-element",
|
||||
if @val? and @val.type is "JsonType"
|
||||
bindToChildren @
|
||||
|
||||
connectorChanged: ()->
|
||||
if (not @val?)
|
||||
@val = new Yatta @connector
|
||||
bindToChildren @
|
||||
|
||||
Polymer "yatta-property",
|
||||
ready: ()->
|
||||
if @val? and @name?
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user