Replace ZeroClipboard with clipboard.js. Fixes #32.

public/config-sample.php

@@ -8,7 +8,6 @@
 ISQ::$general = array(
 	'name' => 'URL shortener', // The name of your URL shortener
 	'qr' => TRUE, // Do you want to display a QR code?
-	'clipboard' => 1, // Do you want to enable zeroClipboard? (uses flash)
 	'customstyle' => TRUE // Do you want to enable the custom stylesheet, found in public/custom.css?
 );
 

public/images/clippy.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>clippy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="clippy" fill="#000000">
+            <path d="M2,13 L6,13 L6,14 L2,14 L2,13 L2,13 Z M7,7 L2,7 L2,8 L7,8 L7,7 L7,7 Z M9,10 L9,8 L6,11 L9,14 L9,12 L14,12 L14,10 L9,10 L9,10 Z M4.5,9 L2,9 L2,10 L4.5,10 L4.5,9 L4.5,9 Z M2,12 L4.5,12 L4.5,11 L2,11 L2,12 L2,12 Z M11,13 L12,13 L12,15 C11.98,15.28 11.89,15.52 11.7,15.7 C11.51,15.88 11.28,15.98 11,16 L1,16 C0.45,16 0,15.55 0,15 L0,4 C0,3.45 0.45,3 1,3 L4,3 C4,1.89 4.89,1 6,1 C7.11,1 8,1.89 8,3 L11,3 C11.55,3 12,3.45 12,4 L12,9 L11,9 L11,6 L1,6 L1,15 L11,15 L11,13 L11,13 Z M2,5 L10,5 C10,4.45 9.55,4 9,4 L8,4 C7.45,4 7,3.55 7,3 C7,2.45 6.55,2 6,2 C5.45,2 5,2.45 5,3 C5,3.55 4.55,4 4,4 L3,4 C2.45,4 2,4.45 2,5 L2,5 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

public/js/app.js

@@ -0,0 +1,50 @@
+function filterNodeListById( nodeList, id ) {
+
+    var elements = Array.prototype.slice.call( nodeList );
+
+    for (var i = elements.length - 1; i >= 0; i--) {
+        if( elements[i].id == id ) {
+            return elements[i];
+        }
+    }
+
+}
+
+// Clipboard.js
+if( document.querySelectorAll( '.copy-button' ).length > 0 ) {
+
+    var clipboard = new Clipboard( '.copy-button' );
+    var clipboardTimeout = 2000;
+
+    clipboard.on( 'success', function( event ) {
+        var errorElement = filterNodeListById( event.trigger.parentNode.childNodes, 'copy-success' );
+
+        errorElement.className += " visible";
+
+        window.setTimeout( function() {
+            errorElement.className = errorElement.className.replace(/\bvisible\b/,'');
+        }, clipboardTimeout );
+    } );
+
+    clipboard.on( 'error', function( event ) {
+        var errorElement = filterNodeListById( event.trigger.parentNode.childNodes, 'copy-error' );
+        var osClass;
+
+        if( /iPhone|iPad/i.test(navigator.userAgent) ) {
+            osClass = 'mobile';
+        } else if ( /Mac/i.test(navigator.userAgent) ) {
+            osClass = 'macos';
+        } else if ( /Windows/i.test(navigator.userAgent) || /X11/i.test(navigator.userAgent) ) {
+            osClass = 'pc';
+        } else {
+            osClass = 'other';
+        }
+
+        errorElement.className += " visible " + osClass;
+
+        window.setTimeout( function() {
+            errorElement.className = errorElement.className.replace(/\bvisible\b/,'');
+        }, clipboardTimeout );
+    } );
+
+}

public/style.css

@@ -200,6 +200,7 @@ input:not([type=submit]):not([type=file]) {
 	transition: box-shadow 0.5s, border 0.5s;
 	-webkit-appearance: none;
 	border-radius: 0;
+	height: 45px;
 }
 
 .g-recaptcha {
@@ -232,7 +233,7 @@ input[type=submit] {
 	display: inline-block;
 }
 
-.button:hover, .zeroclipboard-is-hover {
+.button:hover {
 	background: #E2E2E2;
 }
 
@@ -253,12 +254,62 @@ input[type=submit] {
 	font-weight: bold;
 }
 
-.copy-button {
-	margin-top: 2px;
+.input-with-copy {
+	position: relative;
 }
 
-.copy-button:focus {
-	outline: none;
+.input-with-copy input:not([type=submit]):not([type=file]) {
+	width: calc( 100% - 45px );
+}
+
+.input-with-copy .copy-button {
+	position: absolute;
+	right: 0;
+	top: 5px;
+	height: 45px;
+	width: 45px;
+	border-left: 0;
+}
+
+.copy-message {
+	position: absolute;
+	top: 6px;
+	left: 1px;
+	height: 43px;
+	line-height: 43px;
+	width: calc( 100% - 47px );
+	text-align: center;
+	background: rgba(0, 0, 0, 0.7);
+	transition: opacity 0.3s, visibility 0.3s;
+	color: white;
+	opacity: 0;
+	visibility: hidden;
+	-webkit-transform: translate3d(0, 0, 0); // WebKit animation fix
+}
+
+.copy-message.visible {
+	opacity: 1;
+	visibility: visible;
+}
+
+.copy-message .os {
+	display: none;
+}
+
+.copy-message.error.macos .macos {
+	display: block;
+}
+
+.copy-message.error.pc .pc {
+	display: block;
+}
+
+.copy-message.error.mobile .mobile {
+	display: block;
+}
+
+.copy-message.error.other .other {
+	display: block;
 }
 
 .social-button {