added copy to clipboard button
This commit is contained in:
bill bittner
parent
88d217cb2c
commit
a5256c27f5
8 changed files with 45 additions and 43 deletions
|
|
@ -15,11 +15,6 @@ canvas {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#tweet-meme-button {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 10px 0px 10px 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue