update reveal
This commit is contained in:
orang tua
2801aa8c12
melakukan
d120cb3fa7
80
Gruntfile.js
80
Gruntfile.js
@ -12,7 +12,7 @@ module.exports = function(grunt) {
|
||||
banner:
|
||||
'/*!\n' +
|
||||
' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
|
||||
' * http://lab.hakim.se/reveal-js\n' +
|
||||
' * http://revealjs.com\n' +
|
||||
' * MIT licensed\n' +
|
||||
' *\n' +
|
||||
' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
|
||||
@ -25,7 +25,8 @@ module.exports = function(grunt) {
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>\n'
|
||||
banner: '<%= meta.banner %>\n',
|
||||
screwIE8: false
|
||||
},
|
||||
build: {
|
||||
src: 'js/reveal.js',
|
||||
@ -35,34 +36,31 @@ module.exports = function(grunt) {
|
||||
|
||||
sass: {
|
||||
core: {
|
||||
files: {
|
||||
'css/reveal.css': 'css/reveal.scss',
|
||||
}
|
||||
src: 'css/reveal.scss',
|
||||
dest: 'css/reveal.css'
|
||||
},
|
||||
themes: {
|
||||
files: [
|
||||
{
|
||||
expand: true,
|
||||
cwd: 'css/theme/source',
|
||||
src: ['*.sass', '*.scss'],
|
||||
dest: 'css/theme',
|
||||
ext: '.css'
|
||||
}
|
||||
]
|
||||
expand: true,
|
||||
cwd: 'css/theme/source',
|
||||
src: ['*.sass', '*.scss'],
|
||||
dest: 'css/theme',
|
||||
ext: '.css'
|
||||
}
|
||||
},
|
||||
|
||||
autoprefixer: {
|
||||
dist: {
|
||||
core: {
|
||||
src: 'css/reveal.css'
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
options: {
|
||||
compatibility: 'ie9'
|
||||
},
|
||||
compress: {
|
||||
files: {
|
||||
'css/reveal.min.css': [ 'css/reveal.css' ]
|
||||
}
|
||||
src: 'css/reveal.css',
|
||||
dest: 'css/reveal.min.css'
|
||||
}
|
||||
},
|
||||
|
||||
@ -72,7 +70,7 @@ module.exports = function(grunt) {
|
||||
eqeqeq: true,
|
||||
immed: true,
|
||||
esnext: true,
|
||||
latedef: true,
|
||||
latedef: 'nofunc',
|
||||
newcap: true,
|
||||
noarg: true,
|
||||
sub: true,
|
||||
@ -98,22 +96,25 @@ module.exports = function(grunt) {
|
||||
port: port,
|
||||
base: root,
|
||||
livereload: true,
|
||||
open: true
|
||||
open: true,
|
||||
useAvailablePort: true
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
zip: {
|
||||
'reveal-js-presentation.zip': [
|
||||
'index.html',
|
||||
'css/**',
|
||||
'js/**',
|
||||
'lib/**',
|
||||
'images/**',
|
||||
'plugin/**',
|
||||
'**.md'
|
||||
]
|
||||
bundle: {
|
||||
src: [
|
||||
'index.html',
|
||||
'css/**',
|
||||
'js/**',
|
||||
'lib/**',
|
||||
'images/**',
|
||||
'plugin/**',
|
||||
'**.md'
|
||||
],
|
||||
dest: 'reveal-js-presentation.zip'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -146,25 +147,24 @@ module.exports = function(grunt) {
|
||||
},
|
||||
|
||||
retire: {
|
||||
js: ['js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js'],
|
||||
node: ['.'],
|
||||
options: {}
|
||||
js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
|
||||
node: [ '.' ]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Dependencies
|
||||
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
|
||||
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-sass' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-connect' );
|
||||
grunt.loadNpmTasks( 'grunt-autoprefixer' );
|
||||
grunt.loadNpmTasks( 'grunt-zip' );
|
||||
grunt.loadNpmTasks( 'grunt-retire' );
|
||||
|
||||
grunt.loadNpmTasks( 'grunt-sass' );
|
||||
grunt.loadNpmTasks( 'grunt-zip' );
|
||||
|
||||
// Default task
|
||||
grunt.registerTask( 'default', [ 'css', 'js' ] );
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "reveal.js",
|
||||
"version": "3.5.0",
|
||||
"version": "3.6.0",
|
||||
"main": [
|
||||
"js/reveal.js",
|
||||
"css/reveal.css"
|
||||
],
|
||||
"homepage": "http://lab.hakim.se/reveal-js/",
|
||||
"homepage": "http://revealjs.com",
|
||||
"license": "MIT",
|
||||
"description": "The HTML Presentation Framework",
|
||||
"authors": [
|
||||
|
||||
@ -144,9 +144,14 @@ ul, ol, div, p {
|
||||
}
|
||||
|
||||
/* Display slide speaker notes when 'showNotes' is enabled */
|
||||
.reveal.show-notes {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
.reveal .speaker-notes-pdf {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
top: auto;
|
||||
right: auto;
|
||||
@ -162,6 +167,7 @@ ul, ol, div, p {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
page-break-after: always;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Display slide numbers when 'slideNumber' is enabled */
|
||||
|
||||
700
css/reveal.css
700
css/reveal.css
File diff ditekan karena terlalu besar
Load Diff
402
css/reveal.scss
402
css/reveal.scss
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* reveal.js
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
@ -235,90 +235,279 @@ body {
|
||||
* CONTROLS
|
||||
*********************************************/
|
||||
|
||||
@keyframes bounce-right {
|
||||
0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
|
||||
20% {transform: translateX(10px);}
|
||||
30% {transform: translateX(-5px);}
|
||||
}
|
||||
|
||||
@keyframes bounce-down {
|
||||
0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
|
||||
20% {transform: translateY(10px);}
|
||||
30% {transform: translateY(-5px);}
|
||||
}
|
||||
|
||||
$controlArrowSize: 3.6em;
|
||||
$controlArrowSpacing: 1.4em;
|
||||
$controlArrowLength: 2.6em;
|
||||
$controlArrowThickness: 0.5em;
|
||||
$controlsArrowAngle: 45deg;
|
||||
$controlsArrowAngleHover: 40deg;
|
||||
$controlsArrowAngleActive: 36deg;
|
||||
|
||||
@mixin controlsArrowTransform( $angle ) {
|
||||
&:before {
|
||||
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls {
|
||||
$spacing: 12px;
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
z-index: 30;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.reveal .controls button {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
opacity: 0.05;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
border: 12px solid transparent;
|
||||
transform: scale(.9999);
|
||||
transition: all 0.2s ease;
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
top: auto;
|
||||
bottom: $spacing;
|
||||
right: $spacing;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
color: #000;
|
||||
pointer-events: none;
|
||||
font-size: 10px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
color: currentColor;
|
||||
transform: scale(.9999);
|
||||
transition: color 0.2s ease,
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
z-index: 2; // above slides
|
||||
pointer-events: auto;
|
||||
font-size: inherit;
|
||||
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
|
||||
.controls-arrow:before,
|
||||
.controls-arrow:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $controlArrowLength;
|
||||
height: $controlArrowThickness;
|
||||
border-radius: $controlArrowThickness/2;
|
||||
background-color: currentColor;
|
||||
|
||||
transition: all 0.15s ease, background-color 0.8s ease;
|
||||
transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.controls-arrow {
|
||||
position: relative;
|
||||
width: $controlArrowSize;
|
||||
height: $controlArrowSize;
|
||||
|
||||
@include controlsArrowTransform( $controlsArrowAngle );
|
||||
|
||||
&:hover {
|
||||
@include controlsArrowTransform( $controlsArrowAngleHover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include controlsArrowTransform( $controlsArrowAngleActive );
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-left {
|
||||
right: $controlArrowSize + $controlArrowSpacing*2;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
transform: translateX( -10px );
|
||||
}
|
||||
|
||||
.navigate-right {
|
||||
right: 0;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize/2;
|
||||
transform: translateX( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( 180deg );
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
animation: bounce-right 2s 50 both ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: $controlArrowSpacing*2 + $controlArrowSize;
|
||||
transform: translateY( -10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( 90deg );
|
||||
}
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
right: $controlArrowSpacing + $controlArrowSize/2;
|
||||
bottom: 0;
|
||||
transform: translateY( 10px );
|
||||
|
||||
.controls-arrow {
|
||||
transform: rotate( -90deg );
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
animation: bounce-down 2s 50 both ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Back arrow style: "faded":
|
||||
// Deemphasize backwards navigation arrows in favor of drawing
|
||||
// attention to forwards navigation
|
||||
&[data-controls-back-arrows="faded"] .navigate-left.enabled,
|
||||
&[data-controls-back-arrows="faded"] .navigate-up.enabled {
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Back arrow style: "hidden":
|
||||
// Never show arrows for backwards navigation
|
||||
&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
|
||||
&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Any control button that can be clicked is "enabled"
|
||||
.enabled {
|
||||
visibility: visible;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
// Any control button that leads to showing or hiding
|
||||
// a fragment
|
||||
.enabled.fragmented {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.enabled:hover,
|
||||
.enabled.fragmented:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .controls .enabled {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
// Adjust the layout when there are no vertical slides
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-left {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em + $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
|
||||
.reveal .controls .enabled:active {
|
||||
margin-top: 1px;
|
||||
.reveal:not(.has-vertical-slides) .controls .navigate-right {
|
||||
bottom: $controlArrowSpacing;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-left {
|
||||
top: 42px;
|
||||
// Adjust the layout when there are no horizontal slides
|
||||
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
|
||||
right: $controlArrowSpacing;
|
||||
bottom: $controlArrowSpacing + $controlArrowSize;
|
||||
}
|
||||
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
|
||||
right: $controlArrowSpacing;
|
||||
bottom: 0.5em;
|
||||
}
|
||||
|
||||
border-right-width: 22px;
|
||||
border-right-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-left.fragmented {
|
||||
opacity: 0.3;
|
||||
// Invert arrows based on background color
|
||||
.reveal.has-dark-background .controls {
|
||||
color: #fff;
|
||||
}
|
||||
.reveal.has-light-background .controls {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Disable active states on touch devices
|
||||
.reveal.no-hover .controls .controls-arrow:hover,
|
||||
.reveal.no-hover .controls .controls-arrow:active {
|
||||
@include controlsArrowTransform( $controlsArrowAngle );
|
||||
}
|
||||
|
||||
// Edge aligned controls layout
|
||||
@media screen and (min-width: 500px) {
|
||||
|
||||
$spacing: 8px;
|
||||
|
||||
.reveal .controls[data-controls-layout="edges"] {
|
||||
& {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-right {
|
||||
left: 74px;
|
||||
top: 42px;
|
||||
|
||||
border-left-width: 22px;
|
||||
border-left-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-right.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-left,
|
||||
.navigate-right,
|
||||
.navigate-up,
|
||||
.navigate-down {
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-up {
|
||||
left: 42px;
|
||||
|
||||
border-bottom-width: 22px;
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-up.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-left {
|
||||
top: 50%;
|
||||
left: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-down {
|
||||
left: 42px;
|
||||
top: 74px;
|
||||
|
||||
border-top-width: 22px;
|
||||
border-top-color: #000;
|
||||
}
|
||||
.reveal .controls .navigate-down.fragmented {
|
||||
opacity: 0.3;
|
||||
.navigate-right {
|
||||
top: 50%;
|
||||
right: $spacing;
|
||||
margin-top: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.navigate-up {
|
||||
top: $spacing;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
}
|
||||
|
||||
.navigate-down {
|
||||
bottom: $spacing;
|
||||
left: 50%;
|
||||
margin-left: -$controlArrowSize/2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
||||
.reveal .progress {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
display: none;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
@ -327,21 +516,22 @@ body {
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba( 0, 0, 0, 0.2 );
|
||||
color: #fff;
|
||||
}
|
||||
.reveal .progress:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
top: -20px;
|
||||
top: -10px;
|
||||
}
|
||||
.reveal .progress span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0px;
|
||||
|
||||
background-color: #000;
|
||||
background-color: currentColor;
|
||||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
@ -379,6 +569,16 @@ body {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .slides {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -1336,12 +1536,13 @@ body {
|
||||
*********************************************/
|
||||
|
||||
.reveal .playback {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: 20px;
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
transition: all 400ms ease;
|
||||
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
|
||||
}
|
||||
|
||||
.reveal.overview .playback {
|
||||
@ -1410,37 +1611,84 @@ body {
|
||||
.reveal .speaker-notes {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
max-height: 15%;
|
||||
left: 15%;
|
||||
bottom: 26px;
|
||||
padding: 10px;
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
padding: 14px 18px 14px 18px;
|
||||
z-index: 1;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
border: 1px solid rgba( 0, 0, 0, 0.05 );
|
||||
color: #222;
|
||||
background-color: #f5f5f5;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
font-family: Helvetica, sans-serif;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.notes-placeholder {
|
||||
color: #ccc;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: 'Speaker notes';
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.reveal .speaker-notes.visible:not(:empty) {
|
||||
|
||||
.reveal.show-notes {
|
||||
max-width: 75vw;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media screen and (min-width: 1600px) {
|
||||
.reveal .speaker-notes {
|
||||
font-size: 14px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.reveal.show-notes {
|
||||
border-left: 0;
|
||||
max-width: none;
|
||||
max-height: 70%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: (30/0.7)*1%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.reveal.show-notes {
|
||||
max-height: 60%;
|
||||
}
|
||||
|
||||
.reveal.show-notes .speaker-notes {
|
||||
top: 100%;
|
||||
height: (40/0.6)*1%;
|
||||
}
|
||||
|
||||
.reveal .speaker-notes {
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -126,10 +126,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -160,7 +156,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -255,42 +252,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #8b743d; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #8b743d; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #8b743d; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #8b743d; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #c0a86e; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #c0a86e; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #c0a86e; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #c0a86e; }
|
||||
.reveal .controls {
|
||||
color: #8b743d; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #8b743d; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #8b743d;
|
||||
-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); }
|
||||
|
||||
@ -122,10 +122,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -156,7 +152,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -251,42 +248,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #42affa; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #42affa; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #42affa; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #42affa; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #8dcffc; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #8dcffc; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #8dcffc; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #8dcffc; }
|
||||
.reveal .controls {
|
||||
color: #42affa; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #42affa; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #42affa;
|
||||
-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); }
|
||||
|
||||
@ -125,10 +125,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -159,7 +155,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -254,42 +251,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #a23; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #a23; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #a23; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #a23; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #dd5566; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #dd5566; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #dd5566; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #dd5566; }
|
||||
.reveal .controls {
|
||||
color: #a23; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #a23; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #a23;
|
||||
-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); }
|
||||
|
||||
@ -128,10 +128,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -162,7 +158,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -257,42 +254,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #13DAEC; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #13DAEC; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #13DAEC; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #13DAEC; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #71e9f4; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #71e9f4; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #71e9f4; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #71e9f4; }
|
||||
.reveal .controls {
|
||||
color: #13DAEC; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #13DAEC; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #13DAEC;
|
||||
-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); }
|
||||
|
||||
@ -126,10 +126,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -160,7 +156,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -255,42 +252,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #78b9e6; }
|
||||
.reveal .controls {
|
||||
color: #268bd2; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #268bd2;
|
||||
-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); }
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
*
|
||||
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||
*/
|
||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
||||
/*@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);*/
|
||||
/*********************************************
|
||||
* GLOBAL STYLES
|
||||
*********************************************/
|
||||
@ -120,10 +120,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -154,7 +150,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -249,42 +246,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #f3d7ac; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #f3d7ac; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #f3d7ac; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #f3d7ac; }
|
||||
.reveal .controls {
|
||||
color: #e7ad52; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #e7ad52; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #e7ad52;
|
||||
-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); }
|
||||
|
||||
@ -122,10 +122,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -156,7 +152,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -251,42 +248,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #51483D; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #51483D; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #51483D; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #51483D; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #8b7c69; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #8b7c69; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #8b7c69; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #8b7c69; }
|
||||
.reveal .controls {
|
||||
color: #51483D; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #51483D; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #51483D;
|
||||
-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); }
|
||||
|
||||
@ -125,10 +125,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -159,7 +155,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -254,42 +251,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #00008B; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #00008B; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #00008B; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #00008B; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #0000f1; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #0000f1; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #0000f1; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #0000f1; }
|
||||
.reveal .controls {
|
||||
color: #00008B; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #00008B; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #00008B;
|
||||
-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); }
|
||||
|
||||
@ -129,10 +129,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -163,7 +159,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -258,42 +255,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #3b759e; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #3b759e; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #3b759e; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #3b759e; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #74a7cb; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #74a7cb; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #74a7cb; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #74a7cb; }
|
||||
.reveal .controls {
|
||||
color: #3b759e; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #3b759e; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #3b759e;
|
||||
-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); }
|
||||
|
||||
@ -126,10 +126,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -160,7 +156,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -255,42 +252,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #268bd2; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #78b9e6; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #78b9e6; }
|
||||
.reveal .controls {
|
||||
color: #268bd2; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #268bd2; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #268bd2;
|
||||
-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); }
|
||||
|
||||
@ -134,11 +134,6 @@ body {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -174,8 +169,10 @@ body {
|
||||
|
||||
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
@ -297,40 +294,8 @@ body {
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: $linkColor;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: $linkColorHover;
|
||||
}
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: $linkColorHover;
|
||||
.reveal .controls {
|
||||
color: $linkColor;
|
||||
}
|
||||
|
||||
|
||||
@ -340,10 +305,9 @@ body {
|
||||
|
||||
.reveal .progress {
|
||||
background: rgba(0,0,0,0.2);
|
||||
color: $linkColor;
|
||||
}
|
||||
.reveal .progress span {
|
||||
background: $linkColor;
|
||||
|
||||
-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);
|
||||
|
||||
@ -122,10 +122,6 @@ body {
|
||||
.reveal dd {
|
||||
margin-left: 40px; }
|
||||
|
||||
.reveal q,
|
||||
.reveal blockquote {
|
||||
quotes: none; }
|
||||
|
||||
.reveal blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -156,7 +152,8 @@ body {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.reveal code {
|
||||
font-family: monospace; }
|
||||
font-family: monospace;
|
||||
text-transform: none; }
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
@ -251,42 +248,17 @@ body {
|
||||
/*********************************************
|
||||
* NAVIGATION CONTROLS
|
||||
*********************************************/
|
||||
.reveal .controls .navigate-left,
|
||||
.reveal .controls .navigate-left.enabled {
|
||||
border-right-color: #2a76dd; }
|
||||
|
||||
.reveal .controls .navigate-right,
|
||||
.reveal .controls .navigate-right.enabled {
|
||||
border-left-color: #2a76dd; }
|
||||
|
||||
.reveal .controls .navigate-up,
|
||||
.reveal .controls .navigate-up.enabled {
|
||||
border-bottom-color: #2a76dd; }
|
||||
|
||||
.reveal .controls .navigate-down,
|
||||
.reveal .controls .navigate-down.enabled {
|
||||
border-top-color: #2a76dd; }
|
||||
|
||||
.reveal .controls .navigate-left.enabled:hover {
|
||||
border-right-color: #6ca0e8; }
|
||||
|
||||
.reveal .controls .navigate-right.enabled:hover {
|
||||
border-left-color: #6ca0e8; }
|
||||
|
||||
.reveal .controls .navigate-up.enabled:hover {
|
||||
border-bottom-color: #6ca0e8; }
|
||||
|
||||
.reveal .controls .navigate-down.enabled:hover {
|
||||
border-top-color: #6ca0e8; }
|
||||
.reveal .controls {
|
||||
color: #2a76dd; }
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
.reveal .progress {
|
||||
background: rgba(0, 0, 0, 0.2); }
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #2a76dd; }
|
||||
|
||||
.reveal .progress span {
|
||||
background: #2a76dd;
|
||||
-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); }
|
||||
|
||||
10
demo.html
10
demo.html
@ -44,7 +44,7 @@
|
||||
<h1>Reveal.js</h1>
|
||||
<h3>The HTML Presentation Framework</h3>
|
||||
<p>
|
||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
|
||||
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
<section>
|
||||
<h2>Slides</h2>
|
||||
<p>
|
||||
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slides.com" target="_blank">http://slides.com</a>.
|
||||
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@ -295,8 +295,7 @@ function linkify( selector ) {
|
||||
<section>
|
||||
<h2>Clever Quotes</h2>
|
||||
<p>
|
||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||
“The nice thing about standards is that there are so many to choose from”</q> and block:
|
||||
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
|
||||
</p>
|
||||
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
|
||||
“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
|
||||
@ -370,7 +369,7 @@ Reveal.addEventListener( 'customevent', function() {
|
||||
<section style="text-align: left;">
|
||||
<h1>THE END</h1>
|
||||
<p>
|
||||
- <a href="http://slides.com">Try the online editor</a> <br>
|
||||
- <a href="https://slides.com">Try the online editor</a> <br>
|
||||
- <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
|
||||
</p>
|
||||
</section>
|
||||
@ -399,6 +398,7 @@ Reveal.addEventListener( 'customevent', function() {
|
||||
{ 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/search/search.js', async: true },
|
||||
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
||||
{ src: 'plugin/notes/notes.js', async: true }
|
||||
]
|
||||
|
||||
275
js/reveal.js
275
js/reveal.js
@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* reveal.js
|
||||
* http://lab.hakim.se/reveal-js
|
||||
* http://revealjs.com
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
|
||||
@ -26,7 +26,7 @@
|
||||
var Reveal;
|
||||
|
||||
// The reveal.js version
|
||||
var VERSION = '3.5.0';
|
||||
var VERSION = '3.6.0';
|
||||
|
||||
var SLIDES_SELECTOR = '.slides section',
|
||||
HORIZONTAL_SLIDES_SELECTOR = '.slides>section',
|
||||
@ -49,9 +49,20 @@
|
||||
minScale: 0.2,
|
||||
maxScale: 2.0,
|
||||
|
||||
// Display controls in the bottom right corner
|
||||
// Display presentation control arrows
|
||||
controls: true,
|
||||
|
||||
// Help the user learn the controls by providing hints, for example by
|
||||
// bouncing the down arrow when they first encounter a vertical slide
|
||||
controlsTutorial: true,
|
||||
|
||||
// Determines where controls appear, "edges" or "bottom-right"
|
||||
controlsLayout: 'bottom-right',
|
||||
|
||||
// Visibility rule for backwards navigation arrows; "faded", "hidden"
|
||||
// or "visible"
|
||||
controlsBackArrows: 'faded',
|
||||
|
||||
// Display a presentation progress bar
|
||||
progress: true,
|
||||
|
||||
@ -106,14 +117,16 @@
|
||||
showNotes: false,
|
||||
|
||||
// Global override for autolaying embedded media (video/audio/iframe)
|
||||
// - null: Media will only autoplay if data-autoplay is present
|
||||
// - true: All media will autoplay, regardless of individual setting
|
||||
// - false: No media will autoplay, regardless of individual setting
|
||||
// - null: Media will only autoplay if data-autoplay is present
|
||||
// - true: All media will autoplay, regardless of individual setting
|
||||
// - false: No media will autoplay, regardless of individual setting
|
||||
autoPlayMedia: null,
|
||||
|
||||
// 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
|
||||
// Controls automatic progression to the next slide
|
||||
// - 0: Auto-sliding only happens if the data-autoslide HTML attribute
|
||||
// is present on the current slide or fragment
|
||||
// - 1+: All slides will progress automatically at the given interval
|
||||
// - false: No auto-sliding, even if data-autoslide is present
|
||||
autoSlide: 0,
|
||||
|
||||
// Stop auto-sliding after user input
|
||||
@ -132,6 +145,8 @@
|
||||
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,
|
||||
|
||||
// Exposes the reveal.js API through window.postMessage
|
||||
@ -207,6 +222,10 @@
|
||||
|
||||
previousBackground,
|
||||
|
||||
// Remember which directions that the user has navigated towards
|
||||
hasNavigatedRight = false,
|
||||
hasNavigatedDown = false,
|
||||
|
||||
// Slides may hold a data-state attribute which we pick up and apply
|
||||
// as a class to the body. This list contains the combined state of
|
||||
// all current slides.
|
||||
@ -444,6 +463,8 @@
|
||||
*/
|
||||
function start() {
|
||||
|
||||
loaded = true;
|
||||
|
||||
// Make sure we've got all the DOM elements we need
|
||||
setupDOM();
|
||||
|
||||
@ -471,8 +492,6 @@
|
||||
// Enable transitions now that we're loaded
|
||||
dom.slides.classList.remove( 'no-transition' );
|
||||
|
||||
loaded = true;
|
||||
|
||||
dom.wrapper.classList.add( 'ready' );
|
||||
|
||||
dispatchEvent( 'ready', {
|
||||
@ -508,6 +527,20 @@
|
||||
// Prevent transitions while we're loading
|
||||
dom.slides.classList.add( 'no-transition' );
|
||||
|
||||
if( isMobileDevice ) {
|
||||
dom.wrapper.classList.add( 'no-hover' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'no-hover' );
|
||||
}
|
||||
|
||||
if( /iphone/gi.test( UA ) ) {
|
||||
dom.wrapper.classList.add( 'ua-iphone' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'ua-iphone' );
|
||||
}
|
||||
|
||||
// Background element
|
||||
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );
|
||||
|
||||
@ -516,11 +549,11 @@
|
||||
dom.progressbar = dom.progress.querySelector( 'span' );
|
||||
|
||||
// Arrow controls
|
||||
createSingletonNode( dom.wrapper, 'aside', 'controls',
|
||||
'<button class="navigate-left" aria-label="previous slide"></button>' +
|
||||
'<button class="navigate-right" aria-label="next slide"></button>' +
|
||||
'<button class="navigate-up" aria-label="above slide"></button>' +
|
||||
'<button class="navigate-down" aria-label="below slide"></button>' );
|
||||
dom.controls = createSingletonNode( dom.wrapper, 'aside', 'controls',
|
||||
'<button class="navigate-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +
|
||||
'<button class="navigate-right" aria-label="next slide"><div class="controls-arrow"></div></button>' +
|
||||
'<button class="navigate-up" aria-label="above slide"><div class="controls-arrow"></div></button>' +
|
||||
'<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );
|
||||
|
||||
// Slide number
|
||||
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
|
||||
@ -533,9 +566,6 @@
|
||||
// Overlay graphic which is displayed during the paused mode
|
||||
createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null );
|
||||
|
||||
// Cache references to elements
|
||||
dom.controls = document.querySelector( '.reveal .controls' );
|
||||
|
||||
dom.wrapper.setAttribute( 'role', 'application' );
|
||||
|
||||
// There can be multiple instances of controls throughout the page
|
||||
@ -546,6 +576,10 @@
|
||||
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
|
||||
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
|
||||
|
||||
// The right and down arrows in the standard reveal.js controls
|
||||
dom.controlsRightArrow = dom.controls.querySelector( '.navigate-right' );
|
||||
dom.controlsDownArrow = dom.controls.querySelector( '.navigate-down' );
|
||||
|
||||
dom.statusDiv = createStatusDiv();
|
||||
}
|
||||
|
||||
@ -789,7 +823,7 @@
|
||||
|
||||
// If no node was found, create it now
|
||||
var node = document.createElement( tagname );
|
||||
node.classList.add( classname );
|
||||
node.className = classname;
|
||||
if( typeof innerHTML === 'string' ) {
|
||||
node.innerHTML = innerHTML;
|
||||
}
|
||||
@ -982,14 +1016,22 @@
|
||||
*/
|
||||
function configure( options ) {
|
||||
|
||||
var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
|
||||
|
||||
dom.wrapper.classList.remove( config.transition );
|
||||
var oldTransition = config.transition;
|
||||
|
||||
// New config options may be passed when this method
|
||||
// is invoked through the API after initialization
|
||||
if( typeof options === 'object' ) extend( config, options );
|
||||
|
||||
// Abort if reveal.js hasn't finished loading, config
|
||||
// changes will be applied automatically once loading
|
||||
// finishes
|
||||
if( loaded === false ) return;
|
||||
|
||||
var numberOfSlides = dom.wrapper.querySelectorAll( SLIDES_SELECTOR ).length;
|
||||
|
||||
// Remove the previously configured transition class
|
||||
dom.wrapper.classList.remove( oldTransition );
|
||||
|
||||
// Force linear transition based on browser capabilities
|
||||
if( features.transforms3d === false ) config.transition = 'linear';
|
||||
|
||||
@ -1001,6 +1043,9 @@
|
||||
dom.controls.style.display = config.controls ? 'block' : 'none';
|
||||
dom.progress.style.display = config.progress ? 'block' : 'none';
|
||||
|
||||
dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );
|
||||
dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
|
||||
|
||||
if( config.shuffle ) {
|
||||
shuffle();
|
||||
}
|
||||
@ -1025,12 +1070,8 @@
|
||||
}
|
||||
|
||||
if( config.showNotes ) {
|
||||
dom.speakerNotes.classList.add( 'visible' );
|
||||
dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
|
||||
}
|
||||
else {
|
||||
dom.speakerNotes.classList.remove( 'visible' );
|
||||
}
|
||||
|
||||
if( config.mouseWheel ) {
|
||||
document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF
|
||||
@ -1235,6 +1276,8 @@
|
||||
a[ i ] = b[ i ];
|
||||
}
|
||||
|
||||
return a;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -1261,7 +1304,7 @@
|
||||
if( value === 'null' ) return null;
|
||||
else if( value === 'true' ) return true;
|
||||
else if( value === 'false' ) return false;
|
||||
else if( value.match( /^[\d\.]+$/ ) ) return parseFloat( value );
|
||||
else if( value.match( /^-?[\d\.]+$/ ) ) return parseFloat( value );
|
||||
}
|
||||
|
||||
return value;
|
||||
@ -2463,13 +2506,14 @@
|
||||
updateSlideNumber();
|
||||
updateSlidesVisibility();
|
||||
updateBackground( true );
|
||||
updateNotesVisibility();
|
||||
updateNotes();
|
||||
|
||||
formatEmbeddedContent();
|
||||
|
||||
// Start or stop embedded content depending on global config
|
||||
if( config.autoPlayMedia === false ) {
|
||||
stopEmbeddedContent( currentSlide );
|
||||
stopEmbeddedContent( currentSlide, { unloadIframes: false } );
|
||||
}
|
||||
else {
|
||||
startEmbeddedContent( currentSlide );
|
||||
@ -2706,10 +2750,10 @@
|
||||
|
||||
// Show the horizontal slide if it's within the view distance
|
||||
if( distanceX < viewDistance ) {
|
||||
showSlide( horizontalSlide );
|
||||
loadSlide( horizontalSlide );
|
||||
}
|
||||
else {
|
||||
hideSlide( horizontalSlide );
|
||||
unloadSlide( horizontalSlide );
|
||||
}
|
||||
|
||||
if( verticalSlidesLength ) {
|
||||
@ -2722,16 +2766,32 @@
|
||||
distanceY = x === ( indexh || 0 ) ? Math.abs( ( indexv || 0 ) - y ) : Math.abs( y - oy );
|
||||
|
||||
if( distanceX + distanceY < viewDistance ) {
|
||||
showSlide( verticalSlide );
|
||||
loadSlide( verticalSlide );
|
||||
}
|
||||
else {
|
||||
hideSlide( verticalSlide );
|
||||
unloadSlide( verticalSlide );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Flag if there are ANY vertical slides, anywhere in the deck
|
||||
if( dom.wrapper.querySelectorAll( '.slides>section>section' ).length ) {
|
||||
dom.wrapper.classList.add( 'has-vertical-slides' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'has-vertical-slides' );
|
||||
}
|
||||
|
||||
// Flag if there are ANY horizontal slides, anywhere in the deck
|
||||
if( dom.wrapper.querySelectorAll( '.slides>section' ).length > 1 ) {
|
||||
dom.wrapper.classList.add( 'has-horizontal-slides' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'has-horizontal-slides' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -2746,12 +2806,39 @@
|
||||
|
||||
if( config.showNotes && dom.speakerNotes && currentSlide && !isPrintingPDF() ) {
|
||||
|
||||
dom.speakerNotes.innerHTML = getSlideNotes() || '';
|
||||
dom.speakerNotes.innerHTML = getSlideNotes() || '<span class="notes-placeholder">No notes on this slide.</span>';
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the visibility of the speaker notes sidebar that
|
||||
* is used to share annotated slides. The notes sidebar is
|
||||
* only visible if showNotes is true and there are notes on
|
||||
* one or more slides in the deck.
|
||||
*/
|
||||
function updateNotesVisibility() {
|
||||
|
||||
if( config.showNotes && hasNotes() ) {
|
||||
dom.wrapper.classList.add( 'show-notes' );
|
||||
}
|
||||
else {
|
||||
dom.wrapper.classList.remove( 'show-notes' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if there are speaker notes for ANY slide in the
|
||||
* presentation.
|
||||
*/
|
||||
function hasNotes() {
|
||||
|
||||
return dom.slides.querySelectorAll( '[data-notes], aside.notes' ).length > 0;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the progress bar to reflect the current slide.
|
||||
*/
|
||||
@ -2882,6 +2969,26 @@
|
||||
|
||||
}
|
||||
|
||||
if( config.controlsTutorial ) {
|
||||
|
||||
// Highlight control arrows with an animation to ensure
|
||||
// that the viewer knows how to navigate
|
||||
if( !hasNavigatedDown && routes.down ) {
|
||||
dom.controlsDownArrow.classList.add( 'highlight' );
|
||||
}
|
||||
else {
|
||||
dom.controlsDownArrow.classList.remove( 'highlight' );
|
||||
|
||||
if( !hasNavigatedRight && routes.right && indexv === 0 ) {
|
||||
dom.controlsRightArrow.classList.add( 'highlight' );
|
||||
}
|
||||
else {
|
||||
dom.controlsRightArrow.classList.remove( 'highlight' );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -3061,14 +3168,9 @@
|
||||
*
|
||||
* @param {HTMLElement} slide Slide to show
|
||||
*/
|
||||
/**
|
||||
* Called when the given slide is within the configured view
|
||||
* distance. Shows the slide element and loads any content
|
||||
* that is set to load lazily (data-src).
|
||||
*
|
||||
* @param {HTMLElement} slide Slide to show
|
||||
*/
|
||||
function showSlide( slide ) {
|
||||
function loadSlide( slide, options ) {
|
||||
|
||||
options = options || {};
|
||||
|
||||
// Show the slide element
|
||||
slide.style.display = config.display;
|
||||
@ -3076,6 +3178,7 @@
|
||||
// Media elements with data-src attributes
|
||||
toArray( slide.querySelectorAll( 'img[data-src], video[data-src], audio[data-src]' ) ).forEach( function( element ) {
|
||||
element.setAttribute( 'src', element.getAttribute( 'data-src' ) );
|
||||
element.setAttribute( 'data-lazy-loaded', '' );
|
||||
element.removeAttribute( 'data-src' );
|
||||
} );
|
||||
|
||||
@ -3086,6 +3189,7 @@
|
||||
toArray( media.querySelectorAll( 'source[data-src]' ) ).forEach( function( source ) {
|
||||
source.setAttribute( 'src', source.getAttribute( 'data-src' ) );
|
||||
source.removeAttribute( 'data-src' );
|
||||
source.setAttribute( 'data-lazy-loaded', '' );
|
||||
sources += 1;
|
||||
} );
|
||||
|
||||
@ -3146,7 +3250,7 @@
|
||||
background.appendChild( video );
|
||||
}
|
||||
// Iframes
|
||||
else if( backgroundIframe ) {
|
||||
else if( backgroundIframe && options.excludeIframes !== true ) {
|
||||
var iframe = document.createElement( 'iframe' );
|
||||
iframe.setAttribute( 'allowfullscreen', '' );
|
||||
iframe.setAttribute( 'mozallowfullscreen', '' );
|
||||
@ -3175,12 +3279,12 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the given slide is moved outside of the
|
||||
* configured view distance.
|
||||
* Unloads and hides the given slide. This is called when the
|
||||
* slide is moved outside of the configured view distance.
|
||||
*
|
||||
* @param {HTMLElement} slide
|
||||
*/
|
||||
function hideSlide( slide ) {
|
||||
function unloadSlide( slide ) {
|
||||
|
||||
// Hide the slide element
|
||||
slide.style.display = 'none';
|
||||
@ -3192,6 +3296,18 @@
|
||||
background.style.display = 'none';
|
||||
}
|
||||
|
||||
// Reset lazy-loaded media elements with src attributes
|
||||
toArray( slide.querySelectorAll( 'video[data-lazy-loaded][src], audio[data-lazy-loaded][src]' ) ).forEach( function( element ) {
|
||||
element.setAttribute( 'data-src', element.getAttribute( 'src' ) );
|
||||
element.removeAttribute( 'src' );
|
||||
} );
|
||||
|
||||
// Reset lazy-loaded media elements with <source> children
|
||||
toArray( slide.querySelectorAll( 'video[data-lazy-loaded] source[src], audio source[src]' ) ).forEach( function( source ) {
|
||||
source.setAttribute( 'data-src', source.getAttribute( 'src' ) );
|
||||
source.removeAttribute( 'src' );
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -3267,6 +3383,13 @@
|
||||
_appendParamToIframeSource( 'src', 'player.vimeo.com/', 'api=1' );
|
||||
_appendParamToIframeSource( 'data-src', 'player.vimeo.com/', 'api=1' );
|
||||
|
||||
// Always show media controls on mobile devices
|
||||
if( isMobileDevice ) {
|
||||
toArray( dom.slides.querySelectorAll( 'video, audio' ) ).forEach( function( el ) {
|
||||
el.controls = true;
|
||||
} );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -3411,7 +3534,12 @@
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
function stopEmbeddedContent( element ) {
|
||||
function stopEmbeddedContent( element, options ) {
|
||||
|
||||
options = extend( {
|
||||
// Defaults
|
||||
unloadIframes: true
|
||||
}, options || {} );
|
||||
|
||||
if( element && element.parentNode ) {
|
||||
// HTML5 media elements
|
||||
@ -3442,13 +3570,15 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Lazy loading iframes
|
||||
toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
|
||||
// Only removing the src doesn't actually unload the frame
|
||||
// in all browsers (Firefox) so we set it to blank first
|
||||
el.setAttribute( 'src', 'about:blank' );
|
||||
el.removeAttribute( 'src' );
|
||||
} );
|
||||
if( options.unloadIframes === true ) {
|
||||
// Unload lazy-loaded iframes
|
||||
toArray( element.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
|
||||
// Only removing the src doesn't actually unload the frame
|
||||
// in all browsers (Firefox) so we set it to blank first
|
||||
el.setAttribute( 'src', 'about:blank' );
|
||||
el.removeAttribute( 'src' );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -3736,25 +3866,12 @@
|
||||
*/
|
||||
function getSlideBackground( x, y ) {
|
||||
|
||||
// When printing to PDF the slide backgrounds are nested
|
||||
// inside of the slides
|
||||
if( isPrintingPDF() ) {
|
||||
var slide = getSlide( x, y );
|
||||
if( slide ) {
|
||||
return slide.slideBackgroundElement;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
var slide = getSlide( x, y );
|
||||
if( slide ) {
|
||||
return slide.slideBackgroundElement;
|
||||
}
|
||||
|
||||
var horizontalBackground = dom.wrapper.querySelectorAll( '.backgrounds>.slide-background' )[ x ];
|
||||
var verticalBackgrounds = horizontalBackground && horizontalBackground.querySelectorAll( '.slide-background' );
|
||||
|
||||
if( verticalBackgrounds && verticalBackgrounds.length && typeof y === 'number' ) {
|
||||
return verticalBackgrounds ? verticalBackgrounds[ y ] : undefined;
|
||||
}
|
||||
|
||||
return horizontalBackground;
|
||||
return undefined;
|
||||
|
||||
}
|
||||
|
||||
@ -4016,7 +4133,7 @@
|
||||
|
||||
cancelAutoSlide();
|
||||
|
||||
if( currentSlide ) {
|
||||
if( currentSlide && config.autoSlide !== false ) {
|
||||
|
||||
var fragment = currentSlide.querySelector( '.current-fragment' );
|
||||
|
||||
@ -4134,6 +4251,8 @@
|
||||
|
||||
function navigateRight() {
|
||||
|
||||
hasNavigatedRight = true;
|
||||
|
||||
// Reverse for RTL
|
||||
if( config.rtl ) {
|
||||
if( ( isOverview() || previousFragment() === false ) && availableRoutes().right ) {
|
||||
@ -4158,6 +4277,8 @@
|
||||
|
||||
function navigateDown() {
|
||||
|
||||
hasNavigatedDown = true;
|
||||
|
||||
// Prioritize revealing fragments
|
||||
if( ( isOverview() || nextFragment() === false ) && availableRoutes().down ) {
|
||||
slide( indexh, indexv + 1 );
|
||||
@ -4204,6 +4325,9 @@
|
||||
*/
|
||||
function navigateNext() {
|
||||
|
||||
hasNavigatedRight = true;
|
||||
hasNavigatedDown = true;
|
||||
|
||||
// Prioritize revealing fragments
|
||||
if( nextFragment() === false ) {
|
||||
if( availableRoutes().down ) {
|
||||
@ -4872,7 +4996,7 @@
|
||||
this.context.beginPath();
|
||||
this.context.arc( x, y, radius, 0, Math.PI * 2, false );
|
||||
this.context.lineWidth = this.thickness;
|
||||
this.context.strokeStyle = '#666';
|
||||
this.context.strokeStyle = 'rgba( 255, 255, 255, 0.2 )';
|
||||
this.context.stroke();
|
||||
|
||||
if( this.playing ) {
|
||||
@ -4988,6 +5112,11 @@
|
||||
isOverview: isOverview,
|
||||
isPaused: isPaused,
|
||||
isAutoSliding: isAutoSliding,
|
||||
isSpeakerNotes: isSpeakerNotes,
|
||||
|
||||
// Slide preloading
|
||||
loadSlide: loadSlide,
|
||||
unloadSlide: unloadSlide,
|
||||
|
||||
// Adds or removes all internal event listeners (such as keyboard)
|
||||
addEventListeners: addEventListeners,
|
||||
|
||||
31
package.json
31
package.json
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "reveal.js",
|
||||
"version": "3.5.0",
|
||||
"version": "3.6.0",
|
||||
"description": "The HTML Presentation Framework",
|
||||
"homepage": "http://lab.hakim.se/reveal-js",
|
||||
"homepage": "http://revealjs.com",
|
||||
"subdomain": "revealjs",
|
||||
"main": "js/reveal.js",
|
||||
"scripts": {
|
||||
@ -23,22 +23,21 @@
|
||||
"node": ">=4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"express": "~4.14.0",
|
||||
"grunt": "~1.0.1",
|
||||
"grunt-autoprefixer": "~3.0.3",
|
||||
"grunt-cli": "~1.2.0",
|
||||
"grunt-contrib-connect": "~0.11.2",
|
||||
"grunt-contrib-cssmin": "~0.14.0",
|
||||
"grunt-contrib-jshint": "~0.11.3",
|
||||
"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": "~0.9.2",
|
||||
"grunt-contrib-watch": "~1.0.0",
|
||||
"grunt-sass": "~1.2.0",
|
||||
"grunt-retire": "~0.3.10",
|
||||
"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.2.1",
|
||||
"node-sass": "~3.13.0",
|
||||
"socket.io": "^1.4.8"
|
||||
"mustache": "^2.3.0",
|
||||
"socket.io": "^1.7.3"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -99,6 +99,13 @@
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!-- Images -->
|
||||
<section data-markdown>
|
||||
<script type="text/template">
|
||||
|
||||
</script>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -29,3 +29,8 @@ Content 3.1
|
||||
## External 3.2
|
||||
|
||||
Content 3.2
|
||||
|
||||
|
||||
## External 3.3
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}( this, function( marked ) {
|
||||
|
||||
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
|
||||
DEFAULT_NOTES_SEPARATOR = 'note:',
|
||||
DEFAULT_NOTES_SEPARATOR = 'notes?:',
|
||||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
|
||||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
|
||||
|
||||
|
||||
@ -19,6 +19,9 @@
|
||||
|
||||
};
|
||||
|
||||
// post once the page is loaded, so the client follows also on "open URL".
|
||||
window.addEventListener( 'load', post );
|
||||
|
||||
// Monitor events that trigger a change in state
|
||||
Reveal.addEventListener( 'slidechanged', post );
|
||||
Reveal.addEventListener( 'fragmentshown', post );
|
||||
@ -28,4 +31,4 @@
|
||||
Reveal.addEventListener( 'paused', post );
|
||||
Reveal.addEventListener( 'resumed', post );
|
||||
|
||||
}());
|
||||
}());
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "reveal-js-multiplex",
|
||||
"version": "1.0.0",
|
||||
"description": "reveal.js multiplex server",
|
||||
"homepage": "http://lab.hakim.se/reveal-js",
|
||||
"homepage": "http://revealjs.com",
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
},
|
||||
|
||||
@ -675,7 +675,7 @@
|
||||
document.body.setAttribute( 'data-speaker-layout', value );
|
||||
|
||||
// Persist locally
|
||||
if( window.localStorage ) {
|
||||
if( supportsLocalStorage() ) {
|
||||
window.localStorage.setItem( 'reveal-speaker-layout', value );
|
||||
}
|
||||
|
||||
@ -687,7 +687,7 @@
|
||||
*/
|
||||
function getLayout() {
|
||||
|
||||
if( window.localStorage ) {
|
||||
if( supportsLocalStorage() ) {
|
||||
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
|
||||
if( layout ) {
|
||||
return layout;
|
||||
@ -701,6 +701,19 @@
|
||||
|
||||
}
|
||||
|
||||
function supportsLocalStorage() {
|
||||
|
||||
try {
|
||||
localStorage.setItem('test', 'test');
|
||||
localStorage.removeItem('test');
|
||||
return true;
|
||||
}
|
||||
catch( e ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function zeroPadInteger( num ) {
|
||||
|
||||
var str = '00' + parseInt( num );
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* phantomjs script for printing presentations to PDF.
|
||||
*
|
||||
* Example:
|
||||
* phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
|
||||
* phantomjs print-pdf.js "http://revealjs.com?print-pdf" reveal-demo.pdf
|
||||
*
|
||||
* @author Manuel Bieh (https://github.com/manuelbieh)
|
||||
* @author Hakim El Hattab (https://github.com/hakimel)
|
||||
|
||||
@ -21,7 +21,7 @@ function Hilitor(id, tag)
|
||||
|
||||
var targetNode = document.getElementById(id) || document.body;
|
||||
var hiliteTag = tag || "EM";
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
|
||||
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
|
||||
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
|
||||
var wordColor = [];
|
||||
var colorIdx = 0;
|
||||
@ -53,11 +53,11 @@ function Hilitor(id, tag)
|
||||
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.parentNode;
|
||||
while (secnode.nodeName != 'SECTION') {
|
||||
var secnode = node;
|
||||
while (secnode != null && secnode.nodeName != 'SECTION') {
|
||||
secnode = secnode.parentNode;
|
||||
}
|
||||
|
||||
|
||||
var slideIndex = Reveal.getIndices(secnode);
|
||||
var slidelen = matchingSlides.length;
|
||||
var alreadyAdded = false;
|
||||
@ -69,7 +69,7 @@ function Hilitor(id, tag)
|
||||
if (! alreadyAdded) {
|
||||
matchingSlides.push(slideIndex);
|
||||
}
|
||||
|
||||
|
||||
if(!wordColor[regs[0].toLowerCase()]) {
|
||||
wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
|
||||
}
|
||||
@ -110,20 +110,26 @@ function Hilitor(id, tag)
|
||||
|
||||
function openSearch() {
|
||||
//ensure the search term input dialog is visible and has focus:
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
var inputbox = document.getElementById("searchinput");
|
||||
inputbox.style.display = "inline";
|
||||
inputboxdiv.style.display = "inline";
|
||||
inputbox.focus();
|
||||
inputbox.select();
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
inputboxdiv.style.display = "none";
|
||||
if(myHilitor) myHilitor.remove();
|
||||
}
|
||||
|
||||
function toggleSearch() {
|
||||
var inputbox = document.getElementById("searchinput");
|
||||
if (inputbox.style.display !== "inline") {
|
||||
var inputboxdiv = document.getElementById("searchinputdiv");
|
||||
if (inputboxdiv.style.display !== "inline") {
|
||||
openSearch();
|
||||
}
|
||||
else {
|
||||
inputbox.style.display = "none";
|
||||
myHilitor.remove();
|
||||
closeSearch();
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,19 +138,27 @@ function Hilitor(id, tag)
|
||||
if (searchboxDirty) {
|
||||
var searchstring = document.getElementById("searchinput").value;
|
||||
|
||||
//find the keyword amongst the slides
|
||||
myHilitor = new Hilitor("slidecontent");
|
||||
matchedSlides = myHilitor.apply(searchstring);
|
||||
currentMatchedIndex = 0;
|
||||
if (searchstring === '') {
|
||||
if(myHilitor) myHilitor.remove();
|
||||
matchedSlides = null;
|
||||
}
|
||||
else {
|
||||
//find the keyword amongst the slides
|
||||
myHilitor = new Hilitor("slidecontent");
|
||||
matchedSlides = myHilitor.apply(searchstring);
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//navigate to the next slide that has the keyword, wrapping to the first if necessary
|
||||
if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
|
||||
currentMatchedIndex = 0;
|
||||
}
|
||||
if (matchedSlides.length > currentMatchedIndex) {
|
||||
Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
|
||||
currentMatchedIndex++;
|
||||
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;
|
||||
}
|
||||
if (matchedSlides.length > currentMatchedIndex) {
|
||||
Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
|
||||
currentMatchedIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,7 +171,8 @@ function Hilitor(id, tag)
|
||||
searchElement.classList.add( 'searchdiv' );
|
||||
searchElement.style.position = 'absolute';
|
||||
searchElement.style.top = '10px';
|
||||
searchElement.style.left = '10px';
|
||||
searchElement.style.right = '10px';
|
||||
searchElement.style.zIndex = 10;
|
||||
//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 );
|
||||
@ -179,18 +194,13 @@ function Hilitor(id, tag)
|
||||
}
|
||||
}, false );
|
||||
|
||||
// Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
|
||||
/*
|
||||
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( event.keyCode === 83 ) {
|
||||
if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
|
||||
event.preventDefault();
|
||||
openSearch();
|
||||
toggleSearch();
|
||||
}
|
||||
}, false );
|
||||
*/
|
||||
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
|
||||
closeSearch();
|
||||
return { open: openSearch };
|
||||
})();
|
||||
|
||||
@ -1,40 +1,27 @@
|
||||
// Custom reveal.js integration
|
||||
(function(){
|
||||
var isEnabled = true;
|
||||
var revealElement = document.querySelector( '.reveal' );
|
||||
if( revealElement ) {
|
||||
|
||||
document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) {
|
||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
|
||||
revealElement.addEventListener( 'mousedown', function( event ) {
|
||||
var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
|
||||
|
||||
var zoomPadding = 20;
|
||||
var revealScale = Reveal.getScale();
|
||||
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
|
||||
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
|
||||
|
||||
if( event[ modifier ] && isEnabled ) {
|
||||
event.preventDefault();
|
||||
if( event[ modifier ] && !Reveal.isOverview() ) {
|
||||
event.preventDefault();
|
||||
|
||||
var bounds;
|
||||
var originalDisplay = event.target.style.display;
|
||||
|
||||
// Get the bounding rect of the contents, not the containing box
|
||||
if( window.getComputedStyle( event.target ).display === 'block' ) {
|
||||
event.target.style.display = 'inline-block';
|
||||
bounds = event.target.getBoundingClientRect();
|
||||
event.target.style.display = originalDisplay;
|
||||
} else {
|
||||
bounds = event.target.getBoundingClientRect();
|
||||
zoom.to({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
scale: zoomLevel,
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
} );
|
||||
|
||||
zoom.to({
|
||||
x: ( bounds.left * revealScale ) - zoomPadding,
|
||||
y: ( bounds.top * revealScale ) - zoomPadding,
|
||||
width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
|
||||
height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
|
||||
pan: false
|
||||
});
|
||||
}
|
||||
} );
|
||||
|
||||
Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
|
||||
Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
|
||||
}
|
||||
})();
|
||||
|
||||
/*!
|
||||
@ -283,6 +270,3 @@ var zoom = (function(){
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
||||
|
||||
Memuat…
Reference in New Issue
Block a user