Make links clickable in more places (#464)

* Make URLs in citation page clickable * Link URLs in attributes * Link URLs in attribute values
gramps-project · Jul 6, 2024 · b911366 · b911366
1 parent b7559f6
commit b911366
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 22 deletions.
diff --git 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/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'
@@ -7,9 +7,24 @@ 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 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}"
-      >
-        ${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>

diff --git 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
@@ -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
@@ -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,27 @@ 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
 
 /**