Compatibility with Reveal 4

LICENSE

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

README.md

@@ -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.
@@ -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/[email protected]/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. 
@@ -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 ]
 });
 ```
 
@@ -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>
 ```
@@ -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)

assets/css/black.css

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

assets/css/fonts/league-gothic/LICENSE

@@ -0,0 +1,2 @@
+SIL Open Font License (OFL)
+http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

assets/css/fonts/league-gothic/league-gothic.css

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