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

reimplement persistence approach

Browse Source
This commit is contained in:
Kevin Jahns
2017-12-24 03:18:00 +01:00
parent 08f37a86e3
commit f2debc150c
27 changed files with 880 additions and 1275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/html-editor/index.html
View File

@@ -1,10 +1,7 @@
<!DOCTYPE html>
<html>
</head>
<!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../yjs-dist.js"></script>
<script src="./canvasjs.min.js"></script>
<script src="./index.js"></script>
</head>
<body contenteditable="true">

63
examples/html-editor/index.js
View File

@@ -1,67 +1,10 @@
/* global Y, HTMLElement, customElements, CanvasJS */
/* global Y */
window.onload = function () {
window.yXmlType.bindToDom(document.body)
let mt = document.createElement('magic-table')
mt.innerHTML = '<table><tr><th>Amount</th></tr><tr><td>1</td></tr><tr><td>1</td></tr></table>'
document.body.append(mt)
}
class MagicTable extends HTMLElement {
constructor () {
super()
this.createShadowRoot()
}
get _yjsHook () {
return 'magic-table'
}
showTable () {
this.shadowRoot.innerHTML = ''
this.shadowRoot.append(document.createElement('content'))
}
showDiagram () {
let dataPoints = []
this.querySelectorAll('td').forEach(td => {
let number = Number(td.textContent)
dataPoints.push({
x: (dataPoints.length + 1) * 10,
y: number,
label: '<magic-table> content'
})
})
this.shadowRoot.innerHTML = ''
var chart = new CanvasJS.Chart(this.shadowRoot,
{
title: {
text: 'Bar chart'
},
data: [
{
type: 'bar',
dataPoints: dataPoints
}
]
})
chart.render()
// this.shadowRoot.innerHTML = '<p>dtrn</p>'
}
}
customElements.define('magic-table', MagicTable)
Y.XmlHook.addHook('magic-table', {
fillType: function (dom, type) {
type.set('table', new Y.XmlElement(dom.querySelector('table')))
},
createDom: function (type) {
const table = type.get('table').getDom()
const dom = document.createElement('magic-table')
dom.insertBefore(table, null)
return dom
}
})
let persistence = new Y.IndexedDBPersistence()
// initialize a shared object. This function call returns a promise!
let y = new Y({
@@ -71,7 +14,7 @@ let y = new Y({
room: 'html-editor-example6'
// maxBufferLength: 100
}
})
}, persistence)
window.yXml = y
window.yXmlType = y.define('xml', Y.XmlFragment)
window.undoManager = new Y.utils.UndoManager(window.yXmlType, {