Praesentationen auf Landesdesign und kleine Aenderungen in Arbeitsblaettern
This commit is contained in:
Dirk Zechnall
parent
6e6c7d45c6
commit
5249a82135
1338 changed files with 150740 additions and 19486 deletions
11
Praesentation/praes_git_konsole/lib/reveal.js/.gitignore
vendored
Normal file
11
Praesentation/praes_git_konsole/lib/reveal.js/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.idea/
|
||||
*.iml
|
||||
*.iws
|
||||
*.eml
|
||||
out/
|
||||
.DS_Store
|
||||
.svn
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
||||
5
Praesentation/praes_git_konsole/lib/reveal.js/.npmignore
Normal file
5
Praesentation/praes_git_konsole/lib/reveal.js/.npmignore
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/test
|
||||
/examples
|
||||
.github
|
||||
.sass-cache
|
||||
gulpfile.js
|
||||
19
Praesentation/praes_git_konsole/lib/reveal.js/LICENSE
Normal file
19
Praesentation/praes_git_konsole/lib/reveal.js/LICENSE
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
50
Praesentation/praes_git_konsole/lib/reveal.js/README.md
Normal file
50
Praesentation/praes_git_konsole/lib/reveal.js/README.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<p align="center">
|
||||
<a href="https://revealjs.com">
|
||||
<img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
|
||||
</a>
|
||||
<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://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>
|
||||
|
||||
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/).
|
||||
|
||||
The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).
|
||||
|
||||
---
|
||||
|
||||
Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
- 🚀 [Install reveal.js](https://revealjs.com/installation)
|
||||
- 👀 [View the demo presentation](https://revealjs.com/demo)
|
||||
- 📖 [Read the documentation](https://revealjs.com/markup/)
|
||||
- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
|
||||
- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
|
||||
|
||||
---
|
||||
<div align="center">
|
||||
MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se
|
||||
</div>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
* Layout helpers.
|
||||
*/
|
||||
|
||||
// Stretch an element vertically based on available space
|
||||
.reveal .stretch,
|
||||
.reveal .r-stretch {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.reveal pre.stretch code,
|
||||
.reveal pre.r-stretch code {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Text that auto-fits its container
|
||||
.reveal .r-fit-text {
|
||||
display: inline-block; // https://github.com/rikschennink/fitty#performance
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Stack multiple elements on top of each other
|
||||
.reveal .r-stack {
|
||||
display: grid;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
.reveal .r-stack > * {
|
||||
grid-area: 1/1;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// Horizontal and vertical stacks
|
||||
.reveal .r-vstack,
|
||||
.reveal .r-hstack {
|
||||
display: flex;
|
||||
|
||||
img, video {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .r-vstack {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reveal .r-hstack {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Naming based on tailwindcss
|
||||
.reveal .items-stretch { align-items: stretch; }
|
||||
.reveal .items-start { align-items: flex-start; }
|
||||
.reveal .items-center { align-items: center; }
|
||||
.reveal .items-end { align-items: flex-end; }
|
||||
|
||||
.reveal .justify-between { justify-content: space-between; }
|
||||
.reveal .justify-around { justify-content: space-around; }
|
||||
.reveal .justify-start { justify-content: flex-start; }
|
||||
.reveal .justify-center { justify-content: center; }
|
||||
.reveal .justify-end { justify-content: flex-end; }
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
|
||||
@media print {
|
||||
html:not(.print-pdf) {
|
||||
overflow: visible;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.print-pdf) .reveal {
|
||||
background: #fff;
|
||||
font-size: 20pt;
|
||||
|
||||
.controls,
|
||||
.state-background,
|
||||
.progress,
|
||||
.backgrounds,
|
||||
.slide-number {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
p, td, li {
|
||||
font-size: 20pt!important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: #000!important;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
text-align: left;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
h1 { font-size: 28pt !important; }
|
||||
h2 { font-size: 24pt !important; }
|
||||
h3 { font-size: 22pt !important; }
|
||||
h4 { font-size: 22pt !important; font-variant: small-caps; }
|
||||
h5 { font-size: 21pt !important; }
|
||||
h6 { font-size: 20pt !important; font-style: italic; }
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #000 !important;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul, ol, div, p {
|
||||
visibility: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
text-align: left !important;
|
||||
}
|
||||
pre,
|
||||
table {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
pre code {
|
||||
padding: 20px;
|
||||
}
|
||||
blockquote {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.slides {
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
padding: 0 !important;
|
||||
zoom: 1 !important;
|
||||
transform: none !important;
|
||||
|
||||
overflow: visible !important;
|
||||
display: block !important;
|
||||
|
||||
text-align: left !important;
|
||||
perspective: none;
|
||||
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
.slides section {
|
||||
visibility: visible !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
padding: 60px 20px !important;
|
||||
z-index: auto !important;
|
||||
|
||||
opacity: 1 !important;
|
||||
|
||||
page-break-after: always !important;
|
||||
|
||||
transform-style: flat !important;
|
||||
transform: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
.slides section.stack {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.slides section:last-of-type {
|
||||
page-break-after: avoid !important;
|
||||
}
|
||||
.slides section .fragment {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.r-fit-text {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
section img {
|
||||
display: block;
|
||||
margin: 15px 0px;
|
||||
background: rgba(255,255,255,1);
|
||||
border: 1px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
section small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
max-height: 100%;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.hljs .hljs-ln-numbers {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hljs td {
|
||||
font-size: inherit !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
159
Praesentation/praes_git_konsole/lib/reveal.js/css/print/pdf.scss
Normal file
159
Praesentation/praes_git_konsole/lib/reveal.js/css/print/pdf.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/**
|
||||
* This stylesheet is used to print reveal.js
|
||||
* presentations to PDF.
|
||||
*
|
||||
* https://revealjs.com/pdf-export/
|
||||
*/
|
||||
|
||||
html.reveal-print {
|
||||
* {
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
& {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto !important;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
float: none !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Remove any elements not needed in print. */
|
||||
.nestedarrow,
|
||||
.reveal .controls,
|
||||
.reveal .progress,
|
||||
.reveal .playback,
|
||||
.reveal.overview,
|
||||
.state-background {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.reveal .slides {
|
||||
position: static;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
zoom: 1 !important;
|
||||
pointer-events: initial;
|
||||
|
||||
left: auto;
|
||||
top: auto;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
overflow: visible;
|
||||
display: block;
|
||||
|
||||
perspective: none;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.reveal .slides .pdf-page {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.reveal .slides .pdf-page:last-of-type {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.reveal .slides section {
|
||||
visibility: visible !important;
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
min-height: 1px;
|
||||
|
||||
opacity: 1 !important;
|
||||
|
||||
transform-style: flat !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.reveal section.stack {
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
page-break-after: avoid !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
.reveal img {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Slide backgrounds are placed inside of their slide when exporting to PDF */
|
||||
.reveal .backgrounds {
|
||||
display: none;
|
||||
}
|
||||
.reveal .slide-background {
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
/* Display slide speaker notes when 'showNotes' is enabled */
|
||||
.reveal.show-notes {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
.reveal .speaker-notes-pdf {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* Layout option which makes notes appear on a separate page */
|
||||
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
page-break-after: always;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Display slide numbers when 'slideNumber' is enabled */
|
||||
.reveal .slide-number-pdf {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* This accessibility tool is not useful in PDF and breaks it visually */
|
||||
.aria-status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
2114
Praesentation/praes_git_konsole/lib/reveal.js/css/reveal.scss
Normal file
2114
Praesentation/praes_git_konsole/lib/reveal.js/css/reveal.scss
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,21 @@
|
|||
## Dependencies
|
||||
|
||||
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment installed before proceeding: https://revealjs.com/installation/#full-setup
|
||||
|
||||
## Creating a Theme
|
||||
|
||||
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.
|
||||
|
||||
Each theme file does four things in the following order:
|
||||
|
||||
1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
|
||||
Shared utility functions.
|
||||
|
||||
2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
|
||||
Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
|
||||
|
||||
3. **Override**
|
||||
This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
|
||||
|
||||
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
|
||||
The template theme file which will generate final CSS output based on the currently defined variables.
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/**
|
||||
* Beige theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: #333;
|
||||
$headingColor: #333;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7f3de;
|
||||
$linkColor: #8b743d;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$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);
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* 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 -----------------
|
||||
@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: lighten( $linkColor, 15% );
|
||||
$selectionBackgroundColor: lighten( $linkColor, 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";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@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: #191919;
|
||||
|
||||
$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: lighten( $linkColor, 15% );
|
||||
$selectionBackgroundColor: rgba( $linkColor, 0.75 );
|
||||
|
||||
$heading1Size: 2.5em;
|
||||
$heading2Size: 1.6em;
|
||||
$heading3Size: 1.3em;
|
||||
$heading4Size: 1.0em;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/**
|
||||
* Blood theme for reveal.js
|
||||
* Author: Walther http://github.com/Walther
|
||||
*
|
||||
* Designed to be used with highlight.js theme
|
||||
* "monokai_sublime.css" available from
|
||||
* https://github.com/isagalaev/highlight.js/
|
||||
*
|
||||
* For other themes, change $codeBackground accordingly.
|
||||
*
|
||||
*/
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
// Include theme-specific fonts
|
||||
|
||||
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
|
||||
|
||||
// Colors used in the theme
|
||||
$blood: #a23;
|
||||
$coal: #222;
|
||||
$codeBackground: #23241f;
|
||||
|
||||
$backgroundColor: $coal;
|
||||
|
||||
// Main text
|
||||
$mainFont: Ubuntu, 'sans-serif';
|
||||
$mainColor: #eee;
|
||||
|
||||
// Headings
|
||||
$headingFont: Ubuntu, 'sans-serif';
|
||||
$headingTextShadow: 2px 2px 2px $coal;
|
||||
|
||||
// h1 shadow, borrowed humbly from
|
||||
// (c) Default theme by Hakim El Hattab
|
||||
$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);
|
||||
|
||||
// Links
|
||||
$linkColor: $blood;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
|
||||
// Text selection
|
||||
$selectionBackgroundColor: $blood;
|
||||
$selectionColor: #fff;
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
||||
// some overrides after theme template import
|
||||
|
||||
.reveal p {
|
||||
font-weight: 300;
|
||||
text-shadow: 1px 1px $coal;
|
||||
}
|
||||
|
||||
section.has-light-background {
|
||||
p, h1, h2, h3, h4 {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal h1,
|
||||
.reveal h2,
|
||||
.reveal h3,
|
||||
.reveal h4,
|
||||
.reveal h5,
|
||||
.reveal h6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reveal p code {
|
||||
background-color: $codeBackground;
|
||||
display: inline-block;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.reveal small code {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
/**
|
||||
* 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
|
||||
$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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* League theme for reveal.js.
|
||||
*
|
||||
* This was the default theme pre-3.0.0.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||
$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);
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
||||
}
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* Solarized Dark theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
/**
|
||||
* Solarized colors by Ethan Schoonover
|
||||
*/
|
||||
|
||||
// Solarized colors
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: $base1;
|
||||
$headingColor: $base2;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: $base03;
|
||||
$linkColor: $blue;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: $magenta;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/**
|
||||
* Black theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #111;
|
||||
|
||||
$mainFont: 'Open Sans', sans-serif;
|
||||
$linkColor: #e7ad52;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$headingFont: 'Montserrat', Impact, sans-serif;
|
||||
$headingTextShadow: none;
|
||||
$headingLetterSpacing: -0.03em;
|
||||
$headingTextTransform: none;
|
||||
$selectionBackgroundColor: #e7ad52;
|
||||
|
||||
// Change text colors against light slide backgrounds
|
||||
@include light-bg-text-color(#222);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is brown.
|
||||
*
|
||||
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
$headingColor: #383D3D;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #F0F1EB;
|
||||
$linkColor: #51483D;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: #26351C;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* A simple theme for reveal.js presentations, similar
|
||||
* to the default theme. The accent color is darkblue.
|
||||
*
|
||||
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Lato', sans-serif;
|
||||
$mainColor: #000;
|
||||
$headingFont: 'News Cycle', Impact, sans-serif;
|
||||
$headingColor: #000;
|
||||
$headingTextShadow: none;
|
||||
$headingTextTransform: none;
|
||||
$backgroundColor: #fff;
|
||||
$linkColor: #00008B;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||
|
||||
$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";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* Sky theme for reveal.js.
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@import "../template/mixins";
|
||||
@import "../template/settings";
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
|
||||
// Include theme-specific fonts
|
||||
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainFont: 'Open Sans', sans-serif;
|
||||
$mainColor: #333;
|
||||
$headingFont: 'Quicksand', sans-serif;
|
||||
$headingColor: #333;
|
||||
$headingLetterSpacing: -0.08em;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: #f7fbfc;
|
||||
$linkColor: #3b759e;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: #134674;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Fix links so they are not cut off
|
||||
.reveal a {
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
// Background generator
|
||||
@mixin bodyBackground() {
|
||||
@include radial-gradient( #add9e4, #f7fbfc );
|
||||
}
|
||||
|
||||
// Change text colors against dark slide backgrounds
|
||||
@include dark-bg-text-color(#fff);
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* Solarized Light theme for reveal.js.
|
||||
* Author: Achim Staebler
|
||||
*/
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
/**
|
||||
* Solarized colors by Ethan Schoonover
|
||||
*/
|
||||
html * {
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
|
||||
// Solarized colors
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$mainColor: $base00;
|
||||
$headingColor: $base01;
|
||||
$headingTextShadow: none;
|
||||
$backgroundColor: $base3;
|
||||
$linkColor: $blue;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
$selectionBackgroundColor: $magenta;
|
||||
|
||||
$overlayElementBgColor: 0, 0, 0;
|
||||
$overlayElementFgColor: 240, 240, 240;
|
||||
|
||||
// Background generator
|
||||
// @mixin bodyBackground() {
|
||||
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Theme template ------------------------------
|
||||
@import "../template/theme";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* 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 -----------------
|
||||
@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: lighten( $linkColor, 15% );
|
||||
$selectionBackgroundColor: lighten( $linkColor, 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";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||
*
|
||||
* By Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
// Default mixins and settings -----------------
|
||||
@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: #222;
|
||||
$headingColor: #222;
|
||||
|
||||
$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: lighten( $linkColor, 15% );
|
||||
$selectionBackgroundColor: lighten( $linkColor, 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";
|
||||
// ---------------------------------------------
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Exposes theme's variables for easy re-use in CSS for plugin authors
|
||||
|
||||
:root {
|
||||
--r-background-color: #{$backgroundColor};
|
||||
--r-main-font: #{$mainFont};
|
||||
--r-main-font-size: #{$mainFontSize};
|
||||
--r-main-color: #{$mainColor};
|
||||
--r-block-margin: #{$blockMargin};
|
||||
--r-heading-margin: #{$headingMargin};
|
||||
--r-heading-font: #{$headingFont};
|
||||
--r-heading-color: #{$headingColor};
|
||||
--r-heading-line-height: #{$headingLineHeight};
|
||||
--r-heading-letter-spacing: #{$headingLetterSpacing};
|
||||
--r-heading-text-transform: #{$headingTextTransform};
|
||||
--r-heading-text-shadow: #{$headingTextShadow};
|
||||
--r-heading-font-weight: #{$headingFontWeight};
|
||||
--r-heading1-text-shadow: #{$heading1TextShadow};
|
||||
--r-heading1-size: #{$heading1Size};
|
||||
--r-heading2-size: #{$heading2Size};
|
||||
--r-heading3-size: #{$heading3Size};
|
||||
--r-heading4-size: #{$heading4Size};
|
||||
--r-code-font: #{$codeFont};
|
||||
--r-link-color: #{$linkColor};
|
||||
--r-link-color-dark: #{darken($linkColor , 15% )};
|
||||
--r-link-color-hover: #{$linkColorHover};
|
||||
--r-selection-background-color: #{$selectionBackgroundColor};
|
||||
--r-selection-color: #{$selectionColor};
|
||||
--r-overlay-element-bg-color: #{$overlayElementBgColor};
|
||||
--r-overlay-element-fg-color: #{$overlayElementFgColor};
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
@mixin vertical-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( top, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin horizontal-gradient( $top, $bottom ) {
|
||||
background: $top;
|
||||
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
|
||||
background: linear-gradient( left, $top 0%, $bottom 100% );
|
||||
}
|
||||
|
||||
@mixin radial-gradient( $outer, $inner, $type: circle ) {
|
||||
background: $outer;
|
||||
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
|
||||
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||
}
|
||||
|
||||
@mixin light-bg-text-color( $color ) {
|
||||
section.has-light-background {
|
||||
&, h1, h2, h3, h4, h5, h6 {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-bg-text-color( $color ) {
|
||||
section.has-dark-background {
|
||||
&, h1, h2, h3, h4, h5, h6 {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
// Base settings for all themes that can optionally be
|
||||
// overridden by the super-theme
|
||||
|
||||
// Background of the presentation
|
||||
$backgroundColor: #2b2b2b;
|
||||
|
||||
// Primary/body text
|
||||
$mainFont: 'Lato', sans-serif;
|
||||
$mainFontSize: 40px;
|
||||
$mainColor: #eee;
|
||||
|
||||
// Vertical spacing between blocks of text
|
||||
$blockMargin: 20px;
|
||||
|
||||
// Headings
|
||||
$headingMargin: 0 0 $blockMargin 0;
|
||||
$headingFont: 'League Gothic', Impact, sans-serif;
|
||||
$headingColor: #eee;
|
||||
$headingLineHeight: 1.2;
|
||||
$headingLetterSpacing: normal;
|
||||
$headingTextTransform: uppercase;
|
||||
$headingTextShadow: none;
|
||||
$headingFontWeight: normal;
|
||||
$heading1TextShadow: $headingTextShadow;
|
||||
|
||||
$heading1Size: 3.77em;
|
||||
$heading2Size: 2.11em;
|
||||
$heading3Size: 1.55em;
|
||||
$heading4Size: 1.00em;
|
||||
|
||||
$codeFont: monospace;
|
||||
|
||||
// Links and actions
|
||||
$linkColor: #13DAEC;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
|
||||
// Text selection
|
||||
$selectionBackgroundColor: #FF5E99;
|
||||
$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
|
||||
// to return a background image or gradient
|
||||
@mixin bodyBackground() {
|
||||
background: $backgroundColor;
|
||||
}
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
// Base theme template for reveal.js
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
@import "./exposer";
|
||||
|
||||
.reveal-viewport {
|
||||
@include bodyBackground();
|
||||
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 .15s ease;
|
||||
}
|
||||
.reveal a:hover {
|
||||
color: var(--r-link-color-hover);
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal .roll span:after {
|
||||
color: #fff;
|
||||
// background: darken( var(--r-link-color), 15% );
|
||||
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 .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);
|
||||
}
|
||||
}
|
||||
481
Praesentation/praes_git_konsole/lib/reveal.js/demo.html
Normal file
481
Praesentation/praes_git_konsole/lib/reveal.js/demo.html
Normal file
|
|
@ -0,0 +1,481 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js – The HTML Presentation Framework</title>
|
||||
|
||||
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
|
||||
<meta name="author" content="Hakim El Hattab">
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="dist/reset.css">
|
||||
<link rel="stylesheet" href="dist/reveal.css">
|
||||
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
|
||||
|
||||
<!-- Theme used for syntax highlighting of code -->
|
||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="reveal">
|
||||
|
||||
<!-- Any section element inside of this container is displayed as a slide -->
|
||||
<div class="slides">
|
||||
<section>
|
||||
<a href="https://revealjs.com">
|
||||
<img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
|
||||
</a>
|
||||
<h3>The HTML Presentation Framework</h3>
|
||||
<p>
|
||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Hello There</h2>
|
||||
<p>
|
||||
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Example of nested vertical slides -->
|
||||
<section>
|
||||
<section>
|
||||
<h2>Vertical Slides</h2>
|
||||
<p>Slides can be nested inside of each other.</p>
|
||||
<p>Use the <em>Space</em> key to navigate through all slides.</p>
|
||||
<br>
|
||||
<a href="#/2/1" class="navigate-down">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 1</h2>
|
||||
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Basement Level 2</h2>
|
||||
<p>That's it, time to go back up.</p>
|
||||
<br>
|
||||
<a href="#/2">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
|
||||
</a>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Slides</h2>
|
||||
<p>
|
||||
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-visibility="hidden">
|
||||
<h2>Hidden Slides</h2>
|
||||
<p>
|
||||
This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
<h2 data-id="code-title">Pretty Code</h2>
|
||||
<pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function Example() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return (
|
||||
...
|
||||
);
|
||||
}
|
||||
</code></pre>
|
||||
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate>
|
||||
<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">
|
||||
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>
|
||||
<h2>Point of View</h2>
|
||||
<p>
|
||||
Press <strong>ESC</strong> to enter the slide overview.
|
||||
</p>
|
||||
<p>
|
||||
Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
|
||||
</p>
|
||||
<p>
|
||||
(NOTE: Use ctrl + click in Linux.)
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
|
||||
<h2>Auto-Animate</h2>
|
||||
<p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</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;"></div>
|
||||
<div data-id="box2" style="background: magenta; width: 200px; height: 200px;"></div>
|
||||
<div data-id="box3" style="background: yellow; width: 100px; height: 100px;"></div>
|
||||
</div>
|
||||
<h2 style="margin-top: 20px;">Auto-Animate</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Touch Optimized</h2>
|
||||
<p>
|
||||
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-markdown>
|
||||
<script type="text/template">
|
||||
## Markdown Support
|
||||
|
||||
Write content using inline or external Markdown.
|
||||
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
||||
|
||||
```html []
|
||||
<section data-markdown>
|
||||
## Markdown Support
|
||||
|
||||
Write content using inline or external Markdown.
|
||||
Instructions and more info available in the [docs](https://revealjs.com/markdown/).
|
||||
</section>
|
||||
```
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Add the <code>r-fit-text</code> class to auto-size text</p>
|
||||
<h2 class="r-fit-text">FIT TEXT</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section id="fragments">
|
||||
<h2>Fragments</h2>
|
||||
<p>Hit the next arrow...</p>
|
||||
<p class="fragment">... to step through ...</p>
|
||||
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
|
||||
|
||||
<aside class="notes">
|
||||
This slide has fragments which are also stepped through in the notes window.
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Fragment Styles</h2>
|
||||
<p>There's different types of fragments, like:</p>
|
||||
<p class="fragment grow">grow</p>
|
||||
<p class="fragment shrink">shrink</p>
|
||||
<p class="fragment fade-out">fade-out</p>
|
||||
<p>
|
||||
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-up">up, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-down">down, </span>
|
||||
<span style="display: inline-block;" class="fragment fade-left">left</span>
|
||||
</p>
|
||||
<p class="fragment fade-in-then-out">fade-in-then-out</p>
|
||||
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
|
||||
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="transitions">
|
||||
<h2>Transition Styles</h2>
|
||||
<p>
|
||||
You can select from different transitions, like: <br>
|
||||
<a href="?transition=none#/transitions">None</a> -
|
||||
<a href="?transition=fade#/transitions">Fade</a> -
|
||||
<a href="?transition=slide#/transitions">Slide</a> -
|
||||
<a href="?transition=convex#/transitions">Convex</a> -
|
||||
<a href="?transition=concave#/transitions">Concave</a> -
|
||||
<a href="?transition=zoom#/transitions">Zoom</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="themes">
|
||||
<h2>Themes</h2>
|
||||
<p>
|
||||
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. -->
|
||||
<a href="#/themes" 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="#/themes" 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="#/themes" 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="#/themes" 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="#/themes" 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="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section data-background="#dddddd">
|
||||
<h2>Slide Backgrounds</h2>
|
||||
<p>
|
||||
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
|
||||
</p>
|
||||
<a href="#" class="navigate-down">
|
||||
<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
|
||||
</a>
|
||||
</section>
|
||||
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
|
||||
<h2>Gradient Backgrounds</h2>
|
||||
<pre><code class="hljs html wrap"><section data-background-gradient=
|
||||
"linear-gradient(to bottom, #ddd, #191919)"></code></pre>
|
||||
</section>
|
||||
<section data-background="https://static.slid.es/reveal/image-placeholder.png">
|
||||
<h2>Image Backgrounds</h2>
|
||||
<pre><code class="hljs html"><section data-background="image.png"></code></pre>
|
||||
</section>
|
||||
<section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
||||
<h2>Tiled Backgrounds</h2>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||
</section>
|
||||
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
|
||||
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
|
||||
<h2>Video Backgrounds</h2>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
|
||||
<h2>... and GIFs!</h2>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
|
||||
<h2>Background Transitions</h2>
|
||||
<p>
|
||||
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
||||
</p>
|
||||
<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||
</section>
|
||||
|
||||
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
||||
<h2>Background Transitions</h2>
|
||||
<p>
|
||||
You can override background transitions per-slide.
|
||||
</p>
|
||||
<pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||
</section>
|
||||
|
||||
<section data-background-iframe="https://hakim.se" data-background-interactive>
|
||||
<div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
|
||||
<h2>Iframe Backgrounds</h2>
|
||||
<p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Marvelous List</h2>
|
||||
<ul>
|
||||
<li>No order here</li>
|
||||
<li>Or here</li>
|
||||
<li>Or here</li>
|
||||
<li>Or here</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Fantastic Ordered List</h2>
|
||||
<ol>
|
||||
<li>One is smaller than...</li>
|
||||
<li>Two is smaller than...</li>
|
||||
<li>Three!</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tabular Tables</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Value</th>
|
||||
<th>Quantity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Apples</td>
|
||||
<td>$1</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lemonade</td>
|
||||
<td>$2</td>
|
||||
<td>18</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bread</td>
|
||||
<td>$3</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Clever Quotes</h2>
|
||||
<p>
|
||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
|
||||
</p>
|
||||
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
||||
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Intergalactic Interconnections</h2>
|
||||
<p>
|
||||
You can link between slides internally,
|
||||
<a href="#/2/3">like this</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Speaker View</h2>
|
||||
<p>There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
|
||||
<p>Press the <em>S</em> key to try it out.</p>
|
||||
|
||||
<aside class="notes">
|
||||
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Export to PDF</h2>
|
||||
<p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p>
|
||||
<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Global State</h2>
|
||||
<p>
|
||||
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
|
||||
will be added as a class to the document element when the slide is open. This lets you
|
||||
apply broader style changes, like switching the page background.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section data-state="customevent">
|
||||
<h2>State Events</h2>
|
||||
<p>
|
||||
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
|
||||
</p>
|
||||
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
|
||||
Reveal.on( 'customevent', function() {
|
||||
console.log( '"customevent" has fired' );
|
||||
} );
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Take a Moment</h2>
|
||||
<p>
|
||||
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Much more</h2>
|
||||
<ul>
|
||||
<li>Right-to-left support</li>
|
||||
<li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
|
||||
<li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
|
||||
<li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li>
|
||||
<li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section style="text-align: left;">
|
||||
<h1>THE END</h1>
|
||||
<p>
|
||||
- <a href="https://slides.com">Try the online editor</a> <br>
|
||||
- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="dist/reveal.js"></script>
|
||||
<script src="plugin/zoom/zoom.js"></script>
|
||||
<script src="plugin/notes/notes.js"></script>
|
||||
<script src="plugin/search/search.js"></script>
|
||||
<script src="plugin/markdown/markdown.js"></script>
|
||||
<script src="plugin/highlight/highlight.js"></script>
|
||||
<script>
|
||||
|
||||
// Also available as an ES module, see:
|
||||
// https://revealjs.com/initialization/
|
||||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
center: true,
|
||||
hash: true,
|
||||
|
||||
// Learn about plugins: https://revealjs.com/plugins/
|
||||
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
Praesentation/praes_git_konsole/lib/reveal.js/dist/reset.css
vendored
Normal file
30
Praesentation/praes_git_konsole/lib/reveal.js/dist/reset.css
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
main, menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, main, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
8
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.css
vendored
Normal file
8
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.esm.js
vendored
Normal file
9
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.esm.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.esm.js.map
vendored
Normal file
1
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.esm.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
9
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.js
vendored
Normal file
9
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.js.map
vendored
Normal file
1
Praesentation/praes_git_konsole/lib/reveal.js/dist/reveal.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Bold.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Bold.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Bold.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Bold.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-BoldItalic.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-BoldItalic.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-BoldItalic.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-BoldItalic.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Regular.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Regular.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Regular.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-Regular.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-RegularItalic.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-RegularItalic.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-RegularItalic.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-RegularItalic.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBold.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBold.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBold.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBold.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBoldItalic.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBoldItalic.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBoldItalic.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans-SemiBoldItalic.ttf
vendored
Normal file
Binary file not shown.
53
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans.css
vendored
Normal file
53
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans.css
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-Regular.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-Regular.woff') format('woff'),
|
||||
url('./BaWueSans-Regular.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-RegularItalic.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-RegularItalic.woff') format('woff'),
|
||||
url('./BaWueSans-RegularItalic.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-Bold.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-Bold.woff') format('woff'),
|
||||
url('./BaWueSans-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-BoldItalic.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-BoldItalic.woff') format('woff'),
|
||||
url('./BaWueSans-BoldItalic.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-SemiBold.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-SemiBold.woff') format('woff'),
|
||||
url('./BaWueSans-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BaWueSansWeb';
|
||||
src: url('./BaWueSansWeb-SemiBoldItalic.woff2') format('woff2'),
|
||||
url('./BaWueSansWeb-SemiBoldItalic.woff') format('woff'),
|
||||
url('./BaWueSans-SemiBoldItalic.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Bold.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Bold.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Bold.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Bold.woff2
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-BoldItalic.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-BoldItalic.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-BoldItalic.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-BoldItalic.woff2
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Regular.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Regular.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Regular.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-Regular.woff2
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-RegularItalic.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-RegularItalic.woff
vendored
Normal file
Binary file not shown.
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-SemiBold.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-SemiBold.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-SemiBold.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSansWeb-SemiBold.woff2
vendored
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-BoldItalic.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-BoldItalic.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans Bold Italic
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
55
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans_Bold_ReadMe.html
vendored
Normal file
55
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSans_Bold_ReadMe.html
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-Bold.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans Bold
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-RegularItalic.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-RegularItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans Regular Italic
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-Regular.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-Regular.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans Regular
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-SemiBoldItalic.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-SemiBoldItalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans SemiBold Italic
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSansWeb';
|
||||
src: url('BaWueSansWeb-SemiBold.woff2') format('woff2'),
|
||||
url('BaWueSansWeb-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSansWeb';
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Sans SemiBold
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Bold.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Bold.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Bold.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Bold.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Regular.otf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Regular.otf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Regular.ttf
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif-Regular.ttf
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Bold.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Bold.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Bold.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Bold.woff2
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Regular.woff
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Regular.woff
vendored
Normal file
Binary file not shown.
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Regular.woff2
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerifWeb-Regular.woff2
vendored
Normal file
Binary file not shown.
55
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif_Bold_ReadMe.html
vendored
Normal file
55
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/fonts/bawue/BaWueSerif_Bold_ReadMe.html
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSerif';
|
||||
src: url('BaWueSerifWeb-Bold.woff2') format('woff2'),
|
||||
url('BaWueSerifWeb-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSerif';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Serif Bold
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
@font-face {
|
||||
font-family:'BaWueSerif';
|
||||
src: url('BaWueSerifWeb-Regular.woff2') format('woff2'),
|
||||
url('BaWueSerifWeb-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body{
|
||||
color: #333;
|
||||
margin: 6vh;
|
||||
font-family: 'BaWueSerif';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 3vh;
|
||||
line-height: 1.1;
|
||||
|
||||
font-feature-settings:'kern'; /* turns on kerning */
|
||||
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
||||
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
||||
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
BaWue Serif Regular
|
||||
<br>
|
||||
<br>
|
||||
Luzi Type’s webfonts are provided in: woff, woff2 formats.
|
||||
In case you need information how to embed this font in html have a look at the style in the head section of this file.
|
||||
<br>
|
||||
<br>
|
||||
This webfont can be used for the overall number of monthly page views stated on your Purchase Receipt.
|
||||
All our fonts are subject to the end user license agreement which can be downloaded at:
|
||||
<br>
|
||||
<a href="https://luzi-type.ch/source/EULA-Web.pdf">https://luzi-type.ch/source/EULA-Web.pdf</a>
|
||||
<br>
|
||||
<br>
|
||||
Do you need support? Have a look at our detailed
|
||||
<a href="https://luzi-type.ch/support" target="_blank" style="color:#999999">Support Page</a>.
|
||||
</body>
|
||||
</html>
|
||||
1104
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw.css
vendored
Normal file
1104
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1048
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw_dirk.css
vendored
Normal file
1048
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw_dirk.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1046
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw_dirk.txt
vendored
Normal file
1046
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/landbw_dirk.txt
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/logozsl-white.png
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/logozsl-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/logozsl.png
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/logozsl.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/wappen.png
vendored
Normal file
BIN
Praesentation/praes_git_konsole/lib/reveal.js/dist/theme/logos/wappen.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
321
Praesentation/praes_git_konsole/lib/reveal.js/gulpfile.js
Normal file
321
Praesentation/praes_git_konsole/lib/reveal.js/gulpfile.js
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
const pkg = require('./package.json')
|
||||
const glob = require('glob')
|
||||
const yargs = require('yargs')
|
||||
const through = require('through2');
|
||||
const qunit = require('node-qunit-puppeteer')
|
||||
|
||||
const {rollup} = require('rollup')
|
||||
const terser = require('@rollup/plugin-terser')
|
||||
const babel = require('@rollup/plugin-babel').default
|
||||
const commonjs = require('@rollup/plugin-commonjs')
|
||||
const resolve = require('@rollup/plugin-node-resolve').default
|
||||
const sass = require('sass')
|
||||
|
||||
const gulp = require('gulp')
|
||||
const tap = require('gulp-tap')
|
||||
const zip = require('gulp-zip')
|
||||
const header = require('gulp-header')
|
||||
const eslint = require('gulp-eslint')
|
||||
const minify = require('gulp-clean-css')
|
||||
const connect = require('gulp-connect')
|
||||
const autoprefixer = require('gulp-autoprefixer')
|
||||
|
||||
const root = yargs.argv.root || '.'
|
||||
const port = yargs.argv.port || 8000
|
||||
const host = yargs.argv.host || 'localhost'
|
||||
|
||||
const banner = `/*!
|
||||
* 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
|
||||
process.setMaxListeners(20);
|
||||
|
||||
const babelConfig = {
|
||||
babelHelpers: 'bundled',
|
||||
ignore: ['node_modules'],
|
||||
compact: false,
|
||||
extensions: ['.js', '.html'],
|
||||
plugins: [
|
||||
'transform-html-import-to-string'
|
||||
],
|
||||
presets: [[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
corejs: 3,
|
||||
useBuiltIns: 'usage',
|
||||
modules: false
|
||||
}
|
||||
]]
|
||||
};
|
||||
|
||||
// Our ES module bundle only targets newer browsers with
|
||||
// module support. Browsers are targeted explicitly instead
|
||||
// of using the "esmodule: true" target since that leads to
|
||||
// polyfilling older browsers and a larger bundle.
|
||||
const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
|
||||
babelConfigESM.presets[0][1].targets = { browsers: [
|
||||
'last 2 Chrome versions',
|
||||
'last 2 Safari versions',
|
||||
'last 2 iOS versions',
|
||||
'last 2 Firefox versions',
|
||||
'last 2 Edge versions',
|
||||
] };
|
||||
|
||||
let cache = {};
|
||||
|
||||
// Creates a bundle with broad browser support, exposed
|
||||
// as UMD
|
||||
gulp.task('js-es5', () => {
|
||||
return rollup({
|
||||
cache: cache.umd,
|
||||
input: 'js/index.js',
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel( babelConfig ),
|
||||
terser()
|
||||
]
|
||||
}).then( bundle => {
|
||||
cache.umd = bundle.cache;
|
||||
return bundle.write({
|
||||
name: 'Reveal',
|
||||
file: './dist/reveal.js',
|
||||
format: 'umd',
|
||||
banner: banner,
|
||||
sourcemap: true
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
// Creates an ES module bundle
|
||||
gulp.task('js-es6', () => {
|
||||
return rollup({
|
||||
cache: cache.esm,
|
||||
input: 'js/index.js',
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel( babelConfigESM ),
|
||||
terser()
|
||||
]
|
||||
}).then( bundle => {
|
||||
cache.esm = bundle.cache;
|
||||
return bundle.write({
|
||||
file: './dist/reveal.esm.js',
|
||||
format: 'es',
|
||||
banner: banner,
|
||||
sourcemap: true
|
||||
});
|
||||
});
|
||||
})
|
||||
gulp.task('js', gulp.parallel('js-es5', 'js-es6'));
|
||||
|
||||
// Creates a UMD and ES module bundle for each of our
|
||||
// built-in plugins
|
||||
gulp.task('plugins', () => {
|
||||
return Promise.all([
|
||||
{ name: 'RevealHighlight', input: './plugin/highlight/plugin.js', output: './plugin/highlight/highlight' },
|
||||
{ name: 'RevealMarkdown', input: './plugin/markdown/plugin.js', output: './plugin/markdown/markdown' },
|
||||
{ name: 'RevealSearch', input: './plugin/search/plugin.js', output: './plugin/search/search' },
|
||||
{ name: 'RevealNotes', input: './plugin/notes/plugin.js', output: './plugin/notes/notes' },
|
||||
{ name: 'RevealZoom', input: './plugin/zoom/plugin.js', output: './plugin/zoom/zoom' },
|
||||
{ name: 'RevealMath', input: './plugin/math/plugin.js', output: './plugin/math/math' },
|
||||
].map( plugin => {
|
||||
return rollup({
|
||||
cache: cache[plugin.input],
|
||||
input: plugin.input,
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
...babelConfig,
|
||||
ignore: [/node_modules\/(?!(highlight\.js|marked)\/).*/],
|
||||
}),
|
||||
terser()
|
||||
]
|
||||
}).then( bundle => {
|
||||
cache[plugin.input] = bundle.cache;
|
||||
bundle.write({
|
||||
file: plugin.output + '.esm.js',
|
||||
name: plugin.name,
|
||||
format: 'es'
|
||||
})
|
||||
|
||||
bundle.write({
|
||||
file: plugin.output + '.js',
|
||||
name: plugin.name,
|
||||
format: 'umd'
|
||||
})
|
||||
});
|
||||
} ));
|
||||
})
|
||||
|
||||
// a custom pipeable step to transform Sass to CSS
|
||||
function compileSass() {
|
||||
return through.obj( ( vinylFile, encoding, callback ) => {
|
||||
const transformedFile = vinylFile.clone();
|
||||
|
||||
sass.render({
|
||||
data: transformedFile.contents.toString(),
|
||||
file: transformedFile.path,
|
||||
}, ( err, result ) => {
|
||||
if( err ) {
|
||||
callback(err);
|
||||
}
|
||||
else {
|
||||
transformedFile.extname = '.css';
|
||||
transformedFile.contents = result.css;
|
||||
callback( null, transformedFile );
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
|
||||
.pipe(compileSass())
|
||||
.pipe(gulp.dest('./dist/theme')))
|
||||
|
||||
gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
|
||||
.pipe(compileSass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minify({compatibility: 'ie9'}))
|
||||
.pipe(header(banner))
|
||||
.pipe(gulp.dest('./dist')))
|
||||
|
||||
gulp.task('css', gulp.parallel('css-themes', 'css-core'))
|
||||
|
||||
gulp.task('qunit', () => {
|
||||
|
||||
let serverConfig = {
|
||||
root,
|
||||
port: 8009,
|
||||
host: 'localhost',
|
||||
name: 'test-server'
|
||||
}
|
||||
|
||||
let server = connect.server( serverConfig )
|
||||
|
||||
let testFiles = glob.sync('test/*.html' )
|
||||
|
||||
let totalTests = 0;
|
||||
let failingTests = 0;
|
||||
|
||||
let tests = Promise.all( testFiles.map( filename => {
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
qunit.runQunitPuppeteer({
|
||||
targetUrl: `http://${serverConfig.host}:${serverConfig.port}/${filename}`,
|
||||
timeout: 20000,
|
||||
redirectConsole: false,
|
||||
puppeteerArgs: ['--allow-file-access-from-files']
|
||||
})
|
||||
.then(result => {
|
||||
if( result.stats.failed > 0 ) {
|
||||
console.log(`${'!'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.red);
|
||||
// qunit.printResultSummary(result, console);
|
||||
qunit.printFailedTests(result, console);
|
||||
}
|
||||
else {
|
||||
console.log(`${'✔'} ${filename} [${result.stats.passed}/${result.stats.total}] in ${result.stats.runtime}ms`.green);
|
||||
}
|
||||
|
||||
totalTests += result.stats.total;
|
||||
failingTests += result.stats.failed;
|
||||
|
||||
resolve();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
reject();
|
||||
});
|
||||
} )
|
||||
} ) );
|
||||
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
|
||||
tests.then( () => {
|
||||
if( failingTests > 0 ) {
|
||||
reject( new Error(`${failingTests}/${totalTests} tests failed`.red) );
|
||||
}
|
||||
else {
|
||||
console.log(`${'✔'} Passed ${totalTests} tests`.green.bold);
|
||||
resolve();
|
||||
}
|
||||
} )
|
||||
.catch( () => {
|
||||
reject();
|
||||
} )
|
||||
.finally( () => {
|
||||
server.close();
|
||||
} );
|
||||
|
||||
} );
|
||||
} )
|
||||
|
||||
gulp.task('eslint', () => gulp.src(['./js/**', 'gulpfile.js'])
|
||||
.pipe(eslint())
|
||||
.pipe(eslint.format()))
|
||||
|
||||
gulp.task('test', gulp.series( 'eslint', 'qunit' ))
|
||||
|
||||
gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
|
||||
|
||||
gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
|
||||
|
||||
gulp.task('package', gulp.series(() =>
|
||||
|
||||
gulp.src(
|
||||
[
|
||||
'./index.html',
|
||||
'./dist/**',
|
||||
'./lib/**',
|
||||
'./images/**',
|
||||
'./plugin/**',
|
||||
'./**/*.md'
|
||||
],
|
||||
{ base: './' }
|
||||
)
|
||||
.pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
|
||||
|
||||
))
|
||||
|
||||
gulp.task('reload', () => gulp.src(['index.html'])
|
||||
.pipe(connect.reload()));
|
||||
|
||||
gulp.task('serve', () => {
|
||||
|
||||
connect.server({
|
||||
root: root,
|
||||
port: port,
|
||||
host: host,
|
||||
livereload: true
|
||||
})
|
||||
|
||||
const slidesRoot = root.endsWith('/') ? root : root + '/'
|
||||
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(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
|
||||
|
||||
gulp.watch([
|
||||
'css/theme/source/**/*.{sass,scss}',
|
||||
'css/theme/template/*.{sass,scss}',
|
||||
], gulp.series('css-themes', 'reload'))
|
||||
|
||||
gulp.watch([
|
||||
'css/*.scss',
|
||||
'css/print/*.{sass,scss,css}'
|
||||
], gulp.series('css-core', 'reload'))
|
||||
|
||||
gulp.watch(['test/*.html'], gulp.series('test'))
|
||||
|
||||
})
|
||||
40
Praesentation/praes_git_konsole/lib/reveal.js/index.html
Normal file
40
Praesentation/praes_git_konsole/lib/reveal.js/index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<title>reveal.js</title>
|
||||
|
||||
<link rel="stylesheet" href="dist/reset.css">
|
||||
<link rel="stylesheet" href="dist/reveal.css">
|
||||
<link rel="stylesheet" href="dist/theme/black.css">
|
||||
|
||||
<!-- Theme used for syntax highlighted code -->
|
||||
<link rel="stylesheet" href="plugin/highlight/tomorrow-night-bright.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
<section>Slide 1</section>
|
||||
<section>Slide 2</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>
|
||||
// More info about initialization & config:
|
||||
// - https://revealjs.com/initialization/
|
||||
// - https://revealjs.com/config/
|
||||
Reveal.initialize({
|
||||
hash: true,
|
||||
|
||||
// Learn about plugins: https://revealjs.com/plugins/
|
||||
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
* UI component that lets the use control auto-slide
|
||||
* playback via play/pause.
|
||||
*/
|
||||
export default class Playback {
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} container The component will append
|
||||
* itself to this
|
||||
* @param {function} progressCheck A method which will be
|
||||
* called frequently to get the current playback progress on
|
||||
* a range of 0-1
|
||||
*/
|
||||
constructor( container, progressCheck ) {
|
||||
|
||||
// Cosmetics
|
||||
this.diameter = 100;
|
||||
this.diameter2 = this.diameter/2;
|
||||
this.thickness = 6;
|
||||
|
||||
// Flags if we are currently playing
|
||||
this.playing = false;
|
||||
|
||||
// Current progress on a 0-1 range
|
||||
this.progress = 0;
|
||||
|
||||
// Used to loop the animation smoothly
|
||||
this.progressOffset = 1;
|
||||
|
||||
this.container = container;
|
||||
this.progressCheck = progressCheck;
|
||||
|
||||
this.canvas = document.createElement( 'canvas' );
|
||||
this.canvas.className = 'playback';
|
||||
this.canvas.width = this.diameter;
|
||||
this.canvas.height = this.diameter;
|
||||
this.canvas.style.width = this.diameter2 + 'px';
|
||||
this.canvas.style.height = this.diameter2 + 'px';
|
||||
this.context = this.canvas.getContext( '2d' );
|
||||
|
||||
this.container.appendChild( this.canvas );
|
||||
|
||||
this.render();
|
||||
|
||||
}
|
||||
|
||||
setPlaying( value ) {
|
||||
|
||||
const wasPlaying = this.playing;
|
||||
|
||||
this.playing = value;
|
||||
|
||||
// Start repainting if we weren't already
|
||||
if( !wasPlaying && this.playing ) {
|
||||
this.animate();
|
||||
}
|
||||
else {
|
||||
this.render();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
animate() {
|
||||
|
||||
const progressBefore = this.progress;
|
||||
|
||||
this.progress = this.progressCheck();
|
||||
|
||||
// When we loop, offset the progress so that it eases
|
||||
// smoothly rather than immediately resetting
|
||||
if( progressBefore > 0.8 && this.progress < 0.2 ) {
|
||||
this.progressOffset = this.progress;
|
||||
}
|
||||
|
||||
this.render();
|
||||
|
||||
if( this.playing ) {
|
||||
requestAnimationFrame( this.animate.bind( this ) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the current progress and playback state.
|
||||
*/
|
||||
render() {
|
||||
|
||||
let progress = this.playing ? this.progress : 0,
|
||||
radius = ( this.diameter2 ) - this.thickness,
|
||||
x = this.diameter2,
|
||||
y = this.diameter2,
|
||||
iconSize = 28;
|
||||
|
||||
// Ease towards 1
|
||||
this.progressOffset += ( 1 - this.progressOffset ) * 0.1;
|
||||
|
||||
const endAngle = ( - Math.PI / 2 ) + ( progress * ( Math.PI * 2 ) );
|
||||
const startAngle = ( - Math.PI / 2 ) + ( this.progressOffset * ( Math.PI * 2 ) );
|
||||
|
||||
this.context.save();
|
||||
this.context.clearRect( 0, 0, this.diameter, this.diameter );
|
||||
|
||||
// Solid background color
|
||||
this.context.beginPath();
|
||||
this.context.arc( x, y, radius + 4, 0, Math.PI * 2, false );
|
||||
this.context.fillStyle = 'rgba( 0, 0, 0, 0.4 )';
|
||||
this.context.fill();
|
||||
|
||||
// Draw progress track
|
||||
this.context.beginPath();
|
||||
this.context.arc( x, y, radius, 0, Math.PI * 2, false );
|
||||
this.context.lineWidth = this.thickness;
|
||||
this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )';
|
||||
this.context.stroke();
|
||||
|
||||
if( this.playing ) {
|
||||
// Draw progress on top of track
|
||||
this.context.beginPath();
|
||||
this.context.arc( x, y, radius, startAngle, endAngle, false );
|
||||
this.context.lineWidth = this.thickness;
|
||||
this.context.strokeStyle = '#fff';
|
||||
this.context.stroke();
|
||||
}
|
||||
|
||||
this.context.translate( x - ( iconSize / 2 ), y - ( iconSize / 2 ) );
|
||||
|
||||
// Draw play/pause icons
|
||||
if( this.playing ) {
|
||||
this.context.fillStyle = '#fff';
|
||||
this.context.fillRect( 0, 0, iconSize / 2 - 4, iconSize );
|
||||
this.context.fillRect( iconSize / 2 + 4, 0, iconSize / 2 - 4, iconSize );
|
||||
}
|
||||
else {
|
||||
this.context.beginPath();
|
||||
this.context.translate( 4, 0 );
|
||||
this.context.moveTo( 0, 0 );
|
||||
this.context.lineTo( iconSize - 4, iconSize / 2 );
|
||||
this.context.lineTo( 0, iconSize );
|
||||
this.context.fillStyle = '#fff';
|
||||
this.context.fill();
|
||||
}
|
||||
|
||||
this.context.restore();
|
||||
|
||||
}
|
||||
|
||||
on( type, listener ) {
|
||||
this.canvas.addEventListener( type, listener, false );
|
||||
}
|
||||
|
||||
off( type, listener ) {
|
||||
this.canvas.removeEventListener( type, listener, false );
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.playing = false;
|
||||
|
||||
if( this.canvas.parentNode ) {
|
||||
this.container.removeChild( this.canvas );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
330
Praesentation/praes_git_konsole/lib/reveal.js/js/config.js
Normal file
330
Praesentation/praes_git_konsole/lib/reveal.js/js/config.js
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
/**
|
||||
* The default reveal.js config object.
|
||||
*/
|
||||
export default {
|
||||
|
||||
// The "normal" size of the presentation, aspect ratio will be preserved
|
||||
// when the presentation is scaled to fit different resolutions
|
||||
width: 960,
|
||||
height: 700,
|
||||
|
||||
// Factor of the display size that should remain empty around the content
|
||||
margin: 0.04,
|
||||
|
||||
// Bounds for smallest/largest possible scale to apply to content
|
||||
minScale: 0.2,
|
||||
maxScale: 2.0,
|
||||
|
||||
// Display presentation control arrows
|
||||
controls: true,
|
||||
|
||||
// Help the user learn the controls by providing hints, for example by
|
||||
// bouncing the down arrow when they first encounter a vertical slide
|
||||
controlsTutorial: true,
|
||||
|
||||
// Determines where controls appear, "edges" or "bottom-right"
|
||||
controlsLayout: 'bottom-right',
|
||||
|
||||
// Visibility rule for backwards navigation arrows; "faded", "hidden"
|
||||
// or "visible"
|
||||
controlsBackArrows: 'faded',
|
||||
|
||||
// Display a presentation progress bar
|
||||
progress: true,
|
||||
|
||||
// Display the page number of the current slide
|
||||
// - true: Show slide number
|
||||
// - false: Hide slide number
|
||||
//
|
||||
// Can optionally be set as a string that specifies the number formatting:
|
||||
// - "h.v": Horizontal . vertical slide number (default)
|
||||
// - "h/v": Horizontal / vertical slide number
|
||||
// - "c": Flattened slide number
|
||||
// - "c/t": Flattened slide number / total slides
|
||||
//
|
||||
// Alternatively, you can provide a function that returns the slide
|
||||
// number for the current slide. The function should take in a slide
|
||||
// object and return an array with one string [slideNumber] or
|
||||
// three strings [n1,delimiter,n2]. See #formatSlideNumber().
|
||||
slideNumber: false,
|
||||
|
||||
// Can be used to limit the contexts in which the slide number appears
|
||||
// - "all": Always show the slide number
|
||||
// - "print": Only when printing to PDF
|
||||
// - "speaker": Only in the speaker view
|
||||
showSlideNumber: 'all',
|
||||
|
||||
// Use 1 based indexing for # links to match slide number (default is zero
|
||||
// based)
|
||||
hashOneBasedIndex: false,
|
||||
|
||||
// Add the current slide number to the URL hash so that reloading the
|
||||
// page/copying the URL will return you to the same slide
|
||||
hash: false,
|
||||
|
||||
// Flags if we should monitor the hash and change slides accordingly
|
||||
respondToHashChanges: true,
|
||||
|
||||
// Enable support for jump-to-slide navigation shortcuts
|
||||
jumpToSlide: true,
|
||||
|
||||
// Push each slide change to the browser history. Implies `hash: true`
|
||||
history: false,
|
||||
|
||||
// Enable keyboard shortcuts for navigation
|
||||
keyboard: true,
|
||||
|
||||
// Optional function that blocks keyboard events when retuning false
|
||||
//
|
||||
// If you set this to 'focused', we will only capture keyboard events
|
||||
// for embedded decks when they are in focus
|
||||
keyboardCondition: null,
|
||||
|
||||
// Disables the default reveal.js slide layout (scaling and centering)
|
||||
// so that you can use custom CSS layout
|
||||
disableLayout: false,
|
||||
|
||||
// Enable the slide overview mode
|
||||
overview: true,
|
||||
|
||||
// Vertical centering of slides
|
||||
center: true,
|
||||
|
||||
// Enables touch navigation on devices with touch input
|
||||
touch: true,
|
||||
|
||||
// Loop the presentation
|
||||
loop: false,
|
||||
|
||||
// Change the presentation direction to be RTL
|
||||
rtl: false,
|
||||
|
||||
// Changes the behavior of our navigation directions.
|
||||
//
|
||||
// "default"
|
||||
// Left/right arrow keys step between horizontal slides, up/down
|
||||
// arrow keys step between vertical slides. Space key steps through
|
||||
// all slides (both horizontal and vertical).
|
||||
//
|
||||
// "linear"
|
||||
// Removes the up/down arrows. Left/right arrows step through all
|
||||
// slides (both horizontal and vertical).
|
||||
//
|
||||
// "grid"
|
||||
// When this is enabled, stepping left/right from a vertical stack
|
||||
// to an adjacent vertical stack will land you at the same vertical
|
||||
// index.
|
||||
//
|
||||
// Consider a deck with six slides ordered in two vertical stacks:
|
||||
// 1.1 2.1
|
||||
// 1.2 2.2
|
||||
// 1.3 2.3
|
||||
//
|
||||
// If you're on slide 1.3 and navigate right, you will normally move
|
||||
// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
|
||||
// from 1.3 -> 2.3.
|
||||
navigationMode: 'default',
|
||||
|
||||
// Randomizes the order of slides each time the presentation loads
|
||||
shuffle: false,
|
||||
|
||||
// Turns fragments on and off globally
|
||||
fragments: true,
|
||||
|
||||
// Flags whether to include the current fragment in the URL,
|
||||
// so that reloading brings you to the same fragment position
|
||||
fragmentInURL: true,
|
||||
|
||||
// Flags if the presentation is running in an embedded mode,
|
||||
// i.e. contained within a limited portion of the screen
|
||||
embedded: false,
|
||||
|
||||
// Flags if we should show a help overlay when the question-mark
|
||||
// key is pressed
|
||||
help: true,
|
||||
|
||||
// Flags if it should be possible to pause the presentation (blackout)
|
||||
pause: true,
|
||||
|
||||
// Flags if speaker notes should be visible to all viewers
|
||||
showNotes: false,
|
||||
|
||||
// Flags if slides with data-visibility="hidden" should be kep visible
|
||||
showHiddenSlides: false,
|
||||
|
||||
// Global override for autoplaying embedded media (video/audio/iframe)
|
||||
// - null: Media will only autoplay if data-autoplay is present
|
||||
// - true: All media will autoplay, regardless of individual setting
|
||||
// - false: No media will autoplay, regardless of individual setting
|
||||
autoPlayMedia: null,
|
||||
|
||||
// Global override for preloading lazy-loaded iframes
|
||||
// - null: Iframes with data-src AND data-preload will be loaded when within
|
||||
// the viewDistance, iframes with only data-src will be loaded when visible
|
||||
// - true: All iframes with data-src will be loaded when within the viewDistance
|
||||
// - false: All iframes with data-src will be loaded only when visible
|
||||
preloadIframes: null,
|
||||
|
||||
// Can be used to globally disable auto-animation
|
||||
autoAnimate: true,
|
||||
|
||||
// Optionally provide a custom element matcher that will be
|
||||
// used to dictate which elements we can animate between.
|
||||
autoAnimateMatcher: null,
|
||||
|
||||
// Default settings for our auto-animate transitions, can be
|
||||
// overridden per-slide or per-element via data arguments
|
||||
autoAnimateEasing: 'ease',
|
||||
autoAnimateDuration: 1.0,
|
||||
autoAnimateUnmatched: true,
|
||||
|
||||
// CSS properties that can be auto-animated. Position & scale
|
||||
// is matched separately so there's no need to include styles
|
||||
// like top/right/bottom/left, width/height or margin.
|
||||
autoAnimateStyles: [
|
||||
'opacity',
|
||||
'color',
|
||||
'background-color',
|
||||
'padding',
|
||||
'font-size',
|
||||
'line-height',
|
||||
'letter-spacing',
|
||||
'border-width',
|
||||
'border-color',
|
||||
'border-radius',
|
||||
'outline',
|
||||
'outline-offset'
|
||||
],
|
||||
|
||||
// Controls automatic progression to the next slide
|
||||
// - 0: Auto-sliding only happens if the data-autoslide HTML attribute
|
||||
// is present on the current slide or fragment
|
||||
// - 1+: All slides will progress automatically at the given interval
|
||||
// - false: No auto-sliding, even if data-autoslide is present
|
||||
autoSlide: 0,
|
||||
|
||||
// Stop auto-sliding after user input
|
||||
autoSlideStoppable: true,
|
||||
|
||||
// Use this method for navigation when auto-sliding (defaults to navigateNext)
|
||||
autoSlideMethod: null,
|
||||
|
||||
// Specify the average time in seconds that you think you will spend
|
||||
// presenting each slide. This is used to show a pacing timer in the
|
||||
// speaker view
|
||||
defaultTiming: null,
|
||||
|
||||
// Enable slide navigation via mouse wheel
|
||||
mouseWheel: false,
|
||||
|
||||
// Opens links in an iframe preview overlay
|
||||
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
|
||||
// individually
|
||||
previewLinks: false,
|
||||
|
||||
// Exposes the reveal.js API through window.postMessage
|
||||
postMessage: true,
|
||||
|
||||
// Dispatches all reveal.js events to the parent window through postMessage
|
||||
postMessageEvents: false,
|
||||
|
||||
// Focuses body when page changes visibility to ensure keyboard shortcuts work
|
||||
focusBodyOnPageVisibilityChange: true,
|
||||
|
||||
// Transition style
|
||||
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||
|
||||
// Transition speed
|
||||
transitionSpeed: 'default', // default/fast/slow
|
||||
|
||||
// Transition style for full page slide backgrounds
|
||||
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
|
||||
|
||||
// Parallax background image
|
||||
parallaxBackgroundImage: '', // CSS syntax, e.g. "a.jpg"
|
||||
|
||||
// Parallax background size
|
||||
parallaxBackgroundSize: '', // CSS syntax, e.g. "3000px 2000px"
|
||||
|
||||
// Parallax background repeat
|
||||
parallaxBackgroundRepeat: '', // repeat/repeat-x/repeat-y/no-repeat/initial/inherit
|
||||
|
||||
// Parallax background position
|
||||
parallaxBackgroundPosition: '', // CSS syntax, e.g. "top left"
|
||||
|
||||
// Amount of pixels to move the parallax background per slide step
|
||||
parallaxBackgroundHorizontal: 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
|
||||
// to PDF, unlimited by default
|
||||
pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
|
||||
|
||||
// Prints each fragment on a separate slide
|
||||
pdfSeparateFragments: true,
|
||||
|
||||
// Offset used to reduce the height of content within exported PDF pages.
|
||||
// This exists to account for environment differences based on how you
|
||||
// print to PDF. CLI printing options, like phantomjs and wkpdf, can end
|
||||
// on precisely the total height of the document whereas in-browser
|
||||
// printing has to end one pixel before.
|
||||
pdfPageHeightOffset: -1,
|
||||
|
||||
// Number of slides away from the current that are visible
|
||||
viewDistance: 3,
|
||||
|
||||
// Number of slides away from the current that are visible on mobile
|
||||
// devices. It is advisable to set this to a lower number than
|
||||
// viewDistance in order to save resources.
|
||||
mobileViewDistance: 2,
|
||||
|
||||
// The display mode that will be used to show slides
|
||||
display: 'block',
|
||||
|
||||
// Hide cursor if inactive
|
||||
hideInactiveCursor: true,
|
||||
|
||||
// Time before the cursor is hidden (in ms)
|
||||
hideCursorTime: 5000,
|
||||
|
||||
// Should we automatically sort and set indices for fragments
|
||||
// at each sync? (See Reveal.sync)
|
||||
sortFragmentsOnSync: true,
|
||||
|
||||
// Script dependencies to load
|
||||
dependencies: [],
|
||||
|
||||
// Plugin objects to register and use for this presentation
|
||||
plugins: []
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,643 @@
|
|||
import { queryAll, extend, createStyleSheet, matches, closest } from '../utils/util.js'
|
||||
import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js'
|
||||
|
||||
// Counter used to generate unique IDs for auto-animated elements
|
||||
let autoAnimateCounter = 0;
|
||||
|
||||
/**
|
||||
* Automatically animates matching elements across
|
||||
* slides with the [data-auto-animate] attribute.
|
||||
*/
|
||||
export default class AutoAnimate {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Runs an auto-animation between the given slides.
|
||||
*
|
||||
* @param {HTMLElement} fromSlide
|
||||
* @param {HTMLElement} toSlide
|
||||
*/
|
||||
run( fromSlide, toSlide ) {
|
||||
|
||||
// Clean up after prior animations
|
||||
this.reset();
|
||||
|
||||
let allSlides = this.Reveal.getSlides();
|
||||
let toSlideIndex = allSlides.indexOf( toSlide );
|
||||
let fromSlideIndex = allSlides.indexOf( fromSlide );
|
||||
|
||||
// Ensure that;
|
||||
// 1. Both slides exist.
|
||||
// 2. Both slides are auto-animate targets with the same
|
||||
// data-auto-animate-id value (including null if absent on both).
|
||||
// 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' )
|
||||
&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
|
||||
|
||||
// Create a new auto-animate sheet
|
||||
this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();
|
||||
|
||||
let animationOptions = this.getAutoAnimateOptions( toSlide );
|
||||
|
||||
// Set our starting state
|
||||
fromSlide.dataset.autoAnimate = 'pending';
|
||||
toSlide.dataset.autoAnimate = 'pending';
|
||||
|
||||
// Flag the navigation direction, needed for fragment buildup
|
||||
animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
|
||||
|
||||
// If the from-slide is hidden because it has moved outside
|
||||
// the view distance, we need to temporarily show it while
|
||||
// measuring
|
||||
let fromSlideIsHidden = fromSlide.style.display === 'none';
|
||||
if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;
|
||||
|
||||
// Inject our auto-animate styles for this transition
|
||||
let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
|
||||
return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
|
||||
} );
|
||||
|
||||
if( fromSlideIsHidden ) fromSlide.style.display = 'none';
|
||||
|
||||
// Animate unmatched elements, if enabled
|
||||
if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
|
||||
|
||||
// Our default timings for unmatched elements
|
||||
let defaultUnmatchedDuration = animationOptions.duration * 0.8,
|
||||
defaultUnmatchedDelay = animationOptions.duration * 0.2;
|
||||
|
||||
this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {
|
||||
|
||||
let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );
|
||||
let id = 'unmatched';
|
||||
|
||||
// If there is a duration or delay set specifically for this
|
||||
// element our unmatched elements should adhere to those
|
||||
if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
|
||||
id = 'unmatched-' + autoAnimateCounter++;
|
||||
css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
|
||||
}
|
||||
|
||||
unmatchedElement.dataset.autoAnimateTarget = id;
|
||||
|
||||
}, this );
|
||||
|
||||
// Our default transition for unmatched elements
|
||||
css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );
|
||||
|
||||
}
|
||||
|
||||
// Setting the whole chunk of CSS at once is the most
|
||||
// efficient way to do this. Using sheet.insertRule
|
||||
// is multiple factors slower.
|
||||
this.autoAnimateStyleSheet.innerHTML = css.join( '' );
|
||||
|
||||
// Start the animation next cycle
|
||||
requestAnimationFrame( () => {
|
||||
if( this.autoAnimateStyleSheet ) {
|
||||
// This forces our newly injected styles to be applied in Firefox
|
||||
getComputedStyle( this.autoAnimateStyleSheet ).fontWeight;
|
||||
|
||||
toSlide.dataset.autoAnimate = 'running';
|
||||
}
|
||||
} );
|
||||
|
||||
this.Reveal.dispatchEvent({
|
||||
type: 'autoanimate',
|
||||
data: {
|
||||
fromSlide,
|
||||
toSlide,
|
||||
sheet: this.autoAnimateStyleSheet
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Rolls back all changes that we've made to the DOM so
|
||||
* that as part of animating.
|
||||
*/
|
||||
reset() {
|
||||
|
||||
// Reset slides
|
||||
queryAll( this.Reveal.getRevealElement(), '[data-auto-animate]:not([data-auto-animate=""])' ).forEach( element => {
|
||||
element.dataset.autoAnimate = '';
|
||||
} );
|
||||
|
||||
// Reset elements
|
||||
queryAll( this.Reveal.getRevealElement(), '[data-auto-animate-target]' ).forEach( element => {
|
||||
delete element.dataset.autoAnimateTarget;
|
||||
} );
|
||||
|
||||
// Remove the animation sheet
|
||||
if( this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode ) {
|
||||
this.autoAnimateStyleSheet.parentNode.removeChild( this.autoAnimateStyleSheet );
|
||||
this.autoAnimateStyleSheet = null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a FLIP animation where the `to` element starts out
|
||||
* in the `from` element position and animates to its original
|
||||
* state.
|
||||
*
|
||||
* @param {HTMLElement} from
|
||||
* @param {HTMLElement} to
|
||||
* @param {Object} elementOptions Options for this element pair
|
||||
* @param {Object} animationOptions Options set at the slide level
|
||||
* @param {String} id Unique ID that we can use to identify this
|
||||
* auto-animate element in the DOM
|
||||
*/
|
||||
autoAnimateElements( from, to, elementOptions, animationOptions, id ) {
|
||||
|
||||
// 'from' elements are given a data-auto-animate-target with no value,
|
||||
// 'to' elements are are given a data-auto-animate-target with an ID
|
||||
from.dataset.autoAnimateTarget = '';
|
||||
to.dataset.autoAnimateTarget = id;
|
||||
|
||||
// Each element may override any of the auto-animate options
|
||||
// like transition easing, duration and delay via data-attributes
|
||||
let options = this.getAutoAnimateOptions( to, animationOptions );
|
||||
|
||||
// If we're using a custom element matcher the element options
|
||||
// may contain additional transition overrides
|
||||
if( typeof elementOptions.delay !== 'undefined' ) options.delay = elementOptions.delay;
|
||||
if( typeof elementOptions.duration !== 'undefined' ) options.duration = elementOptions.duration;
|
||||
if( typeof elementOptions.easing !== 'undefined' ) options.easing = elementOptions.easing;
|
||||
|
||||
let fromProps = this.getAutoAnimatableProperties( 'from', from, 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' ) ) {
|
||||
|
||||
// Don't auto-animate the opacity of fragments to avoid
|
||||
// conflicts with fragment animations
|
||||
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
|
||||
// the 'to' element so that it matches the position and size
|
||||
// of the 'from' element
|
||||
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
||||
|
||||
let presentationScale = this.Reveal.getScale();
|
||||
|
||||
let delta = {
|
||||
x: ( fromProps.x - toProps.x ) / presentationScale,
|
||||
y: ( fromProps.y - toProps.y ) / presentationScale,
|
||||
scaleX: fromProps.width / toProps.width,
|
||||
scaleY: fromProps.height / toProps.height
|
||||
};
|
||||
|
||||
// Limit decimal points to avoid 0.0001px blur and stutter
|
||||
delta.x = Math.round( delta.x * 1000 ) / 1000;
|
||||
delta.y = Math.round( delta.y * 1000 ) / 1000;
|
||||
delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
|
||||
delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
|
||||
|
||||
let translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),
|
||||
scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );
|
||||
|
||||
// No need to transform if nothing's changed
|
||||
if( translate || scale ) {
|
||||
|
||||
let transform = [];
|
||||
|
||||
if( translate ) transform.push( `translate(${delta.x}px, ${delta.y}px)` );
|
||||
if( scale ) transform.push( `scale(${delta.scaleX}, ${delta.scaleY})` );
|
||||
|
||||
fromProps.styles['transform'] = transform.join( ' ' );
|
||||
fromProps.styles['transform-origin'] = 'top left';
|
||||
|
||||
toProps.styles['transform'] = 'none';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Delete all unchanged 'to' styles
|
||||
for( let propertyName in toProps.styles ) {
|
||||
const toValue = toProps.styles[propertyName];
|
||||
const fromValue = fromProps.styles[propertyName];
|
||||
|
||||
if( toValue === fromValue ) {
|
||||
delete toProps.styles[propertyName];
|
||||
}
|
||||
else {
|
||||
// If these property values were set via a custom matcher providing
|
||||
// an explicit 'from' and/or 'to' value, we always inject those values.
|
||||
if( toValue.explicitValue === true ) {
|
||||
toProps.styles[propertyName] = toValue.value;
|
||||
}
|
||||
|
||||
if( fromValue.explicitValue === true ) {
|
||||
fromProps.styles[propertyName] = fromValue.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let css = '';
|
||||
|
||||
let toStyleProperties = Object.keys( toProps.styles );
|
||||
|
||||
// Only create animate this element IF at least one style
|
||||
// property has changed
|
||||
if( toStyleProperties.length > 0 ) {
|
||||
|
||||
// Instantly move to the 'from' state
|
||||
fromProps.styles['transition'] = 'none';
|
||||
|
||||
// Animate towards the 'to' state
|
||||
toProps.styles['transition'] = `all ${options.duration}s ${options.easing} ${options.delay}s`;
|
||||
toProps.styles['transition-property'] = toStyleProperties.join( ', ' );
|
||||
toProps.styles['will-change'] = toStyleProperties.join( ', ' );
|
||||
|
||||
// Build up our custom CSS. We need to override inline styles
|
||||
// so we need to make our styles vErY IMPORTANT!1!!
|
||||
let fromCSS = Object.keys( fromProps.styles ).map( propertyName => {
|
||||
return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';
|
||||
} ).join( '' );
|
||||
|
||||
let toCSS = Object.keys( toProps.styles ).map( propertyName => {
|
||||
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
|
||||
} ).join( '' );
|
||||
|
||||
css = '[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
|
||||
'[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
|
||||
|
||||
}
|
||||
|
||||
return css;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the auto-animate options for the given element.
|
||||
*
|
||||
* @param {HTMLElement} element Element to pick up options
|
||||
* from, either a slide or an animation target
|
||||
* @param {Object} [inheritedOptions] Optional set of existing
|
||||
* options
|
||||
*/
|
||||
getAutoAnimateOptions( element, inheritedOptions ) {
|
||||
|
||||
let options = {
|
||||
easing: this.Reveal.getConfig().autoAnimateEasing,
|
||||
duration: this.Reveal.getConfig().autoAnimateDuration,
|
||||
delay: 0
|
||||
};
|
||||
|
||||
options = extend( options, inheritedOptions );
|
||||
|
||||
// Inherit options from parent elements
|
||||
if( element.parentNode ) {
|
||||
let autoAnimatedParent = closest( element.parentNode, '[data-auto-animate-target]' );
|
||||
if( autoAnimatedParent ) {
|
||||
options = this.getAutoAnimateOptions( autoAnimatedParent, options );
|
||||
}
|
||||
}
|
||||
|
||||
if( element.dataset.autoAnimateEasing ) {
|
||||
options.easing = element.dataset.autoAnimateEasing;
|
||||
}
|
||||
|
||||
if( element.dataset.autoAnimateDuration ) {
|
||||
options.duration = parseFloat( element.dataset.autoAnimateDuration );
|
||||
}
|
||||
|
||||
if( element.dataset.autoAnimateDelay ) {
|
||||
options.delay = parseFloat( element.dataset.autoAnimateDelay );
|
||||
}
|
||||
|
||||
return options;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an object containing all of the properties
|
||||
* that can be auto-animated for the given element and
|
||||
* their current computed values.
|
||||
*
|
||||
* @param {String} direction 'from' or 'to'
|
||||
*/
|
||||
getAutoAnimatableProperties( direction, element, elementOptions ) {
|
||||
|
||||
let config = this.Reveal.getConfig();
|
||||
|
||||
let properties = { styles: [] };
|
||||
|
||||
// Position and size
|
||||
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
||||
let bounds;
|
||||
|
||||
// Custom auto-animate may optionally return a custom tailored
|
||||
// measurement function
|
||||
if( typeof elementOptions.measure === 'function' ) {
|
||||
bounds = elementOptions.measure( element );
|
||||
}
|
||||
else {
|
||||
if( config.center ) {
|
||||
// More precise, but breaks when used in combination
|
||||
// with zoom for scaling the deck ¯\_(ツ)_/¯
|
||||
bounds = element.getBoundingClientRect();
|
||||
}
|
||||
else {
|
||||
let scale = this.Reveal.getScale();
|
||||
bounds = {
|
||||
x: element.offsetLeft * scale,
|
||||
y: element.offsetTop * scale,
|
||||
width: element.offsetWidth * scale,
|
||||
height: element.offsetHeight * scale
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
properties.x = bounds.x;
|
||||
properties.y = bounds.y;
|
||||
properties.width = bounds.width;
|
||||
properties.height = bounds.height;
|
||||
}
|
||||
|
||||
const computedStyles = getComputedStyle( element );
|
||||
|
||||
// CSS styles
|
||||
( elementOptions.styles || config.autoAnimateStyles ).forEach( style => {
|
||||
let value;
|
||||
|
||||
// `style` is either the property name directly, or an object
|
||||
// definition of a style property
|
||||
if( typeof style === 'string' ) style = { property: style };
|
||||
|
||||
if( typeof style.from !== 'undefined' && direction === 'from' ) {
|
||||
value = { value: style.from, explicitValue: true };
|
||||
}
|
||||
else if( typeof style.to !== 'undefined' && direction === 'to' ) {
|
||||
value = { value: style.to, explicitValue: true };
|
||||
}
|
||||
else {
|
||||
// Use a unitless value for line-height so that it inherits properly
|
||||
if( style.property === 'line-height' ) {
|
||||
value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
|
||||
}
|
||||
|
||||
if( isNaN(value) ) {
|
||||
value = computedStyles[style.property];
|
||||
}
|
||||
}
|
||||
|
||||
if( value !== '' ) {
|
||||
properties.styles[style.property] = value;
|
||||
}
|
||||
} );
|
||||
|
||||
return properties;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a list of all element pairs that we can animate
|
||||
* between the given slides.
|
||||
*
|
||||
* @param {HTMLElement} fromSlide
|
||||
* @param {HTMLElement} toSlide
|
||||
*
|
||||
* @return {Array} Each value is an array where [0] is
|
||||
* the element we're animating from and [1] is the
|
||||
* element we're animating to
|
||||
*/
|
||||
getAutoAnimatableElements( fromSlide, toSlide ) {
|
||||
|
||||
let matcher = typeof this.Reveal.getConfig().autoAnimateMatcher === 'function' ? this.Reveal.getConfig().autoAnimateMatcher : this.getAutoAnimatePairs;
|
||||
|
||||
let pairs = matcher.call( this, fromSlide, toSlide );
|
||||
|
||||
let reserved = [];
|
||||
|
||||
// Remove duplicate pairs
|
||||
return pairs.filter( ( pair, index ) => {
|
||||
if( reserved.indexOf( pair.to ) === -1 ) {
|
||||
reserved.push( pair.to );
|
||||
return true;
|
||||
}
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Identifies matching elements between slides.
|
||||
*
|
||||
* You can specify a custom matcher function by using
|
||||
* the `autoAnimateMatcher` config option.
|
||||
*/
|
||||
getAutoAnimatePairs( fromSlide, toSlide ) {
|
||||
|
||||
let pairs = [];
|
||||
|
||||
const codeNodes = 'pre';
|
||||
const textNodes = 'h1, h2, h3, h4, h5, h6, p, li';
|
||||
const mediaNodes = 'img, video, iframe';
|
||||
|
||||
// Explicit matches via data-id
|
||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, '[data-id]', node => {
|
||||
return node.nodeName + ':::' + node.getAttribute( 'data-id' );
|
||||
} );
|
||||
|
||||
// Text
|
||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, textNodes, node => {
|
||||
return node.nodeName + ':::' + node.innerText;
|
||||
} );
|
||||
|
||||
// Media
|
||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, mediaNodes, node => {
|
||||
return node.nodeName + ':::' + ( node.getAttribute( 'src' ) || node.getAttribute( 'data-src' ) );
|
||||
} );
|
||||
|
||||
// Code
|
||||
this.findAutoAnimateMatches( pairs, fromSlide, toSlide, codeNodes, node => {
|
||||
return node.nodeName + ':::' + node.innerText;
|
||||
} );
|
||||
|
||||
pairs.forEach( pair => {
|
||||
// Disable scale transformations on text nodes, we transition
|
||||
// each individual text property instead
|
||||
if( matches( pair.from, textNodes ) ) {
|
||||
pair.options = { scale: false };
|
||||
}
|
||||
// Animate individual lines of code
|
||||
else if( matches( pair.from, codeNodes ) ) {
|
||||
|
||||
// Transition the code block's width and height instead of scaling
|
||||
// to prevent its content from being squished
|
||||
pair.options = { scale: false, styles: [ 'width', 'height' ] };
|
||||
|
||||
// Lines of code
|
||||
this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-code', node => {
|
||||
return node.textContent;
|
||||
}, {
|
||||
scale: false,
|
||||
styles: [],
|
||||
measure: this.getLocalBoundingBox.bind( this )
|
||||
} );
|
||||
|
||||
// Line numbers
|
||||
this.findAutoAnimateMatches( pairs, pair.from, pair.to, '.hljs .hljs-ln-numbers[data-line-number]', node => {
|
||||
return node.getAttribute( 'data-line-number' );
|
||||
}, {
|
||||
scale: false,
|
||||
styles: [ 'width' ],
|
||||
measure: this.getLocalBoundingBox.bind( this )
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
}, this );
|
||||
|
||||
return pairs;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method which returns a bounding box based on
|
||||
* the given elements offset coordinates.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @return {Object} x, y, width, height
|
||||
*/
|
||||
getLocalBoundingBox( element ) {
|
||||
|
||||
const presentationScale = this.Reveal.getScale();
|
||||
|
||||
return {
|
||||
x: Math.round( ( element.offsetLeft * presentationScale ) * 100 ) / 100,
|
||||
y: Math.round( ( element.offsetTop * presentationScale ) * 100 ) / 100,
|
||||
width: Math.round( ( element.offsetWidth * presentationScale ) * 100 ) / 100,
|
||||
height: Math.round( ( element.offsetHeight * presentationScale ) * 100 ) / 100
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds matching elements between two slides.
|
||||
*
|
||||
* @param {Array} pairs List of pairs to push matches to
|
||||
* @param {HTMLElement} fromScope Scope within the from element exists
|
||||
* @param {HTMLElement} toScope Scope within the to element exists
|
||||
* @param {String} selector CSS selector of the element to match
|
||||
* @param {Function} serializer A function that accepts an element and returns
|
||||
* a stringified ID based on its contents
|
||||
* @param {Object} animationOptions Optional config options for this pair
|
||||
*/
|
||||
findAutoAnimateMatches( pairs, fromScope, toScope, selector, serializer, animationOptions ) {
|
||||
|
||||
let fromMatches = {};
|
||||
let toMatches = {};
|
||||
|
||||
[].slice.call( fromScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
|
||||
const key = serializer( element );
|
||||
if( typeof key === 'string' && key.length ) {
|
||||
fromMatches[key] = fromMatches[key] || [];
|
||||
fromMatches[key].push( element );
|
||||
}
|
||||
} );
|
||||
|
||||
[].slice.call( toScope.querySelectorAll( selector ) ).forEach( ( element, i ) => {
|
||||
const key = serializer( element );
|
||||
toMatches[key] = toMatches[key] || [];
|
||||
toMatches[key].push( element );
|
||||
|
||||
let fromElement;
|
||||
|
||||
// Retrieve the 'from' element
|
||||
if( fromMatches[key] ) {
|
||||
const primaryIndex = toMatches[key].length - 1;
|
||||
const secondaryIndex = fromMatches[key].length - 1;
|
||||
|
||||
// If there are multiple identical from elements, retrieve
|
||||
// the one at the same index as our to-element.
|
||||
if( fromMatches[key][ primaryIndex ] ) {
|
||||
fromElement = fromMatches[key][ primaryIndex ];
|
||||
fromMatches[key][ primaryIndex ] = null;
|
||||
}
|
||||
// If there are no matching from-elements at the same index,
|
||||
// use the last one.
|
||||
else if( fromMatches[key][ secondaryIndex ] ) {
|
||||
fromElement = fromMatches[key][ secondaryIndex ];
|
||||
fromMatches[key][ secondaryIndex ] = null;
|
||||
}
|
||||
}
|
||||
|
||||
// If we've got a matching pair, push it to the list of pairs
|
||||
if( fromElement ) {
|
||||
pairs.push({
|
||||
from: fromElement,
|
||||
to: element,
|
||||
options: animationOptions
|
||||
});
|
||||
}
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a all elements within the given scope that should
|
||||
* be considered unmatched in an auto-animate transition. If
|
||||
* fading of unmatched elements is turned on, these elements
|
||||
* will fade when going between auto-animate slides.
|
||||
*
|
||||
* Note that parents of auto-animate targets are NOT considered
|
||||
* unmatched since fading them would break the auto-animation.
|
||||
*
|
||||
* @param {HTMLElement} rootElement
|
||||
* @return {Array}
|
||||
*/
|
||||
getUnmatchedAutoAnimateElements( rootElement ) {
|
||||
|
||||
return [].slice.call( rootElement.children ).reduce( ( result, element ) => {
|
||||
|
||||
const containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );
|
||||
|
||||
// The element is unmatched if
|
||||
// - It is not an auto-animate target
|
||||
// - It does not contain any auto-animate targets
|
||||
if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
|
||||
result.push( element );
|
||||
}
|
||||
|
||||
if( element.querySelector( '[data-auto-animate-target]' ) ) {
|
||||
result = result.concat( this.getUnmatchedAutoAnimateElements( element ) );
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
}, [] );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,468 @@
|
|||
import { queryAll } from '../utils/util.js'
|
||||
import { colorToRgb, colorBrightness } from '../utils/color.js'
|
||||
|
||||
/**
|
||||
* Creates and updates slide backgrounds.
|
||||
*/
|
||||
export default class Backgrounds {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
this.element = document.createElement( 'div' );
|
||||
this.element.className = 'backgrounds';
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the slide background elements and appends them
|
||||
* to the background container. One element is created per
|
||||
* slide no matter if the given slide has visible background.
|
||||
*/
|
||||
create() {
|
||||
|
||||
// Clear prior backgrounds
|
||||
this.element.innerHTML = '';
|
||||
this.element.classList.add( 'no-transition' );
|
||||
|
||||
// Iterate over all horizontal slides
|
||||
this.Reveal.getHorizontalSlides().forEach( slideh => {
|
||||
|
||||
let backgroundStack = this.createBackground( slideh, this.element );
|
||||
|
||||
// Iterate over all vertical slides
|
||||
queryAll( slideh, 'section' ).forEach( slidev => {
|
||||
|
||||
this.createBackground( slidev, backgroundStack );
|
||||
|
||||
backgroundStack.classList.add( 'stack' );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
// Add parallax background if specified
|
||||
if( this.Reveal.getConfig().parallaxBackgroundImage ) {
|
||||
|
||||
this.element.style.backgroundImage = 'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")';
|
||||
this.element.style.backgroundSize = this.Reveal.getConfig().parallaxBackgroundSize;
|
||||
this.element.style.backgroundRepeat = this.Reveal.getConfig().parallaxBackgroundRepeat;
|
||||
this.element.style.backgroundPosition = this.Reveal.getConfig().parallaxBackgroundPosition;
|
||||
|
||||
// Make sure the below properties are set on the element - these properties are
|
||||
// needed for proper transitions to be set on the element via CSS. To remove
|
||||
// annoying background slide-in effect when the presentation starts, apply
|
||||
// these properties after short time delay
|
||||
setTimeout( () => {
|
||||
this.Reveal.getRevealElement().classList.add( 'has-parallax-background' );
|
||||
}, 1 );
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
this.element.style.backgroundImage = '';
|
||||
this.Reveal.getRevealElement().classList.remove( 'has-parallax-background' );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a background for the given slide.
|
||||
*
|
||||
* @param {HTMLElement} slide
|
||||
* @param {HTMLElement} container The element that the background
|
||||
* should be appended to
|
||||
* @return {HTMLElement} New background div
|
||||
*/
|
||||
createBackground( slide, container ) {
|
||||
|
||||
// Main slide background element
|
||||
let element = document.createElement( 'div' );
|
||||
element.className = 'slide-background ' + slide.className.replace( /present|past|future/, '' );
|
||||
|
||||
// Inner background element that wraps images/videos/iframes
|
||||
let contentElement = document.createElement( 'div' );
|
||||
contentElement.className = 'slide-background-content';
|
||||
|
||||
element.appendChild( contentElement );
|
||||
container.appendChild( element );
|
||||
|
||||
slide.slideBackgroundElement = element;
|
||||
slide.slideBackgroundContentElement = contentElement;
|
||||
|
||||
// Syncs the background to reflect all current background settings
|
||||
this.sync( slide );
|
||||
|
||||
return element;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders all of the visual properties of a slide background
|
||||
* based on the various background attributes.
|
||||
*
|
||||
* @param {HTMLElement} slide
|
||||
*/
|
||||
sync( slide ) {
|
||||
|
||||
const element = slide.slideBackgroundElement,
|
||||
contentElement = slide.slideBackgroundContentElement;
|
||||
|
||||
const data = {
|
||||
background: slide.getAttribute( 'data-background' ),
|
||||
backgroundSize: slide.getAttribute( 'data-background-size' ),
|
||||
backgroundImage: slide.getAttribute( 'data-background-image' ),
|
||||
backgroundVideo: slide.getAttribute( 'data-background-video' ),
|
||||
backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
|
||||
backgroundColor: slide.getAttribute( 'data-background-color' ),
|
||||
backgroundGradient: slide.getAttribute( 'data-background-gradient' ),
|
||||
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||
backgroundPosition: slide.getAttribute( 'data-background-position' ),
|
||||
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
|
||||
backgroundOpacity: slide.getAttribute( 'data-background-opacity' ),
|
||||
};
|
||||
|
||||
const dataPreload = slide.hasAttribute( 'data-preload' );
|
||||
|
||||
// Reset the prior background state in case this is not the
|
||||
// initial sync
|
||||
slide.classList.remove( 'has-dark-background' );
|
||||
slide.classList.remove( 'has-light-background' );
|
||||
|
||||
element.removeAttribute( 'data-loaded' );
|
||||
element.removeAttribute( 'data-background-hash' );
|
||||
element.removeAttribute( 'data-background-size' );
|
||||
element.removeAttribute( 'data-background-transition' );
|
||||
element.style.backgroundColor = '';
|
||||
|
||||
contentElement.style.backgroundSize = '';
|
||||
contentElement.style.backgroundRepeat = '';
|
||||
contentElement.style.backgroundPosition = '';
|
||||
contentElement.style.backgroundImage = '';
|
||||
contentElement.style.opacity = '';
|
||||
contentElement.innerHTML = '';
|
||||
|
||||
if( data.background ) {
|
||||
// Auto-wrap image urls in url(...)
|
||||
if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test( data.background ) ) {
|
||||
slide.setAttribute( 'data-background-image', data.background );
|
||||
}
|
||||
else {
|
||||
element.style.background = data.background;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a hash for this combination of background settings.
|
||||
// This is used to determine when two slide backgrounds are
|
||||
// the same.
|
||||
if( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
|
||||
element.setAttribute( 'data-background-hash', data.background +
|
||||
data.backgroundSize +
|
||||
data.backgroundImage +
|
||||
data.backgroundVideo +
|
||||
data.backgroundIframe +
|
||||
data.backgroundColor +
|
||||
data.backgroundGradient +
|
||||
data.backgroundRepeat +
|
||||
data.backgroundPosition +
|
||||
data.backgroundTransition +
|
||||
data.backgroundOpacity );
|
||||
}
|
||||
|
||||
// Additional and optional background properties
|
||||
if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
|
||||
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
|
||||
if( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient;
|
||||
if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
|
||||
|
||||
if( dataPreload ) element.setAttribute( 'data-preload', '' );
|
||||
|
||||
// Background image options are set on the content wrapper
|
||||
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
|
||||
if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;
|
||||
if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
|
||||
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
|
||||
// signals if it is light or dark. If the slide has no background
|
||||
// color, no class will be added
|
||||
let contrastColor = slide.getAttribute( 'data-background-color' );
|
||||
|
||||
// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
|
||||
if( !contrastColor || !colorToRgb( contrastColor ) ) {
|
||||
let computedBackgroundStyle = window.getComputedStyle( element );
|
||||
if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
|
||||
contrastColor = computedBackgroundStyle.backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
if( contrastColor ) {
|
||||
const rgb = colorToRgb( contrastColor );
|
||||
|
||||
// Ignore fully transparent backgrounds. Some browsers return
|
||||
// rgba(0,0,0,0) when reading the computed background color of
|
||||
// an element with no background
|
||||
if( rgb && rgb.a !== 0 ) {
|
||||
if( colorBrightness( contrastColor ) < 128 ) {
|
||||
return 'has-dark-background';
|
||||
}
|
||||
else {
|
||||
return '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 );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the background elements to reflect the current
|
||||
* slide.
|
||||
*
|
||||
* @param {boolean} includeAll If true, the backgrounds of
|
||||
* all vertical slides (not just the present) will be updated.
|
||||
*/
|
||||
update( includeAll = false ) {
|
||||
|
||||
let config = this.Reveal.getConfig();
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
let indices = this.Reveal.getIndices();
|
||||
|
||||
let currentBackground = null;
|
||||
|
||||
// Reverse past/future classes when in RTL mode
|
||||
let horizontalPast = config.rtl ? 'future' : 'past',
|
||||
horizontalFuture = config.rtl ? 'past' : 'future';
|
||||
|
||||
// Update the classes of all backgrounds to match the
|
||||
// states of their slides (past/present/future)
|
||||
Array.from( this.element.childNodes ).forEach( ( backgroundh, h ) => {
|
||||
|
||||
backgroundh.classList.remove( 'past', 'present', 'future' );
|
||||
|
||||
if( h < indices.h ) {
|
||||
backgroundh.classList.add( horizontalPast );
|
||||
}
|
||||
else if ( h > indices.h ) {
|
||||
backgroundh.classList.add( horizontalFuture );
|
||||
}
|
||||
else {
|
||||
backgroundh.classList.add( 'present' );
|
||||
|
||||
// Store a reference to the current background element
|
||||
currentBackground = backgroundh;
|
||||
}
|
||||
|
||||
if( includeAll || h === indices.h ) {
|
||||
queryAll( backgroundh, '.slide-background' ).forEach( ( backgroundv, v ) => {
|
||||
|
||||
backgroundv.classList.remove( 'past', 'present', 'future' );
|
||||
|
||||
const indexv = typeof indices.v === 'number' ? indices.v : 0;
|
||||
|
||||
if( v < indexv ) {
|
||||
backgroundv.classList.add( 'past' );
|
||||
}
|
||||
else if ( v > indexv ) {
|
||||
backgroundv.classList.add( 'future' );
|
||||
}
|
||||
else {
|
||||
backgroundv.classList.add( 'present' );
|
||||
|
||||
// Only if this is the present horizontal and vertical slide
|
||||
if( h === indices.h ) currentBackground = backgroundv;
|
||||
}
|
||||
|
||||
} );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// 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 );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Stop content inside of previous backgrounds
|
||||
if( this.previousBackground ) {
|
||||
|
||||
this.Reveal.slideContent.stopEmbeddedContent( this.previousBackground, { unloadIframes: !this.Reveal.slideContent.shouldPreload( this.previousBackground ) } );
|
||||
|
||||
}
|
||||
|
||||
// Start content in the current background
|
||||
if( currentBackground ) {
|
||||
|
||||
this.Reveal.slideContent.startEmbeddedContent( currentBackground );
|
||||
|
||||
let currentBackgroundContent = currentBackground.querySelector( '.slide-background-content' );
|
||||
if( currentBackgroundContent ) {
|
||||
|
||||
let backgroundImageURL = currentBackgroundContent.style.backgroundImage || '';
|
||||
|
||||
// Restart GIFs (doesn't work in Firefox)
|
||||
if( /\.gif/i.test( backgroundImageURL ) ) {
|
||||
currentBackgroundContent.style.backgroundImage = '';
|
||||
window.getComputedStyle( currentBackgroundContent ).opacity;
|
||||
currentBackgroundContent.style.backgroundImage = backgroundImageURL;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.previousBackground = currentBackground;
|
||||
|
||||
}
|
||||
|
||||
// If there's a background brightness flag for this slide,
|
||||
// bubble it to the .reveal container
|
||||
if( currentSlide ) {
|
||||
this.bubbleSlideContrastClassToElement( currentSlide, this.Reveal.getRevealElement() );
|
||||
}
|
||||
|
||||
// Allow the first background to apply without transition
|
||||
setTimeout( () => {
|
||||
this.element.classList.remove( 'no-transition' );
|
||||
}, 10 );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the position of the parallax background based
|
||||
* on the current slide index.
|
||||
*/
|
||||
updateParallax() {
|
||||
|
||||
let indices = this.Reveal.getIndices();
|
||||
|
||||
if( this.Reveal.getConfig().parallaxBackgroundImage ) {
|
||||
|
||||
let horizontalSlides = this.Reveal.getHorizontalSlides(),
|
||||
verticalSlides = this.Reveal.getVerticalSlides();
|
||||
|
||||
let backgroundSize = this.element.style.backgroundSize.split( ' ' ),
|
||||
backgroundWidth, backgroundHeight;
|
||||
|
||||
if( backgroundSize.length === 1 ) {
|
||||
backgroundWidth = backgroundHeight = parseInt( backgroundSize[0], 10 );
|
||||
}
|
||||
else {
|
||||
backgroundWidth = parseInt( backgroundSize[0], 10 );
|
||||
backgroundHeight = parseInt( backgroundSize[1], 10 );
|
||||
}
|
||||
|
||||
let slideWidth = this.element.offsetWidth,
|
||||
horizontalSlideCount = horizontalSlides.length,
|
||||
horizontalOffsetMultiplier,
|
||||
horizontalOffset;
|
||||
|
||||
if( typeof this.Reveal.getConfig().parallaxBackgroundHorizontal === 'number' ) {
|
||||
horizontalOffsetMultiplier = this.Reveal.getConfig().parallaxBackgroundHorizontal;
|
||||
}
|
||||
else {
|
||||
horizontalOffsetMultiplier = horizontalSlideCount > 1 ? ( backgroundWidth - slideWidth ) / ( horizontalSlideCount-1 ) : 0;
|
||||
}
|
||||
|
||||
horizontalOffset = horizontalOffsetMultiplier * indices.h * -1;
|
||||
|
||||
let slideHeight = this.element.offsetHeight,
|
||||
verticalSlideCount = verticalSlides.length,
|
||||
verticalOffsetMultiplier,
|
||||
verticalOffset;
|
||||
|
||||
if( typeof this.Reveal.getConfig().parallaxBackgroundVertical === 'number' ) {
|
||||
verticalOffsetMultiplier = this.Reveal.getConfig().parallaxBackgroundVertical;
|
||||
}
|
||||
else {
|
||||
verticalOffsetMultiplier = ( backgroundHeight - slideHeight ) / ( verticalSlideCount-1 );
|
||||
}
|
||||
|
||||
verticalOffset = verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0;
|
||||
|
||||
this.element.style.backgroundPosition = horizontalOffset + 'px ' + -verticalOffset + 'px';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
279
Praesentation/praes_git_konsole/lib/reveal.js/js/controllers/controls.js
vendored
Normal file
279
Praesentation/praes_git_konsole/lib/reveal.js/js/controllers/controls.js
vendored
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
import { queryAll, enterFullscreen } from '../utils/util.js'
|
||||
import { isAndroid } from '../utils/device.js'
|
||||
|
||||
/**
|
||||
* Manages our presentation controls. This includes both
|
||||
* the built-in control arrows as well as event monitoring
|
||||
* of any elements within the presentation with either of the
|
||||
* following helper classes:
|
||||
* - .navigate-up
|
||||
* - .navigate-right
|
||||
* - .navigate-down
|
||||
* - .navigate-left
|
||||
* - .navigate-next
|
||||
* - .navigate-prev
|
||||
* - .enter-fullscreen
|
||||
*/
|
||||
export default class Controls {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
this.onNavigateLeftClicked = this.onNavigateLeftClicked.bind( this );
|
||||
this.onNavigateRightClicked = this.onNavigateRightClicked.bind( this );
|
||||
this.onNavigateUpClicked = this.onNavigateUpClicked.bind( this );
|
||||
this.onNavigateDownClicked = this.onNavigateDownClicked.bind( this );
|
||||
this.onNavigatePrevClicked = this.onNavigatePrevClicked.bind( this );
|
||||
this.onNavigateNextClicked = this.onNavigateNextClicked.bind( this );
|
||||
this.onEnterFullscreen = this.onEnterFullscreen.bind( this );
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const rtl = this.Reveal.getConfig().rtl;
|
||||
const revealElement = this.Reveal.getRevealElement();
|
||||
|
||||
this.element = document.createElement( 'aside' );
|
||||
this.element.className = 'controls';
|
||||
this.element.innerHTML =
|
||||
`<button class="navigate-left" aria-label="${ rtl ? 'next slide' : 'previous slide' }"><div class="controls-arrow"></div></button>
|
||||
<button class="navigate-right" aria-label="${ rtl ? 'previous slide' : 'next slide' }"><div class="controls-arrow"></div></button>
|
||||
<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>
|
||||
<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>`;
|
||||
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
|
||||
// There can be multiple instances of controls throughout the page
|
||||
this.controlsLeft = queryAll( revealElement, '.navigate-left' );
|
||||
this.controlsRight = queryAll( revealElement, '.navigate-right' );
|
||||
this.controlsUp = queryAll( revealElement, '.navigate-up' );
|
||||
this.controlsDown = queryAll( revealElement, '.navigate-down' );
|
||||
this.controlsPrev = queryAll( revealElement, '.navigate-prev' );
|
||||
this.controlsNext = queryAll( revealElement, '.navigate-next' );
|
||||
this.controlsFullscreen = queryAll( revealElement, '.enter-fullscreen' );
|
||||
|
||||
// The left, right and down arrows in the standard reveal.js controls
|
||||
this.controlsRightArrow = this.element.querySelector( '.navigate-right' );
|
||||
this.controlsLeftArrow = this.element.querySelector( '.navigate-left' );
|
||||
this.controlsDownArrow = this.element.querySelector( '.navigate-down' );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
this.element.style.display = config.controls ? 'block' : 'none';
|
||||
|
||||
this.element.setAttribute( 'data-controls-layout', config.controlsLayout );
|
||||
this.element.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
|
||||
|
||||
}
|
||||
|
||||
bind() {
|
||||
|
||||
// Listen to both touch and click events, in case the device
|
||||
// supports both
|
||||
let pointerEvents = [ 'touchstart', 'click' ];
|
||||
|
||||
// Only support touch for Android, fixes double navigations in
|
||||
// stock browser
|
||||
if( isAndroid ) {
|
||||
pointerEvents = [ 'touchstart' ];
|
||||
}
|
||||
|
||||
pointerEvents.forEach( eventName => {
|
||||
this.controlsLeft.forEach( el => el.addEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
||||
this.controlsRight.forEach( el => el.addEventListener( eventName, this.onNavigateRightClicked, false ) );
|
||||
this.controlsUp.forEach( el => el.addEventListener( eventName, this.onNavigateUpClicked, false ) );
|
||||
this.controlsDown.forEach( el => el.addEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||||
this.controlsPrev.forEach( el => el.addEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||||
this.controlsNext.forEach( el => el.addEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||||
this.controlsFullscreen.forEach( el => el.addEventListener( eventName, this.onEnterFullscreen, false ) );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
unbind() {
|
||||
|
||||
[ 'touchstart', 'click' ].forEach( eventName => {
|
||||
this.controlsLeft.forEach( el => el.removeEventListener( eventName, this.onNavigateLeftClicked, false ) );
|
||||
this.controlsRight.forEach( el => el.removeEventListener( eventName, this.onNavigateRightClicked, false ) );
|
||||
this.controlsUp.forEach( el => el.removeEventListener( eventName, this.onNavigateUpClicked, false ) );
|
||||
this.controlsDown.forEach( el => el.removeEventListener( eventName, this.onNavigateDownClicked, false ) );
|
||||
this.controlsPrev.forEach( el => el.removeEventListener( eventName, this.onNavigatePrevClicked, false ) );
|
||||
this.controlsNext.forEach( el => el.removeEventListener( eventName, this.onNavigateNextClicked, false ) );
|
||||
this.controlsFullscreen.forEach( el => el.removeEventListener( eventName, this.onEnterFullscreen, false ) );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the state of all control/navigation arrows.
|
||||
*/
|
||||
update() {
|
||||
|
||||
let routes = this.Reveal.availableRoutes();
|
||||
|
||||
// Remove the 'enabled' class from all directions
|
||||
[...this.controlsLeft, ...this.controlsRight, ...this.controlsUp, ...this.controlsDown, ...this.controlsPrev, ...this.controlsNext].forEach( node => {
|
||||
node.classList.remove( 'enabled', 'fragmented' );
|
||||
|
||||
// Set 'disabled' attribute on all directions
|
||||
node.setAttribute( 'disabled', 'disabled' );
|
||||
} );
|
||||
|
||||
// Add the 'enabled' class to the available routes; remove 'disabled' attribute to enable buttons
|
||||
if( routes.left ) this.controlsLeft.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
if( routes.right ) this.controlsRight.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
if( routes.up ) this.controlsUp.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
if( routes.down ) this.controlsDown.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
|
||||
// Prev/next buttons
|
||||
if( routes.left || routes.up ) this.controlsPrev.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
if( routes.right || routes.down ) this.controlsNext.forEach( el => { el.classList.add( 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
|
||||
// Highlight fragment directions
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
if( currentSlide ) {
|
||||
|
||||
let fragmentsRoutes = this.Reveal.fragments.availableRoutes();
|
||||
|
||||
// Always apply fragment decorator to prev/next buttons
|
||||
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' ); } );
|
||||
|
||||
// Apply fragment decorators to directional buttons based on
|
||||
// what slide axis they are in
|
||||
if( this.Reveal.isVerticalSlide( currentSlide ) ) {
|
||||
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' ); } );
|
||||
}
|
||||
else {
|
||||
if( fragmentsRoutes.prev ) this.controlsLeft.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
if( fragmentsRoutes.next ) this.controlsRight.forEach( el => { el.classList.add( 'fragmented', 'enabled' ); el.removeAttribute( 'disabled' ); } );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if( this.Reveal.getConfig().controlsTutorial ) {
|
||||
|
||||
let indices = this.Reveal.getIndices();
|
||||
|
||||
// Highlight control arrows with an animation to ensure
|
||||
// that the viewer knows how to navigate
|
||||
if( !this.Reveal.hasNavigatedVertically() && routes.down ) {
|
||||
this.controlsDownArrow.classList.add( 'highlight' );
|
||||
}
|
||||
else {
|
||||
this.controlsDownArrow.classList.remove( 'highlight' );
|
||||
|
||||
if( this.Reveal.getConfig().rtl ) {
|
||||
|
||||
if( !this.Reveal.hasNavigatedHorizontally() && routes.left && indices.v === 0 ) {
|
||||
this.controlsLeftArrow.classList.add( 'highlight' );
|
||||
}
|
||||
else {
|
||||
this.controlsLeftArrow.classList.remove( 'highlight' );
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if( !this.Reveal.hasNavigatedHorizontally() && routes.right && indices.v === 0 ) {
|
||||
this.controlsRightArrow.classList.add( 'highlight' );
|
||||
}
|
||||
else {
|
||||
this.controlsRightArrow.classList.remove( 'highlight' );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.unbind();
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handlers for navigation control buttons.
|
||||
*/
|
||||
onNavigateLeftClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
if( this.Reveal.getConfig().navigationMode === 'linear' ) {
|
||||
this.Reveal.prev();
|
||||
}
|
||||
else {
|
||||
this.Reveal.left();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onNavigateRightClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
if( this.Reveal.getConfig().navigationMode === 'linear' ) {
|
||||
this.Reveal.next();
|
||||
}
|
||||
else {
|
||||
this.Reveal.right();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onNavigateUpClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
this.Reveal.up();
|
||||
|
||||
}
|
||||
|
||||
onNavigateDownClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
this.Reveal.down();
|
||||
|
||||
}
|
||||
|
||||
onNavigatePrevClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
this.Reveal.prev();
|
||||
|
||||
}
|
||||
|
||||
onNavigateNextClicked( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
this.Reveal.onUserInput();
|
||||
|
||||
this.Reveal.next();
|
||||
|
||||
}
|
||||
|
||||
onEnterFullscreen( event ) {
|
||||
|
||||
const config = this.Reveal.getConfig();
|
||||
const viewport = this.Reveal.getViewportElement();
|
||||
|
||||
enterFullscreen( config.embedded ? viewport : viewport.parentElement );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import { closest } from '../utils/util.js'
|
||||
|
||||
/**
|
||||
* Manages focus when a presentation is embedded. This
|
||||
* helps us only capture keyboard from the presentation
|
||||
* a user is currently interacting with in a page where
|
||||
* multiple presentations are embedded.
|
||||
*/
|
||||
|
||||
const STATE_FOCUS = 'focus';
|
||||
const STATE_BLUR = 'blur';
|
||||
|
||||
export default class Focus {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
this.onRevealPointerDown = this.onRevealPointerDown.bind( this );
|
||||
this.onDocumentPointerDown = this.onDocumentPointerDown.bind( this );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
if( config.embedded ) {
|
||||
this.blur();
|
||||
}
|
||||
else {
|
||||
this.focus();
|
||||
this.unbind();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
bind() {
|
||||
|
||||
if( this.Reveal.getConfig().embedded ) {
|
||||
this.Reveal.getRevealElement().addEventListener( 'pointerdown', this.onRevealPointerDown, false );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
unbind() {
|
||||
|
||||
this.Reveal.getRevealElement().removeEventListener( 'pointerdown', this.onRevealPointerDown, false );
|
||||
document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );
|
||||
|
||||
}
|
||||
|
||||
focus() {
|
||||
|
||||
if( this.state !== STATE_FOCUS ) {
|
||||
this.Reveal.getRevealElement().classList.add( 'focused' );
|
||||
document.addEventListener( 'pointerdown', this.onDocumentPointerDown, false );
|
||||
}
|
||||
|
||||
this.state = STATE_FOCUS;
|
||||
|
||||
}
|
||||
|
||||
blur() {
|
||||
|
||||
if( this.state !== STATE_BLUR ) {
|
||||
this.Reveal.getRevealElement().classList.remove( 'focused' );
|
||||
document.removeEventListener( 'pointerdown', this.onDocumentPointerDown, false );
|
||||
}
|
||||
|
||||
this.state = STATE_BLUR;
|
||||
|
||||
}
|
||||
|
||||
isFocused() {
|
||||
|
||||
return this.state === STATE_FOCUS;
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.Reveal.getRevealElement().classList.remove( 'focused' );
|
||||
|
||||
}
|
||||
|
||||
onRevealPointerDown( event ) {
|
||||
|
||||
this.focus();
|
||||
|
||||
}
|
||||
|
||||
onDocumentPointerDown( event ) {
|
||||
|
||||
let revealElement = closest( event.target, '.reveal' );
|
||||
if( !revealElement || revealElement !== this.Reveal.getRevealElement() ) {
|
||||
this.blur();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,375 @@
|
|||
import { extend, queryAll } from '../utils/util.js'
|
||||
|
||||
/**
|
||||
* Handles sorting and navigation of slide fragments.
|
||||
* Fragments are elements within a slide that are
|
||||
* revealed/animated incrementally.
|
||||
*/
|
||||
export default class Fragments {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
if( config.fragments === false ) {
|
||||
this.disable();
|
||||
}
|
||||
else if( oldConfig.fragments === false ) {
|
||||
this.enable();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* If fragments are disabled in the deck, they should all be
|
||||
* visible rather than stepped through.
|
||||
*/
|
||||
disable() {
|
||||
|
||||
queryAll( this.Reveal.getSlidesElement(), '.fragment' ).forEach( element => {
|
||||
element.classList.add( 'visible' );
|
||||
element.classList.remove( 'current-fragment' );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse of #disable(). Only called if fragments have
|
||||
* previously been disabled.
|
||||
*/
|
||||
enable() {
|
||||
|
||||
queryAll( this.Reveal.getSlidesElement(), '.fragment' ).forEach( element => {
|
||||
element.classList.remove( 'visible' );
|
||||
element.classList.remove( 'current-fragment' );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an object describing the available fragment
|
||||
* directions.
|
||||
*
|
||||
* @return {{prev: boolean, next: boolean}}
|
||||
*/
|
||||
availableRoutes() {
|
||||
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
if( currentSlide && this.Reveal.getConfig().fragments ) {
|
||||
let fragments = currentSlide.querySelectorAll( '.fragment:not(.disabled)' );
|
||||
let hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.disabled):not(.visible)' );
|
||||
|
||||
return {
|
||||
prev: fragments.length - hiddenFragments.length > 0,
|
||||
next: !!hiddenFragments.length
|
||||
};
|
||||
}
|
||||
else {
|
||||
return { prev: false, next: false };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a sorted fragments list, ordered by an increasing
|
||||
* "data-fragment-index" attribute.
|
||||
*
|
||||
* Fragments will be revealed in the order that they are returned by
|
||||
* this function, so you can use the index attributes to control the
|
||||
* order of fragment appearance.
|
||||
*
|
||||
* To maintain a sensible default fragment order, fragments are presumed
|
||||
* to be passed in document order. This function adds a "fragment-index"
|
||||
* attribute to each node if such an attribute is not already present,
|
||||
* and sets that attribute to an integer value which is the position of
|
||||
* the fragment within the fragments list.
|
||||
*
|
||||
* @param {object[]|*} fragments
|
||||
* @param {boolean} grouped If true the returned array will contain
|
||||
* nested arrays for all fragments with the same index
|
||||
* @return {object[]} sorted Sorted array of fragments
|
||||
*/
|
||||
sort( fragments, grouped = false ) {
|
||||
|
||||
fragments = Array.from( fragments );
|
||||
|
||||
let ordered = [],
|
||||
unordered = [],
|
||||
sorted = [];
|
||||
|
||||
// Group ordered and unordered elements
|
||||
fragments.forEach( fragment => {
|
||||
if( fragment.hasAttribute( 'data-fragment-index' ) ) {
|
||||
let index = parseInt( fragment.getAttribute( 'data-fragment-index' ), 10 );
|
||||
|
||||
if( !ordered[index] ) {
|
||||
ordered[index] = [];
|
||||
}
|
||||
|
||||
ordered[index].push( fragment );
|
||||
}
|
||||
else {
|
||||
unordered.push( [ fragment ] );
|
||||
}
|
||||
} );
|
||||
|
||||
// Append fragments without explicit indices in their
|
||||
// DOM order
|
||||
ordered = ordered.concat( unordered );
|
||||
|
||||
// Manually count the index up per group to ensure there
|
||||
// are no gaps
|
||||
let index = 0;
|
||||
|
||||
// Push all fragments in their sorted order to an array,
|
||||
// this flattens the groups
|
||||
ordered.forEach( group => {
|
||||
group.forEach( fragment => {
|
||||
sorted.push( fragment );
|
||||
fragment.setAttribute( 'data-fragment-index', index );
|
||||
} );
|
||||
|
||||
index ++;
|
||||
} );
|
||||
|
||||
return grouped === true ? ordered : sorted;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Sorts and formats all of fragments in the
|
||||
* presentation.
|
||||
*/
|
||||
sortAll() {
|
||||
|
||||
this.Reveal.getHorizontalSlides().forEach( horizontalSlide => {
|
||||
|
||||
let verticalSlides = queryAll( horizontalSlide, 'section' );
|
||||
verticalSlides.forEach( ( verticalSlide, y ) => {
|
||||
|
||||
this.sort( verticalSlide.querySelectorAll( '.fragment' ) );
|
||||
|
||||
}, this );
|
||||
|
||||
if( verticalSlides.length === 0 ) this.sort( horizontalSlide.querySelectorAll( '.fragment' ) );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Refreshes the fragments on the current slide so that they
|
||||
* have the appropriate classes (.visible + .current-fragment).
|
||||
*
|
||||
* @param {number} [index] The index of the current fragment
|
||||
* @param {array} [fragments] Array containing all fragments
|
||||
* in the current slide
|
||||
*
|
||||
* @return {{shown: array, hidden: array}}
|
||||
*/
|
||||
update( index, fragments, slide = this.Reveal.getCurrentSlide() ) {
|
||||
|
||||
let changedFragments = {
|
||||
shown: [],
|
||||
hidden: []
|
||||
};
|
||||
|
||||
if( slide && this.Reveal.getConfig().fragments ) {
|
||||
|
||||
fragments = fragments || this.sort( slide.querySelectorAll( '.fragment' ) );
|
||||
|
||||
if( fragments.length ) {
|
||||
|
||||
let maxIndex = 0;
|
||||
|
||||
if( typeof index !== 'number' ) {
|
||||
let currentFragment = this.sort( slide.querySelectorAll( '.fragment.visible' ) ).pop();
|
||||
if( currentFragment ) {
|
||||
index = parseInt( currentFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
|
||||
}
|
||||
}
|
||||
|
||||
Array.from( fragments ).forEach( ( el, i ) => {
|
||||
|
||||
if( el.hasAttribute( 'data-fragment-index' ) ) {
|
||||
i = parseInt( el.getAttribute( 'data-fragment-index' ), 10 );
|
||||
}
|
||||
|
||||
maxIndex = Math.max( maxIndex, i );
|
||||
|
||||
// Visible fragments
|
||||
if( i <= index ) {
|
||||
let wasVisible = el.classList.contains( 'visible' )
|
||||
el.classList.add( 'visible' );
|
||||
el.classList.remove( 'current-fragment' );
|
||||
|
||||
if( i === index ) {
|
||||
// Announce the fragments one by one to the Screen Reader
|
||||
this.Reveal.announceStatus( this.Reveal.getStatusText( el ) );
|
||||
|
||||
el.classList.add( 'current-fragment' );
|
||||
this.Reveal.slideContent.startEmbeddedContent( el );
|
||||
}
|
||||
|
||||
if( !wasVisible ) {
|
||||
changedFragments.shown.push( el )
|
||||
this.Reveal.dispatchEvent({
|
||||
target: el,
|
||||
type: 'visible',
|
||||
bubbles: false
|
||||
});
|
||||
}
|
||||
}
|
||||
// Hidden fragments
|
||||
else {
|
||||
let wasVisible = el.classList.contains( 'visible' )
|
||||
el.classList.remove( 'visible' );
|
||||
el.classList.remove( 'current-fragment' );
|
||||
|
||||
if( wasVisible ) {
|
||||
this.Reveal.slideContent.stopEmbeddedContent( el );
|
||||
changedFragments.hidden.push( el );
|
||||
this.Reveal.dispatchEvent({
|
||||
target: el,
|
||||
type: 'hidden',
|
||||
bubbles: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
// Write the current fragment index to the slide <section>.
|
||||
// This can be used by end users to apply styles based on
|
||||
// the current fragment index.
|
||||
index = typeof index === 'number' ? index : -1;
|
||||
index = Math.max( Math.min( index, maxIndex ), -1 );
|
||||
slide.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;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats the fragments on the given slide so that they have
|
||||
* valid indices. Call this if fragments are changed in the DOM
|
||||
* after reveal.js has already initialized.
|
||||
*
|
||||
* @param {HTMLElement} slide
|
||||
* @return {Array} a list of the HTML fragments that were synced
|
||||
*/
|
||||
sync( slide = this.Reveal.getCurrentSlide() ) {
|
||||
|
||||
return this.sort( slide.querySelectorAll( '.fragment' ) );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to the specified slide fragment.
|
||||
*
|
||||
* @param {?number} index The index of the fragment that
|
||||
* should be shown, -1 means all are invisible
|
||||
* @param {number} offset Integer offset to apply to the
|
||||
* fragment index
|
||||
*
|
||||
* @return {boolean} true if a change was made in any
|
||||
* fragments visibility as part of this call
|
||||
*/
|
||||
goto( index, offset = 0 ) {
|
||||
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
if( currentSlide && this.Reveal.getConfig().fragments ) {
|
||||
|
||||
let fragments = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled)' ) );
|
||||
if( fragments.length ) {
|
||||
|
||||
// If no index is specified, find the current
|
||||
if( typeof index !== 'number' ) {
|
||||
let lastVisibleFragment = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled).visible' ) ).pop();
|
||||
|
||||
if( lastVisibleFragment ) {
|
||||
index = parseInt( lastVisibleFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );
|
||||
}
|
||||
else {
|
||||
index = -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the offset if there is one
|
||||
index += offset;
|
||||
|
||||
let changedFragments = this.update( index, fragments );
|
||||
|
||||
this.Reveal.controls.update();
|
||||
this.Reveal.progress.update();
|
||||
|
||||
if( this.Reveal.getConfig().fragmentInURL ) {
|
||||
this.Reveal.location.writeURL();
|
||||
}
|
||||
|
||||
return !!( changedFragments.shown.length || changedFragments.hidden.length );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to the next slide fragment.
|
||||
*
|
||||
* @return {boolean} true if there was a next fragment,
|
||||
* false otherwise
|
||||
*/
|
||||
next() {
|
||||
|
||||
return this.goto( null, 1 );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to the previous slide fragment.
|
||||
*
|
||||
* @return {boolean} true if there was a previous fragment,
|
||||
* false otherwise
|
||||
*/
|
||||
prev() {
|
||||
|
||||
return this.goto( null, -1 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
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 mumber
|
||||
// (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 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
import { enterFullscreen } from '../utils/util.js'
|
||||
|
||||
/**
|
||||
* Handles all reveal.js keyboard interactions.
|
||||
*/
|
||||
export default class Keyboard {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
// A key:value map of keyboard keys and descriptions of
|
||||
// the actions they trigger
|
||||
this.shortcuts = {};
|
||||
|
||||
// Holds custom key code mappings
|
||||
this.bindings = {};
|
||||
|
||||
this.onDocumentKeyDown = this.onDocumentKeyDown.bind( this );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
if( config.navigationMode === 'linear' ) {
|
||||
this.shortcuts['→ , ↓ , SPACE , N , L , J'] = 'Next slide';
|
||||
this.shortcuts['← , ↑ , P , H , K'] = 'Previous slide';
|
||||
}
|
||||
else {
|
||||
this.shortcuts['N , SPACE'] = 'Next slide';
|
||||
this.shortcuts['P , Shift SPACE'] = 'Previous slide';
|
||||
this.shortcuts['← , H'] = 'Navigate left';
|
||||
this.shortcuts['→ , L'] = 'Navigate right';
|
||||
this.shortcuts['↑ , K'] = 'Navigate up';
|
||||
this.shortcuts['↓ , J'] = 'Navigate down';
|
||||
}
|
||||
|
||||
this.shortcuts['Alt + ←/↑/→/↓'] = 'Navigate without fragments';
|
||||
this.shortcuts['Shift + ←/↑/→/↓'] = 'Jump to first/last slide';
|
||||
this.shortcuts['B , .'] = 'Pause';
|
||||
this.shortcuts['F'] = 'Fullscreen';
|
||||
this.shortcuts['G'] = 'Jump to slide';
|
||||
this.shortcuts['ESC, O'] = 'Slide overview';
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts listening for keyboard events.
|
||||
*/
|
||||
bind() {
|
||||
|
||||
document.addEventListener( 'keydown', this.onDocumentKeyDown, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops listening for keyboard events.
|
||||
*/
|
||||
unbind() {
|
||||
|
||||
document.removeEventListener( 'keydown', this.onDocumentKeyDown, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a custom key binding with optional description to
|
||||
* be added to the help screen.
|
||||
*/
|
||||
addKeyBinding( binding, callback ) {
|
||||
|
||||
if( typeof binding === 'object' && binding.keyCode ) {
|
||||
this.bindings[binding.keyCode] = {
|
||||
callback: callback,
|
||||
key: binding.key,
|
||||
description: binding.description
|
||||
};
|
||||
}
|
||||
else {
|
||||
this.bindings[binding] = {
|
||||
callback: callback,
|
||||
key: null,
|
||||
description: null
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the specified custom key binding.
|
||||
*/
|
||||
removeKeyBinding( keyCode ) {
|
||||
|
||||
delete this.bindings[keyCode];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Programmatically triggers a keyboard event
|
||||
*
|
||||
* @param {int} keyCode
|
||||
*/
|
||||
triggerKey( keyCode ) {
|
||||
|
||||
this.onDocumentKeyDown( { keyCode } );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a new shortcut to include in the help overlay
|
||||
*
|
||||
* @param {String} key
|
||||
* @param {String} value
|
||||
*/
|
||||
registerKeyboardShortcut( key, value ) {
|
||||
|
||||
this.shortcuts[key] = value;
|
||||
|
||||
}
|
||||
|
||||
getShortcuts() {
|
||||
|
||||
return this.shortcuts;
|
||||
|
||||
}
|
||||
|
||||
getBindings() {
|
||||
|
||||
return this.bindings;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for the document level 'keydown' event.
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onDocumentKeyDown( event ) {
|
||||
|
||||
let config = this.Reveal.getConfig();
|
||||
|
||||
// If there's a condition specified and it returns false,
|
||||
// ignore this event
|
||||
if( typeof config.keyboardCondition === 'function' && config.keyboardCondition(event) === false ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// If keyboardCondition is set, only capture keyboard events
|
||||
// for embedded decks when they are focused
|
||||
if( config.keyboardCondition === 'focused' && !this.Reveal.isFocused() ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Shorthand
|
||||
let keyCode = event.keyCode;
|
||||
|
||||
// Remember if auto-sliding was paused so we can toggle it
|
||||
let autoSlideWasPaused = !this.Reveal.isAutoSliding();
|
||||
|
||||
this.Reveal.onUserInput( event );
|
||||
|
||||
// Is there a focused element that could be using the keyboard?
|
||||
let activeElementIsCE = document.activeElement && document.activeElement.isContentEditable === true;
|
||||
let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
|
||||
let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
|
||||
|
||||
// Whitelist certain modifiers for slide navigation shortcuts
|
||||
let keyCodeUsesModifier = [32, 37, 38, 39, 40, 63, 78, 80, 191].indexOf( event.keyCode ) !== -1;
|
||||
|
||||
// Prevent all other events when a modifier is pressed
|
||||
let unusedModifier = !( keyCodeUsesModifier && event.shiftKey || event.altKey ) &&
|
||||
( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
|
||||
|
||||
// Disregard the event if there's a focused element or a
|
||||
// keyboard modifier key is present
|
||||
if( activeElementIsCE || activeElementIsInput || activeElementIsNotes || unusedModifier ) return;
|
||||
|
||||
// While paused only allow resume keyboard events; 'b', 'v', '.'
|
||||
let resumeKeyCodes = [66,86,190,191,112];
|
||||
let key;
|
||||
|
||||
// Custom key bindings for togglePause should be able to resume
|
||||
if( typeof config.keyboard === 'object' ) {
|
||||
for( key in config.keyboard ) {
|
||||
if( config.keyboard[key] === 'togglePause' ) {
|
||||
resumeKeyCodes.push( parseInt( key, 10 ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if( this.Reveal.isPaused() && resumeKeyCodes.indexOf( keyCode ) === -1 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Use linear navigation if we're configured to OR if
|
||||
// the presentation is one-dimensional
|
||||
let useLinearMode = config.navigationMode === 'linear' || !this.Reveal.hasHorizontalSlides() || !this.Reveal.hasVerticalSlides();
|
||||
|
||||
let triggered = false;
|
||||
|
||||
// 1. User defined key bindings
|
||||
if( typeof config.keyboard === 'object' ) {
|
||||
|
||||
for( key in config.keyboard ) {
|
||||
|
||||
// Check if this binding matches the pressed key
|
||||
if( parseInt( key, 10 ) === keyCode ) {
|
||||
|
||||
let value = config.keyboard[ key ];
|
||||
|
||||
// Callback function
|
||||
if( typeof value === 'function' ) {
|
||||
value.apply( null, [ event ] );
|
||||
}
|
||||
// String shortcuts to reveal.js API
|
||||
else if( typeof value === 'string' && typeof this.Reveal[ value ] === 'function' ) {
|
||||
this.Reveal[ value ].call();
|
||||
}
|
||||
|
||||
triggered = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 2. Registered custom key bindings
|
||||
if( triggered === false ) {
|
||||
|
||||
for( key in this.bindings ) {
|
||||
|
||||
// Check if this binding matches the pressed key
|
||||
if( parseInt( key, 10 ) === keyCode ) {
|
||||
|
||||
let action = this.bindings[ key ].callback;
|
||||
|
||||
// Callback function
|
||||
if( typeof action === 'function' ) {
|
||||
action.apply( null, [ event ] );
|
||||
}
|
||||
// String shortcuts to reveal.js API
|
||||
else if( typeof action === 'string' && typeof this.Reveal[ action ] === 'function' ) {
|
||||
this.Reveal[ action ].call();
|
||||
}
|
||||
|
||||
triggered = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. System defined key bindings
|
||||
if( triggered === false ) {
|
||||
|
||||
// Assume true and try to prove false
|
||||
triggered = true;
|
||||
|
||||
// P, PAGE UP
|
||||
if( keyCode === 80 || keyCode === 33 ) {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
// N, PAGE DOWN
|
||||
else if( keyCode === 78 || keyCode === 34 ) {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
// H, LEFT
|
||||
else if( keyCode === 72 || keyCode === 37 ) {
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( 0 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
if( config.rtl ) {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.Reveal.left({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// L, RIGHT
|
||||
else if( keyCode === 76 || keyCode === 39 ) {
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
if( config.rtl ) {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.Reveal.right({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// K, UP
|
||||
else if( keyCode === 75 || keyCode === 38 ) {
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( undefined, 0 );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.up({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// J, DOWN
|
||||
else if( keyCode === 74 || keyCode === 40 ) {
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.slide( undefined, Number.MAX_VALUE );
|
||||
}
|
||||
else if( !this.Reveal.overview.isActive() && useLinearMode ) {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.down({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// HOME
|
||||
else if( keyCode === 36 ) {
|
||||
this.Reveal.slide( 0 );
|
||||
}
|
||||
// END
|
||||
else if( keyCode === 35 ) {
|
||||
this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
|
||||
}
|
||||
// SPACE
|
||||
else if( keyCode === 32 ) {
|
||||
if( this.Reveal.overview.isActive() ) {
|
||||
this.Reveal.overview.deactivate();
|
||||
}
|
||||
if( event.shiftKey ) {
|
||||
this.Reveal.prev({skipFragments: event.altKey});
|
||||
}
|
||||
else {
|
||||
this.Reveal.next({skipFragments: event.altKey});
|
||||
}
|
||||
}
|
||||
// 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 ) ) {
|
||||
this.Reveal.togglePause();
|
||||
}
|
||||
// F
|
||||
else if( keyCode === 70 ) {
|
||||
enterFullscreen( config.embedded ? this.Reveal.getViewportElement() : document.documentElement );
|
||||
}
|
||||
// A
|
||||
else if( keyCode === 65 ) {
|
||||
if( config.autoSlideStoppable ) {
|
||||
this.Reveal.toggleAutoSlide( autoSlideWasPaused );
|
||||
}
|
||||
}
|
||||
// G
|
||||
else if( keyCode === 71 ) {
|
||||
if( config.jumpToSlide ) {
|
||||
this.Reveal.toggleJumpToSlide();
|
||||
}
|
||||
}
|
||||
// ?
|
||||
else if( ( keyCode === 63 || keyCode === 191 ) && event.shiftKey ) {
|
||||
this.Reveal.toggleHelp();
|
||||
}
|
||||
// F1
|
||||
else if( keyCode === 112 ) {
|
||||
this.Reveal.toggleHelp();
|
||||
}
|
||||
else {
|
||||
triggered = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// If the input resulted in a triggered action we should prevent
|
||||
// the browsers default behavior
|
||||
if( triggered ) {
|
||||
event.preventDefault && event.preventDefault();
|
||||
}
|
||||
// ESC or O key
|
||||
else if( keyCode === 27 || keyCode === 79 ) {
|
||||
if( this.Reveal.closeOverlay() === false ) {
|
||||
this.Reveal.overview.toggle();
|
||||
}
|
||||
|
||||
event.preventDefault && event.preventDefault();
|
||||
}
|
||||
|
||||
// If auto-sliding is enabled we need to cue up
|
||||
// another timeout
|
||||
this.Reveal.cueAutoSlide();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
/**
|
||||
* Reads and writes the URL based on reveal.js' current state.
|
||||
*/
|
||||
export default class Location {
|
||||
|
||||
// The minimum number of milliseconds that must pass between
|
||||
// calls to history.replaceState
|
||||
MAX_REPLACE_STATE_FREQUENCY = 1000
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
// Delays updates to the URL due to a Chrome thumbnailer bug
|
||||
this.writeURLTimeout = 0;
|
||||
|
||||
this.replaceStateTimestamp = 0;
|
||||
|
||||
this.onWindowHashChange = this.onWindowHashChange.bind( this );
|
||||
|
||||
}
|
||||
|
||||
bind() {
|
||||
|
||||
window.addEventListener( 'hashchange', this.onWindowHashChange, false );
|
||||
|
||||
}
|
||||
|
||||
unbind() {
|
||||
|
||||
window.removeEventListener( 'hashchange', this.onWindowHashChange, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the slide indices for the given hash link.
|
||||
*
|
||||
* @param {string} [hash] the hash string that we want to
|
||||
* find the indices for
|
||||
*
|
||||
* @returns slide indices or null
|
||||
*/
|
||||
getIndicesFromHash( hash=window.location.hash, options={} ) {
|
||||
|
||||
// Attempt to parse the hash as either an index or name
|
||||
let name = hash.replace( /^#\/?/, '' );
|
||||
let bits = name.split( '/' );
|
||||
|
||||
// If the first bit is not fully numeric and there is a name we
|
||||
// can assume that this is a named link
|
||||
if( !/^[0-9]*$/.test( bits[0] ) && name.length ) {
|
||||
let slide;
|
||||
|
||||
let f;
|
||||
|
||||
// Parse named links with fragments (#/named-link/2)
|
||||
if( /\/[-\d]+$/g.test( name ) ) {
|
||||
f = parseInt( name.split( '/' ).pop(), 10 );
|
||||
f = isNaN(f) ? undefined : f;
|
||||
name = name.split( '/' ).shift();
|
||||
}
|
||||
|
||||
// Ensure the named link is a valid HTML ID attribute
|
||||
try {
|
||||
slide = document
|
||||
.getElementById( decodeURIComponent( name ) )
|
||||
.closest('.slides section');
|
||||
}
|
||||
catch ( error ) { }
|
||||
|
||||
if( slide ) {
|
||||
return { ...this.Reveal.getIndices( slide ), f };
|
||||
}
|
||||
}
|
||||
else {
|
||||
const config = this.Reveal.getConfig();
|
||||
let hashIndexBase = config.hashOneBasedIndex || options.oneBasedIndex ? 1 : 0;
|
||||
|
||||
// Read the index components of the hash
|
||||
let h = ( parseInt( bits[0], 10 ) - hashIndexBase ) || 0,
|
||||
v = ( parseInt( bits[1], 10 ) - hashIndexBase ) || 0,
|
||||
f;
|
||||
|
||||
if( config.fragmentInURL ) {
|
||||
f = parseInt( bits[2], 10 );
|
||||
if( isNaN( f ) ) {
|
||||
f = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
return { h, v, f };
|
||||
}
|
||||
|
||||
// The hash couldn't be parsed or no matching named link was found
|
||||
return null
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the current URL (hash) and navigates accordingly.
|
||||
*/
|
||||
readURL() {
|
||||
|
||||
const currentIndices = this.Reveal.getIndices();
|
||||
const newIndices = this.getIndicesFromHash();
|
||||
|
||||
if( newIndices ) {
|
||||
if( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {
|
||||
this.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );
|
||||
}
|
||||
}
|
||||
// If no new indices are available, we're trying to navigate to
|
||||
// a slide hash that does not exist
|
||||
else {
|
||||
this.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the page URL (hash) to reflect the current
|
||||
* state.
|
||||
*
|
||||
* @param {number} delay The time in ms to wait before
|
||||
* writing the hash
|
||||
*/
|
||||
writeURL( delay ) {
|
||||
|
||||
let config = this.Reveal.getConfig();
|
||||
let currentSlide = this.Reveal.getCurrentSlide();
|
||||
|
||||
// Make sure there's never more than one timeout running
|
||||
clearTimeout( this.writeURLTimeout );
|
||||
|
||||
// If a delay is specified, timeout this call
|
||||
if( typeof delay === 'number' ) {
|
||||
this.writeURLTimeout = setTimeout( this.writeURL, delay );
|
||||
}
|
||||
else if( currentSlide ) {
|
||||
|
||||
let hash = this.getHash();
|
||||
|
||||
// If we're configured to push to history OR the history
|
||||
// API is not available.
|
||||
if( config.history ) {
|
||||
window.location.hash = hash;
|
||||
}
|
||||
// If we're configured to reflect the current slide in the
|
||||
// URL without pushing to history.
|
||||
else if( config.hash ) {
|
||||
// If the hash is empty, don't add it to the URL
|
||||
if( hash === '/' ) {
|
||||
this.debouncedReplaceState( window.location.pathname + window.location.search );
|
||||
}
|
||||
else {
|
||||
this.debouncedReplaceState( '#' + hash );
|
||||
}
|
||||
}
|
||||
// UPDATE: The below nuking of all hash changes breaks
|
||||
// anchors on pages where reveal.js is running. Removed
|
||||
// in 4.0. Why was it here in the first place? ¯\_(ツ)_/¯
|
||||
//
|
||||
// If history and hash are both disabled, a hash may still
|
||||
// be added to the URL by clicking on a href with a hash
|
||||
// target. Counter this by always removing the hash.
|
||||
// else {
|
||||
// window.history.replaceState( null, null, window.location.pathname + window.location.search );
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
replaceState( url ) {
|
||||
|
||||
window.history.replaceState( null, null, url );
|
||||
this.replaceStateTimestamp = Date.now();
|
||||
|
||||
}
|
||||
|
||||
debouncedReplaceState( url ) {
|
||||
|
||||
clearTimeout( this.replaceStateTimeout );
|
||||
|
||||
if( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {
|
||||
this.replaceState( url );
|
||||
}
|
||||
else {
|
||||
this.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a hash URL that will resolve to the given slide location.
|
||||
*
|
||||
* @param {HTMLElement} [slide=currentSlide] The slide to link to
|
||||
*/
|
||||
getHash( slide ) {
|
||||
|
||||
let url = '/';
|
||||
|
||||
// Attempt to create a named link based on the slide's ID
|
||||
let s = slide || this.Reveal.getCurrentSlide();
|
||||
let id = s ? s.getAttribute( 'id' ) : null;
|
||||
if( id ) {
|
||||
id = encodeURIComponent( id );
|
||||
}
|
||||
|
||||
let index = this.Reveal.getIndices( slide );
|
||||
if( !this.Reveal.getConfig().fragmentInURL ) {
|
||||
index.f = undefined;
|
||||
}
|
||||
|
||||
// If the current slide has an ID, use that as a named link,
|
||||
// but we don't support named links with a fragment index
|
||||
if( typeof id === 'string' && id.length ) {
|
||||
url = '/' + id;
|
||||
|
||||
// If there is also a fragment, append that at the end
|
||||
// of the named link, like: #/named-link/2
|
||||
if( index.f >= 0 ) url += '/' + index.f;
|
||||
}
|
||||
// Otherwise use the /h/v index
|
||||
else {
|
||||
let hashIndexBase = this.Reveal.getConfig().hashOneBasedIndex ? 1 : 0;
|
||||
if( index.h > 0 || index.v > 0 || index.f >= 0 ) url += index.h + hashIndexBase;
|
||||
if( index.v > 0 || index.f >= 0 ) url += '/' + (index.v + hashIndexBase );
|
||||
if( index.f >= 0 ) url += '/' + index.f;
|
||||
}
|
||||
|
||||
return url;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for the window level 'hashchange' event.
|
||||
*
|
||||
* @param {object} [event]
|
||||
*/
|
||||
onWindowHashChange( event ) {
|
||||
|
||||
this.readURL();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* Handles the showing of speaker notes
|
||||
*/
|
||||
export default class Notes {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
this.element = document.createElement( 'div' );
|
||||
this.element.className = 'speaker-notes';
|
||||
this.element.setAttribute( 'data-prevent-swipe', '' );
|
||||
this.element.setAttribute( 'tabindex', '0' );
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
if( config.showNotes ) {
|
||||
this.element.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Pick up notes from the current slide and display them
|
||||
* to the viewer.
|
||||
*
|
||||
* @see {@link config.showNotes}
|
||||
*/
|
||||
update() {
|
||||
|
||||
if( this.Reveal.getConfig().showNotes &&
|
||||
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>';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the visibility of the speaker notes sidebar that
|
||||
* is used to share annotated slides. The notes sidebar is
|
||||
* only visible if showNotes is true and there are notes on
|
||||
* one or more slides in the deck.
|
||||
*/
|
||||
updateVisibility() {
|
||||
|
||||
if( this.Reveal.getConfig().showNotes &&
|
||||
this.hasNotes() &&
|
||||
!this.Reveal.isScrollView() &&
|
||||
!this.Reveal.isPrintView()
|
||||
) {
|
||||
this.Reveal.getRevealElement().classList.add( 'show-notes' );
|
||||
}
|
||||
else {
|
||||
this.Reveal.getRevealElement().classList.remove( 'show-notes' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if there are speaker notes for ANY slide in the
|
||||
* presentation.
|
||||
*/
|
||||
hasNotes() {
|
||||
|
||||
return this.Reveal.getSlidesElement().querySelectorAll( '[data-notes], aside.notes' ).length > 0;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if this presentation is running inside of the
|
||||
* speaker notes window.
|
||||
*
|
||||
* @return {boolean}
|
||||
*/
|
||||
isSpeakerNotesWindow() {
|
||||
|
||||
return !!window.location.search.match( /receiver/gi );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieves the speaker notes from a slide. Notes can be
|
||||
* defined in two ways:
|
||||
* 1. As a data-notes attribute on the slide <section>
|
||||
* 2. With <aside class="notes"> elements inside the slide
|
||||
*
|
||||
* @param {HTMLElement} [slide=currentSlide]
|
||||
* @return {(string|null)}
|
||||
*/
|
||||
getSlideNotes( slide = this.Reveal.getCurrentSlide() ) {
|
||||
|
||||
// Notes can be specified via the data-notes attribute...
|
||||
if( slide.hasAttribute( 'data-notes' ) ) {
|
||||
return slide.getAttribute( 'data-notes' );
|
||||
}
|
||||
|
||||
// ... or using <aside class="notes"> elements
|
||||
let notesElements = slide.querySelectorAll( 'aside.notes' );
|
||||
if( notesElements ) {
|
||||
return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
import { SLIDES_SELECTOR } from '../utils/constants.js'
|
||||
import { extend, queryAll, transformElement } from '../utils/util.js'
|
||||
|
||||
/**
|
||||
* Handles all logic related to the overview mode
|
||||
* (birds-eye view of all slides).
|
||||
*/
|
||||
export default class Overview {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
this.active = false;
|
||||
|
||||
this.onSlideClicked = this.onSlideClicked.bind( this );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the overview of slides (quick nav) by scaling
|
||||
* down and arranging all slide elements.
|
||||
*/
|
||||
activate() {
|
||||
|
||||
// Only proceed if enabled in config
|
||||
if( this.Reveal.getConfig().overview && !this.Reveal.isScrollView() && !this.isActive() ) {
|
||||
|
||||
this.active = true;
|
||||
|
||||
this.Reveal.getRevealElement().classList.add( 'overview' );
|
||||
|
||||
// Don't auto-slide while in overview mode
|
||||
this.Reveal.cancelAutoSlide();
|
||||
|
||||
// Move the backgrounds element into the slide container to
|
||||
// that the same scaling is applied
|
||||
this.Reveal.getSlidesElement().appendChild( this.Reveal.getBackgroundsElement() );
|
||||
|
||||
// Clicking on an overview slide navigates to it
|
||||
queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {
|
||||
if( !slide.classList.contains( 'stack' ) ) {
|
||||
slide.addEventListener( 'click', this.onSlideClicked, true );
|
||||
}
|
||||
} );
|
||||
|
||||
// Calculate slide sizes
|
||||
const margin = 70;
|
||||
const slideSize = this.Reveal.getComputedSlideSize();
|
||||
this.overviewSlideWidth = slideSize.width + margin;
|
||||
this.overviewSlideHeight = slideSize.height + margin;
|
||||
|
||||
// Reverse in RTL mode
|
||||
if( this.Reveal.getConfig().rtl ) {
|
||||
this.overviewSlideWidth = -this.overviewSlideWidth;
|
||||
}
|
||||
|
||||
this.Reveal.updateSlidesVisibility();
|
||||
|
||||
this.layout();
|
||||
this.update();
|
||||
|
||||
this.Reveal.layout();
|
||||
|
||||
const indices = this.Reveal.getIndices();
|
||||
|
||||
// Notify observers of the overview showing
|
||||
this.Reveal.dispatchEvent({
|
||||
type: 'overviewshown',
|
||||
data: {
|
||||
'indexh': indices.h,
|
||||
'indexv': indices.v,
|
||||
'currentSlide': this.Reveal.getCurrentSlide()
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Uses CSS transforms to position all slides in a grid for
|
||||
* display inside of the overview mode.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// Layout slides
|
||||
this.Reveal.getHorizontalSlides().forEach( ( hslide, h ) => {
|
||||
hslide.setAttribute( 'data-index-h', h );
|
||||
transformElement( hslide, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );
|
||||
|
||||
if( hslide.classList.contains( 'stack' ) ) {
|
||||
|
||||
queryAll( hslide, 'section' ).forEach( ( vslide, v ) => {
|
||||
vslide.setAttribute( 'data-index-h', h );
|
||||
vslide.setAttribute( 'data-index-v', v );
|
||||
|
||||
transformElement( vslide, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
|
||||
} );
|
||||
|
||||
}
|
||||
} );
|
||||
|
||||
// Layout slide backgrounds
|
||||
Array.from( this.Reveal.getBackgroundsElement().childNodes ).forEach( ( hbackground, h ) => {
|
||||
transformElement( hbackground, 'translate3d(' + ( h * this.overviewSlideWidth ) + 'px, 0, 0)' );
|
||||
|
||||
queryAll( hbackground, '.slide-background' ).forEach( ( vbackground, v ) => {
|
||||
transformElement( vbackground, 'translate3d(0, ' + ( v * this.overviewSlideHeight ) + 'px, 0)' );
|
||||
} );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the overview viewport to the current slides.
|
||||
* Called each time the current slide changes.
|
||||
*/
|
||||
update() {
|
||||
|
||||
const vmin = Math.min( window.innerWidth, window.innerHeight );
|
||||
const scale = Math.max( vmin / 5, 150 ) / vmin;
|
||||
const indices = this.Reveal.getIndices();
|
||||
|
||||
this.Reveal.transformSlides( {
|
||||
overview: [
|
||||
'scale('+ scale +')',
|
||||
'translateX('+ ( -indices.h * this.overviewSlideWidth ) +'px)',
|
||||
'translateY('+ ( -indices.v * this.overviewSlideHeight ) +'px)'
|
||||
].join( ' ' )
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Exits the slide overview and enters the currently
|
||||
* active slide.
|
||||
*/
|
||||
deactivate() {
|
||||
|
||||
// Only proceed if enabled in config
|
||||
if( this.Reveal.getConfig().overview ) {
|
||||
|
||||
this.active = false;
|
||||
|
||||
this.Reveal.getRevealElement().classList.remove( 'overview' );
|
||||
|
||||
// Temporarily add a class so that transitions can do different things
|
||||
// depending on whether they are exiting/entering overview, or just
|
||||
// moving from slide to slide
|
||||
this.Reveal.getRevealElement().classList.add( 'overview-deactivating' );
|
||||
|
||||
setTimeout( () => {
|
||||
this.Reveal.getRevealElement().classList.remove( 'overview-deactivating' );
|
||||
}, 1 );
|
||||
|
||||
// Move the background element back out
|
||||
this.Reveal.getRevealElement().appendChild( this.Reveal.getBackgroundsElement() );
|
||||
|
||||
// Clean up changes made to slides
|
||||
queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( slide => {
|
||||
transformElement( slide, '' );
|
||||
|
||||
slide.removeEventListener( 'click', this.onSlideClicked, true );
|
||||
} );
|
||||
|
||||
// Clean up changes made to backgrounds
|
||||
queryAll( this.Reveal.getBackgroundsElement(), '.slide-background' ).forEach( background => {
|
||||
transformElement( background, '' );
|
||||
} );
|
||||
|
||||
this.Reveal.transformSlides( { overview: '' } );
|
||||
|
||||
const indices = this.Reveal.getIndices();
|
||||
|
||||
this.Reveal.slide( indices.h, indices.v );
|
||||
this.Reveal.layout();
|
||||
this.Reveal.cueAutoSlide();
|
||||
|
||||
// Notify observers of the overview hiding
|
||||
this.Reveal.dispatchEvent({
|
||||
type: 'overviewhidden',
|
||||
data: {
|
||||
'indexh': indices.h,
|
||||
'indexv': indices.v,
|
||||
'currentSlide': this.Reveal.getCurrentSlide()
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the slide overview mode on and off.
|
||||
*
|
||||
* @param {Boolean} [override] Flag which overrides the
|
||||
* toggle logic and forcibly sets the desired state. True means
|
||||
* overview is open, false means it's closed.
|
||||
*/
|
||||
toggle( override ) {
|
||||
|
||||
if( typeof override === 'boolean' ) {
|
||||
override ? this.activate() : this.deactivate();
|
||||
}
|
||||
else {
|
||||
this.isActive() ? this.deactivate() : this.activate();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the overview is currently active.
|
||||
*
|
||||
* @return {Boolean} true if the overview is active,
|
||||
* false otherwise
|
||||
*/
|
||||
isActive() {
|
||||
|
||||
return this.active;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoked when a slide is and we're in the overview.
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onSlideClicked( event ) {
|
||||
|
||||
if( this.isActive() ) {
|
||||
event.preventDefault();
|
||||
|
||||
let element = event.target;
|
||||
|
||||
while( element && !element.nodeName.match( /section/gi ) ) {
|
||||
element = element.parentNode;
|
||||
}
|
||||
|
||||
if( element && !element.classList.contains( 'disabled' ) ) {
|
||||
|
||||
this.deactivate();
|
||||
|
||||
if( element.nodeName.match( /section/gi ) ) {
|
||||
let h = parseInt( element.getAttribute( 'data-index-h' ), 10 ),
|
||||
v = parseInt( element.getAttribute( 'data-index-v' ), 10 );
|
||||
|
||||
this.Reveal.slide( h, v );
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,254 @@
|
|||
import { loadScript } from '../utils/loader.js'
|
||||
|
||||
/**
|
||||
* Manages loading and registering of reveal.js plugins.
|
||||
*/
|
||||
export default class Plugins {
|
||||
|
||||
constructor( reveal ) {
|
||||
|
||||
this.Reveal = reveal;
|
||||
|
||||
// Flags our current state (idle -> loading -> loaded)
|
||||
this.state = 'idle';
|
||||
|
||||
// An id:instance map of currently registered plugins
|
||||
this.registeredPlugins = {};
|
||||
|
||||
this.asyncDependencies = [];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads reveal.js dependencies, registers and
|
||||
* initializes plugins.
|
||||
*
|
||||
* Plugins are direct references to a reveal.js plugin
|
||||
* object that we register and initialize after any
|
||||
* synchronous dependencies have loaded.
|
||||
*
|
||||
* Dependencies are defined via the 'dependencies' config
|
||||
* option and will be loaded prior to starting reveal.js.
|
||||
* Some dependencies may have an 'async' flag, if so they
|
||||
* will load after reveal.js has been started up.
|
||||
*/
|
||||
load( plugins, dependencies ) {
|
||||
|
||||
this.state = 'loading';
|
||||
|
||||
plugins.forEach( this.registerPlugin.bind( this ) );
|
||||
|
||||
return new Promise( resolve => {
|
||||
|
||||
let scripts = [],
|
||||
scriptsToLoad = 0;
|
||||
|
||||
dependencies.forEach( s => {
|
||||
// Load if there's no condition or the condition is truthy
|
||||
if( !s.condition || s.condition() ) {
|
||||
if( s.async ) {
|
||||
this.asyncDependencies.push( s );
|
||||
}
|
||||
else {
|
||||
scripts.push( s );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
if( scripts.length ) {
|
||||
scriptsToLoad = scripts.length;
|
||||
|
||||
const scriptLoadedCallback = (s) => {
|
||||
if( s && typeof s.callback === 'function' ) s.callback();
|
||||
|
||||
if( --scriptsToLoad === 0 ) {
|
||||
this.initPlugins().then( resolve );
|
||||
}
|
||||
};
|
||||
|
||||
// Load synchronous scripts
|
||||
scripts.forEach( s => {
|
||||
if( typeof s.id === 'string' ) {
|
||||
this.registerPlugin( s );
|
||||
scriptLoadedCallback( s );
|
||||
}
|
||||
else if( typeof s.src === 'string' ) {
|
||||
loadScript( s.src, () => scriptLoadedCallback(s) );
|
||||
}
|
||||
else {
|
||||
console.warn( 'Unrecognized plugin format', s );
|
||||
scriptLoadedCallback();
|
||||
}
|
||||
} );
|
||||
}
|
||||
else {
|
||||
this.initPlugins().then( resolve );
|
||||
}
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes our plugins and waits for them to be ready
|
||||
* before proceeding.
|
||||
*/
|
||||
initPlugins() {
|
||||
|
||||
return new Promise( resolve => {
|
||||
|
||||
let pluginValues = Object.values( this.registeredPlugins );
|
||||
let pluginsToInitialize = pluginValues.length;
|
||||
|
||||
// If there are no plugins, skip this step
|
||||
if( pluginsToInitialize === 0 ) {
|
||||
this.loadAsync().then( resolve );
|
||||
}
|
||||
// ... otherwise initialize plugins
|
||||
else {
|
||||
|
||||
let initNextPlugin;
|
||||
|
||||
let afterPlugInitialized = () => {
|
||||
if( --pluginsToInitialize === 0 ) {
|
||||
this.loadAsync().then( resolve );
|
||||
}
|
||||
else {
|
||||
initNextPlugin();
|
||||
}
|
||||
};
|
||||
|
||||
let i = 0;
|
||||
|
||||
// Initialize plugins serially
|
||||
initNextPlugin = () => {
|
||||
|
||||
let plugin = pluginValues[i++];
|
||||
|
||||
// If the plugin has an 'init' method, invoke it
|
||||
if( typeof plugin.init === 'function' ) {
|
||||
let promise = plugin.init( this.Reveal );
|
||||
|
||||
// If the plugin returned a Promise, wait for it
|
||||
if( promise && typeof promise.then === 'function' ) {
|
||||
promise.then( afterPlugInitialized );
|
||||
}
|
||||
else {
|
||||
afterPlugInitialized();
|
||||
}
|
||||
}
|
||||
else {
|
||||
afterPlugInitialized();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
initNextPlugin();
|
||||
|
||||
}
|
||||
|
||||
} )
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads all async reveal.js dependencies.
|
||||
*/
|
||||
loadAsync() {
|
||||
|
||||
this.state = 'loaded';
|
||||
|
||||
if( this.asyncDependencies.length ) {
|
||||
this.asyncDependencies.forEach( s => {
|
||||
loadScript( s.src, s.callback );
|
||||
} );
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a new plugin with this reveal.js instance.
|
||||
*
|
||||
* reveal.js waits for all registered plugins to initialize
|
||||
* before considering itself ready, as long as the plugin
|
||||
* is registered before calling `Reveal.initialize()`.
|
||||
*/
|
||||
registerPlugin( plugin ) {
|
||||
|
||||
// Backwards compatibility to make reveal.js ~3.9.0
|
||||
// plugins work with reveal.js 4.0.0
|
||||
if( arguments.length === 2 && typeof arguments[0] === 'string' ) {
|
||||
plugin = arguments[1];
|
||||
plugin.id = arguments[0];
|
||||
}
|
||||
// Plugin can optionally be a function which we call
|
||||
// to create an instance of the plugin
|
||||
else if( typeof plugin === 'function' ) {
|
||||
plugin = plugin();
|
||||
}
|
||||
|
||||
let id = plugin.id;
|
||||
|
||||
if( typeof id !== 'string' ) {
|
||||
console.warn( 'Unrecognized plugin format; can\'t find plugin.id', plugin );
|
||||
}
|
||||
else if( this.registeredPlugins[id] === undefined ) {
|
||||
this.registeredPlugins[id] = plugin;
|
||||
|
||||
// If a plugin is registered after reveal.js is loaded,
|
||||
// initialize it right away
|
||||
if( this.state === 'loaded' && typeof plugin.init === 'function' ) {
|
||||
plugin.init( this.Reveal );
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.warn( 'reveal.js: "'+ id +'" plugin has already been registered' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a specific plugin has been registered.
|
||||
*
|
||||
* @param {String} id Unique plugin identifier
|
||||
*/
|
||||
hasPlugin( id ) {
|
||||
|
||||
return !!this.registeredPlugins[id];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the specific plugin instance, if a plugin
|
||||
* with the given ID has been registered.
|
||||
*
|
||||
* @param {String} id Unique plugin identifier
|
||||
*/
|
||||
getPlugin( id ) {
|
||||
|
||||
return this.registeredPlugins[id];
|
||||
|
||||
}
|
||||
|
||||
getRegisteredPlugins() {
|
||||
|
||||
return this.registeredPlugins;
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
Object.values( this.registeredPlugins ).forEach( plugin => {
|
||||
if( typeof plugin.destroy === 'function' ) {
|
||||
plugin.destroy();
|
||||
}
|
||||
} );
|
||||
|
||||
this.registeredPlugins = {};
|
||||
this.asyncDependencies = [];
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* Handles hiding of the pointer/cursor when inactive.
|
||||
*/
|
||||
export default class Pointer {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
// Throttles mouse wheel navigation
|
||||
this.lastMouseWheelStep = 0;
|
||||
|
||||
// Is the mouse pointer currently hidden from view
|
||||
this.cursorHidden = false;
|
||||
|
||||
// Timeout used to determine when the cursor is inactive
|
||||
this.cursorInactiveTimeout = 0;
|
||||
|
||||
this.onDocumentCursorActive = this.onDocumentCursorActive.bind( this );
|
||||
this.onDocumentMouseScroll = this.onDocumentMouseScroll.bind( this );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
if( config.mouseWheel ) {
|
||||
document.addEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
||||
}
|
||||
else {
|
||||
document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
||||
}
|
||||
|
||||
// Auto-hide the mouse pointer when its inactive
|
||||
if( config.hideInactiveCursor ) {
|
||||
document.addEventListener( 'mousemove', this.onDocumentCursorActive, false );
|
||||
document.addEventListener( 'mousedown', this.onDocumentCursorActive, false );
|
||||
}
|
||||
else {
|
||||
this.showCursor();
|
||||
|
||||
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
|
||||
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the mouse pointer after it has been hidden with
|
||||
* #hideCursor.
|
||||
*/
|
||||
showCursor() {
|
||||
|
||||
if( this.cursorHidden ) {
|
||||
this.cursorHidden = false;
|
||||
this.Reveal.getRevealElement().style.cursor = '';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the mouse pointer when it's on top of the .reveal
|
||||
* container.
|
||||
*/
|
||||
hideCursor() {
|
||||
|
||||
if( this.cursorHidden === false ) {
|
||||
this.cursorHidden = true;
|
||||
this.Reveal.getRevealElement().style.cursor = 'none';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.showCursor();
|
||||
|
||||
document.removeEventListener( 'wheel', this.onDocumentMouseScroll, false );
|
||||
document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
|
||||
document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called whenever there is mouse input at the document level
|
||||
* to determine if the cursor is active or not.
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onDocumentCursorActive( event ) {
|
||||
|
||||
this.showCursor();
|
||||
|
||||
clearTimeout( this.cursorInactiveTimeout );
|
||||
|
||||
this.cursorInactiveTimeout = setTimeout( this.hideCursor.bind( this ), this.Reveal.getConfig().hideCursorTime );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles mouse wheel scrolling, throttled to avoid skipping
|
||||
* multiple slides.
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onDocumentMouseScroll( event ) {
|
||||
|
||||
if( Date.now() - this.lastMouseWheelStep > 1000 ) {
|
||||
|
||||
this.lastMouseWheelStep = Date.now();
|
||||
|
||||
let delta = event.detail || -event.wheelDelta;
|
||||
if( delta > 0 ) {
|
||||
this.Reveal.next();
|
||||
}
|
||||
else if( delta < 0 ) {
|
||||
this.Reveal.prev();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
import { SLIDES_SELECTOR } from '../utils/constants.js'
|
||||
import { queryAll, createStyleSheet } from '../utils/util.js'
|
||||
|
||||
/**
|
||||
* Setups up our presentation for printing/exporting to PDF.
|
||||
*/
|
||||
export default class PrintView {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Configures the presentation for printing to a static
|
||||
* PDF.
|
||||
*/
|
||||
async activate() {
|
||||
|
||||
const config = this.Reveal.getConfig();
|
||||
const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
|
||||
|
||||
// Compute slide numbers now, before we start duplicating slides
|
||||
const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
|
||||
|
||||
const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
// Dimensions of the PDF pages
|
||||
const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
|
||||
pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
|
||||
|
||||
// Dimensions of slides within the pages
|
||||
const slideWidth = slideSize.width,
|
||||
slideHeight = slideSize.height;
|
||||
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
// Let the browser know what page size we want to print
|
||||
createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
|
||||
|
||||
// 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}' );
|
||||
|
||||
document.documentElement.classList.add( 'reveal-print', 'print-pdf' );
|
||||
document.body.style.width = pageWidth + 'px';
|
||||
document.body.style.height = pageHeight + 'px';
|
||||
|
||||
const viewportElement = this.Reveal.getViewportElement();
|
||||
let presentationBackground;
|
||||
if( viewportElement ) {
|
||||
const viewportStyles = window.getComputedStyle( viewportElement );
|
||||
if( viewportStyles && viewportStyles.background ) {
|
||||
presentationBackground = viewportStyles.background;
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure stretch elements fit on slide
|
||||
await new Promise( requestAnimationFrame );
|
||||
this.Reveal.layoutSlideContents( slideWidth, slideHeight );
|
||||
|
||||
// Batch scrollHeight access to prevent layout thrashing
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
const slideScrollHeights = slides.map( slide => slide.scrollHeight );
|
||||
|
||||
const pages = [];
|
||||
const pageContainer = slides[0].parentNode;
|
||||
let slideNumber = 1;
|
||||
|
||||
// Slide and slide background layout
|
||||
slides.forEach( function( slide, index ) {
|
||||
|
||||
// Vertical stacks are not centred since their section
|
||||
// children will be
|
||||
if( slide.classList.contains( 'stack' ) === false ) {
|
||||
// Center the slide inside of the page, giving the slide some margin
|
||||
let left = ( pageWidth - slideWidth ) / 2;
|
||||
let top = ( pageHeight - slideHeight ) / 2;
|
||||
|
||||
const contentHeight = slideScrollHeights[ index ];
|
||||
let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
|
||||
|
||||
// Adhere to configured pages per slide limit
|
||||
numberOfPages = Math.min( numberOfPages, config.pdfMaxPagesPerSlide );
|
||||
|
||||
// Center slides vertically
|
||||
if( numberOfPages === 1 && config.center || slide.classList.contains( 'center' ) ) {
|
||||
top = Math.max( ( pageHeight - contentHeight ) / 2, 0 );
|
||||
}
|
||||
|
||||
// Wrap the slide in a page element and hide its overflow
|
||||
// so that no page ever flows onto another
|
||||
const page = document.createElement( 'div' );
|
||||
pages.push( page );
|
||||
|
||||
page.className = 'pdf-page';
|
||||
page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
|
||||
|
||||
// Copy the presentation-wide background to each individual
|
||||
// page when printing
|
||||
if( presentationBackground ) {
|
||||
page.style.background = presentationBackground;
|
||||
}
|
||||
|
||||
page.appendChild( slide );
|
||||
|
||||
// Position the slide inside of the page
|
||||
slide.style.left = left + 'px';
|
||||
slide.style.top = top + 'px';
|
||||
slide.style.width = slideWidth + 'px';
|
||||
|
||||
this.Reveal.slideContent.layout( slide );
|
||||
|
||||
if( slide.slideBackgroundElement ) {
|
||||
page.insertBefore( slide.slideBackgroundElement, slide );
|
||||
}
|
||||
|
||||
// Inject notes if `showNotes` is enabled
|
||||
if( config.showNotes ) {
|
||||
|
||||
// Are there notes for this slide?
|
||||
const notes = this.Reveal.getSlideNotes( slide );
|
||||
if( notes ) {
|
||||
|
||||
const notesSpacing = 8;
|
||||
const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
|
||||
const notesElement = document.createElement( 'div' );
|
||||
notesElement.classList.add( 'speaker-notes' );
|
||||
notesElement.classList.add( 'speaker-notes-pdf' );
|
||||
notesElement.setAttribute( 'data-layout', notesLayout );
|
||||
notesElement.innerHTML = notes;
|
||||
|
||||
if( notesLayout === 'separate-page' ) {
|
||||
pages.push( notesElement );
|
||||
}
|
||||
else {
|
||||
notesElement.style.left = notesSpacing + 'px';
|
||||
notesElement.style.bottom = notesSpacing + 'px';
|
||||
notesElement.style.width = ( pageWidth - notesSpacing*2 ) + 'px';
|
||||
page.appendChild( notesElement );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Inject page numbers if `slideNumbers` are enabled
|
||||
if( injectPageNumbers ) {
|
||||
const numberElement = document.createElement( 'div' );
|
||||
numberElement.classList.add( 'slide-number' );
|
||||
numberElement.classList.add( 'slide-number-pdf' );
|
||||
numberElement.innerHTML = slideNumber++;
|
||||
page.appendChild( numberElement );
|
||||
}
|
||||
|
||||
// Copy page and show fragments one after another
|
||||
if( config.pdfSeparateFragments ) {
|
||||
|
||||
// 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( page.querySelectorAll( '.fragment' ), true );
|
||||
|
||||
let previousFragmentStep;
|
||||
|
||||
fragmentGroups.forEach( function( fragments, index ) {
|
||||
|
||||
// Remove 'current-fragment' from the previous group
|
||||
if( previousFragmentStep ) {
|
||||
previousFragmentStep.forEach( function( fragment ) {
|
||||
fragment.classList.remove( 'current-fragment' );
|
||||
} );
|
||||
}
|
||||
|
||||
// Show the fragments for the current index
|
||||
fragments.forEach( function( fragment ) {
|
||||
fragment.classList.add( 'visible', 'current-fragment' );
|
||||
}, this );
|
||||
|
||||
// Create a separate page for the current fragment state
|
||||
const clonedPage = page.cloneNode( true );
|
||||
|
||||
// Inject unique page numbers for fragments
|
||||
if( injectPageNumbers ) {
|
||||
const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
|
||||
const fragmentNumber = index + 1;
|
||||
numberElement.innerHTML += '.' + fragmentNumber;
|
||||
}
|
||||
|
||||
pages.push( clonedPage );
|
||||
|
||||
previousFragmentStep = fragments;
|
||||
|
||||
}, this );
|
||||
|
||||
// Reset the first/original page so that all fragments are hidden
|
||||
fragmentGroups.forEach( function( fragments ) {
|
||||
fragments.forEach( function( fragment ) {
|
||||
fragment.classList.remove( 'visible', 'current-fragment' );
|
||||
} );
|
||||
} );
|
||||
|
||||
}
|
||||
// Show all fragments
|
||||
else {
|
||||
queryAll( page, '.fragment:not(.fade-out)' ).forEach( function( fragment ) {
|
||||
fragment.classList.add( 'visible' );
|
||||
} );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, this );
|
||||
|
||||
await new Promise( requestAnimationFrame );
|
||||
|
||||
pages.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() );
|
||||
|
||||
// Notify subscribers that the PDF layout is good to go
|
||||
this.Reveal.dispatchEvent({ type: 'pdf-ready' });
|
||||
|
||||
viewportElement.classList.remove( 'loading-scroll-mode' );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the print mode is/should be activated.
|
||||
*/
|
||||
isActive() {
|
||||
|
||||
return this.Reveal.getConfig().view === 'print';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/**
|
||||
* Creates a visual progress bar for the presentation.
|
||||
*/
|
||||
export default class Progress {
|
||||
|
||||
constructor( Reveal ) {
|
||||
|
||||
this.Reveal = Reveal;
|
||||
|
||||
this.onProgressClicked = this.onProgressClicked.bind( this );
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
this.element = document.createElement( 'div' );
|
||||
this.element.className = 'progress';
|
||||
this.Reveal.getRevealElement().appendChild( this.element );
|
||||
|
||||
this.bar = document.createElement( 'span' );
|
||||
this.element.appendChild( this.bar );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the reveal.js config is updated.
|
||||
*/
|
||||
configure( config, oldConfig ) {
|
||||
|
||||
this.element.style.display = config.progress ? 'block' : 'none';
|
||||
|
||||
}
|
||||
|
||||
bind() {
|
||||
|
||||
if( this.Reveal.getConfig().progress && this.element ) {
|
||||
this.element.addEventListener( 'click', this.onProgressClicked, false );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
unbind() {
|
||||
|
||||
if ( this.Reveal.getConfig().progress && this.element ) {
|
||||
this.element.removeEventListener( 'click', this.onProgressClicked, false );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the progress bar to reflect the current slide.
|
||||
*/
|
||||
update() {
|
||||
|
||||
// Update progress if enabled
|
||||
if( this.Reveal.getConfig().progress && this.bar ) {
|
||||
|
||||
let scale = this.Reveal.getProgress();
|
||||
|
||||
// Don't fill the progress bar if there's only one slide
|
||||
if( this.Reveal.getTotalSlides() < 2 ) {
|
||||
scale = 0;
|
||||
}
|
||||
|
||||
this.bar.style.transform = 'scaleX('+ scale +')';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getMaxWidth() {
|
||||
|
||||
return this.Reveal.getRevealElement().offsetWidth;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Clicking on the progress bar results in a navigation to the
|
||||
* closest approximate horizontal slide using this equation:
|
||||
*
|
||||
* ( clickX / presentationWidth ) * numberOfSlides
|
||||
*
|
||||
* @param {object} event
|
||||
*/
|
||||
onProgressClicked( event ) {
|
||||
|
||||
this.Reveal.onUserInput( event );
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
let slides = this.Reveal.getSlides();
|
||||
let slidesTotal = slides.length;
|
||||
let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
|
||||
|
||||
if( this.Reveal.getConfig().rtl ) {
|
||||
slideIndex = slidesTotal - slideIndex;
|
||||
}
|
||||
|
||||
let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
|
||||
this.Reveal.slide( targetIndices.h, targetIndices.v );
|
||||
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
this.element.remove();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,919 @@
|
|||
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];
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue