Skip to content

Commit

Permalink
Compatibility with Reveal 4
Browse files Browse the repository at this point in the history
  • Loading branch information
Martino committed May 22, 2020
1 parent 8b4a84b commit e6fef8b
Show file tree
Hide file tree
Showing 27 changed files with 611 additions and 156 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019 Martijn De Jongh (Martino)
Copyright (c) 2020 Martijn De Jongh (Martino)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
42 changes: 18 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# reveal.js-fsfx
A plugin for [Reveal.js](https://revealjs.com) that enables buttons to enter or exit fullscreen; with optional delay to go to a next slide. The plugin also toggles classes on elements at fullscreen events.
A plugin for [Reveal.js](https://revealjs.com) 4, that enters or exits fullscreen, and toggles classes on certain elements.


Sometimes you would like to have a button that starts a presentation *and* goes fullscreen at the same time, or rather *almost* the same time. This plugin does just that. And some other things.
Sometimes you would like to have a button that starts a presentation *and* goes fullscreen at the same time. This plugin does just that. And some other things.


Here's a [demo](https://martinomagnifico.github.io/reveal.js-fsfx/demo.html) of a project that uses the FsFx.js plugin.
Expand All @@ -17,25 +17,25 @@ FsFx.js does multiple things:

## Installation

FsFx.js needs one other (great) script to be able to function: [Screenfull.js](https://github.com/sindresorhus/screenfull.js) by [Sindre Sorhus](https://sindresorhus.com). This checks the capabilities of the browser to go fullscreen.
The FsFx plugin has been rewritten for Reveal.js version 4.

Copy the fsfx folder to the plugins folder of the reveal.js folder, like this: `plugin/fsfx`. Now add it to the dependencies of Reveal.js. You can do the same for screenfull.js or the minified version of it (although you can add it anywhere in your HTML).
If you want to use FsFx with an older version of Reveal, use the [1.0.7 version](https://github.com/Martinomagnifico/reveal.js-fsfx/releases).

FsFx.js needs one other (great) script to be able to function: [Screenfull.js](https://github.com/sindresorhus/screenfull.js) by [Sindre Sorhus](https://sindresorhus.com). This checks the capabilities of the browser to go fullscreen.

```javascript
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'js/revealjs/plugin/fsfx/fsfx.js' },
{ src: 'assets/js/screenfull.min.js'}
// ...
]
});
```html
<script type="text/javascript" src="assets/js/revealjs/reveal.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/screenfull@5.0.2/dist/screenfull.min.js"></script>
<script src="assets/js/revealjs/plugin/fsfx/fsfx.js"></script>
<script>
Reveal.initialize({
...
plugins: [ FsFx ]
});
</script>
```



## Configuration

There are a few options that you can change from the Reveal.js options. The values below are default and do not need to be set if they are not changed.
Expand All @@ -49,9 +49,7 @@ Reveal.initialize({
// Hide the buttons if fullscreen is not supported or if Screenfull is not available
hideifnofs: true
},
dependencies: [
// ...
]
plugins: [ RevealFsFx ]
});
```

Expand All @@ -69,18 +67,14 @@ It is easy to set up your fullscreen buttons. Adding the class 'fsbutton', or th
```html
<button class="fsbutton">Start the show!</button>
```

Fullscreen buttons will *toggle* the fullscreen state of the browser, unless the below data-fs-gonext attribute is set. It will then only go fullscreen, not back.

#### Optional 'Next slide' functionality

Add a data-fs-gonext attribute to the button. It would be wise to give it a value. If this is set, the browser will go fullscreen and then go to the next Reveal screen after the set time. If the browser is already fullscreen, it will not toggle back to windowed mode but will stay fullscreen and directly go to the next screen.
Add a data-fs-gonext attribute to the button. It would be wise to give it a value.

```html
<button class="fsbutton" data-fs-gonext="2000">Start the show!</button>
```
#### Optional class toggle functionality

```html
<p data-fs-toggle="hide">I have the class 'hide' in fullscreen</p>
```
Expand All @@ -97,4 +91,4 @@ If you like it, please star this repo.
## License
MIT licensed

Copyright (C) 2019 Martijn De Jongh (Martino)
Copyright (C) 2020 Martijn De Jongh (Martino)
285 changes: 285 additions & 0 deletions assets/css/black.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,285 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
@import url(fonts/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
color: #222; }

/*********************************************
* GLOBAL STYLES
*********************************************/
:root {
--background-color: #191919;
--main-font: Source Sans Pro, Helvetica, sans-serif;
--main-font-size: 42px;
--main-color: #fff;
--block-margin: 20px;
--heading-margin: 0 0 20px 0;
--heading-font: Source Sans Pro, Helvetica, sans-serif;
--heading-color: #fff;
--heading-line-height: 1.2;
--heading-letter-spacing: normal;
--heading-text-transform: uppercase;
--heading-text-shadow: none;
--heading-font-weight: 600;
--heading1-text-shadow: none;
--heading1-size: 2.5em;
--heading2-size: 1.6em;
--heading3-size: 1.3em;
--heading4-size: 1em;
--code-font: monospace;
--link-color: #42affa;
--link-color-hover: #8dcffc;
--selection-background-color: #bee4fd;
--selection-color: #fff; }

.reveal-viewport {
background: #191919;
background-color: #191919; }

.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 42px;
font-weight: normal;
color: #fff; }

.reveal ::selection {
color: #fff;
background: #bee4fd;
text-shadow: none; }

.reveal ::-moz-selection {
color: #fff;
background: #bee4fd;
text-shadow: none; }

.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }

/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #fff;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }

.reveal h1 {
font-size: 2.5em; }

.reveal h2 {
font-size: 1.6em; }

.reveal h3 {
font-size: 1.3em; }

.reveal h4 {
font-size: 1em; }

.reveal h1 {
text-shadow: none; }

/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: 20px 0;
line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%; }

.reveal strong,
.reveal b {
font-weight: bold; }

.reveal em {
font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em; }

.reveal ol {
list-style-type: decimal; }

.reveal ul {
list-style-type: disc; }

.reveal ul ul {
list-style-type: square; }

.reveal ul ul ul {
list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px; }

.reveal dt {
font-weight: bold; }

.reveal dd {
margin-left: 40px; }

.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block; }

.reveal q {
font-style: italic; }

.reveal pre {
display: block;
position: relative;
width: 90%;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: monospace;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

.reveal code {
font-family: monospace;
text-transform: none; }

.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal; }

.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0; }

.reveal table th {
font-weight: bold; }

.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; }

.reveal sup {
vertical-align: super;
font-size: smaller; }

.reveal sub {
vertical-align: sub;
font-size: smaller; }

.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top; }

.reveal small * {
vertical-align: top; }

.reveal img {
margin: 20px 0; }

/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #42affa;
text-decoration: none;
transition: color .15s ease; }

.reveal a:hover {
color: #8dcffc;
text-shadow: none;
border: none; }

.reveal .roll span:after {
color: #fff;
background: #068de9; }

/*********************************************
* Frame helper
*********************************************/
.reveal .r-frame {
border: 4px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal a .r-frame {
transition: all .15s linear; }

.reveal a:hover .r-frame {
border-color: #42affa;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: #42affa; }

/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: #42affa; }

/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #191919; } }
2 changes: 2 additions & 0 deletions assets/css/fonts/league-gothic/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
SIL Open Font License (OFL)
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
10 changes: 10 additions & 0 deletions assets/css/fonts/league-gothic/league-gothic.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@font-face {
font-family: 'League Gothic';
src: url('league-gothic.eot');
src: url('league-gothic.eot?#iefix') format('embedded-opentype'),
url('league-gothic.woff') format('woff'),
url('league-gothic.ttf') format('truetype');

font-weight: normal;
font-style: normal;
}
Binary file added assets/css/fonts/league-gothic/league-gothic.eot
Binary file not shown.
Binary file added assets/css/fonts/league-gothic/league-gothic.ttf
Binary file not shown.
Binary file not shown.
Loading

0 comments on commit e6fef8b

Please sign in to comment.