added copy to clipboard button

public/assets/css/style.css

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

public/assets/js/claimPublish.js

@@ -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
+	// update the link holder
-	twttr.widgets
+	document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
-		.createShareButton(
+	// enable copy-to-clipboard
-			document.getElementById('tweet-meme-button'),
+	var copyBtn = document.querySelector('.copy-button');
-			{
+	copyBtn.addEventListener('click', function(event) {
-				text: 'Check out my image, hosted for free on the distributed awesomeness that is the LBRY blockchain!',
+		// select the text
-				url: 'https://spee.ch/' + directUrl,
+		var text = document.getElementById('direct-link-holder');
-				hashtags: 'LBRY',
+		text.select();
-				via: 'lbryio'
+		try {
-			})
+			var successful = document.execCommand('copy');
-		.then( function( el ) {
+			var msg = successful ? 'successful' : 'unsuccessful';
-			console.log('Tweet button added.');
+			console.log('Copying text command was ' + msg);
-		});
+		} catch (err) {
+			alert('Oops, unable to copy');
+		}
+	});
 });

public/assets/js/memePublish.js

@@ -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
+	// update the link holder
-	twttr.widgets
+	document.getElementById('direct-link-holder').innerHTML = 'https://spee.ch' + directUrl;
-		.createShareButton(
+	// enable copy-to-clipboard
-			document.getElementById('tweet-meme-button'),
+	var copyBtn = document.querySelector('.copy-button');
-			{
+	copyBtn.addEventListener('click', function(event) {
-				text: 'Check out my meme creation on the LBRY blockchain!',
+		// select the text
-				url: 'https://spee.ch/' + directUrl,
+		var text = document.getElementById('direct-link-holder');
-				hashtags: 'LBRYMemeFodder',
+		text.select();
-				via: 'lbryio'
+		try {
-			})
+			var successful = document.execCommand('copy');
-		.then( function( el ) {
+			var msg = successful ? 'successful' : 'unsuccessful';
-			console.log('Tweet button added.');
+			console.log('Copying text command was ' + msg);
-		});
+		} catch (err) {
+			alert('Oops, unable to copy');
+		}
+	});
 });

views/index.handlebars

@@ -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>
 

views/memeFodder.handlebars

@@ -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>
 

views/partials/memeFodderMaker.handlebars

@@ -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">

views/partials/memeFodderResults.handlebars

@@ -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">

views/partials/publish.handlebars

@@ -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">
+				<div class="col-md-6">
-					<form>
+					<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>