@geogirafe/lib-geoportal/components/context-menu/default-context-menu-content/component.js

GeoGirafe is a flexible application to build online geoportals.

import { html as uHtml } from 'uhtml';
import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
import I18nManager from '../../../tools/i18n/i18nmanager';
import proj4 from 'proj4';
import { printCoordinate } from '../../../tools/geometrytools';
class MapDefaultContextMenuContentComponent extends GirafeHTMLElement {
    constructor() {
        super('default-context-menu-content');
        Object.defineProperty(this, "template", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: () => {
                return uHtml `<style>
table.custom-table{width:100%;border-collapse:collapse;margin:10px auto}table.custom-table tr{border-bottom:1px solid #ccc}table.custom-table td,table.custom-table th{padding:5px 0;vertical-align:middle;text-align:left}table.custom-table tr:last-child{border-bottom:none}tr{border-bottom:1px solid #000}.custom-cell{display:flex;align-items:center;height:100%;width:100%;overflow:hidden;text-overflow:ellipsis}
</style><style>
.map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;min-width:300px!important;position:absolute;box-sizing:content-box;background-color:var(--bkg-color)!important;color:var(--text-color);padding:15px;border-radius:0;border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);left:-165px}.map-info-contextmenu .tooltip-triangle{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:20px;height:var(--contextmenu-triangle-height);pointer-events:none}.map-info-contextmenu .tooltip-triangle .triangle-fill{fill:var(--bkg-color);stroke:none}.map-info-contextmenu .tooltip-triangle .triangle-border{fill:none;stroke:var(--text-color-grad1);stroke-width:var(--contextmenu-border-width)}.contextmenu-closer{text-decoration:none;position:absolute;top:0;right:0}.contextmenu-closer:after{content:'✖'}.justify-right{display:flex;justify-content:flex-end!important;align-items:center}.hidden{display:none}
</style><style>
*{font-family:Arial,sans-serif}.hidden{display:none!important}.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>
<div class="map-info-contextmenu">
  <button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button>
  <div>
    <table class="custom-table">
      <colgroup>
        <col style="width: 150px" />
        <col style="width: 120px" />
        <col style="width: 30px" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        ${this.MapContextMenuState.crs.map(f => uHtml `
        <tr>
          <td i18n="${f.translation}"></td>
          <td>
            ${this.printCoordinate(this.proj4(this.projection, f.code, this.position), f.format, f.precision).map((x) => uHtml `
            <div>${x}</div>
            `)}
          </td>
          <td>
            <div class="justify-right">
              <button
                class="gg-icon-button gg-small"
                tip="Copy value"
                tip-placement="top"
                onclick="${() => {
                    navigator.clipboard.writeText(this.printCoordinate(this.proj4(this.projection, f.code, this.position), f.format, f.precision).join(', '));
                }}">
                <img src="icons/content_copy.svg" alt="${this.i18nManager.getTranslation('Copy value')}" />
              </button>
            </div>
          </td>
        </tr>
        `)} ${this.MapContextMenuState.sources.map(f => uHtml `
        <tr>
          <td i18n="${f.translation}"></td>
          <td>
            <span class="custom-cell"
              >${f.content ? f.content : uHtml `<img
                src="icons/progress.svg"
                class="gg-spin gg-small"
                alt="${this.i18nManager.getTranslation('Loading')}" />`}
            </span>
          </td>
          <td>
            <div class="justify-right">
              <button
                class="gg-icon-button gg-small"
                tip="Copy value"
                tip-placement="top"
                onclick="${() => { navigator.clipboard.writeText(f.content ? f.content : ''); }}">
                <img src="icons/content_copy.svg" alt="${this.i18nManager.getTranslation('Copy value')}" />
              </button>
            </div>
          </td>
        </tr>
        `)}
      </tbody>
    </table>
  </div>
  <svg class="tooltip-triangle" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon points="0,0 10,10 20,0" class="triangle-fill" />
    <path d="M0,0 L10,10 L20,0" class="triangle-border" />
  </svg>
</div>
`;
            }
        });
        Object.defineProperty(this, "i18nManager", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "eventsCallbacks", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "MapContextMenuState", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "container", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "position", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "projection", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        Object.defineProperty(this, "proj4", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: proj4
        });
        Object.defineProperty(this, "printCoordinate", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: printCoordinate
        });
        this.i18nManager = I18nManager.getInstance();
    }
    async renderComponent() {
        super.render();
        super.girafeTranslate();
    }
    registerEvents() {
        this.eventsCallbacks.push(this.subscribe(/extendedState\.mapcontextmenu\.sources\..*\.content/, (_oldVal, _newVal) => {
            console.debug(`mapcontextmenu changed from: ${_oldVal} to: ${_newVal}`);
            super.render();
        }), this.subscribe('language', (_oldVal, _newVal) => {
            console.debug(`Language changed from: ${_oldVal} to: ${_newVal}`);
            super.render();
            super.girafeTranslate();
        }));
    }
    unregisterEvents() {
        this.unsubscribe(this.eventsCallbacks);
        this.eventsCallbacks.length = 0;
    }
    closeMenu() {
        this.container.hideContextMenu('default-overlay');
        this.unregisterEvents();
    }
    async connectedCallback() {
        await this.loadConfig();
        this.MapContextMenuState = this.container.MapContextMenuState;
        this.position = this.MapContextMenuState.position;
        this.projection = this.MapContextMenuState.projection;
        this.renderComponent();
        this.registerEvents();
    }
}
export default MapDefaultContextMenuContentComponent;