Version 2.0.0

Umfassende anpassungen für Version 2.0.0

Author: aeberhard

.gitignore

@@ -1,2 +1,17 @@
 # ignore TODO
 .TODO.txt
+
+.DS_Store
+.definition
+.dislap
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+*.iml
+modules.xml
+.idea/misc.xml
+.idea/vcs.xml
+.idea/encodings.xml
+*.ipr

CHANGELOG.md

@@ -0,0 +1,38 @@
+# REDAXO Fullpage-Demo - Changelog
+
+## Version 2.0.0 – 07.08.2022
+
+### Breaking changes
+
+* CSS-Framework bootstrap wurde durch UIkit ersetzt
+* Themes, Templates, Module, Medien und Inhalte geändert
+
+### Features
+
+* Dieses Demo-Addon verwendet auschließlich Core-Features von REDAXO
+* keine Abhängigkeit zu anderen Addons
+* Die Fullpage-Demo wurde komplett inhaltlich und technisch überarbeitet
+* Templates, Module und Inhalte angepasst
+* Mehr Inhaltsmodule, Markdown wird bei Textfeldern unterstützt
+* Unterstützung für Hintergrundvideos
+* Themes überarbeitet, SCSS-Variablen
+* SCSS für Themes möglich
+* Eigene Themes im project-Addon möglich (Verzeichnis `fpthemes` im project-Addon)
+* Installation analog der anderen REDAXO-Demos
+* Console-Command 'demo_fullpage:install': rex_command_demo_fullpage_install
+* Verwendung der neuen Mediatypen, die mit REDAXO 5.13 eingeführt wurden (z. B. `rex_media_medium`)
+* jQuery Version 3.6.0
+* fullpage.js Version 2.9.7
+* UIkit 3.14.3
+* FontAwesome 5.15.4
+* GLightbox 3.2.0
+
+### Bugfixes
+
+* keine
+
+## Version 1.1.0beta – 11.11.2017
+
+Komplett überarbeitete Version der fullpage-Demo.
+
+Installation der Demo-Datenbank per Button Dank @schuer

README.md

@@ -16,14 +16,15 @@ Diese Demo inklusive der Themes kann als Basis für eigene Projekte vewendet wer
 	<a href="https://github.com/FriendsOfREDAXO/demo_fullpage/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg?longCache=true&style=for-the-badge" alt=""></a>&nbsp;
 </p>
 
