Clipboard Tools

Copy various dyanmic content to your clipboard. Just some handy utility tools mostly related to dates.

by jondlm

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<div id="display">Click buttons</div>

<div class="pure-g">
    <div class="pure-u-1 l-box">
        <div class="big-clock" data-eval="moment().utc().format('YYYY-MM-DD HH:mm')"></div>
        
        <button data-format="X" class="pure-button"></button>
        <button data-eval="new Date().getTime()" class="pure-button"></button>
        <button data-format="YYYY-MM-DD" class="pure-button"></button>
        <button data-format="" class="pure-button"></button>
        <button data-eval="moment().toISOString()" class="pure-button"></button>
        
    </div>
</div>

CSS

.pure-button { margin-top: 1em; }
.l-box { padding: 1em; }
.big-clock {
    margin-top: 1em;
    text-align: center;
    font-size: 4em;
}
#display {
    position: absolute;
    top: 1em;
    right: 1em;
    background-color: #1f8dd6;
    color: #fff;
    padding: .8em;
    font-size: .8em;
    border-radius: .5em;
    box-shadow: 1px 1px 7px 0px rgba(50, 50, 50, 0.75);
}

JavaScript

var formatButtons = document.querySelectorAll("[data-format]");
var formatButtonsZC = new ZeroClipboard(formatButtons);
var evalButtons = document.querySelectorAll("[data-eval]");
var evalButtonsZC = new ZeroClipboard(evalButtons);

var display = document.getElementById('display');

formatButtonsZC.on( "copy", function (event) {
    var formatString = event.target.attributes['data-format'].value;
    var toCopy = moment().format(formatString);
    event.clipboardData.setData( "text/plain", toCopy );
    display.innerText = toCopy + ' copied...';
});

evalButtonsZC.on("copy", function(event) {
    var evalString = event.target.attributes['data-eval'].value;
    var toCopy = eval(evalString);
    event.clipboardData.setData( "text/plain", toCopy );
    display.innerText = toCopy + ' copied...';
});

formatAll();
window.setInterval(formatAll, 1000);

function formatAll() {
    [].forEach.call(formatButtons, function(el){
        var result = moment().format(el.attributes['data-format'].value);
        el.innerText = result;
    });
    
    [].forEach.call(evalButtons, function(el){
        var result = eval(el.attributes['data-eval'].value);
        el.innerText = result;
    });
}