[3.3] [CDB]Recent Topics NG

[IMC]

Schon wieder einen Commit gemacht.

Einen unbemerkten Fehler von unseren Vorgänger beseitigt.
Wenn man den Link, "Foren als gelesen markieren" anklickte, wurde das rote Symbol mit dem Link zum ersten ungelesenen Beitrag nicht entfernt.

[LukeWCS]

Kanns bestätigen. Wenn ich deinen Fix richtig interpretiere, wird die Funktion "Foren als gelesen markieren" per ActiveX ausgeführt und anschliessend im Javascript Code noch die Klasse unread aus dem DOM Objekt entfernt. Und da bei RT(NG) diese Klasse nicht gesetzt war, konnte die JS Funktion bei der RTNG Anzeige nicht greifen.

edit: Genauer gesagt kann unread nicht durch read ersetzt werden, da nicht vorhanden. Hab die Code Stelle im phpBB JS gefunden.

[IMC]

Genau genommen konnte diese Codzeile

Code: Alles auswählen

	// Remove link to first unread post
	$('a.unread').has('.icon-red').remove();

in der ajax.js nicht ihren Job tun weil die Klasse nich gesetzt war.

[LukeWCS]

nAbend

In Bezug auf diesem Commit habe ich noch was:

v1.1.0-dev 2025-12-28

Hatte ich zwischenzeitlich kurz vergessen, weil andere Dinge wichtiger waren. Mir ist im Rahmen deiner Twig Optimierungen etwas anderes aufgefallen, über das ich mal plaudern und Alternativen zeigen möchte. Damit das bisserl strukturiert ist, habe ich die jeweiligen Abschnitte nummeriert.

1.

Als Beispiel diese Zeile:

Code: Alles auswählen

<li class="row{% if loop.index is even %} bg1{% else %} bg2{% endif %}{% if rtng.S_POST_GLOBAL %} global-announce{% endif %}{% if rtng.S_POST_ANNOUNCE %} announce{% endif %}{% if rtng.S_POST_STICKY %} sticky{% endif %}{% if rtng.S_TOPIC_REPORTED %} reported{% endif %}">

Dieser "Spaghetti-Code" ist auch ein typisches Produkt des Twig Konverters, wenn dieser die alte Syntax nach Twig konvertiert. Denn der Konverter ist so konzipiert, das die alte Syntax so weit wie möglich 1:1 in die Twig Syntax übersetzt wird. Dadurch werden aber fast alle modernen Möglichkeiten von Twig ignoriert und so hat derlei Code auch jede Menge Optimier-Potential, um es mal politisch korrekt zu formulieren. Diese Zeile entspricht also, bis auf unsere RTNG Anpassungen und Optimierungen natürlich, quasi noch immer der alten Struktur wie sie schon bei RT seit eh und je genutzt wurde.

Da greife ich mal als Beispiel den Zebra-Effekt heraus. Für diesen gibt es in Twig gleich mehrere elegante Techniken. Im folgenden Code Block zeige ich nur den Anfang der Zeile der relevant ist. Erste Zeile ist das Original, darunter die Alternativen.

Code: Alles auswählen

<li class="row{% if loop.index is even %} bg1{% else %} bg2{% endif %}
<li class="row bg{{ loop.index is even ? 1 : 2 }}
<li class="row bg{{ loop.index % 2 + 1 }}
<li class="row bg{{ cycle([1, 2], loop.index) }}

Zeile 1 ist a) sperrig, weil umständliches if/else/endif Konstrukt und b) ineffizient, weil der statische Teil redundant notiert wurde. Aber okay, bei letzterem gehts um 2 Bytes, also kein Grund ernsthaft über "Optimierung" nachdenken zu müssen. ^^ Mir gings jetzt eher um das Grundsätzliche, weil das hätte man auch schon mit der alten Syntax besser machen können.

Zeile 2 trennt den statischen Teil vom dynamischen und nutzt Ternary (Twig Feature). Dadurch ist das ganze Ding deutlich kompakter.

Zeile 3 löst das ganze mittels Modulo, das heisst es wird auf Abfragen komplett verzichtet und die Aufgabe einfach mathematisch gelöst. Modulo gabs aber auch schon bei der alten Syntax.

Zeile 4 löst das ganze mit der Funktion cycle() (Twig Feature), mit der man eine beliebige Anzahl Elemente quasi zyklisch rotieren kann.

2.

Auch bei den nachfolgenden Klassen kann man Alternativen einsetzen. Anhand einer der Klassen ein Beispiel, oben Original unten auf Twig getrimmt:

Code: Alles auswählen

{% if rtng.S_POST_GLOBAL %} global-announce{% endif %}
{{ rtng.S_POST_GLOBAL ? ' global-announce' }}

Statt if/endif Konstrukt wird auch hier eine direkte Anzeige eingesetzt, aber jetzt ein verkürzter Ternary (ebenfalls Twig Feature).

3.

Wenn man jetzt die komplette Original Zeile als Ganzes betrachtet, kann man das alles auch noch anders lösen. Als erstes wieder original, dann optimierte Variante.

Code: Alles auswählen

