Merge pull request #571 from geonetwork/GSGCT-55-hyperlinks-clickable

Datahub / make hyperlinks clickable in "lineage" and "usage conditions"

libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts

@@ -0,0 +1,45 @@
+import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing'
+import { Component, DebugElement } from '@angular/core'
+import { By } from '@angular/platform-browser'
+import { GnUiLinkifyDirective } from './linkify.directive'
+
+@Component({
+  template: `<div [gnUiLinkify]>Click this link https://www.example.com</div>`,
+})
+class TestComponent {}
+
+describe('GnUiLinkifyDirective', () => {
+  let fixture: ComponentFixture<TestComponent>
+  let component: TestComponent
+  let debugElement: DebugElement
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [GnUiLinkifyDirective, TestComponent],
+    })
+
+    fixture = TestBed.createComponent(TestComponent)
+    component = fixture.componentInstance
+    debugElement = fixture.debugElement.query(
+      By.directive(GnUiLinkifyDirective)
+    )
+
+    fixture.detectChanges()
+  }))
+
+  it('should create an anchor element with the correct href', () => {
+    fixture.detectChanges()
+    const anchorElement = debugElement.query(By.css('a'))
+
+    const href = anchorElement.nativeElement.getAttribute('href')
+    expect(href).toBe('https://www.example.com')
+  })
+
+  it('should have the target attribute set to "_blank"', () => {
+    fixture.detectChanges()
+    const anchorElement = debugElement.query(By.css('a'))
+
+    const target = anchorElement.nativeElement.getAttribute('target')
+    expect(target).toBe('_blank')
+  })
+})

libs/ui/elements/src/lib/metadata-info/linkify.directive.stories.ts

@@ -0,0 +1,41 @@
+import {
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from '@storybook/angular'
+import { GnUiLinkifyDirective } from './linkify.directive'
+
+export default {
+  title: 'Elements/GnUiLinkifyDirective',
+  decorators: [
+    moduleMetadata({
+      declarations: [GnUiLinkifyDirective],
+    }),
+  ],
+} as Meta<GnUiLinkifyDirective>
+
+export const Primary: StoryObj<any> = {
+  args: {
+    htmlContent: `Région Hauts-de-France, Dreal, IGN BD Topo<br>
+
+    Les données produites s'appuient sur le modèle CNIG de juin 2018 relatif aux SCoT : http://cnig.gouv.fr/wp-content/uploads/2019/04/190315_Standard_CNIG_SCOT.pdf<br>
+    
+    La structure a été modifiée au 03/2023 pour prendre en compte les évolutions du modèle CNIG du 10/06/2021 :<br>
+    http://cnig.gouv.fr/IMG/pdf/210615_standard_cnig_nouveauscot.pdf<br>
+    (il coexiste donc dans le modèle des champs liés aux deux modèles, par exemple sur les PADD pour les "anciens" SCoT, ou encore sur les PAS ou les DAAC pour les "nouveaux" SCoT)`,
+  },
+  argTypes: {
+    htmlContent: {
+      control: 'text',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+    <div
+        gnUiLinkify>
+      ${args.htmlContent}
+    </div>`,
+  }),
+}

libs/ui/elements/src/lib/metadata-info/linkify.directive.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiLinkify]',
+})
+export class GnUiLinkifyDirective implements OnInit {
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.processLinks()
+    }, 0)
+  }
+
+  private processLinks() {
+    const container = this.el.nativeElement
+
+    const nodes = Array.from(container.childNodes)
+    nodes.forEach((node) => {
+      if (node instanceof Text) {
+        const textNode = node as Text
+        const linkified = this.linkifyText(textNode.nodeValue)
+        const span = this.renderer.createElement('span')
+        span.innerHTML = linkified
+        container.insertBefore(span, textNode)
+        container.removeChild(textNode)
+      }
+    })
+  }
+
+  private linkifyText(text: string): string {
+    return text.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => {
+      return `<a href="${match}" target="_blank"
+                  class="text-primary cursor-pointer hover:underline">${match} <mat-icon class="mat-icon !w-[12px] !h-[14px] !text-[14px] opacity-75 material-icons">open_in_new</mat-icon></a>`
+    })
+  }
+}

libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -32,7 +32,7 @@
   *ngIf="metadata.lineage"
   [title]="'record.metadata.origin' | translate"
 >
-  <p class="mb-5 pt-4 whitespace-pre-line break-words">
+  <p class="mb-5 pt-4 whitespace-pre-line break-words" gnUiLinkify>
     {{ metadata.lineage }}
   </p>
   <div
@@ -66,7 +66,7 @@
     <gn-ui-badge *ngIf="metadata.isOpenData">
       <span translate>record.metadata.isOpenData</span>
     </gn-ui-badge>
-    <span *ngFor="let constraint of metadata.constraints">
+    <span *ngFor="let constraint of metadata.constraints" gnUiLinkify>
       {{ constraint }}
     </span>
     <span class="noUsage" *ngIf="!metadata.constraints">

libs/ui/elements/src/lib/ui-elements.module.ts

@@ -23,6 +23,7 @@ import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 
 @NgModule({
   imports: [
@@ -53,6 +54,7 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
     ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
+    GnUiLinkifyDirective,
   ],
   exports: [
     MetadataInfoComponent,