share map fixes (#1342)

publiclab · Jan 31, 2023 · 8cca752 · 8cca752
1 parent 8394981
commit 8cca752
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
diff --git a/examples/archive.html b/examples/archive.html
@@ -25,7 +25,7 @@
  <script src="./js//modules/paginator.js" type="module" defer></script>
 </head>
 <body style="margin:0;">
-
+ <!--Welcome Modal-->
  <div class="modal fade" id="welcomeModal" aria-labelledby="exampleModalLabel" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content bg-light">
@@ -58,6 +58,42 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
  </div>
  </div>
  </div>
+
+ <!-- Share Map Modal -->
+ <div class="modal fade" id="shareModal" aria-labelledby="shareModalLabel" tabindex="-1" aria-hidden="true" >
+ <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable " >
+ <div class="modal-content bg-light">
+ <div class="modal-header d-block">
+ <div class="d-flex justify-content-between align-items-center">
+ <h2 class="modal-title">Share Map</h2>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
+ </div>
+ </div>
+ <div class="modal-body">
+ <h4>Share via URL</h4>
+ <p>To share a map via URL, 
+ you'll need to upload your saved map JSON file somewhere
+ publicly accessible online. 
+ </p> <p>
+ The <b> easiest way is to upload your json file</b>
+ into the same <a href="https://archive.org/create/" target="_blank">Archive.org</a> collection as your images.
+ </p>
+ <p> Then when you open that collection in MapKnitter Lite, 
+ it will auto-detect your saved map and place images as 
+ you had them.</p>
+
+ <h4>Share via email</h4>
+ <p>
+ You can also share your saved map file via email.
+ </p>
+ <p>
+ Anyone with the file can drag it onto MapKnitter Lite,
+ and it will fetch and place all the images you've saved.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
 
  <i title="Open Sidebar" id="mapToggle" class="fa fa-bars fa-3x " style="position: absolute; right: 0; top:30px; margin: 1rem; z-index: 900; color: white; cursor: pointer;" aria-hidden="true"></i>
 
@@ -69,6 +105,9 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
  <button id="saveMap" type="button" class="btn btn-sm" aria-label="Save map" title="Save map in JSON format" >
  <i class="fa fa-save fa-" style="font-size:24px" ></i>
  </button>
+ <button id="shareMapBtn" type="button" class="btn btn-sm" aria-label="Share map" title="Share map " >
+ <i class="fa fa-share-alt fa-" style="font-size:24px" ></i>
+ </button>
  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" title="Close Sidebar" ></button>
  </div>
  <hr>
@@ -88,7 +127,6 @@ <h3 id="offcanvasRightLabel">Images</h3>
  </button>
  </div>
  </div>
-
 </body>
 </html>
 

diff --git a/examples/js/archive.js b/examples/js/archive.js
@@ -300,4 +300,11 @@ saveMap.addEventListener('click', () => {
  a.download = fileName ? fileName + '.json' : 'MapknitterLite.json';
  a.click();
  }
-});
+})
+
+// share map modal
+const shareModal = document.getElementById('shareModal')
+const modality = new bootstrap.Modal(shareModal)
+shareMapBtn.addEventListener('click', () => {
+ bootstrap.Modal.getInstance(shareModal).show()
+})