From f1619f4a0f7ee9cd64f3693354e6e51f1cba0ca1 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Fri, 19 Aug 2016 10:44:49 +0200
Subject: [PATCH] get /slide/ up to par with other prototypes

* use messages.js for some translatable elements
* style alerts
* infer document name from content
* present, forget, rename, import, and export buttons
---
 www/slide/index.html |  45 ++++++++-----
 www/slide/main.js    | 148 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 161 insertions(+), 32 deletions(-)
diff --git a/www/slide/index.html b/www/slide/index.html
index 1e66e73fc..af2d9d473 100644
--- a/www/slide/index.html
+++ b/www/slide/index.html
@@ -4,30 +4,41 @@
     <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>
+    <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="/customize/main.css" />
     <style>
         html, body{
+            height: 100%;
+            width: 100%;
             padding: 0px;
             margin: 0px;
             overflow: hidden;
             box-sizing: border-box;
+            position: relative;
         }
-        #bar {
-            height: 40px;
+        #bar > button {
+            margin: 5px;
         }
         textarea{
             width: 100%;
-            height: calc(100vh - 40px);
-            max-width: 100%;
-            max-height: 100vh;
+            min-height: 90%;
 
-            font-size: 18px;
+            display: block;
+            position: relative;
+
+            font-size: 25px;
             background-color: #073642;
-            color: #839496;
+            color: #DDD;
 
             overflow-x: hidden;
 
             /* disallow textarea resizes */
             resize: none;
+            border: 0px;
         }
         textarea[disabled] {
             background-color: #275662;
@@ -58,19 +69,23 @@
             text-align: center;
         }
 
-        #content p, #content ul, #content ol{
-            font-size: 23px;
+        h1 { font-size: 40px; }
+        h2 { font-size: 37px; }
+        h3 { font-size: 34px; }
+        h4 { font-size: 31px; }
+        h5 { font-size: 27px; }
+        h6 { font-size: 24px; }
+
+        #content p,
+        #content ul,
+        #content ol {
+            font-size: 26px;
         }
 
-
-
     </style>
 </head>
 <body>
-    <div id="bar">
-        <button id="present">presentation mode 
-        </button>
-    </div>
+    <div id="bar"></div>
     <textarea></textarea>
     <div id="modal">
         <div id="content"></div>
