From e9db1f4ded10e9cac9ec50b0142bcda6fc1cd7c0 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 15:02:31 +0100
Subject: [PATCH] front: add an external link icon to external links

---
 src/assets/scss/base.scss                     |  2 +-
 .../views/scripts/ExternalLinkIcons.svelte    | 32 +++++++++++++++++++
 .../views/templates/BaseTemplate.svelte       |  3 ++
 .../views/templates/CommonScripts.svelte      |  5 +++
 .../views/templates/ErrorTemplate.svelte      |  3 ++
 test/assets/views/design.svelte               |  2 +-
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/views/scripts/ExternalLinkIcons.svelte
 create mode 100644 src/assets/views/templates/CommonScripts.svelte

diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
index a98f1d3..22ae0fc 100644
--- a/src/assets/scss/base.scss
+++ b/src/assets/scss/base.scss
@@ -155,7 +155,7 @@ h1 {
 a {
 	text-decoration: none;
 
-	.icon.feather-external-link { //todo add js
+	.icon.lucide-external-link { //todo add js
 		--icon-size: 16px;
 		margin-left: 4px;
 		margin-top: -3px;
diff --git a/src/assets/views/scripts/ExternalLinkIcons.svelte b/src/assets/views/scripts/ExternalLinkIcons.svelte
new file mode 100644
index 0000000..62f0a81
--- /dev/null
+++ b/src/assets/views/scripts/ExternalLinkIcons.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import Icon from "../utils/Icon.svelte";
+
+    let iconTemplate: HTMLTemplateElement;
+
+    function addExternalLinkIcons(): void {
+        console.log('Add icons to external links...');
+
+        const iconElement = iconTemplate.childNodes.item(0);
+
+        document.querySelectorAll('a[target="_blank"]').forEach(el => {
+            if (!el.classList.contains('no-icon')) {
+                el.appendChild(iconElement.cloneNode(true));
+            }
+        });
+    }
+
+    onMount(() => {
+        addExternalLinkIcons();
+    });
+</script>
+
+<style>
+    div {
+        display: none;
+    }
+</style>
+
+<div bind:this={iconTemplate}>
+    <Icon name="external-link"/>
+</div>
diff --git a/src/assets/views/templates/BaseTemplate.svelte b/src/assets/views/templates/BaseTemplate.svelte
index 4d10962..755d987 100644
--- a/src/assets/views/templates/BaseTemplate.svelte
+++ b/src/assets/views/templates/BaseTemplate.svelte
@@ -2,6 +2,7 @@
     import FlashMessages from "../components/FlashMessages.svelte";
     import BaseFooter from "./base/BaseFooter.svelte";
     import BaseHeader from "./base/BaseHeader.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     export let title: string;
     export let h1: string = title;
@@ -9,6 +10,8 @@
     export let refresh_after: number | undefined = undefined;
 </script>
 
+<CommonScripts/>
+
 <style lang="scss">
     @import "../../scss/vars";
     @import "../../scss/helpers";
diff --git a/src/assets/views/templates/CommonScripts.svelte b/src/assets/views/templates/CommonScripts.svelte
new file mode 100644
index 0000000..7bd6ab6
--- /dev/null
+++ b/src/assets/views/templates/CommonScripts.svelte
@@ -0,0 +1,5 @@
+<script>
+    import ExternalLinkIcons from "../scripts/ExternalLinkIcons.svelte";
+</script>
+
+<ExternalLinkIcons/>
diff --git a/src/assets/views/templates/ErrorTemplate.svelte b/src/assets/views/templates/ErrorTemplate.svelte
index a881ef5..5c7c05b 100644
--- a/src/assets/views/templates/ErrorTemplate.svelte
+++ b/src/assets/views/templates/ErrorTemplate.svelte
@@ -2,6 +2,7 @@
     import {locals} from "../../ts/stores.js";
     import FlashMessages from "../components/FlashMessages.svelte";
     import Icon from "../utils/Icon.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     const previousUrl = $locals.getPreviousUrl();
 
@@ -15,6 +16,8 @@
     instructions = $locals.error_instructions || instructions;
 </script>
 
+<CommonScripts/>
+
 <svelte:head>
     <title>{code + ' - ' + message}</title>
 
diff --git a/test/assets/views/design.svelte b/test/assets/views/design.svelte
index f672b3a..a41f23f 100644
--- a/test/assets/views/design.svelte
+++ b/test/assets/views/design.svelte
@@ -23,7 +23,7 @@
         </h2>
         <p>Paragraph</p>
 
-        <p>Paragraph, <a href={route('home')}>Link</a></p>
+        <p>Paragraph, <a href={route('home')}>Link</a>, <a href={route('home')} target="_blank">External link</a></p>
 
         <ul>
             <li>Unordered</li>