Version 1.1.1

* Import Screenfull, remove script * Add class `no-fsfx` to body if device not supported * Minify code
Martinomagnifico · Dec 10, 2021 · b75df49 · b75df49
1 parent 7e84fac
commit b75df49
Show file tree

Hide file tree

Showing 7 changed files with 223 additions and 167 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ The FsFx plugin has been rewritten for Reveal.js version 4.
 
 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.
+FsFx.js automatically includes a (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. Screenfull is already imported into FsFx.
 
 
 ### Regular installation
@@ -46,18 +46,41 @@ The FsFx plugin folder can then be referenced from `node_modules/reveal.js-fsfx/
 
 ### JavaScript
 
+The FsFx plugin has been written for Reveal.js version 4.
+
+There are two JavaScript files for FsFx, a regular one, `fsfx.js`, and a module one, `fsfx.esm.js`. You only need one of them:
+
+
+#### Regular 
+If you're not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:
+
 ```html
 <script type="text/javascript" src="dist/reveal.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/screenfull.min.js"></script>
 <script type="text/javascript" src="plugin/fsfx/fsfx.js"></script>
 <script>
-	Reveal.initialize({
-		...
-		plugins: [ FsFx ]
-	});
+    Reveal.initialize({
+        ...
+        plugins: [ FsFx ]
+    });
+</script>
+```
+
+#### As a module 
+If you're using ES modules, you can add it like this:
+
+```html
+<script type="module">
+    // This will need a server
+    import Reveal from './dist/reveal.esm.js';
+    import FsFx from './plugin/fsfx/fsfx.esm.js';
+    Reveal.initialize({
+        // ...
+        plugins: [ FsFx ]
+    });
 </script>
 ```
 
+
 ### HTML
 
 It is easy to set up your fullscreen buttons. Adding the class 'fsbutton', or the class you put in the configuration, suffices: 
@@ -87,22 +110,28 @@ There are a few options that you can change from the Reveal.js options. The valu
 
 ```javascript
 Reveal.initialize({
-	// ...
-	fsfx: {
-		baseclass: 'fsbutton',
-		hideifnofs: true
-	},
-	plugins: [ FsFx ]
+    // ...
+    fsfx: {
+        baseclass: 'fsbutton',
+        hideifnofs: true
+    },
+    plugins: [ FsFx ]
 });
 ```
 
 
 * **`baseclass`**: The baseclass of the fullscreen button(s). Change it if you like. 
-* **`hideifnofs`**: Any button that should enter or exit fullscreen can do that because it has the baseclass. However, if Screenfull (the script that checks the browser fullscreen capabilities), is either not loaded or decides that the browser does not support fullscreen, a fullscreen button just sits there unable to do anything. So the option 'hideifnofs' hides the button by default. This can be overruled by setting it to false. 
+* **`hideifnofs`**: Any button that should enter or exit fullscreen can do that because it has the baseclass. However, if the fullscreen API is not supported, a fullscreen button just sits there unable to do anything. So the option 'hideifnofs' hides the button by default. This can be overruled by setting it to false. 
 
 A fullscreen button will **not** be hidden with the `hideifnofs` option, if a `data-fs-gonext` attribute (explained below) is **also** set. This means that that button's functionality will fall back to 'next slide' only, if there is no fullscreen support.
 
 
+## Device compatibility
+
+If a device (looking at you, iPhone) does not support the Fullscreen API, a class of `no-fsfx` will be added to the body. You can use it to show warnings, hide elements etcetera.
+
+
+
 ## Like it?
 
 If you like it, please star this repo! 

diff --git a/css/demo.css b/css/demo.css
@@ -13,6 +13,9 @@ ul, ol {
 li + li {
   margin-top: 0.3em; }
 
+.small {
+  font-size: .6em; }
+
 .fsbutton {
   border-radius: 6px;
   display: none;
@@ -98,6 +101,14 @@ li + li {
   background: DarkSlateGray;
   background-color: DarkSlateGray; }
 
+.fsfx-disabled {
+  display: none; }
+  .no-fsfx .fsfx-disabled {
+    display: block; }
+
+.no-fsfx .fsfx-enabled {
+  display: none; }
+
 a.github-corner {
   position: absolute;
   z-index: 1;

diff --git a/demo.html b/demo.html
@@ -25,14 +25,18 @@
                 <h1>FsFx</h1>
                 <h3>for Reveal.js</h3>
                 <button class="fsbutton" data-fs-gonext="1500" data-fs-toggle="hide">Start the show!</button>
+                <div class="fsfx-disabled"><br>
+                    <p style="color: #42affa; width: 80%; margin: auto">Note: This device does not support the Fullscreen API.</p>
+                </div>
             </section>
             <section class="center" data-transition="zoom-in fade-out">
-                <h3>FsFx.js</h3><small>Can do a few things:</small><br><br>
+                <h3>FsFx.js</h3><small>Can do a few things:</small><br>
                 <ol>
                     <li>Enter or exit fullscreen</li>
                     <li>Trigger 'next slide' after fullscreen</li>
                     <li>Toggle a class on any element if fullscreen</li>
-                </ol>
+                </ol><br>
+                <p class="small">If a device (looking at you, iPhone) does not support the Fullscreen API, a class of <code>no-fsfx</code> will be added to the body. You can use it to show warnings, hide elements etcetera.</p>
             </section>
             <section class="center">
                 <h4>1. Enter or exit fullscreen</h4>
@@ -55,13 +59,12 @@ <h4>3. Toggle a class on any element if the presentation is fullscreen</h4>
                 <ul>
                     <li>A class toggle can be added with a <code>data-fs-toggle="*"</code> attribute</li>
                     <li>The wildcard is the class that is toggled in fullscreen</li>
-                    <li>In this presentation, see the changes in fullscreen: The background and the button icons:</li>
+                    <li class="fsfx-enabled">In this presentation, see the changes in fullscreen: The background and the button icons</li>
                 </ul>
                 <button class="fsbutton icon-fs" data-fs-toggle="icon-fsexit">Toggle Fullscreen&nbsp;</button>
             </section>
         </div>
     </div>
-    <script src="../dist/screenfull.min.js"></script>
     <script src="../dist/reveal.js"></script>
     <script src="plugin/fsfx/fsfx.js"></script>
     <script>
@@ -70,7 +73,7 @@ <h4>3. Toggle a class on any element if the presentation is fullscreen</h4>
             history: true,
             fsfx: {
                 baseclass: "fsbutton",
-                hideifnofs: true
+                hideifnofs: false
             },
             plugins: [
                 FsFx

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-fsfx",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "A plugin for Reveal.js 4, that enters or exits fullscreen, and toggles classes on certain elements",
     "keywords": "reveal, reveal.js, reveal-plugin, plugin, fullscreen",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-fsfx",
@@ -9,7 +9,7 @@
         "url": "https://github.com/Martinomagnifico/reveal.js-fsfx.git"
     },
     "peerDependencies": {
-        "reveal.js": "^4.0"
+        "reveal.js": "^4.2"
     },
     "author": "Martijn De Jongh",
     "license": "MIT, Copyright (C) 2021 Martijn De Jongh"

diff --git a/plugin/fsfx/fsfx.esm.js b/plugin/fsfx/fsfx.esm.js