diff --git a/www/slide/main.js b/www/slide/main.js
index e84acf255..3d2cb52b3 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -1,14 +1,17 @@
 define([
     '/api/config?cb=' + Math.random().toString(16).substring(2),
+    '/customize/messages.js',
     '/bower_components/chainpad-netflux/chainpad-netflux.js',
     '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/textpatcher/TextPatcher.amd.js',
     '/common/cryptpad-common.js',
     '/slide/slide.js',
+    '/bower_components/file-saver/FileSaver.min.js',
     '/bower_components/jquery/dist/jquery.min.js',
     '/customize/pad.js'
-], function (Config, Realtime, Crypto, TextPatcher, Cryptpad, Slide) {
+], function (Config, Messages, Realtime, Crypto, TextPatcher, Cryptpad, Slide) {
     var $ = window.jQuery;
+    var saveAs = window.saveAs;
 
     /*
         TODO
@@ -21,6 +24,8 @@ define([
         * ui hint for escaping presentation mode
     */
 
+    Cryptpad.styleAlerts();
+
     var secret = Cryptpad.getSecrets();
 
     var module = window.APP = {
@@ -28,20 +33,26 @@ define([
         Slide: Slide,
     };
 
-    var userName = module.userName = Crypto.rand64(8);
-
     var initializing = true;
     var $textarea = $('textarea');
 
+    var suggestName = function () {
+        var title = '';
+        var patt = /^#\s+(.*)\s*$/;
+        $textarea.val().split("\n").some(function (line) {
+            if (!patt.test(line)) { return; }
+            line.replace(patt, function (a, b) {
+                title = b;
+            });
+            return true;
+        });
+        return title;
+    };
+
     var $modal = $('#modal');
     var $content = $('#content');
     Slide.setModal($modal, $content);
 
-    var $present = $('#present').click(function () {
-        Slide.show(true, $textarea.val());
-        Cryptpad.log("Hit ESC to exit presentation mode");
-    });
-
     var config = module.config = {
         initialState: '',
         websocketURL: Config.websocketURL,
@@ -54,6 +65,17 @@ define([
 
     setEditable(false);
 
+    var onLocal = config.onLocal = function () {
+        if (initializing) { return; }
+        var content = canonicalize($textarea.val());
+        module.patchText(content);
+        Slide.update(content);
+    };
+
+    var Button = function (opt) {
+        return $('<button>', opt);
+    };
+
     var onInit = config.onInit = function (info) {
         window.location.hash = info.channel + secret.key;
         $(window).on('hashchange', function() {
@@ -73,6 +95,105 @@ define([
                 }
             });
         });
+
+        var $bar = $('#bar');
+
+        var $present = Button({
+            id: 'present',
+            'class': 'present button action',
+            title: 'enter presentation mode',
+        })
+        .text("PRESENT")
+        .click(function () {
+            Slide.show(true, $textarea.val());
+            Cryptpad.log("Hit ESC to exit presentation mode");
+        });
+
+        var $forget = Button({
+            id: 'forget',
+            'class': 'forget button action',
+            title: Messages.forgetButtonTitle,
+        })
+        .text(Messages.forgetButton)
+        .click(function () {
+            var href = window.location.href;
+            Cryptpad.confirm(Messages.forgetPrompt, function (yes) {
+                if (!yes) { return; }
+                Cryptpad.forgetPad(href, function (err) {
+                    if (err) {
+                        console.log("unable to forget pad");
+                        console.log(err);
+                        return;
+                    }
+                    document.title = window.location.hash.slice(1,9);
+                });
+            });
+        });
+
+        var $rename = Button({
+            id: 'rename',
+            'class': 'rename button action',
+            title: Messages.renameButtonTitle,
+        })
+        .text(Messages.renameButton)
+        .click(function () {
+            var suggestion = suggestName();
+            Cryptpad.prompt(Messages.renamePrompt,
+                suggestion, function (title, ev) {
+                if (title === null) { return; }
+                Cryptpad.causesNamingConflict(title, function (err, conflicts) {
+                    if (conflicts) {
+                        Cryptpad.alert(Messages.renameConflict);
+                        return;
+                    }
+                    Cryptpad.setPadTitle(title, function (err) {
+                        if (err) {
+                            console.log("unable to set pad title");
+                            console.error(err);
+                            return;
+                        }
+                        document.title = title;
+                    });
+                });
+            });
+        });
+
+        var $import = Button({
+            id: 'import',
+            'class': 'import button action',
+            title: Messages.importButtonTitle,
+        })
+        .text(Messages.importButton)
+        .click(Cryptpad.importContent('text/plain', function (content, file) {
+            $textarea.val(content);
+            onLocal();
+        }));
+
+        var $export = Button({
+            id: 'export',
+            'class': 'export button action',
+            title: Messages.exportButtonTitle,
+        })
+        .text(Messages.exportButton)
+        .click(function () {
+            var text = $textarea.val();
+            var title = Cryptpad.fixFileName(suggestName()) + '.txt';
+
+            Cryptpad.prompt(Messages.exportPrompt, title, function (filename) {
+                if (filename === null) { return; }
+                var blob = new Blob([text], {
+                    type: 'text/plain;charset=utf-8',
+                });
+                saveAs(blob, filename);
+            });
+        });
+
+        $bar
+            .append($present)
+            .append($forget)
+            .append($rename)
+            .append($import)
+            .append($export);
     };
 
     var onRemote = config.onRemote = function (info) {
@@ -94,12 +215,6 @@ define([
         Slide.update(content);
     };
 
-    var onLocal = config.onLocal = function () {
-        if (initializing) { return; }
-        var content = canonicalize($textarea.val());
-        module.patchText(content);
-        Slide.update(content);
-    };
 
     var onReady = config.onReady = function (info) {
         var realtime = module.realtime = info.realtime;
@@ -108,6 +223,7 @@ define([
         });
 
         var content = canonicalize(realtime.getUserDoc());
+
         $textarea.val(content);
 
         Slide.update(content);
@@ -118,7 +234,7 @@ define([
 
     var onAbort = config.onAbort = function (info) {
         $textarea.attr('disabled', true);
-        window.alert("Server Connection Lost");
+        Cryptpad.alert("Server Connection Lost");
     };
 
     var rt = Realtime.start(config);
@@ -127,6 +243,4 @@ define([
         .forEach(function (evt) {
             $textarea.on(evt, onLocal);
         });
-
-
 });
