Compare commits
3 Commits
advance-to
...
internship
| Author | SHA1 | Date | |
|---|---|---|---|
77d6f8541f
|
|||
|
b207995c7d
|
|||
|
2e9f166b72
|
@@ -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;
|
|
||||||
padding: 0;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html:not(.print-pdf) .reveal {
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
font-size: 20pt;
|
font-size: 20pt;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
border: 0;
|
||||||
|
margin: 0 5%;
|
||||||
|
padding: 0;
|
||||||
|
overflow: visible;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 */
|
||||||
|
|||||||
653
css/reveal.scss
653
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 {
|
||||||
transition: all .2s ease;
|
|
||||||
|
|
||||||
&:not(.custom) {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
transition: all .2s ease;
|
||||||
will-change: opacity;
|
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,106 +1429,21 @@ $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);
|
left: 0;
|
||||||
bottom: var(--r-overlay-margin);
|
width: 100%;
|
||||||
left: var(--r-overlay-margin);
|
height: 100%;
|
||||||
border-radius: min( var(--r-overlay-margin), 6px );
|
z-index: 1000;
|
||||||
z-index: 99;
|
background: rgba( 0, 0, 0, 0.9 );
|
||||||
background: rgba( 0, 0, 0, 0.95 );
|
|
||||||
backdrop-filter: blur( 10px );
|
|
||||||
transition: all 0.3s ease;
|
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 {
|
.reveal > .overlay .spinner {
|
||||||
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;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -1552,12 +1454,60 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
z-index: 10;
|
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);
|
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;
|
visibility: visible;
|
||||||
opacity: 0;
|
opacity: 0.6;
|
||||||
}
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
// Preview overlay
|
.reveal > .overlay header {
|
||||||
.r-overlay-preview .r-overlay-content iframe {
|
position: absolute;
|
||||||
|
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;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.reveal > .overlay header a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.reveal > .overlay header a .icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-size: 100%;
|
||||||
|
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==);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay .viewport {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
top: $overlayHeaderHeight + $overlayHeaderPadding*2;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@@ -1567,45 +1517,14 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-preview[data-state="loaded"] iframe {
|
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-preview .r-overlay-content img,
|
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||||
.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;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -1613,63 +1532,57 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
.r-overlay-preview .r-overlay-error {
|
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||||
font-size: 18px;
|
|
||||||
color: orange;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-preview .x-frame-error {
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease 0.3s;
|
transition: opacity 0.3s ease 0.3s;
|
||||||
}
|
}
|
||||||
.r-overlay-preview[data-state="loaded"] .x-frame-error {
|
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-preview[data-state="loading"] .r-overlay-spinner {
|
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||||
opacity: 0.6;
|
opacity: 0;
|
||||||
visibility: visible;
|
visibility: hidden;
|
||||||
}
|
transform: scale(0.2);
|
||||||
|
}
|
||||||
|
|
||||||
// Help overlay
|
.reveal > .overlay.overlay-help .viewport {
|
||||||
.r-overlay-help .r-overlay-content {
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.r-overlay-help-content {
|
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||||
max-width: 560px;
|
width: 600px;
|
||||||
padding: 20px 0;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
padding: 20px 20px 80px 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-help-content .title {
|
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-top: 0;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Specificity battle with reveal.js theme table styles */
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||||
.r-overlay-help .r-overlay-help-content table {
|
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
text-align: left;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.r-overlay-help .r-overlay-help-content table th,
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||||
.r-overlay-help .r-overlay-help-content table td {
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||||
width: 240px;
|
width: 200px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.r-overlay-help .r-overlay-help-content table th {
|
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
padding-bottom: 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;
|
||||||
|
|||||||
@@ -1,107 +0,0 @@
|
|||||||
/**
|
|
||||||
* Dracula Dark theme for reveal.js.
|
|
||||||
* Based on https://draculatheme.com
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
// Default mixins and settings -----------------
|
|
||||||
@import "../template/mixins";
|
|
||||||
@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);
|
|
||||||
|
|
||||||
$systemFontsSansSerif: -apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
avenir next,
|
|
||||||
avenir,
|
|
||||||
segoe ui,
|
|
||||||
helvetica neue,
|
|
||||||
helvetica,
|
|
||||||
Cantarell,
|
|
||||||
Ubuntu,
|
|
||||||
roboto,
|
|
||||||
noto,
|
|
||||||
arial,
|
|
||||||
sans-serif;
|
|
||||||
$systemFontsMono: Menlo,
|
|
||||||
Consolas,
|
|
||||||
Monaco,
|
|
||||||
Liberation Mono,
|
|
||||||
Lucida Console,
|
|
||||||
monospace;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Dracula colors by Zeno Rocha
|
|
||||||
* https://draculatheme.com/contribute
|
|
||||||
*/
|
|
||||||
html * {
|
|
||||||
color-profile: sRGB;
|
|
||||||
rendering-intent: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
$background: #282A36;
|
|
||||||
$foreground: #F8F8F2;
|
|
||||||
$selection: #44475A;
|
|
||||||
$comment: #6272A4;
|
|
||||||
$red: #FF5555;
|
|
||||||
$orange: #FFB86C;
|
|
||||||
$yellow: #F1FA8C;
|
|
||||||
$green: #50FA7B;
|
|
||||||
$purple: #BD93F9;
|
|
||||||
$cyan: #8BE9FD;
|
|
||||||
$pink: #FF79C6;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Override theme settings (see ../template/settings.scss)
|
|
||||||
$mainColor: $foreground;
|
|
||||||
$headingColor: $purple;
|
|
||||||
$headingTextShadow: none;
|
|
||||||
$headingTextTransform: none;
|
|
||||||
$backgroundColor: $background;
|
|
||||||
$linkColor: $pink;
|
|
||||||
$linkColorHover: $cyan;
|
|
||||||
$selectionBackgroundColor: $selection;
|
|
||||||
$inlineCodeColor: $green;
|
|
||||||
$listBulletColor: $cyan;
|
|
||||||
|
|
||||||
$mainFont: $systemFontsSansSerif;
|
|
||||||
$codeFont: "Fira Code", $systemFontsMono;
|
|
||||||
|
|
||||||
// Change text colors against light slide backgrounds
|
|
||||||
@include light-bg-text-color($background);
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
|
||||||
@import "../template/theme";
|
|
||||||
// ---------------------------------------------
|
|
||||||
|
|
||||||
// Define additional color effects based on Dracula spec
|
|
||||||
// https://spec.draculatheme.com/
|
|
||||||
:root {
|
|
||||||
--r-bold-color: #{$orange};
|
|
||||||
--r-italic-color: #{$yellow};
|
|
||||||
--r-inline-code-color: #{$inlineCodeColor};
|
|
||||||
--r-list-bullet-color: #{$listBulletColor};
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
strong, b {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -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,6 +278,7 @@
|
|||||||
|
|
||||||
.reveal .roll span:after {
|
.reveal .roll span:after {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
// background: darken( var(--r-link-color), 15% );
|
||||||
background: var(--r-link-color-dark);
|
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 {
|
||||||
|
|||||||
387
dist/theme/dracula.css
vendored
387
dist/theme/dracula.css
vendored
@@ -1,387 +0,0 @@
|
|||||||
/**
|
|
||||||
* Dracula Dark theme for reveal.js.
|
|
||||||
* 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
|
|
||||||
* https://draculatheme.com/contribute
|
|
||||||
*/
|
|
||||||
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 {
|
|
||||||
color: #282A36;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*********************************************
|
|
||||||
* GLOBAL STYLES
|
|
||||||
*********************************************/
|
|
||||||
:root {
|
|
||||||
--r-background-color: #282A36;
|
|
||||||
--r-main-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
|
||||||
--r-main-font-size: 40px;
|
|
||||||
--r-main-color: #F8F8F2;
|
|
||||||
--r-block-margin: 20px;
|
|
||||||
--r-heading-margin: 0 0 20px 0;
|
|
||||||
--r-heading-font: League Gothic, Impact, sans-serif;
|
|
||||||
--r-heading-color: #BD93F9;
|
|
||||||
--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: normal;
|
|
||||||
--r-heading1-text-shadow: none;
|
|
||||||
--r-heading1-size: 3.77em;
|
|
||||||
--r-heading2-size: 2.11em;
|
|
||||||
--r-heading3-size: 1.55em;
|
|
||||||
--r-heading4-size: 1em;
|
|
||||||
--r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
|
|
||||||
--r-link-color: #FF79C6;
|
|
||||||
--r-link-color-dark: rgb(255, 64.6, 174.0089552239);
|
|
||||||
--r-link-color-hover: #8BE9FD;
|
|
||||||
--r-selection-background-color: #44475A;
|
|
||||||
--r-selection-color: #fff;
|
|
||||||
--r-overlay-element-bg-color: 240, 240, 240;
|
|
||||||
--r-overlay-element-fg-color: 0, 0, 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal-viewport {
|
|
||||||
background: #282A36;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:root {
|
|
||||||
--r-bold-color: #FFB86C;
|
|
||||||
--r-italic-color: #F1FA8C;
|
|
||||||
--r-inline-code-color: #50FA7B;
|
|
||||||
--r-list-bullet-color: #8BE9FD;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal strong, .reveal b {
|
|
||||||
color: var(--r-bold-color);
|
|
||||||
}
|
|
||||||
.reveal em, .reveal i, .reveal blockquote {
|
|
||||||
color: var(--r-italic-color);
|
|
||||||
}
|
|
||||||
.reveal code {
|
|
||||||
color: var(--r-inline-code-color);
|
|
||||||
}
|
|
||||||
.reveal ul li::marker, .reveal ol li::marker {
|
|
||||||
color: var(--r-list-bullet-color);
|
|
||||||
}
|
|
||||||
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>
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
@@ -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>
|
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<title>reveal.js - Markdown Example</title>
|
<title>reveal.js - Markdown Example</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../dist/reveal.css">
|
<link rel="stylesheet" href="../dist/reveal.css">
|
||||||
<link rel="stylesheet" href="../dist/theme/black.css" id="theme">
|
<link rel="stylesheet" href="../dist/theme/white.css" id="theme">
|
||||||
|
|
||||||
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
|
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
|
||||||
</head>
|
</head>
|
||||||
@@ -21,6 +21,101 @@
|
|||||||
<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
|
<!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
|
||||||
<section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
|
<section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
|
||||||
|
|
||||||
|
<!-- Slides are separated by three dashes (the default) -->
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
## Demo 1
|
||||||
|
Slide 1
|
||||||
|
---
|
||||||
|
## Demo 1
|
||||||
|
Slide 2
|
||||||
|
---
|
||||||
|
## Demo 1
|
||||||
|
Slide 3
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
|
||||||
|
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
|
||||||
|
<script type="text/template">
|
||||||
|
## Demo 2
|
||||||
|
Slide 1.1
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
## Demo 2
|
||||||
|
Slide 1.2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Demo 2
|
||||||
|
Slide 2
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
|
||||||
|
<section data-markdown data-separator="$x">
|
||||||
|
<script type="text/template">
|
||||||
|
A
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
B
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
C
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Slide attributes -->
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
<!-- .slide: data-background="#000000" -->
|
||||||
|
## Slide attributes
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Element attributes -->
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
## Element attributes
|
||||||
|
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
|
||||||
|
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Code -->
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
```php [1|3-5]
|
||||||
|
public function foo()
|
||||||
|
{
|
||||||
|
$foo = array(
|
||||||
|
'bar' => 'bar'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Images -->
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Math -->
|
||||||
|
<section data-markdown>
|
||||||
|
## The Lorenz Equations
|
||||||
|
`\[\begin{aligned}
|
||||||
|
\dot{x} & = \sigma(y-x) \\
|
||||||
|
\dot{y} & = \rho x - y - xz \\
|
||||||
|
\dot{z} & = -\beta z + xy
|
||||||
|
\end{aligned} \]`
|
||||||
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -33,8 +128,6 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
width: 1920,
|
|
||||||
height: 1080,
|
|
||||||
controls: true,
|
controls: true,
|
||||||
progress: true,
|
progress: true,
|
||||||
history: true,
|
history: true,
|
||||||
|
|||||||
@@ -1,133 +1,41 @@
|
|||||||
# RUG: Turbo LLM for Rust Unit Test Generation
|
# Markdown Demo
|
||||||
|
|
||||||
Keywords: LLM, Rust, Unit Test
|
|
||||||
|
|
||||||
Research date: 2022, published date: 2025
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Introduction
|
## External 1.1
|
||||||
|
|
||||||
* Unit testing is crucial but costly.
|
Content 1.1
|
||||||
|
|
||||||
* Rust's strict type system.
|
Note: This will only appear in the speaker notes window.
|
||||||
|
|
||||||
* Existing LLM approaches often fail.
|
|
||||||
|
|
||||||
|
|
||||||
#### Rust Unit Test
|
## External 1.2
|
||||||
|
|
||||||
```rust
|
Content 1.2
|
||||||
/// Returns the sum of two numbers
|
|
||||||
///
|
|
||||||
/// # Examples
|
|
||||||
///
|
|
||||||
/// ```
|
|
||||||
/// assert_eq!(add(2, 3), 5);
|
|
||||||
/// assert_eq!(add(-1, 1), 0);
|
|
||||||
/// ```
|
|
||||||
fn add(a: i32, b: i32) -> i32 {
|
|
||||||
a + b
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
#### Challenge
|
|
||||||
|
|
||||||
```rust
|
|
||||||
fn encode<E: Encoder>(&self: char, encoder: E) -> Result<EncodeError> // target function
|
|
||||||
|
|
||||||
impl<W: Writer, C: Config> Encoder for EncoderImpl
|
|
||||||
|
|
||||||
pub struct EncoderImpl<W: Writer, C: Config>
|
|
||||||
impl Writer for SliceWriter
|
|
||||||
impl Writer for IoWriter
|
|
||||||
|
|
||||||
impl<T> Config for T where T: R1 + R2 + R3
|
|
||||||
pub struct Configuration<R1, R2, R3>
|
|
||||||
```
|
|
||||||
|
|
||||||
Simplified python version
|
|
||||||
|
|
||||||
```python
|
|
||||||
def encode(char_data, encoder):
|
|
||||||
result = encoder.process(char_data)
|
|
||||||
return result
|
|
||||||
|
|
||||||
class Encoder:
|
|
||||||
def __init__(self, writer, config):
|
|
||||||
self.config = config
|
|
||||||
|
|
||||||
def process(self, data):
|
|
||||||
output = self.writer.write(data, self.config)
|
|
||||||
return output
|
|
||||||
|
|
||||||
class Config:
|
|
||||||
def __init__(self):
|
|
||||||
self.settings = {}
|
|
||||||
|
|
||||||
config = Config()
|
|
||||||
encoder = Encoder(stdout, config)
|
|
||||||
|
|
||||||
# Test code
|
|
||||||
result = encode('A', encoder)
|
|
||||||
```
|
|
||||||
|
|
||||||
LLM generated code are hard to pass the compiler.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### RUG design
|
## External 2
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_010053.jpeg"
|
Content 2.1
|
||||||
width="75%">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_011029.jpeg" width="80%">
|
## External 3.1
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_011348.jpeg" width="80%">
|
Content 3.1
|
||||||
|
|
||||||
|
|
||||||
|
## External 3.2
|
||||||
|
|
||||||
#### Implementation
|
Content 3.2
|
||||||
|
|
||||||
- gpt-3.5-turbo-16k-0613
|
|
||||||
- gpt-4-1106
|
|
||||||
- presence penalty set to -1
|
|
||||||
- frequency_penalty set to 0.5
|
|
||||||
- temperature set to 1 (by default)
|
|
||||||
|
|
||||||
|
|
||||||
|
## External 3.3 (Image)
|
||||||
|
|
||||||
#### Eval: Comparison with Traditional Tools
|
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_014355.jpeg" width="75%">
|
|
||||||
|
|
||||||
|
|
||||||
#### Token Consumption
|
## External 3.4 (Math)
|
||||||
|
|
||||||
- GPT-4 cost 1000$ in baseline method (send the whole context)
|
`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`
|
||||||
- RUG saved 51.3% tokens (process unique dependency only once)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### Real-World Usability
|
|
||||||
|
|
||||||
> We directly leverage RUG's generated tests, without changing test bodies and send them as PRs to the open source projects.
|
|
||||||
> To our surprise, the developers are happy to merge these machine generated tests.
|
|
||||||
> RUG generated a total of 248 unit tests, of which we submitted 113 to the corresponding crates based on their quality and priority.
|
|
||||||
> So far, 53 of these unit tests have been merged with positive feedback.
|
|
||||||
|
|
||||||
> Developers chose not to merge 17 tests for two main reasons:
|
|
||||||
> first, the target functions are imported from external libraries(16),
|
|
||||||
> and the developers do not intend to include tests
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### 2025 Situation
|
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_015416.jpeg" width="60%">
|
|
||||||
|
|
||||||
|
|
||||||
<img src="./images/Screenshot_20251125_015705.jpeg" width="60%">
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
76
gulpfile.js
76
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',
|
'./index.html',
|
||||||
'./dist/**',
|
'./dist/**',
|
||||||
|
'./lib/**',
|
||||||
|
'./images/**',
|
||||||
'./plugin/**',
|
'./plugin/**',
|
||||||
'./*/*.md'
|
'./**.md'
|
||||||
];
|
],
|
||||||
|
{ base: './' }
|
||||||
if (fs.existsSync('./lib')) dirs.push('./lib/**');
|
)
|
||||||
if (fs.existsSync('./images')) dirs.push('./images/**');
|
|
||||||
if (fs.existsSync('./slides')) dirs.push('./slides/**');
|
|
||||||
|
|
||||||
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'))
|
||||||
|
|
||||||
|
|||||||
BIN
images/excel.png
Normal file
BIN
images/excel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
images/filebrowser.png
Normal file
BIN
images/filebrowser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
images/guquanjiegou.png
Normal file
BIN
images/guquanjiegou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
images/haiyoulogo.png
Normal file
BIN
images/haiyoulogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
images/highlight.png
Normal file
BIN
images/highlight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
images/oil.jpg
Normal file
BIN
images/oil.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
BIN
images/paper.jpg
Normal file
BIN
images/paper.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
BIN
images/report.png
Normal file
BIN
images/report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
199
index.html
199
index.html
@@ -1,23 +1,197 @@
|
|||||||
<!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"
|
||||||
|
/>
|
||||||
|
|
||||||
<title>reveal.js</title>
|
<title>reveal.js</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="dist/reset.css">
|
<link rel="stylesheet" href="dist/reset.css" />
|
||||||
<link rel="stylesheet" href="dist/reveal.css">
|
<link rel="stylesheet" href="dist/reveal.css" />
|
||||||
<link rel="stylesheet" href="dist/theme/black.css">
|
<link rel="stylesheet" href="dist/theme/serif.css" />
|
||||||
|
|
||||||
<!-- Theme used for syntax highlighted code -->
|
<!-- Theme used for syntax highlighted code -->
|
||||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
<section>Slide 1</section>
|
<section data-markdown>
|
||||||
<section>Slide 2</section>
|
|
||||||
|
|
||||||
|
### Accounting Internship Report
|
||||||
|
|
||||||
|
- Author: CHEN Yongyuan (Walter)
|
||||||
|
- Report date: 2022-11-09
|
||||||
|
|
||||||
|
Note:
|
||||||
|
My name is Walter.
|
||||||
|
|
||||||
|
First of all, I am very happy that I can share my accounting internship experience here.
|
||||||
|
|
||||||
|
During last summer holiday, I took an internship at Grant Thornton.
|
||||||
|
</section>
|
||||||
|
<section data-markdown>
|
||||||
|
### Agenda
|
||||||
|
|
||||||
|
1. About the accounting internship
|
||||||
|
2. Details of the internship project
|
||||||
|
3. Key lessons learned
|
||||||
|
4. Suggestion
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<section
|
||||||
|
data-background-image="./images/haiyoulogo.png"
|
||||||
|
data-background-size="contain"
|
||||||
|
data-background-opacity="0.139"
|
||||||
|
>
|
||||||
|
<h3>Accounting Internship Overview</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment">
|
||||||
|
🏠 Company: China National Offshore Oil Corp
|
||||||
|
(<b>CNOOC Guangdong Sales Co. Ltd</b>)
|
||||||
|
</li>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>
|
||||||
|
The company we audited was CNOOC which this is a huge group coporation.
|
||||||
|
Our team is focusing on the CNOOC Guangdong sales company.
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
<li class="fragment">👨 Supervisor: FU Kaijun</li>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>
|
||||||
|
My supervisor, also our team leader, is FU kaijun.
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
<li class="fragment">👕 Role: Audit assistant of Guangdong audit team</li>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>
|
||||||
|
My role in the audit team is audit assistant.
|
||||||
|
I assist the team to do some of the perform substantive procedures.
|
||||||
|
Also, I check for errors in the subsidiary's financial reports and parent's consolidated financial statements.
|
||||||
|
Then I summarize my work into audit working paper.
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
<li class="fragment">🌍 Location: Guangdong area (Zhanjiang, Zhuhai, Jiangmen, and Guangzhou)</li>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>
|
||||||
|
There are many subsidiaries in Guangdong, and our team is mainly responsible for (these places).
|
||||||
|
and finally, we returned to the parent company in Guangzhou to do the work related to consolidation.
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
</ul>
|
||||||
|
<p class="fragment" style="text-align: left;">
|
||||||
|
My job is to perform
|
||||||
|
<span class="fragment highlight-red">substantive procedures</span>,
|
||||||
|
<span class="fragment highlight-green">prepare audit working paper</span>,
|
||||||
|
and <span class="fragment highlight-blue">write programs</span> to reduce repetitive work.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section data-background-image="./images/guquanjiegou.png" data-background-size="contain">
|
||||||
|
<aside class="notes">
|
||||||
|
This is the equity strcture.
|
||||||
|
Our team is focusing on the CNOOC Guangdong sales company which has more than 27 subsidiaries.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section data-background-image="./images/oil.jpg" data-background-size="contain">
|
||||||
|
<aside class="notes">
|
||||||
|
We go to each subsidiary's gas station to check fixed assets and oil inventory.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section data-background-image="./images/paper.jpg" data-background-size="contain">
|
||||||
|
<aside class="notes">
|
||||||
|
In this photo, we use sampling method to get a checklist, and then we go to the office to look for the corresponding accounting documents according to the checklist.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section data-background-image="./images/report.png" data-background-size="contain">
|
||||||
|
<aside class="notes">
|
||||||
|
And another of my job, which is probably why I got hired, is to write a computer program to automatically transfer some data from excel to word report.
|
||||||
|
Because during the interview they asked my lots of question about the PDF and excel processing.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
<section data-background-image="./images/highlight.png" data-background-size="contain"></section>
|
||||||
|
<section data-background-image="./images/excel.png" data-background-size="contain"></section>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<section data-markdown>
|
||||||
|
### Key Lessons Learned
|
||||||
|
|
||||||
|
> If there is anything unsure, be sure to ask.
|
||||||
|
|
||||||
|
Notes:
|
||||||
|
Although I had not taken any auditing course when I start the internship, I still manage to learn some basic concept before I went to workplace.
|
||||||
|
During the internship, I learned a lot, not just accounting and auditing standard such as consolidated financial statement.
|
||||||
|
Also include work etiquette, communication methods, etc.
|
||||||
|
|
||||||
|
The first lessons I learned, also the first thing my supervisor told my in the work, is if there anything unsure, be sure to ask.
|
||||||
|
Let me explain.
|
||||||
|
|
||||||
|
Our audit schedule is very tight.
|
||||||
|
We spent most of our time in reviewing and correcting errors in financial statements.
|
||||||
|
After we audit the subsidiaries individual financial statement, then we will put them together and review the consolidated financial statement.
|
||||||
|
At the same time, we will also prepare audit papers.
|
||||||
|
So that means if there are errors in subsidiary's statement, but found it during the consolidated process, that means we need to go back to readjust the consolidated statement and audit worksheet.
|
||||||
|
This will not only slow down the entire audit project, but also add extra workload to other team members.
|
||||||
|
</section>
|
||||||
|
<section data-markdown>
|
||||||
|
### Key Lessons Learned
|
||||||
|
|
||||||
|
> Don't work hard, work smart!
|
||||||
|
|
||||||
|
Notes:
|
||||||
|
The difference between work hard and work smart is how much time you spend in completing tasks. Hard work tends to be when someone spends a great amout of time completing many things, while smart work is when they spend more time to find the right way to complete right things.
|
||||||
|
|
||||||
|
A very typically example during my internship is. Once we use scanner to scan hundreds of documents and needed to rename those file in certain order. On of my co-worker said "Okey, just give me one hour I will rename them one by one". However the correct way to do that is simply select all files, and press F2 then you can rename all files at once.
|
||||||
|
|
||||||
|
At that time I didn't know that F2 is the shortcut to rename files, but I am sure there must be some way to do this task quickly, so I spent two minutes seaerching on Baidu, and spend one minute to complete the task.
|
||||||
|
|
||||||
|
In general, if you find yourself doing a very repetitive task, there may be a smater way to accomplish the task. Never stop learning new knowledge.
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<section data-markdown>
|
||||||
|
## Suggestion
|
||||||
|
</section>
|
||||||
|
<section data-markdown>
|
||||||
|
## For the Company
|
||||||
|
|
||||||
|
> Information Island: Data in system that has no external connectivity.
|
||||||
|
|
||||||
|
- Can't sync/compare data between systems
|
||||||
|
- Require manually input data
|
||||||
|
- Involve more errors
|
||||||
|
- Increase complexity
|
||||||
|
|
||||||
|
Invest on developing a all-in-one solution system or pipeline between system, and traning employee to use the system.
|
||||||
|
|
||||||
|
Notes:
|
||||||
|
|
||||||
|
SAP, 久其报表，海油卡
|
||||||
|
</section>
|
||||||
|
<section data-markdown>
|
||||||
|
## For the Accounting Program
|
||||||
|
|
||||||
|
- Set a file naming standard
|
||||||
|
- Instead of something like `Water final ver.2 (1).docx`
|
||||||
|
- Set a version control system for the files
|
||||||
|
- Automate repetitive tasks
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>For Future Accounting Interns</h2>
|
||||||
|
<ul>
|
||||||
|
<li class="fragment">Get an accounting certification</li>
|
||||||
|
<li class="fragment">Be familiar with Chinese tax & laws</li>
|
||||||
|
<li class="fragment">Learn a programming language (Recommend: <code>Python</code>)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>Thank you</h1>
|
||||||
|
<p>for listining</p>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -25,15 +199,18 @@
|
|||||||
<script src="plugin/notes/notes.js"></script>
|
<script src="plugin/notes/notes.js"></script>
|
||||||
<script src="plugin/markdown/markdown.js"></script>
|
<script src="plugin/markdown/markdown.js"></script>
|
||||||
<script src="plugin/highlight/highlight.js"></script>
|
<script src="plugin/highlight/highlight.js"></script>
|
||||||
|
<script src="plugin/zoom/zoom.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// More info about initialization & config:
|
// More info about initialization & config:
|
||||||
// - https://revealjs.com/initialization/
|
// - https://revealjs.com/initialization/
|
||||||
// - https://revealjs.com/config/
|
// - https://revealjs.com/config/
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
hash: true,
|
hash: true,
|
||||||
|
width: 1920,
|
||||||
|
height: 1080,
|
||||||
|
|
||||||
// Learn about plugins: https://revealjs.com/plugins/
|
// Learn about plugins: https://revealjs.com/plugins/
|
||||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom],
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
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,13 +287,8 @@ 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.next({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.prev({skipFragments: event.altKey});
|
this.Reveal.prev({skipFragments: event.altKey});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
else {
|
else {
|
||||||
this.Reveal.left({skipFragments: event.altKey});
|
this.Reveal.left({skipFragments: event.altKey});
|
||||||
}
|
}
|
||||||
@@ -292,13 +299,8 @@ 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.prev({skipFragments: event.altKey});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.Reveal.next({skipFragments: event.altKey});
|
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;
|
||||||
}
|
}
|
||||||
@@ -399,12 +383,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
|
||||||
this.Reveal.cueAutoSlide();
|
this.Reveal.cueAutoSlide();
|
||||||
|
|||||||
@@ -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 );
|
||||||
|
|
||||||
|
|||||||
@@ -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,16 +223,14 @@ 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,10 +329,6 @@ export default class SlideContent {
|
|||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// Don't play iframe content in the speaker view since we can't
|
|
||||||
// guarantee that it's muted
|
|
||||||
if( !isSpeakerNotesWindow ) {
|
|
||||||
|
|
||||||
// Normal iframes
|
// Normal iframes
|
||||||
queryAll( element, 'iframe[src]' ).forEach( el => {
|
queryAll( element, 'iframe[src]' ).forEach( el => {
|
||||||
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
if( closest( el, '.fragment' ) && !closest( el, '.fragment.visible' ) ) {
|
||||||
@@ -393,42 +355,6 @@ export default class SlideContent {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
if( event.target.paused || event.target.ended ) {
|
|
||||||
event.target.currentTime = 0;
|
event.target.currentTime = 0;
|
||||||
const promise = event.target.play();
|
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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
639
js/reveal.js
639
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';
|
|
||||||
@@ -295,19 +295,3 @@ 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()}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
17540
package-lock.json
generated
17540
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
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user