Permalink
Browse files

Merge pull request #32 from mischah/copy-button

Add copy (to clipboard) button to website
  • Loading branch information...
schme16 committed Apr 21, 2018
2 parents 1dd78a1 + 0745a8d commit 764e461eae88b985ac683c1ffd3dcf018c7f51b4
Showing with 97 additions and 15 deletions.
  1. +5 −3 website/index.html
  2. +38 −0 website/sys/css/base.css
  3. +44 −0 website/sys/js/clipboard.js
  4. +10 −12 website/sys/js/url-formatter.js
View
@@ -12,7 +12,7 @@
<meta property="og:image" content="https://gitcdn.herokuapp.com/sys/img/site.jpg">
<link rel="canonical" href="https://gitcdn.xyz" />
<link rel="stylesheet" href="https://gitcdn.herokuapp.com/sys/css/base.min.css">
<link rel="stylesheet" href="sys/css/base.css">
<title>GitCDN - A powerful CDN for Github files</title>
</head>
@@ -35,7 +35,7 @@
<div class="column pure-u-1-1">
<h2>Use this URL to always get the latest commit</h2>
<p>
<p class="target-url-container">
<input id="url-dev" class="url" placeholder="user/repo/master/file" readonly>
<script>
document.querySelector('[readonly]').placeholder = location.href + document.querySelector('[readonly]').placeholder
@@ -53,6 +53,8 @@ <h2>Use this URL to always get the latest commit</h2>
Special thanks to <a href="http://wonko.com/">Ryan Grove</a> for RawGit!
</p>
</footer>
<script src="https://gitcdn.herokuapp.com/sys/js/url-formatter.js" defer async="true"></script>
<script src="sys/js/url-formatter.js" defer async="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>
<script src="sys/js/clipboard.js"></script>
</body>
</html>
View
@@ -348,3 +348,41 @@ pre { overflow-x: auto; }
color: inherit;
text-decoration: underline;
}
/* -- Copy to Clipboard ----------------------------------------------------- */
.target-url-container { position: relative; }
.target-url-container .url { box-sizing: border-box; }
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
padding: 0.1rem 0.6rem 0 0.5rem;
height: 100%;
}
.btn-clipboard.hidden {
display: none;
}
.btn-clipboard:hover,
.btn-clipboard:focus {
text-decoration: none;
}
.btn-clipboard:focus,
.btn-clipboard:active {
outline: 2px solid inherit;
}
.btn-clipboard svg {
margin-left: 0.25em;
margin-right: 0.25em;
}
.btn-clipboard__label {
vertical-align: top;
text-transform: uppercase;
font-size: 0.9rem;
}
@@ -0,0 +1,44 @@
(function () {
'use strict';
function initClipboard() {
var inputElem = document.querySelector('#url-dev');
var clipboardIcon = '<svg width="14" height="15" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
var button = document.createElement('button');
button.classList.add('btn-clipboard');
button.classList.add('hidden');
button.setAttribute('aria-label','Copy code to clipboard');
button.innerHTML = clipboardIcon + '<strong class="btn-clipboard__label">Copy</strong>';
inputElem.parentElement.appendChild(button);
var clipboard = new Clipboard('.btn-clipboard', {
target: function() {
return inputElem;
}
});
clipboard.on('success', function(event) {
var textEl = document.querySelector('.btn-clipboard__label');
event.clearSelection();
textEl.innerHTML = 'Copied';
setTimeout(function() {
textEl.innerHTML = 'Copy';
}, 2000);
});
inputElem.addEventListener('change', function(event) {
if (event.target.value) {
button.classList.remove('hidden')
} else {
button.classList.add('hidden');
}
});
}
document.addEventListener('DOMContentLoaded', function () {
initClipboard();
});
}());
@@ -11,6 +11,13 @@
devEl = document.getElementById('url-dev'),
urlEl = document.getElementById('url');
function setDevURLValue (newURL) {
var event = document.createEvent('HTMLEvents');
devEl.value = encodeURI(newURL);
event.initEvent('change', true, false);
devEl.dispatchEvent(event);
}
urlEl.addEventListener('input', function () {
var url = decodeURIComponent(urlEl.value.trim()).replace('http://','').replace('https://','').split('/'),
type = url.shift().replace('.githubusercontent.com', ''),
@@ -31,8 +38,7 @@
devEl.classList.remove('invalid');
var newURL = repoDomain + '/' + base
devEl.value = encodeURI(newURL);
setDevURLValue(repoDomain + '/' + base);
}
//Raw files
@@ -45,8 +51,7 @@
devEl.classList.remove('invalid');
var newURL = repoDomain + '/' + base
devEl.value = encodeURI(newURL);
setDevURLValue(repoDomain + '/' + base);
}
@@ -60,7 +65,7 @@
urlEl.classList.remove('invalid');
}
devEl.value = '';
setDevURLValue('');
devEl.classList.remove('valid');
}
@@ -128,11 +133,4 @@
}, false);
devEl.addEventListener('focus', onFocus);
function onFocus(e) {
setTimeout(function () {
e.target.select();
}, 1);
}
}(window, document));

0 comments on commit 764e461

Please sign in to comment.