diff --git a/Examples/OfflineEditing/index.js b/Examples/OfflineEditing/index.js deleted file mode 100644 index d23d895b..00000000 --- a/Examples/OfflineEditing/index.js +++ /dev/null @@ -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) - } -}) diff --git a/Examples/Puzzle/index.html b/Examples/Puzzle/index.html new file mode 100644 index 00000000..80d1fb49 --- /dev/null +++ b/Examples/Puzzle/index.html @@ -0,0 +1,18 @@ + + +
+ + + + + + + + + + diff --git a/Examples/Puzzle/index.js b/Examples/Puzzle/index.js new file mode 100644 index 00000000..f5bce78b --- /dev/null +++ b/Examples/Puzzle/index.js @@ -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) + }) +}) \ No newline at end of file diff --git a/Examples/TextBind/index.html b/Examples/TextBind/index.html deleted file mode 100644 index 891dc69a..00000000 --- a/Examples/TextBind/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/Examples/TextBind/index.js b/Examples/TextBind/index.js deleted file mode 100644 index 1ccbdf30..00000000 --- a/Examples/TextBind/index.js +++ /dev/null @@ -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' - } - } -}) diff --git a/Examples/OfflineEditing/index.html b/Examples/Textarea/index.html similarity index 72% rename from Examples/OfflineEditing/index.html rename to Examples/Textarea/index.html index 2b2123a8..cf2d2961 100644 --- a/Examples/OfflineEditing/index.html +++ b/Examples/Textarea/index.html @@ -3,7 +3,7 @@ - +