From 333d5378ae688336546f24d6f0041279339ed88c Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Fri, 29 Dec 2017 13:29:00 -0800
Subject: [PATCH] Improve import/export dialog, add copy export button

---
 index.html         |  7 ++++---
 js/importExport.js | 30 +++++++++++++++++++++++++-----
 main.css           |  8 ++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f3b4c3d..f92e970 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
 	</div>
 
 	<div id="importExportModal" class="modal fade" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
+		<div class="modal-dialog modal-lg" role="document">
 			<div class="modal-content">
 				<div class="modal-header">
 					<h5 class="modal-title">Import/Export</h5>
@@ -95,11 +95,12 @@
 				<div class="modal-body">
 					<div class="form-group">
 						<label for="exportText">Export</label>
-						<textarea id="exportText" class="form-control" rows="4"></textarea>
+						<a id="copyExport" href="#" class="text-muted float-right"><small id="copyExportTxt">Copy</small></a>
+						<textarea id="exportText" class="form-control" rows="8" readonly="readonly"></textarea>
 					</div>
 					<div class="form-group">
 						<label for="importText">Import</label>
-						<textarea id="importText" class="form-control" rows="4"></textarea>
+						<textarea id="importText" class="form-control" rows="8" placeholder="Paste here"></textarea>
 					</div>
 				</div>
 				<div class="modal-footer">
diff --git a/js/importExport.js b/js/importExport.js
index ab66812..00a474d 100644
--- a/js/importExport.js
+++ b/js/importExport.js
@@ -1,13 +1,14 @@
 $(document).ready(function () {
 	$("#importExportModal").on("shown.bs.modal", showBookmarkData);
-
+	$("#importExportModal").on("show.bs.modal", showImportModal);
 	$("#btnImportDialog").click(importBookmarks);
-
-	$("#exportText").click(function () {
-		$("#exportText").select();
-	});
+	$("#copyExport").click(copyExport);
 });
 
+function showImportModal(e) {
+	$("#copyExportTxt").removeClass("text-success text-danger").addClass("text-muted").text("Copy");
+}
+
 function showBookmarkData() {
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
@@ -116,3 +117,22 @@ function arrayContains(array, searchFor) {
 
 	return false;
 }
+
+function copyExport(e) {
+	e.preventDefault();
+
+	var exportBox = $("#exportText");
+	var copyLink = $("#copyExportTxt");
+	exportBox.select();
+
+	try {
+		var successful = document.execCommand("copy");
+		if (successful) {
+			copyLink.removeClass("text-muted").addClass("text-success").text("Copied successfully!");
+		} else {
+			copyLink.removeClass("text-muted").addClass("text-danger").text("Copy failed");
+		}
+	} catch (err) {
+		copyLink.removeClass("text-muted").addClass("text-danger").text("Copy failed");
+	}
+}
diff --git a/main.css b/main.css
index 73365d5..fb28433 100644
--- a/main.css
+++ b/main.css
@@ -72,10 +72,18 @@ pre {
 	background: rgba(255, 255, 255, 0.24);
 }
 
+#exportText, #importText {
+	font-family: monospace;
+}
+
 .clickable {
 	cursor: pointer;
 }
 
+textarea {
+	white-space: pre;
+}
+
 /* set the width of the main container based on element width */
 @media (max-width: 34em) {
 	#wrapper {