@geogirafe/lib-geoportal 1.0.2183159772 → 1.0.2183182793
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15,7 +15,7 @@ class ExternalLayersComponent extends GirafeHTMLElement {
|
|
|
15
15
|
</style><style>
|
|
16
16
|
#panel{background:var(--bkg-color);height:100%;color:var(--text-color);flex-direction:column;padding:0 1rem;display:flex}#content{flex-direction:column;flex-grow:1;margin:0;display:flex}header{background:#fff;margin:0;position:sticky;top:-5px}h4{margin-bottom:.5rem}ul{margin-top:0;margin-left:0;padding-left:2rem;line-height:1.3rem;list-style-type:disc}.clearable-input{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;margin-bottom:.1rem;display:flex}.scan-button{float:right}.layers{border-top:1px solid #ccc;flex-direction:column;flex-grow:1;margin-top:1rem;padding-top:.5rem;display:flex;overflow:hidden}ul.results{border:none;margin-bottom:.5rem;padding:0;list-style:none;overflow-y:auto}.result{height:1.6rem;display:flex}.result>button>span{text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#panel>div{padding:1rem}#layers li{margin-top:.3rem;margin-bottom:.3rem}#layers li button{text-align:left;overflow-wrap:anywhere;text-wrap-style:balance}#file-selector{display:grid}#file,#file-label{grid-area:1/1}#file{opacity:0;z-index:2;cursor:pointer}#file::file-selector-button{cursor:pointer}#loading-icon{flex-grow:1;align-self:center;width:3rem}.title{margin-top:0}.filter-buttons{flex-direction:row;margin:2px;display:flex}.filter-buttons span{flex-grow:1;align-self:center}.clearable-input-field{width:90%;color:var(--text-color);background:0 0;border:0;outline:none;flex:auto;padding:0;font-size:1rem}.filter-icon,.delete-icon{width:16px;color:var(--text-color);padding:0 .5rem}.delete-button{cursor:pointer;background-color:#0000;border:none;padding:0}
|
|
17
17
|
</style>
|
|
18
|
-
<div id="panel"><header class="gg-tabs"><button class="${this.selectedTab === 'wms_wmts' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('wms_wmts')}" i18n="wms_wmts"></button> <button class="${this.selectedTab === 'file' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('file')}" i18n="local file"></button></header><section class="${(this.selectedTab === 'wms_wmts') ? 'group' : 'hidden'}"><h4 class="title" i18n="Suggestions">Suggestions</h4><ul class="suggestions">${this.predefinedWmsWmtsSources.map(source => uHtmlFor(source, source.label) `<li><a href="
|
|
18
|
+
<div id="panel"><header class="gg-tabs"><button class="${this.selectedTab === 'wms_wmts' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('wms_wmts')}" i18n="wms_wmts"></button> <button class="${this.selectedTab === 'file' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('file')}" i18n="local file"></button></header><section class="${(this.selectedTab === 'wms_wmts') ? 'group' : 'hidden'}"><h4 class="title" i18n="Suggestions">Suggestions</h4><ul class="suggestions">${this.predefinedWmsWmtsSources.map(source => uHtmlFor(source, source.label) `<li><a href="javascript:void(0)" onclick="${() => this.scanSource(source.url, source.type)}">${source.label}</a></li>`)}</ul><h4 class="title" i18n="Custom service URL">Custom service URL</h4><div class="clearable-input"><input id="url" class="gg-input clearable-input-field" oninput="${() => this.typeUrl()}"><br><button id="clear-url" class="delete-button hidden" onclick="${() => this.clearUrl()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><button i18n="Scan Source" class="gg-button scan-button" onclick="${() => this.scanSource()}">Scan Source</button></section><section class="${(this.selectedTab === 'file') ? 'group' : 'hidden'}"><h4 class="title" i18n="Choose local file">Choose local file</h4><div id="file-selector"><label for="file" id="file-label"><button class="gg-button" i18n="Select File"></button> <span>${this.fileDescription}</span></label> <input type="file" accept=".gpx,.kml,.geojson,.json" id="file" onchange="${() => this.render()}"><br></div><button id="load" i18n="Load File" class="gg-button" onclick="${() => this.loadFile()}"></button></section><section class="${(this.selectedTab === 'wms_wmts' && this.externalLayers.length > 0) || this.loading ? 'layers' : 'hidden'}"><h4 class="title" i18n="Layers (from Capabilities)">Layers (from Capabilities)</h4><div class="clearable-input"><img class="filter-icon" alt="filter-button-icon" src="icons/filter.svg"> <input id="layer-search-field" class="gg-input clearable-input-field" placeholder="${this.context.i18nManager.getTranslation('Filter external layers...')}" i18n="Filter external layers..." autocomplete="off" autocorrect="off" oninput="${(e) => this.filterLayers(e.target.value)}"> <button class="${this.isFiltered ? 'delete-button' : 'hidden'}" onclick="${() => this.clearFilter()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><div class="filter-buttons"><span>${Object.values(this.externalLayers).filter(layer => layer.isSelected).length.toString()} ${this.context.i18nManager.getTranslation('layers selected')} </span><button class="gg-button" tip="Select all filtered layers" onclick="${() => this.selectVisible()}">+</button> <button class="gg-button" tip="Unselect all filtered layers" onclick="${() => this.deselectVisible()}">-</button> <button class="gg-button" tip="Select none" onclick="${() => this.deselectAll()}">--</button></div><img id="loading-icon" alt="loading-icon" src="icons/loading.svg" class="${this.loading ? 'gg-spin' : 'hidden'}"><ul class="results">${this.filteredLayers.map(layer => uHtmlFor(layer, layer.treeItemId) `<li class="result"><button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" tip="Activate / Deactivate" onclick="${() => this.selectLayer(layer)}"><img class="${layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button> <button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" onclick="${() => this.selectLayer(layer)}"><span i18n="${layer.name}" class="gg-tree-label">${layer.name}</span></button></li>`)}</ul><button id="add" tip="Add selected" i18n="Add selected" class="gg-button" onclick="${() => this.addSelectedLayers()}">Add selected</button></section></div>`;
|
|
19
19
|
};
|
|
20
20
|
visible = false;
|
|
21
21
|
loading = false;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import GirafeHTMLElement from '../../base/GirafeHTMLElement';
|
|
2
|
+
import type { AllSearchResults } from '../../models/searchresult';
|
|
2
3
|
import SearchResult from '../../models/searchresult';
|
|
3
4
|
declare class SearchComponent extends GirafeHTMLElement {
|
|
4
5
|
template: () => import("uhtml").Hole;
|
|
@@ -38,7 +39,7 @@ declare class SearchComponent extends GirafeHTMLElement {
|
|
|
38
39
|
connectedCallback(): void;
|
|
39
40
|
protected clearSearch(purge?: boolean): void;
|
|
40
41
|
doSearch(e: Event): Promise<void>;
|
|
41
|
-
|
|
42
|
+
protected fetchSearch(term: string): Promise<AllSearchResults>;
|
|
42
43
|
/**
|
|
43
44
|
* Debounce the fetch call to API to prevent sending request at every stroke.
|
|
44
45
|
* @param e
|
|
@@ -231,13 +231,13 @@ class SearchComponent extends GirafeHTMLElement {
|
|
|
231
231
|
if (result.properties.layer_name) {
|
|
232
232
|
type = result.properties.layer_name;
|
|
233
233
|
}
|
|
234
|
-
else if (result.properties.actions[0].action
|
|
234
|
+
else if (result.properties.actions[0].action.startsWith('add_theme')) {
|
|
235
235
|
type = 'add_theme';
|
|
236
236
|
}
|
|
237
|
-
else if (result.properties.actions[0].action
|
|
237
|
+
else if (result.properties.actions[0].action.startsWith('add_group')) {
|
|
238
238
|
type = 'add_group';
|
|
239
239
|
}
|
|
240
|
-
else if (result.properties.actions[0].action
|
|
240
|
+
else if (result.properties.actions[0].action.startsWith('add_layer')) {
|
|
241
241
|
type = 'add_layer';
|
|
242
242
|
}
|
|
243
243
|
}
|
|
@@ -305,7 +305,7 @@ class SearchComponent extends GirafeHTMLElement {
|
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
307
|
const firstAction = result.properties?.actions?.[0];
|
|
308
|
-
if (firstAction?.action
|
|
308
|
+
if (firstAction?.action.startsWith('add_layer') && this.context.configManager.Config.search.layerPreview) {
|
|
309
309
|
const layer = this.context.themesHelper.findLayerByName(firstAction.data);
|
|
310
310
|
if (layer) {
|
|
311
311
|
const clonedTheme = this.context.themesHelper.getMinimalClonedThemeForLayer(layer);
|
|
@@ -387,29 +387,35 @@ class SearchComponent extends GirafeHTMLElement {
|
|
|
387
387
|
}
|
|
388
388
|
addResultToTreeView(result) {
|
|
389
389
|
let clonedTheme;
|
|
390
|
-
if (result.properties
|
|
391
|
-
|
|
390
|
+
if (!result.properties || result.properties.actions.length === 0) {
|
|
391
|
+
// Nothing to add
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
394
|
+
let activate = false;
|
|
395
|
+
if (result.properties.actions[0].action.startsWith('add_theme')) {
|
|
396
|
+
const theme = this.context.themesHelper.findThemeByName(result.properties.actions[0].data);
|
|
392
397
|
if (theme) {
|
|
393
398
|
clonedTheme = theme.clone();
|
|
394
399
|
}
|
|
395
400
|
}
|
|
396
|
-
else if (result.properties
|
|
397
|
-
const group = this.context.themesHelper.findGroupByName(result.properties
|
|
401
|
+
else if (result.properties.actions[0].action.startsWith('add_group')) {
|
|
402
|
+
const group = this.context.themesHelper.findGroupByName(result.properties.actions[0].data);
|
|
398
403
|
if (group) {
|
|
399
404
|
clonedTheme = this.context.themesHelper.getMinimalClonedThemeForLayer(group);
|
|
400
405
|
}
|
|
401
406
|
}
|
|
402
|
-
else if (result.properties
|
|
403
|
-
const layer = this.context.themesHelper.findLayerByName(result.properties
|
|
407
|
+
else if (result.properties.actions[0].action.startsWith('add_layer')) {
|
|
408
|
+
const layer = this.context.themesHelper.findLayerByName(result.properties.actions[0].data);
|
|
404
409
|
if (layer) {
|
|
405
410
|
clonedTheme = this.context.themesHelper.getMinimalClonedThemeForLayer(layer);
|
|
411
|
+
activate = true;
|
|
406
412
|
}
|
|
407
413
|
}
|
|
408
414
|
else {
|
|
409
415
|
console.warn('Unsupported result type');
|
|
410
416
|
}
|
|
411
417
|
if (clonedTheme) {
|
|
412
|
-
this.context.themesHelper.mergeThemeInLayerTree(clonedTheme);
|
|
418
|
+
this.context.themesHelper.mergeThemeInLayerTree(clonedTheme, activate);
|
|
413
419
|
}
|
|
414
420
|
}
|
|
415
421
|
zoomTo(extent) {
|
|
@@ -9,7 +9,7 @@ class MobileSelectedLayerElementComponent extends MobileLayerElementComponent {
|
|
|
9
9
|
</style><style>
|
|
10
10
|
.container{border-bottom:1px solid #ddd;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;display:flex}header{align-items:center;display:flex}section.options{align-items:center;gap:1rem;width:100%;margin-bottom:.5rem;display:flex}.slider{flex-grow:1}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}
|
|
11
11
|
</style>
|
|
12
|
-
<div class="container"><header><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div><img class="${this.layer?.active && this.iconUrl ? 'legend-icon' : 'hidden'}" alt="${'Icon for ' + this.layer?.name}" src="${this.iconUrl}" crossorigin="${this.getCrossOrigin(this.iconUrl)}"></header><section class="options"><input type="range" class="slider" min="0" max="20" value="${((this.layer?.opacity ?? 1) * 20).toString()}" oninput="${(event) => this.layer.opacity = parseInt(event.target.value) / 20}"> <a href="${this.layer?.metadataUrl}" target="_blank" class="${this.layer?.hasMetadata ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/info.svg"> </a><a href="
|
|
12
|
+
<div class="container"><header><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div><img class="${this.layer?.active && this.iconUrl ? 'legend-icon' : 'hidden'}" alt="${'Icon for ' + this.layer?.name}" src="${this.iconUrl}" crossorigin="${this.getCrossOrigin(this.iconUrl)}"></header><section class="options"><input type="range" class="slider" min="0" max="20" value="${((this.layer?.opacity ?? 1) * 20).toString()}" oninput="${(event) => this.layer.opacity = parseInt(event.target.value) / 20}"> <a href="${this.layer?.metadataUrl}" target="_blank" class="${this.layer?.hasMetadata ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/info.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'left') ? 'no' : 'left'}"><img alt="Swipe layer to the left" src="icons/swipe-left.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'right') ? 'no' : 'right'}"><img alt="Swipe layer to the right" src="icons/swipe-right.svg"> </a><a href="${this.firstLegendUrl ?? '#'}" target="_blank" class="${this.firstLegendUrl ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/legend.svg"></a></section></div>`;
|
|
13
13
|
};
|
|
14
14
|
iconUrl = null;
|
|
15
15
|
legendUrls = {};
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"1.0.
|
|
1
|
+
{"version":"1.0.2183182793", "build":"2183182793", "date":"27/11/2025"}
|