@geogirafe/lib-geoportal 1.1.0-dev.2450277666 → 1.1.0-dev.2454789578

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.
Files changed (6) hide show
  1. package/components/context-menu/custom-context-menu/component.js +5 -1
  2. package/components/context-menu/default-context-menu/component.d.ts +1 -1
  3. package/components/context-menu/default-context-menu/component.js +23 -19
  4. package/components/map/component.js +1 -1
  5. package/package.json +2 -2
  6. package/templates/public/about.json +1 -1
package/components/context-menu/custom-context-menu/component.js CHANGED
@@ -8,9 +8,13 @@ class MapCustomContextMenuComponent extends GirafeHTMLElement {
8
8
  styleUrls = null;
9
9
  template = () => {
10
10
  return uHtml `<style>
11
+ .map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);border-radius:0;position:absolute;left:0;transform:translate(-50%)}
12
+ </style><style>
11
13
  *{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,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.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{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.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{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{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);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.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()}.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{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.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{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
12
14
  </style><style>
13
- .map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;--popup-min:300px;--popup-max:400px;min-width:var(--popup-min);max-width:var(--popup-max);box-sizing:content-box;width:max-content;color:var(--text-color);border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);border-radius:0;padding:15px;position:absolute;left:0;transform:translate(-50%);background-color:var(--bkg-color)!important}.map-info-contextmenu .tooltip-triangle{width:20px;height:var(--contextmenu-triangle-height);pointer-events:none;position:absolute;top:100%;left:50%;transform:translate(-50%)}.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{align-items:center;display:flex;justify-content:flex-end!important}.hidden{display:none}
15
+ .map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;--popup-min:300px;--popup-max:400px;min-width:var(--popup-min);max-width:var(--popup-max);box-sizing:content-box;width:max-content;color:var(--text-color);border-radius:0;padding:15px;background-color:var(--bkg-color)!important}.map-info-contextmenu .tooltip-triangle{width:20px;height:var(--contextmenu-triangle-height);pointer-events:none;position:absolute;top:100%;left:50%;transform:translate(-50%)}.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:1px;right:1px}.contextmenu-closer:after{content:"✖"}.justify-right{align-items:center;display:flex;justify-content:flex-end!important}.hidden{display:none}.ol-popup.default>div{color:var(--text-color);background-color:var(--bkg-color)!important;border:1px solid var(--text-color-grad1)!important;border-radius:0!important}.ol-popup.default .anchor{color:var(--text-color-grad1)!important}.ol-popup.default .anchor:before{margin:1px -11px!important}
16
+ </style><style>
17
+ .ol-popup{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.9em}.ol-popup .ol-popup-content{cursor:default;padding:.25em .5em;overflow:hidden}.ol-popup.hasclosebox .ol-popup-content{margin-right:1.7em}.ol-popup .ol-popup-content:after{clear:both;content:"";height:0;font-size:0;display:block}.ol-popup .anchor{pointer-events:none;background:red;width:0;height:0;margin:-11px 22px;display:block;position:absolute}.ol-popup .anchor:after,.ol-popup .anchor:before{position:absolute}.ol-popup-right .anchor:after,.ol-popup-right .anchor:before{right:0}.ol-popup-top .anchor{top:0}.ol-popup-bottom .anchor{bottom:0}.ol-popup-right .anchor{right:0}.ol-popup-left .anchor{left:0}.ol-popup-center .anchor{left:50%;margin-left:0!important}.ol-popup-middle .anchor{top:50%;margin-top:0!important}.ol-popup-center.ol-popup-middle .anchor{display:none}.ol-popup.ol-fixed{margin:0!important;inset:.5em .5em auto auto!important;transform:none!important}.ol-popup.ol-fixed .anchor{display:none}.ol-popup.ol-fixed.anim>div{animation:none}.ol-popup .ol-fix{float:right;cursor:pointer;background:#fff;width:1em;height:.9em;margin:.2em;position:relative}.ol-popup .ol-fix:before{content:"";box-sizing:border-box;border:.1em solid #666;border-right-width:.3em;width:.8em;height:.7em;margin:.1em;display:block}.ol-popup.shadow{box-shadow:2px 2px 2px 2px #00000080}.ol-popup .closeBox{color:#fff;cursor:pointer;float:right;background-color:#003c8880;border:0;border-radius:2px;width:1.4em;height:1.4em;margin:5px 5px 0 0;padding:0;font-size:.9em;font-weight:700;display:none;position:relative}.ol-popup.hasclosebox .closeBox{display:block}.ol-popup .closeBox:hover{background-color:#003c88b3}.ol-popup .closeBox:after{content:"u00d7";text-align:center;width:100%;margin:-.5em 0;font-size:1.5em;line-height:1em;position:absolute;top:50%;left:0;right:0}.ol-popup.modifytouch{background-color:#eee}.ol-popup.modifytouch .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.modifytouch .ol-popup-content a{text-decoration:none}.ol-popup.tooltips{background-color:#ffa}.ol-popup.tooltips .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.default>div{background-color:#fff;border:1px solid #69f;border-radius:5px}.ol-popup.default{margin:-11px 0;transform:translateY(-22px)}.ol-popup-top.ol-popup.default{margin:11px 0;transform:none}.ol-popup-left.default{margin:-11px -22px;transform:translateY(-22px)}.ol-popup-top.ol-popup-left.default{margin:11px -22px;transform:none}.ol-popup-right.default{margin:-11px 22px;transform:translate(44px,-22px)}.ol-popup-top.ol-popup-right.default{margin:11px 22px;transform:translate(44px)}.ol-popup-middle.default{margin:0 10px;transform:none}.ol-popup-middle.ol-popup-right.default{margin:0 -10px;transform:translate(-20px)}.ol-popup.default .anchor{color:#69f}.ol-popup.default .anchor:after,.ol-popup.default .anchor:before{content:"";border:11px solid;border-color:currentColor #0000;margin:0 -11px}.ol-popup.default .anchor:after{border-width:11px;border-color:#fff #0000;margin:2px -11px}.ol-popup-top.default .anchor:before,.ol-popup-top.default .anchor:after{border-top:0;top:0}.ol-popup-bottom.default .anchor:before,.ol-popup-bottom.default .anchor:after{border-bottom:0;bottom:0}.ol-popup-middle.default .anchor:before{border-color:#0000 currentColor;margin:-11px -33px}.ol-popup-middle.default .anchor:after{border-color:#0000 #fff;margin:-11px -31px}.ol-popup-middle.ol-popup-left.default .anchor:before,.ol-popup-middle.ol-popup-left.default .anchor:after{border-left:0}.ol-popup-middle.ol-popup-right.default .anchor:before,.ol-popup-middle.ol-popup-right.default .anchor:after{border-right:0}.ol-popup.placemark{color:#c00;margin:-.65em 0;transform:translateY(-1.3em)}.ol-popup.placemark>div{width:2em;height:2em;min-width:unset;box-sizing:border-box;background-color:#fff;border:0;border-radius:50%;font-size:15px;position:relative;box-shadow:inset 0 0 0 .45em}.ol-popup.placemark .ol-popup-content{cursor:default;text-align:center;width:1em;height:1em;padding:.25em 0;line-height:1em;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ol-popup.placemark .anchor{margin:0}.ol-popup.placemark .anchor:before{content:"";background:0 0;border-radius:50%;width:1em;height:.5em;margin:-.5em;box-shadow:0 1em .5em #00000080}.ol-popup.placemark .anchor:after{content:"";border:.7em solid #0000;border-top:1em solid;border-bottom:0 solid;margin:-.75em -.7em;bottom:0}.ol-popup.placemark.shield>div{border-radius:.2em}.ol-popup.placemark.shield .anchor:after{border-width:.8em 1em 0;margin:-.7em -1em}.ol-popup.placemark.blazon>div{border-radius:.2em}.ol-popup.placemark.pushpin{margin:-2.2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin>div{border-radius:0;width:1.1em;box-shadow:inset 2em 0;background:0 0!important}.ol-popup.placemark.pushpin>div:before{content:"";pointer-events:none;border:.5em solid #0000;border-top:.3em solid;border-bottom-color:currentColor;width:1.3em;height:1.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ol-popup.placemark.needle{margin:-2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin .anchor,.ol-popup.placemark.needle .anchor{margin:-1.2em}.ol-popup.placemark.pushpin .anchor:after,.ol-popup.placemark.needle .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -.2em}.ol-popup.placemark.pushpin .anchor:before,.ol-popup.placemark.needle .anchor:before{margin:-.75em -.5em}.ol-popup.placemark.flagv{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flagv>div{box-shadow:none;background-color:#0000;border-radius:0}.ol-popup.placemark.flagv>div:before{content:"";pointer-events:none;border:1em solid #0000;border-left:2em solid;position:absolute}.ol-popup.placemark.flagv .anchor{margin:-1.4em}.ol-popup.placemark.flag{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flag>div{border-radius:0;transform-origin:0 150%!important}.ol-popup.placemark.flag .anchor{margin:-1.4em}.ol-popup.placemark.flagv .anchor:after,.ol-popup.placemark.flag .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -1em}.ol-popup.placemark.flagv .anchor:before,.ol-popup.placemark.flag .anchor:before{margin:-.75em -1.25em}.ol-popup.placemark.flag.finish{margin:-2em 1em}.ol-popup.placemark.flag.finish>div{background-image:linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor),linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor);background-position:.5em 0,0 .5em;background-size:1em 1em;box-shadow:inset 0 0 0 .25em}.ol-popup.black .closeBox{color:#f80;background-color:#00000080;border-radius:5px}.ol-popup.black .closeBox:hover{color:#da2;background-color:#000000b3}.ol-popup.black{margin:-20px 0;transform:translateY(-40px)}.ol-popup.black>div{color:#fff;background-color:#0009;border-radius:5px}.ol-popup-top.ol-popup.black{margin:20px 0;transform:none}.ol-popup-left.black{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.black{margin:20px -22px;transform:none}.ol-popup-right.black{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.black{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.black{margin:0 11px;transform:none}.ol-popup-left.ol-popup-middle.black{transform:none}.ol-popup-right.ol-popup-middle.black{margin:0 -11px;transform:translate(-22px)}.ol-popup.black .anchor{color:#0009;margin:-20px 11px}.ol-popup.black .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.black .anchor:before{border-top:0;top:0}.ol-popup-bottom.black .anchor:before{border-bottom:0;bottom:0}.ol-popup-middle.black .anchor:before{border-color:#0000 currentColor;margin:-20px -22px}.ol-popup-middle.ol-popup-left.black .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.black .anchor:before{border-right:0}.ol-popup-center.black .anchor:before{margin:0 -10px}.ol-popup.tips .closeBox{color:#fff;background-color:red;border-radius:50%;width:1.2em;height:1.2em}.ol-popup.tips .closeBox:hover{background-color:#f40}.ol-popup.tips{margin:-20px 0;transform:translateY(-40px)}.ol-popup.tips>div{color:#333;background-color:#cea;border:5px solid #ad7;border-radius:5px}.ol-popup-top.ol-popup.tips{margin:20px 0;transform:none}.ol-popup-left.tips{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.tips{margin:20px -22px;transform:none}.ol-popup-right.tips{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.tips{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.tips{margin:0;transform:none}.ol-popup-left.ol-popup-middle.tips{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.tips{margin:0 -22px;transform:translate(-44px)}.ol-popup.tips .anchor{color:#ad7;margin:-18px 22px}.ol-popup.tips .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.tips .anchor:before{border-top:0;top:0}.ol-popup-bottom.tips .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.tips .anchor:before{border-width:20px 6px;margin:0 -6px}.ol-popup-left.tips .anchor:before{border-left:0;margin-left:0}.ol-popup-right.tips .anchor:before{border-right:0;margin-right:0}.ol-popup-middle.tips .anchor:before{border-width:6px 20px;border-color:#0000 currentColor;margin:-6px -41px}.ol-popup-middle.ol-popup-left.tips .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.tips .anchor:before{border-right:0}.ol-popup.warning .closeBox{color:#fff;background-color:red;border-radius:50%;font-size:.83em}.ol-popup.warning .closeBox:hover{background-color:#f40}.ol-popup.warning{color:#900;background-color:#fd0;border:4px dashed red;border-radius:3px;margin:-28px 10px;transform:translateY(-56px)}.ol-popup-top.ol-popup.warning{margin:28px 10px;transform:none}.ol-popup-left.warning{margin:-28px -22px;transform:translateY(-56px)}.ol-popup-top.ol-popup-left.warning{margin:28px -22px;transform:none}.ol-popup-right.warning{margin:-28px 22px;transform:translate(44px,-56px)}.ol-popup-top.ol-popup-right.warning{margin:28px 22px;transform:translate(44px)}.ol-popup-middle.warning{margin:0;transform:none}.ol-popup-left.ol-popup-middle.warning{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.warning{margin:0 -22px;transform:translate(-44px)}.ol-popup.warning .anchor{margin:-33px 7px}.ol-popup.warning .anchor:before{content:"";border:30px solid red;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.warning .anchor:before{border-top:0;top:0}.ol-popup-bottom.warning .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.warning .anchor:before{margin:0 -21px}.ol-popup-middle.warning .anchor:before{border-width:10px 22px;border-color:#0000 red;margin:-10px -33px}.ol-popup-middle.ol-popup-left.warning .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.warning .anchor:before{border-right:0}.ol-popup .ol-popupfeature table{width:100%}.ol-popup .ol-popupfeature table td{text-overflow:ellipsis;max-width:25em;overflow:hidden}.ol-popup .ol-popupfeature table td img{max-width:100px;max-height:100px}.ol-popup .ol-popupfeature tr:nth-child(odd){background-color:#eee}.ol-popup .ol-popupfeature .ol-zoombt{color:#003c8880;background:0 0;border:0;outline:none;width:2em;height:2em;display:inline-block;position:relative}.ol-popup .ol-popupfeature .ol-zoombt:before{content:"";box-sizing:border-box;background-color:#0000;border:.17em solid;border-radius:100%;width:1em;height:1em;position:absolute;top:.3em;left:.3em}.ol-popup .ol-popupfeature .ol-zoombt:after{content:"";box-sizing:border-box;border-style:solid;border-width:.1em .3em;border-radius:.03em;position:absolute;top:1.35em;left:1.15em;transform:rotate(45deg);box-shadow:-.2em 0 0 -.04em}.ol-popup .ol-popupfeature .ol-count{float:right;margin:.25em 0}.ol-popup .ol-popupfeature .ol-prev,.ol-popup .ol-popupfeature .ol-next{vertical-align:bottom;cursor:pointer;border:.5em solid #0000;border-left-color:#003c8880;border-right:0 solid #003c8880;margin:0 .5em;display:inline-block}.ol-popup .ol-popupfeature .ol-prev{border-width:.5em .5em .5em 0}.ol-popup.tooltips.black{background-color:#0000}.ol-popup.tooltips.black>div{background-color:#00000080;padding:.2em .5em;transform:scaleY(1.3)}.ol-popup-middle.tooltips.black .anchor:before{border-width:5px 10px;margin:-5px -21px}.ol-popup-center.ol-popup-middle,.ol-popup-top.ol-popup-left.ol-fixPopup,.ol-popup-top.ol-popup-right.ol-fixPopup,.ol-popup.ol-fixPopup{margin:0}
14
18
  </style>
15
19
  <div class="map-info-contextmenu"><button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button><div>${this.htmlUnsafe(this.state.position.tooltip?.content ?? '')}</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>`;
16
20
  };
package/components/context-menu/default-context-menu/component.d.ts CHANGED
@@ -10,7 +10,7 @@ declare class MapDefaultContextMenuComponent extends GirafeHTMLElement {
10
10
  private readonly eventsCallbacks;
11
11
  protected mapContextMenuState: MapContextMenuState;
12
12
  protected mapContextMenuManager: MapContextMenuManager;
13
- private contextMenuOverlay?;
13
+ private contextMenuPopup?;
14
14
  host: HTMLDivElement;
15
15
  printCoordinate: typeof printCoordinate;
16
16
  constructor();
package/components/context-menu/default-context-menu/component.js CHANGED
@@ -2,9 +2,9 @@ import { html as uHtml } from 'uhtml';
2
2
  import { render } from 'uhtml';
3
3
  import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
4
4
  import { printCoordinate } from '../../../tools/geometrytools.js';
5
- import { Overlay } from 'ol';
6
5
  import { MapContextMenuState } from './contextmenustate.js';
7
6
  import MapContextMenuManager from './contextmenumanager.js';
7
+ import Popup from 'ol-ext/overlay/Popup.js';
8
8
  class MapDefaultContextMenuComponent extends GirafeHTMLElement {
9
9
  templateUrl = null;
10
10
  styleUrls = null;
@@ -14,9 +14,11 @@ table.custom-table{width:100%;max-width:100%;min-width:var(--popup-min);table-la
14
14
  </style><style>
15
15
  *{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,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.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{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.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{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{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);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.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()}.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{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.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{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
16
16
  </style><style>
17
- .map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;--popup-min:300px;--popup-max:400px;min-width:var(--popup-min);max-width:var(--popup-max);box-sizing:content-box;width:max-content;color:var(--text-color);border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);border-radius:0;padding:15px;position:absolute;left:0;transform:translate(-50%);background-color:var(--bkg-color)!important}.map-info-contextmenu .tooltip-triangle{width:20px;height:var(--contextmenu-triangle-height);pointer-events:none;position:absolute;top:100%;left:50%;transform:translate(-50%)}.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{align-items:center;display:flex;justify-content:flex-end!important}.hidden{display:none}
17
+ .map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;--popup-min:300px;--popup-max:400px;min-width:var(--popup-min);max-width:var(--popup-max);box-sizing:content-box;width:max-content;color:var(--text-color);border-radius:0;padding:15px;background-color:var(--bkg-color)!important}.map-info-contextmenu .tooltip-triangle{width:20px;height:var(--contextmenu-triangle-height);pointer-events:none;position:absolute;top:100%;left:50%;transform:translate(-50%)}.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:1px;right:1px}.contextmenu-closer:after{content:"✖"}.justify-right{align-items:center;display:flex;justify-content:flex-end!important}.hidden{display:none}.ol-popup.default>div{color:var(--text-color);background-color:var(--bkg-color)!important;border:1px solid var(--text-color-grad1)!important;border-radius:0!important}.ol-popup.default .anchor{color:var(--text-color-grad1)!important}.ol-popup.default .anchor:before{margin:1px -11px!important}
18
+ </style><style>
19
+ .ol-popup{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.9em}.ol-popup .ol-popup-content{cursor:default;padding:.25em .5em;overflow:hidden}.ol-popup.hasclosebox .ol-popup-content{margin-right:1.7em}.ol-popup .ol-popup-content:after{clear:both;content:"";height:0;font-size:0;display:block}.ol-popup .anchor{pointer-events:none;background:red;width:0;height:0;margin:-11px 22px;display:block;position:absolute}.ol-popup .anchor:after,.ol-popup .anchor:before{position:absolute}.ol-popup-right .anchor:after,.ol-popup-right .anchor:before{right:0}.ol-popup-top .anchor{top:0}.ol-popup-bottom .anchor{bottom:0}.ol-popup-right .anchor{right:0}.ol-popup-left .anchor{left:0}.ol-popup-center .anchor{left:50%;margin-left:0!important}.ol-popup-middle .anchor{top:50%;margin-top:0!important}.ol-popup-center.ol-popup-middle .anchor{display:none}.ol-popup.ol-fixed{margin:0!important;inset:.5em .5em auto auto!important;transform:none!important}.ol-popup.ol-fixed .anchor{display:none}.ol-popup.ol-fixed.anim>div{animation:none}.ol-popup .ol-fix{float:right;cursor:pointer;background:#fff;width:1em;height:.9em;margin:.2em;position:relative}.ol-popup .ol-fix:before{content:"";box-sizing:border-box;border:.1em solid #666;border-right-width:.3em;width:.8em;height:.7em;margin:.1em;display:block}.ol-popup.shadow{box-shadow:2px 2px 2px 2px #00000080}.ol-popup .closeBox{color:#fff;cursor:pointer;float:right;background-color:#003c8880;border:0;border-radius:2px;width:1.4em;height:1.4em;margin:5px 5px 0 0;padding:0;font-size:.9em;font-weight:700;display:none;position:relative}.ol-popup.hasclosebox .closeBox{display:block}.ol-popup .closeBox:hover{background-color:#003c88b3}.ol-popup .closeBox:after{content:"u00d7";text-align:center;width:100%;margin:-.5em 0;font-size:1.5em;line-height:1em;position:absolute;top:50%;left:0;right:0}.ol-popup.modifytouch{background-color:#eee}.ol-popup.modifytouch .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.modifytouch .ol-popup-content a{text-decoration:none}.ol-popup.tooltips{background-color:#ffa}.ol-popup.tooltips .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.default>div{background-color:#fff;border:1px solid #69f;border-radius:5px}.ol-popup.default{margin:-11px 0;transform:translateY(-22px)}.ol-popup-top.ol-popup.default{margin:11px 0;transform:none}.ol-popup-left.default{margin:-11px -22px;transform:translateY(-22px)}.ol-popup-top.ol-popup-left.default{margin:11px -22px;transform:none}.ol-popup-right.default{margin:-11px 22px;transform:translate(44px,-22px)}.ol-popup-top.ol-popup-right.default{margin:11px 22px;transform:translate(44px)}.ol-popup-middle.default{margin:0 10px;transform:none}.ol-popup-middle.ol-popup-right.default{margin:0 -10px;transform:translate(-20px)}.ol-popup.default .anchor{color:#69f}.ol-popup.default .anchor:after,.ol-popup.default .anchor:before{content:"";border:11px solid;border-color:currentColor #0000;margin:0 -11px}.ol-popup.default .anchor:after{border-width:11px;border-color:#fff #0000;margin:2px -11px}.ol-popup-top.default .anchor:before,.ol-popup-top.default .anchor:after{border-top:0;top:0}.ol-popup-bottom.default .anchor:before,.ol-popup-bottom.default .anchor:after{border-bottom:0;bottom:0}.ol-popup-middle.default .anchor:before{border-color:#0000 currentColor;margin:-11px -33px}.ol-popup-middle.default .anchor:after{border-color:#0000 #fff;margin:-11px -31px}.ol-popup-middle.ol-popup-left.default .anchor:before,.ol-popup-middle.ol-popup-left.default .anchor:after{border-left:0}.ol-popup-middle.ol-popup-right.default .anchor:before,.ol-popup-middle.ol-popup-right.default .anchor:after{border-right:0}.ol-popup.placemark{color:#c00;margin:-.65em 0;transform:translateY(-1.3em)}.ol-popup.placemark>div{width:2em;height:2em;min-width:unset;box-sizing:border-box;background-color:#fff;border:0;border-radius:50%;font-size:15px;position:relative;box-shadow:inset 0 0 0 .45em}.ol-popup.placemark .ol-popup-content{cursor:default;text-align:center;width:1em;height:1em;padding:.25em 0;line-height:1em;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ol-popup.placemark .anchor{margin:0}.ol-popup.placemark .anchor:before{content:"";background:0 0;border-radius:50%;width:1em;height:.5em;margin:-.5em;box-shadow:0 1em .5em #00000080}.ol-popup.placemark .anchor:after{content:"";border:.7em solid #0000;border-top:1em solid;border-bottom:0 solid;margin:-.75em -.7em;bottom:0}.ol-popup.placemark.shield>div{border-radius:.2em}.ol-popup.placemark.shield .anchor:after{border-width:.8em 1em 0;margin:-.7em -1em}.ol-popup.placemark.blazon>div{border-radius:.2em}.ol-popup.placemark.pushpin{margin:-2.2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin>div{border-radius:0;width:1.1em;box-shadow:inset 2em 0;background:0 0!important}.ol-popup.placemark.pushpin>div:before{content:"";pointer-events:none;border:.5em solid #0000;border-top:.3em solid;border-bottom-color:currentColor;width:1.3em;height:1.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ol-popup.placemark.needle{margin:-2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin .anchor,.ol-popup.placemark.needle .anchor{margin:-1.2em}.ol-popup.placemark.pushpin .anchor:after,.ol-popup.placemark.needle .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -.2em}.ol-popup.placemark.pushpin .anchor:before,.ol-popup.placemark.needle .anchor:before{margin:-.75em -.5em}.ol-popup.placemark.flagv{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flagv>div{box-shadow:none;background-color:#0000;border-radius:0}.ol-popup.placemark.flagv>div:before{content:"";pointer-events:none;border:1em solid #0000;border-left:2em solid;position:absolute}.ol-popup.placemark.flagv .anchor{margin:-1.4em}.ol-popup.placemark.flag{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flag>div{border-radius:0;transform-origin:0 150%!important}.ol-popup.placemark.flag .anchor{margin:-1.4em}.ol-popup.placemark.flagv .anchor:after,.ol-popup.placemark.flag .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -1em}.ol-popup.placemark.flagv .anchor:before,.ol-popup.placemark.flag .anchor:before{margin:-.75em -1.25em}.ol-popup.placemark.flag.finish{margin:-2em 1em}.ol-popup.placemark.flag.finish>div{background-image:linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor),linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor);background-position:.5em 0,0 .5em;background-size:1em 1em;box-shadow:inset 0 0 0 .25em}.ol-popup.black .closeBox{color:#f80;background-color:#00000080;border-radius:5px}.ol-popup.black .closeBox:hover{color:#da2;background-color:#000000b3}.ol-popup.black{margin:-20px 0;transform:translateY(-40px)}.ol-popup.black>div{color:#fff;background-color:#0009;border-radius:5px}.ol-popup-top.ol-popup.black{margin:20px 0;transform:none}.ol-popup-left.black{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.black{margin:20px -22px;transform:none}.ol-popup-right.black{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.black{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.black{margin:0 11px;transform:none}.ol-popup-left.ol-popup-middle.black{transform:none}.ol-popup-right.ol-popup-middle.black{margin:0 -11px;transform:translate(-22px)}.ol-popup.black .anchor{color:#0009;margin:-20px 11px}.ol-popup.black .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.black .anchor:before{border-top:0;top:0}.ol-popup-bottom.black .anchor:before{border-bottom:0;bottom:0}.ol-popup-middle.black .anchor:before{border-color:#0000 currentColor;margin:-20px -22px}.ol-popup-middle.ol-popup-left.black .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.black .anchor:before{border-right:0}.ol-popup-center.black .anchor:before{margin:0 -10px}.ol-popup.tips .closeBox{color:#fff;background-color:red;border-radius:50%;width:1.2em;height:1.2em}.ol-popup.tips .closeBox:hover{background-color:#f40}.ol-popup.tips{margin:-20px 0;transform:translateY(-40px)}.ol-popup.tips>div{color:#333;background-color:#cea;border:5px solid #ad7;border-radius:5px}.ol-popup-top.ol-popup.tips{margin:20px 0;transform:none}.ol-popup-left.tips{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.tips{margin:20px -22px;transform:none}.ol-popup-right.tips{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.tips{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.tips{margin:0;transform:none}.ol-popup-left.ol-popup-middle.tips{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.tips{margin:0 -22px;transform:translate(-44px)}.ol-popup.tips .anchor{color:#ad7;margin:-18px 22px}.ol-popup.tips .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.tips .anchor:before{border-top:0;top:0}.ol-popup-bottom.tips .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.tips .anchor:before{border-width:20px 6px;margin:0 -6px}.ol-popup-left.tips .anchor:before{border-left:0;margin-left:0}.ol-popup-right.tips .anchor:before{border-right:0;margin-right:0}.ol-popup-middle.tips .anchor:before{border-width:6px 20px;border-color:#0000 currentColor;margin:-6px -41px}.ol-popup-middle.ol-popup-left.tips .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.tips .anchor:before{border-right:0}.ol-popup.warning .closeBox{color:#fff;background-color:red;border-radius:50%;font-size:.83em}.ol-popup.warning .closeBox:hover{background-color:#f40}.ol-popup.warning{color:#900;background-color:#fd0;border:4px dashed red;border-radius:3px;margin:-28px 10px;transform:translateY(-56px)}.ol-popup-top.ol-popup.warning{margin:28px 10px;transform:none}.ol-popup-left.warning{margin:-28px -22px;transform:translateY(-56px)}.ol-popup-top.ol-popup-left.warning{margin:28px -22px;transform:none}.ol-popup-right.warning{margin:-28px 22px;transform:translate(44px,-56px)}.ol-popup-top.ol-popup-right.warning{margin:28px 22px;transform:translate(44px)}.ol-popup-middle.warning{margin:0;transform:none}.ol-popup-left.ol-popup-middle.warning{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.warning{margin:0 -22px;transform:translate(-44px)}.ol-popup.warning .anchor{margin:-33px 7px}.ol-popup.warning .anchor:before{content:"";border:30px solid red;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.warning .anchor:before{border-top:0;top:0}.ol-popup-bottom.warning .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.warning .anchor:before{margin:0 -21px}.ol-popup-middle.warning .anchor:before{border-width:10px 22px;border-color:#0000 red;margin:-10px -33px}.ol-popup-middle.ol-popup-left.warning .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.warning .anchor:before{border-right:0}.ol-popup .ol-popupfeature table{width:100%}.ol-popup .ol-popupfeature table td{text-overflow:ellipsis;max-width:25em;overflow:hidden}.ol-popup .ol-popupfeature table td img{max-width:100px;max-height:100px}.ol-popup .ol-popupfeature tr:nth-child(odd){background-color:#eee}.ol-popup .ol-popupfeature .ol-zoombt{color:#003c8880;background:0 0;border:0;outline:none;width:2em;height:2em;display:inline-block;position:relative}.ol-popup .ol-popupfeature .ol-zoombt:before{content:"";box-sizing:border-box;background-color:#0000;border:.17em solid;border-radius:100%;width:1em;height:1em;position:absolute;top:.3em;left:.3em}.ol-popup .ol-popupfeature .ol-zoombt:after{content:"";box-sizing:border-box;border-style:solid;border-width:.1em .3em;border-radius:.03em;position:absolute;top:1.35em;left:1.15em;transform:rotate(45deg);box-shadow:-.2em 0 0 -.04em}.ol-popup .ol-popupfeature .ol-count{float:right;margin:.25em 0}.ol-popup .ol-popupfeature .ol-prev,.ol-popup .ol-popupfeature .ol-next{vertical-align:bottom;cursor:pointer;border:.5em solid #0000;border-left-color:#003c8880;border-right:0 solid #003c8880;margin:0 .5em;display:inline-block}.ol-popup .ol-popupfeature .ol-prev{border-width:.5em .5em .5em 0}.ol-popup.tooltips.black{background-color:#0000}.ol-popup.tooltips.black>div{background-color:#00000080;padding:.2em .5em;transform:scaleY(1.3)}.ol-popup-middle.tooltips.black .anchor:before{border-width:5px 10px;margin:-5px -21px}.ol-popup-center.ol-popup-middle,.ol-popup-top.ol-popup-left.ol-fixPopup,.ol-popup-top.ol-popup-right.ol-fixPopup,.ol-popup.ol-fixPopup{margin:0}
18
20
  </style>
19
- <div class="map-info-contextmenu"><button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button><div><table class="custom-table"><col class="col-1"><col><col class="col-3"><thead><tr><th scope="col"><th scope="col"><th scope="col"><tbody>${this.mapContextMenuState.crs.map(f => uHtml `<tr><td i18n="${f.translation}"><td>${this.printCoordinate(f.coordinate, f.format, f.precision).join(', ')}<td><div class="justify-right"><button class="gg-icon-button gg-small" onclick="${() => { navigator.clipboard.writeText(this.printCoordinate(f.coordinate, f.format, f.precision).join(', ')); }}"><img src="icons/content_copy.svg" alt="${this.context.i18nManager.getTranslation('Copy value')}"></button></div></tr>`)} ${this.mapContextMenuState.sources.map(f => uHtml `<tr><td i18n="${f.translation}"><td><div class="center-vertically">${f.loading ? uHtml `<img src="icons/progress.svg" class="gg-spin gg-small" alt="${this.context.i18nManager.getTranslation('Loading')}"> ` : ''} ${f.content ? f.content : this.context.i18nManager.getTranslation('No data')}</div><td><div class="justify-right"><button class="gg-icon-button gg-small" onclick="${() => { navigator.clipboard.writeText(f.content ? f.content : ''); }}"><img src="icons/content_copy.svg" alt="${this.context.i18nManager.getTranslation('Copy value')}"></button></div></tr>`)}</table><div>${this.mapContextMenuState.links.map(f => uHtml `<div class="link-div"><a href="${f.content}" target="_blank">${this.context.i18nManager.getTranslation(f.translation)}</a> <img src="icons/open_in_new.svg" alt=""></div>`)}</div></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>`;
21
+ <div class="map-info-contextmenu"><button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button><div><table class="custom-table"><col class="col-1"><col><col class="col-3"><thead><tr><th scope="col"><th scope="col"><th scope="col"><tbody>${this.mapContextMenuState.crs.map(f => uHtml `<tr><td i18n="${f.translation}"><td>${this.printCoordinate(f.coordinate, f.format, f.precision).join(', ')}<td><div class="justify-right"><button class="gg-icon-button gg-small" onclick="${() => { navigator.clipboard.writeText(this.printCoordinate(f.coordinate, f.format, f.precision).join(', ')); }}"><img src="icons/content_copy.svg" alt="${this.context.i18nManager.getTranslation('Copy value')}"></button></div></tr>`)} ${this.mapContextMenuState.sources.map(f => uHtml `<tr><td i18n="${f.translation}"><td><div class="center-vertically">${f.loading ? uHtml `<img src="icons/progress.svg" class="gg-spin gg-small" alt="${this.context.i18nManager.getTranslation('Loading')}"> ` : ''} ${f.content ? f.content : this.context.i18nManager.getTranslation('No data')}</div><td><div class="justify-right"><button class="gg-icon-button gg-small" onclick="${() => { navigator.clipboard.writeText(f.content ? f.content : ''); }}"><img src="icons/content_copy.svg" alt="${this.context.i18nManager.getTranslation('Copy value')}"></button></div></tr>`)}</table><div>${this.mapContextMenuState.links.map(f => uHtml `<div class="link-div"><a href="${f.content}" target="_blank">${this.context.i18nManager.getTranslation(f.translation)}</a> <img src="icons/open_in_new.svg" alt=""></div>`)}</div></div></div>`;
20
22
  };
21
23
  get map() {
22
24
  return this.context.mapManager.getMap();
@@ -24,7 +26,7 @@ table.custom-table{width:100%;max-width:100%;min-width:var(--popup-min);table-la
24
26
  eventsCallbacks = [];
25
27
  mapContextMenuState;
26
28
  mapContextMenuManager;
27
- contextMenuOverlay;
29
+ contextMenuPopup;
28
30
  host;
29
31
  printCoordinate = printCoordinate;
30
32
  constructor() {
@@ -42,26 +44,28 @@ table.custom-table{width:100%;max-width:100%;min-width:var(--popup-min);table-la
42
44
  }
43
45
  showContextMenu() {
44
46
  this.registerEvents();
45
- if (!this.contextMenuOverlay) {
46
- this.renderContent();
47
- this.contextMenuOverlay = new Overlay({
48
- element: this.host,
49
- autoPan: { animation: { duration: 250 } }
50
- });
51
- this.map.addOverlay(this.contextMenuOverlay);
52
- }
53
- else {
54
- this.renderContent();
55
- }
56
- this.contextMenuOverlay.setPosition(this.mapContextMenuState.position);
47
+ this.renderContent().then(() => {
48
+ if (!this.contextMenuPopup) {
49
+ this.contextMenuPopup = new Popup({
50
+ autoPan: { animation: { duration: 250 } }
51
+ });
52
+ this.map.addOverlay(this.contextMenuPopup);
53
+ }
54
+ if (this.mapContextMenuState.position === undefined) {
55
+ this.contextMenuPopup.hide();
56
+ }
57
+ else {
58
+ this.contextMenuPopup.show(this.mapContextMenuState.position, this.host);
59
+ }
60
+ });
57
61
  }
58
62
  closeMenu() {
59
63
  this.mapContextMenuState.visible = false;
60
64
  this.unregisterEvents();
61
65
  }
62
66
  hideContextMenu() {
63
- if (this.contextMenuOverlay) {
64
- this.contextMenuOverlay.setPosition(undefined);
67
+ if (this.contextMenuPopup) {
68
+ this.contextMenuPopup.hide();
65
69
  }
66
70
  }
67
71
  registerVisibilityEvents() {
@@ -81,7 +85,7 @@ table.custom-table{width:100%;max-width:100%;min-width:var(--popup-min);table-la
81
85
  this.renderContent();
82
86
  }), this.subscribe('language', (_oldVal, _newVal) => {
83
87
  console.debug(`Language changed from: ${_oldVal} to: ${_newVal}`);
84
- if (this.contextMenuOverlay) {
88
+ if (this.contextMenuPopup) {
85
89
  this.renderContent();
86
90
  }
87
91
  }));
package/components/map/component.js CHANGED
@@ -49,7 +49,7 @@ export default class MapComponent extends GirafeHTMLElement {
49
49
  return uHtml `<style>
50
50
  *{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,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.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{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.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{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{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);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.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()}.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{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.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{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
51
51
  </style><style>
52
- #container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
52
+ #container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
53
53
  </style>
54
54
  <link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
55
55
  };
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "name": "GeoGirafe PSC",
6
6
  "url": "https://doc.geomapfish.dev"
7
7
  },
8
- "version": "1.1.0-dev.2450277666",
8
+ "version": "1.1.0-dev.2454789578",
9
9
  "type": "module",
10
10
  "engines": {
11
11
  "node": ">=20.19.0"
@@ -56,7 +56,7 @@
56
56
  "cesium": ">1.113",
57
57
  "ol": ">=10.8",
58
58
  "ol-ext": "4",
59
- "ol-mapbox-style": "12",
59
+ "ol-mapbox-style": ">=12",
60
60
  "olcs": "2",
61
61
  "proj4": "2"
62
62
  },
package/templates/public/about.json CHANGED
@@ -1 +1 @@
1
- {"version":"1.1.0-dev.2450277666", "build":"2450277666", "date":"13/04/2026"}
1
+ {"version":"1.1.0-dev.2454789578", "build":"2454789578", "date":"15/04/2026"}