a really basic collaborative input

type="text" is typically slower than the same code when used to sync a textarea. WATCH OUT!
9 years ago · 50121c8ab6
parent b18dfef656
commit 50121c8ab6
2 changed files with 71 additions and 0 deletions
--- a/www/input/index.html
+++ b/www/input/index.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script data-main="main" src="/bower_components/requirejs/require.js"></script>
+    <style>
+        *{
+            padding: 0px;
+            margin: 0px;
+        }
+        textarea{
+            box-sizing: border-box;
+            border: 1px solid blue;
+            width: 100vw;
+            height: 100vh;
+
+            font-size: 25px;
+            background-color: #222;
+            color: #CCC;
+        }
+        input {
+            font-size: 25px;
+            background-color: #222;
+            color: #CCC;
+            height: 500px;
+            width: 800px;
+        }
+    </style>
+</head>
+<body>
+    <input type="text"></input>
+</body>
+</html>
+
--- a/www/input/main.js
+++ b/www/input/main.js
@ -0,0 +1,37 @@
+define([
+    '/api/config?cb=' + Math.random().toString(16).substring(2),
+    '/common/realtime-input.js',
+    '/common/messages.js',
+    '/common/crypto.js',
+    '/bower_components/jquery/dist/jquery.min.js',
+    '/customize/pad.js'
+], function (Config,
+    RTText, // RTText
+    Messages,
+    Crypto) {
+
+    var $ = window.jQuery;
+    
+    var $textarea = $('input');
+
+    $(window).on('hashchange', function() {
+        window.location.reload();
+    });
+    if (window.location.href.indexOf('#') === -1) {
+        window.location.href = window.location.href + '#' + Crypto.genKey();
+        return;
+    }
+
+    var initialState = Messages.initialState;
+
+    $textarea.val(initialState);
+
+    var key = Crypto.parseKey(window.location.hash.substring(1));
+
+    var rttext =
+        RTText.start(   $textarea[0], // window
+                        Config.websocketURL, // websocketUrl
+                        Crypto.rand64(8), // userName
+                        key.channel, // channel
+                        key.cryptKey); // cryptKey
+});