Sharing mechanism update: Removed old URL params and added copy to clipboard functionality (Issue #20)

README.md

@@ -70,9 +70,10 @@ To set up and run the project on your local environment, navigate to the `client
 
 Many thanks to the following contributors who have helped shape this project:
 
-| Avatar                                                                                                      | Name                | GitHub Profile                            |
-| ----------------------------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------- |
-| <img src="https://avatars.githubusercontent.com/u/8635605?v=4" width="60" height="60" alt="Ross Hill">      | **Ross Hill**       | [rosslh](https://github.com/rosslh)       |
-| <img src="https://avatars.githubusercontent.com/u/122646?v=4" width="60" height="60" alt="Joseph Weissman"> | **Joseph Weissman** | [jweissman](https://github.com/jweissman) |
+| Avatar                                                                                                             | Name                     | GitHub Profile                                                              |
+| ------------------------------------------------------------------------------------------------------------------ | ------------------------ | --------------------------------------------------------------------------- |
+| <img src="https://avatars.githubusercontent.com/u/8635605?v=4" width="60" height="60" alt="Ross Hill">             | **Ross Hill**            | [rosslh](https://github.com/rosslh)                                         |
+| <img src="https://avatars.githubusercontent.com/u/122646?v=4" width="60" height="60" alt="Joseph Weissman">        | **Joseph Weissman**      | [jweissman](https://github.com/jweissman)                                   |
+| <img src="https://avatars.githubusercontent.com/u/78155393?v=4" width="60" height="60" alt="Shubhankar Shandilya"> | **Shubhankar Shandilya** | [shubhankar-shandilya-india](https://github.com/shubhankar-shandilya-india) |
 
 Want to contribute? Check out the list of [open issues](https://github.com/rosslh/Mandelbrot.site/issues)!

client/html/index.html

@@ -219,15 +219,9 @@ <h1 class="navHeading">
         <span class="shortcutHint">H</span>ide/Show UI
       </button>
       <div class="inputSeparator mobileHidden"></div>
-      <a
-        id="shareLink"
-        class="mobileHidden"
-        href="/?re=0&im=0&z=3&i=200&sharing=true"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <button id="share-button" class="mobileHidden" type="button">
         Share this view
-      </a>
+      </button>
     </div>
     <div id="attribution" class="mobileHidden">
       <a

client/js/MandelbrotMap.ts

@@ -138,9 +138,6 @@ class MandelbrotMap extends L.Map {
       position.z
     );
 
-    (
-      document.getElementById("shareLink") as HTMLAnchorElement
-    ).href = `?re=${re}&im=${im}&z=${position.z}&i=${config.iterations}&e=${config.exponent}&c=${config.colorScheme}&r=${config.reverseColors}&sharing=true`;
   };
 
   private complexPartsToLatLng(re: number, im: number, z: number) {

client/js/main.ts

@@ -221,6 +221,25 @@ function handleHideShowUiButton() {
   };
 }
 
+function handleShareButton() {
+  const shareButton = document.getElementById(
+    "share-button"
+  ) as HTMLButtonElement;
+
+  const updateShareButtonText = (text: string) => {
+    shareButton.innerText = text;
+  };
+
+  shareButton.onclick = () => {
+    const url = `${window.location.host}?re=${config.re}&im=${config.im}&z=${config.zoom}&i=${config.iterations}&e=${config.exponent}&c=${config.colorScheme}&r=${config.reverseColors}`;
+
+    navigator.clipboard.writeText(url).then(() => {
+      updateShareButtonText("Link copied!");
+      setTimeout(() => updateShareButtonText("Share this view"), 3000);
+    });
+  };
+}
+
 function handleFullScreen() {
   const toggleFullScreen = () => {
     if (document.fullscreenElement) {
@@ -328,6 +347,9 @@ function handleDom(map: MandelbrotMap) {
   });
 
   handleHideShowUiButton();
+
+  handleShareButton();
+
   handleShortcutHints();
 
   const toggleFullScreen = handleFullScreen();
@@ -344,7 +366,6 @@ const setConfigFromUrl = (map: MandelbrotMap) => {
   const exponent = queryParams.get("e");
   const colorScheme = queryParams.get("c");
   const reverseColors = queryParams.get("r");
-  const sharing = queryParams.get("sharing");
 
   if (re && im && zoom) {
     config.re = Number(re);
@@ -371,16 +392,7 @@ const setConfigFromUrl = (map: MandelbrotMap) => {
       (document.getElementById("reverseColors") as HTMLInputElement).checked =
         config.reverseColors;
     }
-
-    if (sharing) {
-      window.history.replaceState(
-        {},
-        document.title,
-        window.location.href.replace("&sharing=true", "")
-      );
-    } else {
-      window.history.replaceState({}, document.title, window.location.pathname);
-    }
+    window.history.replaceState({}, document.title, window.location.pathname);
 
     if (
       config.re !== configDefaults.re &&