Skip to content
This repository has been archived by the owner on Sep 4, 2023. It is now read-only.

Commit

Permalink
merged webyarn to reveal 3.8.0 and extracted a helpers.js
Browse files Browse the repository at this point in the history
Some of the functions used for reveal specific functional in reveal.js has been moved to `webyarns/src/helper.ts`. This makes merging hopefully easier in the future and allows me to use typescript
  • Loading branch information
rparree committed Oct 18, 2019
2 parents 90f9d19 + 3da09f1 commit b30cde9
Show file tree
Hide file tree
Showing 72 changed files with 14,077 additions and 874 deletions.
6 changes: 6 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/typescript"
]
}
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ out/
log/*.log
tmp/**
node_modules/
package-lock.json
.sass-cache
css/reveal.min.css
js/reveal.min.js
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
language: node_js
node_js:
- 4
- 11
after_script:
- npm run build -- retire
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Copyright (C) 2019 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
Expand Down
105 changes: 89 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
- [Ready Event](#ready-event)
- [Auto-sliding](#auto-sliding)
- [Keyboard Bindings](#keyboard-bindings)
- [Vertical Slide Navigation](#vertical-slide-navigation)
- [Touch Navigation](#touch-navigation)
- [Lazy Loading](#lazy-loading)
- [API](#api)
Expand All @@ -41,6 +42,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
- [Fullscreen mode](#fullscreen-mode)
- [Embedded media](#embedded-media)
- [Stretching elements](#stretching-elements)
- [Resize Event](#resize-event)
- [postMessage API](#postmessage-api)
- [PDF Export](#pdf-export)
- [Theming](#theming)
Expand Down Expand Up @@ -225,7 +227,7 @@ We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise
```javascript
Reveal.initialize({
// Options which are passed into marked
// See https://github.com/chjj/marked#options-1
// See https://marked.js.org/#/USING_ADVANCED.md#options
markdown: {
smartypants: true
}
Expand Down Expand Up @@ -259,7 +261,11 @@ Reveal.initialize({
// Display the page number of the current slide
slideNumber: false,
// Push each slide change to the browser history
// 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,
// Push each slide change to the browser history. Implies `hash: true`
history: false,
// Enable keyboard shortcuts for navigation
Expand All @@ -280,6 +286,9 @@ Reveal.initialize({
// Change the presentation direction to be RTL
rtl: false,
// See https://github.com/hakimel/reveal.js/#navigation-mode
navigationMode: 'default',
// Randomizes the order of slides each time the presentation loads
shuffle: false,
Expand Down Expand Up @@ -307,6 +316,13 @@ Reveal.initialize({
// - 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,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
Expand All @@ -326,6 +342,12 @@ Reveal.initialize({
// Enable slide navigation via mouse wheel
mouseWheel: false,
// Hide cursor if inactive
hideInactiveCursor: true,
// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,
// Hides the address bar on mobile devices
hideAddressBar: true,
Expand Down Expand Up @@ -423,9 +445,6 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
```javascript
Reveal.initialize({
dependencies: [
// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
// Interpret Markdown in <section> elements
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
Expand All @@ -451,8 +470,6 @@ You can add your own extensions using the same syntax. The following properties
- **callback**: [optional] Function to execute when the script has loaded
- **condition**: [optional] Function which must return true for the script to be loaded
To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
### Ready Event
A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
Expand Down Expand Up @@ -506,6 +523,21 @@ Reveal.configure({
});
```
### Vertical Slide Navigation
Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action:
<img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450">
#### Navigation Mode
You can finetune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available:
| Value | Description |
| :--------------------------- | :---------- |
| 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.<br><br>Consider a deck with six slides ordered in two vertical stacks:<br>`1.1`&nbsp;&nbsp;&nbsp;&nbsp;`2.1`<br>`1.2`&nbsp;&nbsp;&nbsp;&nbsp;`2.2`<br>`1.3`&nbsp;&nbsp;&nbsp;&nbsp;`2.3`<br><br>If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. |
### Touch Navigation
You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.
Expand All @@ -516,7 +548,7 @@ If there's some part of your content that needs to remain accessible to touch ev
When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.
To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements.
```html
<section>
Expand All @@ -529,6 +561,26 @@ To enable lazy loading all you need to do is change your `src` attributes to `da
</section>
```
#### Lazy Loading Iframes
Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.
When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.
You can override this behavior with the `data-preload` attribute. The iframe below will be loaded
according to the `viewDistance`.
```html
<section>
<iframe data-src="http://hakim.se" data-preload></iframe>
</section>
```
You can also change the default globally with the `preloadIframes` configuration option. If set to
`true` ALL iframes with a `data-src` attribute will be preloaded when within the `viewDistance`
regardless of individual `data-preload` attributes. If set to `false`, all iframes will only be
loaded when they become visible.
### API
The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
Expand Down Expand Up @@ -585,6 +637,9 @@ Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
Reveal.isAutoSliding();
// Returns the top-level DOM element
getRevealElement(); // <div class="reveal">...</div>
```
### Custom Key Bindings
Expand Down Expand Up @@ -863,7 +918,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
### Code syntax highlighting
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)).
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)).
```javascript
Reveal.initialize({
Expand Down Expand Up @@ -903,6 +958,12 @@ Reveal.configure({ slideNumber: true });
// "c/t": flattened slide number / total slides
Reveal.configure({ slideNumber: 'c/t' });
// You can provide a function to fully customize the number:
Reveal.configure({ slideNumber: function() {
// Ignore numbering of vertical slides
return [ Reveal.getIndices().h ];
}});
// Control which views the slide number displays on using the "showSlideNumber" value:
// "all": show on all views (default)
// "speaker": only show slide numbers on speaker notes view
Expand Down Expand Up @@ -958,6 +1019,16 @@ Limitations:
- Only direct descendants of a slide section can be stretched
- Only one descendant per slide section can be stretched
### Resize Event
When reveal.js changes the scale of the slides it fires a resize event. You can subscribe to the event to resize your elements accordingly.
```javascript
Reveal.addEventListener( 'resize', function( event ) {
// event.scale, event.oldScale, event.size
} );
```
### postMessage API
The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:
Expand Down Expand Up @@ -994,7 +1065,7 @@ Reveal.initialize({
## PDF Export
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a web server.
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
### Separate pages for fragments
Expand Down Expand Up @@ -1170,7 +1241,7 @@ Reveal.initialize({
// Don't forget to add the dependencies
dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/master.js', async: true },
// and if you want speaker notes
Expand Down Expand Up @@ -1200,7 +1271,7 @@ Reveal.initialize({
// Don't forget to add the dependencies
dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true }
// other dependencies...
Expand Down Expand Up @@ -1242,7 +1313,7 @@ Reveal.initialize({
// Don't forget to add the dependencies
dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true }
// other dependencies...
Expand All @@ -1266,7 +1337,7 @@ Reveal.initialize({
// Don't forget to add the dependencies
dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/master.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true }
Expand All @@ -1291,6 +1362,8 @@ Reveal.initialize({
math: {
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
// pass other options into `MathJax.Hub.Config()`
TeX: { Macros: macros }
},
dependencies: [
Expand All @@ -1302,7 +1375,7 @@ Reveal.initialize({
Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
#### MathJax in Markdown
If you want to include math inside of a presentation written in Markdown you need to wrap the forumla in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
```
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
Expand All @@ -1312,4 +1385,4 @@ If you want to include math inside of a presentation written in Markdown you nee
MIT licensed
Copyright (C) 2018 Hakim El Hattab, http://hakim.se
Copyright (C) 2019 Hakim El Hattab, http://hakim.se
5 changes: 1 addition & 4 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "reveal.js",
"version": "3.7.0",
"version": "3.8.0",
"main": [
"js/reveal.js",
"css/reveal.css"
Expand All @@ -11,9 +11,6 @@
"authors": [
"Hakim El Hattab <[email protected]>"
],
"dependencies": {
"headjs": "~1.0.3"
},
"repository": {
"type": "git",
"url": "git://github.com/hakimel/reveal.js.git"
Expand Down
30 changes: 30 additions & 0 deletions css/reset.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit b30cde9

Please sign in to comment.