mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-13 18:14:33 +02:00
Code Issues Releases Wiki Activity

use latest version from dev

Browse Source
This commit is contained in:
Hakim El Hattab
2019-03-20 09:17:45 +01:00
parent 8a70c336bc
commit 844591266b
30 changed files with 1404 additions and 744 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/reset.css Normal file
View 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;
}

177
css/reveal.css
View File

@@ -3,47 +3,24 @@
* http://revealjs.com
* MIT licensed
*
* Copyright (C) 2018 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; }
@@ -272,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: '';
@@ -366,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; }
@@ -486,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;
@@ -512,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 {
@@ -544,7 +524,8 @@ body {
.reveal .slides > section.stack {
padding-top: 0;
padding-bottom: 0;
pointer-events: none; }
pointer-events: none;
height: 100%; }
.reveal .slides > section.present,
.reveal .slides > section > section.present {
@@ -761,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
@@ -989,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; }
@@ -1041,7 +1023,7 @@ 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 {
@@ -1294,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;
@@ -1308,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%;
@@ -1326,7 +1308,7 @@ body {
opacity: 0.6;
transition: all 0.3s ease; }
.reveal .overlay header {
.reveal > .overlay header {
position: absolute;
left: 0;
top: 0;
@@ -1335,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;
@@ -1345,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;
@@ -1356,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;
@@ -1372,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%;
@@ -1382,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;
@@ -1395,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; }
@@ -1448,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.25; }
/*********************************************
* ROLLING LINKS
*********************************************/
@@ -1512,7 +1514,7 @@ body {
.reveal .speaker-notes {
display: none;
position: absolute;
width: 25vw;
width: 33.3333333333%;
height: 100%;
top: 0;
left: 100%;
@@ -1540,7 +1542,7 @@ body {
opacity: 0.5; }
.reveal.show-notes {
max-width: 75vw;
max-width: 75%;
overflow: visible; }
.reveal.show-notes .speaker-notes {
@@ -1555,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; } }

4
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

178
css/reveal.scss
View File

@@ -3,55 +3,28 @@
* http://revealjs.com
* MIT licensed
*
* Copyright (C) 2018 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;
@@ -434,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;
@@ -586,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 {
@@ -618,7 +588,7 @@ $controlsArrowAngleActive: 36deg;
}
.reveal .slides>section {
-ms-perspective: 600px;
perspective: 600px;
}
.reveal .slides>section,
@@ -657,6 +627,7 @@ $controlsArrowAngleActive: 36deg;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
height: 100%;
}
.reveal .slides>section.present,
@@ -831,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);
}
@@ -1067,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;
@@ -1416,10 +1388,10 @@ $controlsArrowAngleActive: 36deg;
/*********************************************
* LINK PREVIEW OVERLAY
* OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/
.reveal .overlay {
.reveal > .overlay {
position: absolute;
top: 0;
left: 0;
@@ -1431,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%;
@@ -1452,7 +1424,7 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease;
}
.reveal .overlay header {
.reveal > .overlay header {
position: absolute;
left: 0;
top: 0;
@@ -1461,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;
@@ -1472,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;
@@ -1484,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;
@@ -1500,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%;
@@ -1512,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;
@@ -1526,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;
@@ -1553,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
*********************************************/
@@ -1598,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
*********************************************/
@@ -1648,6 +1645,8 @@ $controlsArrowAngleActive: 36deg;
* SPEAKER NOTES
*********************************************/
$notesWidthPercent: 25%;
// Hide on-page notes
.reveal aside.notes {
display: none;
@@ -1658,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%;
@@ -1694,7 +1693,7 @@ $controlsArrowAngleActive: 36deg;
.reveal.show-notes {
max-width: 75vw;
max-width: 100% - $notesWidthPercent;
overflow: visible;
}
@@ -1713,6 +1712,7 @@ $controlsArrowAngleActive: 36deg;
border-left: 0;
max-width: none;
max-height: 70%;
max-height: 70vh;
overflow: visible;
}
@@ -1721,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 {

2
css/theme/beige.css
View File

@@ -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;

8
css/theme/black.css
View File

@@ -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;
@@ -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;
@@ -270,4 +270,4 @@ body {
*********************************************/
@media print {
.backgrounds {
background-color: #222; } }
background-color: #191919; } }

2
css/theme/blood.css
View File

@@ -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;

2
css/theme/league.css
View File

@@ -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;

2
css/theme/moon.css
View File

@@ -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;

2
css/theme/night.css
View File

@@ -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;

2
css/theme/serif.css
View File

@@ -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;

2
css/theme/simple.css
View File

@@ -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;

2
css/theme/sky.css
View File

@@ -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;

2
css/theme/solarized.css
View File

@@ -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;

2
css/theme/source/black.scss
View File

@@ -16,7 +16,7 @@
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #222;
$backgroundColor: #191919;
$mainColor: #fff;
$headingColor: #fff;

2
css/theme/template/settings.scss
View File

@@ -28,6 +28,8 @@ $heading2Size: 2.11em;
$heading3Size: 1.55em;
$heading4Size: 1.00em;
$codeFont: monospace;
// Links and actions
$linkColor: #13DAEC;
$linkColorHover: lighten( $linkColor, 20% );

6
css/theme/template/theme.scss
View File

@@ -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;
}

2
css/theme/white.css
View File

@@ -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;

68
index.html
View File

@@ -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>
@@ -46,7 +47,6 @@
<p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
</p>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYI553M&placement=revealjscom" id="_carbonads_js"></script>
</section>
<section>
@@ -94,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>
@@ -140,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>
@@ -190,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">&lt;section data-background="image.png"&gt;</code></pre>
<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</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;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div>
</section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
@@ -212,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">
@@ -220,25 +229,32 @@
<p>
You can override background transitions per-slide.
</p>
<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</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 &lt; len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
@@ -379,7 +395,6 @@ Reveal.addEventListener( 'customevent', function() {
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
@@ -388,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 }

952
js/reveal.js
View File

File diff suppressed because it is too large Load Diff

6
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

132
plugin/highlight/highlight.js
View File

File diff suppressed because one or more lines are too long

4
plugin/markdown/example.html
View File

@@ -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>
@@ -109,7 +109,6 @@
</div>
</div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script>
<script>
@@ -122,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(); } },

186
plugin/markdown/markdown.js
View File

@@ -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;
}));

