Simplify 'share' link in results.

- Remove the unreliable screenshot sharing hack.
- Replace it with a share link/icon that invokes the share intent for the entry URL.

Author: knadh

site/base.html

@@ -97,6 +97,6 @@ <h4>{{ i18n.public_submitTitle | default(value="Comments") }}</h4>
 </div>
 </form>
 
-<script type="module" src="/static/_bundle.js?f=autocomp.js&f=share.js&f=main.js&v={{ asset_ver }}"></script>
+<script type="module" src="/static/_bundle.js?f=autocomp.js&f=main.js&v={{ asset_ver }}"></script>
 </body>
 </html>

site/results.html

@@ -6,7 +6,8 @@
     <div class="eight columns">
         <ol class="entries">
             {% for r in results.entries | slice(end=num_results) %}
-            <li class="entry" id="{{ r.guid }}" data-guid="{{ r.guid }}" data-head="{{ r.content | join(sep=", ") }}">
+            {% set shareGuid = "s" ~ r.guid | split(pat="-") | first %}
+            <li class="entry" id="{{ shareGuid }}" data-head="{{ r.content | join(sep=", ") }}" data-lang="{{ r.lang }}">
                 <header class="head">
                     <div>
                         <h3 class="title">{{ r.content | join(sep=", ") }}</h3>
@@ -29,8 +30,7 @@ <h3 class="title">{{ r.content | join(sep=", ") }}</h3>
                             {% if consts.enable_submissions %}
                             <a href="#" data-from="{{ r.guid }}" class="edit" title="{{ i18n.public_suggestEdit }}"><img src="/static/edit.svg?v={{ asset_ver }}" alt="{{ i18n.public_suggestEdit }}"></a>
                             {% endif %}
-                            <a href="#{{ r.guid }}" title="Share link" class="link"><img src="/static/link.svg?v={{ asset_ver }}" alt="Share link"></a>
-                            <a href="#" title="Share screenshot" class="export" data-guid="{{ r.guid }}"><img src="/static/export.svg?v={{ asset_ver }}" alt="Share screenshot"></a>
+                            <a href="#{{ shareGuid }}" data-share-guid="{{ shareGuid }}" title="Share link"><img src="/static/share.svg?v={{ asset_ver }}" alt="Share link"></a>
                         </div>
                     </div>
                 </header>
@@ -56,7 +56,7 @@ <h3 class="title">{{ r.content | join(sep=", ") }}</h3>
                                 </li>
                         {%- endif %}
 
-                        <li><div data-guid="{{ d.guid }}" class="def">
+                        <li><div data-guid="{{ d.guid }}" class="def" data-lang="{{ d.lang }}">
                             {{ d.content | join(sep=", ") }}
                             {% if d.content_length > max_content_items or d.meta.synonyms %}
                                 <a href="#" class="more-toggle" data-id="{{ r.guid }}-{{ d.guid }}" title="{{ i18n.public_viewMore | default(value="View more") }}"

site/static/export.svg

@@ -1,15 +1,3 @@
-async function screenshotElement(element) {
-  const canvas = await html2canvas(element);
-  canvas.toBlob(blob => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'screenshot.png';
-    a.click();
-    URL.revokeObjectURL(url);
-  });
-}
-
 (() => {
   const elForm = document.querySelector("form.search-form");
   const elQ = document.querySelector("#q");
@@ -127,33 +115,6 @@ async function screenshotElement(element) {
   elQ.select();
 })();
 
-// Screenshot sharing.
-(() => {
-  document.querySelectorAll("a.export").forEach((el) => {
-    el.onclick = async (e) => {
-      e.preventDefault();
-      const guid = el.dataset.guid;
-      const entryEl = document.querySelector(`.entry[data-guid='${guid}']`);
-      if (!entryEl) {
-        alert("Could not find entry to export");
-        return;
-      }
-
-      const title = entryEl.dataset.head;
-      // Make the filename by stripping spaces from the head word(s).
-      const filename = title.replace(/\s+/g, "_").toLowerCase();
-
-      try {
-        await shareDOM(entryEl, `${title} meaning`, `${localStorage.from_lang} to ${localStorage.to_lang} meaning\n\n${window.location.href}`, `${filename}.png`);
-      } catch (err) {
-        console.error("Error sharing entry:", err);
-        alert(`Error sharing entry: ${err?.message || err}`);
-      }
-    };
-  });
-})();
-
-
 // Submission form.
 (() => {
   function filterTypes(e) {
@@ -250,7 +211,7 @@ async function screenshotElement(element) {
 
 // Autocomplete.
 (() => {
-  if(!autocomp) {
+  if (!autocomp) {
     return;
   }
 
@@ -265,13 +226,13 @@ async function screenshotElement(element) {
       clearTimeout(debounce);
       return new Promise(resolve => {
         debounce = setTimeout(async () => {
-            const response = await fetch(`${_ROOT_URL}/api/autocomplete/${langCode}/${val}`);
-            const data = await response.json();
+          const response = await fetch(`${_ROOT_URL}/api/autocomplete/${langCode}/${val}`);
+          const data = await response.json();
 
-            const suggestions = data.data.map(item => item.content[0]);
+          const suggestions = data.data.map(item => item.content[0]);
 
-            debounce = null;
-            resolve(suggestions);
+          debounce = null;
+          resolve(suggestions);
         }, 50);
       });
     },
@@ -287,3 +248,36 @@ async function screenshotElement(element) {
     }
   });
 })();
+
+// Share link (.share-link) that invokes web share API.
+(() => {
+  window.setTimeout(() => {
+    // For some reason, page doesn't scroll to hash on load. Do it manually.
+    if (window.location.hash) {
+      document.querySelector(window.location.hash)?.scrollIntoView();
+    }
+  }, 100);
+
+  if (!navigator.share) {
+    return;
+  }
+
+  document.querySelectorAll("a[data-share-guid]").forEach((el) => {
+    el.onclick = async (e) => {
+      e.preventDefault();
+
+      const def = document.querySelector(`#${el.dataset.shareGuid} .def:first-child`);
+      const data = {
+        title: `${document.getElementById(el.dataset.shareGuid).dataset.head} ${def.dataset.lang} meaning`,
+        text: `${def.innerText}`,
+        url: `${el.href}`,
+      };
+
+      try {
+        await navigator.share(data);
+      } catch (err) {
+        alert(`error sharing link: ${err?.message || err}`);
+      }
+    };
+  });
+})();