ids theme: fullscreen toggle button for touch devices
Change-Id: I0bd17d0b899faa0f81c692933b3d494678853e12
diff --git a/inst/reveal.js-5.2.1/css/theme/source/ids.scss b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
index de961f5..c1068ac 100644
--- a/inst/reveal.js-5.2.1/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
@@ -819,9 +819,54 @@
/*********************************************
- * ARROWS and SLIDE NUMBERS
+ * FULLSCREEN TOGGLE
*********************************************/
+// Small fixed toggle for touch devices (script injected by default.html):
+// phones have no F11 and the browser chrome eats slide pixels. Hidden on
+// pointer devices (F11 exists there) and whenever the Fullscreen API is
+// unavailable -- the script also removes it then. Same muted look and column
+// as the slide menu button, one slot above it.
+#ids-fullscreen {
+ display: none;
+ position: fixed;
+ left: 30px;
+ bottom: 6%;
+ z-index: 30;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ opacity: 0.55;
+ // Feather-style corner brackets; gray idle, IDS orange while fullscreen
+ // (the two data URIs differ only in the stroke colour).
+ 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%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;
+
+ &:active,
+ &:focus-visible {
+ opacity: 0.9;
+ }
+
+ &.is-fullscreen {
+ 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='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
+ }
+}
+
+// Only touch devices get the button; desktops keep their F11.
+@media (hover: none) and (pointer: coarse) {
+ #ids-fullscreen {
+ display: block;
+ }
+}
+
+// position:fixed elements repeat on every printed page -- never print it.
+html.reveal-print #ids-fullscreen {
+ display: none !important;
+}
+
+
+
.reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
width: 13px !important; /* size */
height: 4px; /* line width */
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 d3cc7ed..ee3b816 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -894,8 +894,38 @@
}
/*********************************************
- * ARROWS and SLIDE NUMBERS
+ * FULLSCREEN TOGGLE
*********************************************/
+#ids-fullscreen {
+ display: none;
+ position: fixed;
+ left: 30px;
+ 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%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+#ids-fullscreen:active, #ids-fullscreen:focus-visible {
+ opacity: 0.9;
+}
+#ids-fullscreen.is-fullscreen {
+ 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='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M16 3h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M8 21H5a2 2 0 0 1-2-2v-3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
+}
+
+@media (hover: none) and (pointer: coarse) {
+ #ids-fullscreen {
+ display: block;
+ }
+}
+html.reveal-print #ids-fullscreen {
+ display: none !important;
+}
+
.reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
width: 13px !important; /* size */
height: 4px; /* line width */
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css.map b/inst/reveal.js-5.2.1/dist/theme/ids.css.map
new file mode 100644
index 0000000..ae6c253
--- /dev/null
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../css/theme/source/ids.scss","../../css/theme/template/mixins.scss","../../css/theme/template/theme.scss","../../css/theme/template/exposer.scss","../../css/theme/template/settings.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AACA;AAIA;AACA;ACeN;EACC,ODgByB;;;AEvD5B;AAAA;AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADtBF;EE0CC,YJpBiB;EEpBjB;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;;;AAGD;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;;;AAGD;EAAY;;;AACZ;EAAY;;;AACZ;EAAY;;;AACZ;EAAY;;;AAEZ;EACC;;;AAID;AAAA;AAAA;AAIA;EACC;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;;AAGD;AACA;AAAA;AAAA;EAGC;EACA;;;AAED;AAAA;EAEC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;EAGC;EAEA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;AAAA;AAAA;EAIC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAEA;AAAA;EAEC;;;AAGF;EACC;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;EAEC;EACA;EACA;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAED;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAID;AAAA;AAAA;AAIA;EACC;EACA;EACA;;;AAEA;EACC;EACA;EACA;;;AAGF;EACC;EACA;;;AAKD;AAAA;AAAA;AAIA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAID;AAAA;AAAA;AAIA;EACC;;;AAID;AAAA;AAAA;AAIA;EACC;EACA;;;AAGD;AAAA;AAAA;AAGC;EACG;IACI;;;AFrNR;EACE;EACA;EACA;;;AAKF;EACE;;;AA6BF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAMF;EACE;EACA;EACA;;;AAIF;EACE;;;AAKF;EACE;EACA;EACA;;;AAUF;EACE;EACA;EACA;EACA;;;AAYF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;EAIA;;;AAIF;AAAA;EAEE;EACA;EACA;;;AAaF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;;;AAYF;AAAA;EAEE;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAWF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAOA;EACQ;EACA;EACA;EACA;;AAKA;EACQ;;;AAWlB;EACE;;;AAIF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA,OAzXU;;;AA2XZ;EACE;EACA;;;AAIF;AAAA;AAAA;AAGC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;EACE;;;AAaF;EACE;;;AASF;EACE;EACA;;;AAcF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AASF;EACE;EACA;EACA;EACA;AACA;EACA;;;AAIF;AAAA;AAAA;AASA;EACE;;;AAMF;EACE;;;AAMF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAOF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;;AAMF;EACE;;;AAKF;EACE;;;AAGF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIC;EACC;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACD;;;AAGD;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;;;AAOF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;AASA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EAEE;;AAGF;EACE;;;AAKJ;EACE;IACE;;;AAKJ;EACE;;;AAKD;EACC;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"ids.css"}
\ No newline at end of file
diff --git a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
index fbbe211..608241a 100644
--- a/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
+++ b/inst/rmarkdown/templates/revealjs_presentation/resources/default.html
@@ -859,6 +859,35 @@
$if(theme-ids)$
<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>
+<script>
+ // IDS theme: touch devices have no F11 and the browser chrome eats slide
+ // pixels, so offer a small fixed fullscreen toggle (styled in the theme;
+ // only shown on coarse-pointer devices). Best effort landscape lock while
+ // entering, since slides are wide; everything degrades silently where the
+ // Fullscreen or Orientation API is unavailable (e.g. iOS Safari).
+ (function () {
+ var btn = document.getElementById('ids-fullscreen');
+ if (!btn || !document.fullscreenEnabled) return;
+ btn.addEventListener('click', function (e) {
+ e.stopPropagation();
+ if (document.fullscreenElement) {
+ document.exitFullscreen();
+ } else {
+ document.documentElement.requestFullscreen().then(function () {
+ if (screen.orientation && screen.orientation.lock) {
+ screen.orientation.lock('landscape').catch(function () {});
+ }
+ }).catch(function () {});
+ }
+ });
+ document.addEventListener('fullscreenchange', function () {
+ var on = !!document.fullscreenElement;
+ btn.classList.toggle('is-fullscreen', on);
+ btn.setAttribute('aria-label', on ? 'Exit fullscreen' : 'Toggle fullscreen');
+ });
+ })();
+</script>
$endif$
</body>
</html>