Benutzerdefiniertes Javascript wird erst nach dem Aktualisieren angewendet, Erstellung von Kategorien für das Standort-Plugin

Hallo,

Das unten stehende Skript zeigt im Standort-Plugin den Tooltip dauerhaft an und verleiht ihm Farben, um ihn nach Typ (Ereignisse, Veranstaltungsorte usw.) zu sortieren. Ich arbeite an einer Legende und vielleicht einem Filter.

Die Situation ist, dass es funktioniert, aber erst, nachdem ich die Seite neu geladen habe. Es funktioniert nicht, wenn ich über die URL auf die Seite gelange.

Es gibt keine Unterschiede bei den Fehlern in der Konsole in beiden Fällen, und das Hinzufügen einer höheren Verzögerung zur Funktion ändert nichts.

Hat jemand dies schon einmal erlebt, wenn er JS über das Menü “Thema bearbeiten” in den Header eingefügt hat, und eine Lösung gefunden?

Hier ist ein Bild des Ergebnisses

Die Fehler hier treten mit oder ohne Code auf, daher haben sie nichts damit zu tun

<script>
document.addEventListener('DOMContentLoaded', function() {
  // CSS anwenden, um den Stil des Alternativtextes zu ändern
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    /* Sicherstellen, dass der Alternativtext fett, unterstrichen und bedingt farbig ist */
    .leaflet-marker-pane img[alt] {
      font-weight: bold !important; /* Text fett machen */
      text-decoration: underline !important; /* Text unterstreichen */
      white-space: nowrap; /* Verhindern, dass der Text in eine neue Zeile umgebrochen wird */
    }
  `;
  document.head.appendChild(style);

  // Der Seite einen Moment Zeit geben, um zu laden und die Bilder gerendert zu werden
  setTimeout(function() {
    var images = document.querySelectorAll('.leaflet-marker-pane img');

    images.forEach(function(img) {
      var title = img.getAttribute('title');
      if (title) {
        title = title.length > 10 ? title.substring(0, 10) + '..' : title;
        img.setAttribute('alt', title);
        img.setAttribute('title', title);

        if (title.includes('/')) {
          img.style.color = 'white';
        } else {
          img.style.color = 'black';
        }
      }
      img.setAttribute('src', '');
    });
  }, 1000);  // Ausführung um 1 Sekunde verzögern (1000 ms)
});


</script>

Wenn ich mich nicht irre, da Discourse eine Single-Page-Anwendung ist, glaube ich, dass Sie api.onPageChange() der Plugin-API dafür verwenden müssen.

4 „Gefällt mir“

Richtig, und die Verwendung von Skripten wird bald veraltet sein.

2 „Gefällt mir“

Gut zu wissen, ich werde mich nicht darum kümmern, ein angepasstes window.location.reload(true) im Header für ein Ember.js-Framework zu verwenden, was eine Lösung dafür gewesen sein könnte.

Wird das Header-Feld aus Sicherheitsgründen ausgemustert? Der Punkt ist, dass es immer noch praktisch ist, Vanilla-JavaScript darin zu testen.

Nein, die Verwendung der Plugin-API in Skript-Tags (im Header) wird ausgemustert.

1 „Gefällt mir“

ok, wenn JavaScript in Headern bald veraltet ist, muss ich ein paar Dinge anpassen. Vielleicht könnte dieses Header-Feld einen Hinweis auf diese kommende Situation enthalten.

Ich schätze, es hat seine Gründe, aber es könnte schade sein, da Skripte in Headern nützlich sind und schnelle Anpassungen für Administratoren ermöglichen, wie z. B.: Schließen der Ereignisregistrierung, wenn eine bestimmte Anzahl von einer JavaScript-Funktion für eine bestimmte Kategorie erreicht wird.

Entschuldigung, ich habe Ihnen geantwortet, anstatt Jay, der sagt, dass Skripte veraltet sein werden. Ich stelle mir vor, er spricht über Header-Skripte, die sehr praktisch für schnelle Änderungen sind, genau wie in jedem Website-CMS.

Ich habe tatsächlich eine Lösung gefunden, die nur die „Karte“-Seite jedes Mal neu lädt, wenn man darauf geht.

Ich frage mich jetzt, ob es sich lohnt, dies mit anderen hier zu teilen, wenn Header-Skripte veraltet sein werden? Das Skript in diesem Beitrag ermöglicht Farbkategorien entsprechend dem Inhalt eines Ereignistitels auf der Karte. Dies sollte schnell änderbar sein und nicht über die API-Funktion.

 <script> (function(){function e(){if(location.pathname.includes("/map")){if(!sessionStorage.getItem("map-refreshed")){sessionStorage.setItem("map-refreshed","true");requestAnimationFrame(()=>setTimeout(()=>location.reload(!0),100))}}}function t(){sessionStorage.removeItem("map-refreshed")}function n(e){const t=history[e];history[e]=function(){const n=t.apply(this,arguments);return window.dispatchEvent(new Event("locationchange")),n}}n("pushState"),n("replaceState"),addEventListener("popstate",()=>dispatchEvent(new Event("locationchange"))),addEventListener("locationchange",function(){location.pathname.includes("/map")?e():t()}),e();})(); </script> 
1 „Gefällt mir“

Ich glaube, Sie haben mich missverstanden. Ich meinte, dass Skript-Tags im Header wie \u003cscript type=\"text/discourse-plugin\"\u003e und \u003cscript type=\"text/x-handlebars\"\u003e veraltet sind, nicht normale \u003cscript\u003e-Tags.

2 „Gefällt mir“

Ja, vielen Dank für die Klarstellung, ich freue mich, dass wir JavaScript einfügen können. Schauen Sie sich den Code an, den ich hinterlassen habe, wenn Sie Zeit haben. Er könnte in Ember-Umgebungen immer noch nützlich sein. Er lädt die Seite neu, damit das JS angewendet wird. Es ist nicht die schönste Lösung, aber sie funktioniert gut für die Map-Plugin-Seite!

2 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.