added another example, updated readme

2015-12-09 18:39:09 +01:00
parent b32c2e4ed6
commit 625a64635a
11 changed files with 5130 additions and 11 deletions
--- a/Examples/Chat/index.html
+++ b/Examples/Chat/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <style>
+      #chat p span {
+        color: blue;
+      }
+    </style>
+    <div id="chat"></div>
+    <form id="chatform">
+      <input name="username" type="text" style="width:15%;">
+      <input name="message" type="text" style="width:60%;">
+      <input type="submit" value="Send">
+    </form>
+    <script src="../bower_components/yjs/y.js"></script>
+    <script src="./index.js"></script>
+  </body>
+</html>
--- a/Examples/Chat/index.js
+++ b/Examples/Chat/index.js
@@ -0,0 +1,75 @@
+/* @flow */
+/* global Y */
+
+// initialize a shared object. This function call returns a promise!
+Y({
+  db: {
+    name: 'memory'
+  },
+  connector: {
+    name: 'websockets-client',
+    room: 'chat-example'
+    // debug: true,
+    // url: 'http://127.0.0.1:2345'
+  },
+  sourceDir: '/bower_components',
+  share: {
+    chat: 'Array'
+  }
+}).then(function (y) {
+  window.y = y
+  // This functions inserts a message at the specified position in the DOM
+  function appendMessage(message, position) { 
+    var p = document.createElement('p')
+    var uname = document.createElement('span')
+    uname.appendChild(document.createTextNode(message.username + ": "))
+    p.appendChild(uname)
+    p.appendChild(document.createTextNode(message.message))
+    document.querySelector('#chat').insertBefore(p, chat.children[position] || null)
+  }
+  // This function makes sure that only 7 messages exist in the chat history.
+  // The rest is deleted
+  function cleanupChat () {
+    var len
+    while ((len = y.share.chat.length) > 7) {
+      y.share.chat.delete(0)        
+    }
+  }
+  // Insert the initial content
+  y.share.chat.toArray().forEach(appendMessage)
+  cleanupChat()
+  
+  // whenever content changes, make sure to reflect the changes in the DOM
+  y.share.chat.observe(function (events) {
+    for (var i = 0; i < events.length; i++) {
+      if (events[i].type === 'insert') {
+        appendMessage(events[i].value, events[i].index)
+      } else if (events[i].type === 'delete') {
+        chat.children[events[i].index].remove()
+      }
+    }
+    // concurrent insertions may result in a history > 7, so cleanup here
+    cleanupChat()
+  })
+  document.querySelector('#chatform').onsubmit = function (event) {
+    // the form is submitted
+    var message = {
+      username: this.querySelector("[name=username]").value,
+      message: this.querySelector("[name=message]").value
+    }
+    if (message.username.length > 0 && message.message.length > 0) {
+      if (y.share.chat.length > 6) {
+        // If we are goint to insert the 8th element, make sure to delete first.
+        y.share.chat.delete(0)
+      }
+      // Here we insert a message in the shared chat type.
+      // This will call the observe function (see line 40)
+      // and reflect the change in the DOM
+      y.share.chat.push([message])
+      this.reset()
+    }
+    // Do not send this form!
+    event.preventDefault()
+    return false
+  }
+})
--- a/Examples/Jigsaw/index.html
+++ b/Examples/Jigsaw/index.html
@@ -16,7 +16,6 @@
      <path d="M 325.63989,452.69678 C 317.92163,423.11035 287.36353,445.9126 268.64673,447.82227 C 250.27417,449.69727 239.77563,436.57373 239.77563,419.32568 C 239.77563,402.07812 254.02368,395.70361 265.27222,394.5791 C 276.52075,393.4541 282.14526,396.45361 297.89331,407.32715 C 313.64136,418.20117 326.3894,399.45313 327.8894,392.7041 C 329.3894,385.95508 320.76538,342.83545 320.01538,330.46191 C 319.75855,326.2207 320.56372,321.21484 321.58911,315.6377 C 315.92114,317.13525 309.58862,318.82715 302.39282,320.71338 C 263.77222,330.83691 232.27661,318.46338 221.40259,308.71484 C 210.52905,298.96582 229.27661,284.71777 234.90112,279.09326 C 240.52563,273.46924 243.90015,262.59521 239.77563,247.22217 C 235.65112,231.84912 201.90503,222.10059 179.03296,239.34814 C 156.16089,256.59619 180.90796,285.09277 188.40698,293.3418 C 195.90601,301.59033 186.15698,312.08936 170.03442,313.58887 C 160.60962,314.46582 119.15894,313.67676 86.340576,312.87012 C 85.573975,347.74561 84.581299,386.15088 83.794922,402.07812 C 82.295166,432.44922 109.29175,422.32568 115.66577,420.82568 C 122.04028,419.32568 126.16479,409.57715 143.03735,408.45215 C 185.9231,405.59326 186.09985,466.69629 144.16235,467.69482 C 128.41431,468.06982 113.79126,451.19678 108.16675,447.44727 C 102.54272,443.69775 87.919433,442.94775 83.794922,457.9458 C 82.01709,464.41113 78.118652,481.65137 78.098144,496.18994 C 78.071045,515.38037 82.295166,531.81201 82.295166,531.81201 C 82.295166,531.81201 105.54224,526.5625 149.41187,526.5625 C 193.28149,526.5625 199.65552,547.93506 194.78101,558.80859 C 189.90649,569.68213 181.28296,568.93213 179.40796,583.18066 C 172.7063,634.11133 253.34106,631.08203 249.14917,584.68018 C 247.96948,571.62354 237.16528,571.66699 232.27661,557.68359 C 222.17944,528.80273 244.64966,523.56299 257.39819,524.68799 C 263.59351,525.23437 290.95679,529.73389 320.75757,531.21582 C 321.22437,531.23877 321.69312,531.25928 322.16089,531.28125 C 326.09985,518.06592 329.95825,503.87646 330.1394,498.44092 C 330.51392,487.19238 330.1394,469.94434 325.63989,452.69678 z " style="fill:#d3ea9d;stroke:#000000" id="path2508"/>
 		</g>
  </svg>
-
  <script src="../bower_components/yjs/y.js"></script>
  <script src="../bower_components/d3/d3.js"></script>
  <script src="./index.js"></script>
--- a/Examples/Textarea/index.html
+++ b/Examples/Textarea/index.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
 <body>
-  <textarea style="width:80%;" rows=40 id="textfield"></textarea>
-
+  <textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
  <script src="../bower_components/yjs/y.js"></script>
  <script src="./index.js"></script>
 </body>