start on realtime form prototype

9 years ago · a527024a8c
parent 02ff1a63a4
commit a527024a8c
2 changed files with 126 additions and 0 deletions
--- a/www/form/index.html
+++ b/www/form/index.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script data-main="main" src="/bower_components/requirejs/require.js"></script>
+    <style>
+        html, body{
+            padding: 0px;
+            margin: 0px;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+
+    <form>
+        <input type="text" name="text"><br>
+        <input type="password" name="password"><br>
+
+        <input type="radio" name="radio" value="one" checked>One<br>
+        <input type="radio" name="radio" value="two">Two<br>
+        <input type="radio" name="radio" value="three">Three<br>
+
+        <input type="checkbox" name="checkbox1" value="1">Checkbox One<br>
+        <input type="checkbox" name="checkbox2" value="2">Checkbox Two<br>
+
+        <input type="number" name="number" min="1" max="5">Number<br>
+
+        <input type="range" name="range" min="0" max="10">Ranges<br>
+
+        <select>
+            <option value="one">One</option>
+            <option value="two">Two</option>
+            <option value="three">Three</option>
+            <option value="four">Four</option>
+        </select> Dropdowns<br>
+
+        <textarea rows="4" cols="50"> </textarea><br>
+
+    </form>
+
+</body>
+</html>
+
--- a/www/form/main.js
+++ b/www/form/main.js
@ -0,0 +1,80 @@
+define([
+    '/api/config?cb=' + Math.random().toString(16).substring(2),
+    '/common/RealtimeTextarea.js',
+    '/common/messages.js',
+    '/common/crypto.js',
+    '/common/TextPatcher.js',
+    '/bower_components/jquery/dist/jquery.min.js',
+    '/customize/pad.js'
+], function (Config, Realtime, Messages, Crypto, TextPatcher) { 
+    var $ = window.jQuery;
+    $(window).on('hashchange', function() {
+        window.location.reload();
+    });
+    if (window.location.href.indexOf('#') === -1) {
+        window.location.href = window.location.href + '#' + Crypto.genKey();
+        return;
+    }
+
+    var module = window.APP = {};
+    var key = Crypto.parseKey(window.location.hash.substring(1));
+    var initializing = true;
+
+    /* elements that we need to listen to */
+    /*
+        * text
+        * password
+        * radio
+        * checkbox
+        * number
+        * range
+        * select
+        * textarea
+    */
+
+    var $textarea = $('textarea');
+
+    var config = module.config = {
+        websocketURL: Config.websocketURL + '_old',
+        userName: Crypto.rand64(8),
+        channel: key.channel,
+        cryptKey: key.cryptKey
+    };
+
+    var setEditable = function (bool) {/* allow editing */};
+    var canonicalize = function (text) {/* canonicalize all the things */};
+
+    setEditable(false);
+
+    var onInit = config.onInit = function (info) { };
+
+    var onRemote = config.onRemote = function (info) {
+        if (initializing) { return; }
+        /* integrate remote changes */
+    };
+
+    var onLocal = config.onLocal = function () {
+        if (initializing) { return; }
+        /* serialize local changes */
+    };
+
+    var onReady = config.onReady = function (info) {
+        var realtime = module.realtime = info.realtime;
+
+        // create your patcher
+        module.patchText = TextPatcher.create({
+            realtime: realtime
+        });
+
+        // get ready
+
+        setEditable(true);
+        initializing = false;
+    };
+
+    var onAbort = config.onAbort = function (info) {};
+
+    var rt = Realtime.start(config);
+
+    // bind to events...
+});