Version 1.1.3

Fix fullscreen background
Martinomagnifico · Oct 7, 2022 · cb7324b · cb7324b
1 parent a370f52
commit cb7324b
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,57 @@
 # Changelog
 
+## [1.1.3] - 2022-10-07
+
+### Changed
+- Insert CSS rule to fix fullscreen background color in presentations that have no specific background set.
+
+
+## [1.1.2] - 2021-12-10
+
+### Changed
+- Update Screenfull to 2.0.11
+
+
 ## [1.1.1] - 2021-12-10
 
 ### Added
 - Started keeping the changelog.
 
 ### Changed
-- Update Screenfull to 2.0.11
+- Import Screenfull, remove script
+- Add class no-fsfx to body if device not supported
+- Minify code
+
+
+## [1.1.0] - 2021-12-10
+
+### Changed
+- Change Screenfull check
+- Change FS button display
+
 
+## [1.0.9] - 2020-05-31
 
-TO DO
+### Changed
+- This version fixes a bug, and has some code optimisations.
+
+
+
+## [1.0.8] - 2020-05-22
+
+### Changed
+- Compatibility with Reveal.js 4
+
+
+## [1.0.7] - 2020-05-22
+
+### Changed
+- First GitHub commit
+- Fix Screenfull enabled issue
+
+
+## [1.0.6] - 2019-09-08
+
+### Added
+- Added "go-next" functionality
 
-## [1.0.0] - 2020-05-27
-- First commit
diff --git a/css/demo.css b/css/demo.css
@@ -1,3 +1,7 @@
+:root {
+  --r-background-color: #1a1626;
+}
+
 .slides {
   opacity: 0;
   -webkit-transition: opacity 0.5s ease;
@@ -101,21 +105,15 @@ li + li {
   content: "-";
 }
 
-.reveal-viewport {
-  background: #1a1626;
-}
-
 .backgrounds {
-  background: #1a1626;
+  background: var(--r-background-color);
   -webkit-transition: background-color 0.5s ease-in-out;
   -o-transition: background-color 0.5s ease-in-out;
   transition: background-color 0.5s ease-in-out;
 }
 
 .reveal.fullscreen .backgrounds {
-  color: green;
   background: DarkSlateGray;
-  background-color: DarkSlateGray;
 }
 
 .fsfx-disabled {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "reveal.js-fsfx",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "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, screenfull",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-fsfx",

diff --git a/plugin/fsfx/fsfx.esm.js b/plugin/fsfx/fsfx.esm.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * FsFx.js for Reveal.js 
- * Version 1.1.2
+ * Version 1.1.3
  * 
  * @license 
  * MIT licensed
@@ -297,6 +297,9 @@ var Plugin = function Plugin() {
     var viewport = deck.getRevealElement().tagName == "BODY" ? document : deck.getRevealElement();
     var fsButtons = selectionArray(viewport, ".".concat(options.baseclass));
     var toggleThese = selectionArray(document, "[data-fs-toggle]");
+    var sheet = document.styleSheets[0];
+    var prefix = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase()) ? '-moz-' : /webkit/.test(navigator.userAgent.toLowerCase()) ? '-webkit-' : /msie/.test(navigator.userAgent.toLowerCase()) ? '-ms-' : /opera/.test(navigator.userAgent.toLowerCase()) ? '-o-' : '';
+    sheet.insertRule(":".concat(prefix, "full-screen {background: var(--r-background-color)}"));
 
     var hideIfNoFS = function hideIfNoFS(fsButton) {
       if (options.hideifnofs == true && !fsButton.hasAttribute("data-fs-gonext")) ; else {

diff --git a/plugin/fsfx/fsfx.js b/plugin/fsfx/fsfx.js
@@ -4,7 +4,7 @@
  * https://github.com/Martinomagnifico
  *
  * FsFx.js for Reveal.js 
- * Version 1.1.2
+ * Version 1.1.3
  * 
  * @license 
  * MIT licensed
@@ -303,6 +303,9 @@
       var viewport = deck.getRevealElement().tagName == "BODY" ? document : deck.getRevealElement();
       var fsButtons = selectionArray(viewport, ".".concat(options.baseclass));
       var toggleThese = selectionArray(document, "[data-fs-toggle]");
+      var sheet = document.styleSheets[0];
+      var prefix = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase()) ? '-moz-' : /webkit/.test(navigator.userAgent.toLowerCase()) ? '-webkit-' : /msie/.test(navigator.userAgent.toLowerCase()) ? '-ms-' : /opera/.test(navigator.userAgent.toLowerCase()) ? '-o-' : '';
+      sheet.insertRule(":".concat(prefix, "full-screen {background: var(--r-background-color)}"));
 
       var hideIfNoFS = function hideIfNoFS(fsButton) {
         if (options.hideifnofs == true && !fsButton.hasAttribute("data-fs-gonext")) ; else {

diff --git a/plugin/fsfx/plugin-src.js b/plugin/fsfx/plugin-src.js
@@ -22,6 +22,14 @@ const Plugin = () => {
 
 		let toggleThese = selectionArray(document, "[data-fs-toggle]");
 
+		let sheet = document.styleSheets[0];
+		let prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && 
+		!/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : 
+		(/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :
+		(/msie/.test(navigator.userAgent.toLowerCase()))   ? '-ms-' :
+		(/opera/.test(navigator.userAgent.toLowerCase()))  ? '-o-' : '';
+		sheet.insertRule(`:${prefix}full-screen {background: var(--r-background-color)}`);
+
 		const hideIfNoFS = function (fsButton) {
 			if (options.hideifnofs == true && !fsButton.hasAttribute("data-fs-gonext")) {} else {
 				fsButton.style.display = "inline-block";