@geogirafe/lib-geoportal 1.1.0-dev.2454204354 → 1.1.0-dev.2456762594
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.
- package/LICENSE +11 -0
- package/assets/i18n/de.json +2 -0
- package/assets/i18n/en.json +2 -0
- package/assets/i18n/fr.json +2 -0
- package/assets/i18n/it.json +2 -0
- package/components/context-menu/custom-context-menu/component.js +5 -1
- package/components/context-menu/default-context-menu/component.d.ts +1 -1
- package/components/context-menu/default-context-menu/component.js +23 -19
- package/components/help/component.d.ts +3 -2
- package/components/help/component.js +15 -5
- package/components/help/images/circled_black.webp +0 -0
- package/components/help/images/circled_white.webp +0 -0
- package/components/map/component.js +1 -1
- package/package.json +1 -1
- package/templates/public/about.json +1 -1
- package/tools/main.d.ts +1 -0
- package/tools/main.js +1 -0
- package/tools/onboarding/onboardingmanager.d.ts +2 -1
- package/tools/onboarding/onboardingmanager.js +7 -3
- package/tools/utils/async.d.ts +1 -0
- package/tools/utils/async.js +1 -0
package/LICENSE
CHANGED
|
@@ -290,6 +290,17 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
|
290
290
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
291
291
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
292
292
|
|
|
293
|
+
-------------------------------------------------------------------------------
|
|
294
|
+
|
|
295
|
+
Thanks to the Invisible Artists
|
|
296
|
+
|
|
297
|
+
Some images in this project come from the public domain.
|
|
298
|
+
Their names may have faded with time, but their impact has not.
|
|
299
|
+
Thanks a lot to them:
|
|
300
|
+
|
|
301
|
+
- https://openclipart.org/artist/nadsud
|
|
302
|
+
|
|
303
|
+
|
|
293
304
|
-------------------------------------------------------------------------------
|
|
294
305
|
|
|
295
306
|
===============================================================================
|
package/assets/i18n/de.json
CHANGED
|
@@ -181,6 +181,8 @@
|
|
|
181
181
|
"help": "Hilfe",
|
|
182
182
|
"help-basemap": "Wählen Sie aus den verfügbaren Hintergrundkarten, um Ihre Ansicht anzupassen.",
|
|
183
183
|
"help-menu": "Greifen Sie auf erweiterte Werkzeuge zu, wie Drucken, Zeichnen, 3D-Ansicht und mehr.",
|
|
184
|
+
"help-onboarding": "Starten Sie die Onboarding Tour erneut.",
|
|
185
|
+
"help-onboarding-link": "Klicken Sie hier zum starten.",
|
|
184
186
|
"help-search": "Suchen Sie nach einem Ort, einer Adresse, einer Karte oder Geodaten.",
|
|
185
187
|
"help-themes": "Entdecken Sie die verfügbaren Themen. Nach der Auswahl werden die zugehörigen Karten automatisch geladen.",
|
|
186
188
|
"help-user-preferences": "Verwalten Sie Ihre Benutzereinstellungen, einschließlich Sprache, Anzeigemodus und Kartenoptionen.",
|
package/assets/i18n/en.json
CHANGED
|
@@ -182,6 +182,8 @@
|
|
|
182
182
|
"help": "Help",
|
|
183
183
|
"help-basemap": "Choose from available background layers to customize your view.",
|
|
184
184
|
"help-menu": "Access advanced tools such as printing, drawing, 3D view, and more.",
|
|
185
|
+
"help-onboarding": "Restart the onboarding tour.",
|
|
186
|
+
"help-onboarding-link": "Click here to start.",
|
|
185
187
|
"help-search": "Search for a place, address, map, or geographic data.",
|
|
186
188
|
"help-themes": "Explore available topics. Once selected, the associated maps load automatically.",
|
|
187
189
|
"help-user-preferences": "Manage your user preferences, like language, display mode and map options.",
|
package/assets/i18n/fr.json
CHANGED
|
@@ -181,6 +181,8 @@
|
|
|
181
181
|
"help": "Aide",
|
|
182
182
|
"help-basemap": "Choisissez les fonds de carte disponibles pour personnaliser votre affichage.",
|
|
183
183
|
"help-menu": "Accédez à des outils avancés comme l'impression, le dessin, la vue 3D, et plus encore.",
|
|
184
|
+
"help-onboarding": "Relancer le tour d'onboarding.",
|
|
185
|
+
"help-onboarding-link": "Cliquez ici pour commencer.",
|
|
184
186
|
"help-search": "Recherchez un lieu, une adresse, une carte ou une donnée géographique.",
|
|
185
187
|
"help-themes": "Explorez les thèmes disponibles. Une fois un thème sélectionné, les cartes associées s'affichent automatiquement.",
|
|
186
188
|
"help-user-preferences": "Gérez vos préférences utilisateur, notamment la langue, le mode d'affichage et les options de la carte.",
|
package/assets/i18n/it.json
CHANGED
|
@@ -181,6 +181,8 @@
|
|
|
181
181
|
"help": "Aiuto",
|
|
182
182
|
"help-basemap": "Scegli tra gli sfondi cartografici disponibili per personalizzare la visualizzazione.",
|
|
183
183
|
"help-menu": "Accedi a strumenti avanzati come stampa, disegno, vista 3D e altro ancora.",
|
|
184
|
+
"help-onboarding": "Riavvia il tour di onboarding.",
|
|
185
|
+
"help-onboarding-link": "Clicca qui per iniziare.",
|
|
184
186
|
"help-search": "Cerca un luogo, un indirizzo, una mappa o un dato geografico.",
|
|
185
187
|
"help-themes": "Scopri i temi disponibili. Selezionando un tema, le mappe correlate vengono caricate automaticamente.",
|
|
186
188
|
"help-user-preferences": "Gestisci le preferenze utente, inclusa la lingua, la modalità di visualizzazione e le opzioni mappa.",
|
|
@@ -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
|
|
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
|
};
|
|
@@ -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
|
|
13
|
+
private contextMenuPopup?;
|
|
14
14
|
host: HTMLDivElement;
|
|
15
15
|
printCoordinate: typeof printCoordinate;
|
|
16
16
|
constructor();
|
|
@@ -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
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
46
|
-
this.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
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.
|
|
64
|
-
this.
|
|
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.
|
|
88
|
+
if (this.contextMenuPopup) {
|
|
85
89
|
this.renderContent();
|
|
86
90
|
}
|
|
87
91
|
}));
|
|
@@ -7,18 +7,19 @@ declare class HelpComponent extends GirafeHTMLElement {
|
|
|
7
7
|
themes: HTMLElement;
|
|
8
8
|
search: HTMLElement;
|
|
9
9
|
menu: HTMLElement;
|
|
10
|
+
onboarding: HTMLElement;
|
|
10
11
|
basemap: HTMLElement;
|
|
11
12
|
userPreferences: HTMLElement;
|
|
12
13
|
darkFrontendMode: boolean;
|
|
13
|
-
arrowBlack: string;
|
|
14
|
-
arrowWhite: string;
|
|
15
14
|
currentArrow?: string;
|
|
15
|
+
currentCircle?: string;
|
|
16
16
|
constructor();
|
|
17
17
|
render(): void;
|
|
18
18
|
private hideHelpFor;
|
|
19
19
|
registerEvents(): void;
|
|
20
20
|
changeArrowColor(): void;
|
|
21
21
|
toggleHelp(visible: boolean): void;
|
|
22
|
+
startOnboardingTour(): void;
|
|
22
23
|
protected connectedCallback(): void;
|
|
23
24
|
}
|
|
24
25
|
export default HelpComponent;
|
|
@@ -3,7 +3,10 @@ import { html as uHtml } from 'uhtml';
|
|
|
3
3
|
import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
|
|
4
4
|
import ArrowBlack from './images/arrow_black.webp';
|
|
5
5
|
import ArrowWhite from './images/arrow_white.webp';
|
|
6
|
+
import CircledBlack from './images/circled_black.webp';
|
|
7
|
+
import CircledWhite from './images/circled_white.webp';
|
|
6
8
|
import { systemIsInDarkMode } from '../../tools/utils/utils.js';
|
|
9
|
+
import { noop } from '../../tools/utils/async.js';
|
|
7
10
|
class HelpComponent extends GirafeHTMLElement {
|
|
8
11
|
templateUrl = null;
|
|
9
12
|
styleUrls = null;
|
|
@@ -11,20 +14,20 @@ class HelpComponent extends GirafeHTMLElement {
|
|
|
11
14
|
return uHtml `<style>
|
|
12
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}
|
|
13
16
|
</style><style>
|
|
14
|
-
#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
|
|
17
|
+
#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#onboarding,#onboarding-description{--onboarding-help-width:320px;--onboarding-help-height:160px}#onboarding{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);background-size:var(--onboarding-help-width) var(--onboarding-help-height)}#onboarding-description{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);text-align:center;flex-direction:column;align-items:center;display:flex;& span{flex-grow:1;align-content:center;align-items:end;margin:0 4rem;display:inline-flex}& button{cursor:pointer;font:inherit;color:currentColor;-webkit-appearance:none;background:0 0;border:0;flex-grow:1;align-items:baseline;margin:0 4rem;padding:0;text-decoration:underline;display:inline-flex}}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
|
|
15
18
|
</style>
|
|
16
|
-
<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
|
|
19
|
+
<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="onboarding" class="box"></div><div id="onboarding-description" class="description"><span i18n="help-onboarding"></span> <button i18n="help-onboarding-link" onclick="${() => this.startOnboardingTour()}"></button></div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
|
|
17
20
|
};
|
|
18
21
|
content;
|
|
19
22
|
themes;
|
|
20
23
|
search;
|
|
21
24
|
menu;
|
|
25
|
+
onboarding;
|
|
22
26
|
basemap;
|
|
23
27
|
userPreferences;
|
|
24
28
|
darkFrontendMode = false;
|
|
25
|
-
arrowBlack = ArrowBlack;
|
|
26
|
-
arrowWhite = ArrowWhite;
|
|
27
29
|
currentArrow;
|
|
30
|
+
currentCircle;
|
|
28
31
|
constructor() {
|
|
29
32
|
super('help');
|
|
30
33
|
}
|
|
@@ -35,6 +38,7 @@ class HelpComponent extends GirafeHTMLElement {
|
|
|
35
38
|
this.themes = this.shadow.querySelector('#themes');
|
|
36
39
|
this.search = this.shadow.querySelector('#search');
|
|
37
40
|
this.menu = this.shadow.querySelector('#menu');
|
|
41
|
+
this.onboarding = this.shadow.querySelector('#onboarding');
|
|
38
42
|
this.basemap = this.shadow.querySelector('#basemap');
|
|
39
43
|
this.userPreferences = this.shadow.querySelector('#user-preferences');
|
|
40
44
|
// hide help for hideable Parts of the UI
|
|
@@ -61,10 +65,12 @@ class HelpComponent extends GirafeHTMLElement {
|
|
|
61
65
|
changeArrowColor() {
|
|
62
66
|
// change the arrow color depending on the darkFrontendMode state
|
|
63
67
|
this.darkFrontendMode = this.context.stateManager.state.interface.darkFrontendMode ?? systemIsInDarkMode();
|
|
64
|
-
this.currentArrow = this.darkFrontendMode ?
|
|
68
|
+
this.currentArrow = this.darkFrontendMode ? ArrowBlack : ArrowWhite;
|
|
69
|
+
this.currentCircle = this.darkFrontendMode ? CircledBlack : CircledWhite;
|
|
65
70
|
this.themes.style.backgroundImage = `url(${this.currentArrow})`;
|
|
66
71
|
this.search.style.backgroundImage = `url(${this.currentArrow})`;
|
|
67
72
|
this.menu.style.backgroundImage = `url(${this.currentArrow})`;
|
|
73
|
+
this.onboarding.style.backgroundImage = `url(${this.currentCircle})`;
|
|
68
74
|
this.basemap.style.backgroundImage = `url(${this.currentArrow})`;
|
|
69
75
|
this.userPreferences.style.backgroundImage = `url(${this.currentArrow})`;
|
|
70
76
|
this.content.style.backgroundColor = this.darkFrontendMode ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)';
|
|
@@ -78,6 +84,10 @@ class HelpComponent extends GirafeHTMLElement {
|
|
|
78
84
|
this.content.style.display = 'none';
|
|
79
85
|
}
|
|
80
86
|
}
|
|
87
|
+
startOnboardingTour() {
|
|
88
|
+
this.toggleHelp(false);
|
|
89
|
+
this.context.onBoardingManager.restart().then(noop);
|
|
90
|
+
}
|
|
81
91
|
connectedCallback() {
|
|
82
92
|
super.connectedCallback();
|
|
83
93
|
this.render();
|
|
Binary file
|
|
Binary file
|
|
@@ -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}
|
|
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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"1.1.0-dev.
|
|
1
|
+
{"version":"1.1.0-dev.2456762594", "build":"2456762594", "date":"16/04/2026"}
|
package/tools/main.d.ts
CHANGED
|
@@ -104,6 +104,7 @@ export { default as PermalinkManager } from './url/permalinkmanager.js';
|
|
|
104
104
|
export { default as UrlManager } from './url/urlmanager.js';
|
|
105
105
|
export { default as UserDataManager } from './userdata/userdatamanager.js';
|
|
106
106
|
export { default as ColumnAliasHelper } from './utils/aliases.js';
|
|
107
|
+
export { noop } from './utils/async.js';
|
|
107
108
|
export { debounce } from './utils/debounce.js';
|
|
108
109
|
export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
|
|
109
110
|
export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
|
package/tools/main.js
CHANGED
|
@@ -79,6 +79,7 @@ export { default as PermalinkManager } from './url/permalinkmanager.js';
|
|
|
79
79
|
export { default as UrlManager } from './url/urlmanager.js';
|
|
80
80
|
export { default as UserDataManager } from './userdata/userdatamanager.js';
|
|
81
81
|
export { default as ColumnAliasHelper } from './utils/aliases.js';
|
|
82
|
+
export { noop } from './utils/async.js';
|
|
82
83
|
export { debounce } from './utils/debounce.js';
|
|
83
84
|
export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
|
|
84
85
|
export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
|
|
@@ -2,6 +2,7 @@ import GirafeSingleton from '../../base/GirafeSingleton.js';
|
|
|
2
2
|
import 'driver.js/dist/driver.css';
|
|
3
3
|
export default class OnBoardingManager extends GirafeSingleton {
|
|
4
4
|
private get config();
|
|
5
|
-
private readonly
|
|
5
|
+
private readonly STORAGE_PATH;
|
|
6
|
+
restart(): Promise<void>;
|
|
6
7
|
start(): Promise<void>;
|
|
7
8
|
}
|
|
@@ -6,20 +6,24 @@ export default class OnBoardingManager extends GirafeSingleton {
|
|
|
6
6
|
get config() {
|
|
7
7
|
return this.context.configManager.Config;
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
STORAGE_PATH = 'onboardingTourAlreadyDone';
|
|
10
|
+
async restart() {
|
|
11
|
+
this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'false');
|
|
12
|
+
return this.start();
|
|
13
|
+
}
|
|
10
14
|
async start() {
|
|
11
15
|
if (!this.config.onboarding) {
|
|
12
16
|
// No tour configured
|
|
13
17
|
return;
|
|
14
18
|
}
|
|
15
19
|
await this.context.i18nManager.ensureTranslationLoaded();
|
|
16
|
-
const tourAlreadyDone =
|
|
20
|
+
const tourAlreadyDone = this.context.userDataManager.getUserData(this.STORAGE_PATH) || 'false';
|
|
17
21
|
if (tourAlreadyDone !== 'true') {
|
|
18
22
|
const onboardingDriver = driver({
|
|
19
23
|
popoverClass: 'girafe-onboarding-theme',
|
|
20
24
|
showProgress: true,
|
|
21
25
|
onDestroyed: (_element, _step, _options) => {
|
|
22
|
-
|
|
26
|
+
this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'true');
|
|
23
27
|
},
|
|
24
28
|
nextBtnText: this.context.i18nManager.getTranslation('onboarding-next-button-text'),
|
|
25
29
|
prevBtnText: this.context.i18nManager.getTranslation('onboarding-previous-button-text'),
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const noop: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const noop = () => { };
|