[3.3] [DEV] Portal Clock

[Mike-on-Tour]

Extension Name: Portal Clock

Kompatibel mit
phpBB >= 3.3.9, < 3.4.0@dev
PHP >= 8.1.33, < 8.6.0@dev
Board3 Portal: >= 2.3.0, < 3.3.0@dev

Autor: Mike-on-Tour
Beschreibung: Diese Erweiterung fügt dem Board3 Portal in der rechten Spalte eine analoge Uhr hinzu, die im Aussehen einer Bahnhofsuhr gleicht, Ziffernblatt, Gehäuse und Zeiger können im Admin-Bereich angepasst werden.
Farbdefinitionen können über Style-eigene CSS-Dateien erstellt werden.

Download: https://www.mike-on-tour.com/mot/mot_portalclock.php
Sprachen: de (formell und informell), en
Styles: prosilver
Github repository: https://github.com/Mike-on-Tour/portalclock

Screenshot:
[ externes Bild ]

[Kirk]

Hi Mike
Hab grad deine Uhr getestet, funktioniert so im ACP ausgewählt. Einen Vorschlag hätte ich noch, man kann anstelle einer Grafik auch FA verwenden, dies greift bei deinen Modul nicht.
Wenn du die 1. Zeile in der mot_portalclock_side.html so änderst(ist bei mir etwas anders eingerückt):

Code: Alles auswählen

{{ definition.C_BLOCK_H_L }}{% if definition.S_BLOCK_ICON %}
	{% if definition.FA_ENABLED %}
		<i class="icon b3p-icon fa {{ definition.FA_ICON }}" style="font-size: {{ definition.FA_SIZE }}px;" aria-hidden="true"></i>
	{% else %}
		<img src="{{ definition.IMAGE_SRC }}" width="{{ definition.IMAGE_WIDTH }}" height="{{ definition.IMAGE_HEIGHT }}" alt="" />
	{% endif %}
{% endif %}{{ definition.TITLE }}{{ definition.C_BLOCK_H_R }}

somit wird das FA Icon welches man in diesem Modul definiert hat, auch im Portal angezeigt.
Wie du aus dem Code erkennen kannst reicht es aus anstelle von {{ lang('MOT_PORTALCLOCK') }} jenes verwendest {{ definition.TITLE }} damit wird automatisch der Namen genommen den du in der mot_portalclock.php unter public $name als Language Variable eingetragen hast.

[Mike-on-Tour]

Hallo Udo,
Danke für die Hinweise, dann gibt es in den nächsten Tagen eine neue Version.

[Mike-on-Tour]

Der Hinweis von Kirk ist umgesetzt, sein mitgelieferter Code ist integriert und somit steht die Version 1.0.1 über den Downloadlink im Startbeitrag zur Verfügung.

[Kirk]

Danke für´s Update, FA funktioniert jetzt Problemlos genau wie verschieben des Modules z. B. von Rechts nach Links.
Siehst du evtl. eine Möglichkeit die Farbzuweisungen in der station-clock.js in eine CSS Datei "auszulagern"? Man kann zwar diese js Datei in ein zusätzliches erstelltes style_name Vz. reinsetzen und dort die Farben anpassen, bequemer wäre es mit CSS.

[Mike-on-Tour]

Prima, Danke für die Rückmeldung.

Das mit den Farbzuweisungen muss ich mir ansehen, bin mir momentan unsicher, wie man CSS innerhalb eines JS-Skriptes auswertet. Du meinst sicherlich eine andere Farbzuweisung für "Dark Vision", oder?

[Kirk]

Jetzt nicht generell für meinen Style, da konnte ich´s bereits für mich persönlich (Standard Einstellungen) ändern. Ich meinte dunkle Styles überhaupt.

[Mike-on-Tour]

Okay, ich habe eine Möglichkeit gefunden, die kurze Machbarkeitsstudie war auch erfolgreich, jetzt beginnt das mühselige und zeitaufwändige Umsetzen.
Wenn du mir deine Farbdefinitionen für "Dark Visionen" zukommen lassen kannst, dann kann ich das mit einarbeiten. Kannst du auch gerne per PN machen.

[Mike-on-Tour]

Version 1.1.0 ist über den Downloadlink im Startbeitrag verfügbar, sie enthält folgende Änderungen/Ergänzungen:

• Farbdefinitionen der JS-Datei werden nun als Root-Variablen in CSS-Dateien definiert und in der JS-Datei daraus ausgelesen
• Style-Verzeichnis für "Dark Vision" inklusive der Farbdefinitionen hinzugefügt

Damit ist es nunmehr möglich, auch für andere (von "prosilver" abgeleitete) Styles eigene Farbdefinitionen hinzuzufügen.

[Kirk]

Funktioniert seht gut, Danke.
Ich hab mal geschaut was geändert werden müsste wenn die Farbe z. b. für die Einstellung "Uhrengehäuse: Rundes Gehäuse" auch Style abhängig ändern möchte.
Ich hab in meinem TB folgendes geändert:
in der station-clock.js das hier:

Code: Alles auswählen

this.fillCircle(context, "rgb(255,255,255)", 0, 0, 1.1);

in jenes geändert:

Code: Alles auswählen

this.fillCircle(context, getComputedStyle(document.documentElement).getPropertyValue('--round-body'), 0, 0, 1.1);

In der CSS Datei z. b. für prosilver trägt man dann jenes ein:

Code: Alles auswählen

	/* Rundes Gehäuse Round body */
	--round-body: #FFF;	/* rgb(255,255,255) */

Vielleicht hilft es den ein oder anderen.