<p></p>
<p><b>@hlfan</b> commented on this pull request.</p>
<hr>
<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6192#discussion_r2219921721">app/assets/javascripts/leaflet.share.js</a>:</p>
<pre style='color:#555'>> + async function handleExportSuccess(fetchResponse) {
+ try {
+ const blob = await fetchResponse.response.blob();
+ const filename = OSM.i18n.t("javascripts.share.filename");
+ downloadBlob(blob, filename);
+ } catch (err) {
+ // eslint-disable-next-line no-alert
+ alert(OSM.i18n.t("javascripts.share.export_failed", { reason: "(blob error)" }));
+ }
+ }
+
+ async function handleExportError(event) {
+ let detailMessage;
+ try {
+ detailMessage = event?.detail?.error?.message;
+ if (!detailMessage) {
+ const responseText = await event.detail.fetchResponse.responseText;
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(responseText, "text/html");
+ detailMessage = doc.body ? doc.body.textContent.trim() : "(unknown)";
+ }
+ } catch (err) {
+ detailMessage = "(unknown)";
+ }
+ // eslint-disable-next-line no-alert
+ alert(OSM.i18n.t("javascripts.share.export_failed", { reason: detailMessage }));
+ }
+
+ $("#export-image").on("turbo:submit-end", async function (event) {
+ if (event.detail.success) {
+ await handleExportSuccess(event.detail.fetchResponse);
+ } else {
+ await handleExportError(event);
+ }
+ });
</pre>
<p dir="auto">I found having the logic in a Promise pipeline rather than split over three async functions easier to follow:</p>
<div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"> <span class="pl-k">function</span> <span class="pl-en">extractTextFromHTML</span><span class="pl-kos">(</span><span class="pl-s1">htmlString</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-s1">parser</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">DOMParser</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">doc</span> <span class="pl-c1">=</span> <span class="pl-s1">parser</span><span class="pl-kos">.</span><span class="pl-en">parseFromString</span><span class="pl-kos">(</span><span class="pl-s1">htmlString</span><span class="pl-kos">,</span> <span class="pl-s">"text/html"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">return</span> <span class="pl-s1">doc</span><span class="pl-kos">.</span><span class="pl-c1">body</span> ? <span class="pl-s1">doc</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span><span class="pl-kos">.</span><span class="pl-en">trim</span><span class="pl-kos">(</span><span class="pl-kos">)</span> : <span class="pl-s">"(unknown)"</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">notifyExportFailure</span><span class="pl-kos">(</span><span class="pl-s1">reason</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// eslint-disable-next-line no-alert</span>
<span class="pl-en">alert</span><span class="pl-kos">(</span><span class="pl-c1">OSM</span><span class="pl-kos">.</span><span class="pl-c1">i18n</span><span class="pl-kos">.</span><span class="pl-en">t</span><span class="pl-kos">(</span><span class="pl-s">"javascripts.share.export_failed"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> reason <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">"#export-image"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">"turbo:submit-end"</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> detail <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">detail</span><span class="pl-kos">.</span><span class="pl-c1">success</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">detail</span><span class="pl-kos">.</span><span class="pl-c1">fetchResponse</span><span class="pl-kos">.</span><span class="pl-c1">response</span><span class="pl-kos">.</span><span class="pl-en">blob</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">downloadBlob</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-en">notifyExportFailure</span><span class="pl-kos">(</span><span class="pl-s">"(blob error)"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
<span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">detail</span><span class="pl-kos">?.</span><span class="pl-c1">error</span><span class="pl-kos">?.</span><span class="pl-c1">message</span> <span class="pl-c1">||</span> <span class="pl-s1">detail</span><span class="pl-kos">.</span><span class="pl-c1">fetchResponse</span><span class="pl-kos">.</span><span class="pl-c1">responseText</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">extractTextFromHTML</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">notifyExportFailure</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-en">notifyExportFailure</span><span class="pl-kos">(</span><span class="pl-s">"(unknown)"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This requires <code class="notranslate">OSM.i18n.t("javascripts.share.filename")</code> to be inside <code class="notranslate">downloadBlob</code>.</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/6192#pullrequestreview-3039204058">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLMM3MQ5K4HULKA4BND3JUUYXAVCNFSM6AAAAACBNKWLDGVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTAMZZGIYDIMBVHA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJAT6NVXWCZ4KKCFD33JUUYXA5CNFSM6AAAAACBNKWLDGWGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTVVE2JNU.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/6192/review/3039204058</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/6192#pullrequestreview-3039204058",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/6192#pullrequestreview-3039204058",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>