NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve import/export dialog, add copy export button

Browse source
This commit is contained in:
Neil Brommer 2017-12-29 13:29:00 -08:00
parent abed596f79
commit 333d5378ae
3 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -84,7 +84,7 @@
</div> </div>
<div id="importExportModal" class="modal fade" tabindex="-1" role="dialog"> <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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Import/Export</h5> <h5 class="modal-title">Import/Export</h5>
@ -95,11 +95,12 @@
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label for="exportText">Export</label> <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>
<div class="form-group"> <div class="form-group">
<label for="importText">Import</label> <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> </div>
<div class="modal-footer"> <div class="modal-footer">

30
js/importExport.js
View file

@ -1,12 +1,13 @@
$(document).ready(function () { $(document).ready(function () {
$("#importExportModal").on("shown.bs.modal", showBookmarkData); $("#importExportModal").on("shown.bs.modal", showBookmarkData);
$("#importExportModal").on("show.bs.modal", showImportModal);
$("#btnImportDialog").click(importBookmarks); $("#btnImportDialog").click(importBookmarks);
$("#copyExport").click(copyExport);
});
$("#exportText").click(function () { function showImportModal(e) {
$("#exportText").select(); $("#copyExportTxt").removeClass("text-success text-danger").addClass("text-muted").text("Copy");
}); }
});
function showBookmarkData() { function showBookmarkData() {
var openDBRequest = window.indexedDB.open("bookmarks"); var openDBRequest = window.indexedDB.open("bookmarks");
@ -116,3 +117,22 @@ function arrayContains(array, searchFor) {
return false; 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");
}
}

8
main.css
View file

@ -72,10 +72,18 @@ pre {
background: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.24);
} }
#exportText, #importText {
font-family: monospace;
}
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
textarea {
white-space: pre;
}
/* set the width of the main container based on element width */ /* set the width of the main container based on element width */
@media (max-width: 34em) { @media (max-width: 34em) {
#wrapper { #wrapper {