[New Map] Hide header.

[capoaira]

Ich habe damit angefangen. Wenn #1114 gemerged (kann man das so schreiben?) wurde, kann ich weiter machen.

[2Abendsegler]

Für die Funktionalität Hide all Cachetypes in der alten Karte unter den Cachetypen wäre in der neuen Karte auch noch etwas vorzusehen, vermutlich bei den Filtern oder so. Die Umbenennung Hide/Show und andere Dinge lassen sich sicherlich hier ein einem Aufwasch abhandeln, wenn man es geschickt anfängt.

[capoaira]

Ich habe den Button (hide/show) mal geändert. So sieht es jetzt aus: https://github.com/capoaira/GClh/tree/Hide-map-header
Soll ich daran noch etwas verändern?
Habe schon mal getestet, alles was mir so eingefallen ist. Sollte so funktionieren.

[capoaira]

Für die Funktionalität Hide all Cachetypes in der alten Karte unter den Cachetypen wäre in der neuen Karte auch noch etwas vorzusehen, vermutlich bei den Filtern oder so.

Die Funktion ist von GS gegeben. Über den Cachetypen rechts.

[2Abendsegler]

Soll ich daran noch etwas verändern?

Sieht gut aus, vielleicht würde ich die Schriftgröße noch auf 14 reduzieren.

Mir ist aufgefallen, dass der Schiebebalken rechts fehlt, wenn man die Filter anwählt. Das könnte auch ein Fehler von mir sein, habs nicht getestet obs im collector auch schon falsch ist. Du könntest dir vielleicht noch ansehen, woran das hängt.

Die Funktion ist von GS gegeben. Über den Cachetypen rechts.

Ja, stimmt, danke.

[capoaira]

Mir ist aufgefallen, dass der Schiebebalken rechts fehlt, wenn man die Filter anwählt. Das könnte auch ein Fehler von mir sein, habs nicht getestet obs im collector auch schon falsch ist. Du könntest dir vielleicht noch ansehen, woran das hängt.

Bei mir ist der Schieberegler immer da, ich kann den Fehler nicht nachvollziehen. Habe es mal ich Firefox mit und ohne GC-Tour versucht. Auch in Chome. Der Regler ist immer da.

[2Abendsegler]

Hab mir den Schieberegler nochmal angesehen. Sowohl unter FF wie auch unter Chrome ist dieser Schieberegler nach deiner Erweiterung verschwunden. Schaus dir bitte nochmal an. Vielleicht haben wir nur von unterschiedlichen Dingen geredet, deshalb hier auch mal die Bilder ...

2Abendsegler / Collector:

capoaira / Hide-map-header:

[capoaira]

Ah, ja wir haben von verschiedenen Dingen geredet. Das ist bei mir auch so...

[capoaira]

So funktioniert es jetzt. (Hoffe ich)

[2Abendsegler]

Wenn du meinst dass es funktioniert, dann kannst du jetzt oder wenn es passt einen PR dazu machen. Ich muss das hier an dieser Stelle nicht mehr gegenchecken.

Auch mal noch als Stichwort: "Eigenverantwortliches Arbeiten"

Klar, dass so etwas in der Schulde nicht unbedingt gefördert wird. Außerhalb der Schule, ist aber genau das gefragt.

[capoaira]

Hier komme ich leider nicht weiter.
So wie ich es jetzt habe, hatte es mal funktioniert. Jetzt hat man unten einen grauen Rand, wenn man den Header ausblendet.
Das komische: Wenn ich die Konsole öffne und wieder schieße ist der Rand weg.

Mein Code:

            // Hide Header.
            function hideOrShowSearchmapHeader(hideShow) {
                if (hideShow == 'hide') {
                    $('#sidebar, #clear-map-control, .map-container').addClass('hideHeaderPosition');
                    $('#gcNavigation, #GCHeader').addClass('hideHeaderDisplayNone');
                    $('.hideHeaderLink .toggle-handle').addClass('on');
                }else {
                    $('#sidebar, #clear-map-control, .map-container').removeClass('hideHeaderPosition');
                    $('#gcNavigation, #GCHeader').removeClass('hideHeaderDisplayNone');
                    $('.hideHeaderLink .toggle-handle').removeClass('on');
                }
                document.querySelector('.hideHeaderLink .toggle-handle').onclick = function() {
                    if (this.getAttribute('class').indexOf('on') == -1) hideOrShowSearchmapHeader('hide');
                    else hideOrShowSearchmapHeader('show');
                }
            }
            function showLinkHideSearchmapHeader(waitCount) {
                if (document.querySelector('.sidebar-control.sidebar-search-container')) {
                    var div = document.createElement('div');
                    div.setAttribute('class', 'hideHeaderLink toggle-filter');
                    div.innerHTML = '<span class="label" style="padding-left:12px;">Hide header</span><div style="margin-right:12px;" class="toggle-handle"></div>';
                    document.querySelector('#sidebar').insertBefore(div, document.querySelector('#sidebar .sidebar-control.sidebar-search-container').nextSibling);
                    if (settings_hide_map_header) hideOrShowSearchmapHeader('hide');
                    else document.querySelector('.hideHeaderLink .toggle-handle').onclick = function() {hideOrShowSearchmapHeader('hide');}
                } else {waitCount++; if (waitCount = 200) setTimeout(function(){showLinkHideSearchmapHeader(waitCount);}, 50);}
            }

            // Hide header
            css += '.hideHeaderPosition {position: fixed !important;}';
            css += '.hideHeaderDisplayNone {display: none !important;}';
            css += '.hideHeaderLink {background-color: whitesmoke; align-items: center; display: flex; justify-content: space-between; padding-bottom: 12px; font-size: 14px;}';
            css += '#search-filters-content {margin-top: 75px;}';
            css += '.leaflet-gl-layer.mapboxgl-map {height: 100%;}';

