From 333800001892f790d8860800e518bba991034ca4 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 19 Jan 2017 12:49:40 +0100
Subject: [PATCH] Add Esc and Arrow icons in the slide's present mode

---
 customize.dist/main.css               | 23 +++++++++++++++++++++++
 customize.dist/src/less/cryptpad.less | 25 +++++++++++++++++++++++++
 www/slide/inner.html                  |  3 +++
 www/slide/slide.js                    | 25 +++++++++++++++++++++++++
 4 files changed, 76 insertions(+)

diff --git a/customize.dist/main.css b/customize.dist/main.css
index 0abf7e6bf..49af283c6 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -822,6 +822,29 @@ html.cp,
 .cp div.realtime #addoption {
   border-bottom-left-radius: 5px;
 }
+.cp.slide #modal .button {
+  position: absolute;
+  cursor: pointer;
+  font-size: 30px;
+  opacity: 0.6;
+  display: none;
+}
+.cp.slide #modal .button:hover {
+  opacity: 1;
+  display: block !important;
+}
+.cp.slide #modal #button_exit {
+  left: 20px;
+  top: 20px;
+}
+.cp.slide #modal #button_left {
+  left: 6vw;
+  bottom: 10vh;
+}
+.cp.slide #modal #button_right {
+  right: 6vw;
+  bottom: 10vh;
+}
 .cp.slide #modal #content p,
 .cp.slide #modal #content ul,
 .cp.slide #modal #content ol {
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 804dc6f98..7cf8f395a 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -478,6 +478,31 @@ form.realtime, div.realtime {
 }
 
 &.slide {
+    #modal {
+        .button {
+            position: absolute;
+            cursor: pointer;
+            font-size: 30px;
+            opacity: 0.6;
+            display: none;
+        }
+        .button:hover {
+            opacity: 1;
+            display: block !important;
+        }
+        #button_exit {
+            left: 20px;
+            top: 20px;
+        }
+        #button_left {
+            left: 6vw;
+            bottom: 10vh;
+        }
+        #button_right {
+            right: 6vw;
+            bottom: 10vh;
+        }
+    }
     #modal #content {
         p, ul, ol { font-size: 26px; }
 
diff --git a/www/slide/inner.html b/www/slide/inner.html
index e3cdae259..1b8dbbf55 100644
--- a/www/slide/inner.html
+++ b/www/slide/inner.html
@@ -92,6 +92,9 @@
 
     <span class="cp slide">
     <div id="modal">
+        <div id="button_exit" class="button"><span class="fa fa-times"></span></div>
+        <div id="button_left" class="button"><span class="fa fa-chevron-left"></span></div>
+        <div id="button_right" class="button"><span class="fa fa-chevron-right"></span></div>
         <div id="content"></div>
     </div>
     </span>
diff --git a/www/slide/slide.js b/www/slide/slide.js
index cae81204f..501415cad 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -202,6 +202,31 @@ define([
     };
 
     var addEvent = function () {
+        var icon_to;
+        $modal.mousemove(function (e) {
+            var $buttons = $modal.find('.button');
+            $buttons.show();
+            if (icon_to) { window.clearTimeout(icon_to); }
+            icon_to = window.setTimeout(function() {
+                $buttons.fadeOut();
+            }, 1000);
+        });
+        $modal.find('#button_exit').click(function (e) {
+            var e = jQuery.Event("keyup");
+            e.which = 27;
+            $modal.trigger(e);
+        });
+        $modal.find('#button_left').click(function (e) {
+            var e = jQuery.Event("keyup");
+            e.which = 37;
+            $modal.trigger(e);
+        });
+        $modal.find('#button_right').click(function (e) {
+            var e = jQuery.Event("keyup");
+            e.which = 39;
+            $modal.trigger(e);
+        });
+
         $(ifrw).on('keyup', function (e) {
             if (!Slide.shown) { return; }
             switch(e.which) {