Skip to content

Commit

Permalink
Formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Martino committed May 31, 2020
1 parent a686964 commit a2b1bd2
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 97 deletions.
28 changes: 28 additions & 0 deletions css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.slides {
opacity: 0;
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease; }

.reveal.ready .slides {
opacity: 1; }

.backgrounds {
background: #1a1626; }

@font-face {
font-family: 'JetBrains Mono';
src: url("jetbrains-mono/JetBrainsMono-Regular.eot");
/* IE9 Compat Modes */
src: local("JetBrains Mono"), local("JetBrainsMono-Regular"), url("jetbrains-mono/JetBrainsMono-Regular.eot?#iefix") format("embedded-opentype"), url("jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"), url("jetbrains-mono/JetBrainsMono-Regular.woff") format("woff"), url("jetbrains-mono/JetBrainsMono-Regular.ttf") format("truetype");
/* Safari, Android, iOS */
font-style: normal; }

:root {
--code-font: 'JetBrains Mono', monospace; }

.reveal pre, .reveal code {
font-family: 'JetBrains Mono', monospace; }

.reveal code {
line-height: 1.5; }
22 changes: 0 additions & 22 deletions css/jetbrains-mono.css
View file

This file was deleted.

136 changes: 61 additions & 75 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>

<head>
<meta charset="utf-8">
<title>CopyCode.js for Reveal.js</title>
<title>CopyCode for Reveal.js</title>
<meta name="description" content="">
<meta name="author" content="Martinomagnifico">
<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">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<style>
.slides {
opacity: 0;
transition: opacity .5s ease;
}
.reveal.ready .slides {
opacity: 1;
}
</style>
<link rel="stylesheet" href="plugin/highlight/monokai.css">
<link rel="stylesheet" href="css/jetbrains-mono.css">
<link rel="stylesheet" href="css/demo.css">
<!-- Styles for CopyCode button-->
<link rel="stylesheet" href="plugin/copycode/copycode.css">
<style>
.backgrounds {
background: #1a1626;
}


</style>
</head>
<body>
</head>

<body>
<div class="reveal">
<div class="slides">
<section>
<h1>CopyCode</h1>
<h3>for Reveal.js</h3><br>
<pre><code class="hljs javascript" data-line-numbers>let why = `Because we always want to copy code
<div class="slides">
<section>
<h1>CopyCode</h1>
<h3>for Reveal.js</h3><br>
<pre><code class="hljs javascript" data-line-numbers>let why = `Because we always want to copy code
during our presentations, right?`</code></pre>
</section>
<section>
<h4>Works out of the box</h4>
<pre><code class="hljs javascript" data-line-numbers>const http = require("http");
</section>
<section>
<h4>Works out of the box</h4>
<pre><code class="hljs javascript" data-line-numbers>const http = require("http");
http.createServer(function (request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.end("Hello World\n");
}).listen(8081);
</code></pre>
<p>A 'Copy' button is automatically added to any &lt;pre&gt; code block.</p>
</section>
<section>
<h4>Override button text and timing</h4>
<pre><code class="hljs javascript" data-line-numbers>&hellip;
</code></pre><small>A 'Copy' button is automatically added to any &lt;pre&gt; code block.</small>
</section>
<section>
<h4>Override button text and timing</h4>
<pre><code class="hljs javascript" data-line-numbers>&hellip;
Reveal.initialize({
copycode: {
copy: &quot;Copy&quot;,
copied: &quot;Copied!&quot;,
timeout: 1000
},
plugins: [ &hellip;</code></pre>
<p>Override these global default values in the Reveal.js config. The timeout is the time in milliseconds for the "Copied!"-state to revert back to "Copy".</p>
</section>
<section>
<h4>Override styling</h4>
<pre><code class="hljs javascript" data-line-numbers>&hellip;
plugins: [ &hellip;</code></pre><small>Override these global default values in the Reveal.js config. The timeout is the time in milliseconds for the "Copied!"-state to revert back to "Copy".</small>
</section>
<section>
<h4>Override styling</h4>
<pre><code class="hljs javascript" data-line-numbers>&hellip;
Reveal.initialize({
copycode: {
copybg: &quot;orange&quot;,
copiedbg: &quot;green&quot;,
copycolor: &quot;black&quot;,
copiedcolor: &quot;white&quot;
},
plugins: [ &hellip;</code></pre>
<p>Override these global default values in the Reveal.js config.</p>
</section>
<section>
<h4>Turn it off or customize per element</h4>
<pre data-cc="false"><code class="hljs html" data-line-numbers>&lt;pre data-cc="false"&gt;
plugins: [ &hellip;</code></pre><small>Override these global default values in the Reveal.js config.</small>
</section>
<section>
<h4>Turn it off or customize per element</h4>
<pre data-cc="false"><code class="hljs html" data-line-numbers>&lt;pre data-cc="false"&gt;
&lt;code&gt;
Here is the code
&lt;/code&gt;
&lt;/pre&gt;</code></pre>
<pre data-cc-copy="Copy HTML" data-cc-copied="Done"><code class="hljs html" data-line-numbers>&lt;pre data-cc-copy="Copy HTML" data-cc-copied="Done"&gt;
<pre data-cc-copy="Copy HTML" data-cc-copied="Done"><code class="hljs html" data-line-numbers>&lt;pre data-cc-copy="Copy HTML" data-cc-copied="Done"&gt;
&lt;code&gt;
Here is the code
&lt;/code&gt;
&lt;/pre&gt;
</code></pre>
</section>
<section>
<h4>Manual styling</h4>
<p>Just edit the provided stylesheet.</p>
<pre style="white-space: pre-wrap"><code class="hljs html" data-line-numbers>&hellip;
</section>
<section>
<h4>Manual styling</h4>
<p>Just edit the provided stylesheet.</p>
<pre style="white-space: pre-wrap"><code class="hljs html" data-line-numbers>&hellip;
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/js/revealjs/plugin/copycode/copycode.css&quot;&gt;
&hellip;</code></pre>
</section>
<section>
<h4>Thanks</h4>
<ul>
<li>Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
<li>Zeno Rocha, for <a href="https://clipboardjs.com" target="_blank">Clipboard.js</a></li>
<li>Philipp Nurullin and Jetbrains for <a href="https://www.jetbrains.com/lp/mono/" target="_blank">JetBrains Mono</a></li>
</ul>
</section>
</div>
</section>
<section>
<h4>Thanks</h4>
<ul>
<li>Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
<li>Zeno Rocha, for <a href="https://clipboardjs.com" target="_blank">Clipboard.js</a></li>
<li>Philipp Nurullin and Jetbrains for <a href="https://www.jetbrains.com/lp/mono/" target="_blank">JetBrains Mono</a></li>
</ul>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="dist/reveal.js"></script>
<script src="plugin/copycode/copycode.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
transition: 'convex',
history: true,
copycode: {
timeout: 1200
},
plugins: [ RevealHighlight, CopyCode ]
});
Reveal.initialize({
transition: "convex",
copycode: {
timeout: 1200
},
plugins: [
CopyCode,
RevealHighlight
]
});
</script>
</body>
</body>

</html>
110 changes: 110 additions & 0 deletions plugin/copycode/copycode.esm.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@

/*****************************************************************
* @author: Martijn De Jongh (Martino), [email protected]
* https://github.com/Martinomagnifico
*
* CopyCode.js for Reveal.js
* Version 1.0.1
*
* @license
* MIT licensed
*
* Thanks to:
* - Hakim El Hattab, Reveal.js
******************************************************************/


var Plugin = function Plugin() {
var getCodeBlocks = function getCodeBlocks(codeblocks, options) {
var styleButton = function styleButton(button, codeblock) {
var codeblockData = codeblock.dataset;
button.textContent = codeblockData.ccCopy ? codeblockData.ccCopy : options.copy;
button.setAttribute("data-cc-copied", codeblockData.ccCopied ? codeblockData.ccCopied : options.copied);
["data-cc-copy", "data-cc-copied"].forEach(function (attribute) {
return codeblock.removeAttribute(attribute);
});
button.style.backgroundColor = options.copybg;
button.style.color = options.copycolor;
};

var buildStructure = function buildStructure(codeblock) {
var wrapper = document.createElement("div");
wrapper.classList.add("codeblock");
codeblock.parentNode.insertBefore(wrapper, codeblock);
wrapper.appendChild(codeblock);
var button = document.createElement("button");
styleButton(button, codeblock);
wrapper.insertBefore(button, codeblock);
};

codeblocks.forEach(function (codeblock) {
if (codeblock.getAttribute("data-cc") && codeblock.getAttribute("data-cc") === "false") {
return;
} else {
if (!codeblock.parentNode.classList.contains("codeblock")) {
buildStructure(codeblock);
}
}
});
var clipboard = new ClipboardJS(".codeblock > button", {
target: function target(trigger) {
return trigger.nextElementSibling;
}
});
clipboard.on("success", function (e) {
var button = e.trigger;
e.clearSelection();
button.setAttribute("data-text-original", button.innerHTML);
button.innerHTML = button.getAttribute("data-cc-copied");
button.style.backgroundColor = options.copiedbg;
button.style.color = options.copiedcolor;
button.setAttribute("disabled", true);
setTimeout(function () {
button.style.backgroundColor = options.copybg;
button.style.color = options.copycolor;
button.innerHTML = button.getAttribute("data-text-original");
button.removeAttribute("disabled");
}, options.timeout);
});
};

var init = function init(deck) {
var defaultOptions = {
timeout: 1000,
copy: "Copy",
copied: "Copied!",
copybg: "orange",
copiedbg: "green",
copycolor: "black",
copiedcolor: "white"
};

var defaults = function defaults(options, defaultOptions) {
for (var i in defaultOptions) {
if (!options.hasOwnProperty(i)) {
options[i] = defaultOptions[i];
}
}
};

var options = deck.getConfig().copycode || {};
defaults(options, defaultOptions);

if (typeof ClipboardJS === "function") {
var codeblocks = deck.getRevealElement().querySelectorAll("pre");

if (codeblocks.length > 0) {
getCodeBlocks(codeblocks, options);
}
} else {
console.log("Clipboard.js did not load");
}
};

return {
id: 'copycode',
init: init
};
};

export default Plugin;

0 comments on commit a2b1bd2

Please sign in to comment.