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

added sw example

Browse Source
This commit is contained in:
Kevin Jahns 2016-11-14 16:29:04 +01:00
parent 957d650f81
commit afa05b62a1
3 changed files with 105 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Examples/ServiceWorker/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<!-- quill does not include dist files! We are using the hosted version instead -->
<!--link rel="stylesheet" href="../bower_components/quill/dist/quill.snow.css" /-->
<link href="https://cdn.quilljs.com/1.0.4/quill.snow.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css" rel="stylesheet">
<style>
#quill-container {
border: 1px solid gray;
box-shadow: 0px 0px 10px gray;
}
</style>
</head>
<body>
<div id="quill-container">
<div id="quill">
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js" type="text/javascript"></script>
<script src="https://cdn.quilljs.com/1.0.4/quill.js"></script>
<!-- quill does not include dist files! We are using the hosted version instead (see above)
<script src="../bower_components/quill/dist/quill.js"></script>
-->
<script src="../bower_components/yjs/y.es6"></script>
<script src="./index.js"></script>
</body>
</html>

51
Examples/ServiceWorker/index.js Normal file
View File

@ -0,0 +1,51 @@
/* global Y, Quill */
// initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'ServiceWorkerExample'
},
sourceDir: '/bower_components',
share: {
richtext: 'Richtext' // y.share.richtext is of type Y.Richtext
}
}).then(function (y) {
window.yQuill = y
// create quill element
window.quill = new Quill('#quill', {
modules: {
formula: true,
syntax: true,
toolbar: [
[{ size: ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline'],
[{ color: [] }, { background: [] }], // Snow theme fills in values
[{ script: 'sub' }, { script: 'super' }],
['link', 'image'],
['link', 'code-block'],
[{list: 'ordered' }]
]
},
theme: 'snow'
});
// bind quill to richtext type
y.share.richtext.bind(window.quill)
})
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./yjs-service-worker.js').then(function(registration) {
// Registration was successful
console.log('Yjs ServiceWorker registration successful with scope: ', registration.scope)
registration.active.postMessage('hi sw')
addEventListener('message', function () {console.log.apply(console, ['host received:'].concat(arguments))}, true)
}).catch(function(err) {
// registration failed :(
console.log('Yjs ServiceWorker registration failed: ', err)
});
}

23
Examples/ServiceWorker/yjs-service-worker.js Normal file
View File

@ -0,0 +1,23 @@
importScripts(
'/bower_components/yjs/y.js',
'/bower_components/y-memory/y-memory.js',
'/bower_components/y-indexeddb/y-indexeddb.js',
'/bower_components/y-websockets-client/y-websockets-client.js'
)
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'ServiceWorkerExample',
options: { jsonp: false }
}
}).then(function (y) {
console.log('y sw init')
})
addEventListener('message', function () {
console.log.apply(console, ['sw received:'].concat(arguments))
}, true)