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

update

Browse Source
This commit is contained in:
Kevin Jahns
2015-12-01 19:27:03 +01:00
parent b471c91d1d
commit 434432a742
11 changed files with 5620 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Examples/OfflineEditing/index.js
View File

@@ -1,38 +0,0 @@
/* global Y */
// create a shared object. This function call will return a promise!
Y({
db: {
name: 'memory',
namespace: 'offlineEditingDemo'
},
connector: {
name: 'websockets-client',
room: 'offlineEditingDemo',
debug: true
},
types: ['Array', 'Text'],
sourceDir: '/bower_components'
}).then(function (yconfig) {
// yconfig holds all the information about the shared object
window.yconfig = yconfig
// now we bind the textarea and the contenteditable h1 element
// to a shared element
var textarea = document.getElementById('textfield')
yconfig.root.observePath(['text'], function (text) {
// every time the 'text' property of the yconfig.root changes,
// this function is called. Then we bind it to the html elements
if (text != null) {
// when the text property is deleted, text may be undefined!
// This is why we have to check if text exists..
text.bind(textarea)
}
})
// create a shared Text
var textpromise = yconfig.root.get('text')
if (textpromise == null) {
// Set the text type if it does not yet exist
yconfig.root.set('text', Y.Text)
}
})

18
Examples/Puzzle/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.cell {
fill: black;
cursor: move;
}
</style>
</head>
<body>
<svg id="puzzle-example" width="100%" viewBox="0 0 1 1"></svg>
<script src="../bower_components/yjs/y.es6"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./index.js"></script>
</body>
</html>

63
Examples/Puzzle/index.js Normal file
View File

@@ -0,0 +1,63 @@
/* @flow */
/* global Y, d3 */
// initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'Puzzle-example'
},
sourceDir: '/bower_components',
share: {
piece1: 'Map',
piece2: 'Map',
piece3: 'Map'
}
}).then(function (y) {
window.y = y
var dragX, dragY // x,y coordinates of drag event
var drag = d3.behavior.drag()
.on("drag", function(){
dragX = d3.event.x-0.05
dragY = d3.event.y-0.05
d3.select(this)
//.transition()
.attr("transform", "translate(" + dragX + "," + dragY+ ")")
})
.on('dragend', function (piece) {
// change the shared model of the puzzle
piece.set('x', dragX)
piece.set('y', dragY)
})
var data = [y.share.piece1, y.share.piece2, y.share.piece3]
var nodes = d3.select(document.querySelector("#puzzle-example")).append('g').selectAll("rect").data(data)
nodes
.enter()
.append('rect')
.attr('width', 0.1)
.attr('height', 0.1)
.attr("class", "cell")
.attr("transform", function (piece, i) {
var x = piece.get('x') || i/3
var y = piece.get('y') || i/3
return "translate(" + x + "," + y + ")"
}).call(drag)
function repaint () {
nodes
.transition()
.attr("transform", function (piece, i) {
var x = piece.get('x') || i/3
var y = piece.get('y') || i/3
return "translate(" + x + "," + y + ")"
})
}
data.forEach(function(piece){
piece.observe(repaint)
})
})

11
Examples/TextBind/index.html
View File

@@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<button id="button">Disconnect</button>
<h1 id="contenteditable" contentEditable></h1>
<textarea style="width:80%;" rows=40 id="textfield"></textarea>
<script src="../bower_components/yjs/y.js"></script>
<script src="./index.js"></script>
</body>
</html>

49
Examples/TextBind/index.js
View File

@@ -1,49 +0,0 @@
/* global Y */
// create a shared object. This function call will return a promise!
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'textEditingDem0',
debug: true
},
types: ['Array', 'Text'],
sourceDir: '/bower_components/'
}).then(function (yconfig) {
// yconfig holds all the information about the shared object
window.yconfig = yconfig
// yconfig.root holds the shared element
window.y = yconfig.root
// now we bind the textarea and the contenteditable h1 element
// to a shared element
var textarea = document.getElementById('textfield')
var contenteditable = document.getElementById('contenteditable')
yconfig.root.observePath(['text'], function (text) {
// every time the 'text' property of the yconfig.root changes,
// this function is called. Then we bind it to the html elements
if (text != null) {
// when the text property is deleted, text may be undefined!
// This is why we have to check if text exists..
text.bind(textarea)
text.bind(contenteditable)
}
})
// create a shared Text
yconfig.root.set('text', Y.Text)
// We also provide a button for disconnecting/reconnecting the shared element
var button = document.querySelector('#button')
button.onclick = function () {
if (button.innerText === 'Disconnect') {
yconfig.disconnect()
button.innerText = 'Reconnect'
} else {
yconfig.reconnect()
button.innerText = 'Disconnect'
}
}
})

2
Examples/OfflineEditing/index.html → Examples/Textarea/index.html
View File

@@ -3,7 +3,7 @@
<body>
<textarea style="width:80%;" rows=40 id="textfield"></textarea>
<script src="../bower_components/yjs/y.js"></script>
<script src="../bower_components/yjs/y.es6"></script>
<script src="./index.js"></script>
</body>
</html>

22
Examples/Textarea/index.js Normal file
View File

@@ -0,0 +1,22 @@
/* global Y */
// initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'Textarea-example'
},
sourceDir: '/bower_components',
share: {
textarea: 'Text' // y.share.textarea is of type Y.Text
}
}).then(function (y) {
window.y = y
// bind the textarea to a shared text element
y.share.textarea.bind(document.getElementById('textfield'))
// thats it..
})