From 14bd772c84fbac576b1a51b6760f31c2aea678f0 Mon Sep 17 00:00:00 2001 From: Martino Date: Sun, 31 May 2020 11:49:33 +0200 Subject: [PATCH] Version 1.0.9 This version fixes a bug, and has some code optimisations. --- css/demo.css | 78 ++++++++++++++++++ demo.html | 197 ++++++++++++++------------------------------ plugin/fsfx/fsfx.js | 109 +++++++++++++++--------- 3 files changed, 211 insertions(+), 173 deletions(-) create mode 100644 css/demo.css diff --git a/css/demo.css b/css/demo.css new file mode 100644 index 0000000..45069aa --- /dev/null +++ b/css/demo.css @@ -0,0 +1,78 @@ +@charset "UTF-8"; +.slides { + opacity: 0; + -webkit-transition: opacity .5s ease; + -o-transition: opacity .5s ease; + transition: opacity .5s ease; } + +.reveal.ready .slides { + opacity: 1; } + +ul, ol { + font-size: 90%; } + +li + li { + margin-top: 0.3em; } + +.fsbutton { + display: inline-block; + text-decoration: none; + cursor: pointer; + text-align: center; + -webkit-appearance: none; + -moz-appearance: none; + -webkit-transition: opacity .5s ease-in-out; + -o-transition: opacity .5s ease-in-out; + transition: opacity .5s ease-in-out; } + +.slides .fsbutton { + border: none; + padding: 1em; + margin: 1em; + background: #ffffff; + color: #000000; + font-size: .5em; } + +.reveal > .fsbutton { + border: 1.1px solid white; + border-radius: 0.2em; + width: 1.25em; + height: 1.25em; + margin: 0; + padding: 0; + background: none; + color: white; + font-size: 75%; + line-height: 0.75em; + opacity: 0.6; + -webkit-transition: opacity 0.15s ease-in-out; + -o-transition: opacity 0.15s ease-in-out; + transition: opacity 0.15s ease-in-out; } + +.reveal > .fsbutton:hover { + opacity: 1; } + +.hide { + opacity: 0; } + +.icon-fs:after { + content: '+'; + line-height: 1; + font-size: 1.5em; } + +.reveal > .icon-fs:after { + font-size: 1em; } + +.icon-fsexit:after { + content: '–'; } + +.backgrounds { + background: #1a1626; + -webkit-transition: background-color .5s ease-in-out; + -o-transition: background-color .5s ease-in-out; + transition: background-color .5s ease-in-out; } + +.reveal.fullscreen .backgrounds { + color: green; + background: DarkSlateGray; + background-color: DarkSlateGray; } diff --git a/demo.html b/demo.html index 34ec025..04c5587 100644 --- a/demo.html +++ b/demo.html @@ -1,8 +1,9 @@ - + + - FsFx.js for Reveal.js + FsFx for Reveal.js @@ -10,139 +11,69 @@ - - - - + + + +
- -
-
-

FsFx

-

for Reveal.js

- -
-
-

FsFx.js

Can do a few things:

-
    -
  1. Enter or exit fullscreen
    2. -
  2. Trigger 'next slide' after fullscreen
    3. -
  3. Toggle a class on any element if fullscreen
    4. -
-
-
-

1. Enter or exit fullscreen

-
    -
  • Triggers if an element with a certain class is clicked
    • -
  • This baseclass is 'fsbutton' by default
    • -
  • The baseclass can easily be changed in the plugin options
    • -
-
-
-

2. Trigger 'next slide' after fullscreen

The start button on the first page of this deck does exacly that

-
    -
  • If wanted, a 'next slide' function can be called
    • -
  • It can be added with a data-fs-gonext="*" attribute
    • -
  • The wildcard is the time in milliseconds for a delay
    • -
-
-
-

3. Toggle a class on any element if the presentation is fullscreen

-
    -
  • A class toggle can be added with a data-fs-toggle="*" attribute
    • -
  • The wildcard is the class that is toggled in fullscreen
    • -
  • In this presentation, see the changes in fullscreen: The background and the button icons:
    • -
- -
-
+ +
+
+

FsFx

+

for Reveal.js

+ +
+
+

FsFx.js

Can do a few things:

+
    +
  1. Enter or exit fullscreen
    2. +
  2. Trigger 'next slide' after fullscreen
    3. +
  3. Toggle a class on any element if fullscreen
    4. +
+
+
+

1. Enter or exit fullscreen

+
    +
  • Triggers if an element with a certain class is clicked
    • +
  • This baseclass is 'fsbutton' by default
    • +
  • The baseclass can easily be changed in the plugin options
    • +
+
+
+

2. Trigger 'next slide' after fullscreen

The start button on the first page of this deck does exacly that

+
    +
  • If wanted, a 'next slide' function can be called
    • +
  • It can be added with a data-fs-gonext="*" attribute
    • +
  • The wildcard is the time in milliseconds for a delay
    • +
+
+
+

3. Toggle a class on any element if the presentation is fullscreen

+
    +
  • A class toggle can be added with a data-fs-toggle="*" attribute
    • +
  • The wildcard is the class that is toggled in fullscreen
    • +
  • In this presentation, see the changes in fullscreen: The background and the button icons:
    • +
+ +
+
- - - + + + - + + \ No newline at end of file diff --git a/plugin/fsfx/fsfx.js b/plugin/fsfx/fsfx.js index 3e12abc..9d7ac7b 100644 --- a/plugin/fsfx/fsfx.js +++ b/plugin/fsfx/fsfx.js @@ -4,14 +4,13 @@ * https://github.com/Martinomagnifico * * FsFx.js for Reveal.js - * Version 1.0.8 + * Version 1.0.9 * * @license * MIT licensed * * Thanks to: * - Hakim El Hattab, Reveal.js - * - Sindre Sorhus, Screenfull.js ******************************************************************/ @@ -28,66 +27,96 @@ return selectionarray; }; - var sfCheck = function sfCheck() { - if (typeof screenfull !== "undefined" && (screenfull.enabled || screenfull.isEnabled)) { + var sfEnabled = function sfEnabled() { + if (screenfull.enabled || screenfull.isEnabled) { return true; } return false; }; - var buttonCheck = function buttonCheck(deck, options) { + var fullScreenEffects = function fullScreenEffects(deck, options) { var viewport = deck.getRevealElement().tagName == "BODY" ? document : deck.getRevealElement(); var fsButtons = selectionArray(viewport, ".".concat(options.baseclass)); var toggleThese = selectionArray(document, "[data-fs-toggle]"); - fsButtons.filter(function (fsButton) { - var goNext = function goNext() { - if (parseInt(fsButton.dataset.fsGonext) > 0 && !screenfull.isFullscreen) { - setTimeout(function () { - deck.next(); - }, parseInt(fsButton.dataset.fsGonext)); - } else { - deck.next(); - } - }; - if (options.hideifnofs == true && sfCheck() == false && !fsButton.hasAttribute("data-fs-gonext")) { + var hideIfNoFS = function hideIfNoFS(fsButton) { + if (options.hideifnofs == true && !fsButton.hasAttribute("data-fs-gonext")) { fsButton.style.display = "none"; + } else { + fsButton.onclick = function () { + deck.next(); + }; } + }; - fsButton.onclick = function () { - if (sfCheck() == true) { - if (fsButton.hasAttribute("data-fs-gonext")) { - if (screenfull.isFullscreen) { - goNext(); + var buttonCheck = function buttonCheck(fsButtons) { + fsButtons.filter(function (fsButton) { + var goNext = function goNext() { + if (parseInt(fsButton.dataset.fsGonext) > 0 && !screenfull.isFullscreen) { + setTimeout(function () { + deck.next(); + }, parseInt(fsButton.dataset.fsGonext)); + } else { + deck.next(); + } + }; + + fsButton.onclick = function () { + if (sfEnabled() == true) { + if (fsButton.hasAttribute("data-fs-gonext")) { + if (screenfull.isFullscreen) { + goNext(); + } else { + screenfull.request(viewport).then(goNext()); + } } else { - screenfull.request(viewport).then(goNext()); + screenfull.toggle(viewport); } } else { - screenfull.toggle(viewport); + deck.next(); } - } else { - deck.next(); + }; + }); + }; + + var toggleCheck = function toggleCheck(toggleThese) { + var fullscreenchange = function fullscreenchange() { + if (screenfull.isFullscreen) { + toggleThese.filter(function (toggleThis) { + toggleThis.classList.add(toggleThis.dataset.fsToggle); + }); + } + + if (!screenfull.isFullscreen) { + toggleThese.filter(function (toggleThis) { + toggleThis.classList.remove(toggleThis.dataset.fsToggle); + }); } }; - }); - var fullscreenchange = function fullscreenchange() { - if (screenfull.isFullscreen) { - toggleThese.filter(function (toggleThis) { - toggleThis.classList.add(toggleThis.dataset.fsToggle); - }); + if (sfEnabled() == true) { + document.addEventListener(screenfull.raw.fullscreenchange, fullscreenchange); } + }; - if (!screenfull.isFullscreen) { - toggleThese.filter(function (toggleThis) { - toggleThis.classList.remove(toggleThis.dataset.fsToggle); - }); + if (typeof screenfull !== "undefined") { + if (fsButtons.length > 0) { + buttonCheck(fsButtons); + } else { + console.log("There are no FS buttons"); } - }; - if (sfCheck() == true) { - document.addEventListener(screenfull.raw.fullscreenchange, fullscreenchange); + if (toggleThese.length > 0) { + toggleCheck(toggleThese); + } else { + console.log("There are no elements with 'data-fs-toggle'."); + } + } else { + fsButtons.filter(function (fsButton) { + hideIfNoFS(fsButton); + }); + console.log("Screenfull.js did not load"); } }; @@ -105,9 +134,9 @@ } }; - var options = deck.getConfig().appearance || {}; + var options = deck.getConfig().fsfx || {}; defaults(options, defaultOptions); - buttonCheck(deck, options); + fullScreenEffects(deck, options); }; return {