Commit 1fd10d0c authored by ncastejon's avatar ncastejon
Browse files

Add DOM modification for glossary (using Renderer2 service)

parent 0c512c28
......@@ -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",
......
......@@ -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>
......@@ -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;
......
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;
}
}
});
}
}
......@@ -9,6 +9,8 @@
@import './scss/variables.scss';
@import '../node_modules/bulma-tooltip/';
html,
body {
height: 100%;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment