@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
126 lines (124 loc) • 12.3 kB
JavaScript
import { html as uHtml } from 'uhtml';
import GirafeDraggableElement from '../../base/GirafeDraggableElement';
import ResizeWindow from '../../tools/resizewindow';
class InfoWindowComponent extends GirafeDraggableElement {
constructor() {
super('infowindow');
Object.defineProperty(this, "template", {
enumerable: true,
configurable: true,
writable: true,
value: () => {
return uHtml `<style>
*{font-family:Arial,sans-serif}.hidden{display:none}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a{color:var(--link-color)}a:visited{color:var(--link-color)}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:linear}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-input,.gg-select,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);outline:0;border-radius:3px;border:var(--app-standard-border);display:inline-block;box-sizing:border-box;padding:0 0 0 .5rem;margin:0;cursor:pointer}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;display:inline-block;padding:0;margin:0}.gg-button,.gg-input,.gg-label,.gg-select{min-height:calc(var(--app-standard-height)/ 1.5);max-height:calc(var(--app-standard-height)/ 1.5);line-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{padding:.5rem;height:6rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{background-color:#d3d3d3;color:grey;border:none;cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{border:none;background-color:transparent;display:flex;flex-direction:column;color:var(--text-color);padding:0;align-items:center;justify-content:center;cursor:pointer}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{margin:0;width:calc(var(--app-standard-height) - 1.5rem)}.gg-big-withtext span{font-size:.9rem;font-variant:small-caps;padding:0 1rem}.gg-medium,.gg-medium-withtext{flex-direction:row;min-width:calc(var(--app-standard-height)/ 1.2);min-height:calc(var(--app-standard-height)/ 1.2);max-height:calc(var(--app-standard-height)/ 1.2)}.gg-medium img{margin:0;width:calc(var(--app-standard-height)/ 2.4)}.gg-medium-withtext img{margin-left:.5rem;width:calc(var(--app-standard-height)/ 2.4)}.gg-medium-withtext span{font-size:.9rem;padding:0 1rem;padding-left:.5rem}.gg-small,.gg-small-withtext{flex-direction:row;min-width:calc(var(--app-standard-height)/ 2);min-height:calc(var(--app-standard-height)/ 2);max-height:calc(var(--app-standard-height)/ 2)}.gg-small img{margin:0;width:calc(var(--app-standard-height)/ 3)}.gg-small-withtext img{margin-left:.5rem;width:calc(var(--app-standard-height)/ 3)}.gg-small-withtext span{font-size:.9rem;padding:0 .5rem;padding-left:.3rem}.gg-button:hover,.gg-icon-button:hover,.gg-input:hover,.gg-select:hover,.gg-textarea:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{background-color:transparent;opacity:1}.gg-tabs{display:flex;justify-content:left;margin:.5rem auto 0;border-bottom:1px solid grey;cursor:pointer;height:2rem;align-items:end;gap:1rem;margin-bottom:1rem}.gg-tab{border:none;background:0 0;cursor:pointer;padding:.5rem;color:var(--text-color)}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{border:none;background-color:transparent;display:flex;flex-direction:column;color:var(--text-color)}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert(1)}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{margin:.3rem;height:2rem}.girafe-button-large span{line-height:2rem;height:2rem;margin:.3rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/ 2);height:calc(var(--app-standard-height)/ 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis}.girafe-button-tiny{width:1rem;height:1rem;align-items:center;padding:0}.girafe-button-tiny img{overflow:hidden}
</style><style>
.girafe-resizer{--resize-size:6px;--negative-resize-size:-6px}button.girafe-resizer{position:absolute;background-color:transparent;border:none}.girafe-resizer.corner{width:var(--resize-size);height:var(--resize-size)}.girafe-resizer.top-bottom{width:calc(100% - (2 * var(--resize-size)));height:var(--resize-size)}.girafe-resizer.left-right{width:var(--resize-size);height:calc(100% - (2 * var(--resize-size)))}.girafe-resizer.br:hover,.girafe-resizer.tl:hover{cursor:nw-resize}.girafe-resizer.bl:hover,.girafe-resizer.tr:hover{cursor:ne-resize}.girafe-resizer.top-bottom:hover{cursor:n-resize}.girafe-resizer.left-right:hover{cursor:e-resize}.girafe-resizer.tl{top:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.t{top:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.tr{top:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.r{top:var(--resize-size);right:var(--negative-resize-size)}.girafe-resizer.br{bottom:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.b{bottom:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.bl{bottom:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.l{top:var(--resize-size);left:var(--negative-resize-size)}.girafe-draggable-window{--window-header-height:2rem;--window-footer-height:2rem;border:solid 1px var(--text-color-grad1);border-radius:3px;box-shadow:var(--bx-shdw);background:var(--bkg-color);width:100%;height:100%}.girafe-draggable-window #header{height:var(--window-header-height);line-height:var(--window-header-height);padding:0 .5rem;cursor:move;z-index:10;background-color:var(--bkg-color-grad2);color:var(--text-color);text-align:center}.girafe-draggable-window #close{border:none;color:var(--text-color);padding:0;margin:.5rem;width:1rem;height:1rem;line-height:1rem;position:absolute;top:0;right:0;background-color:transparent;cursor:pointer}.girafe-draggable-window #close i:before{content:'\uf00d'}.girafe-draggable-window #close:hover{border-color:#000;color:#000}.girafe-draggable-window #content{width:100%;height:calc(100% - (var(--window-header-height) + var(--window-footer-height)));color:var(--text-color);overflow-y:auto}.girafe-draggable-window #footer{height:var(--window-footer-height);color:var(--text-color-grad1);border-top:solid 1px var(--text-color-grad1);display:flex;justify-content:space-around}
</style><style>
#content{padding-left:1rem;width:calc(100% - 1rem);height:calc(100% - var(--window-header-height));overflow-y:hidden;background-color:#fff}iframe{border:none;width:100%;height:100%;background:#fff}
</style>
<div id="draggable" class="girafe-draggable-window">
<!-- Resize buttons-->
<button tabindex="-1" class="girafe-resizer tl corner"></button>
<button tabindex="-1" class="girafe-resizer t top-bottom"></button>
<button tabindex="-1" class="girafe-resizer tr corner"></button>
<button tabindex="-1" class="girafe-resizer r left-right"></button>
<button tabindex="-1" class="girafe-resizer br corner"></button>
<button tabindex="-1" class="girafe-resizer b top-bottom"></button>
<button tabindex="-1" class="girafe-resizer bl corner"></button>
<button tabindex="-1" class="girafe-resizer l left-right"></button>
<div id="header">
<span i18n="${this.state.infoWindow.title}"></span>
<img id="close" alt="close-icon" src="icons/close.svg" />
</div>
<div id="content">
<iframe title="iframe content" src="${this.state.infoWindow.url}"></iframe>
</div>
</div>
`;
}
});
Object.defineProperty(this, "visible", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "resizeWindow", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
// Initialize floating window
window.gOpenWindow = (title, url, width, height, top, left) => {
// Update infoWindow state
this.state.infoWindow.title = title;
this.state.infoWindow.url = url;
this.state.infoWindow.width = width ?? null;
this.state.infoWindow.height = height ?? null;
this.state.infoWindow.top = top ?? null;
this.state.infoWindow.left = left ?? null;
// Trigger window to appear
this.state.interface.infoWindowVisible = true;
};
this.updateWindowSizeAndPosition();
}
registerEvents() {
this.subscribe('interface.infoWindowVisible', (_oldValue, isVisible) => {
this.visible = isVisible;
this.render();
});
this.subscribe(/infoWindow\.(width|height|top|left)/, (oldValue, newValue) => {
if (oldValue !== newValue) {
this.updateWindowSizeAndPosition();
this.render();
}
});
this.subscribe(/infoWindow\.(url|title)/, () => this.render());
}
render() {
this.visible ? this.renderComponent() : this.renderEmptyComponent();
}
renderComponent() {
super.render();
this.girafeTranslate();
this.resizeWindow = new ResizeWindow(this.shadow);
this.makeDraggable();
}
renderEmptyComponent() {
this.resizeWindow?.destroy();
this.resizeWindow = null;
this.renderEmpty();
}
updateWindowSizeAndPosition() {
const windowConfig = this.configManager.Config.infoWindow;
const host = this.shadow.getRootNode().host;
host.style.width = this.configToCssValue(this.state.infoWindow.width) ?? windowConfig.defaultWindowWidth;
host.style.height = this.configToCssValue(this.state.infoWindow.height) ?? windowConfig.defaultWindowHeight;
host.style.top = this.configToCssValue(this.state.infoWindow.top) ?? windowConfig.defaultWindowPositionTop;
host.style.left = this.configToCssValue(this.state.infoWindow.left) ?? windowConfig.defaultWindowPositionLeft;
}
closeWindow() {
this.state.interface.infoWindowVisible = false;
}
connectedCallback() {
this.loadConfig().then(() => {
this.render();
this.registerEvents();
});
}
configToCssValue(value) {
if (typeof value === 'number' && value > 0)
return value + 'px';
if (typeof value === 'string') {
value = value.replace(' ', '');
if (Number(value) && Number(value) > 0)
return value + 'px';
// Check for a valid CSS
const matches = value.match(/^\d.*(px|em|rem|%)$/g);
return matches && matches.length === 1 ? value : null;
}
return null;
}
}
export default InfoWindowComponent;