From 8cca752ca55b4aaa5ccedcb2689589e0f2eab1ff Mon Sep 17 00:00:00 2001
From: Malik <75104021+7malikk@users.noreply.github.com>
Date: Tue, 31 Jan 2023 22:13:36 +0100
Subject: [PATCH] share map fixes (#1342)

---
 dist/leaflet.distortableimage.js |  2 +-
 examples/archive.html            | 42 ++++++++++++++++++++++++++++++--
 examples/js/archive.js           |  9 ++++++-
 3 files changed, 49 insertions(+), 4 deletions(-)
diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
index 4656b03d1..c08eb0bcc 100644
--- a/dist/leaflet.distortableimage.js
+++ b/dist/leaflet.distortableimage.js
@@ -7382,7 +7382,7 @@ module.exports.formatError = function (err) {
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "1e418f5ca41270afddc1"; }
+/******/ 		__webpack_require__.h = function() { return "f092abeccbe27f7dca1d"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
diff --git a/examples/archive.html b/examples/archive.html
index f715fbebe..8e02f3914 100644
--- 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
index 9c86d5d6d..71872f475 100644
--- 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();
     }
-});
\ No newline at end of file
+})
+
+// share map modal
+const shareModal = document.getElementById('shareModal')
+const modality =  new bootstrap.Modal(shareModal)
+shareMapBtn.addEventListener('click', () => {
+  bootstrap.Modal.getInstance(shareModal).show()
+})
\ No newline at end of file