-> **Hinweis:**
-Eine Online-Demo mit den verschiedenen Themes der Fullpage-Demo gibt es hier: [https://fullpage.aesoft.de/](https://fullpage.aesoft.de/)
+> **Hinweis:** Eine Online-Demo mit den verschiedenen Themes der Fullpage-Demo gibt es hier: [https://fullpage.aesoft.de/](https://fullpage.aesoft.de/)
 
 Die Fullpage-Demo für REDAXO ist völlig frei verwendbar, sowohl für private als auch für kommerzielle Projekte!
 
 Die Demo vermeidet ganz bewusst Abhängigkeiten zu weiteren Addons und ist so einfach wie möglich gehalten.
 Da es in REDAXO viele unterschiedliche Wege und Vorlieben gibt um Webseiten zu erstellen kann einfach und nach belieben der gewünschte Editor, Addons usw. nachgerüstet, oder die Module und Templates entsprechend erweitert bzw. angepasst werden.
 
+> **Hinweis:** Dieses Demo-Addon verwendet auschließlich Core-Features von REDAXO.
+
 Die Fullpage-Demo bringt vier verschiedene Themes und einige Basis-Module für die Inhalte mit. Für jedes Theme gibt es auch Beispiele und vorbelegte CSS-Definitionen für das verwendete CSS-Framework **UIkit**. Die Themes können durch eine scss-Datei "leicht" abgeändert werden.
 Weitere Informationen zu den **Themes** gibt es [hier](https://github.com/FriendsOfREDAXO/demo_fullpage/blob/master/THEMES.md).
 
@@ -37,7 +38,7 @@ Die mitgelieferten Themes, Templates, Module und Inhalte dienen nur als Beispiel
 
 | **Einstellung** | **Beschreibung / Mögliche Werte**  |
 | --- | --- |
-| **Theme** | Hier kann ein vorhandenes Theme für die Webseite ausgewählt werden.<br>Die Themes sind im Verzeichnis `demo_fullpage/assets/themes/` zu finden.<br>Es ist auch möglich eigene Themes im project-Addon im Verzeichnis `project/fpthemes/` abzulegen.<br>Beim speichern der Einstellungen werden die CSS-Dateien des Themes mit dem SCSS-Compiler compiliert und das ganze Theme in das asset-Verzeichnis für das Frontend kopiert. |
+| **Theme** | Hier kann ein vorhandenes Theme für die Webseite ausgewählt werden.<br>Die Themes sind im Verzeichnis `demo_fullpage/assets/themes/` zu finden.<br>Es ist auch möglich eigene Themes im project-Addon im Verzeichnis `project/fpthemes/` abzulegen.<br>Beim speichern der Einstellungen werden die CSS-Dateien des ausgewählten Themes mit dem SCSS-Compiler compiliert und die CSS-Dateien des Themes in das asset-Verzeichnis für das Frontend kopiert. |
 | **Logo** | Logo für die Webseite.<br>Ist hier kein Logo ausgewählt wird ein evtl. vorhandenes Logo aus dem Theme verwendet.<br>(*themename/img/logo.svg* oder *themename/img/logo.png*)  |
 | **Automatisch zur nächsten 'Seite' scrollen (Fullpage-Modus)** | Diese Einstellung aktiviert den fullPage-Modus.<br>Beim scrollen wird automatisch zum nächsten Slide gescrollt.<br>Inhalte die höher als der Viewport der Webseite sind werden abgeschnitten!|
 | **Scrollbar im Fullpage-Modus anzeigen** | Standardmäßig wird im fullPage-Modus der Scrollbar ausgeblendet.<br>Über diese Einstellung kann der Scrollbar auch im fullPage-Modus angezeigt werden. |
@@ -47,16 +48,15 @@ Die mitgelieferten Themes, Templates, Module und Inhalte dienen nur als Beispiel
 | **Seiten-Navigation (dots) anzeigen** | Seiten-Navigation in Form von *Dots* anzeigen |
 | **Tooltip für Seiten-Navigation (dots) anzeigen** | Hier kann eingestellt werden ob Tooltips für die Seiten-Navigation anzeigt werden. |
 | **Position der Seiten-Navigation (dots)** | Die Seiten-Navigation kann links oder rechts von den Inhalten angezeigt werden. (Default rechts) |
-| **Pfeile für horizontale Slides anzeigen** | Sind horizontale Slides vorhanden kann hier die Anzeige von Navigationselementen (links/rechts) eingestellt werden. |
+| **Pfeile für horizontale Slides anzeigen** | Sind horizontale Slides vorhanden kann hier die Anzeige von Navigationselementen (Pfeile links/rechts) eingestellt werden. |
 | **Slide-Navigation (dots) für horizontale Slides anzeigen** | Die Slide-Navigation (dots) für horizontale Slides kann über diese Einstellung eingeblendet werden. |
 | **Position der Slide-Navigation (dots)** | Position der Slide-Navigation für horizontale Slides (oben/unten, Default unten) |
 | **Unterkategorien als Slides verwenden** | Wenn aktiviert werden auch die Seiten der Unterkategorien als horizontele Slides ausgegeben.<br>Reihenfolge: zuerst alle Artikel der Kategorie, dann alle Artikel der Unterkategorien. |
 
 Für eine optimale Darstellung der Webeite sollten die Inhalte der einzelnen Slides in etwa die gleiche Größe/Höhe haben.
 Auch die Inhalte von horizontalen Slides sollten nach Möglichkeit die gleiche Größe/Höhe haben.
 
-> **Hinweis:**
-Im Fullpage-Modus werden Inhalte die höher als der Viewport sind abgeschnitten!
+> **Hinweis:** Im Fullpage-Modus werden Inhalte die höher als der Viewport sind abgeschnitten!
 
 ## Kategorie und Artikel-Einstellungen
 
@@ -68,14 +68,13 @@ Im Fullpage-Modus werden Inhalte die höher als der Viewport sind abgeschnitten!
 
 | **Einstellung** | **Beschreibung / Mögliche Werte**  |
 | --- | --- |
-| **Hintergrundfarbe** | Hier kann eine Hintergrundfarbe für den Slide ausgewählt werden.<br>z.B. `#fc0` oder `rgba(60, 60, 60, .5)`<br>Bei vorhandenen horizontalen Slides wird die ausgewählte Hintergrundfarbe für alle horizontale Slides verwendet. |
-| **Hintergrundbild** | Hier kann ein Hintergrundbild aus dem Medienpool für den Slide ausgewählt werden.<br>Bei vorhandenen horizontalen Slides wird das ausgewählte Hintergrundbild für alle horizontale Slides verwendet. |
+| **Hintergrundfarbe** | Hier kann eine Hintergrundfarbe für den Slide ausgewählt werden.<br>z.B. `#fc0` oder `rgba(60, 60, 60, .5)`<br>Bei vorhandenen horizontalen Slides wird die ausgewählte Hintergrundfarbe für alle horizontalen Slides verwendet. |
+| **Hintergrundbild** | Hier kann ein Hintergrundbild aus dem Medienpool für den Slide ausgewählt werden.<br>Bei vorhandenen horizontalen Slides wird das ausgewählte Hintergrundbild für alle horizontalen Slides verwendet. |
 | **Hintergrundvideo** | Hier kann ein Hintergrundvideo aus dem Medienpool für den Slide ausgewählt werden.<br>Hintergrundvideos werden automatisch, ohne Ton und in Endlosschleife abgespielt. Beim verlassen des Slides wird das Video gestoppt, beim anzeigen des Slides wieder automatisch gestartet.<br>Bei vorhandenen horizontalen Slides wird das ausgewählte Hintergrundvideo für alle horizontale Slides verwendet.|
 | **Höhe automatisch an den Inhalt anpassen** | Inhalte dieser Kategorie werden automatisch an die Höhe der Inhalte angepasst. (wird bei vorhandenen horizontalen Slides ignoriert) |
 | **In der Haupt-Navigation ausblenden** | In der Hauptnavigation kann die Kategorie ausgeblendet werden. (CSS-Klasse hide-mainnav !) |
 
-> **Hinweis:**
-Die Einstellungen der Kategorie werden automatisch auch auf alle horizontalen Slides angewendet. Für horizontale Slides können in den Artikel-Meta-Daten die Einstellungen zusätzlich geändert/überschrieben werden.
+> **Hinweis:** Die Einstellungen der Kategorie werden automatisch auch auf alle horizontalen Slides angewendet. Für horizontale Slides können in den Artikel-Meta-Daten die Einstellungen zusätzlich geändert/überschrieben werden.
 
 ### Einstellungen für Artikel
 
@@ -93,13 +92,12 @@ Die Einstellungen der Kategorie werden automatisch auch auf alle horizontalen Sl
 * jQuery - [https://jquery.com/](https://jquery.com/)
 * fullPage.js - [https://alvarotrigo.com/fullPage/](https://alvarotrigo.com/fullPage/)
 * UIkit - [http://getuikit.com/](http://getuikit.com/)
-* Font Awesome - [http://fontawesome.io/](http://fontawesome.io/)
+* Font Awesome 5 - [https://fontawesome.com/v5/docs](https://fontawesome.com/v5/docs)
 * GLightbox - [https://biati-digital.github.io/glightbox/](https://biati-digital.github.io/glightbox/)
 * plyr - [https://plyr.io/](https://plyr.io/)
 * hamburgers - [https://jonsuh.com/hamburgers/](https://jonsuh.com/hamburgers/)
 
-> **Hinweis:**
-Das Addon verwendet die letzte frei verfügbare Version des fullPage-Scripts. Ab Version 3 ist das Script kostenpflichtig.
+> **Hinweis:** Das Addon verwendet die letzte frei verfügbare Version des fullPage-Scripts. Ab Version 3 ist das Script kostenpflichtig.
 [https://github.com/alvarotrigo/fullPage.js/releases/tag/2.9.7](https://github.com/alvarotrigo/fullPage.js/releases/tag/2.9.7)
 
 ## Hinweise für Entwickler
@@ -108,8 +106,7 @@ Die Fullpage-Demo wird von Zeit zu Zeit erweitert und Fehler werden korrigiert.
 
 Informationen zur Erstellung von eigenen **Themes** gibt es [hier](https://github.com/FriendsOfREDAXO/demo_fullpage/blob/master/THEMES.md).
 
-> **Hinweis:**
-Bei einem Update von Inhalten (Templates, Module, Artikel und Medienpool) für eine neue Addon-Version müssen die Beispiel-Exporte neu erstellt werden!
+> **Hinweis:** Bei einem Update von Inhalten (Templates, Module, Artikel und Medienpool) für eine neue Addon-Version müssen die Beispiel-Exporte neu erstellt werden!
 
 **Dabei ist folgendes zu beachten!**
 

THEMES.md

@@ -8,43 +8,76 @@ Für die Themes wird SCSS unterstützt. Für das Frontend wird auf jeden Fall di
 
 Variablen können direkt in der theme.css definiert werden oder mittels import z.B. `@import "theme"` eingefügt werden. Die Datei mit den Variablen muss im Theme-Verzeichnis dann entsprechend als **_theme.scss** abgespeichert werden.
 
+Bei allen Themes ist die Verwendung von Hintergrundbildern und Hintergrundvideos für Slides bereits integriert.
+
 > **Hinweis:**
 Alle .css-Dateien im Theme-Verzeichnis werden minimiert in [filename].min.css!
 
-Die beste Basis für ein eigenes Theme ist das Theme **minimal**. Hier sind alle notwendigen CSS und JavaScript-Definitionen für eine minimal gestylte Fullpage-Webseite vorhanden.
+Die beste Basis für ein eigenes Theme ist das Theme **minimal**. Hier sind alle notwendigen Standard CSS und JavaScript-Definitionen für eine minimal gestylte Fullpage-Webseite vorhanden.
 
 ## Mitgelieferte Themes
 
 ### Theme Coffee
 
-Eigenschaften
+![Screenshot Theme coffee](https://raw.githubusercontent.com/FriendsOfREDAXO/demo_fullpage/assets/theme_coffee.png "Screenshot Theme coffee")
+
+**Eigenschaften Theme "coffee"**
+
 - horizontale Naviation
-- Fixed-Background-Images
-- GLightbox für Bilder
-- Navigation blendet im Responsive-Mode beim scrollen aus/ein
+- Fixed-Background-Images (CSS3 muss deaktiviert sein, css3: false)
+- Hintergrundbilder fest im CSS definiert
+- GLightbox für Bilder, Videos, interner Content, externer Content
+- Glightbox mit Zoom-Effekt
+- Continuous Scrolling bei horizontalen Slides
+- Logo/Hamburger blendet im Responsive-Mode beim scrollen aus/ein
+- fixe horizontale Arrows bei horizontalen Slides
+- horizontale Dot-Navigation im Responsive-Modus immer oben
 
 ### Theme Bike
 
-Eigenschaften
+![Screenshot Theme bike](https://raw.githubusercontent.com/FriendsOfREDAXO/demo_fullpage/assets/theme_bike.png "Screenshot Theme bike")
+
+**Eigenschaften Theme "bike"**
+
 - horizontale Navitaion
-- Easing-Effekt beim scrollen im Fullpage-Modus
-- GLightbox für Bilder
+- Easing-Effekt beim scrollen (nur im Fullpage-Modus ohne Scrollbar)
+- Hintergrundbilder fest im CSS definiert
+- Wechsel hell/dunkel der Hintergrundbilder und Content (odd/even)
+- GLightbox für Bilder, Videos, interner Content, externer Content
+- Glightbox mit Fade-Effekt
+- Continuous Scrolling bei horizontalen Slides
+- Logo/Hamburger fix im Responsive-Mode
+- fixe horizontale Arrows bei horizontalen Slides
+- horizontale Dot-Navigation im Responsive-Modus immer oben
 
 ### Theme Road
 
-Eigenschaften
+![Screenshot Theme road](https://raw.githubusercontent.com/FriendsOfREDAXO/demo_fullpage/assets/theme_road.png "Screenshot Theme road")
+
+**Eigenschaften Theme "road"**
+
 - vertikale Navigation
+- Hintergrundbilder fest im CSS definiert
 - Blurry Backgrounds
-- Continuous Scrolling
-- GLightbox für Bilder
+- GLightbox für Bilder, Videos, interner Content, externer Content
+- Glightbox mit Zoom-Effekt
+- Continuous Scrolling vertikal
+- Continuous Scrolling bei horizontalen Slides
+- Logo/Hamburger fix im Responsive-Mode
+- fixe horizontale Arrows bei horizontalen Slides
+- horizontale Dot-Navigation im Responsive-Modus immer oben
 
 ### Theme Minimal
 
-Eigenschaften
-- minimale CSS und JavaScript-Definitonen
-- keine Lightbox
+![Screenshot Theme minimal](https://raw.githubusercontent.com/FriendsOfREDAXO/demo_fullpage/assets/theme_minimal.png "Screenshot Theme minimal")
 
+**Eigenschaften Theme "minimal"**
 
+- keine Hintergrundbilder im CSS definiert
+- minimale CSS und JavaScript-Definitonen
+- Standard-CSS fullPage.js
+- Standard-CSS uikit
+- kein Lightbox-Script vorbereitet
 
 ## Einbindung CSS/JavaScript im Frontend
 
@@ -57,7 +90,6 @@ Die notwendigen Stylesheets und Javascripte für eine "Fullpage-Webseite" werden
 <link rel="stylesheet" href="./assets/addons/demo_fullpage/css/jquery.fullpage.min.css">
 
 <link rel="stylesheet" href="./assets/addons/demo_fullpage/themes/[themename]/css/theme.min.css">
-
 ```
 
 **Notwendige Javascripte** (Template 20. Footer)
@@ -69,62 +101,39 @@ Die notwendigen Stylesheets und Javascripte für eine "Fullpage-Webseite" werden
 <script src="./assets/addons/demo_fullpage/js/uikit-icons.min.js"></script>
 
 <script src="./assets/addons/demo_fullpage/themes/[themename]/js/theme.js"></script>
-
 ```
 
 ## Verzeichnisstruktur assets
 
 Das Addon-Verzeichnis **assets** enthält die CCS und JavaScript-Dateien die bei der Installation/Reinstall automatisch
 in das Verzeichnis `assets/addons/demo_fullpage` kopiert werden.
 
-* **css**
-	animate.min.css
-	font-awesome.min.css
-	jquery.fullpage.css
-	jquery.fullpage.min.css
-	jquery.fullpage.min.css.map
-	uikit.css
-	uikit.min.css
-	uikit-rtl.css
-	uikit-rtl.min.css
-* **fonts**
-	FontAwesome.otf
-	...
-* **js**
-	jquery.fullpage.extensions.min.js
-	jquery.fullpage.js
-	jquery.fullpage.min.js
-	jquery.fullpage.min.js.map
-	jquery.min.js
-	scrolloverflow.min.js
-	uikit.js
-	uikit.min.js
-	uikit-icons.js
-	uikit-icons.min.js
-* **themes**
-  * **bike** (Theme Bike)
-  * **coffee** (Theme Coffee - DEFAULT)
-  * **minimal** (Theme Minimal)
-  * **road** (Theme Road)
-
----
+- **css**
+- **img**
+- **js**
+- **themes**
+  - **bike** (Theme Bike)
+  - **coffee** (Theme Coffee - DEFAULT)
+  - **minimal** (Theme Minimal)
+  - **road** (Theme Road)
+- **webfonts**
 
 ## Theme Verzeichnis-Struktur
 
 Die einzelnen Themes haben eine fest vorgegebene Verzeichnis-Struktur.
-Absolut notwendig ist die CSS-Datei **theme.css**, optional zusätzliche Dateien.
+Absolut notwendig ist die CSS-Datei **theme.css**, optional sind zusätzliche Dateien.
 
-* **css**
-	theme.css
-    _theme.scss (optional)
-* **img**
-	logo.svg
-* **js**
-	theme.js
+- **css**
+  - theme.css
+  - _theme.scss (optional)
+- **img**
+  - logo.svg
+- **js**
+  - theme.js
 
 ## Theme css - Stylesheets
 
-Das Stylesheet **css/theme.css** des Themes wird automatisch im Frontend eingebunden (Template **11. HTML-Header**).
+Das Stylesheet **css/thememin..css** des Themes wird automatisch im Frontend eingebunden (Template **11. HTML-Header**).
 Zusätzliche Stylesheets können über @import eingebunden werden.
 
 z.B.
@@ -134,6 +143,7 @@ z.B.
 ```
 
 Für eigene Themes muss ein eigenes Unterverzeichnis im Ordner **themes** angelegt werden.
+
 In der Datei **meintheme/css/theme.css** müssen die ersten 4 Zeilen wie folgt aussehen ...
 
 ```
@@ -148,7 +158,9 @@ Der Text in Zeile 3 wird bei den Addoneinstellungen für die Auswahl des Themes
 ## Theme js - JavaScript
 
 Das Script **js/theme.js** wird automatisch im Frontend eingebunden (Template **20. Footer**).
+
 Für zusätzliche eigene JavaScripte die jQuery-Funktion **getScript** verwenden
+
 z.B.
 
 ```javascript

assets/css/animate.min.css

@@ -15,7 +15,6 @@
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   outline: none;
-  overflow: hidden;
 }
 
 .glightbox-container.inactive {
@@ -57,7 +56,6 @@
 .glightbox-container .gslide {
   width: 100%;
   position: absolute;
-  opacity: 1;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -202,7 +200,6 @@
 
 .gslide-video::before {
   content: '';
-  display: block;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -231,6 +228,7 @@
   max-height: calc(100vh - 40px);
   overflow: auto;
   max-width: 100%;
+  margin: auto;
 }
 
 .gslide-inline .ginlined-content {
@@ -329,7 +327,6 @@
 .glightbox-mobile .glightbox-container .gslide-description {
   height: auto !important;
   width: 100%;
-  background: transparent;
   position: absolute;
   bottom: 0;
   padding: 19px 11px;
@@ -364,10 +361,6 @@
   color: inherit;
 }
 
-.glightbox-mobile .glightbox-container .gslide-desc string {
-  color: #fff;
-}
-
 .glightbox-mobile .glightbox-container .gslide-desc .desc-more {
   color: #fff;
   opacity: 0.4;