From 35bfa1dce46d787517e49694979c3db7f43c6916 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Thu, 22 Jun 2017 16:01:33 +0200
Subject: [PATCH] test client-side templates in whiteboard app

---
 customize.dist/pages.js    | 57 ++++++++++++++++++++++++++++++++++++++
 customize.dist/template.js | 23 ++++++++++++---
 www/whiteboard/index.html  | 35 ++---------------------
 www/whiteboard/main.js     |  6 +++-
 4 files changed, 84 insertions(+), 37 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 4f77432be..a0473e60a 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -365,5 +365,62 @@ define([
         ])];
     };
 
+    var appToolbar = function () {
+        return h('div#toolbar.toolbar-container');
+    };
+
+    Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
+        return [
+            appToolbar(),
+            h('div#canvas-area', h('canvas#canvas', {
+                width: 600,
+                height: 600
+            })),
+            h('div#controls', {
+                style: {
+                    display: 'block',
+                }
+            }, [
+                h('button#clear', Msg.canvas_clear), ' ',
+                h('button#toggleDraw', Msg.canvas_disable),
+                h('button#delete', {
+                    style: {
+                        display: 'none',
+                    }
+                }),
+                h('input#width', {
+                    type: 'range',
+                    value: "5",
+                    min: "1",
+                    max: "100"
+                }),
+                h('label', {
+                    'for': 'width'
+                }, Msg.canvas_width),
+                h('input#opacity', {
+                    type: 'range',
+                    value: "1",
+                    min: "0.1",
+                    max: "1",
+                    step: "0.1"
+                }),
+                h('label', {
+                    'for': 'width',
+                }),
+                h('span.selected')
+            ]),
+            setHTML(h('div#colors'), '&nbsp;'),
+            loadingScreen(),
+            h('div#cursors', {
+                style: {
+                    display: 'none',
+                    background: 'white',
+                    'text-align': 'center',
+                }
+            }),
+            h('div#pickers'),
+        ];
+    };
+
     return Pages;
 });
diff --git a/customize.dist/template.js b/customize.dist/template.js
index 0fd412a03..5f177d0e2 100644
--- a/customize.dist/template.js
+++ b/customize.dist/template.js
@@ -6,11 +6,13 @@ define([
 
     'css!/customize/main.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
 ], function ($, h, Cryptpad, Pages) {
 $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
+    var isMainApp = function () {
+        return /^\/(pad|code|slide|poll|whiteboard)\//.test(location.pathname);
+    };
 
     var rightLink = function (ref, loc, txt) {
         return h('span.link.right', [
@@ -113,11 +115,24 @@ $(function () {
     ]));
 
     var pathname = location.pathname;
-    if (/^\/(pad|code|slide|poll|whiteboard)\//.test(pathname)) {
-        // TODO load apps
-        return;
+
+
+    if (isMainApp()) {
+        if (typeof(Pages[pathname]) === 'function') {
+            var $body = $('body').html(h('body', Pages[pathname]()).innerHTML);
+            setTimeout(function () {
+                require(['/whiteboard/main.js'], function () {
+                    $body.removeClass('noscroll');
+                });
+            });
+            return;
+        }
     }
 
+    require([
+        'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    ], function () {});
+
     $body.append($topbar).append($main).append($footer);
 
     if (/^\/settings\//.test(pathname)) {
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index 7311e5973..418a2aae5 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -3,43 +3,14 @@
 <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-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <link rel="icon" type="image/png"
         href="/customize/main-favicon.png"
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="/customize/main.css" />
-    <link rel="stylesheet" href="whiteboard.css" />
+    <style> .noscroll { overflow-y: hidden; } </style>
 </head>
-<body>
-    <div id="toolbar" class="toolbar-container"></div>
+<body class='noscroll'>
 
-    <div id="canvas-area">
-    <canvas id="canvas" width="600" height="600" ></canvas>
-    </div>
-
-    <div id="controls">
-        <button id="clear" data-localization="canvas_clear">Clear</button>
-        <button id="toggleDraw" data-localization="canvas_disable"></button>
-        <button id="delete" style="display: none;" data-localization="canvas_delete"></button>
-        <input id="width" data-localization-title="canvas_width" type="range" value="5" min="1" max="100"></input><label for="width">5</label>
-        <input id="opacity" data-localization-title="canvas_opacity" type="range" value="1" min="0.1" max="1" step="0.1"></input><label for="opacity">1</label>
-        <span class="selected"></span>
-    </div>
-    <div id="colors">&nbsp;</div>
-
-    <div id="loading">
-        <div class="loadingContainer">
-            <img class="cryptofist" src="/customize/cryptofist_small.png" />
-            <div class="spinnerContainer">
-                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
-            </div>
-            <p data-localization="loading"></p>
-        </div>
-    </div>
-    <div id="cursors" style="display: none; background: white; text-align: center;"></div>
-    <div id="pickers"></div>
-</body>
-</html>
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index c399d5c3f..95a727f41 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -13,6 +13,10 @@ define([
     '/customize/application_config.js',
     '/bower_components/secure-fabric.js/dist/fabric.min.js',
     '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/customize/main.css',
+    'less!/whiteboard/whiteboard.less',
 ], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig) {
     var saveAs = window.saveAs;
     var Messages = Cryptpad.Messages;
@@ -417,7 +421,7 @@ window.canvas = canvas;
             else {
                 var hjson = JSON.parse(userDoc);
                 if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
-                    (typeof(hjson.type) !== 'undefined' && hjson.type !== whiteboard)) {
+                    (typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
                     Cryptpad.errorLoadingScreen(Messages.typeError);
                     throw new Error(Messages.typeError);
                 }