From 115772a4b5b95a262a466123bd9bed63938c240c Mon Sep 17 00:00:00 2001
From: David Straub <straub@protonmail.com>
Date: Fri, 5 Jul 2024 22:26:50 +0200
Subject: [PATCH 1/3] Make URLs in citation page clickable

---
 src/SharedStyles.js                   |  8 ++++++++
 src/components/GrampsjsCitation.js    |  4 ++--
 src/components/GrampsjsNoteContent.js | 11 +----------
 src/util.js                           | 26 ++++++++++++++++++++++++--
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/SharedStyles.js b/src/SharedStyles.js
index 990db0da..2170ba44 100644
--- a/src/SharedStyles.js
+++ b/src/SharedStyles.js
@@ -149,6 +149,14 @@ export const sharedStyles = css`
     cursor: pointer;
   }
 
+  .linkicon {
+    --md-icon-size: 15px;
+    margin-right: 8px;
+    position: relative;
+    bottom: -1px;
+    opacity: 0.7;
+  }
+
   .nopointer {
     pointer-events: none;
   }
diff --git a/src/components/GrampsjsCitation.js b/src/components/GrampsjsCitation.js
index 4c666f29..fc3fba47 100644
--- a/src/components/GrampsjsCitation.js
+++ b/src/components/GrampsjsCitation.js
@@ -4,7 +4,7 @@ import '@material/mwc-icon'
 
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsjsFormEditCitationDetails.js'
-import {fireEvent} from '../util.js'
+import {fireEvent, linkUrls} from '../util.js'
 
 const BASE_DIR = ''
 
@@ -60,7 +60,7 @@ export class GrampsjsCitation extends GrampsjsObject {
           ? html`
               <div>
                 <dt>${this._('Page')}</dt>
-                <dd>${this.data.page}</dd>
+                <dd>${linkUrls(this.data.page, false)}</dd>
               </div>
             `
           : ''}
diff --git a/src/components/GrampsjsNoteContent.js b/src/components/GrampsjsNoteContent.js
index 08ce8ff9..844bd97f 100644
--- a/src/components/GrampsjsNoteContent.js
+++ b/src/components/GrampsjsNoteContent.js
@@ -1,15 +1,6 @@
 import {html, css, LitElement} from 'lit'
 import {sharedStyles} from '../SharedStyles.js'
-
-const urlRegex =
-  /((?:^|\s)https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
-
-function linkUrls(text) {
-  return text.replace(
-    urlRegex,
-    url => `<a href="${url}" target="_blank">${url}</a>`
-  )
-}
+import {linkUrls} from '../util.js'
 
 export class GrampsjsNoteContent extends LitElement {
   static get styles() {
diff --git a/src/util.js b/src/util.js
index 46af7417..1f8aede2 100644
--- a/src/util.js
+++ b/src/util.js
@@ -4,7 +4,8 @@ import '@material/mwc-icon'
 import dayjs from 'dayjs/esm'
 import relativeTime from 'dayjs/esm/plugin/relativeTime'
 
-import {asteriskIcon, crossIcon} from './icons.js'
+import {mdiOpenInNew} from '@mdi/js'
+import {asteriskIcon, crossIcon, renderIconSvg} from './icons.js'
 import {frontendLanguages} from './strings.js'
 import {hex6ToCss, hex12ToCss} from './color.js'
 
@@ -589,6 +590,28 @@ export function dateIsEmpty(date) {
   return true
 }
 
+const urlRegex =
+  /((?:^|\s)https?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi
+
+export function linkUrls(text, textOnly = true) {
+  if (textOnly) {
+    return text.replace(
+      urlRegex,
+      url => `<a href="${url}" target="_blank">${url}</a>`
+    )
+  }
+  const parts = text.split(urlRegex)
+  return html`${parts.map(part =>
+    part.match(urlRegex)
+      ? html`<a href="${part}" target="_blank">${part}</a>
+          <md-icon class="linkicon"
+            >${renderIconSvg(mdiOpenInNew, '#0d47a1')}</md-icon
+          > `
+      : part
+  )}`
+}
+
+
 // OpenHistoricalMap functions
 
 /**
@@ -775,4 +798,3 @@ export function isDateBetweenYears(date, yearMin, yearMax) {
     year2 += RANGE_ABOUT
   }
   return yearMin <= year2 && year1 <= yearMax
-}

From 240202c03b2ac30144b305d0875d26ce9e209e3f Mon Sep 17 00:00:00 2001
From: David Straub <straub@protonmail.com>
Date: Sat, 6 Jul 2024 19:11:08 +0200
Subject: [PATCH 2/3] Link URLs in attributes

---
 src/components/GrampsjsAttributes.js | 4 ++--
 src/util.js                          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/GrampsjsAttributes.js b/src/components/GrampsjsAttributes.js
index e72fbbdd..b5ddc562 100644
--- a/src/components/GrampsjsAttributes.js
+++ b/src/components/GrampsjsAttributes.js
@@ -7,7 +7,7 @@ import '@material/mwc-icon-button'
 import '@material/mwc-list'
 import '@material/mwc-list/mwc-list-item'
 
-import {fireEvent} from '../util.js'
+import {fireEvent, linkUrls} from '../util.js'
 
 export class GrampsjsAttributes extends GrampsjsEditableList {
   static get properties() {
@@ -29,7 +29,7 @@ export class GrampsjsAttributes extends GrampsjsEditableList {
         ?noninteractive="${!this.edit}"
         ?hasMeta="${this.edit}"
       >
-        ${obj.value}
+        ${linkUrls(obj.value)}
         <span slot="secondary">${this._(obj.type)}</span>
         <mwc-icon slot="graphic">info</mwc-icon>
       </mwc-list-item>
diff --git a/src/util.js b/src/util.js
index 1f8aede2..c41c3410 100644
--- a/src/util.js
+++ b/src/util.js
@@ -611,7 +611,6 @@ export function linkUrls(text, textOnly = true) {
   )}`
 }
 
