transcript view: list button for touch devices
The 'r' keyboard shortcut is useless on mobile browsers, so the
transcript view can now also be toggled with a button next to the
speaker notes button (shown on coarse-pointer devices, like the
fullscreen and notes buttons, and highlighted while the transcript is
open).
Change-Id: I10909124850a5fba469a670115e87ef4f6c4376b
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css b/inst/reveal.js-5.2.1/dist/theme/ids.css
index d1b8467..52f3cb7 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -951,12 +951,33 @@
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
+#ids-transcript-btn {
+ display: none;
+ position: fixed;
+ left: 110px;
+ bottom: 6%;
+ z-index: 30;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ opacity: 0.55;
+ background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+#ids-transcript-btn:active, #ids-transcript-btn:focus-visible, #ids-transcript-btn.is-open {
+ opacity: 0.9;
+}
+#ids-transcript-btn.is-open {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
+}
+
@media (hover: none) and (pointer: coarse) {
- #ids-notes {
+ #ids-notes, #ids-transcript-btn {
display: block;
}
}
-html.reveal-print #ids-notes {
+html.reveal-print #ids-notes, html.reveal-print #ids-transcript-btn {
display: none !important;
}
diff --git a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
index 003336b..9d49602 100644
--- a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
+++ b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
@@ -878,6 +878,7 @@
<footer id="ids-footer"><span>
$for(author)$$if(author.name)$$author.name$$else$$author$$endif$${ sep }, $endfor$ · $title$ · $date$</span></footer><button id="ids-fullscreen" aria-label="Toggle fullscreen" title="Fullscreen"></button>
<button id="ids-notes" aria-label="Show speaker notes" title="Speaker notes"></button>
+<button id="ids-transcript-btn" aria-label="Show transcript of all slides and notes" title="Transcript"></button>
<div id="ids-notes-overlay" hidden>
<header id="ids-notes-header">
<span id="ids-notes-timing" role="status"></span>
@@ -1099,6 +1100,16 @@
build();
overlay.hidden = false;
}
+ var btn = document.getElementById('ids-transcript-btn');
+ if (btn) btn.classList.toggle('is-open', !overlay.hidden);
+ }
+
+ var transcriptBtn = document.getElementById('ids-transcript-btn');
+ if (transcriptBtn) {
+ transcriptBtn.addEventListener('click', function (e) {
+ e.stopPropagation();
+ toggle();
+ });
}
document.addEventListener('keydown', function (e) {