From 7de268316961066ba1907290674d4a1f1b1b518c Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Tue, 27 Jun 2017 18:17:52 +0200
Subject: [PATCH] make all apps use clientside templates

---
 customize.dist/pages.js              | 22 ++++++++-
 customize.dist/src/less/loading.less |  2 +
 customize.dist/template.js           | 67 +++++++++++++++++++++-------
 www/code/index.html                  | 18 +-------
 www/code/main.js                     |  1 +
 www/drive/index.html                 | 18 +-------
 www/file/index.html                  | 19 +-------
 www/pad/index.html                   | 19 +-------
 www/poll/index.html                  | 10 ++---
 www/poll/main.js                     |  1 -
 www/slide/index.html                 | 22 +--------
 www/whiteboard/index.html            |  5 ---
 12 files changed, 87 insertions(+), 117 deletions(-)

diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 3ca0028d1..7c8b45163 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -263,7 +263,7 @@ define([
     };
 
     var loadingScreen = function () {
-        return h('div#loading',
+        return h('div#loading', 
             h('div.loadingContainer', [
                 h('img.cryptofist', {
                     src: '/customize/cryptofist_small.png'
@@ -479,5 +479,25 @@ define([
         ];
     };
 
+    Pages['/drive/'] = Pages['/drive/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/file/'] = Pages['/file/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/pad/'] = Pages['/pad/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/code/'] = Pages['/code/index.html'] = function () {
+        return loadingScreen();
+    };
+
+    Pages['/slide/'] = Pages['/slide/index.html'] = function () {
+        return loadingScreen();
+    };
+
     return Pages;
 });
diff --git a/customize.dist/src/less/loading.less b/customize.dist/src/less/loading.less
index cc23c49d9..3f2ac0381 100644
--- a/customize.dist/src/less/loading.less
+++ b/customize.dist/src/less/loading.less
@@ -1,3 +1,5 @@
+@import "./variables.less";
+
 .cp #loading {
     position: fixed;
     z-index: 9999;
diff --git a/customize.dist/template.js b/customize.dist/template.js
index 02dace9df..c0ca4f1d5 100644
--- a/customize.dist/template.js
+++ b/customize.dist/template.js
@@ -10,7 +10,8 @@ $(function () {
     var Messages = Cryptpad.Messages;
     var $body = $('body');
     var isMainApp = function () {
-        return /^\/(pad|code|slide|poll|whiteboard|file|media)\//.test(location.pathname);
+        console.error("Checking if is main app");
+        return /^\/(pad|code|slide|poll|whiteboard|file|media|drive)\/$/.test(location.pathname);
     };
 
     var rightLink = function (ref, loc, txt) {
@@ -115,25 +116,61 @@ $(function () {
 
     var pathname = location.pathname;
 
-
     if (isMainApp()) {
+        console.log("Is main app");
         if (typeof(Pages[pathname]) === 'function') {
-            $('body').html(h('body', Pages[pathname]()).innerHTML);
+            require([
+                'less!/customize/src/less/loading.less'
+            ], function () {
+                //$('body').html(h('body', Pages[pathname]()).innerHTML);
+
+                console.log("TEMPLATED");
 
-            if (/whiteboard/.test(pathname)) {
-                setTimeout(function () {
-                    require(['/whiteboard/main.js'], function () {
-                        $('body').removeClass('noscroll');
+                if (/whiteboard/.test(pathname)) {
+                    $('body').html(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/whiteboard/main.js'], function () {
+                            $('body').removeClass('noscroll');
+                        });
+                    });
+                } else if (/poll/.test(pathname)) {
+                    $('body').html(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/poll/main.js'], function () {
+                            $('body').removeClass('noscroll');
+                            console.log("TEMPLATE!");
+                        });
+                    });
+                } else if (/drive/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    setTimeout(function () {
+                        require(['/drive/main.js'], function () {
+                            console.log("Templating done");
+                        });
                     });
-                });
-            } else if (/poll/.test(pathname)) {
-                setTimeout(function () {
-                    require(['/poll/main.js'], function () {
-                        $('body').removeClass('noscroll');
-                        console.log("TEMPLATE!");
+                } else if (/file/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/file/main.js' ], function () {
+                        console.log("Templating done");
                     });
-                });
-            }
+                } else if (/pad/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/pad/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                } else if (/code/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/code/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                } else if (/slide/.test(pathname)) {
+                    $('body').append(h('body', Pages[pathname]()).innerHTML);
+                    require([ '/slide/main.js' ], function () {
+                        console.log("Templating done");
+                    });
+                }
+            });
+
             return;
         }
     }
diff --git a/www/code/index.html b/www/code/index.html
index 0959d023e..be053d582 100644
--- a/www/code/index.html
+++ b/www/code/index.html
@@ -5,12 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
-    <script data-bootload="main.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" />
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
         html, body {
             overflow-y: hidden;
@@ -44,14 +39,3 @@
     <div id="iframe-container">
         <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </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>
-</body>
-</html>
diff --git a/www/code/main.js b/www/code/main.js
index c7da20472..ad4148a88 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -12,6 +12,7 @@ define([
     '/bower_components/tweetnacl/nacl-fast.min.js', // needed for media-tag
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less/cryptpad.less'
 ], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad,
              Cryptget, DiffMd) {
     var Messages = Cryptpad.Messages;
diff --git a/www/drive/index.html b/www/drive/index.html
index 4db5d9848..babfa1264 100644
--- a/www/drive/index.html
+++ b/www/drive/index.html
@@ -4,12 +4,7 @@
     <title>CryptDrive</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <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" />
-    <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>
     <style>
         html, body {
             margin: 0px;
@@ -32,14 +27,3 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <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>
-</body>
-</html>
diff --git a/www/file/index.html b/www/file/index.html
index 668861646..52e872b81 100644
--- a/www/file/index.html
+++ b/www/file/index.html
@@ -4,12 +4,7 @@
     <title>CryptPad</title>
     <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>
-    <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" />
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
         html, body {
             margin: 0px;
@@ -32,14 +27,4 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <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>
-</body>
-</html>
+
diff --git a/www/pad/index.html b/www/pad/index.html
index 8b89ad4ce..876add672 100644
--- a/www/pad/index.html
+++ b/www/pad/index.html
@@ -5,12 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
-    <script data-bootload="main.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" />
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
         html, body {
             margin: 0px;
@@ -56,14 +51,4 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
-    <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>
-</body>
-</html>
+
diff --git a/www/poll/index.html b/www/poll/index.html
index a5572f7c7..ffbb6dae7 100644
--- a/www/poll/index.html
+++ b/www/poll/index.html
@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html class="cp poll">
 <head>
-    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <title data-localization="poll_title">Zero Knowledge Date Picker</title>
-    <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" />
-    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+    <script data-main="/common/boot.js" src="/bower_components/requirejs/require.js"
+        data-bootload="/customize/template.js"></script>
 </head>
 <body>
 
diff --git a/www/poll/main.js b/www/poll/main.js
index 5c4623153..4fee97e5b 100644
--- a/www/poll/main.js
+++ b/www/poll/main.js
@@ -11,7 +11,6 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/customize/src/less/cryptpad.less',
     'less!/customize/src/less/toolbar.less',
     'less!/poll/poll.less',
 ], function ($, TextPatcher, Listmap, Crypto, Cryptpad, Cryptget, Hyperjson, Renderer, Toolbar) {
diff --git a/www/slide/index.html b/www/slide/index.html
index 96eb6c577..14db505a7 100644
--- a/www/slide/index.html
+++ b/www/slide/index.html
@@ -5,15 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="referrer" content="no-referrer" />
-    <script data-bootload="main.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" />
+    <script data-bootload="/customize/template.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
         html, body {
             overflow-y: hidden;
@@ -49,14 +41,4 @@
     <div id="iframe-container">
         <iframe id="pad-iframe", name="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </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>
-</body>
-</html>
+
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index 64f11a8c7..7b0eebd26 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -4,11 +4,6 @@
     <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="/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" />
     <style> .noscroll { overflow-y: hidden; } </style>
 </head>
 <body class='noscroll'>