Unify permalink generation & copy #4

index.html

@@ -40,14 +40,10 @@
 	<div id="site-options" class="flex-parent">
 		<a id="csvDownload" href="#"><button class="csvBtn" type="button">Download CSV</button></a>
 
-		<form id="plink-form">
+		<div id="plink-form">
 			<input id="plink" type="text" value=""></input>
-			<input class="getPlink"type="button" value="Get Permalink"
-						onclick="
-						document.getElementById('plink').value = genPermalink();
-						document.getElementById('plink').select();
-						"></input>
-		</form>
+			<button class="getPlink" type="button" onclick= genPermalink();>Get Permalink</button>
+		</div>
 	</div>
 
 	<div id="site-details">

js/main.js

@@ -213,23 +213,14 @@ function genPermalink(){
 		if(!whichBuildings[i])
 		disabledBuildings += i;
 	}
-	return URLComponents[0]+"?"+startStr+"+"+endStr+"+"+disabledBuildings;
-}
-
-// Browser notifying permalink has been copied
-$('.getPlink').click(function(event) {
-	$('#plink').focus();
-	$('#plink').select();
-
-	try {
-		var successful = document.execCommand('copy');
-		var message = successful? 'successfully' : 'unsuccessfully';
-		window.alert("Link copied successfully and ready to be pasted!")
-	} catch(err) {
-		console.log("link copying failed");
-	}	
-});
+	var permalink = URLComponents[0]+"?"+startStr+"+"+endStr+"+"+disabledBuildings;
 
+	//Copies permalink and puts permalink in text box next to the button
+	var plinkTextField = document.getElementById('plink');
+	plinkTextField.value = permalink;
+	plinkTextField.select();
+	document.execCommand('copy');
+}
 
 $('#csvDownload').click(function () {
 	//prepares and then downloads a csv file based on what is currently shown in the chart