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

checking out new stuff

Browse Source
This commit is contained in:
Kevin Jahns
2015-06-15 14:53:02 +02:00
parent 1b63f5efde
commit 159f37474d
57 changed files with 220 additions and 160705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/README.md
View File

@@ -1,5 +0,0 @@
# Examples
Here you find some (hopefully) usefull examples on how to use Yjs!
Feel free to use the code of the examples in your own project. They include basic examples how to use Yjs.

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

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

57
examples/XMPP-Polymer/y-test.html
View File

@@ -1,57 +0,0 @@
<script src="../../build/browser/y.js"></script>
<script src="../../../y-text/build/browser/y-text.js"></script>
<link rel="import" href="../../build/browser/y-object.html">
<link rel="import" href="../../../y-xmpp/build/browser/y-xmpp.html">
<link rel="import" href="../../../paper-slider/paper-slider.html">
<polymer-element name="y-test" attributes="y connector stuff">
<template>
<h1 id="text" contentEditable> Check this out !</h1>
<y-xmpp id="connector" connector={{connector}} room="testy-xmpp-polymer" syncMode="syncAll" debug="true"></y-xmpp>
<y-object connector={{connector}} val={{y}}>
<y-property name="slider" val={{slider}}>
</y-property>
<y-property name="stuff" val={{stuff}}>
<y-property id="otherstuff" name="otherstuff" val={{otherstuff}}>
</y-property>
</y-property>
</y-object>
<y-object val={{otherstuff}}>
<y-property name="nostuff" val={{nostuff}}>
</y-property>
</y-object>
<paper-slider min="0" max="200" immediateValue={{slider}}></paper-slider>
</template>
<script>
Polymer({
ready: function(){
window.y_stuff_property = this.$.otherstuff;
this.y.val("slider",50)
var that = this;
this.connector.whenSynced(function(){
if(that.y.val("text") == null){
that.y.val("text",new Y.Text("stuff"));
}
that.y.val("text").bind(that.$.text,that.shadowRoot)
})
// Everything is initialized. Lets test stuff!
window.y_test = this;
window.y_test.y.val("stuff",{otherstuff:{nostuff:"this is no stuff"}})
setTimeout(function(){
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(!(y_test.nostuff === "this is also no stuff")){
console.log("Element val overwrite doesn't work")
}
console.log("Everything is fine :)");
},500)
},500);
}
})
</script>
</polymer-element>

21
examples/XMPP/index.html
View File

@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Y Example</title>
<script src="../../build/browser/y.js"></script>
<script src="../../../y-text/build/browser/y-text.js"></script>
<script src="../../../y-xmpp/y-xmpp.js"></script>
<script src="./index.js"></script>
</head>
<body>
<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/y-js/yjs/">yjs</a> is a Framework for Real-Time collaboration on arbitrary data types.
</p>
</body>
</html>

26
examples/XMPP/index.js
View File

@@ -1,26 +0,0 @@
connector = new Y.XMPP().join("testy-xmpp-json3", {syncMode: "syncAll"});
connector.debug = true
y = new Y(connector);
window.onload = function(){
var textbox = document.getElementById("textfield");
y.observe(function(events){
for(var i=0; i<events.length; i++){
var event = events[i];
if(event.name === "textfield" && event.type !== "delete"){
y.val("textfield").bind(textbox);
y.val("headline").bind(document.querySelector("h1"))
}
}
});
connector.whenSynced(function(){
if(y.val("textfield") == null){
y.val("headline", new Y.Text("headline"));
y.val("textfield",new Y.Text("stuff"))
}
})
};

172
examples/indexedDB/index.coffee
View File

