add copysharelink beside editlink

includes basic implementation of a modal window

index.html

@@ -22,6 +22,7 @@ <h1><a href='index.html'>Primerpedia</a></h1>
 		<h2 id='article-title' style='display:none'>
 			<a id='viewlink' href=''></a>
 			<div class='actionlink-container'>
+				<a id='copysharelink' class='actionlink' href='#' title='copy share URL'>&#128203;</a>
 				<a id='editlink' class='actionlink' href='' title='improve this!'>✎</a>
 			</div>
 		</h2>
@@ -56,6 +57,9 @@ <h2 id='article-title' style='display:none'>
 				</object>
 			</a>
 		</div>
+		<div id='copyModal' style='display: none'>
+			<input id='copyShareLinkInput' type='text' />
+		</div>
 		<script src='primerpedia.js'></script>
 	</body>
 </html>

primerpedia.js

@@ -29,9 +29,12 @@ var searchButton = null;
 var contentDivElement = null;
 var viewLinkElem = null;
 var editLinkElement = null;
+var copyShareLinkElement = null;
 var articleTitleElement = null;
 var licenseIconElement = null;
 var infoIconElement = null;
+var copyShareLinkInputElement = null;
+var copyModal = null;
 
 function random() {
 	searchTermInputElement.value = "";
@@ -103,15 +106,19 @@ function getShareableLink(search) {
 function renderSearchResult(jsonObject) {
 	var pageid = jsonObject.query.pageids[0];
 	var article = jsonObject.query.pages[pageid];
-	article.url = "https://en.wikipedia.org/wiki/" + encodeURIComponent(article.title);
+	var encodedArticleTitle = encodeURIComponent(article.title);
+	article.url = "https://en.wikipedia.org/wiki/" + encodedArticleTitle;
 	var editlink = article.url + "?action=edit&section=0";
+	var shareLink = window.location.href;
 
 	viewLinkElem.textContent = article.title;
 	viewLinkElem.setAttribute("href", article.url);
 
 	editLinkElement.setAttribute("href", editlink);
 	toggleVisibility(articleTitleElement, true);
 
+	copyShareLinkInputElement.value = getShareableLink(encodedArticleTitle);
+
 	contentDivElement = clearNode(contentDivElement);
 	contentDivElement.innerHTML = article.extract;
 
@@ -223,9 +230,12 @@ window.onload = function () {
 	contentDivElement = document.getElementById("content");
 	viewLinkElem = document.getElementById("viewlink");
 	editLinkElement = document.getElementById("editlink");
+	copyShareLinkElement = document.getElementById("copysharelink");
 	articleTitleElement = document.getElementById("article-title");
 	licenseIconElement = document.getElementById("license-icon");
 	infoIconElement = document.getElementById("info-icon");
+	copyShareLinkInputElement = document.getElementById("copyShareLinkInput");
+	copyModal = document.getElementById("copyModal");
 
 	var queryParam = getQueryVariable("search");
 
@@ -249,6 +259,23 @@ window.onload = function () {
 		updateSearchButtonEnabledState();
 	});
 
+	copyShareLinkElement.addEventListener("click", function () {
+		// this should allways be true, but doesn't hurt to check
+		if(copyShareLinkInputElement instanceof HTMLInputElement) {
+			toggleVisibility(copyModal, true);
+
+			// clipboard interaction is a dodgy thing
+			// this should prevent the worst things where browser support
+			// or permissions are missing
+			try {
+				copyShareLinkInputElement.select(); // select the contents of the input
+				document.execCommand("copy"); // copy the selection into the clipboard
+			} catch(e) {
+			}
+
+			toggleVisibility(copyModal, false);
+		}
+	});
 };
 
 window.onpopstate = function () {