share map fixes (#1342)

7malikk · web-flow · commit 8cca752ca55b · 2023-01-31T16:13:36.000-05:00
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()
+})