@@ -1,172 +0,0 @@
class DBTransaction
constructor: (@t)->
setOperation: (op)->
that = this
new Promise (resolve, reject)->
req = that.t.objectStore("HistoryBuffer").put op
req.onsuccess = (event)->
resolve op
req.onerror = (event)->
reject "Could not set Operation!"
getOperation: (uid)->
that = this
new Promise (resolve, reject)->
req = that.t.objectStore("HistoryBuffer").get uid
req.onsuccess = (event)->
resolve req.result
req.onerror = (event)->
reject "Could not get Operation!"
getOperations: (state_map)->
flow = Promise.resolve()
ops = []
that = this
hb = that.t.objectStore("HistoryBuffer")
that.getStateVector().then (end_state_vector)->
for end_state of end_state_vector
# convert to the db-structure
do (end_state = end_state)->
start_state =
user: end_state.name
state: state_map[end_state] ? 0
flow = flow.then ()->
from = [start_state.user, start_state.number]
to = [end_state.user, end_state.number]
range = IDBKeyRange.bound from, to
defer = Promise.defer()
hb.openCursor(range).onsuccess = ()->
cursor = event.target.result
if cursor?
ops.push cursor.value # add Operation
cursor.continue()
else
# got all ops from this user
defer.resolve ops
defer.promise
setState: (state)->
that = this
new Promise (resolve, reject)->
req = that.t.objectStore("StateVector").put state
req.onsuccess = (event)->
resolve state
req.onerror = (event)->
reject "Could not set state vector!"
getState: (user)->
defer = Promise.defer()
req = @t.objectStore("StateVector").get user
req.onsuccess = (event)->
defer.resolve req.result
req.onerror = (event)->
defer.reject "Could not get state vector!"
defer.promise
getStateVector: ()->
defer = Promise.defer()
state_vector = []
@t.objectStore("StateVector").openCursor().onsuccess = ()->
cursor = event.target.result
if cursor?
state = cursor.value
state_vector.push state
cursor.continue()
else
# got all ops from this user
defer.resolve state_vector
defer.promise
class Transaction
constructor: (@t)->
updateOperation: (op)->
@t.setOperation op
addOperation: (op)->
that = this
@t.getState op.uid[0]
.then (state)->
# only add operation if this is an expected operation
if not state?
state =
user: op.uid[0]
number: 0
if op.uid[1] is state.number
state.number++
that.t.setState state
else
return Promise.reject("Unexpected Operation")
.then that.t.setOperation op
getOperation: (uid)->
@t.getOperation uid
getState: (user)->
@t.getState user
getOperations: (state_vector)->
@t.getOperations state_vector
class window.DB
constructor: ()->
@ready = (new Promise (resolve, reject)->
req = indexedDB.open "Testy", 7
req.onerror = ()->
reject "Couldn't open the IndexedDB database!"
req.onsuccess = (event)->
resolve event.target.result
req.onupgradeneeded = (event)->
db = event.target.result
objectStore = db.createObjectStore "HistoryBuffer", {keyPath: "uid"}
objectStore = db.createObjectStore "StateVector", {keyPath: "user"}
).catch (message)->
throw new Error message
requestTransaction: ()->
@ready.then (db)->
new Promise (resolve, reject)->
resolve new Transaction( new DBTransaction(db.transaction(["HistoryBuffer", "StateVector"], "readwrite")) )
removeDatabase: ()->
req = indexedDB.deleteDatabase "Testy"
req.onsuccess = ()->
console.log("Deleted database successfully");
req.onblocked = ()->
console.log("Database is currently being blocked")
console.dir arguments
req.onerror = ()->
console.log("Couldn't delete database")
console.dir arguments
null
window.db = new DB()
window.addDummyDataSet = ()->
db.requestTransaction().then (t)->
t.getState("dmonad").then (state)->
state ?= {number: 0}
t.addOperation({uid: ["dmonad", state.number]})
window.getOp = (num = 3)->
db.requestTransaction().then (t)->
t.getOperation(["dmonad", num])
.then (op)->
console.log("yay:")
console.log(op)
window.getOps = (state_map = {dmonad: 5})->
db.requestTransaction().then (t)->
t.getOperations(state_map)
.then (op)->
console.log("yay:")
console.log(op)

11
examples/indexedDB/index.html
View File

@@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Y Example</title>
<script src="./index.js"></script>
</head>
<body>
<h1 contentEditable> Tutorial</h1>
</body>
</html>

272
examples/indexedDB/index.js
View File