-
 // OpenHistoricalMap functions
 
 /**
@@ -798,3 +797,4 @@ export function isDateBetweenYears(date, yearMin, yearMax) {
     year2 += RANGE_ABOUT
   }
   return yearMin <= year2 && year1 <= yearMax
+}

From 0bf5d53797546033cf74ad32f41a6a1080987448 Mon Sep 17 00:00:00 2001
From: David Straub <straub@protonmail.com>
Date: Sat, 6 Jul 2024 19:19:59 +0200
Subject: [PATCH 3/3] Link URLs in attribute values

---
 src/components/GrampsjsAttributes.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/GrampsjsAttributes.js b/src/components/GrampsjsAttributes.js
index b5ddc562..2cd97b04 100644
--- a/src/components/GrampsjsAttributes.js
+++ b/src/components/GrampsjsAttributes.js
@@ -1,4 +1,4 @@
-import {html} from 'lit'
+import {html, css} from 'lit'
 
 import {GrampsjsEditableList} from './GrampsjsEditableList.js'
 import './GrampsjsFormEditAttribute.js'
@@ -10,6 +10,21 @@ import '@material/mwc-list/mwc-list-item'
 import {fireEvent, linkUrls} from '../util.js'
 
 export class GrampsjsAttributes extends GrampsjsEditableList {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        mwc-list-item {
+          cursor: default;
+        }
+
+        mwc-list-item[hasMeta] {
+          cursor: pointer;
+        }
+      `,
+    ]
+  }
+
   static get properties() {
     return {
       source: {type: Boolean},
@@ -23,13 +38,8 @@ export class GrampsjsAttributes extends GrampsjsEditableList {
 
   row(obj) {
     return html`
-      <mwc-list-item
-        twoline
-        graphic="avatar"
-        ?noninteractive="${!this.edit}"
-        ?hasMeta="${this.edit}"
-      >
-        ${linkUrls(obj.value)}
+      <mwc-list-item twoline graphic="avatar" ?hasMeta="${this.edit}">
+        ${this.edit ? obj.value : linkUrls(obj.value, false)}
         <span slot="secondary">${this._(obj.type)}</span>
         <mwc-icon slot="graphic">info</mwc-icon>
       </mwc-list-item>