Version 1.3.3

### Added - Added embedded example to the demo’s ### Changed - Fixed a bug where the plugin would not work if in an embedded presentation
Martinomagnifico · Nov 18, 2023 · 88f718e · 88f718e
1 parent 699d3eb
commit 88f718e
Show file tree

Hide file tree

Showing 57 changed files with 569 additions and 368 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+
+## [1.3.3] - 2023-11-18
+### Added
+- Added embedded example to the demo’s
+
+### Changed
+- Fixed a bug where the plugin would not work if in an embedded presentation
+
+
 ## [1.3.1] - 2023-11-05
 ### Added
 - Added Terser to minimize files

diff --git a/demo/assets/css/demo.css b/demo/assets/css/demo.css
@@ -100,24 +100,64 @@ p.code, p code, small code, .small code, li code {
   --r-link-color-hover: #0373bd;
 }
 
+.reveal.embedded {
+  border: 4px solid transparent;
+  border-radius: 8px;
+}
+.reveal.embedded:not(.focused) {
+  cursor: pointer;
+}
+.reveal.embedded.focused {
+  border-color: #42affa;
+  box-shadow: 0 4px 16px rgba(5, 21, 37, 0.3);
+}
+
+.reveal.embedded .progress {
+  background: rgba(66, 175, 250, 0.3);
+  font-size: 10px;
+  height: 0.3em;
+  border-radius: 0.25em;
+  left: 0.5em;
+  bottom: 0.5em;
+  right: 0.5em;
+  width: calc(100% - 1em);
+  overflow: hidden;
+}
+
 a.github-corner {
-  position: fixed;
+  position: sticky;
+  border: none;
+  pointer-events: initial;
   z-index: 2;
+  padding: 0;
   top: 0;
-  left: 0;
-  width: clamp(50px, 8vmax, 80px);
+  display: flex;
+  flex-direction: column;
   line-height: 0;
+  width: max-content;
+  height: max-content;
   opacity: 0.5;
   transition: opacity 0.3s;
   color: var(--c-theme-color, white);
 }
 .rtl a.github-corner {
   left: auto;
+  margin: 0 0 0 auto;
   right: 0;
 }
 a.github-corner.bottom {
-  top: auto;
-  bottom: 3px;
+  position: sticky;
+  top: 100%;
+  margin-top: auto;
+  top: calc(100% - 70px);
+}
+.reveal.embedded a.github-corner {
+  display: none;
+}
+a.github-corner svg {
+  line-height: 0;
+  width: 75px;
+  height: 75px;
 }
 
 a.github-corner:hover {

diff --git a/demo/demo-embed.html b/demo/demo-embed.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Appearance</title>
+    <meta name="author" content="Martijn De Jongh (Martino)">
+    <link rel="icon" href="data:,">
+    <link rel="stylesheet" href="dist/reset.css">
+    <link rel="stylesheet" href="dist/reveal.css">
+    <link rel="stylesheet" href="dist/theme/black.css">
+    <link rel="stylesheet" href="plugin/highlight/monokai.css">
+    <link rel="stylesheet" href="assets/css/demo.css">
+  </head>
+  <body>
+    <div style="width: 768px; height: 400px; margin: 64px auto;">
+      <div class="reveal" id="deck1"><a class="github-corner" href="https://github.com/martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
+            <path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
+          </svg></a>
+        <div class="slides">
+          <section>
+            <h1 class="animate__flipInX slow">Embed test</h1>
+            <h2 data-delay="2000">Embed test</h2>
+          </section>
+          <section>
+            <ul>
+              <li class="globalul">This is list item 1</li>
+              <li class="globalul">This is list item 2</li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </div>
+    <div style="width: 768px; height: 400px; margin: 64px auto;">
+      <div class="reveal" id="deck2"><a class="github-corner bottom" href="https://github.com/martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
+            <path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
+          </svg></a>
+        <div class="slides">
+          <section>
+            <h1 class="animate__flipInX">Embed test</h1>
+            <h2>Embed test</h2>
+          </section>
+          <section>
+            <ul>
+              <li class="globalul">This is list item 1</li>
+              <li class="globalul">This is list item 2</li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </div>
+    <script src="dist/reveal.js"></script>
+    <script src="plugin/highlight/highlight.js"></script>
+    <script src="plugin/appearance/appearance.js"></script>
+    <script>
+      // Get the decks
+      const deck = document.querySelector("#deck1");
+      const decktwo = document.querySelector("#deck2");
+
+      // Define the plugins (Using strings)
+      let plugins = ["Appearance", "RevealHighlight"];
+
+      // Check the plugins
+      const pluginCheck = (plugs) => plugs.reduce((a, p) => typeof window[p] === "function" ? (a.push(window[p]), a) : (console.warn(`Plugin "${p}" does not exist.`), a), []);
+
+      let deck1 = new Reveal(deck, {
+      	embedded: true,
+      	keyboardCondition: 'focused',
+      	overview: false,
+      	controlsTutorial: false,
+      	appearance: {
+      		appearparents: true,
+      		appearevent: 'auto',
+      		autoappear: true,
+      		autoelements: {'ul li': 'animate__fadeInLeft', 'h2': {"animation":"animate__shrinkIn", "speed":"slow", "delay":"800"}}
+      	},
+      	plugins: pluginCheck(plugins)
+      });
+
+      let deck2 = new Reveal(decktwo, {
+      	embedded: true,
+      	keyboardCondition: 'focused',
+      	overview: false,
+      	controlsTutorial: false,
+      	appearance: {
+      		appearparents: true,
+      		appearevent: 'slidechanged',
+      		autoappear: true,
+      		autoelements: {'ul li': 'animate__fadeInRight', 'h2': {"animation":"animate__fadeInUp", "speed":"slow", "delay":"800"}}
+      	},
+      	plugins: pluginCheck(plugins)
+      });
+      deck1.initialize();
+      deck2.initialize();
+    </script>
+  </body>
+</html>
diff --git a/demo/demo-markdown.html b/demo/demo-markdown.html
@@ -41,7 +41,7 @@
 
       // Initialize the deck
       let revealdeck = new Reveal(deck);
-      	revealdeck.initialize({
+      revealdeck.initialize({
       	history: true,
       	overview: true,
       	margin: 0.1,

diff --git a/demo/demo.html b/demo/demo.html
@@ -403,15 +403,15 @@ <h3>Credits</h3>
 
       // Initialize the deck
       let revealdeck = new Reveal(deck);
-      	revealdeck.initialize({
+      revealdeck.initialize({
       	history: true,
       	overview: true,
       	margin: 0.1,
       	maxScale: 1.8,
       	center: true,
       	controlsTutorial: false,
       	appearance: {
-      		debug: false,
+      		debug: true,
       		appearparents: true,
       		hideagain: true,
       		appearevent: 'auto',

diff --git a/demo/dist/reveal.css b/demo/dist/reveal.css
diff --git a/demo/dist/reveal.esm.js b/demo/dist/reveal.esm.js
diff --git a/demo/dist/reveal.esm.js.map b/demo/dist/reveal.esm.js.map
diff --git a/demo/dist/reveal.js b/demo/dist/reveal.js
diff --git a/demo/dist/reveal.js.map b/demo/dist/reveal.js.map
diff --git a/demo/dist/theme/beige.css b/demo/dist/theme/beige.css
@@ -37,16 +37,18 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #c0a86e;
   --r-selection-background-color: rgba(79, 64, 28, 0.99);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {
-  background: #f7f2d3;
-  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
-  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: rgb(247, 242, 211);
+  background: -moz-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(247, 242, 211)));
+  background: -webkit-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
+  background: -o-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
+  background: -ms-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
+  background: radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
   background-color: var(--r-background-color);
 }
 

diff --git a/demo/dist/theme/black-contrast.css b/demo/dist/theme/black-contrast.css
@@ -39,6 +39,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: #bee4fd;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/black.css b/demo/dist/theme/black.css
@@ -36,6 +36,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/blood.css b/demo/dist/theme/blood.css
@@ -42,6 +42,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #dd5566;
   --r-selection-background-color: #a23;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/dracula.css b/demo/dist/theme/dracula.css
@@ -43,6 +43,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8BE9FD;
   --r-selection-background-color: #44475A;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/league.css b/demo/dist/theme/league.css
@@ -39,16 +39,18 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #71e9f4;
   --r-selection-background-color: #FF5E99;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {
-  background: #1c1e20;
-  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
-  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: rgb(28, 30, 32);
+  background: -moz-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(85, 90, 95)), color-stop(100%, rgb(28, 30, 32)));
+  background: -webkit-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
+  background: -o-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
+  background: -ms-radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
+  background: radial-gradient(center, circle cover, rgb(85, 90, 95) 0%, rgb(28, 30, 32) 100%);
   background-color: var(--r-background-color);
 }
 

diff --git a/demo/dist/theme/moon.css b/demo/dist/theme/moon.css
@@ -7,11 +7,6 @@
 /**
  * Solarized colors by Ethan Schoonover
  */
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto;
-}
-
 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;
 }
@@ -44,6 +39,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #78b9e6;
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/night.css b/demo/dist/theme/night.css
@@ -37,6 +37,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #f3d7ac;
   --r-selection-background-color: #e7ad52;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 240, 240, 240;
+  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/serif.css b/demo/dist/theme/serif.css
@@ -40,6 +40,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #8b7c69;
   --r-selection-background-color: #26351C;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/simple.css b/demo/dist/theme/simple.css
@@ -39,6 +39,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #0000f1;
   --r-selection-background-color: rgba(0, 0, 0, 0.99);
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/sky.css b/demo/dist/theme/sky.css
@@ -41,6 +41,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #74a7cb;
   --r-selection-background-color: #134674;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/solarized.css b/demo/dist/theme/solarized.css
@@ -40,6 +40,8 @@ html * {
   --r-link-color-hover: #78b9e6;
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/white-contrast.css b/demo/dist/theme/white-contrast.css
@@ -39,6 +39,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #6ca0e8;
   --r-selection-background-color: #98bdef;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/white.css b/demo/dist/theme/white.css
@@ -36,6 +36,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #6ca0e8;
   --r-selection-background-color: #98bdef;
   --r-selection-color: #fff;
+  --r-overlay-element-bg-color: 0, 0, 0;
+  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {

diff --git a/demo/plugin/appearance/appearance.css b/demo/plugin/appearance/appearance.css
@@ -2,7 +2,7 @@
 /*****************************************************************
  *
  * Appearance for Reveal.js 
- * Version 1.3.1
+ * Version 1.3.3
  * 
  * @author: Martijn De Jongh (Martino), martijn.de.jongh@gmail.com
  * https://github.com/martinomagnifico