@@ -1,272 +0,0 @@
// Generated by CoffeeScript 1.9.2
(function() {
var DBTransaction, Transaction;
DBTransaction = (function() {
function DBTransaction(t1) {
this.t = t1;
}
DBTransaction.prototype.setOperation = function(op) {
var that;
that = this;
return new Promise(function(resolve, reject) {
var req;
req = that.t.objectStore("HistoryBuffer").put(op);
req.onsuccess = function(event) {
return resolve(op);
};
return req.onerror = function(event) {
return reject("Could not set Operation!");
};
});
};
DBTransaction.prototype.getOperation = function(uid) {
var that;
that = this;
return new Promise(function(resolve, reject) {
var req;
req = that.t.objectStore("HistoryBuffer").get(uid);
req.onsuccess = function(event) {
return resolve(req.result);
};
return req.onerror = function(event) {
return reject("Could not get Operation!");
};
});
};
DBTransaction.prototype.getOperations = function(state_map) {
var flow, hb, ops, that;
flow = Promise.resolve();
ops = [];
that = this;
hb = that.t.objectStore("HistoryBuffer");
return that.getStateVector().then(function(end_state_vector) {
var end_state, results;
results = [];
for (end_state in end_state_vector) {
results.push((function(end_state) {
var ref, start_state;
start_state = {
user: end_state.name,
state: (ref = state_map[end_state]) != null ? ref : 0
};
return flow = flow.then(function() {
var defer, from, range, to;
from = [start_state.user, start_state.number];
to = [end_state.user, end_state.number];
range = IDBKeyRange.bound(from, to);
defer = Promise.defer();
hb.openCursor(range).onsuccess = function() {
var cursor;
cursor = event.target.result;
if (cursor != null) {
ops.push(cursor.value);
return cursor["continue"]();
} else {
return defer.resolve(ops);
}
};
return defer.promise;
});
})(end_state));
}
return results;
});
};
DBTransaction.prototype.setState = function(state) {
var that;
that = this;
return new Promise(function(resolve, reject) {
var req;
req = that.t.objectStore("StateVector").put(state);
req.onsuccess = function(event) {
return resolve(state);
};
return req.onerror = function(event) {
return reject("Could not set state vector!");
};
});
};
DBTransaction.prototype.getState = function(user) {
var defer, req;
defer = Promise.defer();
req = this.t.objectStore("StateVector").get(user);
req.onsuccess = function(event) {
return defer.resolve(req.result);
};
req.onerror = function(event) {
return defer.reject("Could not get state vector!");
};
return defer.promise;
};
DBTransaction.prototype.getStateVector = function() {
var defer, state_vector;
defer = Promise.defer();
state_vector = [];
this.t.objectStore("StateVector").openCursor().onsuccess = function() {
var cursor, state;
cursor = event.target.result;
if (cursor != null) {
state = cursor.value;
state_vector.push(state);
return cursor["continue"]();
} else {
return defer.resolve(state_vector);
}
};
return defer.promise;
};
return DBTransaction;
})();
Transaction = (function() {
function Transaction(t1) {
this.t = t1;
}
Transaction.prototype.updateOperation = function(op) {
return this.t.setOperation(op);
};
Transaction.prototype.addOperation = function(op) {
var that;
that = this;
return this.t.getState(op.uid[0]).then(function(state) {
if (state == null) {
state = {
user: op.uid[0],
number: 0
};
}
if (op.uid[1] === state.number) {
state.number++;
return that.t.setState(state);
} else {
return Promise.reject("Unexpected Operation");
}
}).then(that.t.setOperation(op));
};
Transaction.prototype.getOperation = function(uid) {
return this.t.getOperation(uid);
};
Transaction.prototype.getState = function(user) {
return this.t.getState(user);
};
Transaction.prototype.getOperations = function(state_vector) {
return this.t.getOperations(state_vector);
};
return Transaction;
})();
window.DB = (function() {
function DB() {
this.ready = (new Promise(function(resolve, reject) {
var req;
req = indexedDB.open("Testy", 7);
req.onerror = function() {
return reject("Couldn't open the IndexedDB database!");
};
req.onsuccess = function(event) {
return resolve(event.target.result);
};
return req.onupgradeneeded = function(event) {
var db, objectStore;
db = event.target.result;
objectStore = db.createObjectStore("HistoryBuffer", {
keyPath: "uid"
});
return objectStore = db.createObjectStore("StateVector", {
keyPath: "user"
});
};
}))["catch"](function(message) {
throw new Error(message);
});
}
DB.prototype.requestTransaction = function() {
return this.ready.then(function(db) {
return new Promise(function(resolve, reject) {
return resolve(new Transaction(new DBTransaction(db.transaction(["HistoryBuffer", "StateVector"], "readwrite"))));
});
});
};
DB.prototype.removeDatabase = function() {
var req;
req = indexedDB.deleteDatabase("Testy");
req.onsuccess = function() {
return console.log("Deleted database successfully");
};
req.onblocked = function() {
console.log("Database is currently being blocked");
return console.dir(arguments);
};
req.onerror = function() {
console.log("Couldn't delete database");
return console.dir(arguments);
};
return null;
};
return DB;
})();
window.db = new DB();
window.addDummyDataSet = function() {
return db.requestTransaction().then(function(t) {
return t.getState("dmonad").then(function(state) {
if (state == null) {
state = {
number: 0
};
}
return t.addOperation({
uid: ["dmonad", state.number]
});
});
});
};
window.getOp = function(num) {
if (num == null) {
num = 3;
}
return db.requestTransaction().then(function(t) {
return t.getOperation(["dmonad", num]).then(function(op) {
console.log("yay:");
return console.log(op);
});
});
};
window.getOps = function(state_map) {
if (state_map == null) {
state_map = {
dmonad: 5
};
}
return db.requestTransaction().then(function(t) {
return t.getOperations(state_map).then(function(op) {
console.log("yay:");
return console.log(op);
});
});
};
}).call(this);