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/render/index.html
+++ b/www/examples/render/index.html
@@ -0,0 +1,42 @@
+<!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"/>
+    <link rel="stylesheet" href="/common/render-sd.css" />
+    <script data-main="main" src="/bower_components/requirejs/require.js"></script>
+    <style>
+        html, body {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            min-height: 100%;
+        }
+
+        body { overflow-y: auto; }
+
+        #inner {
+            display: fixed;
+            width: 95%;
+            height: 100%;
+            top: 0px;
+            left: 0px;
+
+            margin: 0px auto;
+            padding: 0px;
+        }
+        img { max-width: 100%; }
+        code { font-family: monospace; }
+
+        blockquote, p, pre, code, li { font-size: 20px; }
+        table, thead, tbody, th, tr, td{
+            border: 1pt solid #586e75;
+            background-color: #002b36;
+            padding: 15px;
+        }
+    </style>
+</head>
+<body>
+    <div id="target">
+        <div id="inner"></div> 
+    </div>
--- a/www/examples/render/main.js
+++ b/www/examples/render/main.js
@@ -0,0 +1,105 @@
+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/marked/marked.min.js',
+    '/bower_components/hyperjson/hyperjson.js',
+    '/common/cryptpad-common.js',
+    '/bower_components/jquery/dist/jquery.min.js',
+    '/bower_components/diff-dom/diffDOM.js',
+], function (Config, Realtime, Crypto, Marked, Hyperjson, Cryptpad) {
+    var $ = window.jQuery;
+    var DiffDom = window.diffDOM;
+
+    var secret = Cryptpad.getSecrets();
+
+    // set markdown rendering options :: strip html to prevent XSS
+    Marked.setOptions({
+        sanitize: true
+    });
+
+    var module = window.APP = { };
+
+    var $target = module.$target = $('#target');
+
+    var config = {
+        websocketURL: Config.websocketURL,
+        channel: secret.channel,
+        crypto: Crypto.createEncryptor(secret.key)
+    };
+
+    var draw = window.draw = (function () {
+        var target = $target[0],
+            inner = $target.find('#inner')[0];
+
+        if (!target) { throw new Error(); }
+        var DD = new DiffDom({});
+
+        return function (md) {
+            var rendered = Marked(md||"");
+            // make a dom
+            var New = $('<div id="inner">'+rendered+'</div>')[0];
+
+            var patches = (DD).diff(inner, New);
+            DD.apply(inner, patches);
+            return patches;
+        };
+    }());
+
+    var redrawTimeout;
+    var lazyDraw = function (md) {
+        if (redrawTimeout) { clearTimeout(redrawTimeout); }
+        redrawTimeout = setTimeout(function () {
+            draw(md);
+        }, 450);
+    };
+
+    var initializing = true;
+
+    var onInit = config.onInit = function (info) {
+        window.location.hash = info.channel + secret.key;
+        module.realtime = info.realtime;
+    };
+
+    var getContent = function (userDoc) {
+        try {
+            var parsed = JSON.parse(userDoc);
+            if (typeof(parsed.content) !== 'string') {
+                throw new Error();
+            }
+            return parsed.content;
+        } catch (err) {
+            return userDoc;
+        }
+    };
+
+    // when your editor is ready
+    var onReady = config.onReady = function (info) {
+        console.log("Realtime is ready!");
+        var userDoc = module.realtime.getUserDoc();
+        lazyDraw(getContent(userDoc));
+        initializing = false;
+    };
+
+    // when remote editors do things...
+    var onRemote = config.onRemote = function () {
+        if (initializing) { return; }
+        var userDoc = module.realtime.getUserDoc();
+        lazyDraw(getContent(userDoc));
+    };
+
+    var onLocal = config.onLocal = function () {
+        // we're not really expecting any local events for this editor...
+        /*  but we might add a second pane in the future so that you don't need
+            a second window to edit your markdown */
+        if (initializing) { return; }
+        var userDoc = module.realtime.getUserDoc();
+        lazyDraw(userDoc);
+    };
+
+    var onAbort = config.onAbort = function () {
+        window.alert("Network Connection Lost");
+    };
+
+    var rts = Realtime.start(config);
+});