@2Abendsegler, @Ruko2010 hat einer von Euch eine Idee?

[2Abendsegler]

Ich habe mir gerade deine alte Version mal angesehen die du mal gepushed hattest. Da bleibt nun auch der graue Balken stehen wenn man auf Hide Header klickt, obwohl ich meine dass das zumindest dann funktionierte wenn man den Header zu Begin gleich ausgeblendet hat. Dubios.

Gib mir bitte mal einen Link zu deinem kompletten Code.

[capoaira]

https://github.com/capoaira/GClh/tree/Hide-map-header
Ich habe den Branch nochmal hochgeladen.

obwohl ich meine dass das zumindest dann funktionierte wenn man den Header zu Begin gleich ausgeblendet hat.

Bei mir leider nicht.

[2Abendsegler]

Ich verstehe nicht alles von deinem Coding. Meines Erachtens machst du hier viel zu viel.

Ich habe versucht den Header selbst zu entfernen, bekomme es aber auch nicht hin ohne einen grauen Streifen.

[2Abendsegler]

Zum grauen Rand:

Hier ist beschrieben was gemacht werden muss, damit der graue Rand verschwindet.

Etwas Ähnliches haben wir schon mal bei der Karte zu den Trackables gemacht.

// Leaflet Map für Trackables vergrößern und Zoom per Mausrad zulassen.
    if (document.location.href.match(/\.com\/track\/map/)) {
        try{
            $('#map_canvas').append('<div class="ui-resizable-handle ui-resizable-s" id="sgrip" style="width: 24px;height: 4px;background-color: transparent;border-top: 1px solid black;border-bottom: 1px solid black;bottom: 0px;left: 98%;transform: rotate(-45deg);"></div>');
            appendCssStyle('#map_canvas{ height: 450px;} .leaflet-bottom.leaflet-right {margin-right: 20px;}');
            var scriptText = "map.invalidateSize(); map.scrollWheelZoom.enable(); $('#map_canvas').resizable({handles: {'s': '#sgrip'}, minHeight: 300, maxHeight: 700, stop: function( event, ui ) {map.invalidateSize();}});";
            injectPageScript(scriptText, 'head');
        } catch(e) {gclh_error("tb_map_enhancement",e);}
    }

[capoaira]

Oh, und dabei hatte ich gerade meine Assignment entfernt, weil ich keine neuen Ideen hatte. Ich werde mir das dann aber gerne nochmal angucken. Danke!

[capoaira]

Ich habe nun einiges versucht. Das ganze ist mir eindeutig zu hoch. Es wäre schön, wenn jemand anderes diesen Issue übernehmen könnte.

[2Abendsegler]

Hast du vielleicht herausgefunden wie das Karten Objekt heißt, wie man also die Karte ansprechen kann. Das Objekt der Trackable Karte war ja beispielsweise map, und wir hatten es mit map.invalidateSize(); dazu gebracht sich neu aufzubauen. Ich hatte irgendwann auch schon mal danach gesehen, habe aber nichts gefunden.

[capoaira]

Hast du vielleicht herausgefunden wie das Karten Objekt heißt, wie man also die Karte ansprechen kann. Das Objekt der Trackable Karte war ja beispielsweise map, und wir hatten es mit map.invalidateSize(); dazu gebracht sich neu aufzubauen. Ich hatte irgendwann auch schon mal danach gesehen, habe aber nichts gefunden.

map gibt es denke ich, da die Fehlermeldung "invalidateSize() is not a function" und nicht "map is undefined" lautet.

Ich habe schon alles Mögliche ausprobiert. Auch das direkte einfügen per injectPageScript() .
Mir ist aber gerade eingefallen, dass die searchmap kein jQuery hat. Bei #1287 meintest du, dass man diese dafür braucht.

[2Abendsegler]

map gibt es denke ich, da die Fehlermeldung "invalidateSize() is not a function" und nicht "map is undefined" lautet.

Ja, stimmt, da dürftest du recht haben. Danke für den Gedankenanstoß, war mir ehrlich gesagt entgangen.

Bei #1287 meintest du, dass man diese dafür braucht.

Ja, das war nur eine Vermutung, eigentlich habe ich meist gar keine Ahnung ... 😂

[2Abendsegler]

Das Kartenobjekt muss mit ... = new mapboxgl.Map definiert werden.
Ich glaube das eigentliche Problem besteht darin, dass wir den Namen des Kartenobjekts nicht kennen. Wenn wir nicht wissen wie der Name lautet können wir auch nichts mit ihm machen.
(map ist nicht das Kartenobjekt.)

Ich habe mich hier auch noch mal zum wiederholten Mal versucht und gebe nun auf. Ich weiß nicht wie ich herausfinden kann welchen Namen das Objekt hat.

Ich setze das Issue auf status: no solution found.

[2Abendsegler]

Siehe auch Kommentar beim #1287.

[2Abendsegler]

Ich schließe die beiden Issues bei denen wir keine Lösung gefunden haben.
Die kommen fürs nächste Jahr ins Lager (label: storage). Vielleicht werden wir während des Jahres noch etwas schlauer. Ich will die nur hier nicht mehr sehen, die nerven. 😬

[capoaira]

Ich habe vielleicht eine Lösung gefunden :)

[2Abendsegler]

Merged with #1764