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

outsourced examples

Browse Source
This commit is contained in:
Kevin Jahns
2015-11-04 16:52:31 +01:00
parent 33b7588497
commit e2e89e198f
9 changed files with 167 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Examples/OfflineEditing/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!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="../../node_modules/simplewebrtc/simplewebrtc.bundle.js"></script>
<script src="../bower_components/yjs/y.js"></script>
<script src="./index.js"></script>
</body>
</html>

50
Examples/OfflineEditing/index.js Normal file
View File

@@ -0,0 +1,50 @@
/* global Y */
// create a shared object. This function call will return a promise!
Y({
db: {
name: 'IndexedDB',
namespace: 'offlineEditingDemo'
},
connector: {
name: 'WebRTC',
room: 'offlineEditingDemo',
debug: true
}
}).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 TextBind
var textpromise = yconfig.root.get('text')
if (textpromise == null) {
yconfig.root.set('text', Y.TextBind)
}
// 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'
}
}
})

12
Examples/TextBind/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!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="../../node_modules/simplewebrtc/simplewebrtc.bundle.js"></script>
<script src="../../y.js"></script>
<script src="./index.js"></script>
</body>
</html>

47
Examples/TextBind/index.js Normal file
View File

@@ -0,0 +1,47 @@
/* global Y */
// create a shared object. This function call will return a promise!
Y({
db: {
name: 'Memory'
},
connector: {
name: 'WebRTC',
room: 'TextBindDemo',
debug: true
}
}).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 TextBind
yconfig.root.set('text', Y.TextBind)
// 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'
}
}
})

14
Examples/bower.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "yjs-examples",
"version": "0.0",
"homepage": "y-js.org",
"authors": [
"Kevin Jahns <kevin.jahns@rwth-aachen.de>"
],
"description": "Examples for yjs",
"license": "MIT",
"ignore": [],
"dependencies": {
"yjs": "../"
}
}