Compare commits
2 Commits
master
...
f36e14ddf1
| Author | SHA1 | Date | |
|---|---|---|---|
f36e14ddf1
|
|||
|
d7cb7e1193
|
@@ -1,8 +0,0 @@
|
|||||||
[codespell]
|
|
||||||
# Ref: https://github.com/codespell-project/codespell#using-a-config-file
|
|
||||||
skip = .git*,node_modules,package-lock.json,*.css,.codespellrc
|
|
||||||
check-hidden = true
|
|
||||||
# Ignore super long lines -- must be minimized etc, acronyms
|
|
||||||
# and some near hit variables
|
|
||||||
ignore-regex = ^.{120,}|\b(currentY|FOM)\b
|
|
||||||
# ignore-words-list =
|
|
||||||
24
.github/workflows/js.yml
vendored
Normal file
24
.github/workflows/js.yml
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
name: tests
|
||||||
|
|
||||||
|
on: [push]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [10.x, 14.x, 16.x]
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v1
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
- run: npm install
|
||||||
|
- run: npm run build --if-present
|
||||||
|
- run: npm test
|
||||||
|
env:
|
||||||
|
CI: true
|
||||||
23
.github/workflows/spellcheck.yml
vendored
23
.github/workflows/spellcheck.yml
vendored
@@ -1,23 +0,0 @@
|
|||||||
# Codespell configuration is within .codespellrc
|
|
||||||
---
|
|
||||||
name: Spellcheck
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [master]
|
|
||||||
pull_request:
|
|
||||||
branches: [master]
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
codespell:
|
|
||||||
name: Check for spelling errors
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: Checkout
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
- name: Codespell
|
|
||||||
uses: codespell-project/actions-codespell@v2
|
|
||||||
31
.github/workflows/test.yml
vendored
31
.github/workflows/test.yml
vendored
@@ -1,31 +0,0 @@
|
|||||||
name: Tests
|
|
||||||
|
|
||||||
on:
|
|
||||||
- push
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: read
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
node-version:
|
|
||||||
- 18
|
|
||||||
- 20
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: Use Node.js ${{ matrix.node-version }}
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: ${{ matrix.node-version }}
|
|
||||||
|
|
||||||
- run: npm install
|
|
||||||
- run: npm run build --if-present
|
|
||||||
- run: npm test
|
|
||||||
env:
|
|
||||||
CI: true
|
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
/test
|
/test
|
||||||
/examples
|
/examples
|
||||||
.github
|
.github
|
||||||
|
.gulpfile
|
||||||
.sass-cache
|
.sass-cache
|
||||||
gulpfile.js
|
gulpfile.js
|
||||||
|
CONTRIBUTING.md
|
||||||
2
LICENSE
2
LICENSE
@@ -1,4 +1,4 @@
|
|||||||
Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
Copyright (C) 2011-2022 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
24
README.md
24
README.md
@@ -4,7 +4,7 @@
|
|||||||
</a>
|
</a>
|
||||||
<br><br>
|
<br><br>
|
||||||
<a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
|
<a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
|
||||||
<a href="https://slides.com/"><img src="https://static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
|
<a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
|
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
|
||||||
@@ -17,6 +17,26 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### Sponsors
|
||||||
|
Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
|
||||||
|
<div align="center">
|
||||||
|
<table>
|
||||||
|
<td align="center">
|
||||||
|
<a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
|
||||||
|
<div>
|
||||||
|
<img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
|
||||||
|
</div>
|
||||||
|
<b>Your app, enterprise-ready.</b>
|
||||||
|
<div>
|
||||||
|
<sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Getting started
|
### Getting started
|
||||||
- 🚀 [Install reveal.js](https://revealjs.com/installation)
|
- 🚀 [Install reveal.js](https://revealjs.com/installation)
|
||||||
- 👀 [View the demo presentation](https://revealjs.com/demo)
|
- 👀 [View the demo presentation](https://revealjs.com/demo)
|
||||||
@@ -26,5 +46,5 @@ Want to create reveal.js presentation in a graphical editor? Try <https://slides
|
|||||||
|
|
||||||
---
|
---
|
||||||
<div align="center">
|
<div align="center">
|
||||||
MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
|
MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -25,7 +25,6 @@
|
|||||||
// Stack multiple elements on top of each other
|
// Stack multiple elements on top of each other
|
||||||
.reveal .r-stack {
|
.reveal .r-stack {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .r-stack > * {
|
.reveal .r-stack > * {
|
||||||
|
|||||||
@@ -1,30 +1,42 @@
|
|||||||
|
/* Default Print Stylesheet Template
|
||||||
|
by Rob Glazebrook of CSSnewbie.com
|
||||||
|
Last Updated: June 4, 2008
|
||||||
|
|
||||||
|
Feel free (nay, compelled) to edit, append, and
|
||||||
|
manipulate this file as you see fit. */
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
html:not(.print-pdf) {
|
html:not(.print-pdf) {
|
||||||
overflow: visible;
|
|
||||||
|
background: #fff;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
background: #fff;
|
||||||
|
font-size: 20pt;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 5%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
float: none !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
html:not(.print-pdf) .reveal {
|
|
||||||
background: #fff;
|
|
||||||
font-size: 20pt;
|
|
||||||
|
|
||||||
|
.nestedarrow,
|
||||||
.controls,
|
.controls,
|
||||||
|
.fork-reveal,
|
||||||
|
.share-reveal,
|
||||||
.state-background,
|
.state-background,
|
||||||
.progress,
|
.reveal .progress,
|
||||||
.backgrounds,
|
.reveal .backgrounds,
|
||||||
.slide-number {
|
.reveal .slide-number {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, td, li {
|
body, p, td, li {
|
||||||
font-size: 20pt!important;
|
font-size: 20pt!important;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
@@ -37,6 +49,7 @@
|
|||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Need to reduce the size of the fonts for printing */
|
||||||
h1 { font-size: 28pt !important; }
|
h1 { font-size: 28pt !important; }
|
||||||
h2 { font-size: 24pt !important; }
|
h2 { font-size: 24pt !important; }
|
||||||
h3 { font-size: 22pt !important; }
|
h3 { font-size: 22pt !important; }
|
||||||
@@ -61,19 +74,18 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
pre,
|
.reveal pre,
|
||||||
table {
|
.reveal table {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
pre code {
|
.reveal pre code {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
blockquote {
|
.reveal blockquote {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
.reveal .slides {
|
||||||
.slides {
|
|
||||||
position: static !important;
|
position: static !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
@@ -94,7 +106,7 @@
|
|||||||
|
|
||||||
perspective-origin: 50% 50%;
|
perspective-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
.slides section {
|
.reveal .slides section {
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
position: static !important;
|
position: static !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
@@ -117,24 +129,24 @@
|
|||||||
transform: none !important;
|
transform: none !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
.slides section.stack {
|
.reveal .slides section.stack {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.slides section:last-of-type {
|
.reveal section:last-of-type {
|
||||||
page-break-after: avoid !important;
|
page-break-after: avoid !important;
|
||||||
}
|
}
|
||||||
.slides section .fragment {
|
.reveal section .fragment {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
|
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-fit-text {
|
.reveal .r-fit-text {
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
section img {
|
.reveal section img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 15px 0px;
|
margin: 15px 0px;
|
||||||
background: rgba(255,255,255,1);
|
background: rgba(255,255,255,1);
|
||||||
@@ -142,11 +154,11 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
section small {
|
.reveal section small {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs {
|
.reveal .hljs {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@@ -154,11 +166,11 @@
|
|||||||
font-size: 15pt;
|
font-size: 15pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs .hljs-ln-numbers {
|
.reveal .hljs .hljs-ln-numbers {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs td {
|
.reveal .hljs td {
|
||||||
font-size: inherit !important;
|
font-size: inherit !important;
|
||||||
color: inherit !important;
|
color: inherit !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
* https://revealjs.com/pdf-export/
|
* https://revealjs.com/pdf-export/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
html.reveal-print {
|
html.print-pdf {
|
||||||
* {
|
* {
|
||||||
-webkit-print-color-adjust: exact;
|
-webkit-print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
@@ -36,6 +36,7 @@ html.reveal-print {
|
|||||||
|
|
||||||
.reveal pre code {
|
.reveal pre code {
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
|
font-family: Courier, 'Courier New', monospace !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal {
|
.reveal {
|
||||||
@@ -70,10 +71,6 @@ html.reveal-print {
|
|||||||
page-break-after: always;
|
page-break-after: always;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .slides .pdf-page:last-of-type {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides section {
|
.reveal .slides section {
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
@@ -149,7 +146,6 @@ html.reveal-print {
|
|||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* This accessibility tool is not useful in PDF and breaks it visually */
|
/* This accessibility tool is not useful in PDF and breaks it visually */
|
||||||
|
|||||||
749
css/reveal.scss
749
css/reveal.scss
@@ -1,3 +1,5 @@
|
|||||||
|
@use "sass:math";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* reveal.js
|
* reveal.js
|
||||||
* http://revealjs.com
|
* http://revealjs.com
|
||||||
@@ -6,7 +8,6 @@
|
|||||||
* Copyright (C) Hakim El Hattab, https://hakim.se
|
* Copyright (C) Hakim El Hattab, https://hakim.se
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@use "sass:math";
|
|
||||||
@import 'layout';
|
@import 'layout';
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
@@ -18,7 +19,6 @@ html.reveal-full-page {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
height: calc( var(--vh, 1vh) * 100 );
|
height: calc( var(--vh, 1vh) * 100 );
|
||||||
height: 100dvh;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -31,18 +31,6 @@ html.reveal-full-page {
|
|||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
||||||
--r-controls-spacing: 12px;
|
|
||||||
--r-overlay-header-height: 40px;
|
|
||||||
--r-overlay-margin: 0px;
|
|
||||||
--r-overlay-padding: 6px;
|
|
||||||
--r-overlay-gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1024px), (max-height: 768px) {
|
|
||||||
.reveal-viewport {
|
|
||||||
--r-overlay-header-height: 26px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Force the presentation to cover the full viewport when we
|
// Force the presentation to cover the full viewport when we
|
||||||
@@ -60,14 +48,11 @@ html.reveal-full-page {
|
|||||||
* VIEW FRAGMENTS
|
* VIEW FRAGMENTS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
.reveal .fragment {
|
.reveal .slides section .fragment {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
transition: all .2s ease;
|
transition: all .2s ease;
|
||||||
|
will-change: opacity;
|
||||||
&:not(.custom) {
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
will-change: opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -79,7 +64,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.grow {
|
.reveal .slides section .fragment.grow {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
|
|
||||||
@@ -88,7 +73,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.shrink {
|
.reveal .slides section .fragment.shrink {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
|
|
||||||
@@ -97,7 +82,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.zoom-in {
|
.reveal .slides section .fragment.zoom-in {
|
||||||
transform: scale( 0.1 );
|
transform: scale( 0.1 );
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
@@ -105,7 +90,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-out {
|
.reveal .slides section .fragment.fade-out {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
|
|
||||||
@@ -115,7 +100,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.semi-fade-out {
|
.reveal .slides section .fragment.semi-fade-out {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
|
|
||||||
@@ -125,7 +110,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.strike {
|
.reveal .slides section .fragment.strike {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
|
|
||||||
@@ -134,7 +119,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-up {
|
.reveal .slides section .fragment.fade-up {
|
||||||
transform: translate(0, 40px);
|
transform: translate(0, 40px);
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
@@ -142,7 +127,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-down {
|
.reveal .slides section .fragment.fade-down {
|
||||||
transform: translate(0, -40px);
|
transform: translate(0, -40px);
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
@@ -150,7 +135,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-right {
|
.reveal .slides section .fragment.fade-right {
|
||||||
transform: translate(-40px, 0);
|
transform: translate(-40px, 0);
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
@@ -158,7 +143,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-left {
|
.reveal .slides section .fragment.fade-left {
|
||||||
transform: translate(40px, 0);
|
transform: translate(40px, 0);
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
@@ -166,8 +151,8 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-in-then-out,
|
.reveal .slides section .fragment.fade-in-then-out,
|
||||||
.reveal .fragment.current-visible {
|
.reveal .slides section .fragment.current-visible {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
@@ -177,7 +162,7 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.fade-in-then-semi-out {
|
.reveal .slides section .fragment.fade-in-then-semi-out {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
@@ -192,32 +177,32 @@ html.reveal-full-page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.highlight-red,
|
.reveal .slides section .fragment.highlight-red,
|
||||||
.reveal .fragment.highlight-current-red,
|
.reveal .slides section .fragment.highlight-current-red,
|
||||||
.reveal .fragment.highlight-green,
|
.reveal .slides section .fragment.highlight-green,
|
||||||
.reveal .fragment.highlight-current-green,
|
.reveal .slides section .fragment.highlight-current-green,
|
||||||
.reveal .fragment.highlight-blue,
|
.reveal .slides section .fragment.highlight-blue,
|
||||||
.reveal .fragment.highlight-current-blue {
|
.reveal .slides section .fragment.highlight-current-blue {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: inherit;
|
visibility: inherit;
|
||||||
}
|
}
|
||||||
.reveal .fragment.highlight-red.visible {
|
.reveal .slides section .fragment.highlight-red.visible {
|
||||||
color: #ff2c2d
|
color: #ff2c2d
|
||||||
}
|
}
|
||||||
.reveal .fragment.highlight-green.visible {
|
.reveal .slides section .fragment.highlight-green.visible {
|
||||||
color: #17ff2e;
|
color: #17ff2e;
|
||||||
}
|
}
|
||||||
.reveal .fragment.highlight-blue.visible {
|
.reveal .slides section .fragment.highlight-blue.visible {
|
||||||
color: #1b91ff;
|
color: #1b91ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .fragment.highlight-current-red.current-fragment {
|
.reveal .slides section .fragment.highlight-current-red.current-fragment {
|
||||||
color: #ff2c2d
|
color: #ff2c2d
|
||||||
}
|
}
|
||||||
.reveal .fragment.highlight-current-green.current-fragment {
|
.reveal .slides section .fragment.highlight-current-green.current-fragment {
|
||||||
color: #17ff2e;
|
color: #17ff2e;
|
||||||
}
|
}
|
||||||
.reveal .fragment.highlight-current-blue.current-fragment {
|
.reveal .slides section .fragment.highlight-current-blue.current-fragment {
|
||||||
color: #1b91ff;
|
color: #1b91ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -283,11 +268,13 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reveal .controls {
|
.reveal .controls {
|
||||||
|
$spacing: 12px;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: auto;
|
top: auto;
|
||||||
bottom: var(--r-controls-spacing);
|
bottom: $spacing;
|
||||||
right: var(--r-controls-spacing);
|
right: $spacing;
|
||||||
left: auto;
|
left: auto;
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
color: #000;
|
color: #000;
|
||||||
@@ -519,9 +506,7 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
// Edge aligned controls layout
|
// Edge aligned controls layout
|
||||||
@media screen and (min-width: 500px) {
|
@media screen and (min-width: 500px) {
|
||||||
|
|
||||||
.reveal-viewport {
|
$spacing: 0.8em;
|
||||||
--r-controls-spacing: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .controls[data-controls-layout="edges"] {
|
.reveal .controls[data-controls-layout="edges"] {
|
||||||
& {
|
& {
|
||||||
@@ -541,24 +526,24 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
|
|
||||||
.navigate-left {
|
.navigate-left {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: var(--r-controls-spacing);
|
left: $spacing;
|
||||||
margin-top: -$controlArrowSize*0.5;
|
margin-top: -$controlArrowSize*0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-right {
|
.navigate-right {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: var(--r-controls-spacing);
|
right: $spacing;
|
||||||
margin-top: -$controlArrowSize*0.5;
|
margin-top: -$controlArrowSize*0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-up {
|
.navigate-up {
|
||||||
top: var(--r-controls-spacing);
|
top: $spacing;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -$controlArrowSize*0.5;
|
margin-left: -$controlArrowSize*0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-down {
|
.navigate-down {
|
||||||
bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em);
|
bottom: $spacing - $controlArrowSpacing + 0.3em;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -$controlArrowSize*0.5;
|
margin-left: -$controlArrowSize*0.5;
|
||||||
}
|
}
|
||||||
@@ -640,16 +625,11 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
touch-action: pinch-zoom;
|
touch-action: pinch-zoom;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Swiping on an embedded deck should not block page scrolling...
|
// Swiping on an embedded deck should not block page scrolling
|
||||||
.reveal.embedded {
|
.reveal.embedded {
|
||||||
touch-action: pan-y;
|
touch-action: pan-y;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ... unless we're on a vertical slide
|
|
||||||
.reveal.embedded.is-vertical-slide {
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides {
|
.reveal .slides {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -1009,7 +989,7 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
|
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
|
||||||
|
|
||||||
transform: translateZ(-90px) rotateX( 65deg );
|
-webkit-transform: translateZ(-90px) rotateX( 65deg );
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal.page .slides>section.stack {
|
.reveal.page .slides>section.stack {
|
||||||
@@ -1328,6 +1308,12 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
perspective-origin: 50% 50%;
|
perspective-origin: 50% 50%;
|
||||||
perspective: 700px;
|
perspective: 700px;
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
// Fixes overview rendering errors in FF48+, not applied to
|
||||||
|
// other browsers since it degrades performance
|
||||||
|
-moz-transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
.slides section {
|
.slides section {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
@@ -1339,12 +1325,9 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
}
|
}
|
||||||
.slides section:hover,
|
.slides section:hover,
|
||||||
.slides section.present {
|
.slides section.present {
|
||||||
outline: 10px solid rgba(150,150,150,0.6);
|
outline: 10px solid rgba(150,150,150,0.4);
|
||||||
outline-offset: 10px;
|
outline-offset: 10px;
|
||||||
}
|
}
|
||||||
.slides section.present {
|
|
||||||
outline: 10px solid var(--r-link-color);
|
|
||||||
}
|
|
||||||
.slides section .fragment {
|
.slides section .fragment {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: none;
|
transition: none;
|
||||||
@@ -1363,6 +1346,10 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
|
|
||||||
.backgrounds {
|
.backgrounds {
|
||||||
perspective: inherit;
|
perspective: inherit;
|
||||||
|
|
||||||
|
// Fixes overview rendering errors in FF48+, not applied to
|
||||||
|
// other browsers since it degrades performance
|
||||||
|
-moz-transform-style: preserve-3d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backgrounds .slide-background {
|
.backgrounds .slide-background {
|
||||||
@@ -1442,234 +1429,160 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
||||||
@keyframes fade-in {
|
$overlayHeaderHeight: 40px;
|
||||||
from { opacity: 0; }
|
$overlayHeaderPadding: 5px;
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale-up {
|
.reveal > .overlay {
|
||||||
from { transform: scale( 0.95 ); }
|
|
||||||
to { transform: scale( 1 ); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal [data-preview-image],
|
|
||||||
.reveal [data-preview-video],
|
|
||||||
.reveal [data-preview-link]:not(a):not([data-preview-link=false]) {
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: var(--r-overlay-margin);
|
top: 0;
|
||||||
right: var(--r-overlay-margin);
|
|
||||||
bottom: var(--r-overlay-margin);
|
|
||||||
left: var(--r-overlay-margin);
|
|
||||||
border-radius: min( var(--r-overlay-margin), 6px );
|
|
||||||
z-index: 99;
|
|
||||||
background: rgba( 0, 0, 0, 0.95 );
|
|
||||||
backdrop-filter: blur( 10px );
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: #fff;
|
|
||||||
animation: fade-in 0.3s ease;
|
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-viewport {
|
|
||||||
position: absolute;
|
|
||||||
top: var(--r-overlay-padding);
|
|
||||||
right: var(--r-overlay-padding);
|
|
||||||
bottom: var(--r-overlay-padding);
|
|
||||||
left: var(--r-overlay-padding);
|
|
||||||
gap: var(--r-overlay-gap);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-header {
|
|
||||||
display: flex;
|
|
||||||
z-index: 2;
|
|
||||||
box-sizing: border-box;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: var(--r-overlay-header-height);
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.r-overlay-header .r-overlay-button {
|
|
||||||
all: unset;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: var(--r-overlay-header-height);
|
|
||||||
min-height: var(--r-overlay-header-height);
|
|
||||||
padding: 0 calc(var(--r-overlay-header-height) / 4);
|
|
||||||
opacity: 1;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 18px;
|
|
||||||
gap: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.r-overlay-header .r-overlay-button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
background-color: rgba( 255, 255, 255, 0.15 );
|
|
||||||
}
|
|
||||||
.r-overlay-header .icon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
background-position: 50% 50%;
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.r-overlay-close .icon {
|
|
||||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTIuODU0IDIuODU0YS41LjUgMCAwIDAtLjcwOC0uNzA4TDcuNSA2Ljc5MyAyLjg1NCAyLjE0NmEuNS41IDAgMSAwLS43MDguNzA4TDYuNzkzIDcuNWwtNC42NDcgNC42NDZhLjUuNSAwIDAgMCAuNzA4LjcwOEw3LjUgOC4yMDdsNC42NDYgNC42NDdhLjUuNSAwIDAgMCAuNzA4LS43MDhMOC4yMDcgNy41bDQuNjQ3LTQuNjQ2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
|
|
||||||
}
|
|
||||||
.r-overlay-external .icon {
|
|
||||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMyAyYTEgMSAwIDAgMC0xIDF2OWExIDEgMCAwIDAgMSAxaDlhMSAxIDAgMCAwIDEtMVY4LjVhLjUuNSAwIDAgMC0xIDBWMTJIM1YzaDMuNWEuNS41IDAgMCAwIDAtMUgzWm05Ljg1NC4xNDZhLjUuNSAwIDAgMSAuMTQ2LjM1MVY1LjVhLjUuNSAwIDAgMS0xIDBWMy43MDdMNi44NTQgOC44NTRhLjUuNSAwIDEgMS0uNzA4LS43MDhMMTEuMjkzIDNIOS41YS41LjUgMCAwIDEgMC0xaDNhLjQ5OS40OTkgMCAwIDEgLjM1NC4xNDZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-content {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-grow: 1;
|
|
||||||
background-color: rgba(20, 20, 20, 0.8);
|
|
||||||
animation: scale-up 0.5s cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-spinner {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
margin: -16px 0 0 -16px;
|
|
||||||
z-index: 10;
|
|
||||||
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
|
|
||||||
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Preview overlay
|
|
||||||
.r-overlay-preview .r-overlay-content iframe {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-state="loaded"] iframe {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview .r-overlay-content img,
|
|
||||||
.r-overlay-preview .r-overlay-content video {
|
|
||||||
position: absolute;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
object-fit: scale-down;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-preview-fit="none"] img,
|
|
||||||
.r-overlay-preview[data-preview-fit="none"] video {
|
|
||||||
object-fit: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-preview-fit="scale-down"] img,
|
|
||||||
.r-overlay-preview[data-preview-fit="scale-down"] video {
|
|
||||||
object-fit: scale-down;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-preview-fit="contain"] img,
|
|
||||||
.r-overlay-preview[data-preview-fit="contain"] video {
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-preview-fit="cover"] img,
|
|
||||||
.r-overlay-preview[data-preview-fit="cover"] video {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview[data-state="loaded"] .r-overlay-content-inner {
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 45%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
height: 100%;
|
||||||
letter-spacing: normal;
|
z-index: 1000;
|
||||||
}
|
background: rgba( 0, 0, 0, 0.9 );
|
||||||
.r-overlay-preview .r-overlay-error {
|
transition: all 0.3s ease;
|
||||||
font-size: 18px;
|
|
||||||
color: orange;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-preview .x-frame-error {
|
.reveal > .overlay .spinner {
|
||||||
opacity: 0;
|
position: absolute;
|
||||||
transition: opacity 0.3s ease 0.3s;
|
display: block;
|
||||||
}
|
top: 50%;
|
||||||
.r-overlay-preview[data-state="loaded"] .x-frame-error {
|
left: 50%;
|
||||||
opacity: 1;
|
width: 32px;
|
||||||
}
|
height: 32px;
|
||||||
|
margin: -16px 0 0 -16px;
|
||||||
|
z-index: 10;
|
||||||
|
background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf%2F%2F%2F6%2Bvr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs%2FLy8vz8%2FAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2FhpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh%2BQQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ%2FV%2FnmOM82XiHRLYKhKP1oZmADdEAAAh%2BQQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY%2FCZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB%2BA4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6%2BHo7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq%2BB6QDtuetcaBPnW6%2BO7wDHpIiK9SaVK5GgV543tzjgGcghAgAh%2BQQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK%2B%2BG%2Bw48edZPK%2BM6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE%2BG%2BcD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm%2BFNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk%2BaV%2BoJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0%2FVNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc%2BXiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30%2FiI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE%2FjiuL04RGEBgwWhShRgQExHBAAh%2BQQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR%2BipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq%2BE71SRQeyqUToLA7VxF0JDyIQh%2FMVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY%2BYip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd%2BMFCN6HAAIKgNggY0KtEBAAh%2BQQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1%2BvsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d%2BjYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg%2BygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0%2Bbm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h%2BKr0SJ8MFihpNbx%2B4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX%2BBP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA%3D%3D);
|
||||||
|
|
||||||
.r-overlay-preview[data-state="loading"] .r-overlay-spinner {
|
visibility: visible;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
visibility: visible;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Help overlay
|
.reveal > .overlay header {
|
||||||
.r-overlay-help .r-overlay-content {
|
position: absolute;
|
||||||
overflow: auto;
|
left: 0;
|
||||||
}
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: $overlayHeaderPadding;
|
||||||
|
z-index: 2;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.reveal > .overlay header a {
|
||||||
|
display: inline-block;
|
||||||
|
width: $overlayHeaderHeight;
|
||||||
|
height: $overlayHeaderHeight;
|
||||||
|
line-height: 36px;
|
||||||
|
padding: 0 10px;
|
||||||
|
float: right;
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
.r-overlay-help-content {
|
box-sizing: border-box;
|
||||||
max-width: 560px;
|
}
|
||||||
padding: 20px 0;
|
.reveal > .overlay header a:hover {
|
||||||
margin: auto;
|
opacity: 1;
|
||||||
text-align: center;
|
}
|
||||||
letter-spacing: normal;
|
.reveal > .overlay header a .icon {
|
||||||
}
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
.r-overlay-help-content .title {
|
background-position: 50% 50%;
|
||||||
font-size: 20px;
|
background-size: 100%;
|
||||||
margin-top: 0;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.reveal > .overlay header a.close .icon {
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
|
||||||
|
}
|
||||||
|
.reveal > .overlay header a.external .icon {
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
|
||||||
|
}
|
||||||
|
|
||||||
/* Specificity battle with reveal.js theme table styles */
|
.reveal > .overlay .viewport {
|
||||||
.r-overlay-help .r-overlay-help-content table {
|
position: absolute;
|
||||||
border: 1px solid #fff;
|
display: flex;
|
||||||
border-collapse: collapse;
|
top: $overlayHeaderHeight + $overlayHeaderPadding*2;
|
||||||
font-size: 16px;
|
right: 0;
|
||||||
text-align: left;
|
bottom: 0;
|
||||||
}
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.r-overlay-help .r-overlay-help-content table th,
|
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||||
.r-overlay-help .r-overlay-help-content table td {
|
width: 100%;
|
||||||
width: 240px;
|
height: 100%;
|
||||||
padding: 14px;
|
max-width: 100%;
|
||||||
border: 1px solid #fff;
|
max-height: 100%;
|
||||||
vertical-align: middle;
|
border: 0;
|
||||||
}
|
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
left: 0;
|
||||||
|
top: 45%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease 0.3s;
|
||||||
|
}
|
||||||
|
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transform: scale(0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport {
|
||||||
|
overflow: auto;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||||
|
width: 600px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 20px 20px 80px 20px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||||
|
border: 1px solid #fff;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||||
|
width: 200px;
|
||||||
|
padding: 14px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.r-overlay-help .r-overlay-help-content table th {
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PLAYBACK COMPONENT
|
* PLAYBACK COMPONENT
|
||||||
@@ -1720,10 +1633,6 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .hljs.has-highlights.fragment {
|
|
||||||
transition: all .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .hljs:not(:first-child).fragment {
|
.reveal .hljs:not(:first-child).fragment {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -1887,43 +1796,6 @@ $notesWidthPercent: 25%;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* JUMP-TO-SLIDE COMPONENT
|
|
||||||
*********************************************/
|
|
||||||
|
|
||||||
.reveal .jump-to-slide {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 15px;
|
|
||||||
z-index: 30;
|
|
||||||
font-size: 32px;
|
|
||||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .jump-to-slide-input {
|
|
||||||
background: transparent;
|
|
||||||
padding: 8px;
|
|
||||||
font-size: inherit;
|
|
||||||
color: currentColor;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
.reveal .jump-to-slide-input::placeholder {
|
|
||||||
color: currentColor;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.has-dark-background .jump-to-slide-input {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.reveal.has-light-background .jump-to-slide-input {
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .jump-to-slide-input:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* ZOOM PLUGIN
|
* ZOOM PLUGIN
|
||||||
*********************************************/
|
*********************************************/
|
||||||
@@ -1948,239 +1820,6 @@ $notesWidthPercent: 25%;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* SCROLL VIEW
|
|
||||||
*********************************************/
|
|
||||||
.reveal-viewport.loading-scroll-mode {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport.reveal-scroll {
|
|
||||||
& {
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
--r-scrollbar-width: 7px;
|
|
||||||
--r-scrollbar-trigger-size: 5px;
|
|
||||||
--r-controls-spacing: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
--r-scrollbar-width: 3px;
|
|
||||||
--r-scrollbar-trigger-size: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls,
|
|
||||||
.progress,
|
|
||||||
.playback,
|
|
||||||
.backgrounds,
|
|
||||||
.slide-number,
|
|
||||||
.speaker-notes {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay,
|
|
||||||
.pause-overlay {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
overflow: visible;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slides {
|
|
||||||
position: static;
|
|
||||||
pointer-events: initial;
|
|
||||||
|
|
||||||
left: auto;
|
|
||||||
top: auto;
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
overflow: visible;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
perspective: none;
|
|
||||||
perspective-origin: 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-page {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(var(--page-height) + var(--page-scroll-padding));
|
|
||||||
z-index: 1;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-page-sticky {
|
|
||||||
position: sticky;
|
|
||||||
height: var(--page-height);
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-page-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-page section {
|
|
||||||
visibility: visible !important;
|
|
||||||
display: block !important;
|
|
||||||
position: absolute !important;
|
|
||||||
width: var(--slide-width) !important;
|
|
||||||
height: var(--slide-height) !important;
|
|
||||||
top: 50% !important;
|
|
||||||
left: 50% !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
transform: scale(var(--slide-scale)) translate(-50%, -50%) !important;
|
|
||||||
transform-style: flat !important;
|
|
||||||
transform-origin: 0 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-background {
|
|
||||||
display: block !important;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: auto !important;
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chromium
|
|
||||||
.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar,
|
|
||||||
.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Firefox
|
|
||||||
.reveal-viewport.reveal-scroll[data-scrollbar="true"],
|
|
||||||
.reveal-viewport.reveal-scroll[data-scrollbar="auto"] {
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal.has-dark-background,
|
|
||||||
.reveal-viewport.has-dark-background {
|
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
|
||||||
.reveal.has-light-background,
|
|
||||||
.reveal-viewport.has-light-background {
|
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport.reveal-scroll .scrollbar {
|
|
||||||
position: sticky;
|
|
||||||
top: 50%;
|
|
||||||
z-index: 20;
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&.visible,
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-inner {
|
|
||||||
position: absolute;
|
|
||||||
width: var(--r-scrollbar-width);
|
|
||||||
height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
|
|
||||||
right: var(--r-controls-spacing);
|
|
||||||
top: 0;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-radius: var(--r-scrollbar-width);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-playhead {
|
|
||||||
position: absolute;
|
|
||||||
width: var(--r-scrollbar-width);
|
|
||||||
height: var(--r-scrollbar-width);
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: var(--r-scrollbar-width);
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 1);
|
|
||||||
z-index: 11;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
|
|
||||||
box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
|
|
||||||
border-radius: var(--r-scrollbar-width);
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hit area
|
|
||||||
.scrollbar-slide:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 200%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: -50%;
|
|
||||||
background: rgba( 0, 0, 0, 0 );
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide:hover,
|
|
||||||
.scrollbar-slide.active {
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-trigger {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide.active.has-triggers {
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide.active .scrollbar-trigger:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: var(--r-scrollbar-trigger-size);
|
|
||||||
height: var(--r-scrollbar-trigger-size);
|
|
||||||
border-radius: 20px;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 1);
|
|
||||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide.active .scrollbar-trigger.active:after,
|
|
||||||
.scrollbar-slide.active .scrollbar-trigger.active ~ .scrollbar-trigger:after {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after {
|
|
||||||
transform: translate(calc( var(--r-scrollbar-width) * -2), 0);
|
|
||||||
background-color: rgba(var(--r-overlay-element-bg-color), 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PRINT STYLES
|
* PRINT STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -24,13 +23,10 @@ $headingColor: #333;
|
|||||||
$headingTextShadow: none;
|
$headingTextShadow: none;
|
||||||
$backgroundColor: #f7f3de;
|
$backgroundColor: #f7f3de;
|
||||||
$linkColor: #8b743d;
|
$linkColor: #8b743d;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
|
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
|
||||||
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Background generator
|
// Background generator
|
||||||
@mixin bodyBackground() {
|
@mixin bodyBackground() {
|
||||||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||||
|
|||||||
@@ -1,50 +0,0 @@
|
|||||||
/**
|
|
||||||
* Black compact & high contrast reveal.js theme, with headers not in capitals.
|
|
||||||
*
|
|
||||||
* By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
|
|
||||||
*
|
|
||||||
* - Keep the source similar to black.css - for easy comparison.
|
|
||||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
|
||||||
@import "../template/settings";
|
|
||||||
// ---------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
|
||||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
|
||||||
|
|
||||||
|
|
||||||
// Override theme settings (see ../template/settings.scss)
|
|
||||||
$backgroundColor: #000000;
|
|
||||||
|
|
||||||
$mainColor: #fff;
|
|
||||||
$headingColor: #fff;
|
|
||||||
|
|
||||||
$mainFontSize: 42px;
|
|
||||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
|
||||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
|
||||||
$headingTextShadow: none;
|
|
||||||
$headingLetterSpacing: normal;
|
|
||||||
$headingTextTransform: uppercase;
|
|
||||||
$headingFontWeight: 600;
|
|
||||||
$linkColor: #42affa;
|
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
|
||||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
|
||||||
|
|
||||||
$heading1Size: 2.5em;
|
|
||||||
$heading2Size: 1.6em;
|
|
||||||
$heading3Size: 1.3em;
|
|
||||||
$heading4Size: 1.0em;
|
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
|
||||||
@include light-bg-text-color(#000);
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
|
||||||
@import "../template/theme";
|
|
||||||
// ---------------------------------------------
|
|
||||||
@@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -30,8 +29,8 @@ $headingLetterSpacing: normal;
|
|||||||
$headingTextTransform: uppercase;
|
$headingTextTransform: uppercase;
|
||||||
$headingFontWeight: 600;
|
$headingFontWeight: 600;
|
||||||
$linkColor: #42affa;
|
$linkColor: #42affa;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
$selectionBackgroundColor: rgba( $linkColor, 0.75 );
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
$heading1Size: 2.5em;
|
$heading1Size: 2.5em;
|
||||||
$heading2Size: 1.6em;
|
$heading2Size: 1.6em;
|
||||||
|
|||||||
@@ -10,8 +10,7 @@
|
|||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -41,7 +40,7 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
|
|||||||
|
|
||||||
// Links
|
// Links
|
||||||
$linkColor: $blood;
|
$linkColor: $blood;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
|
||||||
// Text selection
|
// Text selection
|
||||||
$selectionBackgroundColor: $blood;
|
$selectionBackgroundColor: $blood;
|
||||||
|
|||||||
@@ -9,10 +9,9 @@
|
|||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
|
|
||||||
// Include theme-specific fonts
|
|
||||||
@import url(./fonts/league-gothic/league-gothic.css);
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
$systemFontsSansSerif: -apple-system,
|
$systemFontsSansSerif: -apple-system,
|
||||||
BlinkMacSystemFont,
|
BlinkMacSystemFont,
|
||||||
avenir next,
|
avenir next,
|
||||||
@@ -87,21 +86,47 @@ $codeFont: "Fira Code", $systemFontsMono;
|
|||||||
--r-list-bullet-color: #{$listBulletColor};
|
--r-list-bullet-color: #{$listBulletColor};
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal {
|
.reveal strong, .reveal b {
|
||||||
strong, b {
|
color: var(--r-bold-color);
|
||||||
color: var(--r-bold-color);
|
|
||||||
}
|
|
||||||
em, i, blockquote {
|
|
||||||
color: var(--r-italic-color);
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
color: var(--r-inline-code-color);
|
|
||||||
}
|
|
||||||
// Dracula colored list bullets and numbers
|
|
||||||
ul, ol {
|
|
||||||
li::marker {
|
|
||||||
color: var(--r-list-bullet-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal em, .reveal i, .reveal blockquote {
|
||||||
|
color: var(--r-italic-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
color: var(--r-inline-code-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dracula colored list bullets and numbers
|
||||||
|
.reveal ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul li::before {
|
||||||
|
content: "•";
|
||||||
|
color: var(--r-list-bullet-color);
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
margin-left: -1em
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: li;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol li::before {
|
||||||
|
content: counter(li) ".";
|
||||||
|
color: var(--r-list-bullet-color);
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
|
||||||
|
margin-left: -2.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol li {
|
||||||
|
counter-increment: li
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -19,6 +18,10 @@
|
|||||||
/**
|
/**
|
||||||
* Solarized colors by Ethan Schoonover
|
* Solarized colors by Ethan Schoonover
|
||||||
*/
|
*/
|
||||||
|
html * {
|
||||||
|
color-profile: sRGB;
|
||||||
|
rendering-intent: auto;
|
||||||
|
}
|
||||||
|
|
||||||
// Solarized colors
|
// Solarized colors
|
||||||
$base03: #002b36;
|
$base03: #002b36;
|
||||||
@@ -44,7 +47,7 @@ $headingColor: $base2;
|
|||||||
$headingTextShadow: none;
|
$headingTextShadow: none;
|
||||||
$backgroundColor: $base03;
|
$backgroundColor: $base03;
|
||||||
$linkColor: $blue;
|
$linkColor: $blue;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: $magenta;
|
$selectionBackgroundColor: $magenta;
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
// Change text colors against light slide backgrounds
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -22,7 +21,7 @@ $backgroundColor: #111;
|
|||||||
|
|
||||||
$mainFont: 'Open Sans', sans-serif;
|
$mainFont: 'Open Sans', sans-serif;
|
||||||
$linkColor: #e7ad52;
|
$linkColor: #e7ad52;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$headingFont: 'Montserrat', Impact, sans-serif;
|
$headingFont: 'Montserrat', Impact, sans-serif;
|
||||||
$headingTextShadow: none;
|
$headingTextShadow: none;
|
||||||
$headingLetterSpacing: -0.03em;
|
$headingLetterSpacing: -0.03em;
|
||||||
|
|||||||
@@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -23,12 +22,9 @@ $headingTextShadow: none;
|
|||||||
$headingTextTransform: none;
|
$headingTextTransform: none;
|
||||||
$backgroundColor: #F0F1EB;
|
$backgroundColor: #F0F1EB;
|
||||||
$linkColor: #51483D;
|
$linkColor: #51483D;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: #26351C;
|
$selectionBackgroundColor: #26351C;
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
.reveal a {
|
.reveal a {
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -29,12 +28,9 @@ $headingTextShadow: none;
|
|||||||
$headingTextTransform: none;
|
$headingTextTransform: none;
|
||||||
$backgroundColor: #fff;
|
$backgroundColor: #fff;
|
||||||
$linkColor: #00008B;
|
$linkColor: #00008B;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Change text colors against dark slide backgrounds
|
// Change text colors against dark slide backgrounds
|
||||||
@include dark-bg-text-color(#fff);
|
@include dark-bg-text-color(#fff);
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -27,12 +26,9 @@ $headingLetterSpacing: -0.08em;
|
|||||||
$headingTextShadow: none;
|
$headingTextShadow: none;
|
||||||
$backgroundColor: #f7fbfc;
|
$backgroundColor: #f7fbfc;
|
||||||
$linkColor: #3b759e;
|
$linkColor: #3b759e;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: #134674;
|
$selectionBackgroundColor: #134674;
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Fix links so they are not cut off
|
// Fix links so they are not cut off
|
||||||
.reveal a {
|
.reveal a {
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
|
|||||||
@@ -5,7 +5,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -49,12 +48,9 @@ $headingColor: $base01;
|
|||||||
$headingTextShadow: none;
|
$headingTextShadow: none;
|
||||||
$backgroundColor: $base3;
|
$backgroundColor: $base3;
|
||||||
$linkColor: $blue;
|
$linkColor: $blue;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: $magenta;
|
$selectionBackgroundColor: $magenta;
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Background generator
|
// Background generator
|
||||||
// @mixin bodyBackground() {
|
// @mixin bodyBackground() {
|
||||||
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
/**
|
|
||||||
* White compact & high contrast reveal.js theme, with headers not in capitals.
|
|
||||||
*
|
|
||||||
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
|
|
||||||
*
|
|
||||||
* - Keep the source similar to black.css - for easy comparison.
|
|
||||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
|
||||||
@import "../template/settings";
|
|
||||||
// ---------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// Include theme-specific fonts
|
|
||||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
|
||||||
|
|
||||||
|
|
||||||
// Override theme settings (see ../template/settings.scss)
|
|
||||||
$backgroundColor: #fff;
|
|
||||||
|
|
||||||
$mainColor: #000;
|
|
||||||
$headingColor: #000;
|
|
||||||
|
|
||||||
$mainFontSize: 42px;
|
|
||||||
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
|
||||||
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
|
||||||
$headingTextShadow: none;
|
|
||||||
$headingLetterSpacing: normal;
|
|
||||||
$headingTextTransform: uppercase;
|
|
||||||
$headingFontWeight: 600;
|
|
||||||
$linkColor: #2a76dd;
|
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
|
||||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
|
||||||
|
|
||||||
$heading1Size: 2.5em;
|
|
||||||
$heading2Size: 1.6em;
|
|
||||||
$heading3Size: 1.3em;
|
|
||||||
$heading4Size: 1.0em;
|
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Change text colors against dark slide backgrounds
|
|
||||||
@include dark-bg-text-color(#fff);
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
|
||||||
@import "../template/theme";
|
|
||||||
// ---------------------------------------------
|
|
||||||
@@ -6,7 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
// Default mixins and settings -----------------
|
||||||
@use "sass:color";
|
|
||||||
@import "../template/mixins";
|
@import "../template/mixins";
|
||||||
@import "../template/settings";
|
@import "../template/settings";
|
||||||
// ---------------------------------------------
|
// ---------------------------------------------
|
||||||
@@ -30,17 +29,14 @@ $headingLetterSpacing: normal;
|
|||||||
$headingTextTransform: uppercase;
|
$headingTextTransform: uppercase;
|
||||||
$headingFontWeight: 600;
|
$headingFontWeight: 600;
|
||||||
$linkColor: #2a76dd;
|
$linkColor: #2a76dd;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 15% );
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
$heading1Size: 2.5em;
|
$heading1Size: 2.5em;
|
||||||
$heading2Size: 1.6em;
|
$heading2Size: 1.6em;
|
||||||
$heading3Size: 1.3em;
|
$heading3Size: 1.3em;
|
||||||
$heading4Size: 1.0em;
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
$overlayElementBgColor: 0, 0, 0;
|
|
||||||
$overlayElementFgColor: 240, 240, 240;
|
|
||||||
|
|
||||||
// Change text colors against dark slide backgrounds
|
// Change text colors against dark slide backgrounds
|
||||||
@include dark-bg-text-color(#fff);
|
@include dark-bg-text-color(#fff);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
// Exposes theme's variables for easy reuse in CSS for plugin authors
|
// Exposes theme's variables for easy re-use in CSS for plugin authors
|
||||||
|
|
||||||
@use "sass:color";
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--r-background-color: #{$backgroundColor};
|
--r-background-color: #{$backgroundColor};
|
||||||
@@ -23,10 +21,8 @@
|
|||||||
--r-heading4-size: #{$heading4Size};
|
--r-heading4-size: #{$heading4Size};
|
||||||
--r-code-font: #{$codeFont};
|
--r-code-font: #{$codeFont};
|
||||||
--r-link-color: #{$linkColor};
|
--r-link-color: #{$linkColor};
|
||||||
--r-link-color-dark: #{color.scale( $linkColor, $lightness: -15% )};
|
--r-link-color-dark: #{darken($linkColor , 15% )};
|
||||||
--r-link-color-hover: #{$linkColorHover};
|
--r-link-color-hover: #{$linkColorHover};
|
||||||
--r-selection-background-color: #{$selectionBackgroundColor};
|
--r-selection-background-color: #{$selectionBackgroundColor};
|
||||||
--r-selection-color: #{$selectionColor};
|
--r-selection-color: #{$selectionColor};
|
||||||
--r-overlay-element-bg-color: #{$overlayElementBgColor};
|
|
||||||
--r-overlay-element-fg-color: #{$overlayElementFgColor};
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
@use "sass:color";
|
|
||||||
|
|
||||||
// Base settings for all themes that can optionally be
|
// Base settings for all themes that can optionally be
|
||||||
// overridden by the super-theme
|
// overridden by the super-theme
|
||||||
|
|
||||||
@@ -34,17 +32,12 @@ $codeFont: monospace;
|
|||||||
|
|
||||||
// Links and actions
|
// Links and actions
|
||||||
$linkColor: #13DAEC;
|
$linkColor: #13DAEC;
|
||||||
$linkColorHover: color.scale( $linkColor, $lightness: 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
|
||||||
// Text selection
|
// Text selection
|
||||||
$selectionBackgroundColor: #FF5E99;
|
$selectionBackgroundColor: #FF5E99;
|
||||||
$selectionColor: #fff;
|
$selectionColor: #fff;
|
||||||
|
|
||||||
// Colors used for UI elements that are overlaid on top of
|
|
||||||
// the presentation
|
|
||||||
$overlayElementBgColor: 240, 240, 240;
|
|
||||||
$overlayElementFgColor: 0, 0, 0;
|
|
||||||
|
|
||||||
// Generates the presentation background, can be overridden
|
// Generates the presentation background, can be overridden
|
||||||
// to return a background image or gradient
|
// to return a background image or gradient
|
||||||
@mixin bodyBackground() {
|
@mixin bodyBackground() {
|
||||||
|
|||||||
@@ -278,7 +278,8 @@
|
|||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: var(--r-link-color-dark);
|
// background: darken( var(--r-link-color), 15% );
|
||||||
|
background: var(--r-link-color-dark);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
57
demo.html
57
demo.html
@@ -86,7 +86,7 @@
|
|||||||
|
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h2 data-id="code-title">Pretty Code</h2>
|
<h2 data-id="code-title">Pretty Code</h2>
|
||||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
|
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
function Example() {
|
function Example() {
|
||||||
@@ -101,8 +101,8 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h2 data-id="code-title">With Animations</h2>
|
<h2 data-id="code-title">With animations</h2>
|
||||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
|
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
function Example() {
|
function Example() {
|
||||||
@@ -165,9 +165,9 @@
|
|||||||
</section>
|
</section>
|
||||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
||||||
<div class="r-stack">
|
<div class="r-stack">
|
||||||
<div data-id="box1" style="background: cyan; width: 300px; height: 300px;"></div>
|
<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
|
||||||
<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
|
<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
|
||||||
<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
|
<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
|
||||||
</div>
|
</div>
|
||||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
||||||
</section>
|
</section>
|
||||||
@@ -181,14 +181,14 @@
|
|||||||
|
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
## Markdown Support
|
## Markdown support
|
||||||
|
|
||||||
Write content using inline or external Markdown.
|
Write content using inline or external Markdown.
|
||||||
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
||||||
|
|
||||||
```html []
|
```html []
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
## Markdown Support
|
## Markdown support
|
||||||
|
|
||||||
Write content using inline or external Markdown.
|
Write content using inline or external Markdown.
|
||||||
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
||||||
@@ -197,25 +197,6 @@
|
|||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
|
||||||
<h2>Lightbox</h2>
|
|
||||||
Turn any element into a <a href="https://revealjs.com/lightbox/">lightbox</a> using <strong>data‑preview‑image</strong> & <strong>data‑preview‑video</strong>.
|
|
||||||
<div class="r-hstack" style="gap: 2rem;">
|
|
||||||
<div>
|
|
||||||
<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
|
|
||||||
<img src="image.png" data-preview-image="image.png">
|
|
||||||
</code></pre>
|
|
||||||
<img src="https://static.slid.es/logo/v2/slides-symbol-1024x1024.png" height="100" data-preview-image>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<pre style="font-size: 12px; width: 100%"><code class="html" data-trim>
|
|
||||||
<img src="video.png" data-preview-video="video.mp4">
|
|
||||||
</code></pre>
|
|
||||||
<img src="https://static.slid.es/site/homepage/v1/homepage-video-editor.png" height="100" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<p>Add the <code>r-fit-text</code> class to auto-size text</p>
|
<p>Add the <code>r-fit-text</code> class to auto-size text</p>
|
||||||
<h2 class="r-fit-text">FIT TEXT</h2>
|
<h2 class="r-fit-text">FIT TEXT</h2>
|
||||||
@@ -268,17 +249,17 @@
|
|||||||
<p>
|
<p>
|
||||||
reveal.js comes with a few themes built in: <br>
|
reveal.js comes with a few themes built in: <br>
|
||||||
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
|
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
|
||||||
<a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
|
<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
17
dist/reveal.css
vendored
17
dist/reveal.css
vendored
File diff suppressed because one or more lines are too long
14
dist/reveal.esm.js
vendored
14
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.esm.js.map
vendored
2
dist/reveal.esm.js.map
vendored
File diff suppressed because one or more lines are too long
14
dist/reveal.js
vendored
14
dist/reveal.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js.map
vendored
2
dist/reveal.js.map
vendored
File diff suppressed because one or more lines are too long
20
dist/theme/beige.css
vendored
20
dist/theme/beige.css
vendored
@@ -33,22 +33,20 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #8b743d;
|
--r-link-color: #8b743d;
|
||||||
--r-link-color-dark: rgb(118.15, 98.6, 51.85);
|
--r-link-color-dark: #564826;
|
||||||
--r-link-color-hover: rgb(179.36, 150.84, 82.64);
|
--r-link-color-hover: #c0a86e;
|
||||||
--r-selection-background-color: rgba(79, 64, 28, 0.99);
|
--r-selection-background-color: rgba(79, 64, 28, 0.99);
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
background: rgb(247, 242, 211);
|
background: #f7f2d3;
|
||||||
background: -moz-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
|
background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(247, 242, 211)));
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
|
||||||
background: -webkit-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
|
background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: -o-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
|
background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: -ms-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
|
background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background: radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
|
background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
|
||||||
background-color: var(--r-background-color);
|
background-color: var(--r-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
362
dist/theme/black-contrast.css
vendored
362
dist/theme/black-contrast.css
vendored
@@ -1,362 +0,0 @@
|
|||||||
/**
|
|
||||||
* Black compact & high contrast reveal.js theme, with headers not in capitals.
|
|
||||||
*
|
|
||||||
* By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
|
|
||||||
*
|
|
||||||
* - Keep the source similar to black.css - for easy comparison.
|
|
||||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
|
||||||
*/
|
|
||||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
|
||||||
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* GLOBAL STYLES
|
|
||||||
*********************************************/
|
|
||||||
:root {
|
|
||||||
--r-background-color: #000000;
|
|
||||||
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-main-font-size: 42px;
|
|
||||||
--r-main-color: #fff;
|
|
||||||
--r-block-margin: 20px;
|
|
||||||
--r-heading-margin: 0 0 20px 0;
|
|
||||||
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-heading-color: #fff;
|
|
||||||
--r-heading-line-height: 1.2;
|
|
||||||
--r-heading-letter-spacing: normal;
|
|
||||||
--r-heading-text-transform: uppercase;
|
|
||||||
--r-heading-text-shadow: none;
|
|
||||||
--r-heading-font-weight: 600;
|
|
||||||
--r-heading1-text-shadow: none;
|
|
||||||
--r-heading1-size: 2.5em;
|
|
||||||
--r-heading2-size: 1.6em;
|
|
||||||
--r-heading3-size: 1.3em;
|
|
||||||
--r-heading4-size: 1em;
|
|
||||||
--r-code-font: monospace;
|
|
||||||
--r-link-color: #42affa;
|
|
||||||
--r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
|
|
||||||
--r-link-color-hover: rgb(94.35, 187, 250.75);
|
|
||||||
--r-selection-background-color: rgb(113.25, 195, 251.25);
|
|
||||||
--r-selection-color: #fff;
|
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport {
|
|
||||||
background: #000000;
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
font-family: var(--r-main-font);
|
|
||||||
font-size: var(--r-main-font-size);
|
|
||||||
font-weight: normal;
|
|
||||||
color: var(--r-main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::-moz-selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides section,
|
|
||||||
.reveal .slides section > section {
|
|
||||||
line-height: 1.3;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* HEADERS
|
|
||||||
*********************************************/
|
|
||||||
.reveal h1,
|
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: var(--r-heading-margin);
|
|
||||||
color: var(--r-heading-color);
|
|
||||||
font-family: var(--r-heading-font);
|
|
||||||
font-weight: var(--r-heading-font-weight);
|
|
||||||
line-height: var(--r-heading-line-height);
|
|
||||||
letter-spacing: var(--r-heading-letter-spacing);
|
|
||||||
text-transform: var(--r-heading-text-transform);
|
|
||||||
text-shadow: var(--r-heading-text-shadow);
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
font-size: var(--r-heading1-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h2 {
|
|
||||||
font-size: var(--r-heading2-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h3 {
|
|
||||||
font-size: var(--r-heading3-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h4 {
|
|
||||||
font-size: var(--r-heading4-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
text-shadow: var(--r-heading1-text-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* OTHER
|
|
||||||
*********************************************/
|
|
||||||
.reveal p {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove trailing margins after titles */
|
|
||||||
.reveal h1:last-child,
|
|
||||||
.reveal h2:last-child,
|
|
||||||
.reveal h3:last-child,
|
|
||||||
.reveal h4:last-child,
|
|
||||||
.reveal h5:last-child,
|
|
||||||
.reveal h6:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
|
||||||
.reveal img,
|
|
||||||
.reveal video,
|
|
||||||
.reveal iframe {
|
|
||||||
max-width: 95%;
|
|
||||||
max-height: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal strong,
|
|
||||||
.reveal b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol,
|
|
||||||
.reveal dl,
|
|
||||||
.reveal ul {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul {
|
|
||||||
list-style-type: square;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul,
|
|
||||||
.reveal ul ol,
|
|
||||||
.reveal ol ol,
|
|
||||||
.reveal ol ul {
|
|
||||||
display: block;
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dd {
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 70%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
padding: 5px;
|
|
||||||
font-style: italic;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote p:first-child,
|
|
||||||
.reveal blockquote p:last-child {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal q {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 90%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 0.55em;
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
line-height: 1.2em;
|
|
||||||
word-wrap: break-word;
|
|
||||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal code {
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
text-transform: none;
|
|
||||||
tab-size: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre code {
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper code {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table {
|
|
||||||
margin: auto;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th,
|
|
||||||
.reveal table td {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=center],
|
|
||||||
.reveal table td[align=center] {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=right],
|
|
||||||
.reveal table td[align=right] {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table tbody tr:last-child th,
|
|
||||||
.reveal table tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sup {
|
|
||||||
vertical-align: super;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sub {
|
|
||||||
vertical-align: sub;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.6em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small * {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal img {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* LINKS
|
|
||||||
*********************************************/
|
|
||||||
.reveal a {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover {
|
|
||||||
color: var(--r-link-color-hover);
|
|
||||||
text-shadow: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .roll span:after {
|
|
||||||
color: #fff;
|
|
||||||
background: var(--r-link-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* Frame helper
|
|
||||||
*********************************************/
|
|
||||||
.reveal .r-frame {
|
|
||||||
border: 4px solid var(--r-main-color);
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a .r-frame {
|
|
||||||
transition: all 0.15s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover .r-frame {
|
|
||||||
border-color: var(--r-link-color);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* NAVIGATION CONTROLS
|
|
||||||
*********************************************/
|
|
||||||
.reveal .controls {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PROGRESS BAR
|
|
||||||
*********************************************/
|
|
||||||
.reveal .progress {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PRINT BACKGROUND
|
|
||||||
*********************************************/
|
|
||||||
@media print {
|
|
||||||
.backgrounds {
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
8
dist/theme/black.css
vendored
8
dist/theme/black.css
vendored
@@ -32,12 +32,10 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #42affa;
|
--r-link-color: #42affa;
|
||||||
--r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
|
--r-link-color-dark: #068de9;
|
||||||
--r-link-color-hover: rgb(94.35, 187, 250.75);
|
--r-link-color-hover: #8dcffc;
|
||||||
--r-selection-background-color: rgba(66, 175, 250, 0.75);
|
--r-selection-background-color: #bee4fd;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/blood.css
vendored
6
dist/theme/blood.css
vendored
@@ -38,12 +38,10 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #a23;
|
--r-link-color: #a23;
|
||||||
--r-link-color-dark: rgb(144.5, 28.9, 43.35);
|
--r-link-color-dark: #6a1520;
|
||||||
--r-link-color-hover: rgb(214.2, 51, 71.4);
|
--r-link-color-hover: #dd5566;
|
||||||
--r-selection-background-color: #a23;
|
--r-selection-background-color: #a23;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
39
dist/theme/dracula.css
vendored
39
dist/theme/dracula.css
vendored
@@ -1,9 +1,8 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
/**
|
/**
|
||||||
* Dracula Dark theme for reveal.js.
|
* Dracula Dark theme for reveal.js.
|
||||||
* Based on https://draculatheme.com
|
* Based on https://draculatheme.com
|
||||||
*/
|
*/
|
||||||
@import url(./fonts/league-gothic/league-gothic.css);
|
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
|
||||||
/**
|
/**
|
||||||
* Dracula colors by Zeno Rocha
|
* Dracula colors by Zeno Rocha
|
||||||
* https://draculatheme.com/contribute
|
* https://draculatheme.com/contribute
|
||||||
@@ -41,12 +40,10 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
--r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
||||||
--r-link-color: #FF79C6;
|
--r-link-color: #FF79C6;
|
||||||
--r-link-color-dark: rgb(255, 64.6, 174.0089552239);
|
--r-link-color-dark: #ff2da5;
|
||||||
--r-link-color-hover: #8BE9FD;
|
--r-link-color-hover: #8BE9FD;
|
||||||
--r-selection-background-color: #44475A;
|
--r-selection-background-color: #44475A;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
@@ -376,12 +373,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
.reveal strong, .reveal b {
|
.reveal strong, .reveal b {
|
||||||
color: var(--r-bold-color);
|
color: var(--r-bold-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal em, .reveal i, .reveal blockquote {
|
.reveal em, .reveal i, .reveal blockquote {
|
||||||
color: var(--r-italic-color);
|
color: var(--r-italic-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal code {
|
.reveal code {
|
||||||
color: var(--r-inline-code-color);
|
color: var(--r-inline-code-color);
|
||||||
}
|
}
|
||||||
.reveal ul li::marker, .reveal ol li::marker {
|
|
||||||
|
.reveal ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul li::before {
|
||||||
|
content: "•";
|
||||||
color: var(--r-list-bullet-color);
|
color: var(--r-list-bullet-color);
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
margin-left: -1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol {
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: li;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol li::before {
|
||||||
|
content: counter(li) ".";
|
||||||
|
color: var(--r-list-bullet-color);
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
margin-left: -2.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ol li {
|
||||||
|
counter-increment: li;
|
||||||
}
|
}
|
||||||
20
dist/theme/league.css
vendored
20
dist/theme/league.css
vendored
@@ -35,22 +35,20 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #13DAEC;
|
--r-link-color: #13DAEC;
|
||||||
--r-link-color-dark: rgb(16.15, 185.3, 200.6);
|
--r-link-color-dark: #0d99a5;
|
||||||
--r-link-color-hover: rgb(66.2, 225.4, 239.8);
|
--r-link-color-hover: #71e9f4;
|
||||||
--r-selection-background-color: #FF5E99;
|
--r-selection-background-color: #FF5E99;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
background: rgb(28, 30, 32);
|
background: #1c1e20;
|
||||||
background: -moz-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
|
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(85, 90, 95)), color-stop(100%, rgb(28, 30, 32)));
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
|
||||||
background: -webkit-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
|
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||||
background: -o-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
|
background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||||
background: -ms-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
|
background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||||
background: radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
|
background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
|
||||||
background-color: var(--r-background-color);
|
background-color: var(--r-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
11
dist/theme/moon.css
vendored
11
dist/theme/moon.css
vendored
@@ -7,6 +7,11 @@
|
|||||||
/**
|
/**
|
||||||
* Solarized colors by Ethan Schoonover
|
* Solarized colors by Ethan Schoonover
|
||||||
*/
|
*/
|
||||||
|
html * {
|
||||||
|
color-profile: sRGB;
|
||||||
|
rendering-intent: auto;
|
||||||
|
}
|
||||||
|
|
||||||
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
@@ -35,12 +40,10 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #268bd2;
|
--r-link-color: #268bd2;
|
||||||
--r-link-color-dark: rgb(32.3, 118.15, 178.5);
|
--r-link-color-dark: #1a6091;
|
||||||
--r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
|
--r-link-color-hover: #78b9e6;
|
||||||
--r-selection-background-color: #d33682;
|
--r-selection-background-color: #d33682;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/night.css
vendored
6
dist/theme/night.css
vendored
@@ -33,12 +33,10 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #e7ad52;
|
--r-link-color: #e7ad52;
|
||||||
--r-link-color-dark: rgb(225.2802030457, 153.4573604061, 40.7697969543);
|
--r-link-color-dark: #d08a1d;
|
||||||
--r-link-color-hover: rgb(235.8, 189.4, 116.6);
|
--r-link-color-hover: #f3d7ac;
|
||||||
--r-selection-background-color: #e7ad52;
|
--r-selection-background-color: #e7ad52;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/serif.css
vendored
6
dist/theme/serif.css
vendored
@@ -36,12 +36,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #51483D;
|
--r-link-color: #51483D;
|
||||||
--r-link-color-dark: rgb(68.85, 61.2, 51.85);
|
--r-link-color-dark: #25211c;
|
||||||
--r-link-color-hover: rgb(122.9830985915, 109.3183098592, 92.6169014085);
|
--r-link-color-hover: #8b7c69;
|
||||||
--r-selection-background-color: #26351C;
|
--r-selection-background-color: #26351C;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/simple.css
vendored
6
dist/theme/simple.css
vendored
@@ -35,12 +35,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #00008B;
|
--r-link-color: #00008B;
|
||||||
--r-link-color-dark: rgb(0, 0, 118.15);
|
--r-link-color-dark: #00003f;
|
||||||
--r-link-color-hover: rgb(0, 0, 213.2);
|
--r-link-color-hover: #0000f1;
|
||||||
--r-selection-background-color: rgba(0, 0, 0, 0.99);
|
--r-selection-background-color: rgba(0, 0, 0, 0.99);
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/sky.css
vendored
6
dist/theme/sky.css
vendored
@@ -37,12 +37,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #3b759e;
|
--r-link-color: #3b759e;
|
||||||
--r-link-color-dark: rgb(50.15, 99.45, 134.3);
|
--r-link-color-dark: #264c66;
|
||||||
--r-link-color-hover: rgb(84.330875576, 146.9815668203, 191.269124424);
|
--r-link-color-hover: #74a7cb;
|
||||||
--r-selection-background-color: #134674;
|
--r-selection-background-color: #134674;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
6
dist/theme/solarized.css
vendored
6
dist/theme/solarized.css
vendored
@@ -36,12 +36,10 @@ html * {
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #268bd2;
|
--r-link-color: #268bd2;
|
||||||
--r-link-color-dark: rgb(32.3, 118.15, 178.5);
|
--r-link-color-dark: #1a6091;
|
||||||
--r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
|
--r-link-color-hover: #78b9e6;
|
||||||
--r-selection-background-color: #d33682;
|
--r-selection-background-color: #d33682;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
362
dist/theme/white-contrast.css
vendored
362
dist/theme/white-contrast.css
vendored
@@ -1,362 +0,0 @@
|
|||||||
/**
|
|
||||||
* White compact & high contrast reveal.js theme, with headers not in capitals.
|
|
||||||
*
|
|
||||||
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
|
|
||||||
*
|
|
||||||
* - Keep the source similar to black.css - for easy comparison.
|
|
||||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
|
||||||
*/
|
|
||||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
|
||||||
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* GLOBAL STYLES
|
|
||||||
*********************************************/
|
|
||||||
:root {
|
|
||||||
--r-background-color: #fff;
|
|
||||||
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-main-font-size: 42px;
|
|
||||||
--r-main-color: #000;
|
|
||||||
--r-block-margin: 20px;
|
|
||||||
--r-heading-margin: 0 0 20px 0;
|
|
||||||
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-heading-color: #000;
|
|
||||||
--r-heading-line-height: 1.2;
|
|
||||||
--r-heading-letter-spacing: normal;
|
|
||||||
--r-heading-text-transform: uppercase;
|
|
||||||
--r-heading-text-shadow: none;
|
|
||||||
--r-heading-font-weight: 600;
|
|
||||||
--r-heading1-text-shadow: none;
|
|
||||||
--r-heading1-size: 2.5em;
|
|
||||||
--r-heading2-size: 1.6em;
|
|
||||||
--r-heading3-size: 1.3em;
|
|
||||||
--r-heading4-size: 1em;
|
|
||||||
--r-code-font: monospace;
|
|
||||||
--r-link-color: #2a76dd;
|
|
||||||
--r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
|
|
||||||
--r-link-color-hover: rgb(73.95, 138.55, 226.1);
|
|
||||||
--r-selection-background-color: rgb(95.25, 152.25, 229.5);
|
|
||||||
--r-selection-color: #fff;
|
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport {
|
|
||||||
background: #fff;
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
font-family: var(--r-main-font);
|
|
||||||
font-size: var(--r-main-font-size);
|
|
||||||
font-weight: normal;
|
|
||||||
color: var(--r-main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::-moz-selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides section,
|
|
||||||
.reveal .slides section > section {
|
|
||||||
line-height: 1.3;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* HEADERS
|
|
||||||
*********************************************/
|
|
||||||
.reveal h1,
|
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: var(--r-heading-margin);
|
|
||||||
color: var(--r-heading-color);
|
|
||||||
font-family: var(--r-heading-font);
|
|
||||||
font-weight: var(--r-heading-font-weight);
|
|
||||||
line-height: var(--r-heading-line-height);
|
|
||||||
letter-spacing: var(--r-heading-letter-spacing);
|
|
||||||
text-transform: var(--r-heading-text-transform);
|
|
||||||
text-shadow: var(--r-heading-text-shadow);
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
font-size: var(--r-heading1-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h2 {
|
|
||||||
font-size: var(--r-heading2-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h3 {
|
|
||||||
font-size: var(--r-heading3-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h4 {
|
|
||||||
font-size: var(--r-heading4-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
text-shadow: var(--r-heading1-text-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* OTHER
|
|
||||||
*********************************************/
|
|
||||||
.reveal p {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove trailing margins after titles */
|
|
||||||
.reveal h1:last-child,
|
|
||||||
.reveal h2:last-child,
|
|
||||||
.reveal h3:last-child,
|
|
||||||
.reveal h4:last-child,
|
|
||||||
.reveal h5:last-child,
|
|
||||||
.reveal h6:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
|
||||||
.reveal img,
|
|
||||||
.reveal video,
|
|
||||||
.reveal iframe {
|
|
||||||
max-width: 95%;
|
|
||||||
max-height: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal strong,
|
|
||||||
.reveal b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol,
|
|
||||||
.reveal dl,
|
|
||||||
.reveal ul {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul {
|
|
||||||
list-style-type: square;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul,
|
|
||||||
.reveal ul ol,
|
|
||||||
.reveal ol ol,
|
|
||||||
.reveal ol ul {
|
|
||||||
display: block;
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dd {
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 70%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
padding: 5px;
|
|
||||||
font-style: italic;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote p:first-child,
|
|
||||||
.reveal blockquote p:last-child {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal q {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 90%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 0.55em;
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
line-height: 1.2em;
|
|
||||||
word-wrap: break-word;
|
|
||||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal code {
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
text-transform: none;
|
|
||||||
tab-size: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre code {
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper code {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table {
|
|
||||||
margin: auto;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th,
|
|
||||||
.reveal table td {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=center],
|
|
||||||
.reveal table td[align=center] {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=right],
|
|
||||||
.reveal table td[align=right] {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table tbody tr:last-child th,
|
|
||||||
.reveal table tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sup {
|
|
||||||
vertical-align: super;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sub {
|
|
||||||
vertical-align: sub;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.6em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small * {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal img {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* LINKS
|
|
||||||
*********************************************/
|
|
||||||
.reveal a {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover {
|
|
||||||
color: var(--r-link-color-hover);
|
|
||||||
text-shadow: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .roll span:after {
|
|
||||||
color: #fff;
|
|
||||||
background: var(--r-link-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* Frame helper
|
|
||||||
*********************************************/
|
|
||||||
.reveal .r-frame {
|
|
||||||
border: 4px solid var(--r-main-color);
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a .r-frame {
|
|
||||||
transition: all 0.15s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover .r-frame {
|
|
||||||
border-color: var(--r-link-color);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* NAVIGATION CONTROLS
|
|
||||||
*********************************************/
|
|
||||||
.reveal .controls {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PROGRESS BAR
|
|
||||||
*********************************************/
|
|
||||||
.reveal .progress {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PRINT BACKGROUND
|
|
||||||
*********************************************/
|
|
||||||
@media print {
|
|
||||||
.backgrounds {
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
8
dist/theme/white.css
vendored
8
dist/theme/white.css
vendored
@@ -32,12 +32,10 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
|
|||||||
--r-heading4-size: 1em;
|
--r-heading4-size: 1em;
|
||||||
--r-code-font: monospace;
|
--r-code-font: monospace;
|
||||||
--r-link-color: #2a76dd;
|
--r-link-color: #2a76dd;
|
||||||
--r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
|
--r-link-color-dark: #1a53a1;
|
||||||
--r-link-color-hover: rgb(73.95, 138.55, 226.1);
|
--r-link-color-hover: #6ca0e8;
|
||||||
--r-selection-background-color: rgb(95.25, 152.25, 229.5);
|
--r-selection-background-color: #98bdef;
|
||||||
--r-selection-color: #fff;
|
--r-selection-color: #fff;
|
||||||
--r-overlay-element-bg-color: 0, 0, 0;
|
|
||||||
--r-overlay-element-fg-color: 240, 240, 240;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal-viewport {
|
.reveal-viewport {
|
||||||
|
|||||||
@@ -1,360 +0,0 @@
|
|||||||
/**
|
|
||||||
* White compact & high contrast reveal.js theme, with headers not in capitals.
|
|
||||||
*
|
|
||||||
* By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
|
|
||||||
*
|
|
||||||
* - Keep the source similar to black.css - for easy comparison.
|
|
||||||
* - $mainFontSize controls code blocks, too (although under some ratio).
|
|
||||||
*/
|
|
||||||
@import url(./fonts/source-sans-pro/source-sans-pro.css);
|
|
||||||
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* GLOBAL STYLES
|
|
||||||
*********************************************/
|
|
||||||
:root {
|
|
||||||
--r-background-color: #fff;
|
|
||||||
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-main-font-size: 25px;
|
|
||||||
--r-main-color: #000;
|
|
||||||
--r-block-margin: 20px;
|
|
||||||
--r-heading-margin: 0 0 20px 0;
|
|
||||||
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
|
|
||||||
--r-heading-color: #000;
|
|
||||||
--r-heading-line-height: 1.2;
|
|
||||||
--r-heading-letter-spacing: normal;
|
|
||||||
--r-heading-text-transform: none;
|
|
||||||
--r-heading-text-shadow: none;
|
|
||||||
--r-heading-font-weight: 450;
|
|
||||||
--r-heading1-text-shadow: none;
|
|
||||||
--r-heading1-size: 2.5em;
|
|
||||||
--r-heading2-size: 1.6em;
|
|
||||||
--r-heading3-size: 1.3em;
|
|
||||||
--r-heading4-size: 1em;
|
|
||||||
--r-code-font: monospace;
|
|
||||||
--r-link-color: #2a76dd;
|
|
||||||
--r-link-color-dark: #1a53a1;
|
|
||||||
--r-link-color-hover: #6ca0e8;
|
|
||||||
--r-selection-background-color: #98bdef;
|
|
||||||
--r-selection-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport {
|
|
||||||
background: #fff;
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
font-family: var(--r-main-font);
|
|
||||||
font-size: var(--r-main-font-size);
|
|
||||||
font-weight: normal;
|
|
||||||
color: var(--r-main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ::-moz-selection {
|
|
||||||
color: var(--r-selection-color);
|
|
||||||
background: var(--r-selection-background-color);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides section,
|
|
||||||
.reveal .slides section > section {
|
|
||||||
line-height: 1.3;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* HEADERS
|
|
||||||
*********************************************/
|
|
||||||
.reveal h1,
|
|
||||||
.reveal h2,
|
|
||||||
.reveal h3,
|
|
||||||
.reveal h4,
|
|
||||||
.reveal h5,
|
|
||||||
.reveal h6 {
|
|
||||||
margin: var(--r-heading-margin);
|
|
||||||
color: var(--r-heading-color);
|
|
||||||
font-family: var(--r-heading-font);
|
|
||||||
font-weight: var(--r-heading-font-weight);
|
|
||||||
line-height: var(--r-heading-line-height);
|
|
||||||
letter-spacing: var(--r-heading-letter-spacing);
|
|
||||||
text-transform: var(--r-heading-text-transform);
|
|
||||||
text-shadow: var(--r-heading-text-shadow);
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
font-size: var(--r-heading1-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h2 {
|
|
||||||
font-size: var(--r-heading2-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h3 {
|
|
||||||
font-size: var(--r-heading3-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h4 {
|
|
||||||
font-size: var(--r-heading4-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
text-shadow: var(--r-heading1-text-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* OTHER
|
|
||||||
*********************************************/
|
|
||||||
.reveal p {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove trailing margins after titles */
|
|
||||||
.reveal h1:last-child,
|
|
||||||
.reveal h2:last-child,
|
|
||||||
.reveal h3:last-child,
|
|
||||||
.reveal h4:last-child,
|
|
||||||
.reveal h5:last-child,
|
|
||||||
.reveal h6:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure certain elements are never larger than the slide itself */
|
|
||||||
.reveal img,
|
|
||||||
.reveal video,
|
|
||||||
.reveal iframe {
|
|
||||||
max-width: 95%;
|
|
||||||
max-height: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal strong,
|
|
||||||
.reveal b {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol,
|
|
||||||
.reveal dl,
|
|
||||||
.reveal ul {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: left;
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul {
|
|
||||||
list-style-type: square;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul ul {
|
|
||||||
list-style-type: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul,
|
|
||||||
.reveal ul ol,
|
|
||||||
.reveal ol ol,
|
|
||||||
.reveal ol ul {
|
|
||||||
display: block;
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal dd {
|
|
||||||
margin-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 70%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
padding: 5px;
|
|
||||||
font-style: italic;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal blockquote p:first-child,
|
|
||||||
.reveal blockquote p:last-child {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal q {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 90%;
|
|
||||||
margin: var(--r-block-margin) auto;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 0.55em;
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
line-height: 1.2em;
|
|
||||||
word-wrap: break-word;
|
|
||||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal code {
|
|
||||||
font-family: var(--r-code-font);
|
|
||||||
text-transform: none;
|
|
||||||
tab-size: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal pre code {
|
|
||||||
display: block;
|
|
||||||
padding: 5px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
word-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .code-wrapper code {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table {
|
|
||||||
margin: auto;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th,
|
|
||||||
.reveal table td {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
|
||||||
border-bottom: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=center],
|
|
||||||
.reveal table td[align=center] {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table th[align=right],
|
|
||||||
.reveal table td[align=right] {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal table tbody tr:last-child th,
|
|
||||||
.reveal table tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sup {
|
|
||||||
vertical-align: super;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal sub {
|
|
||||||
vertical-align: sub;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.6em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal small * {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal img {
|
|
||||||
margin: var(--r-block-margin) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* LINKS
|
|
||||||
*********************************************/
|
|
||||||
.reveal a {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover {
|
|
||||||
color: var(--r-link-color-hover);
|
|
||||||
text-shadow: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .roll span:after {
|
|
||||||
color: #fff;
|
|
||||||
background: var(--r-link-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* Frame helper
|
|
||||||
*********************************************/
|
|
||||||
.reveal .r-frame {
|
|
||||||
border: 4px solid var(--r-main-color);
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a .r-frame {
|
|
||||||
transition: all 0.15s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal a:hover .r-frame {
|
|
||||||
border-color: var(--r-link-color);
|
|
||||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* NAVIGATION CONTROLS
|
|
||||||
*********************************************/
|
|
||||||
.reveal .controls {
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PROGRESS BAR
|
|
||||||
*********************************************/
|
|
||||||
.reveal .progress {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
color: var(--r-link-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* PRINT BACKGROUND
|
|
||||||
*********************************************/
|
|
||||||
@media print {
|
|
||||||
.backgrounds {
|
|
||||||
background-color: var(--r-background-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,526 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>reveal.js - 500 slides</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../dist/reveal.css">
|
|
||||||
<link rel="stylesheet" href="../dist/theme/black.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="reveal">
|
|
||||||
<div class="slides">
|
|
||||||
<section><h1>1</h1></section>
|
|
||||||
<section><h1>2</h1></section>
|
|
||||||
<section><h1>3</h1></section>
|
|
||||||
<section><h1>4</h1></section>
|
|
||||||
<section><h1>5</h1></section>
|
|
||||||
<section><h1>6</h1></section>
|
|
||||||
<section><h1>7</h1></section>
|
|
||||||
<section><h1>8</h1></section>
|
|
||||||
<section><h1>9</h1></section>
|
|
||||||
<section><h1>10</h1></section>
|
|
||||||
<section><h1>11</h1></section>
|
|
||||||
<section><h1>12</h1></section>
|
|
||||||
<section><h1>13</h1></section>
|
|
||||||
<section><h1>14</h1></section>
|
|
||||||
<section><h1>15</h1></section>
|
|
||||||
<section><h1>16</h1></section>
|
|
||||||
<section><h1>17</h1></section>
|
|
||||||
<section><h1>18</h1></section>
|
|
||||||
<section><h1>19</h1></section>
|
|
||||||
<section><h1>20</h1></section>
|
|
||||||
<section><h1>21</h1></section>
|
|
||||||
<section><h1>22</h1></section>
|
|
||||||
<section><h1>23</h1></section>
|
|
||||||
<section><h1>24</h1></section>
|
|
||||||
<section><h1>25</h1></section>
|
|
||||||
<section><h1>26</h1></section>
|
|
||||||
<section><h1>27</h1></section>
|
|
||||||
<section><h1>28</h1></section>
|
|
||||||
<section><h1>29</h1></section>
|
|
||||||
<section><h1>30</h1></section>
|
|
||||||
<section><h1>31</h1></section>
|
|
||||||
<section><h1>32</h1></section>
|
|
||||||
<section><h1>33</h1></section>
|
|
||||||
<section><h1>34</h1></section>
|
|
||||||
<section><h1>35</h1></section>
|
|
||||||
<section><h1>36</h1></section>
|
|
||||||
<section><h1>37</h1></section>
|
|
||||||
<section><h1>38</h1></section>
|
|
||||||
<section><h1>39</h1></section>
|
|
||||||
<section><h1>40</h1></section>
|
|
||||||
<section><h1>41</h1></section>
|
|
||||||
<section><h1>42</h1></section>
|
|
||||||
<section><h1>43</h1></section>
|
|
||||||
<section><h1>44</h1></section>
|
|
||||||
<section><h1>45</h1></section>
|
|
||||||
<section><h1>46</h1></section>
|
|
||||||
<section><h1>47</h1></section>
|
|
||||||
<section><h1>48</h1></section>
|
|
||||||
<section><h1>49</h1></section>
|
|
||||||
<section><h1>50</h1></section>
|
|
||||||
<section><h1>51</h1></section>
|
|
||||||
<section><h1>52</h1></section>
|
|
||||||
<section><h1>53</h1></section>
|
|
||||||
<section><h1>54</h1></section>
|
|
||||||
<section><h1>55</h1></section>
|
|
||||||
<section><h1>56</h1></section>
|
|
||||||
<section><h1>57</h1></section>
|
|
||||||
<section><h1>58</h1></section>
|
|
||||||
<section><h1>59</h1></section>
|
|
||||||
<section><h1>60</h1></section>
|
|
||||||
<section><h1>61</h1></section>
|
|
||||||
<section><h1>62</h1></section>
|
|
||||||
<section><h1>63</h1></section>
|
|
||||||
<section><h1>64</h1></section>
|
|
||||||
<section><h1>65</h1></section>
|
|
||||||
<section><h1>66</h1></section>
|
|
||||||
<section><h1>67</h1></section>
|
|
||||||
<section><h1>68</h1></section>
|
|
||||||
<section><h1>69</h1></section>
|
|
||||||
<section><h1>70</h1></section>
|
|
||||||
<section><h1>71</h1></section>
|
|
||||||
<section><h1>72</h1></section>
|
|
||||||
<section><h1>73</h1></section>
|
|
||||||
<section><h1>74</h1></section>
|
|
||||||
<section><h1>75</h1></section>
|
|
||||||
<section><h1>76</h1></section>
|
|
||||||
<section><h1>77</h1></section>
|
|
||||||
<section><h1>78</h1></section>
|
|
||||||
<section><h1>79</h1></section>
|
|
||||||
<section><h1>80</h1></section>
|
|
||||||
<section><h1>81</h1></section>
|
|
||||||
<section><h1>82</h1></section>
|
|
||||||
<section><h1>83</h1></section>
|
|
||||||
<section><h1>84</h1></section>
|
|
||||||
<section><h1>85</h1></section>
|
|
||||||
<section><h1>86</h1></section>
|
|
||||||
<section><h1>87</h1></section>
|
|
||||||
<section><h1>88</h1></section>
|
|
||||||
<section><h1>89</h1></section>
|
|
||||||
<section><h1>90</h1></section>
|
|
||||||
<section><h1>91</h1></section>
|
|
||||||
<section><h1>92</h1></section>
|
|
||||||
<section><h1>93</h1></section>
|
|
||||||
<section><h1>94</h1></section>
|
|
||||||
<section><h1>95</h1></section>
|
|
||||||
<section><h1>96</h1></section>
|
|
||||||
<section><h1>97</h1></section>
|
|
||||||
<section><h1>98</h1></section>
|
|
||||||
<section><h1>99</h1></section>
|
|
||||||
<section><h1>100</h1></section>
|
|
||||||
<section><h1>101</h1></section>
|
|
||||||
<section><h1>102</h1></section>
|
|
||||||
<section><h1>103</h1></section>
|
|
||||||
<section><h1>104</h1></section>
|
|
||||||
<section><h1>105</h1></section>
|
|
||||||
<section><h1>106</h1></section>
|
|
||||||
<section><h1>107</h1></section>
|
|
||||||
<section><h1>108</h1></section>
|
|
||||||
<section><h1>109</h1></section>
|
|
||||||
<section><h1>110</h1></section>
|
|
||||||
<section><h1>111</h1></section>
|
|
||||||
<section><h1>112</h1></section>
|
|
||||||
<section><h1>113</h1></section>
|
|
||||||
<section><h1>114</h1></section>
|
|
||||||
<section><h1>115</h1></section>
|
|
||||||
<section><h1>116</h1></section>
|
|
||||||
<section><h1>117</h1></section>
|
|
||||||
<section><h1>118</h1></section>
|
|
||||||
<section><h1>119</h1></section>
|
|
||||||
<section><h1>120</h1></section>
|
|
||||||
<section><h1>121</h1></section>
|
|
||||||
<section><h1>122</h1></section>
|
|
||||||
<section><h1>123</h1></section>
|
|
||||||
<section><h1>124</h1></section>
|
|
||||||
<section><h1>125</h1></section>
|
|
||||||
<section><h1>126</h1></section>
|
|
||||||
<section><h1>127</h1></section>
|
|
||||||
<section><h1>128</h1></section>
|
|
||||||
<section><h1>129</h1></section>
|
|
||||||
<section><h1>130</h1></section>
|
|
||||||
<section><h1>131</h1></section>
|
|
||||||
<section><h1>132</h1></section>
|
|
||||||
<section><h1>133</h1></section>
|
|
||||||
<section><h1>134</h1></section>
|
|
||||||
<section><h1>135</h1></section>
|
|
||||||
<section><h1>136</h1></section>
|
|
||||||
<section><h1>137</h1></section>
|
|
||||||
<section><h1>138</h1></section>
|
|
||||||
<section><h1>139</h1></section>
|
|
||||||
<section><h1>140</h1></section>
|
|
||||||
<section><h1>141</h1></section>
|
|
||||||
<section><h1>142</h1></section>
|
|
||||||
<section><h1>143</h1></section>
|
|
||||||
<section><h1>144</h1></section>
|
|
||||||
<section><h1>145</h1></section>
|
|
||||||
<section><h1>146</h1></section>
|
|
||||||
<section><h1>147</h1></section>
|
|
||||||
<section><h1>148</h1></section>
|
|
||||||
<section><h1>149</h1></section>
|
|
||||||
<section><h1>150</h1></section>
|
|
||||||
<section><h1>151</h1></section>
|
|
||||||
<section><h1>152</h1></section>
|
|
||||||
<section><h1>153</h1></section>
|
|
||||||
<section><h1>154</h1></section>
|
|
||||||
<section><h1>155</h1></section>
|
|
||||||
<section><h1>156</h1></section>
|
|
||||||
<section><h1>157</h1></section>
|
|
||||||
<section><h1>158</h1></section>
|
|
||||||
<section><h1>159</h1></section>
|
|
||||||
<section><h1>160</h1></section>
|
|
||||||
<section><h1>161</h1></section>
|
|
||||||
<section><h1>162</h1></section>
|
|
||||||
<section><h1>163</h1></section>
|
|
||||||
<section><h1>164</h1></section>
|
|
||||||
<section><h1>165</h1></section>
|
|
||||||
<section><h1>166</h1></section>
|
|
||||||
<section><h1>167</h1></section>
|
|
||||||
<section><h1>168</h1></section>
|
|
||||||
<section><h1>169</h1></section>
|
|
||||||
<section><h1>170</h1></section>
|
|
||||||
<section><h1>171</h1></section>
|
|
||||||
<section><h1>172</h1></section>
|
|
||||||
<section><h1>173</h1></section>
|
|
||||||
<section><h1>174</h1></section>
|
|
||||||
<section><h1>175</h1></section>
|
|
||||||
<section><h1>176</h1></section>
|
|
||||||
<section><h1>177</h1></section>
|
|
||||||
<section><h1>178</h1></section>
|
|
||||||
<section><h1>179</h1></section>
|
|
||||||
<section><h1>180</h1></section>
|
|
||||||
<section><h1>181</h1></section>
|
|
||||||
<section><h1>182</h1></section>
|
|
||||||
<section><h1>183</h1></section>
|
|
||||||
<section><h1>184</h1></section>
|
|
||||||
<section><h1>185</h1></section>
|
|
||||||
<section><h1>186</h1></section>
|
|
||||||
<section><h1>187</h1></section>
|
|
||||||
<section><h1>188</h1></section>
|
|
||||||
<section><h1>189</h1></section>
|
|
||||||
<section><h1>190</h1></section>
|
|
||||||
<section><h1>191</h1></section>
|
|
||||||
<section><h1>192</h1></section>
|
|
||||||
<section><h1>193</h1></section>
|
|
||||||
<section><h1>194</h1></section>
|
|
||||||
<section><h1>195</h1></section>
|
|
||||||
<section><h1>196</h1></section>
|
|
||||||
<section><h1>197</h1></section>
|
|
||||||
<section><h1>198</h1></section>
|
|
||||||
<section><h1>199</h1></section>
|
|
||||||
<section><h1>200</h1></section>
|
|
||||||
<section><h1>201</h1></section>
|
|
||||||
<section><h1>202</h1></section>
|
|
||||||
<section><h1>203</h1></section>
|
|
||||||
<section><h1>204</h1></section>
|
|
||||||
<section><h1>205</h1></section>
|
|
||||||
<section><h1>206</h1></section>
|
|
||||||
<section><h1>207</h1></section>
|
|
||||||
<section><h1>208</h1></section>
|
|
||||||
<section><h1>209</h1></section>
|
|
||||||
<section><h1>210</h1></section>
|
|
||||||
<section><h1>211</h1></section>
|
|
||||||
<section><h1>212</h1></section>
|
|
||||||
<section><h1>213</h1></section>
|
|
||||||
<section><h1>214</h1></section>
|
|
||||||
<section><h1>215</h1></section>
|
|
||||||
<section><h1>216</h1></section>
|
|
||||||
<section><h1>217</h1></section>
|
|
||||||
<section><h1>218</h1></section>
|
|
||||||
<section><h1>219</h1></section>
|
|
||||||
<section><h1>220</h1></section>
|
|
||||||
<section><h1>221</h1></section>
|
|
||||||
<section><h1>222</h1></section>
|
|
||||||
<section><h1>223</h1></section>
|
|
||||||
<section><h1>224</h1></section>
|
|
||||||
<section><h1>225</h1></section>
|
|
||||||
<section><h1>226</h1></section>
|
|
||||||
<section><h1>227</h1></section>
|
|
||||||
<section><h1>228</h1></section>
|
|
||||||
<section><h1>229</h1></section>
|
|
||||||
<section><h1>230</h1></section>
|
|
||||||
<section><h1>231</h1></section>
|
|
||||||
<section><h1>232</h1></section>
|
|
||||||
<section><h1>233</h1></section>
|
|
||||||
<section><h1>234</h1></section>
|
|
||||||
<section><h1>235</h1></section>
|
|
||||||
<section><h1>236</h1></section>
|
|
||||||
<section><h1>237</h1></section>
|
|
||||||
<section><h1>238</h1></section>
|
|
||||||
<section><h1>239</h1></section>
|
|
||||||
<section><h1>240</h1></section>
|
|
||||||
<section><h1>241</h1></section>
|
|
||||||
<section><h1>242</h1></section>
|
|
||||||
<section><h1>243</h1></section>
|
|
||||||
<section><h1>244</h1></section>
|
|
||||||
<section><h1>245</h1></section>
|
|
||||||
<section><h1>246</h1></section>
|
|
||||||
<section><h1>247</h1></section>
|
|
||||||
<section><h1>248</h1></section>
|
|
||||||
<section><h1>249</h1></section>
|
|
||||||
<section><h1>250</h1></section>
|
|
||||||
<section><h1>251</h1></section>
|
|
||||||
<section><h1>252</h1></section>
|
|
||||||
<section><h1>253</h1></section>
|
|
||||||
<section><h1>254</h1></section>
|
|
||||||
<section><h1>255</h1></section>
|
|
||||||
<section><h1>256</h1></section>
|
|
||||||
<section><h1>257</h1></section>
|
|
||||||
<section><h1>258</h1></section>
|
|
||||||
<section><h1>259</h1></section>
|
|
||||||
<section><h1>260</h1></section>
|
|
||||||
<section><h1>261</h1></section>
|
|
||||||
<section><h1>262</h1></section>
|
|
||||||
<section><h1>263</h1></section>
|
|
||||||
<section><h1>264</h1></section>
|
|
||||||
<section><h1>265</h1></section>
|
|
||||||
<section><h1>266</h1></section>
|
|
||||||
<section><h1>267</h1></section>
|
|
||||||
<section><h1>268</h1></section>
|
|
||||||
<section><h1>269</h1></section>
|
|
||||||
<section><h1>270</h1></section>
|
|
||||||
<section><h1>271</h1></section>
|
|
||||||
<section><h1>272</h1></section>
|
|
||||||
<section><h1>273</h1></section>
|
|
||||||
<section><h1>274</h1></section>
|
|
||||||
<section><h1>275</h1></section>
|
|
||||||
<section><h1>276</h1></section>
|
|
||||||
<section><h1>277</h1></section>
|
|
||||||
<section><h1>278</h1></section>
|
|
||||||
<section><h1>279</h1></section>
|
|
||||||
<section><h1>280</h1></section>
|
|
||||||
<section><h1>281</h1></section>
|
|
||||||
<section><h1>282</h1></section>
|
|
||||||
<section><h1>283</h1></section>
|
|
||||||
<section><h1>284</h1></section>
|
|
||||||
<section><h1>285</h1></section>
|
|
||||||
<section><h1>286</h1></section>
|
|
||||||
<section><h1>287</h1></section>
|
|
||||||
<section><h1>288</h1></section>
|
|
||||||
<section><h1>289</h1></section>
|
|
||||||
<section><h1>290</h1></section>
|
|
||||||
<section><h1>291</h1></section>
|
|
||||||
<section><h1>292</h1></section>
|
|
||||||
<section><h1>293</h1></section>
|
|
||||||
<section><h1>294</h1></section>
|
|
||||||
<section><h1>295</h1></section>
|
|
||||||
<section><h1>296</h1></section>
|
|
||||||
<section><h1>297</h1></section>
|
|
||||||
<section><h1>298</h1></section>
|
|
||||||
<section><h1>299</h1></section>
|
|
||||||
<section><h1>300</h1></section>
|
|
||||||
<section><h1>301</h1></section>
|
|
||||||
<section><h1>302</h1></section>
|
|
||||||
<section><h1>303</h1></section>
|
|
||||||
<section><h1>304</h1></section>
|
|
||||||
<section><h1>305</h1></section>
|
|
||||||
<section><h1>306</h1></section>
|
|
||||||
<section><h1>307</h1></section>
|
|
||||||
<section><h1>308</h1></section>
|
|
||||||
<section><h1>309</h1></section>
|
|
||||||
<section><h1>310</h1></section>
|
|
||||||
<section><h1>311</h1></section>
|
|
||||||
<section><h1>312</h1></section>
|
|
||||||
<section><h1>313</h1></section>
|
|
||||||
<section><h1>314</h1></section>
|
|
||||||
<section><h1>315</h1></section>
|
|
||||||
<section><h1>316</h1></section>
|
|
||||||
<section><h1>317</h1></section>
|
|
||||||
<section><h1>318</h1></section>
|
|
||||||
<section><h1>319</h1></section>
|
|
||||||
<section><h1>320</h1></section>
|
|
||||||
<section><h1>321</h1></section>
|
|
||||||
<section><h1>322</h1></section>
|
|
||||||
<section><h1>323</h1></section>
|
|
||||||
<section><h1>324</h1></section>
|
|
||||||
<section><h1>325</h1></section>
|
|
||||||
<section><h1>326</h1></section>
|
|
||||||
<section><h1>327</h1></section>
|
|
||||||
<section><h1>328</h1></section>
|
|
||||||
<section><h1>329</h1></section>
|
|
||||||
<section><h1>330</h1></section>
|
|
||||||
<section><h1>331</h1></section>
|
|
||||||
<section><h1>332</h1></section>
|
|
||||||
<section><h1>333</h1></section>
|
|
||||||
<section><h1>334</h1></section>
|
|
||||||
<section><h1>335</h1></section>
|
|
||||||
<section><h1>336</h1></section>
|
|
||||||
<section><h1>337</h1></section>
|
|
||||||
<section><h1>338</h1></section>
|
|
||||||
<section><h1>339</h1></section>
|
|
||||||
<section><h1>340</h1></section>
|
|
||||||
<section><h1>341</h1></section>
|
|
||||||
<section><h1>342</h1></section>
|
|
||||||
<section><h1>343</h1></section>
|
|
||||||
<section><h1>344</h1></section>
|
|
||||||
<section><h1>345</h1></section>
|
|
||||||
<section><h1>346</h1></section>
|
|
||||||
<section><h1>347</h1></section>
|
|
||||||
<section><h1>348</h1></section>
|
|
||||||
<section><h1>349</h1></section>
|
|
||||||
<section><h1>350</h1></section>
|
|
||||||
<section><h1>351</h1></section>
|
|
||||||
<section><h1>352</h1></section>
|
|
||||||
<section><h1>353</h1></section>
|
|
||||||
<section><h1>354</h1></section>
|
|
||||||
<section><h1>355</h1></section>
|
|
||||||
<section><h1>356</h1></section>
|
|
||||||
<section><h1>357</h1></section>
|
|
||||||
<section><h1>358</h1></section>
|
|
||||||
<section><h1>359</h1></section>
|
|
||||||
<section><h1>360</h1></section>
|
|
||||||
<section><h1>361</h1></section>
|
|
||||||
<section><h1>362</h1></section>
|
|
||||||
<section><h1>363</h1></section>
|
|
||||||
<section><h1>364</h1></section>
|
|
||||||
<section><h1>365</h1></section>
|
|
||||||
<section><h1>366</h1></section>
|
|
||||||
<section><h1>367</h1></section>
|
|
||||||
<section><h1>368</h1></section>
|
|
||||||
<section><h1>369</h1></section>
|
|
||||||
<section><h1>370</h1></section>
|
|
||||||
<section><h1>371</h1></section>
|
|
||||||
<section><h1>372</h1></section>
|
|
||||||
<section><h1>373</h1></section>
|
|
||||||
<section><h1>374</h1></section>
|
|
||||||
<section><h1>375</h1></section>
|
|
||||||
<section><h1>376</h1></section>
|
|
||||||
<section><h1>377</h1></section>
|
|
||||||
<section><h1>378</h1></section>
|
|
||||||
<section><h1>379</h1></section>
|
|
||||||
<section><h1>380</h1></section>
|
|
||||||
<section><h1>381</h1></section>
|
|
||||||
<section><h1>382</h1></section>
|
|
||||||
<section><h1>383</h1></section>
|
|
||||||
<section><h1>384</h1></section>
|
|
||||||
<section><h1>385</h1></section>
|
|
||||||
<section><h1>386</h1></section>
|
|
||||||
<section><h1>387</h1></section>
|
|
||||||
<section><h1>388</h1></section>
|
|
||||||
<section><h1>389</h1></section>
|
|
||||||
<section><h1>390</h1></section>
|
|
||||||
<section><h1>391</h1></section>
|
|
||||||
<section><h1>392</h1></section>
|
|
||||||
<section><h1>393</h1></section>
|
|
||||||
<section><h1>394</h1></section>
|
|
||||||
<section><h1>395</h1></section>
|
|
||||||
<section><h1>396</h1></section>
|
|
||||||
<section><h1>397</h1></section>
|
|
||||||
<section><h1>398</h1></section>
|
|
||||||
<section><h1>399</h1></section>
|
|
||||||
<section><h1>400</h1></section>
|
|
||||||
<section><h1>401</h1></section>
|
|
||||||
<section><h1>402</h1></section>
|
|
||||||
<section><h1>403</h1></section>
|
|
||||||
<section><h1>404</h1></section>
|
|
||||||
<section><h1>405</h1></section>
|
|
||||||
<section><h1>406</h1></section>
|
|
||||||
<section><h1>407</h1></section>
|
|
||||||
<section><h1>408</h1></section>
|
|
||||||
<section><h1>409</h1></section>
|
|
||||||
<section><h1>410</h1></section>
|
|
||||||
<section><h1>411</h1></section>
|
|
||||||
<section><h1>412</h1></section>
|
|
||||||
<section><h1>413</h1></section>
|
|
||||||
<section><h1>414</h1></section>
|
|
||||||
<section><h1>415</h1></section>
|
|
||||||
<section><h1>416</h1></section>
|
|
||||||
<section><h1>417</h1></section>
|
|
||||||
<section><h1>418</h1></section>
|
|
||||||
<section><h1>419</h1></section>
|
|
||||||
<section><h1>420</h1></section>
|
|
||||||
<section><h1>421</h1></section>
|
|
||||||
<section><h1>422</h1></section>
|
|
||||||
<section><h1>423</h1></section>
|
|
||||||
<section><h1>424</h1></section>
|
|
||||||
<section><h1>425</h1></section>
|
|
||||||
<section><h1>426</h1></section>
|
|
||||||
<section><h1>427</h1></section>
|
|
||||||
<section><h1>428</h1></section>
|
|
||||||
<section><h1>429</h1></section>
|
|
||||||
<section><h1>430</h1></section>
|
|
||||||
<section><h1>431</h1></section>
|
|
||||||
<section><h1>432</h1></section>
|
|
||||||
<section><h1>433</h1></section>
|
|
||||||
<section><h1>434</h1></section>
|
|
||||||
<section><h1>435</h1></section>
|
|
||||||
<section><h1>436</h1></section>
|
|
||||||
<section><h1>437</h1></section>
|
|
||||||
<section><h1>438</h1></section>
|
|
||||||
<section><h1>439</h1></section>
|
|
||||||
<section><h1>440</h1></section>
|
|
||||||
<section><h1>441</h1></section>
|
|
||||||
<section><h1>442</h1></section>
|
|
||||||
<section><h1>443</h1></section>
|
|
||||||
<section><h1>444</h1></section>
|
|
||||||
<section><h1>445</h1></section>
|
|
||||||
<section><h1>446</h1></section>
|
|
||||||
<section><h1>447</h1></section>
|
|
||||||
<section><h1>448</h1></section>
|
|
||||||
<section><h1>449</h1></section>
|
|
||||||
<section><h1>450</h1></section>
|
|
||||||
<section><h1>451</h1></section>
|
|
||||||
<section><h1>452</h1></section>
|
|
||||||
<section><h1>453</h1></section>
|
|
||||||
<section><h1>454</h1></section>
|
|
||||||
<section><h1>455</h1></section>
|
|
||||||
<section><h1>456</h1></section>
|
|
||||||
<section><h1>457</h1></section>
|
|
||||||
<section><h1>458</h1></section>
|
|
||||||
<section><h1>459</h1></section>
|
|
||||||
<section><h1>460</h1></section>
|
|
||||||
<section><h1>461</h1></section>
|
|
||||||
<section><h1>462</h1></section>
|
|
||||||
<section><h1>463</h1></section>
|
|
||||||
<section><h1>464</h1></section>
|
|
||||||
<section><h1>465</h1></section>
|
|
||||||
<section><h1>466</h1></section>
|
|
||||||
<section><h1>467</h1></section>
|
|
||||||
<section><h1>468</h1></section>
|
|
||||||
<section><h1>469</h1></section>
|
|
||||||
<section><h1>470</h1></section>
|
|
||||||
<section><h1>471</h1></section>
|
|
||||||
<section><h1>472</h1></section>
|
|
||||||
<section><h1>473</h1></section>
|
|
||||||
<section><h1>474</h1></section>
|
|
||||||
<section><h1>475</h1></section>
|
|
||||||
<section><h1>476</h1></section>
|
|
||||||
<section><h1>477</h1></section>
|
|
||||||
<section><h1>478</h1></section>
|
|
||||||
<section><h1>479</h1></section>
|
|
||||||
<section><h1>480</h1></section>
|
|
||||||
<section><h1>481</h1></section>
|
|
||||||
<section><h1>482</h1></section>
|
|
||||||
<section><h1>483</h1></section>
|
|
||||||
<section><h1>484</h1></section>
|
|
||||||
<section><h1>485</h1></section>
|
|
||||||
<section><h1>486</h1></section>
|
|
||||||
<section><h1>487</h1></section>
|
|
||||||
<section><h1>488</h1></section>
|
|
||||||
<section><h1>489</h1></section>
|
|
||||||
<section><h1>490</h1></section>
|
|
||||||
<section><h1>491</h1></section>
|
|
||||||
<section><h1>492</h1></section>
|
|
||||||
<section><h1>493</h1></section>
|
|
||||||
<section><h1>494</h1></section>
|
|
||||||
<section><h1>495</h1></section>
|
|
||||||
<section><h1>496</h1></section>
|
|
||||||
<section><h1>497</h1></section>
|
|
||||||
<section><h1>498</h1></section>
|
|
||||||
<section><h1>499</h1></section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../dist/reveal.js"></script>
|
|
||||||
<script>
|
|
||||||
Reveal.initialize({
|
|
||||||
transition: 'linear'
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -89,7 +89,7 @@
|
|||||||
<h2>Same background twice (2/2)</h2>
|
<h2>Same background twice (2/2)</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
|
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
|
||||||
<h2>Video background</h2>
|
<h2>Video background</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -1,144 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>reveal.js - Ligthbox</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../dist/reveal.css">
|
|
||||||
<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.reveal {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.reveal figure {
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.reveal figure img,
|
|
||||||
.reveal figure video {
|
|
||||||
margin: 0.25rem 0 0 0;
|
|
||||||
}
|
|
||||||
figcaption, a {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="reveal">
|
|
||||||
|
|
||||||
<div class="slides">
|
|
||||||
|
|
||||||
<section>
|
|
||||||
|
|
||||||
<h2>Preview Overlays</h2>
|
|
||||||
|
|
||||||
<div class="r-hstack items-start">
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Images</h5>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview with default settings:</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image>
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview with data-preview-fit="contain"</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview with data-preview-fit="cover"</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="cover">
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview another image (c)</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/b.png" data-preview-image="https://static.slid.es/images/alphabet/v1/c.png">
|
|
||||||
</figure>
|
|
||||||
<a href="#" data-preview-image="https://static.slid.es/images/alphabet/v1/x.png">
|
|
||||||
Preview image from a link.
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="width: 1px; height: 30vh; margin: 0 3rem;background-color: #999;"></div>
|
|
||||||
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Videos</h5>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview video</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/x.png" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview video</figcaption>
|
|
||||||
<video height="50" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
|
|
||||||
</figure>
|
|
||||||
<a href="#" data-preview-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
|
|
||||||
Preview video from a link.
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="width: 1px; height: 30vh; margin: 0 3rem;background-color: #999;"></div>
|
|
||||||
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Iframes</h5>
|
|
||||||
<a href="https://hakim.se">https://hakim.se | data-preview-link</a>
|
|
||||||
<a data-preview-link href="https://hakim.se">https://hakim.se | data-preview-link</a>
|
|
||||||
<br />
|
|
||||||
<a data-preview-link="false" href="https://hakim.se">https://hakim.se | data-preview-link=false</a>
|
|
||||||
<br />
|
|
||||||
<figure>
|
|
||||||
<figcaption>Preview link from an image</figcaption>
|
|
||||||
<img height="50" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-link="https://hakim.se">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section style="text-align: left;">
|
|
||||||
|
|
||||||
<h2>Lightbox</h2>
|
|
||||||
|
|
||||||
<div class="r-hstack items-start justify-start">
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Images</h5>
|
|
||||||
<figure>
|
|
||||||
<img height="100" src="https://static.slid.es/images/alphabet/v1/a.png" data-preview-image data-preview-fit="contain">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
|
|
||||||
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Videos</h5>
|
|
||||||
<figure>
|
|
||||||
<video height="100" src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-preview-video></video>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="width: 1px; height: 20vh; margin: 0 3rem;background-color: #222;"></div>
|
|
||||||
|
|
||||||
<div class="r-vstack items-start">
|
|
||||||
<h5>Iframes</h5>
|
|
||||||
<a style="font-size: 28px;" data-preview-link href="https://hakim.se">https://hakim.se</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../dist/reveal.js"></script>
|
|
||||||
<script>
|
|
||||||
Reveal.initialize({
|
|
||||||
previewLinks: false,
|
|
||||||
width: 1280,
|
|
||||||
height: 720
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -99,29 +99,10 @@
|
|||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- add optional line count offset, in this case 287 -->
|
|
||||||
<section data-markdown>
|
|
||||||
<script type="text/template">
|
|
||||||
## echo.c
|
|
||||||
|
|
||||||
```c [287: 2|4,6]
|
|
||||||
/* All of the options in this arg are valid, so handle them. */
|
|
||||||
p = arg + 1;
|
|
||||||
do {
|
|
||||||
if (*p == 'n')
|
|
||||||
nflag = 0;
|
|
||||||
if (*p == 'e')
|
|
||||||
eflag = '\\';
|
|
||||||
} while (*++p);
|
|
||||||
```
|
|
||||||
[source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
|
|
||||||
</script>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Images -->
|
<!-- Images -->
|
||||||
<section data-markdown>
|
<section data-markdown>
|
||||||
<script type="text/template">
|
<script type="text/template">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ Content 3.2
|
|||||||
|
|
||||||
## External 3.3 (Image)
|
## External 3.3 (Image)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## External 3.4 (Math)
|
## External 3.4 (Math)
|
||||||
|
|||||||
@@ -33,10 +33,10 @@
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Video</h2>
|
<h2>Video</h2>
|
||||||
<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-autoplay></video>
|
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4">
|
<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
|
||||||
<h2>Background Video</h2>
|
<h2>Background Video</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -1,120 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>reveal.js - Scroll View</title>
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../dist/reset.css">
|
|
||||||
<link rel="stylesheet" href="../dist/reveal.css">
|
|
||||||
<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
|
|
||||||
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="reveal">
|
|
||||||
|
|
||||||
<div class="slides">
|
|
||||||
|
|
||||||
<section><h1>Scroll View</h1></section>
|
|
||||||
<section data-background="indigo">
|
|
||||||
<h2>Scroll triggered fragments</h2>
|
|
||||||
<ul>
|
|
||||||
<li class="fragment fade-left">Step one</li>
|
|
||||||
<li class="fragment fade-left">Step two</li>
|
|
||||||
<li class="fragment fade-left">Step three</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section data-background-color="#fff"><h2>Scrollbar inverts<br>based on slide bg</h2></section>
|
|
||||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
|
||||||
<h2>Auto-Animate</h2>
|
|
||||||
<p>Scroll triggered auto-animations 😍</p>
|
|
||||||
<div class="r-hstack justify-center">
|
|
||||||
<div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
|
||||||
<div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
|
||||||
<div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
|
||||||
<div class="r-hstack justify-center">
|
|
||||||
<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
|
|
||||||
<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
|
|
||||||
<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
|
|
||||||
</div>
|
|
||||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
|
||||||
</section>
|
|
||||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
|
||||||
<div class="r-stack">
|
|
||||||
<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
|
|
||||||
<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
|
|
||||||
<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
|
|
||||||
</div>
|
|
||||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
|
||||||
</section>
|
|
||||||
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" id="gradient-bg">
|
|
||||||
<h2 data-id="code-title">Code highlights,<br />meet scroll triggers</h2>
|
|
||||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
|
|
||||||
function Example() {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>You clicked {count} times</p>
|
|
||||||
<button onClick={() => setCount(count + 1)}>
|
|
||||||
Click me
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SecondExample() {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>You clicked {count} times</p>
|
|
||||||
<button onClick={() => setCount(count + 1)}>
|
|
||||||
Click me
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</script></code></pre>
|
|
||||||
</section>
|
|
||||||
<section class="stack">
|
|
||||||
<section data-background="https://static.slid.es/reveal/image-placeholder.png" id="image-bg">
|
|
||||||
<h2>Image Backgrounds</h2>
|
|
||||||
</section>
|
|
||||||
<section data-background-video-muted data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
|
|
||||||
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
|
||||||
<h2>Video background</h2>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
<section><h2>The end</h2></section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../dist/reveal.js"></script>
|
|
||||||
<script src="../plugin/notes/notes.js"></script>
|
|
||||||
<script src="../plugin/markdown/markdown.js"></script>
|
|
||||||
<script src="../plugin/highlight/highlight.js"></script>
|
|
||||||
<script>
|
|
||||||
Reveal.initialize({
|
|
||||||
view: 'scroll',
|
|
||||||
hash: true,
|
|
||||||
|
|
||||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
82
gulpfile.js
82
gulpfile.js
@@ -1,20 +1,22 @@
|
|||||||
const fs = require('fs');
|
|
||||||
const pkg = require('./package.json')
|
const pkg = require('./package.json')
|
||||||
|
const path = require('path')
|
||||||
const glob = require('glob')
|
const glob = require('glob')
|
||||||
const yargs = require('yargs')
|
const yargs = require('yargs')
|
||||||
|
const colors = require('colors')
|
||||||
const through = require('through2');
|
const through = require('through2');
|
||||||
const qunit = require('node-qunit-puppeteer')
|
const qunit = require('node-qunit-puppeteer')
|
||||||
|
|
||||||
const {rollup} = require('rollup')
|
const {rollup} = require('rollup')
|
||||||
const terser = require('@rollup/plugin-terser')
|
const {terser} = require('rollup-plugin-terser')
|
||||||
const babel = require('@rollup/plugin-babel').default
|
const babel = require('@rollup/plugin-babel').default
|
||||||
const commonjs = require('@rollup/plugin-commonjs')
|
const commonjs = require('@rollup/plugin-commonjs')
|
||||||
const resolve = require('@rollup/plugin-node-resolve').default
|
const resolve = require('@rollup/plugin-node-resolve').default
|
||||||
const sass = require('sass')
|
const sass = require('sass')
|
||||||
|
|
||||||
const gulp = require('gulp')
|
const gulp = require('gulp')
|
||||||
|
const tap = require('gulp-tap')
|
||||||
const zip = require('gulp-zip')
|
const zip = require('gulp-zip')
|
||||||
const header = require('gulp-header-comment')
|
const header = require('gulp-header')
|
||||||
const eslint = require('gulp-eslint')
|
const eslint = require('gulp-eslint')
|
||||||
const minify = require('gulp-clean-css')
|
const minify = require('gulp-clean-css')
|
||||||
const connect = require('gulp-connect')
|
const connect = require('gulp-connect')
|
||||||
@@ -24,21 +26,13 @@ const root = yargs.argv.root || '.'
|
|||||||
const port = yargs.argv.port || 8000
|
const port = yargs.argv.port || 8000
|
||||||
const host = yargs.argv.host || 'localhost'
|
const host = yargs.argv.host || 'localhost'
|
||||||
|
|
||||||
const cssLicense = `
|
const banner = `/*!
|
||||||
reveal.js ${pkg.version}
|
* reveal.js ${pkg.version}
|
||||||
${pkg.homepage}
|
* ${pkg.homepage}
|
||||||
MIT licensed
|
* MIT licensed
|
||||||
|
*
|
||||||
Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
|
* Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
|
||||||
`;
|
*/\n`
|
||||||
|
|
||||||
const jsLicense = `/*!
|
|
||||||
* reveal.js ${pkg.version}
|
|
||||||
* ${pkg.homepage}
|
|
||||||
* MIT licensed
|
|
||||||
*
|
|
||||||
* Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
|
|
||||||
*/\n`;
|
|
||||||
|
|
||||||
// Prevents warnings from opening too many test pages
|
// Prevents warnings from opening too many test pages
|
||||||
process.setMaxListeners(20);
|
process.setMaxListeners(20);
|
||||||
@@ -94,7 +88,7 @@ gulp.task('js-es5', () => {
|
|||||||
name: 'Reveal',
|
name: 'Reveal',
|
||||||
file: './dist/reveal.js',
|
file: './dist/reveal.js',
|
||||||
format: 'umd',
|
format: 'umd',
|
||||||
banner: jsLicense,
|
banner: banner,
|
||||||
sourcemap: true
|
sourcemap: true
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -116,7 +110,7 @@ gulp.task('js-es6', () => {
|
|||||||
return bundle.write({
|
return bundle.write({
|
||||||
file: './dist/reveal.esm.js',
|
file: './dist/reveal.esm.js',
|
||||||
format: 'es',
|
format: 'es',
|
||||||
banner: jsLicense,
|
banner: banner,
|
||||||
sourcemap: true
|
sourcemap: true
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -169,12 +163,12 @@ function compileSass() {
|
|||||||
const transformedFile = vinylFile.clone();
|
const transformedFile = vinylFile.clone();
|
||||||
|
|
||||||
sass.render({
|
sass.render({
|
||||||
silenceDeprecations: ['legacy-js-api'],
|
|
||||||
data: transformedFile.contents.toString(),
|
data: transformedFile.contents.toString(),
|
||||||
file: transformedFile.path,
|
includePaths: ['css/', 'css/theme/template']
|
||||||
}, ( err, result ) => {
|
}, ( err, result ) => {
|
||||||
if( err ) {
|
if( err ) {
|
||||||
callback(err);
|
console.log( vinylFile.path );
|
||||||
|
console.log( err.formatted );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
transformedFile.extname = '.css';
|
transformedFile.extname = '.css';
|
||||||
@@ -193,7 +187,7 @@ gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
|
|||||||
.pipe(compileSass())
|
.pipe(compileSass())
|
||||||
.pipe(autoprefixer())
|
.pipe(autoprefixer())
|
||||||
.pipe(minify({compatibility: 'ie9'}))
|
.pipe(minify({compatibility: 'ie9'}))
|
||||||
.pipe(header(cssLicense))
|
.pipe(header(banner))
|
||||||
.pipe(gulp.dest('./dist')))
|
.pipe(gulp.dest('./dist')))
|
||||||
|
|
||||||
gulp.task('css', gulp.parallel('css-themes', 'css-core'))
|
gulp.task('css', gulp.parallel('css-themes', 'css-core'))
|
||||||
@@ -220,7 +214,7 @@ gulp.task('qunit', () => {
|
|||||||
targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
|
targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
|
||||||
timeout: 20000,
|
timeout: 20000,
|
||||||
redirectConsole: false,
|
redirectConsole: false,
|
||||||
puppeteerArgs: ['--allow-file-access-from-files', '--no-sandbox']
|
puppeteerArgs: ['--allow-file-access-from-files']
|
||||||
})
|
})
|
||||||
.then(result => {
|
.then(result => {
|
||||||
if( result.stats.failed > 0 ) {
|
if( result.stats.failed > 0 ) {
|
||||||
@@ -275,25 +269,24 @@ gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
|
|||||||
|
|
||||||
gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
|
gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
|
||||||
|
|
||||||
gulp.task('package', gulp.series(async () => {
|
gulp.task('package', gulp.series(() =>
|
||||||
|
|
||||||
let dirs = [
|
gulp.src(
|
||||||
'./index.html',
|
[
|
||||||
'./dist/**',
|
'./index.html',
|
||||||
'./plugin/**',
|
'./dist/**',
|
||||||
'./*/*.md'
|
'./lib/**',
|
||||||
];
|
'./images/**',
|
||||||
|
'./plugin/**',
|
||||||
if (fs.existsSync('./lib')) dirs.push('./lib/**');
|
'./**/*.md'
|
||||||
if (fs.existsSync('./images')) dirs.push('./images/**');
|
],
|
||||||
if (fs.existsSync('./slides')) dirs.push('./slides/**');
|
{ base: './' }
|
||||||
|
)
|
||||||
return gulp.src( dirs, { base: './', encoding: false } )
|
|
||||||
.pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
|
.pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
|
||||||
|
|
||||||
}))
|
))
|
||||||
|
|
||||||
gulp.task('reload', () => gulp.src(['index.html'])
|
gulp.task('reload', () => gulp.src(['**/*.html', '**/*.md'])
|
||||||
.pipe(connect.reload()));
|
.pipe(connect.reload()));
|
||||||
|
|
||||||
gulp.task('serve', () => {
|
gulp.task('serve', () => {
|
||||||
@@ -305,19 +298,14 @@ gulp.task('serve', () => {
|
|||||||
livereload: true
|
livereload: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const slidesRoot = root.endsWith('/') ? root : root + '/'
|
gulp.watch(['**/*.html', '**/*.md'], gulp.series('reload'))
|
||||||
gulp.watch([
|
|
||||||
slidesRoot + '**/*.html',
|
|
||||||
slidesRoot + '**/*.md',
|
|
||||||
`!${slidesRoot}**/node_modules/**`, // ignore node_modules
|
|
||||||
], gulp.series('reload'))
|
|
||||||
|
|
||||||
gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
|
gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
|
||||||
|
|
||||||
gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
|
gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
|
||||||
|
|
||||||
gulp.watch([
|
gulp.watch([
|
||||||
'css/theme/source/**/*.{sass,scss}',
|
'css/theme/source/*.{sass,scss}',
|
||||||
'css/theme/template/*.{sass,scss}',
|
'css/theme/template/*.{sass,scss}',
|
||||||
], gulp.series('css-themes', 'reload'))
|
], gulp.series('css-themes', 'reload'))
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
@@ -16,8 +16,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Slide 1</section>
|
<section data-markdown="leetcode-20230110.md"></section>
|
||||||
<section>Slide 2</section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -30,6 +29,8 @@
|
|||||||
// - https://revealjs.com/initialization/
|
// - https://revealjs.com/initialization/
|
||||||
// - https://revealjs.com/config/
|
// - https://revealjs.com/config/
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
|
width: 1000,
|
||||||
|
height: 1000,
|
||||||
hash: true,
|
hash: true,
|
||||||
|
|
||||||
// Learn about plugins: https://revealjs.com/plugins/
|
// Learn about plugins: https://revealjs.com/plugins/
|
||||||
@@ -37,4 +38,4 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
47
js/config.js
47
js/config.js
@@ -15,10 +15,7 @@ export default {
|
|||||||
minScale: 0.2,
|
minScale: 0.2,
|
||||||
maxScale: 2.0,
|
maxScale: 2.0,
|
||||||
|
|
||||||
// Display presentation control arrows.
|
// Display presentation control arrows
|
||||||
// - true: Display controls on all screens
|
|
||||||
// - false: Hide controls on all screens
|
|
||||||
// - "speaker-only": Only display controls in the speaker view
|
|
||||||
controls: true,
|
controls: true,
|
||||||
|
|
||||||
// Help the user learn the controls by providing hints, for example by
|
// Help the user learn the controls by providing hints, for example by
|
||||||
@@ -68,16 +65,13 @@ export default {
|
|||||||
// Flags if we should monitor the hash and change slides accordingly
|
// Flags if we should monitor the hash and change slides accordingly
|
||||||
respondToHashChanges: true,
|
respondToHashChanges: true,
|
||||||
|
|
||||||
// Enable support for jump-to-slide navigation shortcuts
|
|
||||||
jumpToSlide: true,
|
|
||||||
|
|
||||||
// Push each slide change to the browser history. Implies `hash: true`
|
// Push each slide change to the browser history. Implies `hash: true`
|
||||||
history: false,
|
history: false,
|
||||||
|
|
||||||
// Enable keyboard shortcuts for navigation
|
// Enable keyboard shortcuts for navigation
|
||||||
keyboard: true,
|
keyboard: true,
|
||||||
|
|
||||||
// Optional function that blocks keyboard events when returning false
|
// Optional function that blocks keyboard events when retuning false
|
||||||
//
|
//
|
||||||
// If you set this to 'focused', we will only capture keyboard events
|
// If you set this to 'focused', we will only capture keyboard events
|
||||||
// for embedded decks when they are in focus
|
// for embedded decks when they are in focus
|
||||||
@@ -168,9 +162,6 @@ export default {
|
|||||||
// - false: All iframes with data-src will be loaded only when visible
|
// - false: All iframes with data-src will be loaded only when visible
|
||||||
preloadIframes: null,
|
preloadIframes: null,
|
||||||
|
|
||||||
// Prevent embedded iframes from automatically focusing on themselves
|
|
||||||
preventIframeAutoFocus: true,
|
|
||||||
|
|
||||||
// Can be used to globally disable auto-animation
|
// Can be used to globally disable auto-animation
|
||||||
autoAnimate: true,
|
autoAnimate: true,
|
||||||
|
|
||||||
@@ -262,36 +253,6 @@ export default {
|
|||||||
parallaxBackgroundHorizontal: null,
|
parallaxBackgroundHorizontal: null,
|
||||||
parallaxBackgroundVertical: null,
|
parallaxBackgroundVertical: null,
|
||||||
|
|
||||||
// Can be used to initialize reveal.js in one of the following views:
|
|
||||||
// - print: Render the presentation so that it can be printed to PDF
|
|
||||||
// - scroll: Show the presentation as a tall scrollable page with scroll
|
|
||||||
// triggered animations
|
|
||||||
view: null,
|
|
||||||
|
|
||||||
// Adjusts the height of each slide in the scroll view.
|
|
||||||
// - full: Each slide is as tall as the viewport
|
|
||||||
// - compact: Slides are as small as possible, allowing multiple slides
|
|
||||||
// to be visible in parallel on tall devices
|
|
||||||
scrollLayout: 'full',
|
|
||||||
|
|
||||||
// Control how scroll snapping works in the scroll view.
|
|
||||||
// - false: No snapping, scrolling is continuous
|
|
||||||
// - proximity: Snap when close to a slide
|
|
||||||
// - mandatory: Always snap to the closest slide
|
|
||||||
//
|
|
||||||
// Only applies to presentations in scroll view.
|
|
||||||
scrollSnap: 'mandatory',
|
|
||||||
|
|
||||||
// Enables and configure the scroll view progress bar.
|
|
||||||
// - 'auto': Show the scrollbar while scrolling, hide while idle
|
|
||||||
// - true: Always show the scrollbar
|
|
||||||
// - false: Never show the scrollbar
|
|
||||||
scrollProgress: 'auto',
|
|
||||||
|
|
||||||
// Automatically activate the scroll view when we the viewport falls
|
|
||||||
// below the given width.
|
|
||||||
scrollActivationWidth: 435,
|
|
||||||
|
|
||||||
// The maximum number of pages a single slide can expand onto when printing
|
// The maximum number of pages a single slide can expand onto when printing
|
||||||
// to PDF, unlimited by default
|
// to PDF, unlimited by default
|
||||||
pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
|
pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
|
||||||
@@ -323,10 +284,6 @@ export default {
|
|||||||
// Time before the cursor is hidden (in ms)
|
// Time before the cursor is hidden (in ms)
|
||||||
hideCursorTime: 5000,
|
hideCursorTime: 5000,
|
||||||
|
|
||||||
// Should we automatically sort and set indices for fragments
|
|
||||||
// at each sync? (See Reveal.sync)
|
|
||||||
sortFragmentsOnSync: true,
|
|
||||||
|
|
||||||
// Script dependencies to load
|
// Script dependencies to load
|
||||||
dependencies: [],
|
dependencies: [],
|
||||||
|
|
||||||
|
|||||||
@@ -31,13 +31,10 @@ export default class AutoAnimate {
|
|||||||
let toSlideIndex = allSlides.indexOf( toSlide );
|
let toSlideIndex = allSlides.indexOf( toSlide );
|
||||||
let fromSlideIndex = allSlides.indexOf( fromSlide );
|
let fromSlideIndex = allSlides.indexOf( fromSlide );
|
||||||
|
|
||||||
// Ensure that;
|
// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
|
||||||
// 1. Both slides exist.
|
// (including null if absent on both) and that data-auto-animate-restart isn't set on the
|
||||||
// 2. Both slides are auto-animate targets with the same
|
// physically latter slide (independent of slide direction)
|
||||||
// data-auto-animate-id value (including null if absent on both).
|
if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
|
||||||
// 3. data-auto-animate-restart isn't set on the physically latter
|
|
||||||
// slide (independent of slide direction).
|
|
||||||
if( fromSlide && toSlide && fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
|
|
||||||
&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
|
&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' )
|
||||||
&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
|
&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
|
||||||
|
|
||||||
@@ -178,12 +175,28 @@ export default class AutoAnimate {
|
|||||||
let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
|
let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
|
||||||
toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );
|
toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );
|
||||||
|
|
||||||
|
// Maintain fragment visibility for matching elements when
|
||||||
|
// we're navigating forwards, this way the viewer won't need
|
||||||
|
// to step through the same fragments twice
|
||||||
if( to.classList.contains( 'fragment' ) ) {
|
if( to.classList.contains( 'fragment' ) ) {
|
||||||
|
|
||||||
// Don't auto-animate the opacity of fragments to avoid
|
// Don't auto-animate the opacity of fragments to avoid
|
||||||
// conflicts with fragment animations
|
// conflicts with fragment animations
|
||||||
delete toProps.styles['opacity'];
|
delete toProps.styles['opacity'];
|
||||||
|
|
||||||
|
if( from.classList.contains( 'fragment' ) ) {
|
||||||
|
|
||||||
|
let fromFragmentStyle = ( from.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
|
||||||
|
let toFragmentStyle = ( to.className.match( FRAGMENT_STYLE_REGEX ) || [''] )[0];
|
||||||
|
|
||||||
|
// Only skip the fragment if the fragment animation style
|
||||||
|
// remains unchanged
|
||||||
|
if( fromFragmentStyle === toFragmentStyle && animationOptions.slideDirection === 'forward' ) {
|
||||||
|
to.classList.add( 'visible', 'disabled' );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// If translation and/or scaling are enabled, css transform
|
// If translation and/or scaling are enabled, css transform
|
||||||
@@ -448,14 +461,14 @@ export default class AutoAnimate {
|
|||||||
const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
|
const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
|
||||||
const mediaNodes = 'img, video, iframe';
|
const mediaNodes = 'img, video, iframe';
|
||||||
|
|
||||||
// Explicit matches via data-id
|
// Eplicit matches via data-id
|
||||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
|
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
|
||||||
return node.nodeName + ':::' + node.getAttribute( 'data-id' );
|
return node.nodeName + ':::' + node.getAttribute( 'data-id' );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
|
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
|
||||||
return node.nodeName + ':::' + node.textContent.trim();
|
return node.nodeName + ':::' + node.innerText;
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Media
|
// Media
|
||||||
@@ -465,7 +478,7 @@ export default class AutoAnimate {
|
|||||||
|
|
||||||
// Code
|
// Code
|
||||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
|
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
|
||||||
return node.nodeName + ':::' + node.textContent.trim();
|
return node.nodeName + ':::' + node.innerText;
|
||||||
} );
|
} );
|
||||||
|
|
||||||
pairs.forEach( pair => {
|
pairs.forEach( pair => {
|
||||||
@@ -491,7 +504,7 @@ export default class AutoAnimate {
|
|||||||
} );
|
} );
|
||||||
|
|
||||||
// Line numbers
|
// Line numbers
|
||||||
this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
|
this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-line[data-line-number]', node => {
|
||||||
return node.getAttribute( 'data-line-number' );
|
return node.getAttribute( 'data-line-number' );
|
||||||
}, {
|
}, {
|
||||||
scale: false,
|
scale: false,
|
||||||
@@ -560,14 +573,14 @@ export default class AutoAnimate {
|
|||||||
|
|
||||||
// Retrieve the 'from' element
|
// Retrieve the 'from' element
|
||||||
if( fromMatches[key] ) {
|
if( fromMatches[key] ) {
|
||||||
const primaryIndex = toMatches[key].length - 1;
|
const pimaryIndex = toMatches[key].length - 1;
|
||||||
const secondaryIndex = fromMatches[key].length - 1;
|
const secondaryIndex = fromMatches[key].length - 1;
|
||||||
|
|
||||||
// If there are multiple identical from elements, retrieve
|
// If there are multiple identical from elements, retrieve
|
||||||
// the one at the same index as our to-element.
|
// the one at the same index as our to-element.
|
||||||
if( fromMatches[key][ primaryIndex ] ) {
|
if( fromMatches[key][ pimaryIndex ] ) {
|
||||||
fromElement = fromMatches[key][ primaryIndex ];
|
fromElement = fromMatches[key][ pimaryIndex ];
|
||||||
fromMatches[key][ primaryIndex ] = null;
|
fromMatches[key][ pimaryIndex ] = null;
|
||||||
}
|
}
|
||||||
// If there are no matching from-elements at the same index,
|
// If there are no matching from-elements at the same index,
|
||||||
// use the last one.
|
// use the last one.
|
||||||
@@ -595,7 +608,7 @@ export default class AutoAnimate {
|
|||||||
* fading of unmatched elements is turned on, these elements
|
* fading of unmatched elements is turned on, these elements
|
||||||
* will fade when going between auto-animate slides.
|
* will fade when going between auto-animate slides.
|
||||||
*
|
*
|
||||||
* Note that parents of auto-animate targets are NOT considered
|
* Note that parents of auto-animate targets are NOT considerd
|
||||||
* unmatched since fading them would break the auto-animation.
|
* unmatched since fading them would break the auto-animation.
|
||||||
*
|
*
|
||||||
* @param {HTMLElement} rootElement
|
* @param {HTMLElement} rootElement
|
||||||
|
|||||||
@@ -190,30 +190,10 @@ export default class Backgrounds {
|
|||||||
if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
|
if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
|
||||||
if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
|
if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
|
||||||
|
|
||||||
const contrastClass = this.getContrastClass( slide );
|
|
||||||
|
|
||||||
if( typeof contrastClass === 'string' ) {
|
|
||||||
slide.classList.add( contrastClass );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns a class name that can be applied to a slide to indicate
|
|
||||||
* if it has a light or dark background.
|
|
||||||
*
|
|
||||||
* @param {*} slide
|
|
||||||
*
|
|
||||||
* @returns {string|null}
|
|
||||||
*/
|
|
||||||
getContrastClass( slide ) {
|
|
||||||
|
|
||||||
const element = slide.slideBackgroundElement;
|
|
||||||
|
|
||||||
// If this slide has a background color, we add a class that
|
// If this slide has a background color, we add a class that
|
||||||
// signals if it is light or dark. If the slide has no background
|
// signals if it is light or dark. If the slide has no background
|
||||||
// color, no class will be added
|
// color, no class will be added
|
||||||
let contrastColor = slide.getAttribute( 'data-background-color' );
|
let contrastColor = data.backgroundColor;
|
||||||
|
|
||||||
// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
|
// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
|
||||||
if( !contrastColor || !colorToRgb( contrastColor ) ) {
|
if( !contrastColor || !colorToRgb( contrastColor ) ) {
|
||||||
@@ -231,32 +211,14 @@ export default class Backgrounds {
|
|||||||
// an element with no background
|
// an element with no background
|
||||||
if( rgb && rgb.a !== 0 ) {
|
if( rgb && rgb.a !== 0 ) {
|
||||||
if( colorBrightness( contrastColor ) < 128 ) {
|
if( colorBrightness( contrastColor ) < 128 ) {
|
||||||
return 'has-dark-background';
|
slide.classList.add( 'has-dark-background' );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
return 'has-light-background';
|
slide.classList.add( 'has-light-background' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bubble the 'has-light-background'/'has-dark-background' classes.
|
|
||||||
*/
|
|
||||||
bubbleSlideContrastClassToElement( slide, target ) {
|
|
||||||
|
|
||||||
[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
|
|
||||||
if( slide.classList.contains( classToBubble ) ) {
|
|
||||||
target.classList.add( classToBubble );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
target.classList.remove( classToBubble );
|
|
||||||
}
|
|
||||||
}, this );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -268,15 +230,14 @@ export default class Backgrounds {
|
|||||||
*/
|
*/
|
||||||
update( includeAll = false ) {
|
update( includeAll = false ) {
|
||||||
|
|
||||||
let config = this.Reveal.getConfig();
|
|
||||||
let currentSlide = this.Reveal.getCurrentSlide();
|
let currentSlide = this.Reveal.getCurrentSlide();
|
||||||
let indices = this.Reveal.getIndices();
|
let indices = this.Reveal.getIndices();
|
||||||
|
|
||||||
let currentBackground = null;
|
let currentBackground = null;
|
||||||
|
|
||||||
// Reverse past/future classes when in RTL mode
|
// Reverse past/future classes when in RTL mode
|
||||||
let horizontalPast = config.rtl ? 'future' : 'past',
|
let horizontalPast = this.Reveal.getConfig().rtl ? 'future' : 'past',
|
||||||
horizontalFuture = config.rtl ? 'past' : 'future';
|
horizontalFuture = this.Reveal.getConfig().rtl ? 'past' : 'future';
|
||||||
|
|
||||||
// Update the classes of all backgrounds to match the
|
// Update the classes of all backgrounds to match the
|
||||||
// states of their slides (past/present/future)
|
// states of their slides (past/present/future)
|
||||||
@@ -302,12 +263,10 @@ export default class Backgrounds {
|
|||||||
|
|
||||||
backgroundv.classList.remove( 'past', 'present', 'future' );
|
backgroundv.classList.remove( 'past', 'present', 'future' );
|
||||||
|
|
||||||
const indexv = typeof indices.v === 'number' ? indices.v : 0;
|
if( v < indices.v ) {
|
||||||
|
|
||||||
if( v < indexv ) {
|
|
||||||
backgroundv.classList.add( 'past' );
|
backgroundv.classList.add( 'past' );
|
||||||
}
|
}
|
||||||
else if ( v > indexv ) {
|
else if ( v > indices.v ) {
|
||||||
backgroundv.classList.add( 'future' );
|
backgroundv.classList.add( 'future' );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
@@ -322,53 +281,15 @@ export default class Backgrounds {
|
|||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// The previous background may refer to a DOM element that has
|
|
||||||
// been removed after a presentation is synced & bgs are recreated
|
|
||||||
if( this.previousBackground && !this.previousBackground.closest( 'body' ) ) {
|
|
||||||
this.previousBackground = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if( currentBackground && this.previousBackground ) {
|
|
||||||
|
|
||||||
// Don't transition between identical backgrounds. This
|
|
||||||
// prevents unwanted flicker.
|
|
||||||
let previousBackgroundHash = this.previousBackground.getAttribute( 'data-background-hash' );
|
|
||||||
let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
|
|
||||||
|
|
||||||
if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
|
|
||||||
this.element.classList.add( 'no-transition' );
|
|
||||||
|
|
||||||
// If multiple slides have the same background video, carry
|
|
||||||
// the <video> element forward so that it plays continuously
|
|
||||||
// across multiple slides
|
|
||||||
const currentVideo = currentBackground.querySelector( 'video' );
|
|
||||||
const previousVideo = this.previousBackground.querySelector( 'video' );
|
|
||||||
|
|
||||||
if( currentVideo && previousVideo ) {
|
|
||||||
|
|
||||||
const currentVideoParent = currentVideo.parentNode;
|
|
||||||
const previousVideoParent = previousVideo.parentNode;
|
|
||||||
|
|
||||||
// Swap the two videos
|
|
||||||
previousVideoParent.appendChild( currentVideo );
|
|
||||||
currentVideoParent.appendChild( previousVideo );
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const backgroundChanged = currentBackground !== this.previousBackground;
|
|
||||||
|
|
||||||
// Stop content inside of previous backgrounds
|
// Stop content inside of previous backgrounds
|
||||||
if( backgroundChanged && this.previousBackground ) {
|
if( this.previousBackground ) {
|
||||||
|
|
||||||
this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
|
this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start content in the current background
|
// Start content in the current background
|
||||||
if( backgroundChanged && currentBackground ) {
|
if( currentBackground ) {
|
||||||
|
|
||||||
this.Reveal.slideContent.startEmbeddedContent( currentBackground );
|
this.Reveal.slideContent.startEmbeddedContent( currentBackground );
|
||||||
|
|
||||||
@@ -386,6 +307,14 @@ export default class Backgrounds {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Don't transition between identical backgrounds. This
|
||||||
|
// prevents unwanted flicker.
|
||||||
|
let previousBackgroundHash = this.previousBackground ? this.previousBackground.getAttribute( 'data-background-hash' ) : null;
|
||||||
|
let currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
|
||||||
|
if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== this.previousBackground ) {
|
||||||
|
this.element.classList.add( 'no-transition' );
|
||||||
|
}
|
||||||
|
|
||||||
this.previousBackground = currentBackground;
|
this.previousBackground = currentBackground;
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -393,13 +322,20 @@ export default class Backgrounds {
|
|||||||
// If there's a background brightness flag for this slide,
|
// If there's a background brightness flag for this slide,
|
||||||
// bubble it to the .reveal container
|
// bubble it to the .reveal container
|
||||||
if( currentSlide ) {
|
if( currentSlide ) {
|
||||||
this.bubbleSlideContrastClassToElement( currentSlide, this.Reveal.getRevealElement() );
|
[ 'has-light-background', 'has-dark-background' ].forEach( classToBubble => {
|
||||||
|
if( currentSlide.classList.contains( classToBubble ) ) {
|
||||||
|
this.Reveal.getRevealElement().classList.add( classToBubble );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.Reveal.getRevealElement().classList.remove( classToBubble );
|
||||||
|
}
|
||||||
|
}, this );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Allow the first background to apply without transition
|
// Allow the first background to apply without transition
|
||||||
setTimeout( () => {
|
setTimeout( () => {
|
||||||
this.element.classList.remove( 'no-transition' );
|
this.element.classList.remove( 'no-transition' );
|
||||||
}, 10 );
|
}, 1 );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
34
js/controllers/controls.js
vendored
34
js/controllers/controls.js
vendored
@@ -1,4 +1,4 @@
|
|||||||
import { queryAll, enterFullscreen } from '../utils/util.js'
|
import { queryAll } from '../utils/util.js'
|
||||||
import { isAndroid } from '../utils/device.js'
|
import { isAndroid } from '../utils/device.js'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -12,7 +12,6 @@ import { isAndroid } from '../utils/device.js'
|
|||||||
* - .navigate-left
|
* - .navigate-left
|
||||||
* - .navigate-next
|
* - .navigate-next
|
||||||
* - .navigate-prev
|
* - .navigate-prev
|
||||||
* - .enter-fullscreen
|
|
||||||
*/
|
*/
|
||||||
export default class Controls {
|
export default class Controls {
|
||||||
|
|
||||||
@@ -26,7 +25,6 @@ export default class Controls {
|
|||||||
this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
|
this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
|
||||||
this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
|
this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
|
||||||
this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
|
this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
|
||||||
this.onEnterFullscreen = this.onEnterFullscreen.bind( this );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -52,7 +50,6 @@ export default class Controls {
|
|||||||
this.controlsDown = queryAll( revealElement, '.navigate-down' );
|
this.controlsDown = queryAll( revealElement, '.navigate-down' );
|
||||||
this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
|
this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
|
||||||
this.controlsNext = queryAll( revealElement, '.navigate-next' );
|
this.controlsNext = queryAll( revealElement, '.navigate-next' );
|
||||||
this.controlsFullscreen = queryAll( revealElement, '.enter-fullscreen' );
|
|
||||||
|
|
||||||
// The left, right and down arrows in the standard reveal.js controls
|
// The left, right and down arrows in the standard reveal.js controls
|
||||||
this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
|
this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
|
||||||
@@ -66,10 +63,7 @@ export default class Controls {
|
|||||||
*/
|
*/
|
||||||
configure( config, oldConfig ) {
|
configure( config, oldConfig ) {
|
||||||
|
|
||||||
this.element.style.display = (
|
this.element.style.display = config.controls ? 'block' : 'none';
|
||||||
config.controls &&
|
|
||||||
(config.controls !== 'speaker-only' || this.Reveal.isSpeakerNotes())
|
|
||||||
) ? 'block' : 'none';
|
|
||||||
|
|
||||||
this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
|
this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
|
||||||
this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
|
this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
|
||||||
@@ -83,10 +77,9 @@ export default class Controls {
|
|||||||
let pointerEvents = [ 'touchstart', 'click' ];
|
let pointerEvents = [ 'touchstart', 'click' ];
|
||||||
|
|
||||||
// Only support touch for Android, fixes double navigations in
|
// Only support touch for Android, fixes double navigations in
|
||||||
// stock browser. Use touchend for it to be considered a valid
|
// stock browser
|
||||||
// user interaction (so we're allowed to autoplay media).
|
|
||||||
if( isAndroid ) {
|
if( isAndroid ) {
|
||||||
pointerEvents = [ 'touchend' ];
|
pointerEvents = [ 'touchstart' ];
|
||||||
}
|
}
|
||||||
|
|
||||||
pointerEvents.forEach( eventName => {
|
pointerEvents.forEach( eventName => {
|
||||||
@@ -96,21 +89,19 @@ export default class Controls {
|
|||||||
this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
|
this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||||||
this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||||||
this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
|
this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||||||
this.controlsFullscreen.forEach( el => el.addEventListener( eventName, this.onEnterFullscreen, false ) );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
unbind() {
|
unbind() {
|
||||||
|
|
||||||
[ 'touchstart', 'touchend', 'click' ].forEach( eventName => {
|
[ 'touchstart', 'click' ].forEach( eventName => {
|
||||||
this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
||||||
this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
|
this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
|
||||||
this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );
|
this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );
|
||||||
this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
|
this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||||||
this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||||||
this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
|
this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||||||
this.controlsFullscreen.forEach( el => el.removeEventListener( eventName, this.onEnterFullscreen, false ) );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -150,14 +141,9 @@ export default class Controls {
|
|||||||
if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
if( fragmentsRoutes.prev ) this.controlsPrev.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||||
if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
if( fragmentsRoutes.next ) this.controlsNext.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||||
|
|
||||||
const isVerticalStack = this.Reveal.isVerticalSlide( currentSlide );
|
|
||||||
const hasVerticalSiblings = isVerticalStack &&
|
|
||||||
currentSlide.parentElement &&
|
|
||||||
currentSlide.parentElement.querySelectorAll( ':scope > section' ).length > 1;
|
|
||||||
|
|
||||||
// Apply fragment decorators to directional buttons based on
|
// Apply fragment decorators to directional buttons based on
|
||||||
// what slide axis they are in
|
// what slide axis they are in
|
||||||
if( isVerticalStack && hasVerticalSiblings ) {
|
if( this.Reveal.isVerticalSlide( currentSlide ) ) {
|
||||||
if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
if( fragmentsRoutes.prev ) this.controlsUp.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||||
if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
if( fragmentsRoutes.next ) this.controlsDown.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||||
}
|
}
|
||||||
@@ -276,13 +262,5 @@ export default class Controls {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onEnterFullscreen( event ) {
|
|
||||||
|
|
||||||
const config = this.Reveal.getConfig();
|
|
||||||
const viewport = this.Reveal.getViewportElement();
|
|
||||||
|
|
||||||
enterFullscreen( config.embedded ? viewport : viewport.parentElement );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -174,23 +174,24 @@ export default class Fragments {
|
|||||||
*
|
*
|
||||||
* @return {{shown: array, hidden: array}}
|
* @return {{shown: array, hidden: array}}
|
||||||
*/
|
*/
|
||||||
update( index, fragments, slide = this.Reveal.getCurrentSlide() ) {
|
update( index, fragments ) {
|
||||||
|
|
||||||
let changedFragments = {
|
let changedFragments = {
|
||||||
shown: [],
|
shown: [],
|
||||||
hidden: []
|
hidden: []
|
||||||
};
|
};
|
||||||
|
|
||||||
if( slide && this.Reveal.getConfig().fragments ) {
|
let currentSlide = this.Reveal.getCurrentSlide();
|
||||||
|
if( currentSlide && this.Reveal.getConfig().fragments ) {
|
||||||
|
|
||||||
fragments = fragments || this.sort( slide.querySelectorAll( '.fragment' ) );
|
fragments = fragments || this.sort( currentSlide.querySelectorAll( '.fragment' ) );
|
||||||
|
|
||||||
if( fragments.length ) {
|
if( fragments.length ) {
|
||||||
|
|
||||||
let maxIndex = 0;
|
let maxIndex = 0;
|
||||||
|
|
||||||
if( typeof index !== 'number' ) {
|
if( typeof index !== 'number' ) {
|
||||||
let currentFragment = this.sort( slide.querySelectorAll( '.fragment.visible' ) ).pop();
|
let currentFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
|
||||||
if( currentFragment ) {
|
if( currentFragment ) {
|
||||||
index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
|
index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
|
||||||
}
|
}
|
||||||
@@ -251,32 +252,12 @@ export default class Fragments {
|
|||||||
// the current fragment index.
|
// the current fragment index.
|
||||||
index = typeof index === 'number' ? index : -1;
|
index = typeof index === 'number' ? index : -1;
|
||||||
index = Math.max( Math.min( index, maxIndex ), -1 );
|
index = Math.max( Math.min( index, maxIndex ), -1 );
|
||||||
slide.setAttribute( 'data-fragment', index );
|
currentSlide.setAttribute( 'data-fragment', index );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if( changedFragments.hidden.length ) {
|
|
||||||
this.Reveal.dispatchEvent({
|
|
||||||
type: 'fragmenthidden',
|
|
||||||
data: {
|
|
||||||
fragment: changedFragments.hidden[0],
|
|
||||||
fragments: changedFragments.hidden
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if( changedFragments.shown.length ) {
|
|
||||||
this.Reveal.dispatchEvent({
|
|
||||||
type: 'fragmentshown',
|
|
||||||
data: {
|
|
||||||
fragment: changedFragments.shown[0],
|
|
||||||
fragments: changedFragments.shown
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return changedFragments;
|
return changedFragments;
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -331,6 +312,26 @@ export default class Fragments {
|
|||||||
|
|
||||||
let changedFragments = this.update( index, fragments );
|
let changedFragments = this.update( index, fragments );
|
||||||
|
|
||||||
|
if( changedFragments.hidden.length ) {
|
||||||
|
this.Reveal.dispatchEvent({
|
||||||
|
type: 'fragmenthidden',
|
||||||
|
data: {
|
||||||
|
fragment: changedFragments.hidden[0],
|
||||||
|
fragments: changedFragments.hidden
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if( changedFragments.shown.length ) {
|
||||||
|
this.Reveal.dispatchEvent({
|
||||||
|
type: 'fragmentshown',
|
||||||
|
data: {
|
||||||
|
fragment: changedFragments.shown[0],
|
||||||
|
fragments: changedFragments.shown
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.Reveal.controls.update();
|
this.Reveal.controls.update();
|
||||||
this.Reveal.progress.update();
|
this.Reveal.progress.update();
|
||||||
|
|
||||||
|
|||||||
@@ -1,197 +0,0 @@
|
|||||||
import {
|
|
||||||
SLIDE_NUMBER_FORMAT_CURRENT,
|
|
||||||
SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL
|
|
||||||
} from "../utils/constants";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Makes it possible to jump to a slide by entering its
|
|
||||||
* slide number or id.
|
|
||||||
*/
|
|
||||||
export default class JumpToSlide {
|
|
||||||
|
|
||||||
constructor( Reveal ) {
|
|
||||||
|
|
||||||
this.Reveal = Reveal;
|
|
||||||
|
|
||||||
this.onInput = this.onInput.bind( this );
|
|
||||||
this.onBlur = this.onBlur.bind( this );
|
|
||||||
this.onKeyDown = this.onKeyDown.bind( this );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
this.element = document.createElement( 'div' );
|
|
||||||
this.element.className = 'jump-to-slide';
|
|
||||||
|
|
||||||
this.jumpInput = document.createElement( 'input' );
|
|
||||||
this.jumpInput.type = 'text';
|
|
||||||
this.jumpInput.className = 'jump-to-slide-input';
|
|
||||||
this.jumpInput.placeholder = 'Jump to slide';
|
|
||||||
this.jumpInput.addEventListener( 'input', this.onInput );
|
|
||||||
this.jumpInput.addEventListener( 'keydown', this.onKeyDown );
|
|
||||||
this.jumpInput.addEventListener( 'blur', this.onBlur );
|
|
||||||
|
|
||||||
this.element.appendChild( this.jumpInput );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
|
|
||||||
this.indicesOnShow = this.Reveal.getIndices();
|
|
||||||
|
|
||||||
this.Reveal.getRevealElement().appendChild( this.element );
|
|
||||||
this.jumpInput.focus();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
hide() {
|
|
||||||
|
|
||||||
if( this.isVisible() ) {
|
|
||||||
this.element.remove();
|
|
||||||
this.jumpInput.value = '';
|
|
||||||
|
|
||||||
clearTimeout( this.jumpTimeout );
|
|
||||||
delete this.jumpTimeout;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
isVisible() {
|
|
||||||
|
|
||||||
return !!this.element.parentNode;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Parses the current input and jumps to the given slide.
|
|
||||||
*/
|
|
||||||
jump() {
|
|
||||||
|
|
||||||
clearTimeout( this.jumpTimeout );
|
|
||||||
delete this.jumpTimeout;
|
|
||||||
|
|
||||||
let query = this.jumpInput.value.trim( '' );
|
|
||||||
let indices;
|
|
||||||
|
|
||||||
// When slide numbers are formatted to be a single linear number
|
|
||||||
// (instead of showing a separate horizontal/vertical index) we
|
|
||||||
// use the same format for slide jumps
|
|
||||||
if( /^\d+$/.test( query ) ) {
|
|
||||||
const slideNumberFormat = this.Reveal.getConfig().slideNumber;
|
|
||||||
if( slideNumberFormat === SLIDE_NUMBER_FORMAT_CURRENT || slideNumberFormat === SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL ) {
|
|
||||||
const slide = this.Reveal.getSlides()[ parseInt( query, 10 ) - 1 ];
|
|
||||||
if( slide ) {
|
|
||||||
indices = this.Reveal.getIndices( slide );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if( !indices ) {
|
|
||||||
// If the query uses "horizontal.vertical" format, convert to
|
|
||||||
// "horizontal/vertical" so that our URL parser can understand
|
|
||||||
if( /^\d+\.\d+$/.test( query ) ) {
|
|
||||||
query = query.replace( '.', '/' );
|
|
||||||
}
|
|
||||||
|
|
||||||
indices = this.Reveal.location.getIndicesFromHash( query, { oneBasedIndex: true } );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Still no valid index? Fall back on a text search
|
|
||||||
if( !indices && /\S+/i.test( query ) && query.length > 1 ) {
|
|
||||||
indices = this.search( query );
|
|
||||||
}
|
|
||||||
|
|
||||||
if( indices && query !== '' ) {
|
|
||||||
this.Reveal.slide( indices.h, indices.v, indices.f );
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
jumpAfter( delay ) {
|
|
||||||
|
|
||||||
clearTimeout( this.jumpTimeout );
|
|
||||||
this.jumpTimeout = setTimeout( () => this.jump(), delay );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A lofi search that looks for the given query in all
|
|
||||||
* of our slides and returns the first match.
|
|
||||||
*/
|
|
||||||
search( query ) {
|
|
||||||
|
|
||||||
const regex = new RegExp( '\\b' + query.trim() + '\\b', 'i' );
|
|
||||||
|
|
||||||
const slide = this.Reveal.getSlides().find( ( slide ) => {
|
|
||||||
return regex.test( slide.innerText );
|
|
||||||
} );
|
|
||||||
|
|
||||||
if( slide ) {
|
|
||||||
return this.Reveal.getIndices( slide );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reverts back to the slide we were on when jump to slide was
|
|
||||||
* invoked.
|
|
||||||
*/
|
|
||||||
cancel() {
|
|
||||||
|
|
||||||
this.Reveal.slide( this.indicesOnShow.h, this.indicesOnShow.v, this.indicesOnShow.f );
|
|
||||||
this.hide();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
confirm() {
|
|
||||||
|
|
||||||
this.jump();
|
|
||||||
this.hide();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
|
|
||||||
this.jumpInput.removeEventListener( 'input', this.onInput );
|
|
||||||
this.jumpInput.removeEventListener( 'keydown', this.onKeyDown );
|
|
||||||
this.jumpInput.removeEventListener( 'blur', this.onBlur );
|
|
||||||
|
|
||||||
this.element.remove();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onKeyDown( event ) {
|
|
||||||
|
|
||||||
if( event.keyCode === 13 ) {
|
|
||||||
this.confirm();
|
|
||||||
}
|
|
||||||
else if( event.keyCode === 27 ) {
|
|
||||||
this.cancel();
|
|
||||||
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onInput( event ) {
|
|
||||||
|
|
||||||
this.jumpAfter( 200 );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onBlur() {
|
|
||||||
|
|
||||||
setTimeout( () => this.hide(), 1 );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -17,6 +17,7 @@ export default class Keyboard {
|
|||||||
this.bindings = {};
|
this.bindings = {};
|
||||||
|
|
||||||
this.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );
|
this.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );
|
||||||
|
this.onDocumentKeyPress = this.onDocumentKeyPress.bind( this );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -42,7 +43,6 @@ export default class Keyboard {
|
|||||||
this.shortcuts['Shift + ←/↑/→/↓'] = 'Jump to first/last slide';
|
this.shortcuts['Shift + ←/↑/→/↓'] = 'Jump to first/last slide';
|
||||||
this.shortcuts['B , .'] = 'Pause';
|
this.shortcuts['B , .'] = 'Pause';
|
||||||
this.shortcuts['F'] = 'Fullscreen';
|
this.shortcuts['F'] = 'Fullscreen';
|
||||||
this.shortcuts['G'] = 'Jump to slide';
|
|
||||||
this.shortcuts['ESC, O'] = 'Slide overview';
|
this.shortcuts['ESC, O'] = 'Slide overview';
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -53,6 +53,7 @@ export default class Keyboard {
|
|||||||
bind() {
|
bind() {
|
||||||
|
|
||||||
document.addEventListener( 'keydown', this.onDocumentKeyDown, false );
|
document.addEventListener( 'keydown', this.onDocumentKeyDown, false );
|
||||||
|
document.addEventListener( 'keypress', this.onDocumentKeyPress, false );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,6 +63,7 @@ export default class Keyboard {
|
|||||||
unbind() {
|
unbind() {
|
||||||
|
|
||||||
document.removeEventListener( 'keydown', this.onDocumentKeyDown, false );
|
document.removeEventListener( 'keydown', this.onDocumentKeyDown, false );
|
||||||
|
document.removeEventListener( 'keypress', this.onDocumentKeyPress, false );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -132,6 +134,20 @@ export default class Keyboard {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handler for the document level 'keypress' event.
|
||||||
|
*
|
||||||
|
* @param {object} event
|
||||||
|
*/
|
||||||
|
onDocumentKeyPress( event ) {
|
||||||
|
|
||||||
|
// Check if the pressed key is question mark
|
||||||
|
if( event.shiftKey && event.charCode === 63 ) {
|
||||||
|
this.Reveal.toggleHelp();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handler for the document level 'keydown' event.
|
* Handler for the document level 'keydown' event.
|
||||||
*
|
*
|
||||||
@@ -167,10 +183,10 @@ export default class Keyboard {
|
|||||||
let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
|
let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
|
||||||
|
|
||||||
// Whitelist certain modifiers for slide navigation shortcuts
|
// Whitelist certain modifiers for slide navigation shortcuts
|
||||||
let keyCodeUsesModifier = [32, 37, 38, 39, 40, 63, 78, 80, 191].indexOf( event.keyCode ) !== -1;
|
let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
|
||||||
|
|
||||||
// Prevent all other events when a modifier is pressed
|
// Prevent all other events when a modifier is pressed
|
||||||
let unusedModifier = !( keyCodeUsesModifier && event.shiftKey || event.altKey ) &&
|
let unusedModifier = !( isNavigationKey && event.shiftKey || event.altKey ) &&
|
||||||
( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
|
( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
|
||||||
|
|
||||||
// Disregard the event if there's a focused element or a
|
// Disregard the event if there's a focused element or a
|
||||||
@@ -178,7 +194,7 @@ export default class Keyboard {
|
|||||||
if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;
|
if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;
|
||||||
|
|
||||||
// While paused only allow resume keyboard events; 'b', 'v', '.'
|
// While paused only allow resume keyboard events; 'b', 'v', '.'
|
||||||
let resumeKeyCodes = [66,86,190,191,112];
|
let resumeKeyCodes = [66,86,190,191];
|
||||||
let key;
|
let key;
|
||||||
|
|
||||||
// Custom key bindings for togglePause should be able to resume
|
// Custom key bindings for togglePause should be able to resume
|
||||||
@@ -190,10 +206,6 @@ export default class Keyboard {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if( this.Reveal.isOverlayOpen() && !["Escape", "f", "c", "b", "."].includes(event.key) ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
|
if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -275,12 +287,7 @@ export default class Keyboard {
|
|||||||
this.Reveal.slide( 0 );
|
this.Reveal.slide( 0 );
|
||||||
}
|
}
|
||||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||||
if( config.rtl ) {
|
this.Reveal.prev({skipFragments: event.altKey});
|
||||||
this.Reveal.next({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.prev({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.Reveal.left({skipFragments: event.altKey});
|
this.Reveal.left({skipFragments: event.altKey});
|
||||||
@@ -292,12 +299,7 @@ export default class Keyboard {
|
|||||||
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
||||||
}
|
}
|
||||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||||
if( config.rtl ) {
|
this.Reveal.next({skipFragments: event.altKey});
|
||||||
this.Reveal.prev({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.next({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.Reveal.right({skipFragments: event.altKey});
|
this.Reveal.right({skipFragments: event.altKey});
|
||||||
@@ -348,7 +350,7 @@ export default class Keyboard {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
|
// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON
|
||||||
else if( [58, 59, 66, 86, 190].includes( keyCode ) || ( keyCode === 191 && !event.shiftKey ) ) {
|
else if( keyCode === 58 || keyCode === 59 || keyCode === 66 || keyCode === 86 || keyCode === 190 || keyCode === 191 ) {
|
||||||
this.Reveal.togglePause();
|
this.Reveal.togglePause();
|
||||||
}
|
}
|
||||||
// F
|
// F
|
||||||
@@ -357,28 +359,10 @@ export default class Keyboard {
|
|||||||
}
|
}
|
||||||
// A
|
// A
|
||||||
else if( keyCode === 65 ) {
|
else if( keyCode === 65 ) {
|
||||||
if( config.autoSlideStoppable ) {
|
if ( config.autoSlideStoppable ) {
|
||||||
this.Reveal.toggleAutoSlide( autoSlideWasPaused );
|
this.Reveal.toggleAutoSlide( autoSlideWasPaused );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// G
|
|
||||||
else if( keyCode === 71 ) {
|
|
||||||
if( config.jumpToSlide ) {
|
|
||||||
this.Reveal.toggleJumpToSlide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// C
|
|
||||||
else if( keyCode === 67 && this.Reveal.isOverlayOpen() ) {
|
|
||||||
this.Reveal.closeOverlay();
|
|
||||||
}
|
|
||||||
// ?
|
|
||||||
else if( ( keyCode === 63 || keyCode === 191 ) && event.shiftKey ) {
|
|
||||||
this.Reveal.toggleHelp();
|
|
||||||
}
|
|
||||||
// F1
|
|
||||||
else if( keyCode === 112 ) {
|
|
||||||
this.Reveal.toggleHelp();
|
|
||||||
}
|
|
||||||
else {
|
else {
|
||||||
triggered = false;
|
triggered = false;
|
||||||
}
|
}
|
||||||
@@ -398,12 +382,6 @@ export default class Keyboard {
|
|||||||
|
|
||||||
event.preventDefault && event.preventDefault();
|
event.preventDefault && event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enter to exit overview mode
|
|
||||||
else if (keyCode === 13 && this.Reveal.overview.isActive()) {
|
|
||||||
this.Reveal.overview.deactivate();
|
|
||||||
event.preventDefault && event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
// If auto-sliding is enabled we need to cue up
|
// If auto-sliding is enabled we need to cue up
|
||||||
// another timeout
|
// another timeout
|
||||||
@@ -411,4 +389,4 @@ export default class Keyboard {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -40,7 +40,7 @@ export default class Location {
|
|||||||
*
|
*
|
||||||
* @returns slide indices or null
|
* @returns slide indices or null
|
||||||
*/
|
*/
|
||||||
getIndicesFromHash( hash=window.location.hash, options={} ) {
|
getIndicesFromHash( hash=window.location.hash ) {
|
||||||
|
|
||||||
// Attempt to parse the hash as either an index or name
|
// Attempt to parse the hash as either an index or name
|
||||||
let name = hash.replace( /^#\/?/, '' );
|
let name = hash.replace( /^#\/?/, '' );
|
||||||
@@ -49,7 +49,7 @@ export default class Location {
|
|||||||
// If the first bit is not fully numeric and there is a name we
|
// If the first bit is not fully numeric and there is a name we
|
||||||
// can assume that this is a named link
|
// can assume that this is a named link
|
||||||
if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
|
if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
|
||||||
let slide;
|
let element;
|
||||||
|
|
||||||
let f;
|
let f;
|
||||||
|
|
||||||
@@ -60,23 +60,19 @@ export default class Location {
|
|||||||
name = name.split( '/' ).shift();
|
name = name.split( '/' ).shift();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure the named link is a valid HTML id or data-id attribute
|
// Ensure the named link is a valid HTML ID attribute
|
||||||
try {
|
try {
|
||||||
const decodedName = decodeURIComponent( name );
|
element = document.getElementById( decodeURIComponent( name ) );
|
||||||
slide = (
|
|
||||||
document.getElementById( decodedName ) ||
|
|
||||||
document.querySelector( `[data-id="${decodedName}"]` )
|
|
||||||
).closest('.slides section');
|
|
||||||
}
|
}
|
||||||
catch ( error ) { }
|
catch ( error ) { }
|
||||||
|
|
||||||
if( slide ) {
|
if( element ) {
|
||||||
return { ...this.Reveal.getIndices( slide ), f };
|
return { ...this.Reveal.getIndices( element ), f };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
const config = this.Reveal.getConfig();
|
const config = this.Reveal.getConfig();
|
||||||
let hashIndexBase = config.hashOneBasedIndex || options.oneBasedIndex ? 1 : 0;
|
let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
|
||||||
|
|
||||||
// Read the index components of the hash
|
// Read the index components of the hash
|
||||||
let h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,
|
let h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,
|
||||||
@@ -143,7 +139,7 @@ export default class Location {
|
|||||||
let hash = this.getHash();
|
let hash = this.getHash();
|
||||||
|
|
||||||
// If we're configured to push to history OR the history
|
// If we're configured to push to history OR the history
|
||||||
// API is not available.
|
// API is not avaialble.
|
||||||
if( config.history ) {
|
if( config.history ) {
|
||||||
window.location.hash = hash;
|
window.location.hash = hash;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,12 +38,10 @@ export default class Notes {
|
|||||||
*/
|
*/
|
||||||
update() {
|
update() {
|
||||||
|
|
||||||
if( this.Reveal.getConfig().showNotes &&
|
if( this.Reveal.getConfig().showNotes && this.element && this.Reveal.getCurrentSlide() && !this.Reveal.print.isPrintingPDF() ) {
|
||||||
this.element && this.Reveal.getCurrentSlide() &&
|
|
||||||
!this.Reveal.isScrollView() &&
|
|
||||||
!this.Reveal.isPrintView()
|
|
||||||
) {
|
|
||||||
this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
|
this.element.innerHTML = this.getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -56,11 +54,7 @@ export default class Notes {
|
|||||||
*/
|
*/
|
||||||
updateVisibility() {
|
updateVisibility() {
|
||||||
|
|
||||||
if( this.Reveal.getConfig().showNotes &&
|
if( this.Reveal.getConfig().showNotes && this.hasNotes() && !this.Reveal.print.isPrintingPDF() ) {
|
||||||
this.hasNotes() &&
|
|
||||||
!this.Reveal.isScrollView() &&
|
|
||||||
!this.Reveal.isPrintView()
|
|
||||||
) {
|
|
||||||
this.Reveal.getRevealElement().classList.add( 'show-notes' );
|
this.Reveal.getRevealElement().classList.add( 'show-notes' );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|||||||
@@ -1,389 +0,0 @@
|
|||||||
/**
|
|
||||||
* Handles the display of reveal.js' overlay elements used
|
|
||||||
* to preview iframes, images & videos.
|
|
||||||
*/
|
|
||||||
export default class Overlay {
|
|
||||||
|
|
||||||
constructor( Reveal ) {
|
|
||||||
|
|
||||||
this.Reveal = Reveal;
|
|
||||||
|
|
||||||
this.onSlidesClicked = this.onSlidesClicked.bind( this );
|
|
||||||
|
|
||||||
this.iframeTriggerSelector = null;
|
|
||||||
this.mediaTriggerSelector = '[data-preview-image], [data-preview-video]';
|
|
||||||
|
|
||||||
this.stateProps = ['previewIframe', 'previewImage', 'previewVideo', 'previewFit'];
|
|
||||||
this.state = {};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
update() {
|
|
||||||
|
|
||||||
// Enable link previews globally
|
|
||||||
if( this.Reveal.getConfig().previewLinks ) {
|
|
||||||
this.iframeTriggerSelector = 'a[href]:not([data-preview-link=false]), [data-preview-link]:not(a):not([data-preview-link=false])';
|
|
||||||
}
|
|
||||||
// Enable link previews for individual elements
|
|
||||||
else {
|
|
||||||
this.iframeTriggerSelector = '[data-preview-link]:not([data-preview-link=false])';
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasLinkPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.iframeTriggerSelector ).length > 0;
|
|
||||||
const hasMediaPreviews = this.Reveal.getSlidesElement().querySelectorAll( this.mediaTriggerSelector ).length > 0;
|
|
||||||
|
|
||||||
// Only add the listener when there are previewable elements in the slides
|
|
||||||
if( hasLinkPreviews || hasMediaPreviews ) {
|
|
||||||
this.Reveal.getSlidesElement().addEventListener( 'click', this.onSlidesClicked, false );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.getSlidesElement().removeEventListener( 'click', this.onSlidesClicked, false );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
createOverlay( className ) {
|
|
||||||
|
|
||||||
this.dom = document.createElement( 'div' );
|
|
||||||
this.dom.classList.add( 'r-overlay' );
|
|
||||||
this.dom.classList.add( className );
|
|
||||||
|
|
||||||
this.viewport = document.createElement( 'div' );
|
|
||||||
this.viewport.classList.add( 'r-overlay-viewport' );
|
|
||||||
|
|
||||||
this.dom.appendChild( this.viewport );
|
|
||||||
this.Reveal.getRevealElement().appendChild( this.dom );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Opens a lightbox that previews the target URL.
|
|
||||||
*
|
|
||||||
* @param {string} url - url for lightbox iframe src
|
|
||||||
*/
|
|
||||||
previewIframe( url ) {
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
|
|
||||||
this.state = { previewIframe: url };
|
|
||||||
|
|
||||||
this.createOverlay( 'r-overlay-preview' );
|
|
||||||
this.dom.dataset.state = 'loading';
|
|
||||||
|
|
||||||
this.viewport.innerHTML =
|
|
||||||
`<header class="r-overlay-header">
|
|
||||||
<a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
|
|
||||||
<button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
|
|
||||||
</header>
|
|
||||||
<div class="r-overlay-spinner"></div>
|
|
||||||
<div class="r-overlay-content">
|
|
||||||
<iframe src="${url}"></iframe>
|
|
||||||
<small class="r-overlay-content-inner">
|
|
||||||
<span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
|
|
||||||
</small>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
this.dom.querySelector( 'iframe' ).addEventListener( 'load', event => {
|
|
||||||
this.dom.dataset.state = 'loaded';
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
|
|
||||||
this.close();
|
|
||||||
event.preventDefault();
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.dom.querySelector( '.r-overlay-external' ).addEventListener( 'click', event => {
|
|
||||||
this.close();
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.Reveal.dispatchEvent({ type: 'previewiframe', data: { url } });
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Opens a lightbox window that provides a larger view of the
|
|
||||||
* given image/video.
|
|
||||||
*
|
|
||||||
* @param {string} url - url to the image/video to preview
|
|
||||||
* @param {image|video} mediaType
|
|
||||||
* @param {string} [fitMode] - the fit mode to use for the preview
|
|
||||||
*/
|
|
||||||
previewMedia( url, mediaType, fitMode ) {
|
|
||||||
|
|
||||||
if( mediaType !== 'image' && mediaType !== 'video' ) {
|
|
||||||
console.warn( 'Please specify a valid media type to preview (image|video)' );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
|
|
||||||
fitMode = fitMode || 'scale-down';
|
|
||||||
|
|
||||||
this.createOverlay( 'r-overlay-preview' );
|
|
||||||
this.dom.dataset.state = 'loading';
|
|
||||||
this.dom.dataset.previewFit = fitMode;
|
|
||||||
|
|
||||||
this.viewport.innerHTML =
|
|
||||||
`<header class="r-overlay-header">
|
|
||||||
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
|
|
||||||
</header>
|
|
||||||
<div class="r-overlay-spinner"></div>
|
|
||||||
<div class="r-overlay-content"></div>`;
|
|
||||||
|
|
||||||
const contentElement = this.dom.querySelector( '.r-overlay-content' );
|
|
||||||
|
|
||||||
if( mediaType === 'image' ) {
|
|
||||||
|
|
||||||
this.state = { previewImage: url, previewFit: fitMode }
|
|
||||||
|
|
||||||
const img = document.createElement( 'img', {} );
|
|
||||||
img.src = url;
|
|
||||||
contentElement.appendChild( img );
|
|
||||||
|
|
||||||
img.addEventListener( 'load', () => {
|
|
||||||
this.dom.dataset.state = 'loaded';
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
img.addEventListener( 'error', () => {
|
|
||||||
this.dom.dataset.state = 'error';
|
|
||||||
contentElement.innerHTML =
|
|
||||||
`<span class="r-overlay-error">Unable to load image.</span>`
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
// Hide image overlays when clicking outside the overlay
|
|
||||||
this.dom.style.cursor = 'zoom-out';
|
|
||||||
this.dom.addEventListener( 'click', ( event ) => {
|
|
||||||
this.close();
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.Reveal.dispatchEvent({ type: 'previewimage', data: { url } });
|
|
||||||
|
|
||||||
}
|
|
||||||
else if( mediaType === 'video' ) {
|
|
||||||
|
|
||||||
this.state = { previewVideo: url, previewFit: fitMode }
|
|
||||||
|
|
||||||
const video = document.createElement( 'video' );
|
|
||||||
video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
|
|
||||||
video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
|
|
||||||
video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
|
|
||||||
video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
|
|
||||||
video.playsInline = true;
|
|
||||||
video.src = url;
|
|
||||||
contentElement.appendChild( video );
|
|
||||||
|
|
||||||
video.addEventListener( 'loadeddata', () => {
|
|
||||||
this.dom.dataset.state = 'loaded';
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
video.addEventListener( 'error', () => {
|
|
||||||
this.dom.dataset.state = 'error';
|
|
||||||
contentElement.innerHTML =
|
|
||||||
`<span class="r-overlay-error">Unable to load video.</span>`;
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.Reveal.dispatchEvent({ type: 'previewvideo', data: { url } });
|
|
||||||
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
throw new Error( 'Please specify a valid media type to preview' );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
|
|
||||||
this.close();
|
|
||||||
event.preventDefault();
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
previewImage( url, fitMode ) {
|
|
||||||
|
|
||||||
this.previewMedia( url, 'image', fitMode );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
previewVideo( url, fitMode ) {
|
|
||||||
|
|
||||||
this.previewMedia( url, 'video', fitMode );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Open or close help overlay window.
|
|
||||||
*
|
|
||||||
* @param {Boolean} [override] Flag which overrides the
|
|
||||||
* toggle logic and forcibly sets the desired state. True means
|
|
||||||
* help is open, false means it's closed.
|
|
||||||
*/
|
|
||||||
toggleHelp( override ) {
|
|
||||||
|
|
||||||
if( typeof override === 'boolean' ) {
|
|
||||||
override ? this.showHelp() : this.close();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if( this.dom ) {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.showHelp();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Opens an overlay window with help material.
|
|
||||||
*/
|
|
||||||
showHelp() {
|
|
||||||
|
|
||||||
if( this.Reveal.getConfig().help ) {
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
|
|
||||||
this.createOverlay( 'r-overlay-help' );
|
|
||||||
|
|
||||||
let html = '<p class="title">Keyboard Shortcuts</p>';
|
|
||||||
|
|
||||||
let shortcuts = this.Reveal.keyboard.getShortcuts(),
|
|
||||||
bindings = this.Reveal.keyboard.getBindings();
|
|
||||||
|
|
||||||
html += '<table><th>KEY</th><th>ACTION</th>';
|
|
||||||
for( let key in shortcuts ) {
|
|
||||||
html += `<tr><td>${key}</td><td>${shortcuts[ key ]}</td></tr>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add custom key bindings that have associated descriptions
|
|
||||||
for( let binding in bindings ) {
|
|
||||||
if( bindings[binding].key && bindings[binding].description ) {
|
|
||||||
html += `<tr><td>${bindings[binding].key}</td><td>${bindings[binding].description}</td></tr>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</table>';
|
|
||||||
|
|
||||||
this.viewport.innerHTML = `
|
|
||||||
<header class="r-overlay-header">
|
|
||||||
<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
|
|
||||||
</header>
|
|
||||||
<div class="r-overlay-content">
|
|
||||||
<div class="r-overlay-help-content">${html}</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', event => {
|
|
||||||
this.close();
|
|
||||||
event.preventDefault();
|
|
||||||
}, false );
|
|
||||||
|
|
||||||
this.Reveal.dispatchEvent({ type: 'showhelp' });
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
isOpen() {
|
|
||||||
|
|
||||||
return !!this.dom;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Closes any currently open overlay.
|
|
||||||
*/
|
|
||||||
close() {
|
|
||||||
|
|
||||||
if( this.dom ) {
|
|
||||||
this.dom.remove();
|
|
||||||
this.dom = null;
|
|
||||||
|
|
||||||
this.state = {};
|
|
||||||
|
|
||||||
this.Reveal.dispatchEvent({ type: 'closeoverlay' });
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
getState() {
|
|
||||||
|
|
||||||
return this.state;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
setState( state ) {
|
|
||||||
|
|
||||||
// Ignore the incoming state if none of the preview related
|
|
||||||
// props have changed
|
|
||||||
if( this.stateProps.every( key => this.state[ key ] === state[ key ] ) ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if( state.previewIframe ) {
|
|
||||||
this.previewIframe( state.previewIframe );
|
|
||||||
}
|
|
||||||
else if( state.previewImage ) {
|
|
||||||
this.previewImage( state.previewImage, state.previewFit );
|
|
||||||
}
|
|
||||||
else if( state.previewVideo ) {
|
|
||||||
this.previewVideo( state.previewVideo, state.previewFit );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onSlidesClicked( event ) {
|
|
||||||
|
|
||||||
const target = event.target;
|
|
||||||
|
|
||||||
const linkTarget = target.closest( this.iframeTriggerSelector );
|
|
||||||
const mediaTarget = target.closest( this.mediaTriggerSelector );
|
|
||||||
|
|
||||||
// Was an iframe lightbox trigger clicked?
|
|
||||||
if( linkTarget ) {
|
|
||||||
if( event.metaKey || event.shiftKey || event.altKey ) {
|
|
||||||
// Let the browser handle meta keys naturally so users can cmd+click
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let url = linkTarget.getAttribute( 'href' ) || linkTarget.getAttribute( 'data-preview-link' );
|
|
||||||
if( url ) {
|
|
||||||
this.previewIframe( url );
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Was a media lightbox trigger clicked?
|
|
||||||
else if( mediaTarget ) {
|
|
||||||
if( mediaTarget.hasAttribute( 'data-preview-image' ) ) {
|
|
||||||
let url = mediaTarget.dataset.previewImage || mediaTarget.getAttribute( 'src' );
|
|
||||||
if( url ) {
|
|
||||||
this.previewImage( url, mediaTarget.dataset.previewFit );
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if( mediaTarget.hasAttribute( 'data-preview-video' ) ) {
|
|
||||||
let url = mediaTarget.dataset.previewVideo || mediaTarget.getAttribute( 'src' );
|
|
||||||
if( !url ) {
|
|
||||||
let source = mediaTarget.querySelector( 'source' );
|
|
||||||
if( source ) {
|
|
||||||
url = source.getAttribute( 'src' );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if( url ) {
|
|
||||||
this.previewVideo( url, mediaTarget.dataset.previewFit );
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy() {
|
|
||||||
|
|
||||||
this.close();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -24,7 +24,7 @@ export default class Overview {
|
|||||||
activate() {
|
activate() {
|
||||||
|
|
||||||
// Only proceed if enabled in config
|
// Only proceed if enabled in config
|
||||||
if( this.Reveal.getConfig().overview && !this.Reveal.isScrollView() && !this.isActive() ) {
|
if( this.Reveal.getConfig().overview && !this.isActive() ) {
|
||||||
|
|
||||||
this.active = true;
|
this.active = true;
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export default class Plugins {
|
|||||||
// Flags our current state (idle -> loading -> loaded)
|
// Flags our current state (idle -> loading -> loaded)
|
||||||
this.state = 'idle';
|
this.state = 'idle';
|
||||||
|
|
||||||
// An id:instance map of currently registered plugins
|
// An id:instance map of currently registed plugins
|
||||||
this.registeredPlugins = {};
|
this.registeredPlugins = {};
|
||||||
|
|
||||||
this.asyncDependencies = [];
|
this.asyncDependencies = [];
|
||||||
@@ -171,7 +171,7 @@ export default class Plugins {
|
|||||||
/**
|
/**
|
||||||
* Registers a new plugin with this reveal.js instance.
|
* Registers a new plugin with this reveal.js instance.
|
||||||
*
|
*
|
||||||
* reveal.js waits for all registered plugins to initialize
|
* reveal.js waits for all regisered plugins to initialize
|
||||||
* before considering itself ready, as long as the plugin
|
* before considering itself ready, as long as the plugin
|
||||||
* is registered before calling `Reveal.initialize()`.
|
* is registered before calling `Reveal.initialize()`.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -27,10 +27,12 @@ export default class Pointer {
|
|||||||
configure( config, oldConfig ) {
|
configure( config, oldConfig ) {
|
||||||
|
|
||||||
if( config.mouseWheel ) {
|
if( config.mouseWheel ) {
|
||||||
document.addEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
document.addEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
|
||||||
|
document.addEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false ); // FF
|
||||||
|
document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auto-hide the mouse pointer when its inactive
|
// Auto-hide the mouse pointer when its inactive
|
||||||
@@ -77,7 +79,8 @@ export default class Pointer {
|
|||||||
|
|
||||||
this.showCursor();
|
this.showCursor();
|
||||||
|
|
||||||
document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );
|
||||||
|
document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
|
||||||
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
|
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
|
||||||
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
|
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
|
||||||
|
|
||||||
@@ -123,4 +126,4 @@ export default class Pointer {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -4,7 +4,7 @@ import { queryAll, createStyleSheet } from '../utils/util.js'
|
|||||||
/**
|
/**
|
||||||
* Setups up our presentation for printing/exporting to PDF.
|
* Setups up our presentation for printing/exporting to PDF.
|
||||||
*/
|
*/
|
||||||
export default class PrintView {
|
export default class Print {
|
||||||
|
|
||||||
constructor( Reveal ) {
|
constructor( Reveal ) {
|
||||||
|
|
||||||
@@ -16,7 +16,7 @@ export default class PrintView {
|
|||||||
* Configures the presentation for printing to a static
|
* Configures the presentation for printing to a static
|
||||||
* PDF.
|
* PDF.
|
||||||
*/
|
*/
|
||||||
async activate() {
|
async setupPDF() {
|
||||||
|
|
||||||
const config = this.Reveal.getConfig();
|
const config = this.Reveal.getConfig();
|
||||||
const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
|
const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
|
||||||
@@ -42,11 +42,11 @@ export default class PrintView {
|
|||||||
// Limit the size of certain elements to the dimensions of the slide
|
// Limit the size of certain elements to the dimensions of the slide
|
||||||
createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
|
createStyleSheet( '.reveal section>img, .reveal section>video, .reveal section>iframe{max-width: '+ slideWidth +'px; max-height:'+ slideHeight +'px}' );
|
||||||
|
|
||||||
document.documentElement.classList.add( 'reveal-print', 'print-pdf' );
|
document.documentElement.classList.add( 'print-pdf' );
|
||||||
document.body.style.width = pageWidth + 'px';
|
document.body.style.width = pageWidth + 'px';
|
||||||
document.body.style.height = pageHeight + 'px';
|
document.body.style.height = pageHeight + 'px';
|
||||||
|
|
||||||
const viewportElement = this.Reveal.getViewportElement();
|
const viewportElement = document.querySelector( '.reveal-viewport' );
|
||||||
let presentationBackground;
|
let presentationBackground;
|
||||||
if( viewportElement ) {
|
if( viewportElement ) {
|
||||||
const viewportStyles = window.getComputedStyle( viewportElement );
|
const viewportStyles = window.getComputedStyle( viewportElement );
|
||||||
@@ -223,17 +223,15 @@ export default class PrintView {
|
|||||||
// Notify subscribers that the PDF layout is good to go
|
// Notify subscribers that the PDF layout is good to go
|
||||||
this.Reveal.dispatchEvent({ type: 'pdf-ready' });
|
this.Reveal.dispatchEvent({ type: 'pdf-ready' });
|
||||||
|
|
||||||
viewportElement.classList.remove( 'loading-scroll-mode' );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Checks if the print mode is/should be activated.
|
* Checks if this instance is being used to print a PDF.
|
||||||
*/
|
*/
|
||||||
isActive() {
|
isPrintingPDF() {
|
||||||
|
|
||||||
return this.Reveal.getConfig().view === 'print';
|
return ( /print-pdf/gi ).test( window.location.search );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,923 +0,0 @@
|
|||||||
import { HORIZONTAL_SLIDES_SELECTOR, HORIZONTAL_BACKGROUNDS_SELECTOR } from '../utils/constants.js'
|
|
||||||
import { queryAll } from '../utils/util.js'
|
|
||||||
|
|
||||||
const HIDE_SCROLLBAR_TIMEOUT = 500;
|
|
||||||
const MAX_PROGRESS_SPACING = 4;
|
|
||||||
const MIN_PROGRESS_SEGMENT_HEIGHT = 6;
|
|
||||||
const MIN_PLAYHEAD_HEIGHT = 8;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The scroll view lets you read a reveal.js presentation
|
|
||||||
* as a linear scrollable page.
|
|
||||||
*/
|
|
||||||
export default class ScrollView {
|
|
||||||
|
|
||||||
constructor( Reveal ) {
|
|
||||||
|
|
||||||
this.Reveal = Reveal;
|
|
||||||
|
|
||||||
this.active = false;
|
|
||||||
this.activatedCallbacks = [];
|
|
||||||
|
|
||||||
this.onScroll = this.onScroll.bind( this );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Activates the scroll view. This rearranges the presentation DOM
|
|
||||||
* by—among other things—wrapping each slide in a page element.
|
|
||||||
*/
|
|
||||||
activate() {
|
|
||||||
|
|
||||||
if( this.active ) return;
|
|
||||||
|
|
||||||
const stateBeforeActivation = this.Reveal.getState();
|
|
||||||
|
|
||||||
this.active = true;
|
|
||||||
|
|
||||||
// Store the full presentation HTML so that we can restore it
|
|
||||||
// when/if the scroll view is deactivated
|
|
||||||
this.slideHTMLBeforeActivation = this.Reveal.getSlidesElement().innerHTML;
|
|
||||||
|
|
||||||
const horizontalSlides = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_SLIDES_SELECTOR );
|
|
||||||
const horizontalBackgrounds = queryAll( this.Reveal.getRevealElement(), HORIZONTAL_BACKGROUNDS_SELECTOR );
|
|
||||||
|
|
||||||
this.viewportElement.classList.add( 'loading-scroll-mode', 'reveal-scroll' );
|
|
||||||
|
|
||||||
let presentationBackground;
|
|
||||||
|
|
||||||
const viewportStyles = window.getComputedStyle( this.viewportElement );
|
|
||||||
if( viewportStyles && viewportStyles.background ) {
|
|
||||||
presentationBackground = viewportStyles.background;
|
|
||||||
}
|
|
||||||
|
|
||||||
const pageElements = [];
|
|
||||||
const pageContainer = horizontalSlides[0].parentNode;
|
|
||||||
|
|
||||||
let previousSlide;
|
|
||||||
|
|
||||||
// Creates a new page element and appends the given slide/bg
|
|
||||||
// to it.
|
|
||||||
const createPageElement = ( slide, h, v, isVertical ) => {
|
|
||||||
|
|
||||||
let contentContainer;
|
|
||||||
|
|
||||||
// If this slide is part of an auto-animation sequence, we
|
|
||||||
// group it under the same page element as the previous slide
|
|
||||||
if( previousSlide && this.Reveal.shouldAutoAnimateBetween( previousSlide, slide ) ) {
|
|
||||||
contentContainer = document.createElement( 'div' );
|
|
||||||
contentContainer.className = 'scroll-page-content scroll-auto-animate-page';
|
|
||||||
contentContainer.style.display = 'none';
|
|
||||||
previousSlide.closest( '.scroll-page-content' ).parentNode.appendChild( contentContainer );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Wrap the slide in a page element and hide its overflow
|
|
||||||
// so that no page ever flows onto another
|
|
||||||
const page = document.createElement( 'div' );
|
|
||||||
page.className = 'scroll-page';
|
|
||||||
pageElements.push( page );
|
|
||||||
|
|
||||||
// This transfers over the background of the vertical stack containing
|
|
||||||
// the slide if it exists. Otherwise, it uses the presentation-wide
|
|
||||||
// background.
|
|
||||||
if( isVertical && horizontalBackgrounds.length > h ) {
|
|
||||||
const slideBackground = horizontalBackgrounds[h];
|
|
||||||
const pageBackground = window.getComputedStyle( slideBackground );
|
|
||||||
|
|
||||||
if( pageBackground && pageBackground.background ) {
|
|
||||||
page.style.background = pageBackground.background;
|
|
||||||
}
|
|
||||||
else if( presentationBackground ) {
|
|
||||||
page.style.background = presentationBackground;
|
|
||||||
}
|
|
||||||
} else if( presentationBackground ) {
|
|
||||||
page.style.background = presentationBackground;
|
|
||||||
}
|
|
||||||
|
|
||||||
const stickyContainer = document.createElement( 'div' );
|
|
||||||
stickyContainer.className = 'scroll-page-sticky';
|
|
||||||
page.appendChild( stickyContainer );
|
|
||||||
|
|
||||||
contentContainer = document.createElement( 'div' );
|
|
||||||
contentContainer.className = 'scroll-page-content';
|
|
||||||
stickyContainer.appendChild( contentContainer );
|
|
||||||
}
|
|
||||||
|
|
||||||
contentContainer.appendChild( slide );
|
|
||||||
|
|
||||||
slide.classList.remove( 'past', 'future' );
|
|
||||||
slide.setAttribute( 'data-index-h', h );
|
|
||||||
slide.setAttribute( 'data-index-v', v );
|
|
||||||
|
|
||||||
if( slide.slideBackgroundElement ) {
|
|
||||||
slide.slideBackgroundElement.remove( 'past', 'future' );
|
|
||||||
contentContainer.insertBefore( slide.slideBackgroundElement, slide );
|
|
||||||
}
|
|
||||||
|
|
||||||
previousSlide = slide;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Slide and slide background layout
|
|
||||||
horizontalSlides.forEach( ( horizontalSlide, h ) => {
|
|
||||||
|
|
||||||
if( this.Reveal.isVerticalStack( horizontalSlide ) ) {
|
|
||||||
horizontalSlide.querySelectorAll( 'section' ).forEach( ( verticalSlide, v ) => {
|
|
||||||
createPageElement( verticalSlide, h, v, true );
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
createPageElement( horizontalSlide, h, 0 );
|
|
||||||
}
|
|
||||||
|
|
||||||
}, this );
|
|
||||||
|
|
||||||
this.createProgressBar();
|
|
||||||
|
|
||||||
// Remove leftover stacks
|
|
||||||
queryAll( this.Reveal.getRevealElement(), '.stack' ).forEach( stack => stack.remove() );
|
|
||||||
|
|
||||||
// Add our newly created pages to the DOM
|
|
||||||
pageElements.forEach( page => pageContainer.appendChild( page ) );
|
|
||||||
|
|
||||||
// Re-run JS-based content layout after the slide is added to page DOM
|
|
||||||
this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
|
|
||||||
|
|
||||||
this.Reveal.layout();
|
|
||||||
this.Reveal.setState( stateBeforeActivation );
|
|
||||||
|
|
||||||
this.activatedCallbacks.forEach( callback => callback() );
|
|
||||||
this.activatedCallbacks = [];
|
|
||||||
|
|
||||||
this.restoreScrollPosition();
|
|
||||||
|
|
||||||
this.viewportElement.classList.remove( 'loading-scroll-mode' );
|
|
||||||
this.viewportElement.addEventListener( 'scroll', this.onScroll, { passive: true } );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Deactivates the scroll view and restores the standard slide-based
|
|
||||||
* presentation.
|
|
||||||
*/
|
|
||||||
deactivate() {
|
|
||||||
|
|
||||||
if( !this.active ) return;
|
|
||||||
|
|
||||||
const stateBeforeDeactivation = this.Reveal.getState();
|
|
||||||
|
|
||||||
this.active = false;
|
|
||||||
|
|
||||||
this.viewportElement.removeEventListener( 'scroll', this.onScroll );
|
|
||||||
this.viewportElement.classList.remove( 'reveal-scroll' );
|
|
||||||
|
|
||||||
this.removeProgressBar();
|
|
||||||
|
|
||||||
this.Reveal.getSlidesElement().innerHTML = this.slideHTMLBeforeActivation;
|
|
||||||
this.Reveal.sync();
|
|
||||||
this.Reveal.setState( stateBeforeDeactivation );
|
|
||||||
|
|
||||||
this.slideHTMLBeforeActivation = null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle( override ) {
|
|
||||||
|
|
||||||
if( typeof override === 'boolean' ) {
|
|
||||||
override ? this.activate() : this.deactivate();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.isActive() ? this.deactivate() : this.activate();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks if the scroll view is currently active.
|
|
||||||
*/
|
|
||||||
isActive() {
|
|
||||||
|
|
||||||
return this.active;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders the progress bar component.
|
|
||||||
*/
|
|
||||||
createProgressBar() {
|
|
||||||
|
|
||||||
this.progressBar = document.createElement( 'div' );
|
|
||||||
this.progressBar.className = 'scrollbar';
|
|
||||||
|
|
||||||
this.progressBarInner = document.createElement( 'div' );
|
|
||||||
this.progressBarInner.className = 'scrollbar-inner';
|
|
||||||
this.progressBar.appendChild( this.progressBarInner );
|
|
||||||
|
|
||||||
this.progressBarPlayhead = document.createElement( 'div' );
|
|
||||||
this.progressBarPlayhead.className = 'scrollbar-playhead';
|
|
||||||
this.progressBarInner.appendChild( this.progressBarPlayhead );
|
|
||||||
|
|
||||||
this.viewportElement.insertBefore( this.progressBar, this.viewportElement.firstChild );
|
|
||||||
|
|
||||||
const handleDocumentMouseMove = ( event ) => {
|
|
||||||
|
|
||||||
let progress = ( event.clientY - this.progressBarInner.getBoundingClientRect().top ) / this.progressBarHeight;
|
|
||||||
progress = Math.max( Math.min( progress, 1 ), 0 );
|
|
||||||
|
|
||||||
this.viewportElement.scrollTop = progress * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDocumentMouseUp = ( event ) => {
|
|
||||||
|
|
||||||
this.draggingProgressBar = false;
|
|
||||||
this.showProgressBar();
|
|
||||||
|
|
||||||
document.removeEventListener( 'mousemove', handleDocumentMouseMove );
|
|
||||||
document.removeEventListener( 'mouseup', handleDocumentMouseUp );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseDown = ( event ) => {
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
this.draggingProgressBar = true;
|
|
||||||
|
|
||||||
document.addEventListener( 'mousemove', handleDocumentMouseMove );
|
|
||||||
document.addEventListener( 'mouseup', handleDocumentMouseUp );
|
|
||||||
|
|
||||||
handleDocumentMouseMove( event );
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
this.progressBarInner.addEventListener( 'mousedown', handleMouseDown );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
removeProgressBar() {
|
|
||||||
|
|
||||||
if( this.progressBar ) {
|
|
||||||
this.progressBar.remove();
|
|
||||||
this.progressBar = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
layout() {
|
|
||||||
|
|
||||||
if( this.isActive() ) {
|
|
||||||
this.syncPages();
|
|
||||||
this.syncScrollPosition();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates our pages to match the latest configuration and
|
|
||||||
* presentation size.
|
|
||||||
*/
|
|
||||||
syncPages() {
|
|
||||||
|
|
||||||
const config = this.Reveal.getConfig();
|
|
||||||
|
|
||||||
const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
|
|
||||||
const scale = this.Reveal.getScale();
|
|
||||||
const useCompactLayout = config.scrollLayout === 'compact';
|
|
||||||
|
|
||||||
const viewportHeight = this.viewportElement.offsetHeight;
|
|
||||||
const compactHeight = slideSize.height * scale;
|
|
||||||
const pageHeight = useCompactLayout ? compactHeight : viewportHeight;
|
|
||||||
|
|
||||||
// The height that needs to be scrolled between scroll triggers
|
|
||||||
this.scrollTriggerHeight = useCompactLayout ? compactHeight : viewportHeight;
|
|
||||||
|
|
||||||
this.viewportElement.style.setProperty( '--page-height', pageHeight + 'px' );
|
|
||||||
this.viewportElement.style.scrollSnapType = typeof config.scrollSnap === 'string' ? `y ${config.scrollSnap}` : '';
|
|
||||||
|
|
||||||
// This will hold all scroll triggers used to show/hide slides
|
|
||||||
this.slideTriggers = [];
|
|
||||||
|
|
||||||
const pageElements = Array.from( this.Reveal.getRevealElement().querySelectorAll( '.scroll-page' ) );
|
|
||||||
|
|
||||||
this.pages = pageElements.map( pageElement => {
|
|
||||||
const page = this.createPage({
|
|
||||||
pageElement,
|
|
||||||
slideElement: pageElement.querySelector( 'section' ),
|
|
||||||
stickyElement: pageElement.querySelector( '.scroll-page-sticky' ),
|
|
||||||
contentElement: pageElement.querySelector( '.scroll-page-content' ),
|
|
||||||
backgroundElement: pageElement.querySelector( '.slide-background' ),
|
|
||||||
autoAnimateElements: pageElement.querySelectorAll( '.scroll-auto-animate-page' ),
|
|
||||||
autoAnimatePages: []
|
|
||||||
});
|
|
||||||
|
|
||||||
page.pageElement.style.setProperty( '--slide-height', config.center === true ? 'auto' : slideSize.height + 'px' );
|
|
||||||
|
|
||||||
this.slideTriggers.push({
|
|
||||||
page: page,
|
|
||||||
activate: () => this.activatePage( page ),
|
|
||||||
deactivate: () => this.deactivatePage( page )
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create scroll triggers that show/hide fragments
|
|
||||||
this.createFragmentTriggersForPage( page );
|
|
||||||
|
|
||||||
// Create scroll triggers for triggering auto-animate steps
|
|
||||||
if( page.autoAnimateElements.length > 0 ) {
|
|
||||||
this.createAutoAnimateTriggersForPage( page );
|
|
||||||
}
|
|
||||||
|
|
||||||
let totalScrollTriggerCount = Math.max( page.scrollTriggers.length - 1, 0 );
|
|
||||||
|
|
||||||
// Each auto-animate step may include its own scroll triggers
|
|
||||||
// for fragments, ensure we count those as well
|
|
||||||
totalScrollTriggerCount += page.autoAnimatePages.reduce( ( total, page ) => {
|
|
||||||
return total + Math.max( page.scrollTriggers.length - 1, 0 );
|
|
||||||
}, page.autoAnimatePages.length );
|
|
||||||
|
|
||||||
// Clean up from previous renders
|
|
||||||
page.pageElement.querySelectorAll( '.scroll-snap-point' ).forEach( el => el.remove() );
|
|
||||||
|
|
||||||
// Create snap points for all scroll triggers
|
|
||||||
// - Can't be absolute in FF
|
|
||||||
// - Can't be 0-height in Safari
|
|
||||||
// - Can't use snap-align on parent in Safari because then
|
|
||||||
// inner triggers won't work
|
|
||||||
for( let i = 0; i < totalScrollTriggerCount + 1; i++ ) {
|
|
||||||
const triggerStick = document.createElement( 'div' );
|
|
||||||
triggerStick.className = 'scroll-snap-point';
|
|
||||||
triggerStick.style.height = this.scrollTriggerHeight + 'px';
|
|
||||||
triggerStick.style.scrollSnapAlign = useCompactLayout ? 'center' : 'start';
|
|
||||||
page.pageElement.appendChild( triggerStick );
|
|
||||||
|
|
||||||
if( i === 0 ) {
|
|
||||||
triggerStick.style.marginTop = -this.scrollTriggerHeight + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// In the compact layout, only slides with scroll triggers cover the
|
|
||||||
// full viewport height. This helps avoid empty gaps before or after
|
|
||||||
// a sticky slide.
|
|
||||||
if( useCompactLayout && page.scrollTriggers.length > 0 ) {
|
|
||||||
page.pageHeight = viewportHeight;
|
|
||||||
page.pageElement.style.setProperty( '--page-height', viewportHeight + 'px' );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
page.pageHeight = pageHeight;
|
|
||||||
page.pageElement.style.removeProperty( '--page-height' );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add scroll padding based on how many scroll triggers we have
|
|
||||||
page.scrollPadding = this.scrollTriggerHeight * totalScrollTriggerCount;
|
|
||||||
|
|
||||||
// The total height including scrollable space
|
|
||||||
page.totalHeight = page.pageHeight + page.scrollPadding;
|
|
||||||
|
|
||||||
// This is used to pad the height of our page in CSS
|
|
||||||
page.pageElement.style.setProperty( '--page-scroll-padding', page.scrollPadding + 'px' );
|
|
||||||
|
|
||||||
// If this is a sticky page, stick it to the vertical center
|
|
||||||
if( totalScrollTriggerCount > 0 ) {
|
|
||||||
page.stickyElement.style.position = 'sticky';
|
|
||||||
page.stickyElement.style.top = Math.max( ( viewportHeight - page.pageHeight ) / 2, 0 ) + 'px';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
page.stickyElement.style.position = 'relative';
|
|
||||||
page.pageElement.style.scrollSnapAlign = page.pageHeight < viewportHeight ? 'center' : 'start';
|
|
||||||
}
|
|
||||||
|
|
||||||
return page;
|
|
||||||
} );
|
|
||||||
|
|
||||||
this.setTriggerRanges();
|
|
||||||
|
|
||||||
/*
|
|
||||||
console.log(this.slideTriggers.map( t => {
|
|
||||||
return {
|
|
||||||
range: `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`,
|
|
||||||
triggers: t.page.scrollTriggers.map( t => {
|
|
||||||
return `${t.range[0].toFixed(2)}-${t.range[1].toFixed(2)}`
|
|
||||||
}).join( ', ' ),
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
*/
|
|
||||||
|
|
||||||
this.viewportElement.setAttribute( 'data-scrollbar', config.scrollProgress );
|
|
||||||
|
|
||||||
if( config.scrollProgress && this.totalScrollTriggerCount > 1 ) {
|
|
||||||
// Create the progress bar if it doesn't already exist
|
|
||||||
if( !this.progressBar ) this.createProgressBar();
|
|
||||||
|
|
||||||
this.syncProgressBar();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.removeProgressBar();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Calculates and sets the scroll range for all of our scroll
|
|
||||||
* triggers.
|
|
||||||
*/
|
|
||||||
setTriggerRanges() {
|
|
||||||
|
|
||||||
// Calculate the total number of scroll triggers
|
|
||||||
this.totalScrollTriggerCount = this.slideTriggers.reduce( ( total, trigger ) => {
|
|
||||||
return total + Math.max( trigger.page.scrollTriggers.length, 1 );
|
|
||||||
}, 0 );
|
|
||||||
|
|
||||||
let rangeStart = 0;
|
|
||||||
|
|
||||||
// Calculate the scroll range of each scroll trigger on a scale
|
|
||||||
// of 0-1
|
|
||||||
this.slideTriggers.forEach( ( trigger, i ) => {
|
|
||||||
trigger.range = [
|
|
||||||
rangeStart,
|
|
||||||
rangeStart + Math.max( trigger.page.scrollTriggers.length, 1 ) / this.totalScrollTriggerCount
|
|
||||||
];
|
|
||||||
|
|
||||||
const scrollTriggerSegmentSize = ( trigger.range[1] - trigger.range[0] ) / trigger.page.scrollTriggers.length;
|
|
||||||
// Set the range for each inner scroll trigger
|
|
||||||
trigger.page.scrollTriggers.forEach( ( scrollTrigger, i ) => {
|
|
||||||
scrollTrigger.range = [
|
|
||||||
rangeStart + i * scrollTriggerSegmentSize,
|
|
||||||
rangeStart + ( i + 1 ) * scrollTriggerSegmentSize
|
|
||||||
];
|
|
||||||
} );
|
|
||||||
|
|
||||||
rangeStart = trigger.range[1];
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Ensure the last trigger extends to the end of the page, otherwise
|
|
||||||
// rounding errors can cause the last trigger to end at 0.999999...
|
|
||||||
this.slideTriggers[this.slideTriggers.length - 1].range[1] = 1;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates one scroll trigger for each fragments in the given page.
|
|
||||||
*
|
|
||||||
* @param {*} page
|
|
||||||
*/
|
|
||||||
createFragmentTriggersForPage( page, slideElement ) {
|
|
||||||
|
|
||||||
slideElement = slideElement || page.slideElement;
|
|
||||||
|
|
||||||
// Each fragment 'group' is an array containing one or more
|
|
||||||
// fragments. Multiple fragments that appear at the same time
|
|
||||||
// are part of the same group.
|
|
||||||
const fragmentGroups = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment' ), true );
|
|
||||||
|
|
||||||
// Create scroll triggers that show/hide fragments
|
|
||||||
if( fragmentGroups.length ) {
|
|
||||||
page.fragments = this.Reveal.fragments.sort( slideElement.querySelectorAll( '.fragment:not(.disabled)' ) );
|
|
||||||
page.scrollTriggers.push(
|
|
||||||
// Trigger for the initial state with no fragments visible
|
|
||||||
{
|
|
||||||
activate: () => {
|
|
||||||
this.Reveal.fragments.update( -1, page.fragments, slideElement );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Triggers for each fragment group
|
|
||||||
fragmentGroups.forEach( ( fragments, i ) => {
|
|
||||||
page.scrollTriggers.push({
|
|
||||||
activate: () => {
|
|
||||||
this.Reveal.fragments.update( i, page.fragments, slideElement );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return page.scrollTriggers.length;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates scroll triggers for the auto-animate steps in the
|
|
||||||
* given page.
|
|
||||||
*
|
|
||||||
* @param {*} page
|
|
||||||
*/
|
|
||||||
createAutoAnimateTriggersForPage( page ) {
|
|
||||||
|
|
||||||
if( page.autoAnimateElements.length > 0 ) {
|
|
||||||
|
|
||||||
// Triggers for each subsequent auto-animate slide
|
|
||||||
this.slideTriggers.push( ...Array.from( page.autoAnimateElements ).map( ( autoAnimateElement, i ) => {
|
|
||||||
let autoAnimatePage = this.createPage({
|
|
||||||
slideElement: autoAnimateElement.querySelector( 'section' ),
|
|
||||||
contentElement: autoAnimateElement,
|
|
||||||
backgroundElement: autoAnimateElement.querySelector( '.slide-background' )
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create fragment scroll triggers for the auto-animate slide
|
|
||||||
this.createFragmentTriggersForPage( autoAnimatePage, autoAnimatePage.slideElement );
|
|
||||||
|
|
||||||
page.autoAnimatePages.push( autoAnimatePage );
|
|
||||||
|
|
||||||
// Return our slide trigger
|
|
||||||
return {
|
|
||||||
page: autoAnimatePage,
|
|
||||||
activate: () => this.activatePage( autoAnimatePage ),
|
|
||||||
deactivate: () => this.deactivatePage( autoAnimatePage )
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper method for creating a page definition and adding
|
|
||||||
* required fields. A "page" is a slide or auto-animate step.
|
|
||||||
*/
|
|
||||||
createPage( page ) {
|
|
||||||
|
|
||||||
page.scrollTriggers = [];
|
|
||||||
page.indexh = parseInt( page.slideElement.getAttribute( 'data-index-h' ), 10 );
|
|
||||||
page.indexv = parseInt( page.slideElement.getAttribute( 'data-index-v' ), 10 );
|
|
||||||
|
|
||||||
return page;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Rerenders progress bar segments so that they match the current
|
|
||||||
* reveal.js config and size.
|
|
||||||
*/
|
|
||||||
syncProgressBar() {
|
|
||||||
|
|
||||||
this.progressBarInner.querySelectorAll( '.scrollbar-slide' ).forEach( slide => slide.remove() );
|
|
||||||
|
|
||||||
const scrollHeight = this.viewportElement.scrollHeight;
|
|
||||||
const viewportHeight = this.viewportElement.offsetHeight;
|
|
||||||
const viewportHeightFactor = viewportHeight / scrollHeight;
|
|
||||||
|
|
||||||
this.progressBarHeight = this.progressBarInner.offsetHeight;
|
|
||||||
this.playheadHeight = Math.max( viewportHeightFactor * this.progressBarHeight, MIN_PLAYHEAD_HEIGHT );
|
|
||||||
this.progressBarScrollableHeight = this.progressBarHeight - this.playheadHeight;
|
|
||||||
|
|
||||||
const progressSegmentHeight = viewportHeight / scrollHeight * this.progressBarHeight;
|
|
||||||
const spacing = Math.min( progressSegmentHeight / 8, MAX_PROGRESS_SPACING );
|
|
||||||
|
|
||||||
this.progressBarPlayhead.style.height = this.playheadHeight - spacing + 'px';
|
|
||||||
|
|
||||||
// Don't show individual segments if they're too small
|
|
||||||
if( progressSegmentHeight > MIN_PROGRESS_SEGMENT_HEIGHT ) {
|
|
||||||
|
|
||||||
this.slideTriggers.forEach( slideTrigger => {
|
|
||||||
|
|
||||||
const { page } = slideTrigger;
|
|
||||||
|
|
||||||
// Visual representation of a slide
|
|
||||||
page.progressBarSlide = document.createElement( 'div' );
|
|
||||||
page.progressBarSlide.className = 'scrollbar-slide';
|
|
||||||
page.progressBarSlide.style.top = slideTrigger.range[0] * this.progressBarHeight + 'px';
|
|
||||||
page.progressBarSlide.style.height = ( slideTrigger.range[1] - slideTrigger.range[0] ) * this.progressBarHeight - spacing + 'px';
|
|
||||||
page.progressBarSlide.classList.toggle( 'has-triggers', page.scrollTriggers.length > 0 );
|
|
||||||
this.progressBarInner.appendChild( page.progressBarSlide );
|
|
||||||
|
|
||||||
// Visual representations of each scroll trigger
|
|
||||||
page.scrollTriggerElements = page.scrollTriggers.map( ( trigger, i ) => {
|
|
||||||
|
|
||||||
const triggerElement = document.createElement( 'div' );
|
|
||||||
triggerElement.className = 'scrollbar-trigger';
|
|
||||||
triggerElement.style.top = ( trigger.range[0] - slideTrigger.range[0] ) * this.progressBarHeight + 'px';
|
|
||||||
triggerElement.style.height = ( trigger.range[1] - trigger.range[0] ) * this.progressBarHeight - spacing + 'px';
|
|
||||||
page.progressBarSlide.appendChild( triggerElement );
|
|
||||||
|
|
||||||
if( i === 0 ) triggerElement.style.display = 'none';
|
|
||||||
|
|
||||||
return triggerElement;
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
|
|
||||||
this.pages.forEach( page => page.progressBarSlide = null );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reads the current scroll position and updates our active
|
|
||||||
* trigger states accordingly.
|
|
||||||
*/
|
|
||||||
syncScrollPosition() {
|
|
||||||
|
|
||||||
const viewportHeight = this.viewportElement.offsetHeight;
|
|
||||||
const viewportHeightFactor = viewportHeight / this.viewportElement.scrollHeight;
|
|
||||||
|
|
||||||
const scrollTop = this.viewportElement.scrollTop;
|
|
||||||
const scrollHeight = this.viewportElement.scrollHeight - viewportHeight
|
|
||||||
const scrollProgress = Math.max( Math.min( scrollTop / scrollHeight, 1 ), 0 );
|
|
||||||
const scrollProgressMid = Math.max( Math.min( ( scrollTop + viewportHeight / 2 ) / this.viewportElement.scrollHeight, 1 ), 0 );
|
|
||||||
|
|
||||||
let activePage;
|
|
||||||
|
|
||||||
this.slideTriggers.forEach( ( trigger ) => {
|
|
||||||
const { page } = trigger;
|
|
||||||
|
|
||||||
const shouldPreload = scrollProgress >= trigger.range[0] - viewportHeightFactor*2 &&
|
|
||||||
scrollProgress <= trigger.range[1] + viewportHeightFactor*2;
|
|
||||||
|
|
||||||
// Load slides that are within the preload range
|
|
||||||
if( shouldPreload && !page.loaded ) {
|
|
||||||
page.loaded = true;
|
|
||||||
this.Reveal.slideContent.load( page.slideElement );
|
|
||||||
}
|
|
||||||
else if( page.loaded ) {
|
|
||||||
page.loaded = false;
|
|
||||||
this.Reveal.slideContent.unload( page.slideElement );
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we're within this trigger range, activate it
|
|
||||||
if( scrollProgress >= trigger.range[0] && scrollProgress <= trigger.range[1] ) {
|
|
||||||
this.activateTrigger( trigger );
|
|
||||||
activePage = trigger.page;
|
|
||||||
}
|
|
||||||
// .. otherwise deactivate
|
|
||||||
else if( trigger.active ) {
|
|
||||||
this.deactivateTrigger( trigger );
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Each page can have its own scroll triggers, check if any of those
|
|
||||||
// need to be activated/deactivated
|
|
||||||
if( activePage ) {
|
|
||||||
activePage.scrollTriggers.forEach( ( trigger ) => {
|
|
||||||
if( scrollProgressMid >= trigger.range[0] && scrollProgressMid <= trigger.range[1] ) {
|
|
||||||
this.activateTrigger( trigger );
|
|
||||||
}
|
|
||||||
else if( trigger.active ) {
|
|
||||||
this.deactivateTrigger( trigger );
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update our visual progress indication
|
|
||||||
this.setProgressBarValue( scrollTop / ( this.viewportElement.scrollHeight - viewportHeight ) );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Moves the progress bar playhead to the specified position.
|
|
||||||
*
|
|
||||||
* @param {number} progress 0-1
|
|
||||||
*/
|
|
||||||
setProgressBarValue( progress ) {
|
|
||||||
|
|
||||||
if( this.progressBar ) {
|
|
||||||
|
|
||||||
this.progressBarPlayhead.style.transform = `translateY(${progress * this.progressBarScrollableHeight}px)`;
|
|
||||||
|
|
||||||
this.getAllPages()
|
|
||||||
.filter( page => page.progressBarSlide )
|
|
||||||
.forEach( ( page ) => {
|
|
||||||
page.progressBarSlide.classList.toggle( 'active', page.active === true );
|
|
||||||
|
|
||||||
page.scrollTriggers.forEach( ( trigger, i ) => {
|
|
||||||
page.scrollTriggerElements[i].classList.toggle( 'active', page.active === true && trigger.active === true );
|
|
||||||
} );
|
|
||||||
} );
|
|
||||||
|
|
||||||
this.showProgressBar();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the progress bar and, if configured, automatically hide
|
|
||||||
* it after a delay.
|
|
||||||
*/
|
|
||||||
showProgressBar() {
|
|
||||||
|
|
||||||
this.progressBar.classList.add( 'visible' );
|
|
||||||
|
|
||||||
clearTimeout( this.hideProgressBarTimeout );
|
|
||||||
|
|
||||||
if( this.Reveal.getConfig().scrollProgress === 'auto' && !this.draggingProgressBar ) {
|
|
||||||
|
|
||||||
this.hideProgressBarTimeout = setTimeout( () => {
|
|
||||||
if( this.progressBar ) {
|
|
||||||
this.progressBar.classList.remove( 'visible' );
|
|
||||||
}
|
|
||||||
}, HIDE_SCROLLBAR_TIMEOUT );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Scroll to the previous page.
|
|
||||||
*/
|
|
||||||
prev() {
|
|
||||||
|
|
||||||
this.viewportElement.scrollTop -= this.scrollTriggerHeight;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Scroll to the next page.
|
|
||||||
*/
|
|
||||||
next() {
|
|
||||||
|
|
||||||
this.viewportElement.scrollTop += this.scrollTriggerHeight;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Scrolls the given slide element into view.
|
|
||||||
*
|
|
||||||
* @param {HTMLElement} slideElement
|
|
||||||
*/
|
|
||||||
scrollToSlide( slideElement ) {
|
|
||||||
|
|
||||||
// If the scroll view isn't active yet, queue this action
|
|
||||||
if( !this.active ) {
|
|
||||||
this.activatedCallbacks.push( () => this.scrollToSlide( slideElement ) );
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Find the trigger for this slide
|
|
||||||
const trigger = this.getScrollTriggerBySlide( slideElement );
|
|
||||||
|
|
||||||
if( trigger ) {
|
|
||||||
// Use the trigger's range to calculate the scroll position
|
|
||||||
this.viewportElement.scrollTop = trigger.range[0] * ( this.viewportElement.scrollHeight - this.viewportElement.offsetHeight );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Persists the current scroll position to session storage
|
|
||||||
* so that it can be restored.
|
|
||||||
*/
|
|
||||||
storeScrollPosition() {
|
|
||||||
|
|
||||||
clearTimeout( this.storeScrollPositionTimeout );
|
|
||||||
|
|
||||||
this.storeScrollPositionTimeout = setTimeout( () => {
|
|
||||||
sessionStorage.setItem( 'reveal-scroll-top', this.viewportElement.scrollTop );
|
|
||||||
sessionStorage.setItem( 'reveal-scroll-origin', location.origin + location.pathname );
|
|
||||||
|
|
||||||
this.storeScrollPositionTimeout = null;
|
|
||||||
}, 50 );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restores the scroll position when a deck is reloader.
|
|
||||||
*/
|
|
||||||
restoreScrollPosition() {
|
|
||||||
|
|
||||||
const scrollPosition = sessionStorage.getItem( 'reveal-scroll-top' );
|
|
||||||
const scrollOrigin = sessionStorage.getItem( 'reveal-scroll-origin' );
|
|
||||||
|
|
||||||
if( scrollPosition && scrollOrigin === location.origin + location.pathname ) {
|
|
||||||
this.viewportElement.scrollTop = parseInt( scrollPosition, 10 );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Activates the given page and starts its embedded content
|
|
||||||
* if there is any.
|
|
||||||
*
|
|
||||||
* @param {object} page
|
|
||||||
*/
|
|
||||||
activatePage( page ) {
|
|
||||||
|
|
||||||
if( !page.active ) {
|
|
||||||
|
|
||||||
page.active = true;
|
|
||||||
|
|
||||||
const { slideElement, backgroundElement, contentElement, indexh, indexv } = page;
|
|
||||||
|
|
||||||
contentElement.style.display = 'block';
|
|
||||||
|
|
||||||
slideElement.classList.add( 'present' );
|
|
||||||
|
|
||||||
if( backgroundElement ) {
|
|
||||||
backgroundElement.classList.add( 'present' );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.Reveal.setCurrentScrollPage( slideElement, indexh, indexv );
|
|
||||||
this.Reveal.backgrounds.bubbleSlideContrastClassToElement( slideElement, this.viewportElement );
|
|
||||||
|
|
||||||
// If this page is part of an auto-animation there will be one
|
|
||||||
// content element per auto-animated page. We need to show the
|
|
||||||
// current page and hide all others.
|
|
||||||
Array.from( contentElement.parentNode.querySelectorAll( '.scroll-page-content' ) ).forEach( sibling => {
|
|
||||||
if( sibling !== contentElement ) {
|
|
||||||
sibling.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Deactivates the page after it has been visible.
|
|
||||||
*
|
|
||||||
* @param {object} page
|
|
||||||
*/
|
|
||||||
deactivatePage( page ) {
|
|
||||||
|
|
||||||
if( page.active ) {
|
|
||||||
|
|
||||||
page.active = false;
|
|
||||||
if( page.slideElement ) page.slideElement.classList.remove( 'present' );
|
|
||||||
if( page.backgroundElement ) page.backgroundElement.classList.remove( 'present' );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
activateTrigger( trigger ) {
|
|
||||||
|
|
||||||
if( !trigger.active ) {
|
|
||||||
trigger.active = true;
|
|
||||||
trigger.activate();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
deactivateTrigger( trigger ) {
|
|
||||||
|
|
||||||
if( trigger.active ) {
|
|
||||||
trigger.active = false;
|
|
||||||
|
|
||||||
if( trigger.deactivate ) {
|
|
||||||
trigger.deactivate();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retrieve a slide by its original h/v index (i.e. the indices the
|
|
||||||
* slide had before being linearized).
|
|
||||||
*
|
|
||||||
* @param {number} h
|
|
||||||
* @param {number} v
|
|
||||||
* @returns {HTMLElement}
|
|
||||||
*/
|
|
||||||
getSlideByIndices( h, v ) {
|
|
||||||
|
|
||||||
const page = this.getAllPages().find( page => {
|
|
||||||
return page.indexh === h && page.indexv === v;
|
|
||||||
} );
|
|
||||||
|
|
||||||
return page ? page.slideElement : null;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Retrieve a list of all scroll triggers for the given slide
|
|
||||||
* DOM element.
|
|
||||||
*
|
|
||||||
* @param {HTMLElement} slide
|
|
||||||
* @returns {Array}
|
|
||||||
*/
|
|
||||||
getScrollTriggerBySlide( slide ) {
|
|
||||||
|
|
||||||
return this.slideTriggers.find( trigger => trigger.page.slideElement === slide );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get a list of all pages in the scroll view. This includes
|
|
||||||
* both top-level slides and auto-animate steps.
|
|
||||||
*
|
|
||||||
* @returns {Array}
|
|
||||||
*/
|
|
||||||
getAllPages() {
|
|
||||||
|
|
||||||
return this.pages.flatMap( page => [page, ...(page.autoAnimatePages || [])] );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
onScroll() {
|
|
||||||
|
|
||||||
this.syncScrollPosition();
|
|
||||||
this.storeScrollPosition();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
get viewportElement() {
|
|
||||||
|
|
||||||
return this.Reveal.getViewportElement();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { extend, queryAll, closest, getMimeTypeFromFile, encodeRFC3986URI } from '../utils/util.js'
|
import { extend, queryAll, closest, getMimeTypeFromFile } from '../utils/util.js'
|
||||||
import { isMobile } from '../utils/device.js'
|
import { isMobile } from '../utils/device.js'
|
||||||
|
|
||||||
import fitty from 'fitty';
|
import fitty from 'fitty';
|
||||||
@@ -9,15 +9,11 @@ import fitty from 'fitty';
|
|||||||
*/
|
*/
|
||||||
export default class SlideContent {
|
export default class SlideContent {
|
||||||
|
|
||||||
allowedToPlay = true;
|
|
||||||
|
|
||||||
constructor( Reveal ) {
|
constructor( Reveal ) {
|
||||||
|
|
||||||
this.Reveal = Reveal;
|
this.Reveal = Reveal;
|
||||||
|
|
||||||
this.startEmbeddedIframe = this.startEmbeddedIframe.bind( this );
|
this.startEmbeddedIframe = this.startEmbeddedIframe.bind( this );
|
||||||
this.preventIframeAutoFocus = this.preventIframeAutoFocus.bind( this );
|
|
||||||
this.ensureMobileMediaPlaying = this.ensureMobileMediaPlaying.bind( this );
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,10 +25,6 @@ export default class SlideContent {
|
|||||||
*/
|
*/
|
||||||
shouldPreload( element ) {
|
shouldPreload( element ) {
|
||||||
|
|
||||||
if( this.Reveal.isScrollView() ) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prefer an explicit global preload setting
|
// Prefer an explicit global preload setting
|
||||||
let preload = this.Reveal.getConfig().preloadIframes;
|
let preload = this.Reveal.getConfig().preloadIframes;
|
||||||
|
|
||||||
@@ -55,25 +47,14 @@ export default class SlideContent {
|
|||||||
load( slide, options = {} ) {
|
load( slide, options = {} ) {
|
||||||
|
|
||||||
// Show the slide element
|
// Show the slide element
|
||||||
const displayValue = this.Reveal.getConfig().display;
|
slide.style.display = this.Reveal.getConfig().display;
|
||||||
if( displayValue.includes('!important') ) {
|
|
||||||
const value = displayValue.replace(/\s*!important\s*$/, '').trim();
|
|
||||||
slide.style.setProperty('display', value, 'important');
|
|
||||||
} else {
|
|
||||||
slide.style.display = displayValue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Media and iframe elements with data-src attributes
|
// Media elements with data-src attributes
|
||||||
queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
|
queryAll( slide, 'img[data-src], video[data-src], audio[data-src], iframe[data-src]' ).forEach( element => {
|
||||||
const isIframe = element.tagName === 'IFRAME';
|
if( element.tagName !== 'IFRAME' || this.shouldPreload( element ) ) {
|
||||||
if( !isIframe || this.shouldPreload( element ) ) {
|
|
||||||
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
|
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
|
||||||
element.setAttribute( 'data-lazy-loaded', '' );
|
element.setAttribute( 'data-lazy-loaded', '' );
|
||||||
element.removeAttribute( 'data-src' );
|
element.removeAttribute( 'data-src' );
|
||||||
|
|
||||||
if( isIframe ) {
|
|
||||||
element.addEventListener( 'load', this.preventIframeAutoFocus );
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
@@ -127,21 +108,19 @@ export default class SlideContent {
|
|||||||
// URL(s)
|
// URL(s)
|
||||||
else {
|
else {
|
||||||
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
|
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
|
||||||
// Decode URL(s) that are already encoded first
|
return `url(${encodeURI(background.trim())})`;
|
||||||
let decoded = decodeURI(background.trim());
|
|
||||||
return `url(${encodeRFC3986URI(decoded)})`;
|
|
||||||
}).join( ',' );
|
}).join( ',' );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Videos
|
// Videos
|
||||||
else if ( backgroundVideo ) {
|
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
|
||||||
let video = document.createElement( 'video' );
|
let video = document.createElement( 'video' );
|
||||||
|
|
||||||
if( backgroundVideoLoop ) {
|
if( backgroundVideoLoop ) {
|
||||||
video.setAttribute( 'loop', '' );
|
video.setAttribute( 'loop', '' );
|
||||||
}
|
}
|
||||||
|
|
||||||
if( backgroundVideoMuted || this.Reveal.isSpeakerNotes() ) {
|
if( backgroundVideoMuted ) {
|
||||||
video.muted = true;
|
video.muted = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -157,15 +136,13 @@ export default class SlideContent {
|
|||||||
|
|
||||||
// Support comma separated lists of video sources
|
// Support comma separated lists of video sources
|
||||||
backgroundVideo.split( ',' ).forEach( source => {
|
backgroundVideo.split( ',' ).forEach( source => {
|
||||||
const sourceElement = document.createElement( 'source' );
|
|
||||||
sourceElement.setAttribute( 'src', source );
|
|
||||||
|
|
||||||
let type = getMimeTypeFromFile( source );
|
let type = getMimeTypeFromFile( source );
|
||||||
if( type ) {
|
if( type ) {
|
||||||
sourceElement.setAttribute( 'type', type );
|
video.innerHTML += `<source src="${source}" type="${type}">`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
video.innerHTML += `<source src="${source}">`;
|
||||||
}
|
}
|
||||||
|
|
||||||
video.appendChild( sourceElement );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
backgroundContent.appendChild( video );
|
backgroundContent.appendChild( video );
|
||||||
@@ -295,9 +272,7 @@ export default class SlideContent {
|
|||||||
*/
|
*/
|
||||||
startEmbeddedContent( element ) {
|
startEmbeddedContent( element ) {
|
||||||
|
|
||||||
if( element ) {
|
if( element && !this.Reveal.isSpeakerNotes() ) {
|
||||||
|
|
||||||
const isSpeakerNotesWindow = this.Reveal.isSpeakerNotes();
|
|
||||||
|
|
||||||
// Restart GIFs
|
// Restart GIFs
|
||||||
queryAll( element, 'img[src$=".gif"]' ).forEach( el => {
|
queryAll( element, 'img[src$=".gif"]' ).forEach( el => {
|
||||||
@@ -323,9 +298,6 @@ export default class SlideContent {
|
|||||||
|
|
||||||
if( autoplay && typeof el.play === 'function' ) {
|
if( autoplay && typeof el.play === 'function' ) {
|
||||||
|
|
||||||
// In the speaker view we only auto-play muted media
|
|
||||||
if( isSpeakerNotesWindow && !el.muted ) return;
|
|
||||||
|
|
||||||
// If the media is ready, start playback
|
// If the media is ready, start playback
|
||||||
if( el.readyState > 1 ) {
|
if( el.readyState > 1 ) {
|
||||||
this.startEmbeddedMedia( { target: el } );
|
this.startEmbeddedMedia( { target: el } );
|
||||||
@@ -335,16 +307,10 @@ export default class SlideContent {
|
|||||||
else if( isMobile ) {
|
else if( isMobile ) {
|
||||||
let promise = el.play();
|
let promise = el.play();
|
||||||
|
|
||||||
el.addEventListener( 'canplay', this.ensureMobileMediaPlaying );
|
|
||||||
|
|
||||||
// If autoplay does not work, ensure that the controls are visible so
|
// If autoplay does not work, ensure that the controls are visible so
|
||||||
// that the viewer can start the media on their own
|
// that the viewer can start the media on their own
|
||||||
if( promise && typeof promise.catch === 'function' && el.controls === false ) {
|
if( promise && typeof promise.catch === 'function' && el.controls === false ) {
|
||||||
promise
|
promise.catch( () => {
|
||||||
.then( () => {
|
|
||||||
this.allowedToPlay = true;
|
|
||||||
})
|
|
||||||
.catch( () => {
|
|
||||||
el.controls = true;
|
el.controls = true;
|
||||||
|
|
||||||
// Once the video does start playing, hide the controls again
|
// Once the video does start playing, hide the controls again
|
||||||
@@ -363,72 +329,32 @@ export default class SlideContent {
|
|||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Don't play iframe content in the speaker view since we can't
|
// Normal iframes
|
||||||
// guarantee that it's muted
|
queryAll( element, 'iframe[src]' ).forEach( el => {
|
||||||
if( !isSpeakerNotesWindow ) {
|
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Normal iframes
|
this.startEmbeddedIframe( { target: el } );
|
||||||
queryAll( element, 'iframe[src]' ).forEach( el => {
|
} );
|
||||||
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.startEmbeddedIframe( { target: el } );
|
// Lazy loading iframes
|
||||||
} );
|
queryAll( element, 'iframe[data-src]' ).forEach( el => {
|
||||||
|
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Lazy loading iframes
|
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
|
||||||
queryAll( element, 'iframe[data-src]' ).forEach( el => {
|
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
|
||||||
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
el.addEventListener( 'load', this.startEmbeddedIframe );
|
||||||
return;
|
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
|
||||||
}
|
}
|
||||||
|
} );
|
||||||
if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
|
|
||||||
el.removeEventListener( 'load', this.startEmbeddedIframe ); // remove first to avoid dupes
|
|
||||||
el.addEventListener( 'load', this.startEmbeddedIframe );
|
|
||||||
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Ensure that an HTMLMediaElement is playing on mobile devices.
|
|
||||||
*
|
|
||||||
* This is a workaround for a bug in mobile Safari where
|
|
||||||
* the media fails to display if many videos are started
|
|
||||||
* at the same moment. When this happens, Mobile Safari
|
|
||||||
* reports the video is playing, and the current time
|
|
||||||
* advances, but nothing is visible.
|
|
||||||
*
|
|
||||||
* @param {Event} event
|
|
||||||
*/
|
|
||||||
ensureMobileMediaPlaying( event ) {
|
|
||||||
|
|
||||||
const el = event.target;
|
|
||||||
|
|
||||||
// Ignore this check incompatible browsers
|
|
||||||
if( typeof el.getVideoPlaybackQuality !== 'function' ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout( () => {
|
|
||||||
|
|
||||||
const playing = el.paused === false;
|
|
||||||
const totalFrames = el.getVideoPlaybackQuality().totalVideoFrames;
|
|
||||||
|
|
||||||
if( playing && totalFrames === 0 ) {
|
|
||||||
el.load();
|
|
||||||
el.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
}, 1000 );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Starts playing an embedded video/audio element after
|
* Starts playing an embedded video/audio element after
|
||||||
* it has finished loading.
|
* it has finished loading.
|
||||||
@@ -441,23 +367,8 @@ export default class SlideContent {
|
|||||||
isVisible = !!closest( event.target, '.present' );
|
isVisible = !!closest( event.target, '.present' );
|
||||||
|
|
||||||
if( isAttachedToDOM && isVisible ) {
|
if( isAttachedToDOM && isVisible ) {
|
||||||
// Don't restart if media is already playing
|
event.target.currentTime = 0;
|
||||||
if( event.target.paused || event.target.ended ) {
|
event.target.play();
|
||||||
event.target.currentTime = 0;
|
|
||||||
const promise = event.target.play();
|
|
||||||
|
|
||||||
if( promise && typeof promise.catch === 'function' ) {
|
|
||||||
promise
|
|
||||||
.then( () => {
|
|
||||||
this.allowedToPlay = true;
|
|
||||||
} )
|
|
||||||
.catch( ( error ) => {
|
|
||||||
if( error.name === 'NotAllowedError' ) {
|
|
||||||
this.allowedToPlay = false;
|
|
||||||
}
|
|
||||||
} );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
event.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );
|
event.target.removeEventListener( 'loadeddata', this.startEmbeddedMedia );
|
||||||
@@ -474,8 +385,6 @@ export default class SlideContent {
|
|||||||
|
|
||||||
let iframe = event.target;
|
let iframe = event.target;
|
||||||
|
|
||||||
this.preventIframeAutoFocus( event );
|
|
||||||
|
|
||||||
if( iframe && iframe.contentWindow ) {
|
if( iframe && iframe.contentWindow ) {
|
||||||
|
|
||||||
let isAttachedToDOM = !!closest( event.target, 'html' ),
|
let isAttachedToDOM = !!closest( event.target, 'html' ),
|
||||||
@@ -530,17 +439,12 @@ export default class SlideContent {
|
|||||||
if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
|
if( !el.hasAttribute( 'data-ignore' ) && typeof el.pause === 'function' ) {
|
||||||
el.setAttribute('data-paused-by-reveal', '');
|
el.setAttribute('data-paused-by-reveal', '');
|
||||||
el.pause();
|
el.pause();
|
||||||
|
|
||||||
if( isMobile ) {
|
|
||||||
el.removeEventListener( 'canplay', this.ensureMobileMediaPlaying );
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Generic postMessage API for non-lazy loaded iframes
|
// Generic postMessage API for non-lazy loaded iframes
|
||||||
queryAll( element, 'iframe' ).forEach( el => {
|
queryAll( element, 'iframe' ).forEach( el => {
|
||||||
if( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );
|
if( el.contentWindow ) el.contentWindow.postMessage( 'slide:stop', '*' );
|
||||||
el.removeEventListener( 'load', this.preventIframeAutoFocus );
|
|
||||||
el.removeEventListener( 'load', this.startEmbeddedIframe );
|
el.removeEventListener( 'load', this.startEmbeddedIframe );
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -571,46 +475,4 @@ export default class SlideContent {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks whether media playback is blocked by the browser. This
|
|
||||||
* typically happens when media playback is initiated without a
|
|
||||||
* direct user interaction.
|
|
||||||
*/
|
|
||||||
isNotAllowedToPlay() {
|
|
||||||
|
|
||||||
return !this.allowedToPlay;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevents iframes from automatically focusing themselves.
|
|
||||||
*
|
|
||||||
* @param {Event} event
|
|
||||||
*/
|
|
||||||
preventIframeAutoFocus( event ) {
|
|
||||||
|
|
||||||
const iframe = event.target;
|
|
||||||
|
|
||||||
console.log(111)
|
|
||||||
|
|
||||||
if( iframe && this.Reveal.getConfig().preventIframeAutoFocus ) {
|
|
||||||
|
|
||||||
let elapsed = 0;
|
|
||||||
const interval = 100;
|
|
||||||
const maxTime = 1000;
|
|
||||||
const checkFocus = () => {
|
|
||||||
if( document.activeElement === iframe ) {
|
|
||||||
document.activeElement.blur();
|
|
||||||
} else if( elapsed < maxTime ) {
|
|
||||||
elapsed += interval;
|
|
||||||
setTimeout( checkFocus, interval );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
setTimeout( checkFocus, interval );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,3 @@
|
|||||||
import {
|
|
||||||
SLIDE_NUMBER_FORMAT_CURRENT,
|
|
||||||
SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL,
|
|
||||||
SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL,
|
|
||||||
SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL
|
|
||||||
} from "../utils/constants";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles the display of reveal.js' optional slide number.
|
* Handles the display of reveal.js' optional slide number.
|
||||||
*/
|
*/
|
||||||
@@ -30,7 +23,7 @@ export default class SlideNumber {
|
|||||||
configure( config, oldConfig ) {
|
configure( config, oldConfig ) {
|
||||||
|
|
||||||
let slideNumberDisplay = 'none';
|
let slideNumberDisplay = 'none';
|
||||||
if( config.slideNumber && !this.Reveal.isPrintView() ) {
|
if( config.slideNumber && !this.Reveal.isPrintingPDF() ) {
|
||||||
if( config.showSlideNumber === 'all' ) {
|
if( config.showSlideNumber === 'all' ) {
|
||||||
slideNumberDisplay = 'block';
|
slideNumberDisplay = 'block';
|
||||||
}
|
}
|
||||||
@@ -63,7 +56,7 @@ export default class SlideNumber {
|
|||||||
|
|
||||||
let config = this.Reveal.getConfig();
|
let config = this.Reveal.getConfig();
|
||||||
let value;
|
let value;
|
||||||
let format = SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL;
|
let format = 'h.v';
|
||||||
|
|
||||||
if ( typeof config.slideNumber === 'function' ) {
|
if ( typeof config.slideNumber === 'function' ) {
|
||||||
value = config.slideNumber( slide );
|
value = config.slideNumber( slide );
|
||||||
@@ -76,7 +69,7 @@ export default class SlideNumber {
|
|||||||
// If there are ONLY vertical slides in this deck, always use
|
// If there are ONLY vertical slides in this deck, always use
|
||||||
// a flattened slide number
|
// a flattened slide number
|
||||||
if( !/c/.test( format ) && this.Reveal.getHorizontalSlides().length === 1 ) {
|
if( !/c/.test( format ) && this.Reveal.getHorizontalSlides().length === 1 ) {
|
||||||
format = SLIDE_NUMBER_FORMAT_CURRENT;
|
format = 'c';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Offset the current slide number by 1 to make it 1-indexed
|
// Offset the current slide number by 1 to make it 1-indexed
|
||||||
@@ -84,16 +77,16 @@ export default class SlideNumber {
|
|||||||
|
|
||||||
value = [];
|
value = [];
|
||||||
switch( format ) {
|
switch( format ) {
|
||||||
case SLIDE_NUMBER_FORMAT_CURRENT:
|
case 'c':
|
||||||
value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset );
|
value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset );
|
||||||
break;
|
break;
|
||||||
case SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL:
|
case 'c/t':
|
||||||
value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset, '/', this.Reveal.getTotalSlides() );
|
value.push( this.Reveal.getSlidePastCount( slide ) + horizontalOffset, '/', this.Reveal.getTotalSlides() );
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
let indices = this.Reveal.getIndices( slide );
|
let indices = this.Reveal.getIndices( slide );
|
||||||
value.push( indices.h + horizontalOffset );
|
value.push( indices.h + horizontalOffset );
|
||||||
let sep = format === SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL ? '/' : '.';
|
let sep = format === 'h/v' ? '/' : '.';
|
||||||
if( this.Reveal.isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );
|
if( this.Reveal.isVerticalSlide( slide ) ) value.push( sep, indices.v + 1 );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export default class Touch {
|
|||||||
isSwipePrevented( target ) {
|
isSwipePrevented( target ) {
|
||||||
|
|
||||||
// Prevent accidental swipes when scrubbing timelines
|
// Prevent accidental swipes when scrubbing timelines
|
||||||
if( matches( target, 'video[controls], audio[controls]' ) ) return true;
|
if( matches( target, 'video, audio' ) ) return true;
|
||||||
|
|
||||||
while( target && typeof target.hasAttribute === 'function' ) {
|
while( target && typeof target.hasAttribute === 'function' ) {
|
||||||
if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
|
if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
|
||||||
@@ -103,8 +103,6 @@ export default class Touch {
|
|||||||
*/
|
*/
|
||||||
onTouchStart( event ) {
|
onTouchStart( event ) {
|
||||||
|
|
||||||
this.touchCaptured = false;
|
|
||||||
|
|
||||||
if( this.isSwipePrevented( event.target ) ) return true;
|
if( this.isSwipePrevented( event.target ) ) return true;
|
||||||
|
|
||||||
this.touchStartX = event.touches[0].clientX;
|
this.touchStartX = event.touches[0].clientX;
|
||||||
@@ -216,14 +214,6 @@ export default class Touch {
|
|||||||
*/
|
*/
|
||||||
onTouchEnd( event ) {
|
onTouchEnd( event ) {
|
||||||
|
|
||||||
// Media playback is only allowed as a direct result of a
|
|
||||||
// user interaction. Some mobile devices do not consider a
|
|
||||||
// 'touchmove' to be a direct user action. If this is the
|
|
||||||
// case, we fall back to starting playback here instead.
|
|
||||||
if( this.touchCaptured && this.Reveal.slideContent.isNotAllowedToPlay() ) {
|
|
||||||
this.Reveal.startEmbeddedContent( this.Reveal.getCurrentSlide() );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.touchCaptured = false;
|
this.touchCaptured = false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
671
js/reveal.js
671
js/reveal.js
File diff suppressed because it is too large
Load Diff
@@ -44,7 +44,7 @@ export const colorToRgb = ( color ) => {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
|
let rgba = color.match( /^rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\,\s*([\d]+|[\d]*.[\d]+)\s*\)$/i );
|
||||||
if( rgba ) {
|
if( rgba ) {
|
||||||
return {
|
return {
|
||||||
r: parseInt( rgba[1], 10 ),
|
r: parseInt( rgba[1], 10 ),
|
||||||
|
|||||||
@@ -2,16 +2,9 @@
|
|||||||
export const SLIDES_SELECTOR = '.slides section';
|
export const SLIDES_SELECTOR = '.slides section';
|
||||||
export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
|
export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
|
||||||
export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
|
export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
|
||||||
export const HORIZONTAL_BACKGROUNDS_SELECTOR = '.backgrounds>.slide-background';
|
|
||||||
|
|
||||||
// Methods that may not be invoked via the postMessage API
|
// Methods that may not be invoked via the postMessage API
|
||||||
export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
|
export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
|
||||||
|
|
||||||
// Regex for retrieving the fragment style from a class attribute
|
// Regex for retrieving the fragment style from a class attribute
|
||||||
export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;
|
export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;
|
||||||
|
|
||||||
// Slide number formats
|
|
||||||
export const SLIDE_NUMBER_FORMAT_HORIZONTAL_DOT_VERTICAL = 'h.v';
|
|
||||||
export const SLIDE_NUMBER_FORMAT_HORIZONTAL_SLASH_VERTICAL = 'h/v';
|
|
||||||
export const SLIDE_NUMBER_FORMAT_CURRENT = 'c';
|
|
||||||
export const SLIDE_NUMBER_FORMAT_CURRENT_SLASH_TOTAL = 'c/t';
|
|
||||||
@@ -294,20 +294,4 @@ const fileExtensionToMimeMap = {
|
|||||||
*/
|
*/
|
||||||
export const getMimeTypeFromFile = ( filename='' ) => {
|
export const getMimeTypeFromFile = ( filename='' ) => {
|
||||||
return fileExtensionToMimeMap[filename.split('.').pop()]
|
return fileExtensionToMimeMap[filename.split('.').pop()]
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Encodes a string for RFC3986-compliant URL format.
|
|
||||||
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986
|
|
||||||
*
|
|
||||||
* @param {string} url
|
|
||||||
*/
|
|
||||||
export const encodeRFC3986URI = ( url='' ) => {
|
|
||||||
return encodeURI(url)
|
|
||||||
.replace(/%5B/g, "[")
|
|
||||||
.replace(/%5D/g, "]")
|
|
||||||
.replace(
|
|
||||||
/[!'()*]/g,
|
|
||||||
(c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
147
leetcode-20230110.md
Normal file
147
leetcode-20230110.md
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
# Leetcode 💻 寒假 20230110
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 179. Largest Number
|
||||||
|
|
||||||
|
给定一个非负整数列表 nums，将它们排列成最大的数并返回。
|
||||||
|
|
||||||
|
```cpp [|4-6|7-9|10-11|13]
|
||||||
|
class Solution {
|
||||||
|
public:
|
||||||
|
string largestNumber(vector<int>& nums) {
|
||||||
|
vector<string> v;
|
||||||
|
v.reserve(nums.size());
|
||||||
|
for (auto const &i : nums) v.push_back(to_string(i));
|
||||||
|
sort(v.begin(), v.end(), [](string &a, string &b) {
|
||||||
|
return a + b > b + a;
|
||||||
|
});
|
||||||
|
string ret;
|
||||||
|
for (auto const &s : v) ret += s;
|
||||||
|
// 处理 ["0", "0", "0"] 的情况
|
||||||
|
return ret.startswith('0') ? "0" : ret;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
Note:
|
||||||
|
|
||||||
|
```python
|
||||||
|
'1' + '3' < '2' # True
|
||||||
|
'1' + '3' < '22' # True
|
||||||
|
'1' < '11' # True
|
||||||
|
'1' + '0' == '10' # True
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 179. Largest Number
|
||||||
|
|
||||||
|
Python 版本
|
||||||
|
|
||||||
|
```python [|4|5-7|8]
|
||||||
|
from functools import cmp_to_key
|
||||||
|
class Solution:
|
||||||
|
def largestNumber(self, nums: List[int]) -> str:
|
||||||
|
strs = [str(i) for i in nums]
|
||||||
|
strs.sort(key = cmp_to_key(
|
||||||
|
lambda a, b: -1 if a + b > b + a else 1
|
||||||
|
))
|
||||||
|
return '0' if strs[0] == '0' else ''.join(strs)
|
||||||
|
```
|
||||||
|
|
||||||
|
Note:
|
||||||
|
|
||||||
|
思路和刚刚的 c++ 是一样的，但我主要想给各位介绍一下python的写法，
|
||||||
|
因为我看群里用python的人还是不少的，当然这种写法是好是坏见仁见智了，我个人认为是比较好的。
|
||||||
|
|
||||||
|
4 首先我们用这个列表生成式将nums转为字符串strs， strs 是一个列表，列表中的每个元素是str(i),i是遍历nums得到的变量。
|
||||||
|
|
||||||
|
5-7 接着对strs进行排序，这个cmp to key 是python3的设计，他把一个比较用来比较大小的函数变成key函数，
|
||||||
|
这个比较函数做什么呢，他输入两个变量，如果a+b比b+a大，则这个比较函数返回-1,否则返回1,注意这里a和b的类型
|
||||||
|
都是字符串，a+b表示的是字符串a和字符串b拼接之后的结果
|
||||||
|
|
||||||
|
8 最后用一个三元表达式返回结果，和上面c++的思路是一样的，
|
||||||
|
注意这又有一个python好用的方法，字符串.join,后面跟一个数组，
|
||||||
|
意思是把这个数组用空字符串拼接起来
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 347. Top K Frequent Element
|
||||||
|
|
||||||
|
```cpp [|4-6|8-13|15-19|21-28]
|
||||||
|
class Solution {
|
||||||
|
public:
|
||||||
|
vector<int> topKFrequent(vector<int>& nums, int k) {
|
||||||
|
unordered_map<int, int> count;
|
||||||
|
for (auto const &n : nums)
|
||||||
|
count[n]++;
|
||||||
|
|
||||||
|
// 将 map 转为列表
|
||||||
|
// [(0, 5), (1, 3), ... ]
|
||||||
|
// 代表数字 0 出现 5 次，数字 1 出现 3 次
|
||||||
|
vector<pair<int, int>> tmp;
|
||||||
|
for (auto const &pair : count)
|
||||||
|
tmp.push_back(pair);
|
||||||
|
|
||||||
|
sort(tmp.begin(), tmp.end(), [](
|
||||||
|
const pair<int, int> &a,
|
||||||
|
const pair<int, int> &b) {
|
||||||
|
return a.second > b.second;
|
||||||
|
});
|
||||||
|
|
||||||
|
vector<int> ret;
|
||||||
|
for (auto const &pair : tmp) {
|
||||||
|
if (ret.size() >= k)
|
||||||
|
break;
|
||||||
|
ret.push_back(pair.first);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 347. Top K Frequent Element
|
||||||
|
|
||||||
|
Python 版本
|
||||||
|
|
||||||
|
```python [4-5]
|
||||||
|
import collections
|
||||||
|
class Solution:
|
||||||
|
def topKFrequent(self, nums: List[int], k: int) -> List[int]:
|
||||||
|
count = collections.Counter(nums).most_common(k)
|
||||||
|
return [i[0] for i in count]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 75. Sort Colors
|
||||||
|
|
||||||
|
C++
|
||||||
|
|
||||||
|
```cpp [|2-5|6|7-11|12-14|15-18]
|
||||||
|
void sortColors(vector<int> &nums) {
|
||||||
|
auto low = nums.begin();
|
||||||
|
auto high = nums.end() - 1;
|
||||||
|
|
||||||
|
for (auto mid = nums.begin(); mid <= high;) {
|
||||||
|
switch (*mid) {
|
||||||
|
case 0:
|
||||||
|
swap(*mid, *low);
|
||||||
|
mid++;
|
||||||
|
low++;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
mid++;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
swap(*mid, *high);
|
||||||
|
high--;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
17552
package-lock.json
generated
17552
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
58
package.json
58
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "reveal.js",
|
"name": "reveal.js",
|
||||||
"version": "5.2.1",
|
"version": "4.4.0",
|
||||||
"description": "The HTML Presentation Framework",
|
"description": "The HTML Presentation Framework",
|
||||||
"homepage": "https://revealjs.com",
|
"homepage": "https://revealjs.com",
|
||||||
"subdomain": "revealjs",
|
"subdomain": "revealjs",
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
"url": "git://github.com/hakimel/reveal.js.git"
|
"url": "git://github.com/hakimel/reveal.js.git"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=10.0.0"
|
||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"reveal",
|
"reveal",
|
||||||
@@ -30,41 +30,33 @@
|
|||||||
"presentation"
|
"presentation"
|
||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.2",
|
"@babel/core": "^7.14.3",
|
||||||
"@babel/eslint-parser": "^7.22.15",
|
"@babel/eslint-parser": "^7.14.3",
|
||||||
"@babel/preset-env": "^7.23.2",
|
"@babel/preset-env": "^7.14.2",
|
||||||
"@rollup/plugin-babel": "^6.0.4",
|
"@rollup/plugin-babel": "^5.3.0",
|
||||||
"@rollup/plugin-commonjs": "^25.0.7",
|
"@rollup/plugin-commonjs": "^19.0.0",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||||
"@rollup/plugin-terser": "^0.4.4",
|
"babel-plugin-transform-html-import-to-string": "0.0.1",
|
||||||
"babel-plugin-transform-html-import-to-string": "2.0.0",
|
|
||||||
"colors": "^1.4.0",
|
"colors": "^1.4.0",
|
||||||
"core-js": "^3.33.1",
|
"core-js": "^3.12.1",
|
||||||
"fitty": "^2.3.7",
|
"fitty": "^2.3.0",
|
||||||
"glob": "^10.3.10",
|
"glob": "^7.1.7",
|
||||||
"gulp": "^5.0.0",
|
"gulp": "^4.0.2",
|
||||||
"gulp-autoprefixer": "^8.0.0",
|
"gulp-autoprefixer": "^8.0.0",
|
||||||
"gulp-clean-css": "^4.3.0",
|
"gulp-clean-css": "^4.2.0",
|
||||||
"gulp-connect": "^5.7.0",
|
"gulp-connect": "^5.7.0",
|
||||||
"gulp-eslint": "^6.0.0",
|
"gulp-eslint": "^6.0.0",
|
||||||
"gulp-header-comment": "^0.10.0",
|
"gulp-header": "^2.0.9",
|
||||||
"gulp-zip": "^5.1.0",
|
"gulp-tap": "^2.0.0",
|
||||||
"highlight.js": "^11.9.0",
|
"gulp-zip": "^4.2.0",
|
||||||
"marked": "^4.3.0",
|
"highlight.js": "^10.0.3",
|
||||||
"node-qunit-puppeteer": "^2.2.0",
|
"marked": "^4.0.12",
|
||||||
"through2": "^4.0.2",
|
"node-qunit-puppeteer": "^2.1.0",
|
||||||
"qunit": "^2.22.0",
|
"qunit": "^2.17.2",
|
||||||
"rollup": "^4.1.5",
|
"rollup": "^2.48.0",
|
||||||
"sass": "^1.79.4",
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
"yargs": "^17.7.2"
|
"sass": "^1.39.2",
|
||||||
},
|
"yargs": "^15.1.0"
|
||||||
"overrides": {
|
|
||||||
"gulp-connect": {
|
|
||||||
"send": "0.19.0"
|
|
||||||
},
|
|
||||||
"gulp-header-comment": {
|
|
||||||
"moment": "2.30.1"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"browserslist": "> 2%, not dead",
|
"browserslist": "> 2%, not dead",
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -52,7 +52,7 @@ const Plugin = {
|
|||||||
block.innerHTML = betterTrim( block );
|
block.innerHTML = betterTrim( block );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Escape HTML tags unless the "data-noescape" attribute is present
|
// Escape HTML tags unless the "data-noescape" attrbute is present
|
||||||
if( config.escapeHTML && !block.hasAttribute( 'data-noescape' )) {
|
if( config.escapeHTML && !block.hasAttribute( 'data-noescape' )) {
|
||||||
block.innerHTML = block.innerHTML.replace( /</g,"<").replace(/>/g, '>' );
|
block.innerHTML = block.innerHTML.replace( /</g,"<").replace(/>/g, '>' );
|
||||||
}
|
}
|
||||||
@@ -138,7 +138,7 @@ const Plugin = {
|
|||||||
|
|
||||||
// Scroll highlights into view as we step through them
|
// Scroll highlights into view as we step through them
|
||||||
fragmentBlock.addEventListener( 'visible', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
|
fragmentBlock.addEventListener( 'visible', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock, scrollState ) );
|
||||||
fragmentBlock.addEventListener( 'hidden', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousElementSibling, scrollState ) );
|
fragmentBlock.addEventListener( 'hidden', Plugin.scrollHighlightedLineIntoView.bind( Plugin, fragmentBlock.previousSibling, scrollState ) );
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -7,16 +7,13 @@
|
|||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
|
|
||||||
const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
|
const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
|
||||||
DEFAULT_VERTICAL_SEPARATOR = null,
|
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
||||||
DEFAULT_NOTES_SEPARATOR = '^\s*notes?:',
|
|
||||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||||
|
|
||||||
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
const SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
|
||||||
|
|
||||||
// match an optional line number offset and highlight line numbers
|
const CODE_LINE_NUMBER_REGEX = /\[([\s\d,|-]*)\]/;
|
||||||
// [<line numbers>] or [<offset>: <line numbers>]
|
|
||||||
const CODE_LINE_NUMBER_REGEX = /\[\s*((\d*):)?\s*([\s\d,|-]*)\]/;
|
|
||||||
|
|
||||||
const HTML_ESCAPE_MAP = {
|
const HTML_ESCAPE_MAP = {
|
||||||
'&': '&',
|
'&': '&',
|
||||||
@@ -38,22 +35,22 @@ const Plugin = () => {
|
|||||||
function getMarkdownFromSlide( section ) {
|
function getMarkdownFromSlide( section ) {
|
||||||
|
|
||||||
// look for a <script> or <textarea data-template> wrapper
|
// look for a <script> or <textarea data-template> wrapper
|
||||||
const template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
|
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
|
||||||
|
|
||||||
// strip leading whitespace so it isn't evaluated as code
|
// strip leading whitespace so it isn't evaluated as code
|
||||||
let text = ( template || section ).textContent;
|
var text = ( template || section ).textContent;
|
||||||
|
|
||||||
// restore script end tags
|
// restore script end tags
|
||||||
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
|
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
|
||||||
|
|
||||||
const leadingWs = text.match( /^\n?(\s*)/ )[1].length,
|
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
|
||||||
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
|
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
|
||||||
|
|
||||||
if( leadingTabs > 0 ) {
|
if( leadingTabs > 0 ) {
|
||||||
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}(.*)','g'), function(m, p1) { return '\n' + p1 ; } );
|
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
|
||||||
}
|
}
|
||||||
else if( leadingWs > 1 ) {
|
else if( leadingWs > 1 ) {
|
||||||
text = text.replace( new RegExp('\\n? {' + leadingWs + '}(.*)', 'g'), function(m, p1) { return '\n' + p1 ; } );
|
text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
|
||||||
}
|
}
|
||||||
|
|
||||||
return text;
|
return text;
|
||||||
@@ -68,11 +65,11 @@ const Plugin = () => {
|
|||||||
*/
|
*/
|
||||||
function getForwardedAttributes( section ) {
|
function getForwardedAttributes( section ) {
|
||||||
|
|
||||||
const attributes = section.attributes;
|
var attributes = section.attributes;
|
||||||
const result = [];
|
var result = [];
|
||||||
|
|
||||||
for( let i = 0, len = attributes.length; i < len; i++ ) {
|
for( var i = 0, len = attributes.length; i < len; i++ ) {
|
||||||
const name = attributes[i].name,
|
var name = attributes[i].name,
|
||||||
value = attributes[i].value;
|
value = attributes[i].value;
|
||||||
|
|
||||||
// disregard attributes that are used for markdown loading/parsing
|
// disregard attributes that are used for markdown loading/parsing
|
||||||
@@ -95,12 +92,10 @@ const Plugin = () => {
|
|||||||
* values for what's not defined.
|
* values for what's not defined.
|
||||||
*/
|
*/
|
||||||
function getSlidifyOptions( options ) {
|
function getSlidifyOptions( options ) {
|
||||||
const markdownConfig = deck?.getConfig?.().markdown;
|
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
options.separator = options.separator || markdownConfig?.separator || DEFAULT_SLIDE_SEPARATOR;
|
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
|
||||||
options.verticalSeparator = options.verticalSeparator || markdownConfig?.verticalSeparator || DEFAULT_VERTICAL_SEPARATOR;
|
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
||||||
options.notesSeparator = options.notesSeparator || markdownConfig?.notesSeparator || DEFAULT_NOTES_SEPARATOR;
|
|
||||||
options.attributes = options.attributes || '';
|
options.attributes = options.attributes || '';
|
||||||
|
|
||||||
return options;
|
return options;
|
||||||
@@ -114,7 +109,7 @@ const Plugin = () => {
|
|||||||
|
|
||||||
options = getSlidifyOptions( options );
|
options = getSlidifyOptions( options );
|
||||||
|
|
||||||
const notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
|
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
|
||||||
|
|
||||||
if( notesMatch.length === 2 ) {
|
if( notesMatch.length === 2 ) {
|
||||||
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
|
||||||
@@ -136,10 +131,10 @@ const Plugin = () => {
|
|||||||
|
|
||||||
options = getSlidifyOptions( options );
|
options = getSlidifyOptions( options );
|
||||||
|
|
||||||
const separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
|
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
|
||||||
horizontalSeparatorRegex = new RegExp( options.separator );
|
horizontalSeparatorRegex = new RegExp( options.separator );
|
||||||
|
|
||||||
let matches,
|
var matches,
|
||||||
lastIndex = 0,
|
lastIndex = 0,
|
||||||
isHorizontal,
|
isHorizontal,
|
||||||
wasHorizontal = true,
|
wasHorizontal = true,
|
||||||
@@ -148,7 +143,7 @@ const Plugin = () => {
|
|||||||
|
|
||||||
// iterate until all blocks between separators are stacked up
|
// iterate until all blocks between separators are stacked up
|
||||||
while( matches = separatorRegex.exec( markdown ) ) {
|
while( matches = separatorRegex.exec( markdown ) ) {
|
||||||
const notes = null;
|
var notes = null;
|
||||||
|
|
||||||
// determine direction (horizontal by default)
|
// determine direction (horizontal by default)
|
||||||
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
|
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
|
||||||
@@ -177,10 +172,10 @@ const Plugin = () => {
|
|||||||
// add the remaining slide
|
// add the remaining slide
|
||||||
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
|
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
|
||||||
|
|
||||||
let markdownSections = '';
|
var markdownSections = '';
|
||||||
|
|
||||||
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
// flatten the hierarchical stack, and insert <section data-markdown> tags
|
||||||
for( let i = 0, len = sectionStack.length; i < len; i++ ) {
|
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
|
||||||
// vertical
|
// vertical
|
||||||
if( sectionStack[i] instanceof Array ) {
|
if( sectionStack[i] instanceof Array ) {
|
||||||
markdownSections += '<section '+ options.attributes +'>';
|
markdownSections += '<section '+ options.attributes +'>';
|
||||||
@@ -209,7 +204,7 @@ const Plugin = () => {
|
|||||||
|
|
||||||
return new Promise( function( resolve ) {
|
return new Promise( function( resolve ) {
|
||||||
|
|
||||||
const externalPromises = [];
|
var externalPromises = [];
|
||||||
|
|
||||||
[].slice.call( scope.querySelectorAll( 'section[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
|
[].slice.call( scope.querySelectorAll( 'section[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
|
||||||
|
|
||||||
@@ -262,13 +257,13 @@ const Plugin = () => {
|
|||||||
|
|
||||||
return new Promise( function( resolve, reject ) {
|
return new Promise( function( resolve, reject ) {
|
||||||
|
|
||||||
const xhr = new XMLHttpRequest(),
|
var xhr = new XMLHttpRequest(),
|
||||||
url = section.getAttribute( 'data-markdown' );
|
url = section.getAttribute( 'data-markdown' );
|
||||||
|
|
||||||
const datacharset = section.getAttribute( 'data-charset' );
|
var datacharset = section.getAttribute( 'data-charset' );
|
||||||
|
|
||||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||||
if( datacharset !== null && datacharset !== '' ) {
|
if( datacharset != null && datacharset != '' ) {
|
||||||
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -313,17 +308,17 @@ const Plugin = () => {
|
|||||||
*/
|
*/
|
||||||
function addAttributeInElement( node, elementTarget, separator ) {
|
function addAttributeInElement( node, elementTarget, separator ) {
|
||||||
|
|
||||||
const markdownClassesInElementsRegex = new RegExp( separator, 'mg' );
|
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
|
||||||
const markdownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
|
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
|
||||||
let nodeValue = node.nodeValue;
|
var nodeValue = node.nodeValue;
|
||||||
let matches,
|
var matches,
|
||||||
matchesClass;
|
matchesClass;
|
||||||
if( matches = markdownClassesInElementsRegex.exec( nodeValue ) ) {
|
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
|
||||||
|
|
||||||
const classes = matches[1];
|
var classes = matches[1];
|
||||||
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( markdownClassesInElementsRegex.lastIndex );
|
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
|
||||||
node.nodeValue = nodeValue;
|
node.nodeValue = nodeValue;
|
||||||
while( matchesClass = markdownClassRegex.exec( classes ) ) {
|
while( matchesClass = mardownClassRegex.exec( classes ) ) {
|
||||||
if( matchesClass[2] ) {
|
if( matchesClass[2] ) {
|
||||||
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
|
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
|
||||||
} else {
|
} else {
|
||||||
@@ -341,34 +336,34 @@ const Plugin = () => {
|
|||||||
*/
|
*/
|
||||||
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
|
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
|
||||||
|
|
||||||
if ( element !== null && element.childNodes !== undefined && element.childNodes.length > 0 ) {
|
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
|
||||||
let previousParentElement = element;
|
var previousParentElement = element;
|
||||||
for( let i = 0; i < element.childNodes.length; i++ ) {
|
for( var i = 0; i < element.childNodes.length; i++ ) {
|
||||||
const childElement = element.childNodes[i];
|
var childElement = element.childNodes[i];
|
||||||
if ( i > 0 ) {
|
if ( i > 0 ) {
|
||||||
let j = i - 1;
|
var j = i - 1;
|
||||||
while ( j >= 0 ) {
|
while ( j >= 0 ) {
|
||||||
const aPreviousChildElement = element.childNodes[j];
|
var aPreviousChildElement = element.childNodes[j];
|
||||||
if ( typeof aPreviousChildElement.setAttribute === 'function' && aPreviousChildElement.tagName !== "BR" ) {
|
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
|
||||||
previousParentElement = aPreviousChildElement;
|
previousParentElement = aPreviousChildElement;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
j = j - 1;
|
j = j - 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let parentSection = section;
|
var parentSection = section;
|
||||||
if( childElement.nodeName === "section" ) {
|
if( childElement.nodeName == "section" ) {
|
||||||
parentSection = childElement ;
|
parentSection = childElement ;
|
||||||
previousParentElement = childElement ;
|
previousParentElement = childElement ;
|
||||||
}
|
}
|
||||||
if ( typeof childElement.setAttribute === 'function' || childElement.nodeType === Node.COMMENT_NODE ) {
|
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
|
||||||
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
|
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( element.nodeType === Node.COMMENT_NODE ) {
|
if ( element.nodeType == Node.COMMENT_NODE ) {
|
||||||
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) === false ) {
|
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
|
||||||
addAttributeInElement( element, section, separatorSectionAttributes );
|
addAttributeInElement( element, section, separatorSectionAttributes );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -380,14 +375,14 @@ const Plugin = () => {
|
|||||||
*/
|
*/
|
||||||
function convertSlides() {
|
function convertSlides() {
|
||||||
|
|
||||||
const sections = deck.getRevealElement().querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
var sections = deck.getRevealElement().querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
||||||
|
|
||||||
[].slice.call( sections ).forEach( function( section ) {
|
[].slice.call( sections ).forEach( function( section ) {
|
||||||
|
|
||||||
section.setAttribute( 'data-markdown-parsed', true )
|
section.setAttribute( 'data-markdown-parsed', true )
|
||||||
|
|
||||||
const notes = section.querySelector( 'aside.notes' );
|
var notes = section.querySelector( 'aside.notes' );
|
||||||
const markdown = getMarkdownFromSlide( section );
|
var markdown = getMarkdownFromSlide( section );
|
||||||
|
|
||||||
section.innerHTML = marked( markdown );
|
section.innerHTML = marked( markdown );
|
||||||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
||||||
@@ -434,23 +429,14 @@ const Plugin = () => {
|
|||||||
renderer.code = ( code, language ) => {
|
renderer.code = ( code, language ) => {
|
||||||
|
|
||||||
// Off by default
|
// Off by default
|
||||||
let lineNumberOffset = '';
|
|
||||||
let lineNumbers = '';
|
let lineNumbers = '';
|
||||||
|
|
||||||
// Users can opt in to show line numbers and highlight
|
// Users can opt in to show line numbers and highlight
|
||||||
// specific lines.
|
// specific lines.
|
||||||
// ```javascript [] show line numbers
|
// ```javascript [] show line numbers
|
||||||
// ```javascript [1,4-8] highlights lines 1 and 4-8
|
// ```javascript [1,4-8] highlights lines 1 and 4-8
|
||||||
// optional line number offset:
|
|
||||||
// ```javascript [25: 1,4-8] start line numbering at 25,
|
|
||||||
// highlights lines 1 (numbered as 25) and 4-8 (numbered as 28-32)
|
|
||||||
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
|
if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
|
||||||
let lineNumberOffsetMatch = language.match( CODE_LINE_NUMBER_REGEX )[2];
|
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
|
||||||
if (lineNumberOffsetMatch){
|
|
||||||
lineNumberOffset = `data-ln-start-from="${lineNumberOffsetMatch.trim()}"`;
|
|
||||||
}
|
|
||||||
|
|
||||||
lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[3].trim();
|
|
||||||
lineNumbers = `data-line-numbers="${lineNumbers}"`;
|
lineNumbers = `data-line-numbers="${lineNumbers}"`;
|
||||||
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
|
language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
|
||||||
}
|
}
|
||||||
@@ -460,9 +446,7 @@ const Plugin = () => {
|
|||||||
// highlight.js is able to read it
|
// highlight.js is able to read it
|
||||||
code = escapeForHTML( code );
|
code = escapeForHTML( code );
|
||||||
|
|
||||||
// return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
|
return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
|
||||||
|
|
||||||
return `<pre><code ${lineNumbers} ${lineNumberOffset} class="${language}">${code}</code></pre>`;
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export const KaTeX = () => {
|
|||||||
{left: '\\(', right: '\\)', display: false},
|
{left: '\\(', right: '\\)', display: false},
|
||||||
{left: '\\[', right: '\\]', display: true}
|
{left: '\\[', right: '\\]', display: true}
|
||||||
],
|
],
|
||||||
ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
|
ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre']
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadCss = src => {
|
const loadCss = src => {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre","code"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(a){t=a;let n=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...n},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...n.tex2jax},i.mathjax=i.config=null,function(t,e){let a=document.querySelector("head"),n=document.createElement("script");n.type="text/javascript",n.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};n.onload=i,n.onreadystatechange=()=>{"loaded"===this.readyState&&i()},a.appendChild(n)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;
|
const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(a){t=a;let n=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...n},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...n.tex2jax},i.mathjax=i.config=null,function(t,e){let a=document.querySelector("head"),n=document.createElement("script");n.type="text/javascript",n.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};n.onload=i,n.onreadystatechange=()=>{"loaded"===this.readyState&&i()},a.appendChild(n)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;
|
||||||
/*!
|
/*!
|
||||||
* This plugin is a wrapper for the MathJax2,
|
* This plugin is a wrapper for the MathJax2,
|
||||||
* MathJax3 and KaTeX typesetter plugins.
|
* MathJax3 and KaTeX typesetter plugins.
|
||||||
*/
|
*/
|
||||||
var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre","code"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre","code"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{t.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){t.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export{a as default};
|
var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:l,version:o,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export default a;
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre","code"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre","code"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:c,...r}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),r),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre","code"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{t.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){t.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})}));
|
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})}));
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export const MathJax2 = () => {
|
|||||||
messageStyle: 'none',
|
messageStyle: 'none',
|
||||||
tex2jax: {
|
tex2jax: {
|
||||||
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
||||||
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre', 'code' ]
|
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
|
||||||
},
|
},
|
||||||
skipStartupTypeset: true
|
skipStartupTypeset: true
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -15,13 +15,13 @@ export const MathJax3 = () => {
|
|||||||
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ]
|
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ]
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre', 'code' ]
|
skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
|
||||||
},
|
},
|
||||||
startup: {
|
startup: {
|
||||||
ready: () => {
|
ready: () => {
|
||||||
MathJax.startup.defaultReady();
|
MathJax.startup.defaultReady();
|
||||||
MathJax.startup.promise.then(() => {
|
MathJax.startup.promise.then(() => {
|
||||||
deck.layout();
|
Reveal.layout();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -66,7 +66,7 @@ export const MathJax3 = () => {
|
|||||||
|
|
||||||
loadScript( url, function() {
|
loadScript( url, function() {
|
||||||
// Reprocess equations in slides when they turn visible
|
// Reprocess equations in slides when they turn visible
|
||||||
deck.addEventListener( 'slidechanged', function( event ) {
|
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||||
MathJax.typeset();
|
MathJax.typeset();
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -146,12 +146,8 @@ const Plugin = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Look for notes defined in an aside element
|
// Look for notes defined in an aside element
|
||||||
if( notesElements && notesElements.length ) {
|
if( notesElements ) {
|
||||||
// Ignore notes inside of fragments since those are shown
|
messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
|
||||||
// individually when stepping through fragments
|
|
||||||
notesElements = Array.from( notesElements ).filter( notesElement => notesElement.closest( '.fragment' ) === null );
|
|
||||||
|
|
||||||
messageData.notes = notesElements.map( notesElement => notesElement.innerHTML ).join( '\n' );
|
|
||||||
messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
|
messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -180,16 +176,14 @@ const Plugin = () => {
|
|||||||
// (added 12/5/22 as a XSS safeguard)
|
// (added 12/5/22 as a XSS safeguard)
|
||||||
if( isSameOriginEvent( event ) ) {
|
if( isSameOriginEvent( event ) ) {
|
||||||
|
|
||||||
try {
|
let data = JSON.parse( event.data );
|
||||||
let data = JSON.parse( event.data );
|
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
|
||||||
if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
|
clearInterval( connectInterval );
|
||||||
clearInterval( connectInterval );
|
onConnected();
|
||||||
onConnected();
|
}
|
||||||
}
|
else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
|
||||||
else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
|
callRevealApi( data.methodName, data.arguments, data.callId );
|
||||||
callRevealApi( data.methodName, data.arguments, data.callId );
|
}
|
||||||
}
|
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -209,10 +203,6 @@ const Plugin = () => {
|
|||||||
deck.on( 'overviewshown', post );
|
deck.on( 'overviewshown', post );
|
||||||
deck.on( 'paused', post );
|
deck.on( 'paused', post );
|
||||||
deck.on( 'resumed', post );
|
deck.on( 'resumed', post );
|
||||||
deck.on( 'previewiframe', post );
|
|
||||||
deck.on( 'previewimage', post );
|
|
||||||
deck.on( 'previewvideo', post );
|
|
||||||
deck.on( 'closeoverlay', post );
|
|
||||||
|
|
||||||
// Post the initial state
|
// Post the initial state
|
||||||
post();
|
post();
|
||||||
@@ -233,7 +223,7 @@ const Plugin = () => {
|
|||||||
openSpeakerWindow();
|
openSpeakerWindow();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// Keep listening for speaker view heartbeats. If we receive a
|
// Keep listening for speaker view hearbeats. If we receive a
|
||||||
// heartbeat from an orphaned window, reconnect it. This ensures
|
// heartbeat from an orphaned window, reconnect it. This ensures
|
||||||
// that we remain connected to the notes even if the presentation
|
// that we remain connected to the notes even if the presentation
|
||||||
// is reloaded.
|
// is reloaded.
|
||||||
|
|||||||
@@ -383,13 +383,6 @@
|
|||||||
|
|
||||||
window.addEventListener( 'message', function( event ) {
|
window.addEventListener( 'message', function( event ) {
|
||||||
|
|
||||||
// Validate the origin of all messages to avoid parsing messages
|
|
||||||
// that aren't meant for us. Ignore when running off file:// so
|
|
||||||
// that the speaker view continues to work without a web server.
|
|
||||||
if( window.location.origin !== event.origin && window.location.origin !== 'file://' ) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
clearTimeout( connectionTimeout );
|
clearTimeout( connectionTimeout );
|
||||||
connectionStatus.style.display = 'none';
|
connectionStatus.style.display = 'none';
|
||||||
|
|
||||||
@@ -414,24 +407,14 @@
|
|||||||
}
|
}
|
||||||
// Messages sent by the reveal.js inside of the current slide preview
|
// Messages sent by the reveal.js inside of the current slide preview
|
||||||
else if( data && data.namespace === 'reveal' ) {
|
else if( data && data.namespace === 'reveal' ) {
|
||||||
const supportedEvents = [
|
|
||||||
'slidechanged',
|
|
||||||
'fragmentshown',
|
|
||||||
'fragmenthidden',
|
|
||||||
'paused',
|
|
||||||
'resumed',
|
|
||||||
'previewiframe',
|
|
||||||
'previewimage',
|
|
||||||
'previewvideo',
|
|
||||||
'closeoverlay'
|
|
||||||
];
|
|
||||||
|
|
||||||
if( /ready/.test( data.eventName ) ) {
|
if( /ready/.test( data.eventName ) ) {
|
||||||
// Send a message back to notify that the handshake is complete
|
// Send a message back to notify that the handshake is complete
|
||||||
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
|
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
|
||||||
}
|
}
|
||||||
else if( supportedEvents.includes( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
|
else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
|
||||||
|
|
||||||
dispatchStateToMainWindow( data.state );
|
dispatchStateToMainWindow( data.state );
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -504,12 +487,9 @@
|
|||||||
notes.classList.add( 'hidden' );
|
notes.classList.add( 'hidden' );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't show lightboxes in the upcoming slide
|
|
||||||
const { previewVideo, previewImage, previewIframe, ...upcomingState } = data.state;
|
|
||||||
|
|
||||||
// Update the note slides
|
// Update the note slides
|
||||||
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ upcomingState ] }), '*' );
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ] }), '*' );
|
||||||
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
|
upcomingSlide.contentWindow.postMessage( JSON.stringify({ method: 'next' }), '*' );
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -553,8 +533,8 @@
|
|||||||
|
|
||||||
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
|
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
|
||||||
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
|
var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
|
||||||
var currentURL = data.url + urlSeparator + params + '&scrollActivationWidth=false&postMessageEvents=true' + hash;
|
var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
|
||||||
var upcomingURL = data.url + urlSeparator + params + '&scrollActivationWidth=false&controls=false' + hash;
|
var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
|
||||||
|
|
||||||
currentSlide = document.createElement( 'iframe' );
|
currentSlide = document.createElement( 'iframe' );
|
||||||
currentSlide.setAttribute( 'width', 1280 );
|
currentSlide.setAttribute( 'width', 1280 );
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ const Plugin = () => {
|
|||||||
|
|
||||||
this.setRegex = function(input)
|
this.setRegex = function(input)
|
||||||
{
|
{
|
||||||
input = input.trim();
|
input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
|
||||||
matchRegex = new RegExp("(" + input + ")","i");
|
matchRegex = new RegExp("(" + input + ")","i");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -235,9 +235,7 @@ const Plugin = () => {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
open: openSearch,
|
open: openSearch
|
||||||
close: closeSearch,
|
|
||||||
toggle: toggleSearch
|
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,4 +4,4 @@
|
|||||||
*
|
*
|
||||||
* @author Jon Snyder <snyder.jon@gmail.com>, February 2013
|
* @author Jon Snyder <snyder.jon@gmail.com>, February 2013
|
||||||
*/
|
*/
|
||||||
const e=()=>{let e,t,n,l,o,i,r;function s(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML='<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>\n\t\t</span>',n=t.querySelector(".searchinput"),n.style.width="240px",n.style.fontSize="14px",n.style.padding="4px 6px",n.style.color="#000",n.style.background="#fff",n.style.borderRadius="2px",n.style.border="0",n.style.outline="0",n.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",n.style["-webkit-appearance"]="none",e.getRevealElement().appendChild(t),n.addEventListener("keyup",(function(t){if(13===t.keyCode)t.preventDefault(),function(){if(i){var t=n.value;""===t?(r&&r.remove(),l=null):(r=new p("slidecontent"),l=r.apply(t),o=0)}l&&(l.length&&l.length<=o&&(o=0),l.length>o&&(e.slide(l[o].h,l[o].v),o++))}(),i=!1;else i=!0}),!1),d()}function a(){t||s(),t.style.display="inline",n.focus(),n.select()}function d(){t||s(),t.style.display="none",r&&r.remove()}function c(){t||s(),"inline"!==t.style.display?a():d()}function p(t,n){var l=document.getElementById(t)||document.body,o=n||"EM",i=new RegExp("^(?:"+o+"|SCRIPT|FORM)$"),r=["#ff6","#a0ffff","#9f9","#f99","#f6f"],s=[],a=0,d="",c=[];this.setRegex=function(e){e=e.trim(),d=new RegExp("("+e+")","i")},this.getRegex=function(){return d.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(t){if(null!=t&&t&&d&&!i.test(t.nodeName)){if(t.hasChildNodes())for(var n=0;n<t.childNodes.length;n++)this.hiliteWords(t.childNodes[n]);var l,p;if(3==t.nodeType)if((l=t.nodeValue)&&(p=d.exec(l))){for(var u=t;null!=u&&"SECTION"!=u.nodeName;)u=u.parentNode;var f=e.getIndices(u),h=c.length,y=!1;for(n=0;n<h;n++)c[n].h===f.h&&c[n].v===f.v&&(y=!0);y||c.push(f),s[p[0].toLowerCase()]||(s[p[0].toLowerCase()]=r[a++%r.length]);var g=document.createElement(o);g.appendChild(document.createTextNode(p[0])),g.style.backgroundColor=s[p[0].toLowerCase()],g.style.fontStyle="inherit",g.style.color="#000";var v=t.splitText(p.index);v.nodeValue=v.nodeValue.substring(p[0].length),t.parentNode.insertBefore(g,v)}}},this.remove=function(){for(var e,t=document.getElementsByTagName(o);t.length&&(e=t[0]);)e.parentNode.replaceChild(e.firstChild,e)},this.apply=function(e){if(null!=e&&e)return this.remove(),this.setRegex(e),this.hiliteWords(l),c}}return{id:"search",init:t=>{e=t,e.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",(function(e){"F"==e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),c())}),!1)},open:a,close:d,toggle:c}};export{e as default};
|
export default()=>{let e,t,n,l,i,o,r;function s(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML='<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>\n\t\t</span>',n=t.querySelector(".searchinput"),n.style.width="240px",n.style.fontSize="14px",n.style.padding="4px 6px",n.style.color="#000",n.style.background="#fff",n.style.borderRadius="2px",n.style.border="0",n.style.outline="0",n.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",n.style["-webkit-appearance"]="none",e.getRevealElement().appendChild(t),n.addEventListener("keyup",(function(t){switch(t.keyCode){case 13:t.preventDefault(),function(){if(o){var t=n.value;""===t?(r&&r.remove(),l=null):(r=new c("slidecontent"),l=r.apply(t),i=0)}l&&(l.length&&l.length<=i&&(i=0),l.length>i&&(e.slide(l[i].h,l[i].v),i++))}(),o=!1;break;default:o=!0}}),!1),d()}function a(){t||s(),t.style.display="inline",n.focus(),n.select()}function d(){t||s(),t.style.display="none",r&&r.remove()}function c(t,n){var l=document.getElementById(t)||document.body,i=n||"EM",o=new RegExp("^(?:"+i+"|SCRIPT|FORM)$"),r=["#ff6","#a0ffff","#9f9","#f99","#f6f"],s=[],a=0,d="",c=[];this.setRegex=function(e){e=e.replace(/^[^\w]+|[^\w]+$/g,"").replace(/[^\w'-]+/g,"|"),d=new RegExp("("+e+")","i")},this.getRegex=function(){return d.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(t){if(null!=t&&t&&d&&!o.test(t.nodeName)){if(t.hasChildNodes())for(var n=0;n<t.childNodes.length;n++)this.hiliteWords(t.childNodes[n]);var l,p;if(3==t.nodeType)if((l=t.nodeValue)&&(p=d.exec(l))){for(var u=t;null!=u&&"SECTION"!=u.nodeName;)u=u.parentNode;var h=e.getIndices(u),f=c.length,y=!1;for(n=0;n<f;n++)c[n].h===h.h&&c[n].v===h.v&&(y=!0);y||c.push(h),s[p[0].toLowerCase()]||(s[p[0].toLowerCase()]=r[a++%r.length]);var g=document.createElement(i);g.appendChild(document.createTextNode(p[0])),g.style.backgroundColor=s[p[0].toLowerCase()],g.style.fontStyle="inherit",g.style.color="#000";var v=t.splitText(p.index);v.nodeValue=v.nodeValue.substring(p[0].length),t.parentNode.insertBefore(g,v)}}},this.remove=function(){for(var e,t=document.getElementsByTagName(i);t.length&&(e=t[0]);)e.parentNode.replaceChild(e.firstChild,e)},this.apply=function(e){if(null!=e&&e)return this.remove(),this.setRegex(e),this.hiliteWords(l),c}}return{id:"search",init:n=>{e=n,e.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",(function(e){"F"==e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),t||s(),"inline"!==t.style.display?a():d())}),!1)},open:a}};
|
||||||
|
|||||||
@@ -4,4 +4,4 @@
|
|||||||
* by navigatating to that slide and highlighting it.
|
* by navigatating to that slide and highlighting it.
|
||||||
*
|
*
|
||||||
* @author Jon Snyder <snyder.jon@gmail.com>, February 2013
|
* @author Jon Snyder <snyder.jon@gmail.com>, February 2013
|
||||||
*/return()=>{let e,t,n,o,i,l,s;function r(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML='<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>\n\t\t</span>',n=t.querySelector(".searchinput"),n.style.width="240px",n.style.fontSize="14px",n.style.padding="4px 6px",n.style.color="#000",n.style.background="#fff",n.style.borderRadius="2px",n.style.border="0",n.style.outline="0",n.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",n.style["-webkit-appearance"]="none",e.getRevealElement().appendChild(t),n.addEventListener("keyup",(function(t){if(13===t.keyCode)t.preventDefault(),function(){if(l){var t=n.value;""===t?(s&&s.remove(),o=null):(s=new f("slidecontent"),o=s.apply(t),i=0)}o&&(o.length&&o.length<=i&&(i=0),o.length>i&&(e.slide(o[i].h,o[i].v),i++))}(),l=!1;else l=!0}),!1),d()}function a(){t||r(),t.style.display="inline",n.focus(),n.select()}function d(){t||r(),t.style.display="none",s&&s.remove()}function c(){t||r(),"inline"!==t.style.display?a():d()}function f(t,n){var o=document.getElementById(t)||document.body,i=n||"EM",l=new RegExp("^(?:"+i+"|SCRIPT|FORM)$"),s=["#ff6","#a0ffff","#9f9","#f99","#f6f"],r=[],a=0,d="",c=[];this.setRegex=function(e){e=e.trim(),d=new RegExp("("+e+")","i")},this.getRegex=function(){return d.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(t){if(null!=t&&t&&d&&!l.test(t.nodeName)){if(t.hasChildNodes())for(var n=0;n<t.childNodes.length;n++)this.hiliteWords(t.childNodes[n]);var o,f;if(3==t.nodeType)if((o=t.nodeValue)&&(f=d.exec(o))){for(var u=t;null!=u&&"SECTION"!=u.nodeName;)u=u.parentNode;var p=e.getIndices(u),h=c.length,y=!1;for(n=0;n<h;n++)c[n].h===p.h&&c[n].v===p.v&&(y=!0);y||c.push(p),r[f[0].toLowerCase()]||(r[f[0].toLowerCase()]=s[a++%s.length]);var g=document.createElement(i);g.appendChild(document.createTextNode(f[0])),g.style.backgroundColor=r[f[0].toLowerCase()],g.style.fontStyle="inherit",g.style.color="#000";var v=t.splitText(f.index);v.nodeValue=v.nodeValue.substring(f[0].length),t.parentNode.insertBefore(g,v)}}},this.remove=function(){for(var e,t=document.getElementsByTagName(i);t.length&&(e=t[0]);)e.parentNode.replaceChild(e.firstChild,e)},this.apply=function(e){if(null!=e&&e)return this.remove(),this.setRegex(e),this.hiliteWords(o),c}}return{id:"search",init:t=>{e=t,e.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",(function(e){"F"==e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),c())}),!1)},open:a,close:d,toggle:c}}}));
|
*/return()=>{let e,t,n,l,o,i,r;function s(){t=document.createElement("div"),t.classList.add("searchbox"),t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.zIndex=10,t.innerHTML='<input type="search" class="searchinput" placeholder="Search..." style="vertical-align: top;"/>\n\t\t</span>',n=t.querySelector(".searchinput"),n.style.width="240px",n.style.fontSize="14px",n.style.padding="4px 6px",n.style.color="#000",n.style.background="#fff",n.style.borderRadius="2px",n.style.border="0",n.style.outline="0",n.style.boxShadow="0 2px 18px rgba(0, 0, 0, 0.2)",n.style["-webkit-appearance"]="none",e.getRevealElement().appendChild(t),n.addEventListener("keyup",(function(t){switch(t.keyCode){case 13:t.preventDefault(),function(){if(i){var t=n.value;""===t?(r&&r.remove(),l=null):(r=new c("slidecontent"),l=r.apply(t),o=0)}l&&(l.length&&l.length<=o&&(o=0),l.length>o&&(e.slide(l[o].h,l[o].v),o++))}(),i=!1;break;default:i=!0}}),!1),d()}function a(){t||s(),t.style.display="inline",n.focus(),n.select()}function d(){t||s(),t.style.display="none",r&&r.remove()}function c(t,n){var l=document.getElementById(t)||document.body,o=n||"EM",i=new RegExp("^(?:"+o+"|SCRIPT|FORM)$"),r=["#ff6","#a0ffff","#9f9","#f99","#f6f"],s=[],a=0,d="",c=[];this.setRegex=function(e){e=e.replace(/^[^\w]+|[^\w]+$/g,"").replace(/[^\w'-]+/g,"|"),d=new RegExp("("+e+")","i")},this.getRegex=function(){return d.toString().replace(/^\/\\b\(|\)\\b\/i$/g,"").replace(/\|/g," ")},this.hiliteWords=function(t){if(null!=t&&t&&d&&!i.test(t.nodeName)){if(t.hasChildNodes())for(var n=0;n<t.childNodes.length;n++)this.hiliteWords(t.childNodes[n]);var l,f;if(3==t.nodeType)if((l=t.nodeValue)&&(f=d.exec(l))){for(var u=t;null!=u&&"SECTION"!=u.nodeName;)u=u.parentNode;var p=e.getIndices(u),h=c.length,y=!1;for(n=0;n<h;n++)c[n].h===p.h&&c[n].v===p.v&&(y=!0);y||c.push(p),s[f[0].toLowerCase()]||(s[f[0].toLowerCase()]=r[a++%r.length]);var g=document.createElement(o);g.appendChild(document.createTextNode(f[0])),g.style.backgroundColor=s[f[0].toLowerCase()],g.style.fontStyle="inherit",g.style.color="#000";var v=t.splitText(f.index);v.nodeValue=v.nodeValue.substring(f[0].length),t.parentNode.insertBefore(g,v)}}},this.remove=function(){for(var e,t=document.getElementsByTagName(o);t.length&&(e=t[0]);)e.parentNode.replaceChild(e.firstChild,e)},this.apply=function(e){if(null!=e&&e)return this.remove(),this.setRegex(e),this.hiliteWords(l),c}}return{id:"search",init:n=>{e=n,e.registerKeyboardShortcut("CTRL + Shift + F","Search"),document.addEventListener("keydown",(function(e){"F"==e.key&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),t||s(),"inline"!==t.style.display?a():d())}),!1)},open:a}}}));
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user