Add DOM modification for glossary (using Renderer2 service)

package-lock.json

@@ -3566,9 +3566,9 @@
       "integrity": "sha512-lXKMA/U43Fi1UnMkVYdNuEu0cGLo4JSWFUcnEyzNXkdpmDFic+d8H9oiaRoLbPiuGTC5SNoHMCP24T5544gnlQ=="
     },
     "bulma-tooltip": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-2.0.1.tgz",
-      "integrity": "sha512-y2e8ER6wej5hBgb5OXoyBqBxSD+1aw6kFHNp/HbOWw4UB4dKwREuNa/RecM6mjrSSxO9IeED787CU++Y1bbStg=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-2.0.2.tgz",
+      "integrity": "sha512-xsqWeWV7tsUn3uH04SqJeP7/CyC1RaDVIyVzr4/sIO3friIIOi7L6jc5g7qUwDxuBQl72yH/yRPuefpXoQ4hWg=="
     },
     "bytes": {
       "version": "3.0.0",

package.json

@@ -34,7 +34,7 @@
     "bulma": "^0.7.1",
     "bulma-checkradio": "^2.1.0",
     "bulma-slider": "^2.0.0",
-    "bulma-tooltip": "^2.0.1",
+    "bulma-tooltip": "^2.0.2",
     "core-js": "^2.5.7",
     "font-awesome": "^4.7.0",
     "jwt-decode": "^2.2.0",

src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html

@@ -9,7 +9,7 @@
   </div>
 
 
-  <div class="section is-paddingless">
+  <div class="section is-paddingless test">
     <p class="title-dgl is-size-5 has-text-weight-bold" i18n="@@dataset.info.description">Dataset description</p>
     <div class="columns dataset-description is-marginless">
       <div class="column is-3">
@@ -97,4 +97,4 @@
       </div>
     </div>
   </div>
-</ng-container>
\ No newline at end of file
+</ng-container>

src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss

@@ -2,6 +2,12 @@
 @import "../../../../../../node_modules/bulma/sass/utilities/_all";
 
 
+.glossaire {
+  border-bottom: 1px dashed;
+  cursor: pointer;
+}
+
+
 .abstract {
   background-color: white;
   padding-left: 0.9375rem;

src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts

-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { geosource } from '../../../../../i18n/geosource/geosource';
 import { Metadata, IMetadataLink } from '../../../models';
 import { typesMetadata } from '../../../models/metadata.model';
@@ -23,10 +23,41 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
   generalInfo = { title: geosource.datasetInfo.generalInformation };
   sub: Subscription;
 
+  glossary = {
+    WFS: {
+      added: false,
+      text: 'Web Feature Service',
+    },
+    WMS: {
+      added: false,
+      text: 'Web Map Service',
+    },
+    SOS: {
+      added: false,
+      text: 'Sauce with Onion and Soup',
+    },
+    WCS: {
+      added: false,
+      text: 'Web Coverage Service',
+    },
+    INSPIRE: {
+      added: false,
+      text: 'Normes Inpire ',
+    },
+    Métropole: {
+      added: false,
+      text: 'Une grande ville...',
+    },
+  };
+
+  displayTooltip: false;
+
   constructor(
     private _datasetDetailService: DatasetDetailService,
     private _editorialisationService: EditorialisationService,
-  ) { }
+    private renderer: Renderer2,
+  ) {
+  }
 
   ngOnInit() {
     // Initilize component variables with value from the service
@@ -150,4 +181,55 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
   get datasetNumberOfViews() {
     return this._datasetDetailService.datasetNumberOfViews;
   }
+
+  ngDoCheck() {
+
+    Object.keys(this.glossary).forEach((key) => {
+      const xpath = '//*[contains(text(),"' + key + '")]';
+      const nodesSnapshot = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+      if (!this.glossary[key].added) {
+
+        const element = nodesSnapshot.snapshotItem(0);
+        if (element && element.firstChild.nodeValue) {
+          const content = element.firstChild.nodeValue;
+
+          const arrayContent = content.split(key);
+
+          this.renderer.removeChild(element, element.firstChild);
+
+          const span1 = this.renderer.createElement('span');
+          const text1 = this.renderer.createText(arrayContent[0]);
+          this.renderer.appendChild(span1, text1);
+
+          const li = this.renderer.createElement('span');
+          const text = this.renderer.createText(key);
+          this.renderer.addClass(li, 'glossaire');
+          this.renderer.setAttribute(li, 'data-tooltip', this.glossary[key].text);
+          this.renderer.listen(li, 'click', (event) => {
+            if (li.classList.contains('tooltip')) {
+              this.renderer.removeClass(li, 'tooltip');
+              this.renderer.removeClass(li, 'is-tooltip-active');
+
+            } else {
+              this.renderer.addClass(li, 'tooltip');
+              this.renderer.addClass(li, 'is-tooltip-active');
+
+            }
+          });
+          this.renderer.appendChild(li, text);
+
+          const span2 = this.renderer.createElement('span');
+          const text2 = this.renderer.createText(arrayContent[1]);
+          this.renderer.appendChild(span2, text2);
+
+          this.renderer.appendChild(element, text1);
+          this.renderer.appendChild(element, li);
+          this.renderer.appendChild(element, text2);
+
+          this.glossary[key].added = true;
+
+        }
+      }
+    });
+  }
 }

src/styles.scss

@@ -9,6 +9,8 @@
 
 @import './scss/variables.scss';
 
+@import '../node_modules/bulma-tooltip/';
+
 html,
 body {
   height: 100%;