Merge pull request #1 from eosswedenorg/clipboardjs

Add clipboardjs

.gitignore

@@ -2,3 +2,4 @@
 _site/
 .bundle/
 vendor/
+node_modules/

_includes/head.html

@@ -4,5 +4,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   {% seo %}
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
+    integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
+
   <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
 </head>

_includes/js.html

@@ -1,4 +1,18 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"
 	integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg="
 	crossorigin="anonymous"></script>
-<script>anchors.add();</script>
+
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+	integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
+	crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/regular.min.js"
+	integrity="sha256-FR7X8I31WIyoJaQLE4STF1bYEoOncTwxTLPPgJVLXVs="
+	crossorigin="anonymous"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
+
+<script src="https://unpkg.com/popper.js@1"></script>
+<script src="https://unpkg.com/tippy.js@5"></script>
+
+<script src="{{ "/assets/scripts.js?v=" | append: site.github.build_revision | relative_url }}"></script>

_sass/_base.scss

@@ -31,3 +31,18 @@ figure {
         margin-top: 2em;
     }
 }
+
+.btn {
+
+    &:hover {
+        cursor: pointer;
+        color: $brand-color;
+    }
+}
+
+.btn-copy-code {
+    float: right;
+    .far, .fas {
+        color: $text-gray !important;
+    }
+}

_scripts/app.js

@@ -0,0 +1,50 @@
+
+anchors.add();
+
+// adapted from https://stackoverflow.com/a/48078807/1217368
+$(document).ready(function() {
+	$('.highlight > pre').each(function(i) {
+		if (!$(this).parent().hasClass('no-select-button')) {
+
+			// create an id for the current code section
+			var currentId = "codeblock" + (i + 1);
+
+			// find the code section and add the id to it
+			var codeSection = $(this).find('code');
+			codeSection.attr('id', currentId);
+
+			// now create the button, setting the clipboard target to the id
+			var btn = document.createElement('a');
+			btn.setAttribute('type', 'button');
+			btn.setAttribute('class', 'btn btn-copy-code');
+			btn.setAttribute('data-clipboard-target', '#' + currentId);
+			btn.innerHTML = '<i class="far fa-file-code fa-2x"></i>';
+			this.insertBefore(btn, this.firstChild);
+
+			// Create tooltip
+			tippy(btn, {
+				trigger: 'manual',
+				content: "Copied!",
+				placement: 'left',
+			});
+		}
+	});
+
+	var clipboard = new ClipboardJS('.btn-copy-code');
+
+	// Attach callback to copy successful event.
+	clipboard.on('success', function(event) {
+		var tooltip = event.trigger._tippy;
+
+		// Clear text selection.
+		event.clearSelection();
+
+		// Show tooltiop
+		tooltip.show();
+
+		// After 1 second, hide it again.
+		setTimeout(function() {
+			tooltip.hide();
+		}, 1000, tooltip);
+	});
+});

_scripts/build.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+UGLIFYJS=node_modules/uglify-js/bin/uglifyjs
+
+SRC=_scripts/app.js
+TARGET=assets/scripts.js
+
+$UGLIFYJS $SRC -c -m > $TARGET

assets/scripts.js

@@ -0,0 +1 @@
+anchors.add(),$(document).ready(function(){$(".highlight > pre").each(function(t){if(!$(this).parent().hasClass("no-select-button")){var e="codeblock"+(t+1);$(this).find("code").attr("id",e);var i=document.createElement("a");i.setAttribute("type","button"),i.setAttribute("class","btn btn-copy-code"),i.setAttribute("data-clipboard-target","#"+e),i.innerHTML='<i class="far fa-file-code fa-2x"></i>',this.insertBefore(i,this.firstChild),tippy(i,{trigger:"manual",content:"Copied!",placement:"left"})}}),new ClipboardJS(".btn-copy-code").on("success",function(t){var e=t.trigger._tippy;t.clearSelection(),e.show(),setTimeout(function(){e.hide()},1e3,e)})});

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "apt-site",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {
+    "uglify-js": "^3.6.9"
+  },
+  "scripts": {
+    "build": "./_scripts/build.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eosswedenorg/apt.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/eosswedenorg/apt/issues"
+  },
+  "homepage": "https://github.com/eosswedenorg/apt#readme"
+}