From b9bb353a11bb7bcd1f79a40a80e0d5dfcca05591 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Mon, 2 Jul 2018 11:08:45 +0200
Subject: [PATCH] add 'resume presentation' button to pause overlay
---
css/reveal.css | 15 +++++++++++++++
css/reveal.scss | 19 +++++++++++++++++++
js/reveal.js | 7 ++++++-
3 files changed, 40 insertions(+), 1 deletion(-)
diff --git a/css/reveal.css b/css/reveal.css
index 9f2089e2..eda311e8 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -964,6 +964,21 @@ body {
z-index: 100;
transition: all 1s ease; }
+.reveal .pause-overlay .resume-button {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ color: #ccc;
+ border-radius: 2px;
+ padding: 6px 14px;
+ border: 2px solid #ccc;
+ font-size: 16px;
+ background: transparent;
+ cursor: pointer; }
+ .reveal .pause-overlay .resume-button:hover {
+ color: #fff;
+ border-color: #fff; }
+
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1; }
diff --git a/css/reveal.scss b/css/reveal.scss
index 1fff346b..e6608d4e 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1034,6 +1034,25 @@ $controlsArrowAngleActive: 36deg;
z-index: 100;
transition: all 1s ease;
}
+
+.reveal .pause-overlay .resume-button {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+ color: #ccc;
+ border-radius: 2px;
+ padding: 6px 14px;
+ border: 2px solid #ccc;
+ font-size: 16px;
+ background: transparent;
+ cursor: pointer;
+
+ &:hover {
+ color: #fff;
+ border-color: #fff;
+ }
+}
+
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
diff --git a/js/reveal.js b/js/reveal.js
index 93ed446b..103fa820 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -593,7 +593,8 @@
dom.speakerNotes.setAttribute( 'tabindex', '0' );
// Overlay graphic which is displayed during the paused mode
- createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
+ dom.pauseOverlay = createSingletonNode( dom.wrapper, 'div', 'pause-overlay', '<button class="resume-button">Resume presentation</button>' );
+ dom.resumeButton = dom.pauseOverlay.querySelector( '.resume-button' );
dom.wrapper.setAttribute( 'role', 'application' );
@@ -1298,6 +1299,8 @@
dom.progress.addEventListener( 'click', onProgressClicked, false );
}
+ dom.resumeButton.addEventListener( 'click', resume, false );
+
if( config.focusBodyOnPageVisibilityChange ) {
var visibilityChange;
@@ -1361,6 +1364,8 @@
dom.wrapper.removeEventListener( 'touchmove', onTouchMove, false );
dom.wrapper.removeEventListener( 'touchend', onTouchEnd, false );
+ dom.resumeButton.removeEventListener( 'click', resume, false );
+
if ( config.progress && dom.progress ) {
dom.progress.removeEventListener( 'click', onProgressClicked, false );
}
--
GitLab