Fix for fragment code blocks

### Changed - Fix for fragment code blocks (@Toshizuki in #10)
Martinomagnifico · Feb 28, 2024 · 7feb093 · 7feb093
1 parent b984508
commit 7feb093
Show file tree

Hide file tree

Showing 27 changed files with 2,412 additions and 7,014 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.1.8] - 2024-02-29
+
+### Changed
+- Fix for fragment code blocks (@Toshizuki in #10)
+
+
 ## [1.1.7] - 2024-01-01
 
 ### Changed

diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ In Reveal.js presentations we can show blocks of code. This plugin for Reveal.js
 
 * [Demo](https://martinomagnifico.github.io/reveal.js-copycode/demo/demo.html)
 * [Markdown demo](https://martinomagnifico.github.io/reveal.js-copycode/demo/demo-markdown.html)
+* [Demo custom design](https://martinomagnifico.github.io/reveal.js-copycode/demo/demo-custom.html)
 
 It's easy to set up. If your code blocks are set up like this:
 

diff --git a/demo/demo-custom.html b/demo/demo-custom.html
@@ -0,0 +1,64 @@
+<!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>CopyCode</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 class="reveal"><a class="github-corner" href="https://github.com/martinomagnifico/reveal.js-copycode" 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>CopyCode</h1>
+          <h3>for Reveal.js</h3>
+          <p class="small">Customized copy button</p>
+          <pre><code class="hljs javascript" data-line-numbers style="font-size: 1em">let why = `Because we always want to copy code
+           during our presentations, right?`</code></pre>
+        </section>
+        <section>
+          <h3>Configuring CopyCode</h3>
+          <pre><code class="hljs javascript">copycode: { timeout: 1200, button: "hover", display: "icons", style: { copybg: "rgba(255,255,255,128)", copiedbg: "white", copyborder: "2px solid gray", copiedborder: "2px solid green", copiedcolor: "green", offset: 0.5, radius: 0.2} }</code></pre>
+          <p class="small">Add the above code to the Reveal.js configuration, and you will get a 'GitHub-flavored' copy button.</p>
+        </section>
+        <section>
+          <p>This is just an example file to show a customized copy button. For more CopyCode options, check the <a href="demo.html">demo</a>.</p>
+        </section>
+      </div>
+    </div>
+    <script src="dist/reveal.js"></script>
+    <script src="plugin/highlight/highlight.js"></script>
+    <script src="plugin/copycode/copycode.js"></script>
+    <script>
+      // Get the deck
+      const deck = document.querySelector(".reveal");
+
+      // Define the plugins (Using strings)
+      let plugins = ["CopyCode", "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 revealdeck = new Reveal(deck);
+      revealdeck.initialize({
+      	history: true,
+      	overview: false,
+      	center: true,
+      	margin: 0.15,
+      	controlsTutorial: false,
+      	copycode: { timeout: 1200, button: "always", display: "icons", style: { copybg: "rgba(255,255,255,128)", copiedbg: "white", copyborder: "2px solid gray", copiedborder: "2px solid green", copiedcolor: "green", offset: 0.5, radius: 0.2} },
+      	plugins: pluginCheck(plugins)
+      });
+    </script>
+  </body>
+</html>
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/markdown.md b/demo/markdown.md
@@ -56,7 +56,6 @@ Copy the `copycode` folder to the plugins folder of the reveal.js folder, like t
 This plugin is also published to, and can be installed from, npm.
 <!-- .element: class="small" -->
 
----
 
 ## Now change it
 

diff --git a/demo/plugin/copycode/copycode.css b/demo/plugin/copycode/copycode.css
@@ -2,7 +2,7 @@
 /*****************************************************************
  *
  * CopyCode for Reveal.js 
- * Version 1.1.7
+ * Version 1.1.8
  * 
  * @author: Martijn De Jongh (Martino), [email protected]
  * https://github.com/martinomagnifico

diff --git a/demo/plugin/copycode/copycode.esm.js b/demo/plugin/copycode/copycode.esm.js
diff --git a/demo/plugin/copycode/copycode.esm.js.map b/demo/plugin/copycode/copycode.esm.js.map
diff --git a/demo/plugin/copycode/copycode.js b/demo/plugin/copycode/copycode.js
diff --git a/demo/plugin/copycode/copycode.js.map b/demo/plugin/copycode/copycode.js.map
diff --git a/demo/plugin/notes/notes.esm.js b/demo/plugin/notes/notes.esm.js
diff --git a/demo/plugin/notes/notes.js b/demo/plugin/notes/notes.js
diff --git a/demo/plugin/notes/speaker-view.html b/demo/plugin/notes/speaker-view.html
@@ -383,6 +383,13 @@ <h4 class="label">Notes</h4>
 
 				window.addEventListener( 'message', function( event ) {
 
+					// Validate the origin of all messages to avoid parsing messages
+					// that aren't meant for us. Ignore when running off file:// so
+					// that the speaker view continues to work without a web server.
+					if( window.location.origin !== event.origin && window.location.origin !== 'file://' ) {
+						return
+					}
+
 					clearTimeout( connectionTimeout );
 					connectionStatus.style.display = 'none';