Allow for shareable links

README.md

@@ -13,7 +13,3 @@ Built with jQuery and Bootstrap. In hindsight I wish I had started this project
 - Install `sass` globally by running `npm i sass -g`
 - Run `npm run watch:ts` and `npm run watch:sass` in separate processes to compile TypeScript and SCSS as files are changed
 - Run `npm run build` to generate a prod-ready minified version of the app
-
-## TODO Items
-
-- Settings as shareable links with query string params

app/index.html

@@ -1251,6 +1251,13 @@ <h1 class="modal-title fs-5" id="modal-code-title">Your Texture Code</h1>
             ></button>
           </div>
           <div class="modal-body">
+            <div class="form-control-wrapper">
+              <button type="button" class="btn btn-secondary" id="btn-copy-sharable-link">
+                <i class="bi bi-link"></i>
+                Copy Sharable Link
+              </button>
+            </div>
+
             <div class="form-control-wrapper">
               <label class="form-label" for="code-html">HTML</label>
               <textarea
@@ -1300,7 +1307,7 @@ <h1 class="modal-title fs-5" id="modal-code-title">Your Texture Code</h1>
                 id="code-usage"
               >
 &lt;div class="bg-texture"&gt;
-This element has a cool background!
+  This element has a cool background!
 &lt;/div&gt;</textarea
               >
               <button
@@ -1317,6 +1324,26 @@ <h1 class="modal-title fs-5" id="modal-code-title">Your Texture Code</h1>
       </div>
     </div>
 
+    <div class="toast-container pt-3 position-fixed top-0 start-50 translate-middle-x">
+      <div
+        id="toast-template"
+        class="toast align-items-center"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="d-flex">
+          <div class="toast-body">Copied!</div>
+          <button
+            type="button"
+            class="btn-close btn-close-white me-2 m-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+          ></button>
+        </div>
+      </div>
+    </div>
+
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.slim.min.js"
       integrity="sha512-5NqgLBAYtvRsyAzAvEBWhaW+NoB+vARl6QiA02AFMhCWvPpi7RWResDcTGYvQtzsHVCfiUhwvsijP+3ixUk1xw=="

src/helpers.ts

@@ -68,3 +68,52 @@ function scrollElementIntoView(el: HTMLElement) {
     el.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
 }
+
+//----------------------------------------------------
+//Toast
+function showToast(state: string, message: string) {
+  const $toastTemplate = $('#toast-template');
+  const $newToast = $toastTemplate.clone();
+  $newToast
+    .removeAttr('id')
+    .addClass(`text-bg-${state}`)
+    .appendTo($toastTemplate.parent())
+    .find('.toast-body')
+    .text(message);
+
+  const newToastEl = $newToast.get(0)!;
+
+  bootstrap.Toast.getOrCreateInstance(newToastEl).show();
+
+  newToastEl.addEventListener('hidden.bs.toast', () => {
+    newToastEl.remove();
+  });
+}
+
+//----------------------------------------------------
+//Sharable link
+function getShareableLink(): string {
+  const values = serializeControls(true);
+  const qs = Object.values(values)
+    .map((o) => `${o.id}=${encodeURIComponent(o.value)}`)
+    .join('&');
+
+  return `${location.origin + location.pathname}?${qs}`;
+}
+
+function applySettingsFromUrl(): void {
+  const settings = new URLSearchParams(location.search);
+  if (settings) {
+    settings.forEach((value, key) => {
+      if (/^(true|false)$/.test(value)) {
+        $('#' + ctrlIdPrefix + key)
+          .prop('checked', /^true$/i.test(value))
+          .trigger(inputEventName);
+      } else {
+        $('#' + ctrlIdPrefix + key)
+          .val(value)
+          .trigger(inputEventName);
+      }
+    });
+  }
+}

src/main.ts

@@ -126,14 +126,38 @@ $(() => {
   $('.btn-copy').on('click', (event) => {
     const tgtSelector = $(event.target).data('target');
     if (tgtSelector) {
-      navigator.clipboard.writeText($(tgtSelector).get(0).value).then(
-        () => {},
+      const $tgtEl = $(tgtSelector);
+      navigator.clipboard.writeText($tgtEl.get(0).value).then(
         () => {
-          alert('could not copy text, please select and copy it manually!');
+          const labelTxt = $tgtEl.siblings('label').text();
+          showToast('success', labelTxt + ' Code Copied!');
+        },
+        () => {
+          showToast('danger', 'could not copy text, please select and copy it manually!');
         }
       );
     }
   });
+
+  $('#btn-copy-sharable-link').on('click', () => {
+    const link = getShareableLink();
+    window.history.replaceState(null, document.title, link);
+    navigator.clipboard.writeText(link).then(
+      () => {
+        showToast('success', 'Link Copied!');
+      },
+      () => {
+        showToast(
+          'danger',
+          'could not copy link! It has been set as the current URL, please select that and copy it manually'
+        );
+      }
+    );
+  });
+
+  //----------------------------------------------------
+  //If the URL contains settings to apply, apply them
+  applySettingsFromUrl();
 });
 
 function updateTexture(

src/presets.ts

@@ -1,7 +1,12 @@
-function serializeControls(): IPresetSetting[] {
+function serializeControls(includeSize = false): IPresetSetting[] {
   //used to log out the current values to the console to manually save as presets
+  let excludeFilter = ':not(:disabled)';
+  if (!includeSize) {
+    excludeFilter += ':not(#ctrl-enable-custom-size)';
+  }
+
   return $controls
-    .filter(':not(:disabled):not(#ctrl-enable-custom-size)')
+    .filter(excludeFilter)
     .toArray()
     .map((el) => {
       let value: IPresetValue = el.value;