From 1fd10d0cbd7070cbd33633841c02937dc9fa0e68 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Tue, 20 Nov 2018 16:15:33 +0100
Subject: [PATCH] Add DOM modification for glossary (using Renderer2 service)
---
package-lock.json | 6 +-
package.json | 2 +-
.../dataset-info/dataset-info.component.html | 4 +-
.../dataset-info/dataset-info.component.scss | 6 ++
.../dataset-info/dataset-info.component.ts | 86 ++++++++++++++++++-
src/styles.scss | 2 +
6 files changed, 98 insertions(+), 8 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index ace6f12e..5b569431 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f133febd..2bda94b7 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html b/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
index 3214aa43..0b0dee5d 100644
--- a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
+++ b/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>
diff --git a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss b/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
index bec1e28d..1fec18cd 100644
--- a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
+++ b/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;
diff --git a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts b/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
index 4f5887f8..f1943694 100644
--- a/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
+++ b/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
@@ -1,4 +1,4 @@
-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;
+
+ }
+ }
+ });
+ }
}
diff --git a/src/styles.scss b/src/styles.scss
index 96eed87e..6f606cb2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,6 +9,8 @@
@import './scss/variables.scss';
+@import '../node_modules/bulma-tooltip/';
+
html,
body {
height: 100%;
--
GitLab