added copy to clipboard button

This commit is contained in:
bill bittner 2017-06-22 13:25:18 -07:00
parent 88d217cb2c
commit a5256c27f5
8 changed files with 45 additions and 43 deletions

View file

@ -15,11 +15,6 @@ canvas {
display: none;
}
#tweet-meme-button {
float: left;
margin-right: 5px;
}
.row {
margin: 10px 0px 10px 0px;
}

View file

@ -137,22 +137,27 @@ socket.on('publish-complete', function(msg){
var publishResults;
var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
// build new publish area
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
publishResults = '<p>Your publish is complete! View it here:</p>';
publishResults += `<p><a id="text-to-copy" target="_blank" href="${directUrl}">spee.ch' + directUrl + '</a></p>`;
publishResults += '<p><button class="copy-button">Copy to clipboard</button></p>';
publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
publishResults += '<a href="/"><button>Reload</button></a></p>';
// update publish area
document.getElementById('publish-active-area').innerHTML = publishResults;
// add a tweet button
twttr.widgets
.createShareButton(
document.getElementById('tweet-meme-button'),
{
text: 'Check out my image, hosted for free on the distributed awesomeness that is the LBRY blockchain!',
url: 'https://spee.ch/' + directUrl,
hashtags: 'LBRY',
via: 'lbryio'
})
.then( function( el ) {
console.log('Tweet button added.');
});
// update the link holder
document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
// enable copy-to-clipboard
var copyBtn = document.querySelector('.copy-button');
copyBtn.addEventListener('click', function(event) {
// select the text
var text = document.getElementById('direct-link-holder');
text.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
alert('Oops, unable to copy');
}
});
});

View file

@ -116,22 +116,27 @@ socket.on('publish-complete', function(msg){
var publishResults;
var directUrl = '/' + msg.name + '/' + msg.result.claim_id;
// build new publish area
publishResults = '<p><span id="tweet-meme-button"></span>Your publish is complete! <a target="_blank" href="' + directUrl + '">View it here!</a></p>';
publishResults = '<p>Your publish is complete! View it here:</p>';
publishResults += '<p><a target="_blank" href="' + directUrl + '">spee.ch' + directUrl + '</a></p>';
publishResults += '<p><button class="copy-button">Copy to clipboard</button></p>';
publishResults += '<p><a target="_blank" href="https://explorer.lbry.io/#!/transaction/' + msg.result.txid + '">View the transaction details</a></p>';
publishResults += '<a href="/"><button>Reload</button></a></p>';
publishResults += '<a href="/meme-fodder/play"><button>Reload</button></a></p>';
// update publish area
document.getElementById('publish-active-area').innerHTML = publishResults;
// add a tweet button
twttr.widgets
.createShareButton(
document.getElementById('tweet-meme-button'),
{
text: 'Check out my meme creation on the LBRY blockchain!',
url: 'https://spee.ch/' + directUrl,
hashtags: 'LBRYMemeFodder',
via: 'lbryio'
})
.then( function( el ) {
console.log('Tweet button added.');
});
// update the link holder
document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
// enable copy-to-clipboard
var copyBtn = document.querySelector('.copy-button');
copyBtn.addEventListener('click', function(event) {
// select the text
var text = document.getElementById('direct-link-holder');
text.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
alert('Oops, unable to copy');
}
});
});

View file

@ -14,8 +14,6 @@
</div>
</div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>

View file

@ -8,9 +8,6 @@
</div>
</div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>

View file

@ -8,7 +8,6 @@
<div class="col-md-12">
<h3>Congratulations, you found the /meme-fodder game</h3>
<p>Create a meme based on the current <i>lbry://meme-fodder</i> claims using the tool below. Got a masterpiece? <a href="https://twitter.com/hashtag/LBRYMemeFodder" target="_blank">Share it with the community</a> and see what they think!</p>
<p>Spee.ch/meme-fodder/play uses the free, public images at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
</div>
</div>
<div class="row">
@ -19,6 +18,7 @@
<img id="start-image" src="/meme-fodder" alt="a picture to make your meme with"/>
</div>
<div class="col-md-7">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<div class="row">
<div class="col-md-12">

View file

@ -7,6 +7,7 @@
<div class="row">
<div class="col-md-12">
<p>Below are the images published to /meme-fodder. Click one to choose it as your canvas.</p>
<p>Spee.ch/meme-fodder/play uses the free, public images at the claim <a href="lbry://meme-fodder">lbry://meme-fodder</a>. Want to put a different image on the chopping block? Go publish it!</p>
</div>
</div>
<div class="row">

View file

@ -12,8 +12,9 @@
</div>
<img id="image-preview" src="" height="200" alt="Image preview..."/>
</div>
<div id="publish-active-area" class="col-md-6">
<form>
<div class="col-md-6">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<div class="md-form">
<input type="text" id="publish-name" value="Name" class="form-control">
</div>
@ -31,7 +32,7 @@
<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
<button id="publish-submit">Publish</button>
<button id="publish-reset">Reset</button>
</form>
</div>
</div>
</div>
</div>