Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- plugins:indian-timeline:start [19.08.2026 12:56] – angelegt admin
+++ plugins:indian-timeline:start [27.09.2026 13:31] (aktuell) – [Technische Umsetzung] admin
@@ Zeile 10: / Zeile 10: @@
 </WRAP>
-<WRAP tcw-page-nav>
+<WRAP tcw-page-back>
 [[plugins:start|← Plugins]]
-[[:start|⌂ Startseite]]
 </WRAP>
 </WRAP>
-===== Idee und Zweck =====
 **TheCruiserBlog – Indian Timeline** ist eine Eigenentwicklung für TheCruiserBlog.
-Das Plugin dient zur Darstellung einer interaktiven Zeitleiste zur Geschichte von **Indian Motorcycle**.
+Das Plugin stellt eine interaktive Zeitleiste zur Geschichte von **Indian Motorcycle** bereit. Historische Meilensteine werden chronologisch dargestellt und können über Suche, Epochenfilter und Navigation interaktiv erkundet werden.
+===== Aktueller Stand =====
+^ Version ^ Status ^ Einsatz ^
+| 1.0.0 | aktiv | derzeit nicht produktiv eingesetzt |
+===== Zweck =====
+TheCruiserBlog – Indian Timeline ergänzt die redaktionellen Inhalte von TheCruiserBlog um eine interaktive chronologische Darstellung der Geschichte von **Indian Motorcycle**.
+Die Zeitleiste führt von den Anfängen im Jahr 1901 bis in die Gegenwart und stellt ausgewählte historische Meilensteine mit Jahr, Epoche, Titel, Kurzbeschreibung, ausführlicher Beschreibung und ergänzender Notiz dar.
+Besucher können die dargestellten Ereignisse nach Epochen filtern, nach Begriffen durchsuchen und über eine Vor- und Zurück-Navigation zwischen den sichtbaren Meilensteinen wechseln.
+Die Timeline ist als eigenständiges WordPress-Plugin umgesetzt und wird über einen Shortcode in Seiten oder Beiträge eingebunden.
+===== Funktionsumfang =====
+Version 1.0.0 unterstützt:
+  * chronologische Darstellung historischer Meilensteine
+  * Gliederung der Ereignisse in verschiedene Epochen
+  * Filterung nach Epoche
+  * Volltextsuche innerhalb der historischen Ereignisse
+  * Auswahl einzelner Meilensteine
+  * Detailansicht zum ausgewählten Ereignis
+  * Navigation zum vorherigen und nächsten sichtbaren Meilenstein
+  * Zurücksetzen von Suche und Epochenfilter über **Gesamte Route**
+  * Anzeige historischer Eckdaten
+  * individuelle Konfiguration von Titel und Einleitung
+  * konfigurierbare Farben für Hintergrund, alternativen Hintergrund, Text, Akzent und Hover
+  * Überschreiben von Titel und Einleitung über Shortcode-Attribute
+  * responsive Darstellung
+  * Unterstützung mehrerer Timeline-Instanzen auf einer Seite
+===== Epochen =====
+Die historischen Ereignisse sind in Version 1.0.0 in fünf Epochen gegliedert:
+^ Epoche ^ Zeitraum ^
+| **Pionierzeit** | 1901–1919 |
+| **Legenden** | 1920–1945 |
+| **Krise und Übergang** | 1946–2010 |
+| **Wiedergeburt** | 2011–2024 |
+| **Neue Eigenständigkeit** | 2025–heute |
+Über den Epochenfilter können Besucher entweder alle Ereignisse oder gezielt die Meilensteine einer einzelnen Epoche anzeigen.
+Die Epochenzuordnung ist Bestandteil der im Plugin hinterlegten historischen Daten.
+===== Bedienung im Frontend =====
+Die Timeline stellt dem Besucher mehrere Möglichkeiten zur interaktiven Navigation zur Verfügung.
+Zur Verfügung stehen:
+  * **Epoche** – filtert die Timeline nach einer der definierten historischen Epochen
+  * **Meilenstein suchen** – durchsucht die angezeigten historischen Daten nach einem eingegebenen Begriff
+  * **Zurück** – wechselt zum vorherigen sichtbaren Meilenstein
+  * **Weiter** – wechselt zum nächsten sichtbaren Meilenstein
+  * **Gesamte Route** – entfernt den Epochenfilter und den Suchbegriff und zeigt wieder alle Meilensteine an
+Durch Anklicken eines Meilensteins wird dessen Detailansicht angezeigt.
+Die Detailansicht enthält:
+  * Jahr
+  * Epoche
+  * Titel
+  * ausführliche Beschreibung
+  * ergänzende Notiz
+Die Vor- und Zurück-Navigation berücksichtigt die aktuell durch Filter und Suche sichtbaren Meilensteine.
+===== Einbindung =====
+Die Indian Timeline wird über einen Shortcode in eine WordPress-Seite oder einen Beitrag eingebunden.
+Standard:
+<code>
+[indian_timeline]
+</code>
+Ohne weitere Attribute verwendet die Timeline den im Backend hinterlegten Titel und die dort hinterlegte Einleitung.
+Titel und Einleitung können für eine einzelne Shortcode-Instanz überschrieben werden:
+<code>
+[indian_timeline title="Unsere Geschichte" intro="Von 1901 bis heute."]
+</code>
+Folgende Shortcode-Attribute stehen zur Verfügung:
+^ Attribut ^ Funktion ^
+| ''title'' | Überschreibt den im Backend hinterlegten Titel für diese Timeline-Instanz |
+| ''intro'' | Überschreibt die im Backend hinterlegte Einleitung für diese Timeline-Instanz |
+Werden die Attribute nicht angegeben, verwendet das Plugin die globalen Einstellungen.
+===== Einstellungen =====
+Die globalen Einstellungen der Indian Timeline werden im WordPress-Backend unter
+**Einstellungen → Indian Timeline**
+verwaltet.
+Folgende Einstellungen stehen zur Verfügung:
+^ Einstellung ^ Funktion ^
+| Titel | Standardtitel der Timeline |
+| Einleitung | Standardtext unterhalb des Titels |
+| Hintergrund | Hintergrundfarbe der Timeline |
+| Alternativer Hintergrund | Hintergrundfarbe hervorgehobener Bereiche |
+| Text | allgemeine Textfarbe |
+| Akzent | Akzentfarbe für zentrale Gestaltungselemente |
+| Hover | Farbe für Hover-Zustände |
+Die Einstellungen gelten global für die Timeline.
+Titel und Einleitung können bei Bedarf für eine einzelne Einbindung über die Shortcode-Attribute ''title'' und ''intro'' überschrieben werden.
+===== Standardwerte =====
+Indian Timeline 1.0.0 besitzt folgende vorkonfigurierte Standardwerte:
+^ Einstellung ^ Standardwert ^
+| Titel | Indian Motorcycle – Route durch die Geschichte |
+| Einleitung | 125 Jahre Innovation, Leidenschaft und amerikanische Motorradgeschichte. |
+| Hintergrund | ''#F8F9FA'' |
+| Alternativer Hintergrund | ''#EEF1F4'' |
+| Text | ''#4A5568'' |
+| Akzent | ''#D96B43'' |
+| Hover | ''#B84E2E'' |
+Die Standardwerte werden verwendet, solange für die jeweilige Einstellung kein abweichender Wert gespeichert wurde.
+===== Datenhaltung =====
+Indian Timeline 1.0.0 verwendet zwei unterschiedliche Formen der Datenhaltung.
+Die globalen Einstellungen der Timeline werden über die WordPress Options API gespeichert. Hierzu gehören:
+  * Titel
+  * Einleitung
+  * Hintergrundfarbe
+  * alternativer Hintergrund
+  * Textfarbe
+  * Akzentfarbe
+  * Hover-Farbe
+Die Einstellungen werden gemeinsam in der WordPress-Option
+<code>
+tcb_indian_timeline_settings
+</code>
+gespeichert.
+Die historischen Meilensteine selbst werden in Version 1.0.0 nicht in der WordPress-Datenbank verwaltet.
+Sie sind direkt in der PHP-Hauptdatei des Plugins hinterlegt.
+Jeder Meilenstein enthält folgende Informationen:
+  * Jahr beziehungsweise Zeitraum
+  * Epoche
+  * Bezeichnung der Epoche
+  * Titel
+  * Kurzbeschreibung
+  * ausführliche Beschreibung
+  * ergänzende Notiz
+Änderungen, Ergänzungen oder Korrekturen an den historischen Ereignissen erfordern daher in Version 1.0.0 eine Änderung des Plugin-Codes.
+===== Technische Umsetzung =====
+TheCruiserBlog – Indian Timeline 1.0.0 ist als eigenständiges WordPress-Plugin umgesetzt.
+Die zentrale Plugin-Logik befindet sich in der Klasse ''TCB_Indian_Timeline''.
+Zu ihren Aufgaben gehören:
+  * Registrierung des Shortcodes ''[indian_timeline]''
+  * Registrierung und bedarfsgerechtes Laden von CSS und JavaScript
+  * Bereitstellung der historischen Ereignisdaten
+  * Laden und Verarbeiten der globalen Einstellungen
+  * Registrierung der Einstellungsseite im WordPress-Backend
+  * Validierung der gespeicherten Einstellungen
+  * Erzeugung der HTML-Grundstruktur der Timeline
+CSS und JavaScript werden zunächst bei WordPress registriert und erst bei der Ausgabe des Shortcodes eingebunden.
+Die historischen Ereignisdaten werden von PHP als JSON-Daten an die jeweilige Timeline-Instanz übergeben. JavaScript übernimmt anschließend die interaktive Darstellung, Filterung, Suche und Navigation im Browser.
+Für jede ausgegebene Timeline erzeugt das Plugin mithilfe der WordPress-Funktion ''wp_unique_id()'' eine eindeutige ID. Dadurch können mehrere Timeline-Instanzen unabhängig voneinander auf derselben Seite verwendet werden.
+Das Frontend verwendet Vanilla JavaScript und benötigt keine externe JavaScript-Bibliothek.
+===== Plugin-Struktur =====
+TheCruiserBlog – Indian Timeline 1.0.0 besitzt eine kompakte Plugin-Struktur.
+<code>
+thecruiserblog-indian-timeline/
+├── thecruiserblog-indian-timeline.php
+├── readme.txt
+│
+└── assets/
+    ├── css/
+    │   └── timeline.css
+    │
+    └── js/
+        └── timeline.js
+</code>
+Die einzelnen Dateien übernehmen folgende Aufgaben:
+  * ''thecruiserblog-indian-timeline.php'' – zentrale Plugin-Datei mit Plugin-Initialisierung, Shortcode, historischen Ereignisdaten, Einstellungen und HTML-Ausgabe
+  * ''readme.txt'' – Plugin-Dokumentation mit Installation, Shortcode-Verwendung und Versionsinformationen
+  * ''timeline.css'' – Gestaltung und responsive Darstellung der Timeline
+  * ''timeline.js'' – interaktive Darstellung, Suche, Epochenfilter, Auswahl und Navigation zwischen den Meilensteinen
+Version 1.0.0 verwendet keine zusätzlichen PHP-Klassen- oder Include-Dateien. Die PHP-Funktionalität ist vollständig in der zentralen Plugin-Datei zusammengefasst.
+===== Darstellung =====
+Die Indian Timeline verwendet eine eigenständige Darstellung im **Modern-Heritage-Stil**.
+Kennzeichnend sind:
+  * vertikale Timeline mit zentraler Verbindungslinie
+  * abwechselnde Anordnung der Meilensteine links und rechts der Zeitachse
+  * farblich hervorgehobene Jahresmarker
+  * Karten für die einzelnen historischen Meilensteine
+  * Hervorhebung des aktuell ausgewählten Meilensteins
+  * Hover-Effekte für interaktive Elemente
+  * eigener Detailbereich für den ausgewählten Meilenstein
+  * konfigurierbare Hintergrund-, Text-, Akzent- und Hover-Farben
+  * responsive Anpassung an kleinere Bildschirmbreiten
+Bei einer Bildschirmbreite unter **700 Pixeln** wechselt die Timeline von der wechselnden Links-/Rechts-Darstellung zu einer einheitlichen Anordnung mit links positionierter Zeitachse.
+Bei einer Bildschirmbreite unter **480 Pixeln** werden zusätzlich die Bedienelemente und historischen Eckdaten einspaltig dargestellt. Die Navigationsschaltflächen werden untereinander angeordnet.
+Die Darstellung ist vollständig im Plugin-eigenen Stylesheet ''timeline.css'' definiert.
+===== Sicherheit und Validierung =====
+TheCruiserBlog – Indian Timeline verwendet die Sicherheits- und Validierungsfunktionen von WordPress.
-Die Timeline ergänzt die redaktionellen Inhalte von TheCruiserBlog um eine strukturierte chronologische Darstellung wichtiger Ereignisse und Entwicklungen.
+Der direkte Aufruf der zentralen Plugin-Datei außerhalb von WordPress wird durch die Prüfung auf ''ABSPATH'' verhindert.
-===== Rolle innerhalb von TCB =====
+Der Zugriff auf die Einstellungsseite ist auf Benutzer mit der WordPress-Berechtigung ''manage_options'' beschränkt.
-Die Indian Timeline ist kein allgemeines WordPress-Plugin, sondern wurde speziell für die Anforderungen von TheCruiserBlog entwickelt.
+Bei der Verarbeitung der Einstellungen werden die eingegebenen Werte serverseitig bereinigt:
-Sie gehört damit zu den projektspezifischen Erweiterungen von TCB.
+  * Titel über ''sanitize_text_field()''
+  * Einleitung über ''sanitize_textarea_field()''
+  * Farbwerte über ''sanitize_hex_color()''
-^ Bereich ^ Aufgabe ^
+Ungültige Farbwerte werden durch die jeweiligen Standardwerte ersetzt.
-| **WordPress** | Verwaltung und Bereitstellung der Inhalte |
-| **TheCruiserBlog – Indian Timeline** | Aufbereitung und Darstellung der Zeitleiste |
-| **Impreza / WPBakery** | Einbindung in das Erscheinungsbild von TheCruiserBlog |
-===== Grundprinzip =====
+Bei der Frontend-Ausgabe werden Inhalte und Attribute mit den entsprechenden WordPress-Escaping-Funktionen abgesichert.
-Die Timeline soll historische Informationen übersichtlich und chronologisch zugänglich machen.
+Die Einstellungen werden über die WordPress Settings API verwaltet.
-Dabei stehen insbesondere folgende Ziele im Vordergrund:
+===== Installation =====
-  * chronologische Darstellung
+TheCruiserBlog – Indian Timeline kann als eigenständiges WordPress-Plugin installiert werden.
-  * übersichtliche Struktur
-  * verständliche Präsentation
-  * visuelle Unterstützung der historischen Inhalte
-  * einfache Pflege und Erweiterbarkeit
-  * gute Darstellung auf unterschiedlichen Bildschirmgrößen
-===== Inhaltlicher Schwerpunkt =====
+Systemvoraussetzungen:
-Der inhaltliche Schwerpunkt liegt auf der Geschichte von **Indian Motorcycle**.
+  * WordPress ab Version 6.2
+  * PHP ab Version 7.4
-Die Timeline soll wichtige Ereignisse und Entwicklungen zeitlich einordnen und damit die entsprechenden redaktionellen Beiträge von TheCruiserBlog ergänzen.
+Die Installation erfolgt über:
-===== Eigenentwicklung =====
+**WordPress → Plugins → Plugin hinzufügen → Plugin hochladen**
-Da es sich um eine eigene Entwicklung handelt, sollen im TCW neben der Verwendung auch die technischen Grundlagen und spätere Änderungen nachvollziehbar dokumentiert werden.
+Nach der Installation wird das Plugin aktiviert.
-Dazu gehören insbesondere:
+Anschließend kann die Timeline über den Shortcode
-  * Ziel und Funktionsumfang
+<code>
-  * Aufbau des Plugins
+[indian_timeline]
-  * verwendete Dateien
+</code>
-  * Einbindung in WordPress
-  * Datenstruktur
-  * Darstellung der Timeline
-  * CSS- und JavaScript-Komponenten
-  * Änderungen und Erweiterungen
-===== Entwicklungsprinzip =====
+in eine Seite oder einen Beitrag eingebunden werden.
-Die Indian Timeline soll möglichst unabhängig vom verwendeten Theme aufgebaut sein.
+Die globalen Einstellungen stehen unter
-Theme und Plugin haben unterschiedliche Aufgaben:
+**Einstellungen → Indian Timeline**
-^ Komponente ^ Aufgabe ^
+zur Verfügung.
-| **Theme** | allgemeine Darstellung von TheCruiserBlog |
-| **Indian Timeline** | Funktion und Darstellung der projektspezifischen Zeitleiste |
-Dadurch soll die Timeline auch bei Änderungen am Theme möglichst eigenständig erhalten bleiben.
+Das aktuelle Installationspaket kann direkt heruntergeladen werden:
-===== Dokumentation =====
+  * {{:plugins:indian-timeline:thecruiserblog-indian-timeline_v1.0.0_installation.zip|TheCruiserBlog – Indian Timeline 1.0.0 – Installationspaket herunterladen}}
-Da die Indian Timeline eine **Eigenentwicklung** ist, wird sie im TCW ausführlicher dokumentiert als einfache Drittanbieter-Plugins.
+===== Versionshistorie =====
-Die Dokumentation soll sowohl den aktuellen Stand als auch spätere Änderungen nachvollziehbar machen.
+^ Version ^ Änderungen ^
+| 1.0.0 | Erste Version mit responsiver Timeline, Suche, Epochenfilter, Navigation zwischen den Meilensteinen und konfigurierbaren Modern-Heritage-Farben |
-===== Detailthemen =====
+===== Zugehörige Dateien =====
-Für die weitere Dokumentation bieten sich eigene Unterseiten an:
+Zum Plugin gehören folgende Dokumentations- und Installationsdateien:
-  * Konzept und Anforderungen
+  * ''thecruiserblog-indian-timeline_v1.0.0_installation.zip'' – Installationspaket der Version 1.0.0
-  * Plugin-Struktur
+  * ''readme.txt'' – Plugin-Dokumentation mit Installation, Shortcode-Verwendung und Versionsinformationen
-  * Datenstruktur
-  * Einbindung in WordPress
-  * Darstellung der Timeline
-  * CSS
-  * JavaScript
-  * Responsive Darstellung
-  * Entwicklung und Änderungen
-  * Fehler und Lösungen
 <WRAP tcw-to-top>
-[[#thecruiserblog-indian-timeline|↑]]
+[[#thecruiserblog_indian_timeline|↑]]
 </WRAP>