<li class="row{% if loop.index is even %} bg1{% else %} bg2{% endif %}{% if rtng.S_POST_GLOBAL %} global-announce{% endif %}{% if rtng.S_POST_ANNOUNCE %} announce{% endif %}{% if rtng.S_POST_STICKY %} sticky{% endif %}{% if rtng.S_TOPIC_REPORTED %} reported{% endif %}">

<li class="row bg{{ loop.index % 2 + 1 }}{{ [
	rtng.S_POST_GLOBAL    ? ' global-announce',
	rtng.S_POST_ANNOUNCE  ? ' announce',
	rtng.S_POST_STICKY    ? ' sticky',
	rtng.S_TOPIC_REPORTED ? ' reported',
]|join }}">

Als spezielle Twig Techniken werden dabei eingesetzt:

• Verkürzter Ternary.
• Array De-Referenzierung (direktes Ansprechen eines Arrays ohne dieses vorher in einer Variable speichern zu müssen). Gibts auch bei PHP.
• Filter. In dem Fall join zum Zusammenfügen eines Arrays zu einem String. Kennt man bei PHP als implode().

Der ursprüngliche Code ist praktisch nicht mehr wiederzuerkennen, weil jetzt konsequent auf Twig optimiert. Trotzdem machen beide Codes exakt dasselbe. Aus meiner Sicht erheblich besser les- und wartbar. Und kompakter ist das auch noch; der Original Code hat 270 Bytes, die pure Twig Variante nur 206 Bytes, beide abzüglich Einrückungen.

Als Impuls/Gedanke am "Lagerfeuer".

[IMC]

Hi Patrick,

Impulse sind Wichtig. Genauso wie Lagerfeuergespräche.

Die Codezeile schleppen wir schon seit begin an mit uns rum. Ich habe auch nur das loop.index eingefügt ohne mir den Rest anzuschauen. Umso besser, dass du jetzt noch einmal darüber geschaut hast.

Da ich Innovationen sehr positiv gegenüberstehe und ein großer Fan von übersichtlichem, leicht lesbarem Code bin, bin ich auch dafür, dass wir dieses Konstrukt übernehmen.

Falls du das Übernehmen möchtest, in der rtng_body_side.html muss auch noch etwas zusätzlich verändert werden.

Code: Alles auswählen

<i class="icon fa-external-link-square fa-fw {% if rtng.S_UNREAD_TOPIC && !S_IS_BOT %}icon-red icon-md{% else %}icon-lightgrey icon-md{% endif %}" aria-hidden="true"></i>

Der Farbwechsel auf Rot macht dort keinen Sinn, da der Link sich nicht ändert. Deshalb sollte kein Farbwechsel stattfinden.

[Mike-on-Tour]

Wenn ich mich mal kurz mit ans Lagerfeuer setzen darf ...
Zu 1.
Das lässt sich doch für eine Tabelle (und ich wüsste jetzt auf Anhieb nicht, wofür es sonst noch gut sein soll) viel einfacher implementieren, wenn man dieser class="zebra-table" zuweist, dann kümmert sich css im Hintergrund darum.

[IMC]

viel einfacher implementieren, wenn man dieser class="zebra-table" zuweist, dann kümmert sich css im Hintergrund darum.

Hi Mike,

das hatte ich in meiner Extension Participants List so umgesetzt. Ich hatte bereits 2 Meldungen das die Farbkombination daneben ist.
viewtopic.php?p=1433539#p1433539
viewtopic.php?p=1433397#p1433397

Deshalb bin ich da inzwischen wieder bei der Twig-Variante. phpBB nutzt diese auch für Listen. Deshalb hat die CSS-Klasse nicht in allen Styles die gewünschten Farben.

[Mike-on-Tour]

Hallo Thorsten,
das habe ich wohl verdrängt, sorry.

[LukeWCS]

Danke für den Input Mike. An diese native Zebra-Funktion hatte ich gar nicht mehr gedacht.

Deshalb bin ich da inzwischen wieder bei der Twig-Variante. phpBB nutzt diese auch für Listen. Deshalb hat die CSS-Klasse nicht in allen Styles die gewünschten Farben.

Ich habe mir das jetzt genauer angeschaut und ich denke ich weiss warum zebra-list von den Style Designern offenbar stiefmütterlich behandelt wird. Als Beispiel habe ich mir den Style von DocSommer herausgepickt und gesichtet. Dort wurden für bg1 und bg2 abweichende Farben definiert (in Bezug auf zebra-list), wobei diese Farben bei prosilver aber identisch definiert wurden, was ich so nebenbei auch erwartet hätte.

Dann, der native Zebra-Effekt wird bei phpBB exakt nur ein einziges Mal eingesetzt; im Beitrags-Editor im Tab "Dateianhänge", sonst nirgends. Als pure Fakten mal die Anzahl der referenzierten Klassen (in HTML und JS) unterm Strich (bei prosilver):

zebra-list: 1
bg1/bg2: 63

Auch das phpBB JS arbeitet mit bg1/bg2.

Somit ist klar, was wir nutzen Thorsten.

[chris1278]

Luke wozu hat das Zebra den Lust.

(in Bezug auf zebra-lust),