6
plugin/markdown/marked.js
View File

File diff suppressed because one or more lines are too long

71
plugin/math/math.js
View File

@@ -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';
options.tex2jax = options.tex2jax || {
inlineMath: [['$','$'],['\\(','\\)']] ,
skipTags: ['script','noscript','style','textarea','pre'] };
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: options.tex2jax,
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 );

192
plugin/notes/notes.html
View File

@@ -347,6 +347,8 @@
upcomingSlide,
layoutLabel,
layoutDropdown,
pendingCalls = {},
lastRevealApiCallId = 0,
connected = false;
var SPEAKER_LAYOUTS = {
@@ -382,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' ) {
@@ -398,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.
@@ -512,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 );
} );
} );
}
@@ -541,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 );
} );
}
@@ -571,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 ? "-" : "";
@@ -618,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;
} );
}
/**

61
plugin/notes/notes.js
View File

@@ -11,24 +11,28 @@
*/
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' );
if( !notesPopup ) {
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return;
}
// Allow popup window access to Reveal API
notesPopup.Reveal = window.Reveal;
/**
* Connect to the notes window through a postmessage handshake.
* Using postmessage enables us to work in situations where the
@@ -52,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
*/
@@ -128,20 +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
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
openNotes();
} );
// If the there's a 'notes' query set, open directly
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openNotes();
}
}
// Open the notes when the 's' key is hit
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
openNotes();
} );
return { open: openNotes };
}
},
open: openNotes
};
})();
Reveal.registerPlugin( 'notes', RevealNotes );

2
plugin/search/search.js
View File

@@ -200,7 +200,7 @@ function Hilitor(id, tag)
toggleSearch();
}
}, false );
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
closeSearch();
return { open: openSearch };
})();

39
plugin/zoom-js/zoom.js
View File

@@ -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