diff --git a/package-lock.json b/package-lock.json index ace6f12e1331636d83be35cf5194a5ce3a7d4e6f..5b569431e74c8198fda886df765f9b4bfb9f1808 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 f133febd0ab80f8bc22a4e8507086ff68f63fa4a..2bda94b7de0d4fc0a8d3a0116770d15e9f5b04ad 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 3214aa437eb9790fc53cdb1ecc90c3ef3910bcab..0b0dee5d75c35ed89c95f079a13da7daf0c53554 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 bec1e28d4f117c5a09afd69f1b86e5a0e9c80a9c..1fec18cd0089dba7e72d3b2ac3e0eb6fcf15a6d1 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 4f5887f881deea2e86812e2f9002591737662769..f194369452524177d1ae8e9490491a14a9294061 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 96eed87e5d9cf812640d63328e850eedecee8700..6f606cb261e6fb6c34bde7bf3e3c1185457fba0b 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%;