From 5d0535966c560d89d1b39710b2cee4dda47562f8 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 11 May 2017 10:58:33 +0200
Subject: [PATCH] Center vertically slides in present mode and checkbox to
 disable transitions

---
 customize.dist/translations/messages.fr.js | 1 +
 customize.dist/translations/messages.js    | 1 +
 www/slide/main.js                          | 8 ++++++++
 www/slide/slide.css                        | 8 ++++++--
 www/slide/slide.js                         | 4 ++++
 www/slide/slide.less                       | 7 +++++--
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 3d8ad6060..d8e6f73d2 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -107,6 +107,7 @@ define(function () {
     out.printDate = "Afficher la date";
     out.printTitle = "Afficher le titre du pad";
     out.printCSS = "Personnaliser l'apparence (CSS):";
+    out.printTransition = "Activer les animations de transition";
 
     out.slideOptionsTitle = "Personnaliser la présentation";
     out.slideOptionsButton = "Enregistrer (Entrée)";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index 9219ab457..afdbdc6b2 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -109,6 +109,7 @@ define(function () {
     out.printDate = "Display the date";
     out.printTitle = "Display the pad title";
     out.printCSS = "Custom style rules (CSS):";
+    out.printTransition = "Enable transition animations";
 
     out.slideOptionsTitle = "Customize your slides";
     out.slideOptionsButton = "Save (enter)";
diff --git a/www/slide/main.js b/www/slide/main.js
index b5dd26704..c8463e5a6 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -188,6 +188,7 @@ define([
                     title: false,
                     slide: false,
                     date: false,
+                    transition: true,
                     style: ''
                 };
 
@@ -220,6 +221,13 @@ define([
                 }).appendTo($p).css('width', 'auto');
                 $('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
                 $p.append($('<br>'));
+                // Transition
+                $('<input>', {type: 'checkbox', id: 'checkTransition', checked: slideOptionsTmp.transition}).on('change', function () {
+                    var c = this.checked;
+                    slideOptionsTmp.transition = c;
+                }).appendTo($p).css('width', 'auto');
+                $('<label>', {'for': 'checkTransition'}).text(Messages.printTransition).appendTo($p);
+                $p.append($('<br>'));
                 // CSS
                 $('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
                 $p.append($('<br>'));
diff --git a/www/slide/slide.css b/www/slide/slide.css
index 630ac25ea..945a05846 100644
--- a/www/slide/slide.css
+++ b/www/slide/slide.css
@@ -168,13 +168,16 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal #content,
 .cp div#modal #content {
-  transition: margin-left 1s;
   font-size: 20vh;
   position: relative;
   height: 100%;
   overflow: visible;
   white-space: nowrap;
 }
+.cp div.modal #content.transition,
+.cp div#modal #content.transition {
+  transition: margin-left 1s;
+}
 .cp div.modal #content .slide-frame,
 .cp div#modal #content .slide-frame {
   display: inline-block;
@@ -198,10 +201,11 @@ body .CodeMirror-focused .cm-matchhighlight {
 }
 .cp div.modal #content .slide-container,
 .cp div#modal #content .slide-container {
-  display: inline-block;
+  display: inline-flex;
   height: 100%;
   width: 100vw;
   text-align: center;
+  vertical-align: top;
 }
 .cp div.modal .center,
 .cp div#modal .center {
diff --git a/www/slide/slide.js b/www/slide/slide.js
index 912820390..c7a8adf5e 100644
--- a/www/slide/slide.js
+++ b/www/slide/slide.js
@@ -184,6 +184,10 @@ define([
                 $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
             }
         });
+        $content.removeClass('transition');
+        if (options.transition) {
+            $content.addClass('transition');
+        }
         //$content.find('.' + slideClass).hide();
         //$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
         $content.css('margin-left', -(i*100)+'vw');
diff --git a/www/slide/slide.less b/www/slide/slide.less
index 67885c049..82bcf9c82 100644
--- a/www/slide/slide.less
+++ b/www/slide/slide.less
@@ -161,7 +161,9 @@ div.modal, div#modal {
         width: 100%;
     }
     #content {
-        transition: margin-left 1s;
+        &.transition {
+            transition: margin-left 1s;
+        }
         font-size: 20vh;
         position: relative;
         height: 100%;
@@ -191,9 +193,10 @@ div.modal, div#modal {
             margin: auto;
         }
         .slide-container {
-            display: inline-block;
+            display: inline-flex;
             height: 100%; width: 100vw;
             text-align: center;
+            vertical-align: top;
         }
     }