Update reveal js version.
This commit is contained in:
Alex Myasoedov
parent
ae63721e69
commit
fe71fe8133
80 changed files with 9362 additions and 4110 deletions
11
package-lock.json
generated
Normal file
11
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
"reveal.js": {
|
||||
"version": "3.8.0",
|
||||
"resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-3.8.0.tgz",
|
||||
"integrity": "sha512-MQ+UBXIIL9IyBXhkLZWb/AG5h5/BedmnHXHIEavMBawNLVfAayvTrwNlDjGn4tf/CQ2CTJR8jSyIdu4RpfoLpg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"reveal.js": "^3.5.0"
|
||||
"reveal.js": "^3.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
static/reveal.js/.gitignore
vendored
13
static/reveal.js/.gitignore
vendored
|
|
@ -1,13 +0,0 @@
|
|||
.idea/
|
||||
*.iml
|
||||
*.iws
|
||||
*.eml
|
||||
out/
|
||||
.DS_Store
|
||||
.svn
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
.sass-cache
|
||||
css/reveal.min.css
|
||||
js/reveal.min.js
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- 4
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
- 11
|
||||
after_script:
|
||||
- grunt retire
|
||||
- npm run build -- retire
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
/* global module:false */
|
||||
module.exports = function(grunt) {
|
||||
var port = grunt.option('port') || 8000;
|
||||
var root = grunt.option('root') || '.';
|
||||
const sass = require('node-sass');
|
||||
|
||||
module.exports = grunt => {
|
||||
|
||||
require('load-grunt-tasks')(grunt);
|
||||
|
||||
let port = grunt.option('port') || 8000;
|
||||
let root = grunt.option('root') || '.';
|
||||
|
||||
if (!Array.isArray(root)) root = [root];
|
||||
|
||||
|
|
@ -15,7 +19,7 @@ module.exports = function(grunt) {
|
|||
' * http://revealjs.com\n' +
|
||||
' * MIT licensed\n' +
|
||||
' *\n' +
|
||||
' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
|
||||
' * Copyright (C) 2019 Hakim El Hattab, http://hakim.se\n' +
|
||||
' */'
|
||||
},
|
||||
|
||||
|
|
@ -26,7 +30,7 @@ module.exports = function(grunt) {
|
|||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>\n',
|
||||
screwIE8: false
|
||||
ie8: true
|
||||
},
|
||||
build: {
|
||||
src: 'js/reveal.js',
|
||||
|
|
@ -35,6 +39,10 @@ module.exports = function(grunt) {
|
|||
},
|
||||
|
||||
sass: {
|
||||
options: {
|
||||
implementation: sass,
|
||||
sourceMap: false
|
||||
},
|
||||
core: {
|
||||
src: 'css/reveal.scss',
|
||||
dest: 'css/reveal.css'
|
||||
|
|
@ -78,16 +86,18 @@ module.exports = function(grunt) {
|
|||
eqnull: true,
|
||||
browser: true,
|
||||
expr: true,
|
||||
loopfunc: true,
|
||||
globals: {
|
||||
head: false,
|
||||
module: false,
|
||||
console: false,
|
||||
unescape: false,
|
||||
define: false,
|
||||
exports: false
|
||||
exports: false,
|
||||
require: false
|
||||
}
|
||||
},
|
||||
files: [ 'Gruntfile.js', 'js/reveal.js' ]
|
||||
files: [ 'gruntfile.js', 'js/reveal.js' ]
|
||||
},
|
||||
|
||||
connect: {
|
||||
|
|
@ -119,7 +129,7 @@ module.exports = function(grunt) {
|
|||
|
||||
watch: {
|
||||
js: {
|
||||
files: [ 'Gruntfile.js', 'js/reveal.js' ],
|
||||
files: [ 'gruntfile.js', 'js/reveal.js' ],
|
||||
tasks: 'js'
|
||||
},
|
||||
theme: {
|
||||
|
|
@ -135,6 +145,10 @@ module.exports = function(grunt) {
|
|||
files: [ 'css/reveal.scss' ],
|
||||
tasks: 'css-core'
|
||||
},
|
||||
test: {
|
||||
files: [ 'test/*.html' ],
|
||||
tasks: 'test'
|
||||
},
|
||||
html: {
|
||||
files: root.map(path => path + '/*.html')
|
||||
},
|
||||
|
|
@ -144,27 +158,13 @@ module.exports = function(grunt) {
|
|||
options: {
|
||||
livereload: true
|
||||
}
|
||||
},
|
||||
|
||||
retire: {
|
||||
js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
|
||||
node: [ '.' ]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Dependencies
|
||||
grunt.loadNpmTasks( 'grunt-contrib-connect' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-watch' );
|
||||
grunt.loadNpmTasks( 'grunt-autoprefixer' );
|
||||
grunt.loadNpmTasks( 'grunt-retire' );
|
||||
grunt.loadNpmTasks( 'grunt-sass' );
|
||||
grunt.loadNpmTasks( 'grunt-zip' );
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-nodeunit');
|
||||
|
||||
// Default task
|
||||
grunt.registerTask( 'default', [ 'css', 'js' ] );
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
Copyright (C) 2017 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
|
||||
|
|
|
|||
|
|
@ -4,8 +4,14 @@ A framework for easily creating beautiful presentations using HTML. [Check out t
|
|||
|
||||
reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github).
|
||||
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Online Editor](#online-editor)
|
||||
- [Installation](#installation)
|
||||
- [Basic setup](#basic-setup)
|
||||
- [Full setup](#full-setup)
|
||||
- [Folder Structure](#folder-structure)
|
||||
- [Instructions](#instructions)
|
||||
- [Markup](#markup)
|
||||
- [Markdown](#markdown)
|
||||
|
|
@ -17,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)
|
||||
|
|
@ -35,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)
|
||||
|
|
@ -46,23 +54,71 @@ reveal.js comes with a broad range of features including [nested slides](https:/
|
|||
- [Client presentation](#client-presentation)
|
||||
- [Socket.io server](#socketio-server)
|
||||
- [MathJax](#mathjax)
|
||||
- [Installation](#installation)
|
||||
- [Basic setup](#basic-setup)
|
||||
- [Full setup](#full-setup)
|
||||
- [Folder Structure](#folder-structure)
|
||||
- [License](#license)
|
||||
|
||||
#### More reading
|
||||
|
||||
- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.
|
||||
- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!
|
||||
- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.
|
||||
- [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js.
|
||||
|
||||
|
||||
## Online Editor
|
||||
|
||||
Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [https://slides.com](https://slides.com?ref=github).
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
|
||||
|
||||
### Basic setup
|
||||
|
||||
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
|
||||
|
||||
1. Download the latest version of reveal.js from <https://github.com/hakimel/reveal.js/releases>
|
||||
2. Unzip and replace the example contents in index.html with your own
|
||||
3. Open index.html in a browser to view it
|
||||
|
||||
### Full setup
|
||||
|
||||
Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
|
||||
|
||||
1. Install [Node.js](http://nodejs.org/) (4.0.0 or later)
|
||||
|
||||
1. Clone the reveal.js repository
|
||||
```sh
|
||||
$ git clone https://github.com/hakimel/reveal.js.git
|
||||
```
|
||||
|
||||
1. Navigate to the reveal.js folder
|
||||
```sh
|
||||
$ cd reveal.js
|
||||
```
|
||||
|
||||
1. Install dependencies
|
||||
```sh
|
||||
$ npm install
|
||||
```
|
||||
|
||||
1. Serve the presentation and monitor source files for changes
|
||||
```sh
|
||||
$ npm start
|
||||
```
|
||||
|
||||
1. Open <http://localhost:8000> to view your presentation
|
||||
|
||||
You can change the port by using `npm start -- --port=8001`.
|
||||
|
||||
### Folder Structure
|
||||
|
||||
- **css/** Core styles without which the project does not function
|
||||
- **js/** Like above but for JavaScript
|
||||
- **plugin/** Components that have been developed as extensions to reveal.js
|
||||
- **lib/** All other third party assets (JavaScript, CSS, fonts)
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
### Markup
|
||||
|
|
@ -121,22 +177,26 @@ This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Iri
|
|||
|
||||
#### External Markdown
|
||||
|
||||
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `note:`). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
|
||||
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
|
||||
|
||||
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
|
||||
|
||||
```html
|
||||
<section data-markdown="example.md"
|
||||
data-separator="^\n\n\n"
|
||||
data-separator-vertical="^\n\n"
|
||||
data-separator-notes="^Note:"
|
||||
<section data-markdown="example.md"
|
||||
data-separator="^\n\n\n"
|
||||
data-separator-vertical="^\n\n"
|
||||
data-separator-notes="^Note:"
|
||||
data-charset="iso-8859-15">
|
||||
<!--
|
||||
Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
|
||||
For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
|
||||
-->
|
||||
</section>
|
||||
```
|
||||
|
||||
#### Element Attributes
|
||||
|
||||
Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
|
||||
Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
|
||||
|
||||
```html
|
||||
<section data-markdown>
|
||||
|
|
@ -149,7 +209,7 @@ Special syntax (in html comment) is available for adding attributes to Markdown
|
|||
|
||||
#### Slide Attributes
|
||||
|
||||
Special syntax (in html comment) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
|
||||
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
|
||||
|
||||
```html
|
||||
<section data-markdown>
|
||||
|
|
@ -167,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
|
||||
}
|
||||
|
|
@ -176,7 +236,7 @@ Reveal.initialize({
|
|||
|
||||
### Configuration
|
||||
|
||||
At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below.
|
||||
At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below.
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
|
|
@ -198,13 +258,14 @@ Reveal.initialize({
|
|||
// Display a presentation progress bar
|
||||
progress: true,
|
||||
|
||||
// Set default timing of 2 minutes per slide
|
||||
defaultTiming: 120,
|
||||
|
||||
// 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
|
||||
|
|
@ -225,12 +286,19 @@ 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,
|
||||
|
||||
// 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: false,
|
||||
|
||||
// Flags if the presentation is running in an embedded mode,
|
||||
// i.e. contained within a limited portion of the screen
|
||||
embedded: false,
|
||||
|
|
@ -248,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
|
||||
|
|
@ -259,13 +334,26 @@ Reveal.initialize({
|
|||
// Use this method for navigation when auto-sliding
|
||||
autoSlideMethod: Reveal.navigateNext,
|
||||
|
||||
// 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: 120,
|
||||
|
||||
// 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,
|
||||
|
||||
// Opens links in an iframe preview overlay
|
||||
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
|
||||
// individually
|
||||
previewLinks: false,
|
||||
|
||||
// Transition style
|
||||
|
|
@ -298,8 +386,7 @@ Reveal.initialize({
|
|||
});
|
||||
```
|
||||
|
||||
|
||||
The configuration can be updated after initialization using the ```configure``` method:
|
||||
The configuration can be updated after initialization using the `configure` method:
|
||||
|
||||
```javascript
|
||||
// Turn autoSlide off
|
||||
|
|
@ -309,17 +396,16 @@ Reveal.configure({ autoSlide: 0 });
|
|||
Reveal.configure({ autoSlide: 5000 });
|
||||
```
|
||||
|
||||
|
||||
### Presentation Size
|
||||
|
||||
All presentations have a normal size, that is the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
|
||||
All presentations have a normal size, that is, the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport.
|
||||
|
||||
See below for a list of configuration options related to sizing, including default values:
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
|
||||
...
|
||||
// ...
|
||||
|
||||
// The "normal" size of the presentation, aspect ratio will be preserved
|
||||
// when the presentation is scaled to fit different resolutions. Can be
|
||||
|
|
@ -342,7 +428,7 @@ If you wish to disable this behavior and do your own scaling (e.g. using media q
|
|||
```javascript
|
||||
Reveal.initialize({
|
||||
|
||||
...
|
||||
// ...
|
||||
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
|
|
@ -359,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]' ); } },
|
||||
|
|
@ -387,11 +470,9 @@ 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()`.
|
||||
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()`.
|
||||
|
||||
```javascript
|
||||
Reveal.addEventListener( 'ready', function( event ) {
|
||||
|
|
@ -411,9 +492,10 @@ Reveal.configure({
|
|||
autoSlide: 5000
|
||||
});
|
||||
```
|
||||
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
|
||||
|
||||
You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
|
||||
When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »A« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying `autoSlideStoppable: false` in your reveal.js config.
|
||||
|
||||
You can also override the slide duration for individual slides and fragments by using the `data-autoslide` attribute:
|
||||
|
||||
```html
|
||||
<section data-autoslide="2000">
|
||||
|
|
@ -423,14 +505,13 @@ You can also override the slide duration for individual slides and fragments by
|
|||
</section>
|
||||
```
|
||||
|
||||
To override the method used for navigation when auto-sliding, you can specify the ```autoSlideMethod``` setting. To only navigate along the top layer and ignore vertical slides, set this to ```Reveal.navigateRight```.
|
||||
|
||||
Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
|
||||
To override the method used for navigation when auto-sliding, you can specify the `autoSlideMethod` setting. To only navigate along the top layer and ignore vertical slides, set this to `Reveal.navigateRight`.
|
||||
|
||||
Whenever the auto-slide mode is resumed or paused the `autoslideresumed` and `autoslidepaused` events are fired.
|
||||
|
||||
### Keyboard Bindings
|
||||
|
||||
If you're unhappy with any of the default keyboard bindings you can override them using the ```keyboard``` config option:
|
||||
If you're unhappy with any of the default keyboard bindings you can override them using the `keyboard` config option:
|
||||
|
||||
```javascript
|
||||
Reveal.configure({
|
||||
|
|
@ -442,18 +523,32 @@ 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` `2.1`<br>`1.2` `2.2`<br>`1.3` `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.
|
||||
|
||||
If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled.
|
||||
|
||||
|
||||
### Lazy Loading
|
||||
|
||||
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>
|
||||
|
|
@ -466,10 +561,29 @@ 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:
|
||||
The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
|
||||
|
||||
```javascript
|
||||
// Navigation
|
||||
|
|
@ -508,11 +622,11 @@ Reveal.getScale();
|
|||
Reveal.getPreviousSlide();
|
||||
Reveal.getCurrentSlide();
|
||||
|
||||
Reveal.getIndices(); // { h: 0, v: 0 } }
|
||||
Reveal.getPastSlideCount();
|
||||
Reveal.getIndices(); // { h: 0, v: 0, f: 0 }
|
||||
Reveal.getSlidePastCount();
|
||||
Reveal.getProgress(); // (0 == first slide, 1 == last slide)
|
||||
Reveal.getSlides(); // Array of all slides
|
||||
Reveal.getTotalSlides(); // total number of slides
|
||||
Reveal.getTotalSlides(); // Total number of slides
|
||||
|
||||
// Returns the speaker notes for the current slide
|
||||
Reveal.getSlideNotes();
|
||||
|
|
@ -523,11 +637,45 @@ Reveal.isLastSlide();
|
|||
Reveal.isOverview();
|
||||
Reveal.isPaused();
|
||||
Reveal.isAutoSliding();
|
||||
|
||||
// Returns the top-level DOM element
|
||||
getRevealElement(); // <div class="reveal">...</div>
|
||||
```
|
||||
|
||||
### Custom Key Bindings
|
||||
|
||||
Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option.
|
||||
|
||||
```javascript
|
||||
Reveal.addKeyBinding( binding, callback );
|
||||
Reveal.removeKeyBinding( keyCode );
|
||||
```
|
||||
|
||||
For example
|
||||
|
||||
```javascript
|
||||
// The binding parameter provides the following properties
|
||||
// keyCode: the keycode for binding to the callback
|
||||
// key: the key label to show in the help overlay
|
||||
// description: the description of the action to show in the help overlay
|
||||
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
|
||||
// start timer
|
||||
} )
|
||||
|
||||
// The binding parameter can also be a direct keycode without providing the help description
|
||||
Reveal.addKeyBinding( 82, function() {
|
||||
// reset timer
|
||||
} )
|
||||
```
|
||||
|
||||
This allows plugins to add key bindings directly to Reveal so they can
|
||||
|
||||
* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
|
||||
* be included in the help overlay (optional)
|
||||
|
||||
### Slide Changed Event
|
||||
|
||||
A 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
|
||||
A `slidechanged` event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
|
||||
|
||||
Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.
|
||||
|
||||
|
|
@ -556,7 +704,7 @@ Reveal.setState( state );
|
|||
|
||||
### Slide States
|
||||
|
||||
If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
|
||||
If you set `data-state="somestate"` on a slide `<section>`, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
|
||||
|
||||
Furthermore you can also listen to these changes in state via JavaScript:
|
||||
|
||||
|
|
@ -568,10 +716,12 @@ Reveal.addEventListener( 'somestate', function() {
|
|||
|
||||
### Slide Backgrounds
|
||||
|
||||
Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a ```data-background``` attribute to your ```<section>``` elements. Four different types of backgrounds are supported: color, image, video and iframe.
|
||||
Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `data-background` attribute to your `<section>` elements. Four different types of backgrounds are supported: color, image, video and iframe.
|
||||
|
||||
#### Color Backgrounds
|
||||
All CSS color formats are supported, like rgba() or hsl().
|
||||
|
||||
All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`.
|
||||
|
||||
```html
|
||||
<section data-background-color="#ff0000">
|
||||
<h2>Color</h2>
|
||||
|
|
@ -579,14 +729,17 @@ All CSS color formats are supported, like rgba() or hsl().
|
|||
```
|
||||
|
||||
#### Image Backgrounds
|
||||
|
||||
By default, background images are resized to cover the full page. Available options:
|
||||
|
||||
| Attribute | Default | Description |
|
||||
| :--------------------------- | :--------- | :---------- |
|
||||
| data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
|
||||
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
|
||||
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
|
||||
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
|
||||
| Attribute | Default | Description |
|
||||
| :------------------------------- | :--------- | :---------- |
|
||||
| data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
|
||||
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
|
||||
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
|
||||
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
|
||||
| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
||||
|
||||
```html
|
||||
<section data-background-image="http://example.com/image.png">
|
||||
<h2>Image</h2>
|
||||
|
|
@ -597,14 +750,16 @@ By default, background images are resized to cover the full page. Available opti
|
|||
```
|
||||
|
||||
#### Video Backgrounds
|
||||
|
||||
Automatically plays a full size video behind the slide.
|
||||
|
||||
| Attribute | Default | Description |
|
||||
| :--------------------------- | :------ | :---------- |
|
||||
| data-background-video | | A single video source, or a comma separated list of video sources. |
|
||||
| data-background-video-loop | false | Flags if the video should play repeatedly. |
|
||||
| data-background-video-muted | false | Flags if the audio should be muted. |
|
||||
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
|
||||
| Attribute | Default | Description |
|
||||
| :--------------------------- | :------ | :---------- |
|
||||
| data-background-video | | A single video source, or a comma separated list of video sources. |
|
||||
| data-background-video-loop | false | Flags if the video should play repeatedly. |
|
||||
| data-background-video-muted | false | Flags if the audio should be muted. |
|
||||
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
|
||||
| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
||||
|
||||
```html
|
||||
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
|
||||
|
|
@ -613,7 +768,9 @@ Automatically plays a full size video behind the slide.
|
|||
```
|
||||
|
||||
#### Iframe Backgrounds
|
||||
|
||||
Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
|
||||
|
||||
```html
|
||||
<section data-background-iframe="https://slides.com" data-background-interactive>
|
||||
<h2>Iframe</h2>
|
||||
|
|
@ -621,12 +778,13 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width
|
|||
```
|
||||
|
||||
#### Background Transitions
|
||||
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'slide'``` to the ```Reveal.initialize()``` call. Alternatively you can set ```data-background-transition``` on any section with a background to override that specific transition.
|
||||
|
||||
Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing `backgroundTransition: 'slide'` to the `Reveal.initialize()` call. Alternatively you can set `data-background-transition` on any section with a background to override that specific transition.
|
||||
|
||||
|
||||
### Parallax Background
|
||||
|
||||
If you want to use a parallax scrolling background, set the first two config properties below when initializing reveal.js (the other two are optional).
|
||||
If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional).
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
|
|
@ -648,10 +806,9 @@ Reveal.initialize({
|
|||
|
||||
Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://revealjs.com/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px).
|
||||
|
||||
|
||||
|
||||
### Slide Transitions
|
||||
The global presentation transition is set using the ```transition``` config value. You can override the global transition for a specific slide by using the ```data-transition``` attribute:
|
||||
|
||||
The global presentation transition is set using the `transition` config value. You can override the global transition for a specific slide by using the `data-transition` attribute:
|
||||
|
||||
```html
|
||||
<section data-transition="zoom">
|
||||
|
|
@ -682,18 +839,17 @@ You can also use different in and out transitions for the same slide:
|
|||
And it starts again.
|
||||
</section>
|
||||
```
|
||||
|
||||
|
||||
You can choose from `none`, `fade`, `slide`, `convex`, `concave` and `zoom`.
|
||||
### Internal links
|
||||
|
||||
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):
|
||||
It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (`<section id="some-slide">`):
|
||||
|
||||
```html
|
||||
<a href="#/2/2">Link</a>
|
||||
<a href="#/some-slide">Link</a>
|
||||
```
|
||||
|
||||
You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an ```enabled``` class when it's a valid navigation route based on the current slide.
|
||||
You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an `enabled` class when it's a valid navigation route based on the current slide.
|
||||
|
||||
```html
|
||||
<a href="#" class="navigate-left">
|
||||
|
|
@ -704,9 +860,9 @@ You can also add relative navigation links, similar to the built in reveal.js co
|
|||
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
|
||||
```
|
||||
|
||||
|
||||
### Fragments
|
||||
Fragments are used to highlight individual elements on a slide. Every element with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://revealjs.com/#/fragments
|
||||
|
||||
Fragments are used to highlight individual elements on a slide. Every element with the class `fragment` will be stepped through before moving on to the next slide. Here's an example: http://revealjs.com/#/fragments
|
||||
|
||||
The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment:
|
||||
|
||||
|
|
@ -716,7 +872,8 @@ The default fragment style is to start out invisible and fade in. This style can
|
|||
<p class="fragment shrink">shrink</p>
|
||||
<p class="fragment fade-out">fade-out</p>
|
||||
<p class="fragment fade-up">fade-up (also down, left and right!)</p>
|
||||
<p class="fragment current-visible">visible only once</p>
|
||||
<p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
|
||||
<p class="fragment fade-in-then-semi-out">fades in, then obfuscate when we move to the next step</p>
|
||||
<p class="fragment highlight-current-blue">blue only once</p>
|
||||
<p class="fragment highlight-red">highlight-red</p>
|
||||
<p class="fragment highlight-green">highlight-green</p>
|
||||
|
|
@ -734,7 +891,7 @@ Multiple fragments can be applied to the same element sequentially by wrapping i
|
|||
</section>
|
||||
```
|
||||
|
||||
The display order of fragments can be controlled using the ```data-fragment-index``` attribute.
|
||||
The display order of fragments can be controlled using the `data-fragment-index` attribute.
|
||||
|
||||
```html
|
||||
<section>
|
||||
|
|
@ -761,7 +918,18 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
|
|||
|
||||
### Code syntax highlighting
|
||||
|
||||
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using `<mark>` to call out a line of code, add the `data-noescape` attribute to the `<code>` element.
|
||||
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({
|
||||
// More info https://github.com/hakimel/reveal.js#dependencies
|
||||
dependencies: [
|
||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using `<mark>` to call out a line of code, add the `data-noescape` attribute to the `<code>` element.
|
||||
|
||||
```html
|
||||
<section>
|
||||
|
|
@ -776,7 +944,8 @@ By default, Reveal is configured with [highlight.js](https://highlightjs.org/) f
|
|||
```
|
||||
|
||||
### Slide number
|
||||
If you would like to display the page number of the current slide you can do so using the ```slideNumber``` and ```showSlideNumber``` configuration values.
|
||||
|
||||
If you would like to display the page number of the current slide you can do so using the `slideNumber` and `showSlideNumber` configuration values.
|
||||
|
||||
```javascript
|
||||
// Shows the slide number using default formatting
|
||||
|
|
@ -789,18 +958,22 @@ 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
|
||||
// "print": only show slide numbers when printing to PDF
|
||||
Reveal.configure({ showSlideNumber: 'speaker' });
|
||||
|
||||
```
|
||||
|
||||
|
||||
### Overview mode
|
||||
|
||||
Press "Esc" or "o" keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
|
||||
Press »ESC« or »O« keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
|
||||
as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
|
||||
|
||||
```javascript
|
||||
|
|
@ -811,12 +984,12 @@ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
|
|||
Reveal.toggleOverview();
|
||||
```
|
||||
|
||||
|
||||
### Fullscreen mode
|
||||
|
||||
Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
|
||||
|
||||
|
||||
### Embedded media
|
||||
|
||||
Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown:
|
||||
|
||||
```html
|
||||
|
|
@ -827,14 +1000,13 @@ If you want to enable or disable autoplay globally, for all embedded media, you
|
|||
|
||||
Note that embedded HTML5 `<video>`/`<audio>` and YouTube/Vimeo iframes are automatically paused when you navigate away from a slide. This can be disabled by decorating your element with a `data-ignore` attribute.
|
||||
|
||||
|
||||
### Embedded iframes
|
||||
|
||||
reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. ```slide:start``` when the slide containing the iframe is made visible and ```slide:stop``` when it is hidden.
|
||||
|
||||
reveal.js automatically pushes two [post messages](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) to embedded iframes. `slide:start` when the slide containing the iframe is made visible and `slide:stop` when it is hidden.
|
||||
|
||||
### Stretching elements
|
||||
Sometimes it's desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the ```.stretch``` class to an element as seen below:
|
||||
|
||||
Sometimes it's desirable to have an element, like an image or video, stretch to consume as much space as possible within a given slide. This can be done by adding the `.stretch` class to an element as seen below:
|
||||
|
||||
```html
|
||||
<section>
|
||||
|
|
@ -847,8 +1019,18 @@ 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:
|
||||
|
||||
```javascript
|
||||
|
|
@ -870,7 +1052,7 @@ This cross-window messaging can be toggled on or off using configuration flags.
|
|||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
...,
|
||||
// ...
|
||||
|
||||
// Exposes the reveal.js API through window.postMessage
|
||||
postMessage: true,
|
||||
|
|
@ -883,13 +1065,20 @@ 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
|
||||
[Fragments](#fragments) are printed on separate slides by default. Meaning if you have a slide with three fragment steps, it will generate three separate slides where the fragments appear incrementally.
|
||||
|
||||
If you prefer printing all fragments in their visible states on the same slide you can set the `pdfSeparateFragments` config option to false.
|
||||
|
||||
### Page size
|
||||
|
||||
Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
|
||||
|
||||
### Print stylesheet
|
||||
|
||||
To enable the PDF print capability in your presentation, the special print stylesheet at [/css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) must be loaded. The default index.html file handles this for you when `print-pdf` is included in the query string. If you're using a different HTML template, you can add this to your HEAD:
|
||||
|
||||
```html
|
||||
|
|
@ -903,6 +1092,7 @@ To enable the PDF print capability in your presentation, the special print style
|
|||
```
|
||||
|
||||
### Instructions
|
||||
|
||||
1. Open your presentation with `print-pdf` included in the query string i.e. http://localhost:8000/?print-pdf. You can test this with [revealjs.com?print-pdf](http://revealjs.com?print-pdf).
|
||||
* If you want to include [speaker notes](#speaker-notes) in your export, you can append `showNotes=true` to the query string: http://localhost:8000/?print-pdf&showNotes=true
|
||||
1. Open the in-browser print dialog (CTRL/CMD+P).
|
||||
|
|
@ -916,6 +1106,7 @@ To enable the PDF print capability in your presentation, the special print style
|
|||
|
||||
Alternatively you can use the [decktape](https://github.com/astefanutti/decktape) project.
|
||||
|
||||
|
||||
## Theming
|
||||
|
||||
The framework comes with a few different themes included:
|
||||
|
|
@ -941,11 +1132,11 @@ If you want to add a theme of your own see the instructions here: [/css/theme/RE
|
|||
|
||||
## Speaker Notes
|
||||
|
||||
reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the 's' key on your keyboard to open the notes window.
|
||||
reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the »S« key on your keyboard to open the notes window.
|
||||
|
||||
A speaker timer starts as soon as the speaker view is opened. You can reset it to 00:00:00 at any time by simply clicking/tapping on it.
|
||||
|
||||
Notes are defined by appending an ```<aside>``` element to a slide as seen below. You can add the ```data-markdown``` attribute to the aside element if you prefer writing notes using Markdown.
|
||||
Notes are defined by appending an `<aside>` element to a slide as seen below. You can add the `data-markdown` attribute to the aside element if you prefer writing notes using Markdown.
|
||||
|
||||
Alternatively you can add your notes in a `data-notes` attribute on the slide. Like `<section data-notes="Something important"></section>`.
|
||||
|
||||
|
|
@ -956,7 +1147,7 @@ When used locally, this feature requires that reveal.js [runs from a local web s
|
|||
<h2>Some Slide</h2>
|
||||
|
||||
<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).
|
||||
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>
|
||||
```
|
||||
|
|
@ -977,9 +1168,9 @@ This will only display in the notes window.
|
|||
|
||||
#### Share and Print Speaker Notes
|
||||
|
||||
Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` config value set to `true`. Notes will appear along the bottom of the presentations.
|
||||
Notes are only visible to the speaker inside of the speaker view. If you wish to share your notes with others you can initialize reveal.js with the `showNotes` configuration value set to `true`. Notes will appear along the bottom of the presentations.
|
||||
|
||||
When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a semi-transparent box on top of the slide. If you'd rather print them on a separate page after the slide, set `showNotes: "separate-page"`.
|
||||
When `showNotes` is enabled notes are also included when you [export to PDF](https://github.com/hakimel/reveal.js#pdf-export). By default, notes are printed in a box on top of the slide. If you'd rather print them on a separate page, after the slide, set `showNotes: "separate-page"`.
|
||||
|
||||
#### Speaker notes clock and timers
|
||||
|
||||
|
|
@ -998,7 +1189,7 @@ In some cases it can be desirable to run notes on a separate device from the one
|
|||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
...
|
||||
// ...
|
||||
|
||||
dependencies: [
|
||||
{ src: 'socket.io/socket.io.js', async: true },
|
||||
|
|
@ -1010,8 +1201,8 @@ Reveal.initialize({
|
|||
Then:
|
||||
|
||||
1. Install [Node.js](http://nodejs.org/) (4.0.0 or later)
|
||||
2. Run ```npm install```
|
||||
3. Run ```node plugin/notes-server```
|
||||
2. Run `npm install`
|
||||
3. Run `node plugin/notes-server`
|
||||
|
||||
|
||||
## Multiplexing
|
||||
|
|
@ -1024,19 +1215,19 @@ The multiplex plugin needs the following 3 things to operate:
|
|||
2. Client presentations that follow the master
|
||||
3. Socket.io server to broadcast events from the master to the clients
|
||||
|
||||
More details:
|
||||
|
||||
#### Master presentation
|
||||
|
||||
Served from a static file server accessible (preferably) only to the presenter. This need only be on your (the presenter's) computer. (It's safer to run the master presentation from your own computer, so if the venue's Internet goes down it doesn't stop the show.) An example would be to execute the following commands in the directory of your master presentation:
|
||||
|
||||
1. ```npm install node-static```
|
||||
2. ```static```
|
||||
1. `npm install node-static`
|
||||
2. `static`
|
||||
|
||||
If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute ```node plugin/notes-server``` in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.
|
||||
If you want to use the speaker notes plugin with your master presentation then make sure you have the speaker notes plugin configured correctly along with the configuration shown below, then execute `node plugin/notes-server` in the directory of your master presentation. The configuration below will cause it to connect to the socket.io server as a master, as well as launch your speaker-notes/static-file server.
|
||||
|
||||
You can then access your master presentation at ```http://localhost:1947```
|
||||
You can then access your master presentation at `http://localhost:1947`
|
||||
|
||||
Example configuration:
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// other options...
|
||||
|
|
@ -1050,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
|
||||
|
|
@ -1062,9 +1253,11 @@ Reveal.initialize({
|
|||
```
|
||||
|
||||
#### Client presentation
|
||||
Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via ```http://example.com/path/to/presentation/client/index.html```, with the configuration below causing them to connect to the socket.io server as clients.
|
||||
|
||||
Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via `http://example.com/path/to/presentation/client/index.html`, with the configuration below causing them to connect to the socket.io server as clients.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// other options...
|
||||
|
|
@ -1078,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...
|
||||
|
|
@ -1087,14 +1280,15 @@ Reveal.initialize({
|
|||
```
|
||||
|
||||
#### Socket.io server
|
||||
Server that receives the slideChanged events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:
|
||||
|
||||
1. ```npm install```
|
||||
2. ```node plugin/multiplex```
|
||||
Server that receives the `slideChanged` events from the master presentation and broadcasts them out to the connected client presentations. This needs to be publicly accessible. You can run your own socket.io server with the commands:
|
||||
|
||||
1. `npm install`
|
||||
2. `node plugin/multiplex`
|
||||
|
||||
Or you can use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/).
|
||||
|
||||
You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit ```http://example.com/token```, where ```http://example.com``` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token).
|
||||
You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit `http://example.com/token`, where `http://example.com` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token).
|
||||
|
||||
You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed.
|
||||
|
||||
|
|
@ -1105,6 +1299,7 @@ For anything mission critical I recommend you run your own server. The easiest w
|
|||
The socket.io server can play the role of static file server for your client presentation, as in the example at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match.)
|
||||
|
||||
Example configuration:
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// other options...
|
||||
|
|
@ -1118,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...
|
||||
|
|
@ -1128,6 +1323,7 @@ Reveal.initialize({
|
|||
It can also play the role of static file server for your master presentation and client presentations at the same time (as long as you don't want to use speaker notes). (Open [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/) in two browsers. Navigate through the slides on one, and the other will update to match. Navigate through the slides on the second, and the first will update to match.) This is probably not desirable, because you don't want your audience to mess with your slides while you're presenting. ;)
|
||||
|
||||
Example configuration:
|
||||
|
||||
```javascript
|
||||
Reveal.initialize({
|
||||
// other options...
|
||||
|
|
@ -1141,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 }
|
||||
|
||||
|
|
@ -1150,89 +1346,43 @@ Reveal.initialize({
|
|||
});
|
||||
```
|
||||
|
||||
|
||||
## MathJax
|
||||
|
||||
If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies).
|
||||
|
||||
The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the ```math``` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the ```mathjax``` configuration value.
|
||||
The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the `math` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the `mathjax` configuration value.
|
||||
|
||||
Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the ```math``` config object at all.
|
||||
Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the `math` config object at all.
|
||||
|
||||
```js
|
||||
Reveal.initialize({
|
||||
|
||||
// other options ...
|
||||
|
||||
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: [
|
||||
{ src: 'plugin/math/math.js', async: true }
|
||||
]
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
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 formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
|
||||
|
||||
## Installation
|
||||
|
||||
The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
|
||||
|
||||
### Basic setup
|
||||
|
||||
The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser.
|
||||
|
||||
1. Download the latest version of reveal.js from <https://github.com/hakimel/reveal.js/releases>
|
||||
|
||||
2. Unzip and replace the example contents in index.html with your own
|
||||
|
||||
3. Open index.html in a browser to view it
|
||||
|
||||
|
||||
### Full setup
|
||||
|
||||
Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
|
||||
|
||||
1. Install [Node.js](http://nodejs.org/) (4.0.0 or later)
|
||||
|
||||
1. Clone the reveal.js repository
|
||||
```sh
|
||||
$ git clone https://github.com/hakimel/reveal.js.git
|
||||
```
|
||||
|
||||
1. Navigate to the reveal.js folder
|
||||
```sh
|
||||
$ cd reveal.js
|
||||
```
|
||||
|
||||
1. Install dependencies
|
||||
```sh
|
||||
$ npm install
|
||||
```
|
||||
|
||||
1. Serve the presentation and monitor source files for changes
|
||||
```sh
|
||||
$ npm start
|
||||
```
|
||||
|
||||
1. Open <http://localhost:8000> to view your presentation
|
||||
|
||||
You can change the port by using `npm start -- --port=8001`.
|
||||
|
||||
|
||||
### Folder Structure
|
||||
- **css/** Core styles without which the project does not function
|
||||
- **js/** Like above but for JavaScript
|
||||
- **plugin/** Components that have been developed as extensions to reveal.js
|
||||
- **lib/** All other third party assets (JavaScript, CSS, fonts)
|
||||
|
||||
```
|
||||
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT licensed
|
||||
|
||||
Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "reveal.js",
|
||||
"version": "3.6.0",
|
||||
"version": "3.8.0",
|
||||
"main": [
|
||||
"js/reveal.js",
|
||||
"css/reveal.css"
|
||||
|
|
@ -11,9 +11,6 @@
|
|||
"authors": [
|
||||
"Hakim El Hattab <hakim.elhattab@gmail.com>"
|
||||
],
|
||||
"dependencies": {
|
||||
"headjs": "~1.0.3"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/hakimel/reveal.js.git"
|
||||
|
|
|
|||
|
|
@ -72,15 +72,8 @@ ul, ol, div, p {
|
|||
overflow: visible;
|
||||
display: block;
|
||||
|
||||
-webkit-perspective: none;
|
||||
-moz-perspective: none;
|
||||
-ms-perspective: none;
|
||||
perspective: none;
|
||||
|
||||
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
|
||||
-moz-perspective-origin: 50% 50%;
|
||||
-ms-perspective-origin: 50% 50%;
|
||||
perspective-origin: 50% 50%;
|
||||
perspective: none;
|
||||
perspective-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.reveal .slides .pdf-page {
|
||||
|
|
@ -103,15 +96,8 @@ ul, ol, div, p {
|
|||
|
||||
opacity: 1 !important;
|
||||
|
||||
-webkit-transform-style: flat !important;
|
||||
-moz-transform-style: flat !important;
|
||||
-ms-transform-style: flat !important;
|
||||
transform-style: flat !important;
|
||||
|
||||
-webkit-transform: none !important;
|
||||
-moz-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
transform-style: flat !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.reveal section.stack {
|
||||
|
|
|
|||
30
static/reveal.js/css/reset.css
Normal file
30
static/reveal.js/css/reset.css
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;
|
||||
}
|
||||
|
|
@ -3,47 +3,24 @@
|
|||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
/*********************************************
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline; }
|
||||
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block; }
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
html,
|
||||
body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: calc( var(--vh, 1vh) * 100);
|
||||
overflow: hidden; }
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
color: #000; }
|
||||
|
||||
|
|
@ -127,13 +104,25 @@ body {
|
|||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0); }
|
||||
|
||||
.reveal .slides section .fragment.fade-in-then-out,
|
||||
.reveal .slides section .fragment.current-visible {
|
||||
opacity: 0;
|
||||
visibility: hidden; }
|
||||
.reveal .slides section .fragment.fade-in-then-out.current-fragment,
|
||||
.reveal .slides section .fragment.current-visible.current-fragment {
|
||||
opacity: 1;
|
||||
visibility: inherit; }
|
||||
|
||||
.reveal .slides section .fragment.fade-in-then-semi-out {
|
||||
opacity: 0;
|
||||
visibility: hidden; }
|
||||
.reveal .slides section .fragment.fade-in-then-semi-out.visible {
|
||||
opacity: 0.5;
|
||||
visibility: inherit; }
|
||||
.reveal .slides section .fragment.fade-in-then-semi-out.current-fragment {
|
||||
opacity: 1;
|
||||
visibility: inherit; }
|
||||
|
||||
.reveal .slides section .fragment.highlight-red,
|
||||
.reveal .slides section .fragment.highlight-current-red,
|
||||
.reveal .slides section .fragment.highlight-green,
|
||||
|
|
@ -260,7 +249,7 @@ body {
|
|||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
.reveal .controls .controls-arrow:before,
|
||||
.reveal .controls .controls-arrow:after {
|
||||
content: '';
|
||||
|
|
@ -354,10 +343,16 @@ body {
|
|||
.reveal .controls .enabled.fragmented:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
|
||||
display: none; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: 1.4em;
|
||||
right: 5.5em; }
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: 1.4em;
|
||||
right: 0.5em; }
|
||||
|
|
@ -448,7 +443,7 @@ body {
|
|||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
|
|
@ -460,6 +455,9 @@ body {
|
|||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding: 5px; }
|
||||
|
||||
.reveal .slide-number a {
|
||||
color: currentColor; }
|
||||
|
||||
.reveal .slide-number-delimiter {
|
||||
margin: 0 3px; }
|
||||
|
||||
|
|
@ -471,12 +469,8 @@ body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none; }
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed; } }
|
||||
-ms-touch-action: pinch-zoom;
|
||||
touch-action: pinch-zoom; }
|
||||
|
||||
.reveal .slides {
|
||||
position: absolute;
|
||||
|
|
@ -497,7 +491,8 @@ body {
|
|||
perspective-origin: 50% 40%; }
|
||||
|
||||
.reveal .slides > section {
|
||||
-ms-perspective: 600px; }
|
||||
-webkit-perspective: 600px;
|
||||
perspective: 600px; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
|
|
@ -528,7 +523,9 @@ body {
|
|||
|
||||
.reveal .slides > section.stack {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0; }
|
||||
padding-bottom: 0;
|
||||
pointer-events: none;
|
||||
height: 100%; }
|
||||
|
||||
.reveal .slides > section.present,
|
||||
.reveal .slides > section > section.present {
|
||||
|
|
@ -745,14 +742,14 @@ body {
|
|||
.reveal .slides > section > section[data-transition=zoom].past,
|
||||
.reveal .slides > section > section[data-transition~=zoom-out].past,
|
||||
.reveal.zoom .slides > section > section:not([data-transition]).past {
|
||||
-webkit-transform: translate(0, -150%);
|
||||
transform: translate(0, -150%); }
|
||||
-webkit-transform: scale(16);
|
||||
transform: scale(16); }
|
||||
|
||||
.reveal .slides > section > section[data-transition=zoom].future,
|
||||
.reveal .slides > section > section[data-transition~=zoom-in].future,
|
||||
.reveal.zoom .slides > section > section:not([data-transition]).future {
|
||||
-webkit-transform: translate(0, 150%);
|
||||
transform: translate(0, 150%); }
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2); }
|
||||
|
||||
/*********************************************
|
||||
* CUBE TRANSITION
|
||||
|
|
@ -948,6 +945,21 @@ body {
|
|||
z-index: 100;
|
||||
transition: all 1s ease; }
|
||||
|
||||
.reveal .pause-overlay .resume-button {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
color: #ccc;
|
||||
border-radius: 2px;
|
||||
padding: 6px 14px;
|
||||
border: 2px solid #ccc;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
cursor: pointer; }
|
||||
.reveal .pause-overlay .resume-button:hover {
|
||||
color: #fff;
|
||||
border-color: #fff; }
|
||||
|
||||
.reveal.paused .pause-overlay {
|
||||
visibility: visible;
|
||||
opacity: 1; }
|
||||
|
|
@ -958,34 +970,35 @@ body {
|
|||
.no-transforms {
|
||||
overflow-y: auto; }
|
||||
|
||||
.no-transforms .reveal {
|
||||
overflow: visible; }
|
||||
|
||||
.no-transforms .reveal .slides {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: auto !important;
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center; }
|
||||
|
||||
.no-transforms .reveal .controls,
|
||||
.no-transforms .reveal .progress {
|
||||
display: none !important; }
|
||||
display: none; }
|
||||
|
||||
.no-transforms .reveal .slides section {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
position: relative !important;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
left: 0;
|
||||
margin: 10vh 0;
|
||||
margin: 70px 0;
|
||||
-webkit-transform: none;
|
||||
transform: none; }
|
||||
|
||||
.no-transforms .reveal .slides section section {
|
||||
left: 0; }
|
||||
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
transition: none !important; }
|
||||
|
|
@ -1010,11 +1023,16 @@ body {
|
|||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
.reveal .slide-background-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
background-size: cover; }
|
||||
|
||||
.reveal .slide-background.stack {
|
||||
display: block; }
|
||||
|
|
@ -1258,9 +1276,9 @@ body {
|
|||
transition-duration: 1200ms; }
|
||||
|
||||
/*********************************************
|
||||
* LINK PREVIEW OVERLAY
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
.reveal .overlay {
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -1272,11 +1290,11 @@ body {
|
|||
visibility: hidden;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay.visible {
|
||||
.reveal > .overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.reveal .overlay .spinner {
|
||||
.reveal > .overlay .spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
|
|
@ -1290,7 +1308,7 @@ body {
|
|||
opacity: 0.6;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay header {
|
||||
.reveal > .overlay header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -1299,7 +1317,7 @@ body {
|
|||
z-index: 2;
|
||||
border-bottom: 1px solid #222; }
|
||||
|
||||
.reveal .overlay header a {
|
||||
.reveal > .overlay header a {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -1309,10 +1327,10 @@ body {
|
|||
opacity: 0.6;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.reveal .overlay header a:hover {
|
||||
.reveal > .overlay header a:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal .overlay header a .icon {
|
||||
.reveal > .overlay header a .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -1320,13 +1338,13 @@ body {
|
|||
background-size: 100%;
|
||||
background-repeat: no-repeat; }
|
||||
|
||||
.reveal .overlay header a.close .icon {
|
||||
.reveal > .overlay header a.close .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }
|
||||
|
||||
.reveal .overlay header a.external .icon {
|
||||
.reveal > .overlay header a.external .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }
|
||||
|
||||
.reveal .overlay .viewport {
|
||||
.reveal > .overlay .viewport {
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -1336,7 +1354,7 @@ body {
|
|||
bottom: 0;
|
||||
left: 0; }
|
||||
|
||||
.reveal .overlay.overlay-preview .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -1346,11 +1364,11 @@ body {
|
|||
visibility: hidden;
|
||||
transition: all 0.3s ease; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport-inner {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
|
|
@ -1359,46 +1377,46 @@ body {
|
|||
text-align: center;
|
||||
letter-spacing: normal; }
|
||||
|
||||
.reveal .overlay.overlay-preview .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1; }
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .spinner {
|
||||
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scale(0.2);
|
||||
transform: scale(0.2); }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport {
|
||||
.reveal > .overlay.overlay-help .viewport {
|
||||
overflow: auto;
|
||||
color: #fff; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
text-align: center;
|
||||
letter-spacing: normal; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
font-size: 20px; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle; }
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px; }
|
||||
|
||||
|
|
@ -1412,12 +1430,32 @@ body {
|
|||
z-index: 30;
|
||||
cursor: pointer;
|
||||
transition: all 400ms ease;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
.reveal.overview .playback {
|
||||
opacity: 0;
|
||||
visibility: hidden; }
|
||||
|
||||
/*********************************************
|
||||
* CODE HIGHLGIHTING
|
||||
*********************************************/
|
||||
.reveal .hljs table {
|
||||
margin: initial; }
|
||||
|
||||
.reveal .hljs-ln-code,
|
||||
.reveal .hljs-ln-numbers {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.reveal .hljs-ln-numbers {
|
||||
opacity: 0.6;
|
||||
padding-right: 0.75em;
|
||||
text-align: right;
|
||||
vertical-align: top; }
|
||||
|
||||
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
|
||||
opacity: 0.4; }
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
|
|
@ -1476,7 +1514,7 @@ body {
|
|||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
width: 33.3333333333%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
|
|
@ -1504,7 +1542,7 @@ body {
|
|||
opacity: 0.5; }
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
max-width: 75%;
|
||||
overflow: visible; }
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
|
|
@ -1519,19 +1557,24 @@ body {
|
|||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
max-height: 70vh;
|
||||
overflow: visible; }
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 42.8571428571%; } }
|
||||
height: 42.8571428571%;
|
||||
height: 30vh;
|
||||
border: 0; } }
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%; }
|
||||
max-height: 60%;
|
||||
max-height: 60vh; }
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: 66.6666666667%; }
|
||||
height: 66.6666666667%;
|
||||
height: 40vh; }
|
||||
.reveal .speaker-notes {
|
||||
font-size: 14px; } }
|
||||
|
||||
|
|
|
|||
|
|
@ -3,55 +3,28 @@
|
|||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
* Copyright (C) 2019 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
|
||||
|
||||
/*********************************************
|
||||
* RESET STYLES
|
||||
*********************************************/
|
||||
|
||||
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
|
||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
|
||||
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
|
||||
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
|
||||
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
|
||||
.reveal b, .reveal u, .reveal center,
|
||||
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
|
||||
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
|
||||
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
|
||||
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
|
||||
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
|
||||
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
|
||||
.reveal time, .reveal mark, .reveal audio, .reveal video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
|
||||
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
|
||||
html,
|
||||
body {
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
height: calc( var(--vh, 1vh) * 100 );
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
|
|
@ -160,6 +133,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-in-then-out,
|
||||
.reveal .slides section .fragment.current-visible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -170,6 +144,21 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.fade-in-then-semi-out {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.visible {
|
||||
opacity: 0.5;
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
&.current-fragment {
|
||||
opacity: 1;
|
||||
visibility: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides section .fragment.highlight-red,
|
||||
.reveal .slides section .fragment.highlight-current-red,
|
||||
.reveal .slides section .fragment.highlight-green,
|
||||
|
|
@ -418,12 +407,19 @@ $controlsArrowAngleActive: 36deg;
|
|||
}
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Adjust the layout when there are no vertical slides
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em + $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
|
||||
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em;
|
||||
|
|
@ -540,7 +536,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
*********************************************/
|
||||
|
||||
.reveal .slide-number {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
|
|
@ -553,6 +549,10 @@ $controlsArrowAngleActive: 36deg;
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.reveal .slide-number a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.reveal .slide-number-delimiter {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
|
@ -566,17 +566,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
// Mobile Safari sometimes overlays a header at the top
|
||||
// of the page when in landscape mode. Using fixed
|
||||
// positioning ensures that reveal.js reduces its height
|
||||
// when this header is visible.
|
||||
@media only screen and (orientation : landscape) {
|
||||
.reveal.ua-iphone {
|
||||
position: fixed;
|
||||
}
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
|
|
@ -598,7 +588,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
}
|
||||
|
||||
.reveal .slides>section {
|
||||
-ms-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.reveal .slides>section,
|
||||
|
|
@ -636,6 +626,8 @@ $controlsArrowAngleActive: 36deg;
|
|||
.reveal .slides>section.stack {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.reveal .slides>section.present,
|
||||
|
|
@ -810,10 +802,10 @@ $controlsArrowAngleActive: 36deg;
|
|||
transform: scale(0.2);
|
||||
}
|
||||
@include transition-vertical-past(zoom) {
|
||||
transform: translate(0, -150%);
|
||||
transform: scale(16);
|
||||
}
|
||||
@include transition-vertical-future(zoom) {
|
||||
transform: translate(0, 150%);
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1013,6 +1005,25 @@ $controlsArrowAngleActive: 36deg;
|
|||
z-index: 100;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.reveal .pause-overlay .resume-button {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
color: #ccc;
|
||||
border-radius: 2px;
|
||||
padding: 6px 14px;
|
||||
border: 2px solid #ccc;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal.paused .pause-overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
|
|
@ -1027,37 +1038,38 @@ $controlsArrowAngleActive: 36deg;
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.no-transforms .reveal {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
height: auto !important;
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .controls,
|
||||
.no-transforms .reveal .progress {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
position: relative !important;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
left: 0;
|
||||
margin: 10vh 0;
|
||||
margin: 70px 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.no-transforms .reveal .slides section section {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
transition: none !important;
|
||||
|
|
@ -1086,11 +1098,18 @@ $controlsArrowAngleActive: 36deg;
|
|||
overflow: hidden;
|
||||
|
||||
background-color: rgba( 0, 0, 0, 0 );
|
||||
|
||||
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
.reveal .slide-background-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
.reveal .slide-background.stack {
|
||||
|
|
@ -1369,10 +1388,10 @@ $controlsArrowAngleActive: 36deg;
|
|||
|
||||
|
||||
/*********************************************
|
||||
* LINK PREVIEW OVERLAY
|
||||
* OVERLAY FOR LINK PREVIEWS AND HELP
|
||||
*********************************************/
|
||||
|
||||
.reveal .overlay {
|
||||
.reveal > .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -1384,12 +1403,12 @@ $controlsArrowAngleActive: 36deg;
|
|||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.reveal .overlay.visible {
|
||||
.reveal > .overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay .spinner {
|
||||
.reveal > .overlay .spinner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
|
|
@ -1405,7 +1424,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay header {
|
||||
.reveal > .overlay header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -1414,7 +1433,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
z-index: 2;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
.reveal .overlay header a {
|
||||
.reveal > .overlay header a {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -1425,10 +1444,10 @@ $controlsArrowAngleActive: 36deg;
|
|||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.reveal .overlay header a:hover {
|
||||
.reveal > .overlay header a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.reveal .overlay header a .icon {
|
||||
.reveal > .overlay header a .icon {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -1437,14 +1456,14 @@ $controlsArrowAngleActive: 36deg;
|
|||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.reveal .overlay header a.close .icon {
|
||||
.reveal > .overlay header a.close .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
|
||||
}
|
||||
.reveal .overlay header a.external .icon {
|
||||
.reveal > .overlay header a.external .icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.reveal .overlay .viewport {
|
||||
.reveal > .overlay .viewport {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 40px;
|
||||
|
|
@ -1453,7 +1472,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview .viewport iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -1465,12 +1484,12 @@ $controlsArrowAngleActive: 36deg;
|
|||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport iframe {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport iframe {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .viewport-inner {
|
||||
.reveal > .overlay.overlay-preview.loaded .viewport-inner {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
|
|
@ -1479,26 +1498,26 @@ $controlsArrowAngleActive: 36deg;
|
|||
text-align: center;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.reveal .overlay.overlay-preview .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview .x-frame-error {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.3s;
|
||||
}
|
||||
.reveal .overlay.overlay-preview.loaded .x-frame-error {
|
||||
.reveal > .overlay.overlay-preview.loaded .x-frame-error {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-preview.loaded .spinner {
|
||||
.reveal > .overlay.overlay-preview.loaded .spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0.2);
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport {
|
||||
.reveal > .overlay.overlay-help .viewport {
|
||||
overflow: auto;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 20px 20px 80px 20px;
|
||||
|
|
@ -1506,31 +1525,30 @@ $controlsArrowAngleActive: 36deg;
|
|||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table {
|
||||
border: 1px solid #fff;
|
||||
border-collapse: collapse;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
|
||||
width: 200px;
|
||||
padding: 14px;
|
||||
border: 1px solid #fff;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.reveal .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PLAYBACK COMPONENT
|
||||
*********************************************/
|
||||
|
|
@ -1551,6 +1569,32 @@ $controlsArrowAngleActive: 36deg;
|
|||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* CODE HIGHLGIHTING
|
||||
*********************************************/
|
||||
|
||||
.reveal .hljs table {
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-code,
|
||||
.reveal .hljs-ln-numbers {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.reveal .hljs-ln-numbers {
|
||||
opacity: 0.6;
|
||||
padding-right: 0.75em;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* ROLLING LINKS
|
||||
*********************************************/
|
||||
|
|
@ -1601,6 +1645,8 @@ $controlsArrowAngleActive: 36deg;
|
|||
* SPEAKER NOTES
|
||||
*********************************************/
|
||||
|
||||
$notesWidthPercent: 25%;
|
||||
|
||||
// Hide on-page notes
|
||||
.reveal aside.notes {
|
||||
display: none;
|
||||
|
|
@ -1611,7 +1657,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 25vw;
|
||||
width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
|
|
@ -1647,7 +1693,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
max-width: 100% - $notesWidthPercent;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1666,6 +1712,7 @@ $controlsArrowAngleActive: 36deg;
|
|||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
max-height: 70vh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -1674,17 +1721,21 @@ $controlsArrowAngleActive: 36deg;
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
height: 30vh;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.reveal .speaker-notes {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Themes are written using Sass to keep things modular and reduce the need for rep
|
|||
|
||||
## 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 by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`.
|
||||
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 by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `npm run build -- css-themes`.
|
||||
|
||||
Each theme file does four things in the following order:
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ body {
|
|||
background: rgba(79, 64, 28, 0.99);
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -193,10 +193,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -266,3 +268,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #f7f3de; } }
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
|
|||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
body {
|
||||
background: #222;
|
||||
background-color: #222; }
|
||||
background: #191919;
|
||||
background-color: #191919; }
|
||||
|
||||
.reveal {
|
||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
||||
|
|
@ -30,8 +30,8 @@ body {
|
|||
background: #bee4fd;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -189,10 +189,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -262,3 +264,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #191919; } }
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ body {
|
|||
background: #a23;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -192,10 +192,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -266,6 +268,13 @@ body {
|
|||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #222; } }
|
||||
|
||||
.reveal p {
|
||||
font-weight: 300;
|
||||
text-shadow: 1px 1px #222; }
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ body {
|
|||
background: #FF5E99;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -155,7 +155,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -195,10 +195,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -268,3 +270,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #2b2b2b; } }
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ body {
|
|||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -193,10 +193,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -266,3 +268,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #002b36; } }
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ body {
|
|||
background: #e7ad52;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -187,10 +187,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -260,3 +262,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #111; } }
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ body {
|
|||
background: #26351C;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -189,10 +189,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -262,3 +264,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #F0F1EB; } }
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ body {
|
|||
background: rgba(0, 0, 0, 0.99);
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -152,7 +152,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -192,10 +192,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -265,3 +267,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fff; } }
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ body {
|
|||
background: #134674;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -196,10 +196,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -269,3 +271,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #f7fbfc; } }
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ body {
|
|||
background: #d33682;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -193,10 +193,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -266,3 +268,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fdf6e3; } }
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
|
||||
// Override theme settings (see ../template/settings.scss)
|
||||
$backgroundColor: #222;
|
||||
$backgroundColor: #191919;
|
||||
|
||||
$mainColor: #fff;
|
||||
$headingColor: #fff;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ $heading2Size: 2.11em;
|
|||
$heading3Size: 1.55em;
|
||||
$heading4Size: 1.00em;
|
||||
|
||||
$codeFont: monospace;
|
||||
|
||||
// Links and actions
|
||||
$linkColor: #13DAEC;
|
||||
$linkColorHover: lighten( $linkColor, 20% );
|
||||
|
|
@ -40,4 +42,4 @@ $selectionColor: #fff;
|
|||
// to return a background image or gradient
|
||||
@mixin bodyBackground() {
|
||||
background: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ body {
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
.reveal .slides>section,
|
||||
.reveal .slides>section>section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section>section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
|
@ -162,16 +162,16 @@ body {
|
|||
|
||||
text-align: left;
|
||||
font-size: 0.55em;
|
||||
font-family: monospace;
|
||||
font-family: $codeFont;
|
||||
line-height: 1.2em;
|
||||
|
||||
word-wrap: break-word;
|
||||
|
||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
font-family: $codeFont;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
|
@ -217,9 +217,11 @@ body {
|
|||
|
||||
.reveal sup {
|
||||
vertical-align: super;
|
||||
font-size: smaller;
|
||||
}
|
||||
.reveal sub {
|
||||
vertical-align: sub;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.reveal small {
|
||||
|
|
@ -310,7 +312,14 @@ body {
|
|||
.reveal .progress span {
|
||||
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ body {
|
|||
background: #98bdef;
|
||||
text-shadow: none; }
|
||||
|
||||
.reveal .slides > section,
|
||||
.reveal .slides > section > section {
|
||||
.reveal .slides section,
|
||||
.reveal .slides section > section {
|
||||
line-height: 1.3;
|
||||
font-weight: inherit; }
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ body {
|
|||
font-family: monospace;
|
||||
line-height: 1.2em;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
|
|
@ -189,10 +189,12 @@ body {
|
|||
border-bottom: none; }
|
||||
|
||||
.reveal sup {
|
||||
vertical-align: super; }
|
||||
vertical-align: super;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal sub {
|
||||
vertical-align: sub; }
|
||||
vertical-align: sub;
|
||||
font-size: smaller; }
|
||||
|
||||
.reveal small {
|
||||
display: inline-block;
|
||||
|
|
@ -262,3 +264,10 @@ body {
|
|||
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||
|
||||
/*********************************************
|
||||
* PRINT BACKGROUND
|
||||
*********************************************/
|
||||
@media print {
|
||||
.backgrounds {
|
||||
background-color: #fff; } }
|
||||
|
|
|
|||
|
|
@ -12,13 +12,14 @@
|
|||
<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, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/reveal.css">
|
||||
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
||||
|
||||
<!-- Theme used for syntax highlighting of code -->
|
||||
<link rel="stylesheet" href="lib/css/zenburn.css">
|
||||
<link rel="stylesheet" href="lib/css/monokai.css">
|
||||
|
||||
<!-- Printing and PDF exports -->
|
||||
<script>
|
||||
|
|
@ -93,7 +94,10 @@
|
|||
Press <strong>ESC</strong> to enter the slide overview.
|
||||
</p>
|
||||
<p>
|
||||
Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
|
||||
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>
|
||||
|
||||
|
|
@ -139,8 +143,14 @@
|
|||
<p class="fragment grow">grow</p>
|
||||
<p class="fragment shrink">shrink</p>
|
||||
<p class="fragment fade-out">fade-out</p>
|
||||
<p class="fragment fade-up">fade-up (also down, left and right!)</p>
|
||||
<p class="fragment current-visible">current-visible</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>
|
||||
|
|
@ -189,16 +199,16 @@
|
|||
</section>
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
|
||||
<h2>Image Backgrounds</h2>
|
||||
<pre><code class="hljs"><section data-background="image.png"></code></pre>
|
||||
<pre><code class="hljs html"><section data-background="image.png"></code></pre>
|
||||
</section>
|
||||
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
|
||||
<h2>Tiled Backgrounds</h2>
|
||||
<pre><code class="hljs" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
|
||||
<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://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" 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" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
|
||||
<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">
|
||||
|
|
@ -211,7 +221,7 @@
|
|||
<p>
|
||||
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
|
||||
</p>
|
||||
<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||
<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
|
||||
</section>
|
||||
|
||||
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
|
||||
|
|
@ -219,25 +229,32 @@
|
|||
<p>
|
||||
You can override background transitions per-slide.
|
||||
</p>
|
||||
<pre><code class="hljs" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
|
||||
<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>Pretty Code</h2>
|
||||
<pre><code class="hljs" data-trim contenteditable>
|
||||
function linkify( selector ) {
|
||||
if( supports3DTransforms ) {
|
||||
<pre><code class="hljs" data-trim data-line-numbers="4,8-9">
|
||||
import React, { useState } from 'react';
|
||||
|
||||
var nodes = document.querySelectorAll( selector );
|
||||
function Example() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
for( var i = 0, len = nodes.length; i < len; i++ ) {
|
||||
var node = nodes[i];
|
||||
|
||||
if( !node.className ) {
|
||||
node.className += ' roll';
|
||||
}
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<p>You clicked {count} times</p>
|
||||
<button onClick={() => setCount(count + 1)}>
|
||||
Click me
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</code></pre>
|
||||
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
|
||||
|
|
@ -378,7 +395,6 @@ Reveal.addEventListener( 'customevent', function() {
|
|||
|
||||
</div>
|
||||
|
||||
<script src="lib/js/head.min.js"></script>
|
||||
<script src="js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
@ -387,17 +403,16 @@ Reveal.addEventListener( 'customevent', function() {
|
|||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
history: true,
|
||||
center: true,
|
||||
hash: true,
|
||||
|
||||
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||
|
||||
// More info https://github.com/hakimel/reveal.js#dependencies
|
||||
dependencies: [
|
||||
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
{ src: 'plugin/highlight/highlight.js', async: true },
|
||||
{ src: 'plugin/search/search.js', async: true },
|
||||
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
||||
{ src: 'plugin/notes/notes.js', async: true }
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@
|
|||
|
||||
<title>reveal.js</title>
|
||||
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/reveal.css">
|
||||
<link rel="stylesheet" href="css/theme/black.css">
|
||||
|
||||
<!-- Theme used for syntax highlighting of code -->
|
||||
<link rel="stylesheet" href="lib/css/zenburn.css">
|
||||
<link rel="stylesheet" href="lib/css/monokai.css">
|
||||
|
||||
<!-- Printing and PDF exports -->
|
||||
<script>
|
||||
|
|
@ -29,21 +30,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/js/head.min.js"></script>
|
||||
<script src="js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
// More info about config & dependencies:
|
||||
// - https://github.com/hakimel/reveal.js#configuration
|
||||
// - https://github.com/hakimel/reveal.js#dependencies
|
||||
Reveal.initialize({
|
||||
dependencies: [
|
||||
{ src: 'plugin/markdown/marked.js' },
|
||||
{ src: 'plugin/markdown/markdown.js' },
|
||||
{ src: 'plugin/notes/notes.js', async: true },
|
||||
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
|
||||
]
|
||||
});
|
||||
Reveal.registerPlugin( 'myPlugin', {
|
||||
init: () => {
|
||||
return new Promise( resolve => setTimeout( resolve, 3000 ) );
|
||||
}
|
||||
} );
|
||||
Reveal.addEventListener( 'ready', () => console.log( 'Three seconds later...' ) );
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
71
static/reveal.js/lib/css/monokai.css
Normal file
71
static/reveal.js/lib/css/monokai.css
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
Monokai style - ported by Luigi Maselli - http://grigio.org
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #272822;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-strong,
|
||||
.hljs-name {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-code {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-class .hljs-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-symbol,
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #bf79db;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-emphasis,
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion,
|
||||
.hljs-meta {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-type,
|
||||
.hljs-selector-id {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
|
||||
if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.className),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.className=this.toString()}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(o){o+="";if(g(this,o)===-1){this.push(o);this._updateClassName()}};e.remove=function(p){p+="";var o=g(this,p);if(o!==-1){this.splice(o,1);this._updateClassName()}};e.toggle=function(o){o+="";if(g(this,o)===-1){this.add(o)}else{this.remove(o)}};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};
|
||||
9
static/reveal.js/lib/js/head.min.js
vendored
9
static/reveal.js/lib/js/head.min.js
vendored
|
|
@ -1,9 +0,0 @@
|
|||
/*! head.core - v1.0.2 */
|
||||
(function(n,t){"use strict";function r(n){a[a.length]=n}function k(n){var t=new RegExp(" ?\\b"+n+"\\b");c.className=c.className.replace(t,"")}function p(n,t){for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}function tt(){var t,e,f,o;c.className=c.className.replace(/ (w-|eq-|gt-|gte-|lt-|lte-|portrait|no-portrait|landscape|no-landscape)\d+/g,"");t=n.innerWidth||c.clientWidth;e=n.outerWidth||n.screen.width;u.screen.innerWidth=t;u.screen.outerWidth=e;r("w-"+t);p(i.screens,function(n){t>n?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):t<n?(i.screensCss.lt&&r("lt-"+n),i.screensCss.lte&&r("lte-"+n)):t===n&&(i.screensCss.lte&&r("lte-"+n),i.screensCss.eq&&r("e-q"+n),i.screensCss.gte&&r("gte-"+n))});f=n.innerHeight||c.clientHeight;o=n.outerHeight||n.screen.height;u.screen.innerHeight=f;u.screen.outerHeight=o;u.feature("portrait",f>t);u.feature("landscape",f<t)}function it(){n.clearTimeout(b);b=n.setTimeout(tt,50)}var y=n.document,rt=n.navigator,ut=n.location,c=y.documentElement,a=[],i={screens:[240,320,480,640,768,800,1024,1280,1440,1680,1920],screensCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!1},browsers:[{ie:{min:6,max:11}}],browserCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!0},html5:!0,page:"-page",section:"-section",head:"head"},v,u,s,w,o,h,l,d,f,g,nt,e,b;if(n.head_conf)for(v in n.head_conf)n.head_conf[v]!==t&&(i[v]=n.head_conf[v]);u=n[i.head]=function(){u.ready.apply(null,arguments)};u.feature=function(n,t,i){return n?(Object.prototype.toString.call(t)==="[object Function]"&&(t=t.call()),r((t?"":"no-")+n),u[n]=!!t,i||(k("no-"+n),k(n),u.feature()),u):(c.className+=" "+a.join(" "),a=[],u)};u.feature("js",!0);s=rt.userAgent.toLowerCase();w=/mobile|android|kindle|silk|midp|phone|(windows .+arm|touch)/.test(s);u.feature("mobile",w,!0);u.feature("desktop",!w,!0);s=/(chrome|firefox)[ \/]([\w.]+)/.exec(s)||/(iphone|ipad|ipod)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(android)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(webkit|opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(msie) ([\w.]+)/.exec(s)||/(trident).+rv:(\w.)+/.exec(s)||[];o=s[1];h=parseFloat(s[2]);switch(o){case"msie":case"trident":o="ie";h=y.documentMode||h;break;case"firefox":o="ff";break;case"ipod":case"ipad":case"iphone":o="ios";break;case"webkit":o="safari"}for(u.browser={name:o,version:h},u.browser[o]=!0,l=0,d=i.browsers.length;l<d;l++)for(f in i.browsers[l])if(o===f)for(r(f),g=i.browsers[l][f].min,nt=i.browsers[l][f].max,e=g;e<=nt;e++)h>e?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h<e?(i.browserCss.lt&&r("lt-"+f+e),i.browserCss.lte&&r("lte-"+f+e)):h===e&&(i.browserCss.lte&&r("lte-"+f+e),i.browserCss.eq&&r("eq-"+f+e),i.browserCss.gte&&r("gte-"+f+e));else r("no-"+f);r(o);r(o+parseInt(h,10));i.html5&&o==="ie"&&h<9&&p("abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|progress|section|summary|time|video".split("|"),function(n){y.createElement(n)});p(ut.pathname.split("/"),function(n,u){if(this.length>2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
|
||||
/*! head.css3 - v1.0.0 */
|
||||
(function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window);
|
||||
/*! head.load - v1.0.3 */
|
||||
(function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}}function it(n,i){var r=Object.prototype.toString.call(i).slice(8,-1);return i!==t&&i!==null&&r===n}function s(n){return it("Function",n)}function a(n){return it("Array",n)}function et(n){var i=n.split("/"),t=i[i.length-1],r=t.indexOf("?");return r!==-1?t.substring(0,r):t}function f(n){(n=n||w,n._done)||(n(),n._done=1)}function ot(n,t,r,u){var f=typeof n=="object"?n:{test:n,success:!t?!1:a(t)?t:[t],failure:!r?!1:a(r)?r:[r],callback:u||w},e=!!f.test;return e&&!!f.success?(f.success.push(f.callback),i.load.apply(null,f.success)):e||!f.failure?u():(f.failure.push(f.callback),i.load.apply(null,f.failure)),i}function v(n){var t={},i,r;if(typeof n=="object")for(i in n)!n[i]||(t={name:i,url:n[i]});else t={name:et(n),url:n};return(r=c[t.name],r&&r.url===t.url)?r:(c[t.name]=t,t)}function y(n){n=n||c;for(var t in n)if(n.hasOwnProperty(t)&&n[t].state!==l)return!1;return!0}function st(n){n.state=ft;u(n.onpreload,function(n){n.call()})}function ht(n){n.state===t&&(n.state=nt,n.onpreload=[],rt({url:n.url,type:"cache"},function(){st(n)}))}function ct(){var n=arguments,t=n[n.length-1],r=[].slice.call(n,1),f=r[0];return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(f?(u(r,function(n){s(n)||!n||ht(v(n))}),b(v(n[0]),s(f)?f:function(){i.load.apply(null,r)})):b(v(n[0])),i)}function lt(){var n=arguments,t=n[n.length-1],r={};return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(u(n,function(n){n!==t&&(n=v(n),r[n.name]=n)}),u(n,function(n){n!==t&&(n=v(n),b(n,function(){y(r)&&f(t)}))}),i)}function b(n,t){if(t=t||w,n.state===l){t();return}if(n.state===tt){i.ready(n.name,t);return}if(n.state===nt){n.onpreload.push(function(){b(n,t)});return}n.state=tt;rt(n,function(){n.state=l;t();u(h[n.name],function(n){f(n)});o&&y()&&u(h.ALL,function(n){f(n)})})}function at(n){n=n||"";var t=n.split("?")[0].split(".");return t[t.length-1].toLowerCase()}function rt(t,i){function e(t){t=t||n.event;u.onload=u.onreadystatechange=u.onerror=null;i()}function o(f){f=f||n.event;(f.type==="load"||/loaded|complete/.test(u.readyState)&&(!r.documentMode||r.documentMode<9))&&(n.clearTimeout(t.errorTimeout),n.clearTimeout(t.cssTimeout),u.onload=u.onreadystatechange=u.onerror=null,i())}function s(){if(t.state!==l&&t.cssRetries<=20){for(var i=0,f=r.styleSheets.length;i<f;i++)if(r.styleSheets[i].href===u.href){o({type:"load"});return}t.cssRetries++;t.cssTimeout=n.setTimeout(s,250)}}var u,h,f;i=i||w;h=at(t.url);h==="css"?(u=r.createElement("link"),u.type="text/"+(t.type||"css"),u.rel="stylesheet",u.href=t.url,t.cssRetries=0,t.cssTimeout=n.setTimeout(s,500)):(u=r.createElement("script"),u.type="text/"+(t.type||"javascript"),u.src=t.url);u.onload=u.onreadystatechange=o;u.onerror=e;u.async=!1;u.defer=!1;t.errorTimeout=n.setTimeout(function(){e({type:"timeout"})},7e3);f=r.head||r.getElementsByTagName("head")[0];f.insertBefore(u,f.lastChild)}function vt(){for(var t,u=r.getElementsByTagName("script"),n=0,f=u.length;n<f;n++)if(t=u[n].getAttribute("data-headjs-load"),!!t){i.load(t);return}}function yt(n,t){var v,p,e;return n===r?(o?f(t):d.push(t),i):(s(n)&&(t=n,n="ALL"),a(n))?(v={},u(n,function(n){v[n]=c[n];i.ready(n,function(){y(v)&&f(t)})}),i):typeof n!="string"||!s(t)?i:(p=c[n],p&&p.state===l||n==="ALL"&&y()&&o)?(f(t),i):(e=h[n],e?e.push(t):e=h[n]=[t],i)}function e(){if(!r.body){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(e,50);return}o||(o=!0,vt(),u(d,function(n){f(n)}))}function k(){r.addEventListener?(r.removeEventListener("DOMContentLoaded",k,!1),e()):r.readyState==="complete"&&(r.detachEvent("onreadystatechange",k),e())}var r=n.document,d=[],h={},c={},ut="async"in r.createElement("script")||"MozAppearance"in r.documentElement.style||n.opera,o,g=n.head_conf&&n.head_conf.head||"head",i=n[g]=n[g]||function(){i.ready.apply(null,arguments)},nt=1,ft=2,tt=3,l=4,p;if(r.readyState==="complete")e();else if(r.addEventListener)r.addEventListener("DOMContentLoaded",k,!1),n.addEventListener("load",e,!1);else{r.attachEvent("onreadystatechange",k);n.attachEvent("onload",e);p=!1;try{p=!n.frameElement&&r.documentElement}catch(wt){}p&&p.doScroll&&function pt(){if(!o){try{p.doScroll("left")}catch(t){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(pt,50);return}e()}}()}i.load=i.js=ut?lt:ct;i.test=ot;i.ready=yt;i.ready(r,function(){y()&&u(h.ALL,function(n){f(n)});i.feature&&i.feature("domloaded",!0)})})(window);
|
||||
/*
|
||||
//# sourceMappingURL=head.min.js.map
|
||||
*/
|
||||
2
static/reveal.js/lib/js/promise.js
Normal file
2
static/reveal.js/lib/js/promise.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/* MIT | https://github.com/taylorhakes/promise-polyfill */
|
||||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}function n(){}function t(e){if(!(this instanceof t))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=undefined,this._deferreds=[],u(e,this)}function o(e,n){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,t._immediateFn(function(){var t=1===e._state?n.onFulfilled:n.onRejected;if(null!==t){var o;try{o=t(e._value)}catch(f){return void i(n.promise,f)}r(n.promise,o)}else(1===e._state?r:i)(n.promise,e._value)})):e._deferreds.push(n)}function r(e,n){try{if(n===e)throw new TypeError("A promise cannot be resolved with itself.");if(n&&("object"==typeof n||"function"==typeof n)){var o=n.then;if(n instanceof t)return e._state=3,e._value=n,void f(e);if("function"==typeof o)return void u(function(e,n){return function(){e.apply(n,arguments)}}(o,n),e)}e._state=1,e._value=n,f(e)}catch(r){i(e,r)}}function i(e,n){e._state=2,e._value=n,f(e)}function f(e){2===e._state&&0===e._deferreds.length&&t._immediateFn(function(){e._handled||t._unhandledRejectionFn(e._value)});for(var n=0,r=e._deferreds.length;r>n;n++)o(e,e._deferreds[n]);e._deferreds=null}function u(e,n){var t=!1;try{e(function(e){t||(t=!0,r(n,e))},function(e){t||(t=!0,i(n,e))})}catch(o){if(t)return;t=!0,i(n,o)}}var c=setTimeout;t.prototype["catch"]=function(e){return this.then(null,e)},t.prototype.then=function(e,t){var r=new this.constructor(n);return o(this,new function(e,n,t){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof n?n:null,this.promise=t}(e,t,r)),r},t.prototype["finally"]=e,t.all=function(e){return new t(function(n,t){function o(e,f){try{if(f&&("object"==typeof f||"function"==typeof f)){var u=f.then;if("function"==typeof u)return void u.call(f,function(n){o(e,n)},t)}r[e]=f,0==--i&&n(r)}catch(c){t(c)}}if(!e||"undefined"==typeof e.length)throw new TypeError("Promise.all accepts an array");var r=Array.prototype.slice.call(e);if(0===r.length)return n([]);for(var i=r.length,f=0;r.length>f;f++)o(f,r[f])})},t.resolve=function(e){return e&&"object"==typeof e&&e.constructor===t?e:new t(function(n){n(e)})},t.reject=function(e){return new t(function(n,t){t(e)})},t.race=function(e){return new t(function(n,t){for(var o=0,r=e.length;r>o;o++)e[o].then(n,t)})},t._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){c(e,0)},t._unhandledRejectionFn=function(e){void 0!==console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l.Promise=t});
|
||||
|
|
@ -1,43 +1,75 @@
|
|||
{
|
||||
"name": "reveal.js",
|
||||
"version": "3.6.0",
|
||||
"description": "The HTML Presentation Framework",
|
||||
"homepage": "http://revealjs.com",
|
||||
"subdomain": "revealjs",
|
||||
"main": "js/reveal.js",
|
||||
"scripts": {
|
||||
"test": "grunt test",
|
||||
"start": "grunt serve",
|
||||
"build": "grunt"
|
||||
"_args": [
|
||||
[
|
||||
"reveal.js@3.8.0",
|
||||
"/Users/aleksandrmyasoedov/gocode/src/github.com/msoedov/hacker-slides"
|
||||
]
|
||||
],
|
||||
"_from": "reveal.js@3.8.0",
|
||||
"_id": "reveal.js@3.8.0",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-MQ+UBXIIL9IyBXhkLZWb/AG5h5/BedmnHXHIEavMBawNLVfAayvTrwNlDjGn4tf/CQ2CTJR8jSyIdu4RpfoLpg==",
|
||||
"_location": "/reveal.js",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "reveal.js@3.8.0",
|
||||
"name": "reveal.js",
|
||||
"escapedName": "reveal.js",
|
||||
"rawSpec": "3.8.0",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "3.8.0"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-3.8.0.tgz",
|
||||
"_spec": "3.8.0",
|
||||
"_where": "/Users/aleksandrmyasoedov/gocode/src/github.com/msoedov/hacker-slides",
|
||||
"author": {
|
||||
"name": "Hakim El Hattab",
|
||||
"email": "hakim.elhattab@gmail.com",
|
||||
"web": "http://hakim.se"
|
||||
"url": "http://hakim.se"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/hakimel/reveal.js/issues"
|
||||
},
|
||||
"description": "The HTML Presentation Framework",
|
||||
"devDependencies": {
|
||||
"express": "^4.16.2",
|
||||
"grunt": "^1.0.4",
|
||||
"grunt-autoprefixer": "^3.0.4",
|
||||
"grunt-cli": "^1.3.2",
|
||||
"grunt-contrib-connect": "^2.0.0",
|
||||
"grunt-contrib-cssmin": "^3.0.0",
|
||||
"grunt-contrib-jshint": "^2.0.0",
|
||||
"grunt-contrib-qunit": "^3.1.0",
|
||||
"grunt-contrib-uglify": "^3.3.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"grunt-sass": "^3.0.2",
|
||||
"grunt-zip": "~0.17.1",
|
||||
"load-grunt-tasks": "^4.0.0",
|
||||
"mustache": "^2.3.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"socket.io": "^2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=9.0.0"
|
||||
},
|
||||
"homepage": "http://revealjs.com",
|
||||
"license": "MIT",
|
||||
"main": "js/reveal.js",
|
||||
"name": "reveal.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/hakimel/reveal.js.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
"scripts": {
|
||||
"build": "grunt",
|
||||
"start": "grunt serve",
|
||||
"test": "grunt test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"express": "^4.15.2",
|
||||
"grunt": "^1.0.1",
|
||||
"grunt-autoprefixer": "^3.0.4",
|
||||
"grunt-cli": "^1.2.0",
|
||||
"grunt-contrib-connect": "^1.0.2",
|
||||
"grunt-contrib-cssmin": "^2.1.0",
|
||||
"grunt-contrib-jshint": "^1.1.0",
|
||||
"grunt-contrib-qunit": "~1.2.0",
|
||||
"grunt-contrib-uglify": "^2.3.0",
|
||||
"grunt-contrib-watch": "^1.0.0",
|
||||
"grunt-sass": "^2.0.0",
|
||||
"grunt-retire": "^1.0.7",
|
||||
"grunt-zip": "~0.17.1",
|
||||
"mustache": "^2.3.0",
|
||||
"socket.io": "^1.7.3"
|
||||
},
|
||||
"license": "MIT"
|
||||
"subdomain": "revealjs",
|
||||
"version": "3.8.0"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="../../css/reveal.css">
|
||||
<link rel="stylesheet" href="../../css/theme/white.css" id="theme">
|
||||
|
||||
<link rel="stylesheet" href="../../lib/css/zenburn.css">
|
||||
<link rel="stylesheet" href="../../lib/css/monokai.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -99,10 +99,16 @@
|
|||
</script>
|
||||
</section>
|
||||
|
||||
<!-- Images -->
|
||||
<section data-markdown>
|
||||
<script type="text/template">
|
||||
|
||||
</script>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../lib/js/head.min.js"></script>
|
||||
<script src="../../js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
@ -115,7 +121,6 @@
|
|||
|
||||
// Optional libraries used to extend on reveal.js
|
||||
dependencies: [
|
||||
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
|
|
|
|||
|
|
@ -29,3 +29,8 @@ Content 3.1
|
|||
## External 3.2
|
||||
|
||||
Content 3.2
|
||||
|
||||
|
||||
## External 3.3
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,11 @@
|
|||
if (typeof define === 'function' && define.amd) {
|
||||
root.marked = require( './marked' );
|
||||
root.RevealMarkdown = factory( root.marked );
|
||||
root.RevealMarkdown.initialize();
|
||||
} else if( typeof exports === 'object' ) {
|
||||
module.exports = factory( require( './marked' ) );
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.RevealMarkdown = factory( root.marked );
|
||||
root.RevealMarkdown.initialize();
|
||||
}
|
||||
}( this, function( marked ) {
|
||||
|
||||
|
|
@ -199,81 +197,108 @@
|
|||
*/
|
||||
function processSlides() {
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]'),
|
||||
section;
|
||||
return new Promise( function( resolve ) {
|
||||
|
||||
for( var i = 0, len = sections.length; i < len; i++ ) {
|
||||
var externalPromises = [];
|
||||
|
||||
section = sections[i];
|
||||
[].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {
|
||||
|
||||
if( section.getAttribute( 'data-markdown' ).length ) {
|
||||
if( section.getAttribute( 'data-markdown' ).length ) {
|
||||
|
||||
var xhr = new XMLHttpRequest(),
|
||||
url = section.getAttribute( 'data-markdown' );
|
||||
|
||||
datacharset = section.getAttribute( 'data-charset' );
|
||||
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||
if( datacharset != null && datacharset != '' ) {
|
||||
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
||||
}
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if( xhr.readyState === 4 ) {
|
||||
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
||||
externalPromises.push( loadExternalMarkdown( section ).then(
|
||||
|
||||
// Finished loading external file
|
||||
function( xhr, url ) {
|
||||
section.outerHTML = slidify( xhr.responseText, {
|
||||
separator: section.getAttribute( 'data-separator' ),
|
||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||
attributes: getForwardedAttributes( section )
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
// Failed to load markdown
|
||||
function( xhr, url ) {
|
||||
section.outerHTML = '<section data-state="alert">' +
|
||||
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
|
||||
'Check your browser\'s JavaScript console for more details.' +
|
||||
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
|
||||
'</section>';
|
||||
|
||||
}
|
||||
|
||||
) );
|
||||
|
||||
}
|
||||
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
||||
|
||||
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
||||
separator: section.getAttribute( 'data-separator' ),
|
||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||
attributes: getForwardedAttributes( section )
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Promise.all( externalPromises ).then( resolve );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
function loadExternalMarkdown( section ) {
|
||||
|
||||
return new Promise( function( resolve, reject ) {
|
||||
|
||||
var xhr = new XMLHttpRequest(),
|
||||
url = section.getAttribute( 'data-markdown' );
|
||||
|
||||
datacharset = section.getAttribute( 'data-charset' );
|
||||
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
|
||||
if( datacharset != null && datacharset != '' ) {
|
||||
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
|
||||
}
|
||||
|
||||
xhr.onreadystatechange = function( section, xhr ) {
|
||||
if( xhr.readyState === 4 ) {
|
||||
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
|
||||
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
|
||||
|
||||
resolve( xhr, url );
|
||||
|
||||
}
|
||||
};
|
||||
else {
|
||||
|
||||
xhr.open( 'GET', url, false );
|
||||
reject( xhr, url );
|
||||
|
||||
try {
|
||||
xhr.send();
|
||||
}
|
||||
catch ( e ) {
|
||||
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
|
||||
}
|
||||
}
|
||||
}.bind( this, section, xhr );
|
||||
|
||||
}
|
||||
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
|
||||
xhr.open( 'GET', url, true );
|
||||
|
||||
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
|
||||
separator: section.getAttribute( 'data-separator' ),
|
||||
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
|
||||
notesSeparator: section.getAttribute( 'data-separator-notes' ),
|
||||
attributes: getForwardedAttributes( section )
|
||||
});
|
||||
try {
|
||||
xhr.send();
|
||||
}
|
||||
catch ( e ) {
|
||||
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
|
||||
resolve( xhr, url );
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a node value has the attributes pattern.
|
||||
* If yes, extract it and add that value as one or several attributes
|
||||
* the the terget element.
|
||||
* to the target element.
|
||||
*
|
||||
* You need Cache Killer on Chrome to see the effect on any FOM transformation
|
||||
* directly on refresh (F5)
|
||||
|
|
@ -342,44 +367,47 @@
|
|||
*/
|
||||
function convertSlides() {
|
||||
|
||||
var sections = document.querySelectorAll( '[data-markdown]');
|
||||
var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
|
||||
|
||||
for( var i = 0, len = sections.length; i < len; i++ ) {
|
||||
[].slice.call( sections ).forEach( function( section ) {
|
||||
|
||||
var section = sections[i];
|
||||
section.setAttribute( 'data-markdown-parsed', true )
|
||||
|
||||
// Only parse the same slide once
|
||||
if( !section.getAttribute( 'data-markdown-parsed' ) ) {
|
||||
var notes = section.querySelector( 'aside.notes' );
|
||||
var markdown = getMarkdownFromSlide( section );
|
||||
|
||||
section.setAttribute( 'data-markdown-parsed', true )
|
||||
|
||||
var notes = section.querySelector( 'aside.notes' );
|
||||
var markdown = getMarkdownFromSlide( section );
|
||||
|
||||
section.innerHTML = marked( markdown );
|
||||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
||||
section.getAttribute( 'data-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-attributes' ) ||
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
||||
|
||||
// If there were notes, we need to re-add them after
|
||||
// having overwritten the section's HTML
|
||||
if( notes ) {
|
||||
section.appendChild( notes );
|
||||
}
|
||||
section.innerHTML = marked( markdown );
|
||||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
|
||||
section.getAttribute( 'data-attributes' ) ||
|
||||
section.parentNode.getAttribute( 'data-attributes' ) ||
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
|
||||
|
||||
// If there were notes, we need to re-add them after
|
||||
// having overwritten the section's HTML
|
||||
if( notes ) {
|
||||
section.appendChild( notes );
|
||||
}
|
||||
|
||||
}
|
||||
} );
|
||||
|
||||
return Promise.resolve();
|
||||
|
||||
}
|
||||
|
||||
// API
|
||||
return {
|
||||
var RevealMarkdown = {
|
||||
|
||||
/**
|
||||
* Starts processing and converting Markdown within the
|
||||
* current reveal.js deck.
|
||||
*
|
||||
* @param {function} callback function to invoke once
|
||||
* we've finished loading and parsing Markdown
|
||||
*/
|
||||
init: function( callback ) {
|
||||
|
||||
initialize: function() {
|
||||
if( typeof marked === 'undefined' ) {
|
||||
throw 'The reveal.js Markdown plugin requires marked to be loaded';
|
||||
}
|
||||
|
|
@ -392,14 +420,14 @@
|
|||
});
|
||||
}
|
||||
|
||||
// marked can be configured via reveal.js config options
|
||||
var options = Reveal.getConfig().markdown;
|
||||
|
||||
if ( options ) {
|
||||
if( options ) {
|
||||
marked.setOptions( options );
|
||||
}
|
||||
|
||||
processSlides();
|
||||
convertSlides();
|
||||
return processSlides().then( convertSlides );
|
||||
|
||||
},
|
||||
|
||||
// TODO: Do these belong in the API?
|
||||
|
|
@ -409,4 +437,10 @@
|
|||
|
||||
};
|
||||
|
||||
// Register our plugin so that reveal.js will call our
|
||||
// plugin 'init' method as part of the initialization
|
||||
Reveal.registerPlugin( 'markdown', RevealMarkdown );
|
||||
|
||||
return RevealMarkdown;
|
||||
|
||||
}));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,33 +7,28 @@
|
|||
var RevealMath = window.RevealMath || (function(){
|
||||
|
||||
var options = Reveal.getConfig().math || {};
|
||||
options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
||||
options.config = options.config || 'TeX-AMS_HTML-full';
|
||||
var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
|
||||
var config = options.config || 'TeX-AMS_HTML-full';
|
||||
var url = mathjax + '?config=' + config;
|
||||
|
||||
loadScript( options.mathjax + '?config=' + options.config, function() {
|
||||
var defaultOptions = {
|
||||
messageStyle: 'none',
|
||||
tex2jax: {
|
||||
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
|
||||
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
|
||||
},
|
||||
skipStartupTypeset: true
|
||||
};
|
||||
|
||||
MathJax.Hub.Config({
|
||||
messageStyle: 'none',
|
||||
tex2jax: {
|
||||
inlineMath: [['$','$'],['\\(','\\)']] ,
|
||||
skipTags: ['script','noscript','style','textarea','pre']
|
||||
},
|
||||
skipStartupTypeset: true
|
||||
});
|
||||
function defaults( options, defaultOptions ) {
|
||||
|
||||
// Typeset followed by an immediate reveal.js layout since
|
||||
// the typesetting process could affect slide height
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
|
||||
MathJax.Hub.Queue( Reveal.layout );
|
||||
for ( var i in defaultOptions ) {
|
||||
if ( !options.hasOwnProperty( i ) ) {
|
||||
options[i] = defaultOptions[i];
|
||||
}
|
||||
}
|
||||
|
||||
// Reprocess equations in slides when they turn visible
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
}
|
||||
|
||||
function loadScript( url, callback ) {
|
||||
|
||||
|
|
@ -64,4 +59,34 @@ var RevealMath = window.RevealMath || (function(){
|
|||
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
defaults( options, defaultOptions );
|
||||
defaults( options.tex2jax, defaultOptions.tex2jax );
|
||||
options.mathjax = options.config = null;
|
||||
|
||||
loadScript( url, function() {
|
||||
|
||||
MathJax.Hub.Config( options );
|
||||
|
||||
// Typeset followed by an immediate reveal.js layout since
|
||||
// the typesetting process could affect slide height
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
|
||||
MathJax.Hub.Queue( Reveal.layout );
|
||||
|
||||
// Reprocess equations in slides when they turn visible
|
||||
Reveal.addEventListener( 'slidechanged', function( event ) {
|
||||
|
||||
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reveal.registerPlugin( 'math', RevealMath );
|
||||
|
|
|
|||
|
|
@ -34,6 +34,22 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
#connection-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
padding: 30% 20% 20% 20%;
|
||||
font-size: 18px;
|
||||
color: #222;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.overlay-element {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
|
|
@ -288,6 +304,8 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div id="connection-status">Loading speaker view...</div>
|
||||
|
||||
<div id="current-slide"></div>
|
||||
<div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
|
||||
<div id="speaker-controls">
|
||||
|
|
@ -329,6 +347,8 @@
|
|||
upcomingSlide,
|
||||
layoutLabel,
|
||||
layoutDropdown,
|
||||
pendingCalls = {},
|
||||
lastRevealApiCallId = 0,
|
||||
connected = false;
|
||||
|
||||
var SPEAKER_LAYOUTS = {
|
||||
|
|
@ -340,8 +360,16 @@
|
|||
|
||||
setupLayout();
|
||||
|
||||
var connectionStatus = document.querySelector( '#connection-status' );
|
||||
var connectionTimeout = setTimeout( function() {
|
||||
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
|
||||
}, 5000 );
|
||||
|
||||
window.addEventListener( 'message', function( event ) {
|
||||
|
||||
clearTimeout( connectionTimeout );
|
||||
connectionStatus.style.display = 'none';
|
||||
|
||||
var data = JSON.parse( event.data );
|
||||
|
||||
// The overview mode is only useful to the reveal.js instance
|
||||
|
|
@ -356,6 +384,10 @@
|
|||
else if( data.type === 'state' ) {
|
||||
handleStateMessage( data );
|
||||
}
|
||||
else if( data.type === 'return' ) {
|
||||
pendingCalls[data.callId](data.result);
|
||||
delete pendingCalls[data.callId];
|
||||
}
|
||||
}
|
||||
// Messages sent by the reveal.js inside of the current slide preview
|
||||
else if( data && data.namespace === 'reveal' ) {
|
||||
|
|
@ -372,6 +404,23 @@
|
|||
|
||||
} );
|
||||
|
||||
/**
|
||||
* Asynchronously calls the Reveal.js API of the main frame.
|
||||
*/
|
||||
function callRevealApi( methodName, methodArguments, callback ) {
|
||||
|
||||
var callId = ++lastRevealApiCallId;
|
||||
pendingCalls[callId] = callback;
|
||||
window.opener.postMessage( JSON.stringify( {
|
||||
namespace: 'reveal-notes',
|
||||
type: 'call',
|
||||
callId: callId,
|
||||
methodName: methodName,
|
||||
arguments: methodArguments
|
||||
} ), '*' );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the main window is trying to establish a
|
||||
* connection.
|
||||
|
|
@ -427,10 +476,17 @@
|
|||
* Forward keyboard events to the current slide window.
|
||||
* This enables keyboard events to work even if focus
|
||||
* isn't set on the current slide iframe.
|
||||
*
|
||||
* Block F5 default handling, it reloads and disconnects
|
||||
* the speaker notes window.
|
||||
*/
|
||||
function setupKeyboard() {
|
||||
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
|
||||
} );
|
||||
|
||||
|
|
@ -479,28 +535,34 @@
|
|||
|
||||
}
|
||||
|
||||
function getTimings() {
|
||||
function getTimings( callback ) {
|
||||
|
||||
var slides = Reveal.getSlides();
|
||||
var defaultTiming = Reveal.getConfig().defaultTiming;
|
||||
if (defaultTiming == null) {
|
||||
return null;
|
||||
}
|
||||
var timings = [];
|
||||
for ( var i in slides ) {
|
||||
var slide = slides[i];
|
||||
var timing = defaultTiming;
|
||||
if( slide.hasAttribute( 'data-timing' )) {
|
||||
var t = slide.getAttribute( 'data-timing' );
|
||||
timing = parseInt(t);
|
||||
if( isNaN(timing) ) {
|
||||
console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
|
||||
timing = defaultTiming;
|
||||
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
|
||||
callRevealApi( 'getConfig', [], function ( config ) {
|
||||
var defaultTiming = config.defaultTiming;
|
||||
if (defaultTiming == null) {
|
||||
callback(null);
|
||||
return;
|
||||
}
|
||||
}
|
||||
timings.push(timing);
|
||||
}
|
||||
return timings;
|
||||
|
||||
var timings = [];
|
||||
for ( var i in slideAttributes ) {
|
||||
var slide = slideAttributes[ i ];
|
||||
var timing = defaultTiming;
|
||||
if( slide.hasOwnProperty( 'data-timing' )) {
|
||||
var t = slide[ 'data-timing' ];
|
||||
timing = parseInt(t);
|
||||
if( isNaN(timing) ) {
|
||||
console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
|
||||
timing = defaultTiming;
|
||||
}
|
||||
}
|
||||
timings.push(timing);
|
||||
}
|
||||
|
||||
callback( timings );
|
||||
} );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -508,15 +570,15 @@
|
|||
* Return the number of seconds allocated for presenting
|
||||
* all slides up to and including this one.
|
||||
*/
|
||||
function getTimeAllocated(timings) {
|
||||
function getTimeAllocated( timings, callback ) {
|
||||
|
||||
var slides = Reveal.getSlides();
|
||||
var allocated = 0;
|
||||
var currentSlide = Reveal.getSlidePastCount();
|
||||
for (var i in slides.slice(0, currentSlide + 1)) {
|
||||
allocated += timings[i];
|
||||
}
|
||||
return allocated;
|
||||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||||
var allocated = 0;
|
||||
for (var i in timings.slice(0, currentSlide + 1)) {
|
||||
allocated += timings[i];
|
||||
}
|
||||
callback( allocated );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -538,12 +600,51 @@
|
|||
pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
|
||||
pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
|
||||
|
||||
var timings = getTimings();
|
||||
if (timings !== null) {
|
||||
pacingTitleEl.style.removeProperty('display');
|
||||
pacingEl.style.removeProperty('display');
|
||||
var timings = null;
|
||||
getTimings( function ( _timings ) {
|
||||
|
||||
timings = _timings;
|
||||
if (_timings !== null) {
|
||||
pacingTitleEl.style.removeProperty('display');
|
||||
pacingEl.style.removeProperty('display');
|
||||
}
|
||||
|
||||
// Update once directly
|
||||
_updateTimer();
|
||||
|
||||
// Then update every second
|
||||
setInterval( _updateTimer, 1000 );
|
||||
|
||||
} );
|
||||
|
||||
|
||||
function _resetTimer() {
|
||||
|
||||
if (timings == null) {
|
||||
start = new Date();
|
||||
_updateTimer();
|
||||
}
|
||||
else {
|
||||
// Reset timer to beginning of current slide
|
||||
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
|
||||
var slideEndTiming = slideEndTimingSeconds * 1000;
|
||||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||||
var currentSlideTiming = timings[currentSlide] * 1000;
|
||||
var previousSlidesTiming = slideEndTiming - currentSlideTiming;
|
||||
var now = new Date();
|
||||
start = new Date(now.getTime() - previousSlidesTiming);
|
||||
_updateTimer();
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
timeEl.addEventListener( 'click', function() {
|
||||
_resetTimer();
|
||||
return false;
|
||||
} );
|
||||
|
||||
function _displayTime( hrEl, minEl, secEl, time) {
|
||||
|
||||
var sign = Math.sign(time) == -1 ? "-" : "";
|
||||
|
|
@ -585,52 +686,26 @@
|
|||
|
||||
function _updatePacing(diff) {
|
||||
|
||||
var slideEndTiming = getTimeAllocated(timings) * 1000;
|
||||
var currentSlide = Reveal.getSlidePastCount();
|
||||
var currentSlideTiming = timings[currentSlide] * 1000;
|
||||
var timeLeftCurrentSlide = slideEndTiming - diff;
|
||||
if (timeLeftCurrentSlide < 0) {
|
||||
pacingEl.className = 'pacing behind';
|
||||
}
|
||||
else if (timeLeftCurrentSlide < currentSlideTiming) {
|
||||
pacingEl.className = 'pacing on-track';
|
||||
}
|
||||
else {
|
||||
pacingEl.className = 'pacing ahead';
|
||||
}
|
||||
_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
|
||||
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
|
||||
var slideEndTiming = slideEndTimingSeconds * 1000;
|
||||
|
||||
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
|
||||
var currentSlideTiming = timings[currentSlide] * 1000;
|
||||
var timeLeftCurrentSlide = slideEndTiming - diff;
|
||||
if (timeLeftCurrentSlide < 0) {
|
||||
pacingEl.className = 'pacing behind';
|
||||
}
|
||||
else if (timeLeftCurrentSlide < currentSlideTiming) {
|
||||
pacingEl.className = 'pacing on-track';
|
||||
}
|
||||
else {
|
||||
pacingEl.className = 'pacing ahead';
|
||||
}
|
||||
_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
// Update once directly
|
||||
_updateTimer();
|
||||
|
||||
// Then update every second
|
||||
setInterval( _updateTimer, 1000 );
|
||||
|
||||
function _resetTimer() {
|
||||
|
||||
if (timings == null) {
|
||||
start = new Date();
|
||||
}
|
||||
else {
|
||||
// Reset timer to beginning of current slide
|
||||
var slideEndTiming = getTimeAllocated(timings) * 1000;
|
||||
var currentSlide = Reveal.getSlidePastCount();
|
||||
var currentSlideTiming = timings[currentSlide] * 1000;
|
||||
var previousSlidesTiming = slideEndTiming - currentSlideTiming;
|
||||
var now = new Date();
|
||||
start = new Date(now.getTime() - previousSlidesTiming);
|
||||
}
|
||||
_updateTimer();
|
||||
|
||||
}
|
||||
|
||||
timeEl.addEventListener( 'click', function() {
|
||||
_resetTimer();
|
||||
return false;
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -11,18 +11,27 @@
|
|||
*/
|
||||
var RevealNotes = (function() {
|
||||
|
||||
var notesPopup = null;
|
||||
|
||||
function openNotes( notesFilePath ) {
|
||||
|
||||
if (notesPopup && !notesPopup.closed) {
|
||||
notesPopup.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if( !notesFilePath ) {
|
||||
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
|
||||
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
|
||||
notesFilePath = jsFileLocation + 'notes.html';
|
||||
}
|
||||
|
||||
var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
|
||||
notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
|
||||
|
||||
// Allow popup window access to Reveal API
|
||||
notesPopup.Reveal = this.Reveal;
|
||||
if( !notesPopup ) {
|
||||
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to the notes window through a postmessage handshake.
|
||||
|
|
@ -47,9 +56,28 @@ var RevealNotes = (function() {
|
|||
clearInterval( connectInterval );
|
||||
onConnected();
|
||||
}
|
||||
if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
|
||||
callRevealApi( data.methodName, data.arguments, data.callId );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls the specified Reveal.js method with the provided argument
|
||||
* and then pushes the result to the notes frame.
|
||||
*/
|
||||
function callRevealApi( methodName, methodArguments, callId ) {
|
||||
|
||||
var result = Reveal[methodName].apply( Reveal, methodArguments );
|
||||
notesPopup.postMessage( JSON.stringify( {
|
||||
namespace: 'reveal-notes',
|
||||
type: 'return',
|
||||
result: result,
|
||||
callId: callId
|
||||
} ), '*' );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Posts the current slide data to the notes window
|
||||
*/
|
||||
|
|
@ -123,33 +151,28 @@ var RevealNotes = (function() {
|
|||
|
||||
}
|
||||
|
||||
if( !/receiver/i.test( window.location.search ) ) {
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
// If the there's a 'notes' query set, open directly
|
||||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
||||
openNotes();
|
||||
}
|
||||
if( !/receiver/i.test( window.location.search ) ) {
|
||||
|
||||
// Open the notes when the 's' key is hit
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
// Disregard the event if the target is editable or a
|
||||
// modifier is present
|
||||
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
|
||||
// If the there's a 'notes' query set, open directly
|
||||
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
|
||||
openNotes();
|
||||
}
|
||||
|
||||
// Disregard the event if keyboard is disabled
|
||||
if ( Reveal.getConfig().keyboard === false ) return;
|
||||
// Open the notes when the 's' key is hit
|
||||
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
|
||||
openNotes();
|
||||
} );
|
||||
|
||||
if( event.keyCode === 83 ) {
|
||||
event.preventDefault();
|
||||
openNotes();
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Show our keyboard shortcut in the reveal.js help overlay
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
return { open: openNotes };
|
||||
open: openNotes
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Reveal.registerPlugin( 'notes', RevealNotes );
|
||||
|
|
|
|||
|
|
@ -42,28 +42,26 @@ probePage.open( inputFile, function( status ) {
|
|||
|
||||
printPage.open( inputFile, function( status ) {
|
||||
console.log( 'Export PDF: Preparing pdf [3/4]')
|
||||
printPage.evaluate(function() {
|
||||
printPage.evaluate( function() {
|
||||
Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
|
||||
});
|
||||
} );
|
||||
} );
|
||||
|
||||
printPage.onCallback = function(data) {
|
||||
printPage.onCallback = function( data ) {
|
||||
// For some reason we need to "jump the queue" for syntax highlighting to work.
|
||||
// See: http://stackoverflow.com/a/3580132/129269
|
||||
setTimeout(function() {
|
||||
setTimeout( function() {
|
||||
console.log( 'Export PDF: Writing file [4/4]' );
|
||||
printPage.render( outputFile );
|
||||
console.log( 'Export PDF: Finished successfully!' );
|
||||
phantom.exit();
|
||||
}, 0);
|
||||
}, 0 );
|
||||
};
|
||||
}
|
||||
else {
|
||||
|
||||
console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
|
||||
phantom.exit(1);
|
||||
console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
|
||||
phantom.exit( 1 );
|
||||
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,92 +19,92 @@ var RevealSearch = (function() {
|
|||
function Hilitor(id, tag)
|
||||
{
|
||||
|
||||
var targetNode = document.getElementById(id) || document.body;
|
||||
var hiliteTag = tag || "EM";
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
|
||||
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
|
||||
var wordColor = [];
|
||||
var colorIdx = 0;
|
||||
var matchRegex = "";
|
||||
var matchingSlides = [];
|
||||
var targetNode = document.getElementById(id) || document.body;
|
||||
var hiliteTag = tag || "EM";
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
|
||||
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
|
||||
var wordColor = [];
|
||||
var colorIdx = 0;
|
||||
var matchRegex = "";
|
||||
var matchingSlides = [];
|
||||
|
||||
this.setRegex = function(input)
|
||||
{
|
||||
input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
|
||||
matchRegex = new RegExp("(" + input + ")","i");
|
||||
}
|
||||
this.setRegex = function(input)
|
||||
{
|
||||
input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
|
||||
matchRegex = new RegExp("(" + input + ")","i");
|
||||
}
|
||||
|
||||
this.getRegex = function()
|
||||
{
|
||||
return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
|
||||
}
|
||||
this.getRegex = function()
|
||||
{
|
||||
return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
|
||||
}
|
||||
|
||||
// recursively apply word highlighting
|
||||
this.hiliteWords = function(node)
|
||||
{
|
||||
if(node == undefined || !node) return;
|
||||
if(!matchRegex) return;
|
||||
if(skipTags.test(node.nodeName)) return;
|
||||
// recursively apply word highlighting
|
||||
this.hiliteWords = function(node)
|
||||
{
|
||||
if(node == undefined || !node) return;
|
||||
if(!matchRegex) return;
|
||||
if(skipTags.test(node.nodeName)) return;
|
||||
|
||||
if(node.hasChildNodes()) {
|
||||
for(var i=0; i < node.childNodes.length; i++)
|
||||
this.hiliteWords(node.childNodes[i]);
|
||||
}
|
||||
if(node.nodeType == 3) { // NODE_TEXT
|
||||
if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
|
||||
//find the slide's section element and save it in our list of matching slides
|
||||
var secnode = node;
|
||||
while (secnode != null && secnode.nodeName != 'SECTION') {
|
||||
secnode = secnode.parentNode;
|
||||
}
|
||||
if(node.hasChildNodes()) {
|
||||
for(var i=0; i < node.childNodes.length; i++)
|
||||
this.hiliteWords(node.childNodes[i]);
|
||||
}
|
||||
if(node.nodeType == 3) { // NODE_TEXT
|
||||
if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
|
||||
//find the slide's section element and save it in our list of matching slides
|
||||
var secnode = node;
|
||||
while (secnode != null && secnode.nodeName != 'SECTION') {
|
||||
secnode = secnode.parentNode;
|
||||
}
|
||||
|
||||
var slideIndex = Reveal.getIndices(secnode);
|
||||
var slidelen = matchingSlides.length;
|
||||
var alreadyAdded = false;
|
||||
for (var i=0; i < slidelen; i++) {
|
||||
if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
|
||||
alreadyAdded = true;
|
||||
}
|
||||
}
|
||||
if (! alreadyAdded) {
|
||||
matchingSlides.push(slideIndex);
|
||||
}
|
||||
var slideIndex = Reveal.getIndices(secnode);
|
||||
var slidelen = matchingSlides.length;
|
||||
var alreadyAdded = false;
|
||||
for (var i=0; i < slidelen; i++) {
|
||||
if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
|
||||
alreadyAdded = true;
|
||||
}
|
||||
}
|
||||
if (! alreadyAdded) {
|
||||
matchingSlides.push(slideIndex);
|
||||
}
|
||||
|
||||
if(!wordColor[regs[0].toLowerCase()]) {
|
||||
wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
|
||||
}
|
||||
if(!wordColor[regs[0].toLowerCase()]) {
|
||||
wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
|
||||
}
|
||||
|
||||
var match = document.createElement(hiliteTag);
|
||||
match.appendChild(document.createTextNode(regs[0]));
|
||||
match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
|
||||
match.style.fontStyle = "inherit";
|
||||
match.style.color = "#000";
|
||||
var match = document.createElement(hiliteTag);
|
||||
match.appendChild(document.createTextNode(regs[0]));
|
||||
match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
|
||||
match.style.fontStyle = "inherit";
|
||||
match.style.color = "#000";
|
||||
|
||||
var after = node.splitText(regs.index);
|
||||
after.nodeValue = after.nodeValue.substring(regs[0].length);
|
||||
node.parentNode.insertBefore(match, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
var after = node.splitText(regs.index);
|
||||
after.nodeValue = after.nodeValue.substring(regs[0].length);
|
||||
node.parentNode.insertBefore(match, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// remove highlighting
|
||||
this.remove = function()
|
||||
{
|
||||
var arr = document.getElementsByTagName(hiliteTag);
|
||||
while(arr.length && (el = arr[0])) {
|
||||
el.parentNode.replaceChild(el.firstChild, el);
|
||||
}
|
||||
};
|
||||
// remove highlighting
|
||||
this.remove = function()
|
||||
{
|
||||
var arr = document.getElementsByTagName(hiliteTag);
|
||||
while(arr.length && (el = arr[0])) {
|
||||
el.parentNode.replaceChild(el.firstChild, el);
|
||||
}
|
||||
};
|
||||
|
||||
// start highlighting at target node
|
||||
this.apply = function(input)
|
||||
{
|
||||
if(input == undefined || !input) return;
|
||||
this.remove();
|
||||
this.setRegex(input);
|
||||
this.hiliteWords(targetNode);
|
||||
return matchingSlides;
|
||||
};
|
||||
// start highlighting at target node
|
||||
this.apply = function(input)
|
||||
{
|
||||
if(input == undefined || !input) return;
|
||||
this.remove();
|
||||
this.setRegex(input);
|
||||
this.hiliteWords(targetNode);
|
||||
return matchingSlides;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ function Hilitor(id, tag)
|
|||
}
|
||||
}
|
||||
|
||||
if (matchedSlides) {
|
||||
if (matchedSlides) {
|
||||
//navigate to the next slide that has the keyword, wrapping to the first if necessary
|
||||
if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
|
||||
currentMatchedIndex = 0;
|
||||
|
|
@ -169,20 +169,20 @@ function Hilitor(id, tag)
|
|||
var searchElement = document.createElement( 'div' );
|
||||
searchElement.id = "searchinputdiv";
|
||||
searchElement.classList.add( 'searchdiv' );
|
||||
searchElement.style.position = 'absolute';
|
||||
searchElement.style.top = '10px';
|
||||
searchElement.style.right = '10px';
|
||||
searchElement.style.position = 'absolute';
|
||||
searchElement.style.top = '10px';
|
||||
searchElement.style.right = '10px';
|
||||
searchElement.style.zIndex = 10;
|
||||
//embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
|
||||
//embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
|
||||
searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
|
||||
dom.wrapper.appendChild( searchElement );
|
||||
}
|
||||
|
||||
document.getElementById("searchbutton").addEventListener( 'click', function(event) {
|
||||
document.getElementById( 'searchbutton' ).addEventListener( 'click', function(event) {
|
||||
doSearch();
|
||||
}, false );
|
||||
|
||||
document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
|
||||
document.getElementById( 'searchinput' ).addEventListener( 'keyup', function( event ) {
|
||||
switch (event.keyCode) {
|
||||
case 13:
|
||||
event.preventDefault();
|
||||
|
|
@ -195,12 +195,12 @@ function Hilitor(id, tag)
|
|||
}, false );
|
||||
|
||||
document.addEventListener( 'keydown', function( event ) {
|
||||
if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
|
||||
if( event.key == "F" && (event.ctrlKey || event.metaKey) ) { //Control+Shift+f
|
||||
event.preventDefault();
|
||||
toggleSearch();
|
||||
}
|
||||
}, false );
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
|
||||
closeSearch();
|
||||
return { open: openSearch };
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,29 +1,34 @@
|
|||
// Custom reveal.js integration
|
||||
(function(){
|
||||
var revealElement = document.querySelector( '.reveal' );
|
||||
if( revealElement ) {
|
||||
var RevealZoom = (function(){
|
||||
|
||||
revealElement.addEventListener( 'mousedown', function( event ) {
|
||||
var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
|
||||
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
|
||||
Reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
|
||||
var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
|
||||
|
||||
if( event[ modifier ] && !Reveal.isOverview() ) {
|
||||
event.preventDefault();
|
||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
|
||||
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
|
||||
|
||||
zoom.to({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: zoomLevel,
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
} );
|
||||
if( event[ modifier ] && !Reveal.isOverview() ) {
|
||||
event.preventDefault();
|
||||
|
||||
zoom.to({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: zoomLevel,
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
} );
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reveal.registerPlugin( 'zoom', RevealZoom );
|
||||
|
||||
/*!
|
||||
* zoom.js 0.3 (modified for use with reveal.js)
|
||||
* http://lab.hakim.se/zoom-js
|
||||
|
|
|
|||
1
static/reveal.js/test/assets/external-script-a.js
Normal file
1
static/reveal.js/test/assets/external-script-a.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
window.externalScriptSequence += 'A';
|
||||
1
static/reveal.js/test/assets/external-script-b.js
Normal file
1
static/reveal.js/test/assets/external-script-b.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
window.externalScriptSequence += 'B';
|
||||
1
static/reveal.js/test/assets/external-script-c.js
Normal file
1
static/reveal.js/test/assets/external-script-c.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
window.externalScriptSequence += 'C';
|
||||
1
static/reveal.js/test/assets/external-script-d.js
Normal file
1
static/reveal.js/test/assets/external-script-d.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
window.externalScriptSequence += 'D';
|
||||
2
static/reveal.js/test/examples/assets/beeping.txt
Normal file
2
static/reveal.js/test/examples/assets/beeping.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
Source: https://freesound.org/people/fennelliott/sounds/379419/
|
||||
License: CC0 (public domain)
|
||||
BIN
static/reveal.js/test/examples/assets/beeping.wav
Normal file
BIN
static/reveal.js/test/examples/assets/beeping.wav
Normal file
Binary file not shown.
|
|
@ -30,11 +30,15 @@
|
|||
<h2>Empty Slide</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Auto-playing audio</h2>
|
||||
<audio src="assets/beeping.wav" data-autoplay></audio>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../lib/js/head.min.js"></script>
|
||||
<script src="../../js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -82,6 +82,14 @@
|
|||
\]
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>TeX Macros</h3>
|
||||
|
||||
Here is a common vector space:
|
||||
\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\]
|
||||
used in functional analysis.
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h3>The Lorenz Equations</h3>
|
||||
|
|
@ -153,13 +161,20 @@
|
|||
\]
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>TeX Macros</h3>
|
||||
|
||||
Here is a common vector space:
|
||||
\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\]
|
||||
used in functional analysis.
|
||||
</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../../lib/js/head.min.js"></script>
|
||||
<script src="../../js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
@ -170,11 +185,16 @@
|
|||
|
||||
math: {
|
||||
// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
|
||||
config: 'TeX-AMS_HTML-full'
|
||||
config: 'TeX-AMS_HTML-full',
|
||||
TeX: {
|
||||
Macros: {
|
||||
R: '\\mathbb{R}',
|
||||
set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
dependencies: [
|
||||
{ src: '../../lib/js/classList.js' },
|
||||
{ src: '../../plugin/math/math.js', async: true }
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -122,7 +122,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../../lib/js/head.min.js"></script>
|
||||
<script src="../../js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../../lib/js/head.min.js"></script>
|
||||
<script src="../../js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,244 +0,0 @@
|
|||
/**
|
||||
* QUnit v1.12.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
436
static/reveal.js/test/qunit-2.5.0.css
Normal file
436
static/reveal.js/test/qunit-2.5.0.css
Normal file
|
|
@ -0,0 +1,436 @@
|
|||
/*!
|
||||
* QUnit 2.5.0
|
||||
* https://qunitjs.com/
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license
|
||||
* https://jquery.org/license
|
||||
*
|
||||
* Date: 2018-01-10T02:56Z
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header (excluding toolbar) */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699A4;
|
||||
background-color: #0D3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: 400;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #C2CCD1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-filteredTest {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #366097;
|
||||
background-color: #F4FF77;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #FFF;
|
||||
background-color: #2B81AF;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Toolbar */
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #5E740B;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar .clearfix {
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar input[type=checkbox],
|
||||
#qunit-testrunner-toolbar input[type=radio] {
|
||||
margin: 3px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar input[type=text] {
|
||||
box-sizing: border-box;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.qunit-url-config,
|
||||
.qunit-filter,
|
||||
#qunit-modulefilter {
|
||||
display: inline-block;
|
||||
line-height: 2.1em;
|
||||
}
|
||||
|
||||
.qunit-filter,
|
||||
#qunit-modulefilter {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.qunit-url-config label {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-search {
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-search-container:after {
|
||||
position: absolute;
|
||||
right: 0.3em;
|
||||
content: "\25bc";
|
||||
color: black;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown {
|
||||
/* align with #qunit-modulefilter-search */
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: 0.8em;
|
||||
|
||||
border: 1px solid #D3D3D3;
|
||||
border-top: none;
|
||||
border-radius: 0 0 .25em .25em;
|
||||
color: #000;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown .clickable.checked {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: #D2E0E6;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown .clickable:hover {
|
||||
color: #FFF;
|
||||
background-color: #0D3349;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-actions {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
|
||||
/* align with #qunit-modulefilter-dropdown-list */
|
||||
font: smaller/1.5em sans-serif;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > * {
|
||||
box-sizing: border-box;
|
||||
max-height: 2.8em;
|
||||
display: block;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > button {
|
||||
float: right;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > :last-child {
|
||||
/* insert padding to align with checkbox margins */
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
border-top: 2px groove threedhighlight;
|
||||
padding: 0.4em 0 0;
|
||||
font: smaller/1.5em sans-serif;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list li {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list .clickable {
|
||||
display: block;
|
||||
padding-left: 0.15em;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 1em 0.4em 1em;
|
||||
border-bottom: 1px solid #FFF;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests > li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li.running,
|
||||
#qunit-tests li.pass,
|
||||
#qunit-tests li.fail,
|
||||
#qunit-tests li.skipped,
|
||||
#qunit-tests li.aborted {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.running,
|
||||
#qunit-tests.hidepass li.pass:not(.todo) {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li.skipped strong {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #C2CCD1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests li p a {
|
||||
padding: 0.25em;
|
||||
color: #6B6464;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #FFF;
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-source {
|
||||
margin: 0.6em 0 0.3em;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
color: #374E0C;
|
||||
background-color: #E0F2BE;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
color: #500;
|
||||
background-color: #FFCACA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: #000; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #FFF;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3C510C;
|
||||
background-color: #FFF;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #FFF;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: #008000; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/*** Aborted tests */
|
||||
#qunit-tests .aborted { color: #000; background-color: orange; }
|
||||
/*** Skipped tests */
|
||||
|
||||
#qunit-tests .skipped {
|
||||
background-color: #EBECE9;
|
||||
}
|
||||
|
||||
#qunit-tests .qunit-todo-label,
|
||||
#qunit-tests .qunit-skipped-label {
|
||||
background-color: #F4FF77;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
color: #366097;
|
||||
line-height: 1.8em;
|
||||
padding: 0 0.5em;
|
||||
margin: -0.4em 0.4em -0.4em 0;
|
||||
}
|
||||
|
||||
#qunit-tests .qunit-todo-label {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
color: #2B81AF;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid #FFF;
|
||||
}
|
||||
#qunit-testresult .clearfix {
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
#qunit-testresult-display {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
width: 85%;
|
||||
float:left;
|
||||
}
|
||||
#qunit-testresult-controls {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
width: 10%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
5188
static/reveal.js/test/qunit-2.5.0.js
Normal file
5188
static/reveal.js/test/qunit-2.5.0.js
Normal file
File diff suppressed because it is too large
Load diff
78
static/reveal.js/test/test-dependencies-async.html
Normal file
78
static/reveal.js/test/test-dependencies-async.html
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test Async Dependencies</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>Slide content</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
var externalScriptSequence = '';
|
||||
var scriptCount = 0;
|
||||
|
||||
QUnit.config.autostart = false;
|
||||
QUnit.module( 'Async Dependencies' );
|
||||
|
||||
QUnit.test( 'Async scripts are loaded', function( assert ) {
|
||||
assert.expect( 5 );
|
||||
var done = assert.async( 5 );
|
||||
|
||||
function callback( event ) {
|
||||
if( externalScriptSequence.length === 1 ) {
|
||||
assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
|
||||
done();
|
||||
}
|
||||
else {
|
||||
assert.ok( true, 'async script loaded' );
|
||||
done();
|
||||
}
|
||||
|
||||
if( externalScriptSequence.length === 4 ) {
|
||||
assert.ok( externalScriptSequence.indexOf( 'A' ) !== -1 &&
|
||||
externalScriptSequence.indexOf( 'B' ) !== -1 &&
|
||||
externalScriptSequence.indexOf( 'C' ) !== -1 &&
|
||||
externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
|
||||
done();
|
||||
}
|
||||
|
||||
scriptCount ++;
|
||||
}
|
||||
|
||||
Reveal.initialize({
|
||||
dependencies: [
|
||||
{ src: 'assets/external-script-a.js', async: false, callback: callback },
|
||||
{ src: 'assets/external-script-b.js', async: true, callback: callback },
|
||||
{ src: 'assets/external-script-c.js', async: true, callback: callback },
|
||||
{ src: 'assets/external-script-d.js', async: true, callback: callback }
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
QUnit.start();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
54
static/reveal.js/test/test-dependencies.html
Normal file
54
static/reveal.js/test/test-dependencies.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test Dependencies</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>Slide content</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
window.externalScriptSequence = '';
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Dependencies' );
|
||||
|
||||
QUnit.test( 'Load synchronous scripts', function( assert ) {
|
||||
assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize({
|
||||
dependencies: [
|
||||
{ src: 'assets/external-script-a.js' },
|
||||
{ src: 'assets/external-script-b.js' },
|
||||
{ src: 'assets/external-script-c.js' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
static/reveal.js/test/test-grid-navigation.html
Normal file
74
static/reveal.js/test/test-grid-navigation.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test Grid</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>0</section>
|
||||
<section>
|
||||
<section>1.1</section>
|
||||
<section>1.2</section>
|
||||
<section>1.3</section>
|
||||
<section>1.4</section>
|
||||
</section>
|
||||
<section>
|
||||
<section>2.1</section>
|
||||
<section>2.2</section>
|
||||
<section>2.3</section>
|
||||
<section>2.4</section>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Grid Navigation' );
|
||||
|
||||
QUnit.test( 'Disabled', function( assert ) {
|
||||
Reveal.right();
|
||||
Reveal.down();
|
||||
Reveal.down();
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
|
||||
Reveal.right();
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Enabled', function( assert ) {
|
||||
Reveal.configure({ navigationMode: 'grid' });
|
||||
Reveal.slide( 0, 0 );
|
||||
Reveal.right();
|
||||
Reveal.down();
|
||||
Reveal.down();
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
|
||||
Reveal.right();
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
static/reveal.js/test/test-iframes.html
Normal file
108
static/reveal.js/test/test-iframes.html
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test Iframes</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>1</section>
|
||||
<section>2</section>
|
||||
<section>
|
||||
<iframe class="default-iframe" data-src="#"></iframe>
|
||||
<iframe class="preload-iframe" data-src="#" data-preload></iframe>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
var defaultIframe = document.querySelector( '.default-iframe' ),
|
||||
preloadIframe = document.querySelector( '.preload-iframe' );
|
||||
|
||||
QUnit.module( 'Iframe' );
|
||||
|
||||
QUnit.test( 'Using default settings', function( assert ) {
|
||||
|
||||
Reveal.slide(1);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
|
||||
|
||||
Reveal.slide(2);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
|
||||
|
||||
Reveal.slide(1);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
|
||||
|
||||
});
|
||||
|
||||
QUnit.test( 'Using data-preload', function( assert ) {
|
||||
|
||||
Reveal.slide(1);
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
|
||||
|
||||
Reveal.slide(2);
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' );
|
||||
|
||||
Reveal.slide(0);
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
|
||||
|
||||
});
|
||||
|
||||
QUnit.test( 'Using preloadIframes: true', function( assert ) {
|
||||
|
||||
Reveal.configure({ preloadIframes: true });
|
||||
|
||||
Reveal.slide(1);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
|
||||
|
||||
Reveal.slide(2);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
|
||||
|
||||
});
|
||||
|
||||
QUnit.test( 'Using preloadIframes: false', function( assert ) {
|
||||
|
||||
Reveal.configure({ preloadIframes: false });
|
||||
|
||||
Reveal.slide(0);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
|
||||
|
||||
Reveal.slide(2);
|
||||
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
|
||||
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
|
||||
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize({
|
||||
viewDistance: 2
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<title>reveal.js - Test Markdown Element Attributes</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -66,8 +66,7 @@
|
|||
|
||||
Test
|
||||
|
||||
|
||||
<!-- {_class="reveal stretch"} -->
|
||||
 <!-- {_class="reveal stretch"} -->
|
||||
|
||||
</script>
|
||||
</section>
|
||||
|
|
@ -122,11 +121,10 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="../plugin/markdown/marked.js"></script>
|
||||
<script src="../plugin/markdown/markdown.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-markdown-element-attributes.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,44 @@
|
|||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Markdown' );
|
||||
|
||||
test( 'Vertical separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
|
||||
QUnit.test( 'Vertical separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
|
||||
});
|
||||
|
||||
|
||||
test( 'Attributes on element header in vertical slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
|
||||
QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
|
||||
});
|
||||
|
||||
test( 'Attributes on element paragraphs in vertical slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
|
||||
QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
|
||||
});
|
||||
|
||||
test( 'Attributes on element list items in vertical slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
|
||||
QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
|
||||
});
|
||||
|
||||
test( 'Attributes on element paragraphs in horizontal slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
|
||||
});
|
||||
test( 'Attributes on element list items in horizontal slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
|
||||
});
|
||||
test( 'Attributes on element list items in horizontal slides', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
|
||||
QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
|
||||
});
|
||||
|
||||
test( 'Attributes on elements in vertical slides with default element attribute separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
|
||||
QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
|
||||
});
|
||||
|
||||
test( 'Attributes on elements in single slides with default element attribute separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
|
||||
QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,30 +7,31 @@
|
|||
<title>reveal.js - Test Markdown</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
<section data-markdown="simple.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
|
||||
<!-- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="../plugin/highlight/highlight.js"></script>
|
||||
<script src="../plugin/markdown/marked.js"></script>
|
||||
<script src="../plugin/markdown/markdown.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-markdown-external.js"></script>
|
||||
<!-- <script src="test-markdown-external.js"></script> -->
|
||||
|
||||
<!-- Test disabled 28/2/2019 by Hakim – Markdown plugin needs to be updated to load extenal files asycnhronously -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,20 @@
|
|||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Markdown' );
|
||||
|
||||
test( 'Vertical separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
|
||||
QUnit.test( 'Vertical separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
|
||||
});
|
||||
|
||||
test( 'Horizontal separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
|
||||
QUnit.test( 'Horizontal separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
|
||||
});
|
||||
|
||||
test( 'Language highlighter', function() {
|
||||
strictEqual( document.querySelectorAll( '.hljs-keyword' ).length, 1, 'got rendered highlight tag.' );
|
||||
strictEqual( document.querySelector( '.hljs-keyword' ).innerHTML, 'var', 'the same keyword: var.' );
|
||||
QUnit.test( 'Language highlighter', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.hljs-keyword' ).length, 1, 'got rendered highlight tag.' );
|
||||
assert.strictEqual( document.querySelector( '.hljs-keyword' ).innerHTML, 'var', 'the same keyword: var.' );
|
||||
});
|
||||
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>reveal.js - Test Markdown Options</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -31,9 +31,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-markdown-options.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Markdown' );
|
||||
|
||||
test( 'Options are set', function() {
|
||||
strictEqual( marked.defaults.smartypants, true );
|
||||
QUnit.test( 'Options are set', function( assert ) {
|
||||
assert.strictEqual( marked.defaults.smartypants, true );
|
||||
});
|
||||
|
||||
test( 'Smart quotes are activated', function() {
|
||||
QUnit.test( 'Smart quotes are activated', function( assert ) {
|
||||
var text = document.querySelector( '.reveal .slides>section>p' ).textContent;
|
||||
|
||||
strictEqual( /['"]/.test( text ), false );
|
||||
strictEqual( /[“”‘’]/.test( text ), true );
|
||||
assert.strictEqual( /['"]/.test( text ), false );
|
||||
assert.strictEqual( /[“”‘’]/.test( text ), true );
|
||||
});
|
||||
|
||||
} );
|
||||
|
|
@ -18,7 +18,8 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.initialize({
|
||||
dependencies: [
|
||||
{ src: '../plugin/markdown/marked.js' },
|
||||
{ src: '../plugin/markdown/markdown.js' },
|
||||
// Test loading JS files with query strings
|
||||
{ src: '../plugin/markdown/markdown.js?query=string' },
|
||||
],
|
||||
markdown: {
|
||||
smartypants: true
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>reveal.js - Test Markdown Attributes</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -116,11 +116,10 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="../plugin/markdown/marked.js"></script>
|
||||
<script src="../plugin/markdown/markdown.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-markdown-slide-attributes.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,44 @@
|
|||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Markdown' );
|
||||
|
||||
test( 'Vertical separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
|
||||
QUnit.test( 'Vertical separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
|
||||
});
|
||||
|
||||
test( 'Id on slide', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
|
||||
QUnit.test( 'Id on slide', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
|
||||
});
|
||||
|
||||
test( 'data-background attributes', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
|
||||
QUnit.test( 'data-background attributes', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
|
||||
});
|
||||
|
||||
test( 'data-transition attributes', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
|
||||
QUnit.test( 'data-transition attributes', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
|
||||
});
|
||||
|
||||
test( 'data-background attributes with default separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
|
||||
QUnit.test( 'data-background attributes with default separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
|
||||
});
|
||||
|
||||
test( 'data-transition attributes with default separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
|
||||
QUnit.test( 'data-transition attributes with default separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
|
||||
});
|
||||
|
||||
test( 'data-transition attributes with inline content', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
|
||||
QUnit.test( 'data-transition attributes with inline content', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<title>reveal.js - Test Markdown</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -40,11 +40,10 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="../plugin/markdown/marked.js"></script>
|
||||
<script src="../plugin/markdown/markdown.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-markdown.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'Markdown' );
|
||||
|
||||
test( 'Vertical separator', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
|
||||
QUnit.test( 'Vertical separator', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
|
||||
});
|
||||
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="../css/print/pdf.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
<section>
|
||||
<h1>1</h1>
|
||||
<img data-src="fake-url.png">
|
||||
<img data-src="">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
|
@ -73,9 +73,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test-pdf.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
// Only one test for now, we're mainly ensuring that there
|
||||
// are no execution errors when running PDF mode
|
||||
|
||||
test( 'Reveal.isReady', function() {
|
||||
strictEqual( Reveal.isReady(), true, 'returns true' );
|
||||
QUnit.test( 'Reveal.isReady', function( assert ) {
|
||||
assert.strictEqual( Reveal.isReady(), true, 'returns true' );
|
||||
});
|
||||
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize({ pdf: true });
|
||||
|
||||
|
|
|
|||
105
static/reveal.js/test/test-plugins.html
Normal file
105
static/reveal.js/test/test-plugins.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test Plugins</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>Slide content</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
QUnit.module( 'Plugins' );
|
||||
|
||||
var initCounter = { PluginB: 0, PluginC: 0, PluginD: 0 };
|
||||
|
||||
// Plugin with no init method
|
||||
var PluginA = {};
|
||||
|
||||
// Plugin with init method
|
||||
var PluginB = { init: function() {
|
||||
initCounter['PluginB'] += 1;
|
||||
} };
|
||||
|
||||
// Async plugin with init method
|
||||
var PluginC = { init: function() {
|
||||
return new Promise(function( resolve ) {
|
||||
setTimeout( () => {
|
||||
initCounter['PluginC'] += 1;
|
||||
resolve();
|
||||
}, 1000 );
|
||||
});
|
||||
} };
|
||||
|
||||
// Plugin initialized after reveal.js is ready
|
||||
var PluginD = { init: function() {
|
||||
initCounter['PluginD'] += 1;
|
||||
} };
|
||||
|
||||
var PluginE = {};
|
||||
|
||||
Reveal.registerPlugin( 'PluginA', PluginA );
|
||||
Reveal.registerPlugin( 'PluginB', PluginB );
|
||||
Reveal.registerPlugin( 'PluginC', PluginC );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
QUnit.test( 'Can initialize synchronously', function( assert ) {
|
||||
assert.strictEqual( initCounter['PluginB'], 1 );
|
||||
|
||||
Reveal.registerPlugin( 'PluginB', PluginB );
|
||||
|
||||
assert.strictEqual( initCounter['PluginB'], 1, 'prevents duplicate registration' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Can initialize asynchronously', function( assert ) {
|
||||
assert.expect( 3 );
|
||||
var done = assert.async( 2 );
|
||||
|
||||
assert.strictEqual( initCounter['PluginC'], 0, 'async plugin not immediately initialized' );
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
assert.strictEqual( initCounter['PluginC'], 1, 'finsihed initializing when reveal.js dispatches "ready"' );
|
||||
done();
|
||||
|
||||
Reveal.registerPlugin( 'PluginD', PluginD );
|
||||
assert.strictEqual( initCounter['PluginD'], 1, 'plugin registered after reveal.js is ready still initiailizes' );
|
||||
done();
|
||||
});
|
||||
} );
|
||||
|
||||
QUnit.test( 'Can check if plugin is registered', function( assert ) {
|
||||
assert.strictEqual( Reveal.hasPlugin( 'PluginA' ), true );
|
||||
assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), false );
|
||||
Reveal.registerPlugin( 'PluginE', PluginE );
|
||||
assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), true );
|
||||
} );
|
||||
|
||||
QUnit.test( 'Can retrieve plugin instance', function( assert ) {
|
||||
assert.strictEqual( Reveal.getPlugin( 'PluginB' ), PluginB );
|
||||
} );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
139
static/reveal.js/test/test-state.html
Normal file
139
static/reveal.js/test/test-state.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>reveal.js - Test State</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
|
||||
<div class="reveal" style="display: none;">
|
||||
|
||||
<div class="slides">
|
||||
|
||||
<section>No state</section>
|
||||
<section id="slide2" data-state="state1">State 1</section>
|
||||
<section data-state="state1">State 1</section>
|
||||
<section data-state="state2">State 2</section>
|
||||
<section>
|
||||
<section>No state</section>
|
||||
<section data-state="state1">State 1</section>
|
||||
<section data-state="state3">State 3</section>
|
||||
<section>No state</section>
|
||||
</section>
|
||||
<section>No state</section>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
QUnit.module( 'State' );
|
||||
|
||||
QUnit.test( 'Fire events when changing slide', function( assert ) {
|
||||
assert.expect( 2 );
|
||||
var state1 = assert.async();
|
||||
var state2 = assert.async();
|
||||
|
||||
var _onState1 = function( event ) {
|
||||
assert.ok( true, 'state1 fired' );
|
||||
state1();
|
||||
}
|
||||
|
||||
var _onState2 = function( event ) {
|
||||
assert.ok( true, 'state2 fired' );
|
||||
state2();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'state1', _onState1 );
|
||||
Reveal.addEventListener( 'state2', _onState2 );
|
||||
|
||||
Reveal.slide( 1 );
|
||||
Reveal.slide( 3 );
|
||||
|
||||
Reveal.removeEventListener( 'state1', _onState1 );
|
||||
Reveal.removeEventListener( 'state2', _onState2 );
|
||||
});
|
||||
|
||||
QUnit.test( 'Fire state events for vertical slides', function( assert ) {
|
||||
assert.expect( 2 );
|
||||
var done = assert.async( 2 );
|
||||
|
||||
var _onState1 = function( event ) {
|
||||
assert.ok( true, 'state1 fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
var _onState3 = function( event ) {
|
||||
assert.ok( true, 'state3 fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'state1', _onState1 );
|
||||
Reveal.addEventListener( 'state3', _onState3 );
|
||||
|
||||
Reveal.slide( 0 );
|
||||
Reveal.slide( 4, 1 );
|
||||
Reveal.slide( 4, 2 );
|
||||
|
||||
Reveal.removeEventListener( 'state1', _onState1 );
|
||||
Reveal.removeEventListener( 'state3', _onState3 );
|
||||
});
|
||||
|
||||
QUnit.test( 'No events if state remains unchanged', function( assert ) {
|
||||
var stateChanges = 0;
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
stateChanges += 1;
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'state1', _onEvent );
|
||||
|
||||
Reveal.slide( 0 ); // no state
|
||||
Reveal.slide( 1 ); // state1
|
||||
Reveal.slide( 2 ); // state1
|
||||
Reveal.prev(); // state1
|
||||
Reveal.next(); // state1
|
||||
Reveal.slide( 4, 1 ); // state1
|
||||
Reveal.slide( 0 ); // no state
|
||||
|
||||
Reveal.removeEventListener( 'state1', _onEvent );
|
||||
|
||||
assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
|
||||
});
|
||||
|
||||
QUnit.test( 'Event order', function( assert ) {
|
||||
var _onEvent = function( event ) {
|
||||
assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'state1', _onEvent );
|
||||
|
||||
Reveal.slide( 0 );
|
||||
Reveal.slide( 1 );
|
||||
|
||||
Reveal.removeEventListener( 'state1', _onEvent );
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<title>reveal.js - Tests</title>
|
||||
|
||||
<link rel="stylesheet" href="../css/reveal.css">
|
||||
<link rel="stylesheet" href="qunit-1.12.0.css">
|
||||
<link rel="stylesheet" href="qunit-2.5.0.css">
|
||||
</head>
|
||||
|
||||
<body style="overflow: auto;">
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
|
||||
<section data-background-image="examples/assets/image1.png">
|
||||
<h1>1</h1>
|
||||
<img data-src="fake-url.png">
|
||||
<video data-src="fake-url.mp4"></video>
|
||||
<audio data-src="fake-url.mp3"></audio>
|
||||
<img data-src="">
|
||||
<video data-src=""></video>
|
||||
<audio data-src=""></audio>
|
||||
<aside class="notes">speaker notes 1</aside>
|
||||
</section>
|
||||
|
||||
|
|
@ -76,9 +76,8 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="../lib/js/head.min.js"></script>
|
||||
<script src="../js/reveal.js"></script>
|
||||
<script src="qunit-1.12.0.js"></script>
|
||||
<script src="qunit-2.5.0.js"></script>
|
||||
|
||||
<script src="test.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
// These tests expect the DOM to contain a presentation
|
||||
// with the following slide structure:
|
||||
//
|
||||
|
|
@ -8,7 +7,6 @@
|
|||
// 3 - Two fragments with same data-fragment-index
|
||||
// 4
|
||||
|
||||
|
||||
Reveal.addEventListener( 'ready', function() {
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
|
|
@ -16,16 +14,16 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'DOM' );
|
||||
|
||||
test( 'Initial slides classes', function() {
|
||||
QUnit.test( 'Initial slides classes', function( assert ) {
|
||||
var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
|
||||
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
|
||||
|
||||
strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
|
||||
|
||||
ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
|
||||
assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
|
|
@ -33,203 +31,203 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'API' );
|
||||
|
||||
test( 'Reveal.isReady', function() {
|
||||
strictEqual( Reveal.isReady(), true, 'returns true' );
|
||||
QUnit.test( 'Reveal.isReady', function( assert ) {
|
||||
assert.strictEqual( Reveal.isReady(), true, 'returns true' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isOverview', function() {
|
||||
strictEqual( Reveal.isOverview(), false, 'false by default' );
|
||||
QUnit.test( 'Reveal.isOverview', function( assert ) {
|
||||
assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
|
||||
|
||||
Reveal.toggleOverview();
|
||||
strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
|
||||
assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
|
||||
|
||||
Reveal.toggleOverview();
|
||||
strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
|
||||
assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isPaused', function() {
|
||||
strictEqual( Reveal.isPaused(), false, 'false by default' );
|
||||
QUnit.test( 'Reveal.isPaused', function( assert ) {
|
||||
assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
|
||||
|
||||
Reveal.togglePause();
|
||||
strictEqual( Reveal.isPaused(), true, 'true after pausing' );
|
||||
assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
|
||||
|
||||
Reveal.togglePause();
|
||||
strictEqual( Reveal.isPaused(), false, 'false after resuming' );
|
||||
assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isFirstSlide', function() {
|
||||
QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
||||
assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
||||
|
||||
Reveal.slide( 1, 0 );
|
||||
strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
|
||||
assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
|
||||
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
||||
assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isFirstSlide after vertical slide', function() {
|
||||
QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
|
||||
Reveal.slide( 1, 1 );
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
|
||||
assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isLastSlide', function() {
|
||||
QUnit.test( 'Reveal.isLastSlide', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||
assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||
|
||||
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||
|
||||
Reveal.slide( lastSlideIndex, 0 );
|
||||
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||
assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||
assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
|
||||
});
|
||||
|
||||
test( 'Reveal.isLastSlide after vertical slide', function() {
|
||||
QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
|
||||
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||
|
||||
Reveal.slide( 1, 1 );
|
||||
Reveal.slide( lastSlideIndex );
|
||||
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||
assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getTotalSlides', function() {
|
||||
strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
|
||||
QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
|
||||
assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getIndices', function() {
|
||||
QUnit.test( 'Reveal.getIndices', function( assert ) {
|
||||
var indices = Reveal.getIndices();
|
||||
|
||||
ok( indices.hasOwnProperty( 'h' ), 'h exists' );
|
||||
ok( indices.hasOwnProperty( 'v' ), 'v exists' );
|
||||
ok( indices.hasOwnProperty( 'f' ), 'f exists' );
|
||||
assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
|
||||
assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
|
||||
assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );
|
||||
|
||||
Reveal.slide( 1, 0 );
|
||||
strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||
strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||
assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||
assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||
|
||||
Reveal.slide( 1, 2 );
|
||||
strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||
strictEqual( Reveal.getIndices().v, 2, 'v 2' );
|
||||
assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
|
||||
assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
|
||||
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.getIndices().h, 0, 'h 0' );
|
||||
strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||
assert.strictEqual( Reveal.getIndices().h, 0, 'h 0' );
|
||||
assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getSlide', function() {
|
||||
equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
|
||||
equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
|
||||
equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
|
||||
equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
|
||||
QUnit.test( 'Reveal.getSlide', function( assert ) {
|
||||
assert.equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
|
||||
assert.equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
|
||||
assert.equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
|
||||
assert.equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
|
||||
|
||||
strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||
strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||
assert.strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||
assert.strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getSlideBackground', function() {
|
||||
equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
|
||||
equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
|
||||
equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(1)' ), 'v index 0 returns first vertical child' );
|
||||
equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 1 returns second vertical child' );
|
||||
QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
|
||||
assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
|
||||
assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
|
||||
assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
|
||||
assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
|
||||
|
||||
strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||
strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||
assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
|
||||
assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getSlideNotes', function() {
|
||||
QUnit.test( 'Reveal.getSlideNotes', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
|
||||
assert.ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
|
||||
|
||||
Reveal.slide( 1, 0 );
|
||||
ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
|
||||
assert.ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getPreviousSlide/getCurrentSlide', function() {
|
||||
QUnit.test( 'Reveal.getPreviousSlide/getCurrentSlide', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
Reveal.slide( 1, 0 );
|
||||
|
||||
var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
|
||||
var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' );
|
||||
|
||||
equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
|
||||
equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
|
||||
assert.equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
|
||||
assert.equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getProgress', function() {
|
||||
QUnit.test( 'Reveal.getProgress', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
|
||||
assert.strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
|
||||
|
||||
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
|
||||
|
||||
Reveal.slide( lastSlideIndex, 0 );
|
||||
strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
|
||||
assert.strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getScale', function() {
|
||||
ok( typeof Reveal.getScale() === 'number', 'has scale' );
|
||||
QUnit.test( 'Reveal.getScale', function( assert ) {
|
||||
assert.ok( typeof Reveal.getScale() === 'number', 'has scale' );
|
||||
});
|
||||
|
||||
test( 'Reveal.getConfig', function() {
|
||||
ok( typeof Reveal.getConfig() === 'object', 'has config' );
|
||||
QUnit.test( 'Reveal.getConfig', function( assert ) {
|
||||
assert.ok( typeof Reveal.getConfig() === 'object', 'has config' );
|
||||
});
|
||||
|
||||
test( 'Reveal.configure', function() {
|
||||
strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
|
||||
QUnit.test( 'Reveal.configure', function( assert ) {
|
||||
assert.strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
|
||||
|
||||
Reveal.configure({ loop: true });
|
||||
strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
|
||||
assert.strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
|
||||
|
||||
Reveal.configure({ loop: false, customTestValue: 1 });
|
||||
strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
|
||||
assert.strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
|
||||
});
|
||||
|
||||
test( 'Reveal.availableRoutes', function() {
|
||||
QUnit.test( 'Reveal.availableRoutes', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
|
||||
assert.deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
|
||||
|
||||
Reveal.slide( 1, 0 );
|
||||
deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
|
||||
assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
|
||||
});
|
||||
|
||||
test( 'Reveal.next', function() {
|
||||
QUnit.test( 'Reveal.next', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
|
||||
// Step through vertical child slides
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
|
||||
|
||||
// Step through fragments
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
|
||||
});
|
||||
|
||||
test( 'Reveal.next at end', function() {
|
||||
QUnit.test( 'Reveal.next at end', function( assert ) {
|
||||
Reveal.slide( 3 );
|
||||
|
||||
// We're at the end, this should have no effect
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -238,121 +236,128 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Fragments' );
|
||||
|
||||
test( 'Sliding to fragments', function() {
|
||||
QUnit.test( 'Sliding to fragments', function( assert ) {
|
||||
Reveal.slide( 2, 0, -1 );
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
|
||||
|
||||
Reveal.slide( 2, 0, 0 );
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
|
||||
|
||||
Reveal.slide( 2, 0, 2 );
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
|
||||
|
||||
Reveal.slide( 2, 0, 1 );
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
|
||||
});
|
||||
|
||||
test( 'Hiding all fragments', function() {
|
||||
QUnit.test( 'Hiding all fragments', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
|
||||
|
||||
Reveal.slide( 2, 0, 0 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
|
||||
|
||||
Reveal.slide( 2, 0, -1 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
|
||||
});
|
||||
|
||||
test( 'Current fragment', function() {
|
||||
QUnit.test( 'Current fragment', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
|
||||
var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );
|
||||
|
||||
Reveal.slide( 2, 0 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
|
||||
|
||||
Reveal.slide( 2, 0, 0 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
|
||||
|
||||
Reveal.slide( 1, 0, 0 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
|
||||
|
||||
Reveal.slide( 3, 0, 0 );
|
||||
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
|
||||
assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
|
||||
|
||||
Reveal.slide( 2, 1, -1 );
|
||||
Reveal.prev();
|
||||
assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
|
||||
});
|
||||
|
||||
test( 'Stepping through fragments', function() {
|
||||
QUnit.test( 'Stepping through fragments', function( assert ) {
|
||||
Reveal.slide( 2, 0, -1 );
|
||||
|
||||
// forwards:
|
||||
|
||||
Reveal.next();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
|
||||
|
||||
Reveal.right();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
|
||||
|
||||
Reveal.down();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
|
||||
|
||||
Reveal.down(); // moves to f #3
|
||||
|
||||
// backwards:
|
||||
|
||||
Reveal.prev();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
|
||||
|
||||
Reveal.left();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
|
||||
|
||||
Reveal.up();
|
||||
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
|
||||
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
|
||||
});
|
||||
|
||||
test( 'Stepping past fragments', function() {
|
||||
QUnit.test( 'Stepping past fragments', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
|
||||
|
||||
Reveal.slide( 0, 0, 0 );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
|
||||
|
||||
Reveal.slide( 3, 0, 0 );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
|
||||
});
|
||||
|
||||
test( 'Fragment indices', function() {
|
||||
QUnit.test( 'Fragment indices', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
|
||||
|
||||
Reveal.slide( 3, 0, 0 );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
|
||||
|
||||
// This slide has three fragments, first one is index 0, second and third have index 1
|
||||
Reveal.slide( 2, 2, 0 );
|
||||
equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
|
||||
assert.equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
|
||||
|
||||
Reveal.slide( 2, 2, 1 );
|
||||
equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
|
||||
assert.equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
|
||||
});
|
||||
|
||||
test( 'Index generation', function() {
|
||||
QUnit.test( 'Index generation', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
|
||||
|
||||
// These have no indices defined to start with
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
|
||||
});
|
||||
|
||||
test( 'Index normalization', function() {
|
||||
QUnit.test( 'Index normalization', function( assert ) {
|
||||
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' );
|
||||
|
||||
// These start out as 1-4-4 and should normalize to 0-1-1
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
|
||||
equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
|
||||
assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
|
||||
});
|
||||
|
||||
asyncTest( 'fragmentshown event', function() {
|
||||
expect( 2 );
|
||||
QUnit.test( 'fragmentshown event', function( assert ) {
|
||||
assert.expect( 2 );
|
||||
var done = assert.async( 2 );
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'fragmentshown', _onEvent );
|
||||
|
|
@ -364,16 +369,16 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.next();
|
||||
Reveal.prev(); // shouldn't fire fragmentshown
|
||||
|
||||
start();
|
||||
|
||||
Reveal.removeEventListener( 'fragmentshown', _onEvent );
|
||||
});
|
||||
|
||||
asyncTest( 'fragmenthidden event', function() {
|
||||
expect( 2 );
|
||||
QUnit.test( 'fragmenthidden event', function( assert ) {
|
||||
assert.expect( 2 );
|
||||
var done = assert.async( 2 );
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'fragmenthidden', _onEvent );
|
||||
|
|
@ -384,8 +389,6 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.prev();
|
||||
Reveal.next(); // shouldn't fire fragmenthidden
|
||||
|
||||
start();
|
||||
|
||||
Reveal.removeEventListener( 'fragmenthidden', _onEvent );
|
||||
});
|
||||
|
||||
|
|
@ -395,50 +398,52 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Auto Sliding' );
|
||||
|
||||
test( 'Reveal.isAutoSliding', function() {
|
||||
strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
|
||||
QUnit.test( 'Reveal.isAutoSliding', function( assert ) {
|
||||
assert.strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
|
||||
|
||||
Reveal.configure({ autoSlide: 10000 });
|
||||
strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
|
||||
assert.strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
|
||||
|
||||
Reveal.configure({ autoSlide: 0 });
|
||||
strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
|
||||
assert.strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
|
||||
});
|
||||
|
||||
test( 'Reveal.toggleAutoSlide', function() {
|
||||
QUnit.test( 'Reveal.toggleAutoSlide', function( assert ) {
|
||||
Reveal.configure({ autoSlide: 10000 });
|
||||
|
||||
Reveal.toggleAutoSlide();
|
||||
strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
|
||||
assert.strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
|
||||
Reveal.toggleAutoSlide();
|
||||
strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
|
||||
assert.strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
|
||||
|
||||
Reveal.configure({ autoSlide: 0 });
|
||||
});
|
||||
|
||||
asyncTest( 'autoslidepaused', function() {
|
||||
expect( 1 );
|
||||
QUnit.test( 'autoslidepaused', function( assert ) {
|
||||
assert.expect( 1 );
|
||||
var done = assert.async();
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'autoslidepaused', _onEvent );
|
||||
Reveal.configure({ autoSlide: 10000 });
|
||||
Reveal.toggleAutoSlide();
|
||||
|
||||
start();
|
||||
|
||||
// cleanup
|
||||
Reveal.configure({ autoSlide: 0 });
|
||||
Reveal.removeEventListener( 'autoslidepaused', _onEvent );
|
||||
});
|
||||
|
||||
asyncTest( 'autoslideresumed', function() {
|
||||
expect( 1 );
|
||||
QUnit.test( 'autoslideresumed', function( assert ) {
|
||||
assert.expect( 1 );
|
||||
var done = assert.async();
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'autoslideresumed', _onEvent );
|
||||
|
|
@ -446,8 +451,6 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.toggleAutoSlide();
|
||||
Reveal.toggleAutoSlide();
|
||||
|
||||
start();
|
||||
|
||||
// cleanup
|
||||
Reveal.configure({ autoSlide: 0 });
|
||||
Reveal.removeEventListener( 'autoslideresumed', _onEvent );
|
||||
|
|
@ -459,36 +462,36 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Configuration' );
|
||||
|
||||
test( 'Controls', function() {
|
||||
QUnit.test( 'Controls', function( assert ) {
|
||||
var controlsElement = document.querySelector( '.reveal>.controls' );
|
||||
|
||||
Reveal.configure({ controls: false });
|
||||
equal( controlsElement.style.display, 'none', 'controls are hidden' );
|
||||
assert.equal( controlsElement.style.display, 'none', 'controls are hidden' );
|
||||
|
||||
Reveal.configure({ controls: true });
|
||||
equal( controlsElement.style.display, 'block', 'controls are visible' );
|
||||
assert.equal( controlsElement.style.display, 'block', 'controls are visible' );
|
||||
});
|
||||
|
||||
test( 'Progress', function() {
|
||||
QUnit.test( 'Progress', function( assert ) {
|
||||
var progressElement = document.querySelector( '.reveal>.progress' );
|
||||
|
||||
Reveal.configure({ progress: false });
|
||||
equal( progressElement.style.display, 'none', 'progress are hidden' );
|
||||
assert.equal( progressElement.style.display, 'none', 'progress are hidden' );
|
||||
|
||||
Reveal.configure({ progress: true });
|
||||
equal( progressElement.style.display, 'block', 'progress are visible' );
|
||||
assert.equal( progressElement.style.display, 'block', 'progress are visible' );
|
||||
});
|
||||
|
||||
test( 'Loop', function() {
|
||||
QUnit.test( 'Loop', function( assert ) {
|
||||
Reveal.configure({ loop: true });
|
||||
|
||||
Reveal.slide( 0, 0 );
|
||||
|
||||
Reveal.left();
|
||||
notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
|
||||
assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
|
||||
|
||||
Reveal.right();
|
||||
equal( Reveal.getIndices().h, 0, 'looped from end to start' );
|
||||
assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
|
||||
|
||||
Reveal.configure({ loop: false });
|
||||
});
|
||||
|
|
@ -499,34 +502,34 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Lazy-Loading' );
|
||||
|
||||
test( 'img with data-src', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
|
||||
QUnit.test( 'img with data-src', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
|
||||
});
|
||||
|
||||
test( 'video with data-src', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
|
||||
QUnit.test( 'video with data-src', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
|
||||
});
|
||||
|
||||
test( 'audio with data-src', function() {
|
||||
strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
|
||||
QUnit.test( 'audio with data-src', function( assert ) {
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
|
||||
});
|
||||
|
||||
test( 'iframe with data-src', function() {
|
||||
QUnit.test( 'iframe with data-src', function( assert ) {
|
||||
Reveal.slide( 0, 0 );
|
||||
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
|
||||
Reveal.slide( 2, 1 );
|
||||
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
|
||||
Reveal.slide( 2, 2 );
|
||||
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
|
||||
});
|
||||
|
||||
test( 'background images', function() {
|
||||
QUnit.test( 'background images', function( assert ) {
|
||||
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
|
||||
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
|
||||
|
||||
// check that the images are applied to the background elements
|
||||
ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
|
||||
ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
|
||||
assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
|
||||
assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -535,11 +538,13 @@ Reveal.addEventListener( 'ready', function() {
|
|||
|
||||
QUnit.module( 'Events' );
|
||||
|
||||
asyncTest( 'slidechanged', function() {
|
||||
expect( 3 );
|
||||
QUnit.test( 'slidechanged', function( assert ) {
|
||||
assert.expect( 3 );
|
||||
var done = assert.async( 3 );
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'slidechanged', _onEvent );
|
||||
|
|
@ -550,17 +555,17 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.slide( 3, 0 ); // should trigger
|
||||
Reveal.next(); // should do nothing
|
||||
|
||||
start();
|
||||
|
||||
Reveal.removeEventListener( 'slidechanged', _onEvent );
|
||||
|
||||
});
|
||||
|
||||
asyncTest( 'paused', function() {
|
||||
expect( 1 );
|
||||
QUnit.test( 'paused', function( assert ) {
|
||||
assert.expect( 1 );
|
||||
var done = assert.async();
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'paused', _onEvent );
|
||||
|
|
@ -568,16 +573,16 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.togglePause();
|
||||
Reveal.togglePause();
|
||||
|
||||
start();
|
||||
|
||||
Reveal.removeEventListener( 'paused', _onEvent );
|
||||
});
|
||||
|
||||
asyncTest( 'resumed', function() {
|
||||
expect( 1 );
|
||||
QUnit.test( 'resumed', function( assert ) {
|
||||
assert.expect( 1 );
|
||||
var done = assert.async();
|
||||
|
||||
var _onEvent = function( event ) {
|
||||
ok( true, 'event fired' );
|
||||
assert.ok( true, 'event fired' );
|
||||
done();
|
||||
}
|
||||
|
||||
Reveal.addEventListener( 'resumed', _onEvent );
|
||||
|
|
@ -585,13 +590,9 @@ Reveal.addEventListener( 'ready', function() {
|
|||
Reveal.togglePause();
|
||||
Reveal.togglePause();
|
||||
|
||||
start();
|
||||
|
||||
Reveal.removeEventListener( 'resumed', _onEvent );
|
||||
});
|
||||
|
||||
|
||||
} );
|
||||
|
||||
Reveal.initialize();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue