create examples directory with old prototypes

2016-12-30 13:22:01 +01:00
parent 0abf45bdc5
commit ba4df1a22c
23 changed files with 26 additions and 10 deletions
--- a/www/examples/text/index.html
+++ b/www/examples/text/index.html
@@ -0,0 +1,39 @@
+<!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;
+        }
+        textarea{
+            width: 100%;
+            height: 100vh;
+            max-width: 100%;
+            max-height: 100vh;
+
+            font-size: 18px;
+            background-color: #073642;
+            color: #839496;
+
+            overflow-x: hidden;
+
+            /* disallow textarea resizes */
+            resize: none;
+        }
+        textarea[disabled] {
+            background-color: #275662;
+            color: #637476;
+        }
+    </style>
+</head>
+<body>
+    <textarea></textarea>
+</body>
+</html>
+
--- a/www/examples/text/main.js
+++ b/www/examples/text/main.js
@@ -0,0 +1,95 @@
+define([
+    '/api/config?cb=' + Math.random().toString(16).substring(2),
+    '/bower_components/chainpad-netflux/chainpad-netflux.js',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.amd.js',
+    '/common/cryptpad-common.js',
+    '/bower_components/jquery/dist/jquery.min.js',
+], function (Config, Realtime, Crypto, TextPatcher, Cryptpad) { 
+    var $ = window.jQuery;
+
+    var secret = Cryptpad.getSecrets();
+
+    var module = window.APP = {
+        TextPatcher: TextPatcher
+    };
+
+    var userName = module.userName = Crypto.rand64(8);
+
+    var initializing = true;
+    var $textarea = $('textarea');
+
+    var config = module.config = {
+        initialState: '',
+        websocketURL: Config.websocketURL,
+        channel: secret.channel,
+        crypto: Crypto.createEncryptor(secret.key),
+    };
+
+    var setEditable = function (bool) { $textarea.attr('disabled', !bool); };
+    var canonicalize = function (text) { return text.replace(/\r\n/g, '\n'); };
+
+    setEditable(false);
+
+    var onInit = config.onInit = function (info) {
+        window.location.hash = info.channel + secret.key;
+        $(window).on('hashchange', function() {
+            window.location.reload();
+        });
+    };
+
+    var onRemote = config.onRemote = function (info) {
+        if (initializing) { return; }
+        var userDoc = module.realtime.getUserDoc();
+        var content = canonicalize($textarea.val());
+
+        var op = TextPatcher.diff(content, userDoc);
+        var elem = $textarea[0];
+
+        var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
+            return TextPatcher.transformCursor(elem[attr], op);
+        });
+
+        $textarea.val(userDoc);
+        elem.selectionStart = selects[0];
+        elem.selectionEnd = selects[1];
+    };
+
+    var onLocal = config.onLocal = function () {
+        if (initializing) { return; }
+        module.patchText(canonicalize($textarea.val()));
+    };
+
+    var onReady = config.onReady = function (info) {
+        var realtime = module.realtime = info.realtime;
+        module.patchText = TextPatcher.create({
+            realtime: realtime
+        });
+
+        $textarea.val(realtime.getUserDoc());
+
+        setEditable(true);
+        initializing = false;
+    };
+
+    var onAbort = config.onAbort = function (info) {
+        setEditable(false);
+        window.alert("Server Connection Lost");
+    };
+
+    var onConnectionChange = config.onConnectionChange = function (info) {
+        if (info.state) {
+            initializing = true;
+        } else {
+            setEditable(false);
+            window.alert("Server Connection Lost. Trying to reconnect...");
+        }
+    };
+
+    var rt = Realtime.start(config);
+
+    ['cut', 'paste', 'change', 'keyup', 'keydown', 'select', 'textInput']
+        .forEach(function (evt) {
+            $textarea.on(evt, onLocal);
+        });
+});