j1-template 2024.3.23 → 2024.3.25

data/lib/starter_web/pages/public/tools/tester/videojs_macro_tester.adoc

@@ -1,7 +1,7 @@
 ---
-title:                                  VideoJS over YT
-title_extention:                        Custom progressControlSlider
-tagline:                                Custom progressControlSlider
+title:                                  VideoJS
+title_extention:                        Custom VJS Players
+tagline:                                Custom VJS Players
 
 date:                                   2025-06-05
 last_modified:                          2025-06-08
@@ -28,14 +28,18 @@ regenerate:                             false
 personalization:                        true
 permalink:                              /pages/public/tester/videojs_yt/
 
-resources:                              [ videojs ]
+resources:                              [ gallery, lightgallery, masonry, videojs ]
 resource_options:
   - toccer:
       collapseDepth:                    3
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/markus-spiske-1920x1280.jpg
-          alt:                          Swiper Tester
+        - url:                          /assets/image/module/attic/1920x1280/markus-spiske.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/de/@markusspiske/ 
 ---
 
 // Page Initializer
@@ -69,44 +73,113 @@ websites, mobile web apps, and mobile native/hybrid apps.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-== VideoJS Player over YouTube
-
-lorem:sentences[3]
-
-++++
-<style>
-
-/* -----------------------------------------------------------------------------
-  styles moved to VJS theme uno at: 
-  assets/theme/j1/modules/videojs/css/themes/uno.css
-*/
-
-</style>
-++++
+// [role="mt-5"]
+// == Local Video
+
+// Videos created by a digicam or a mobile can be played by J1 Template using
+// the lightGallery integration. Present videos you have made at it's best.
+
+// .Local Video over VideoJS · Justified Gallery + LightGallery
+// gallery::jg_video_html5[role="mb-4"]
+
+
+// == Masonry
+
+// Masonry for J1 Template is a great tool for creating dynamic video galleries.
+// The module makes creating a gallery to display videos of different types easy.
+
+// .Mixed Video · Masonry + LightGallery
+// masonry::mixed_video_example[role="mb-4"]
+
+
+// [role="mt-4"]
+// == lightGallery (YouTube)
+
+// The galley maker *justifiedGallery* in combination with the *lightbox*
+// lightGallery is a great toolset for creating dynamic video galleries.
+// The module combinati0n makes creating a gallery to access videos easy.
+
+// .YouTube Video · justifiedGallery + LightGallery
+// gallery::jg_video_youtube_james_and_adele[role="mb-4"]
+
+
+// [role="mt-5"]
+// == VideoJS Player over YouTube
+
+// YouTube is a popular online video-sharing platform that allows users to
+// upload, view, share, and comment on videos. The platform provides services
+// for people and organizations to publish various video content.
+
+// ++++
+// <div class="video-title">
+//   <i class="mdib mdib-video mdib-24px mr-2"></i>
+//   The Breathtaking Beauty of Nature
+// </div>
+
+// <div class="mb-8">
+//   <video
+//     id="vid_2rtQOsWaAXc"
+//     class="video-js vjs-theme-uno"
+//     controls
+//     width="640"
+//     height="360"
+//     poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
+//     aria-label="The Breathtaking Beauty of Nature"
+//     data-setup='{
+//         "fluid" : true,
+//         "techOrder": [
+//             "youtube", "html5"
+//         ],
+//         "sources": [{
+//             "type": "video/youtube",
+//             "src": "//youtube.com/watch?v=IUN664s7N-c"
+//         }],
+//         "controlBar": {      
+//           "pictureInPictureToggle": false,
+//           "volumePanel": {
+//               "inline": false
+//           }
+//         }
+//       }'
+//   ></video>
+// </div>
+// ++++
+
+[role="mt-5"]
+== VideoJS Player over Dailymotion
+
+link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a
+video-sharing platform. The platform is available worldwide in 180+
+languages, featuring websites for their video content.
+
+The platform is a *monetization* solution that allows allows to directly
+connect to high-quality advertisers through a proprietary Advertising system.
+Like YouTube, videos can be watched for free, but ads are shown on each and
+every video.
 
 ++++
 <div class="video-title">
   <i class="mdib mdib-video mdib-24px mr-2"></i>
-  The Breathtaking Beauty of Nature
+  Morning Energy
 </div>
 
 <div class="mb-8">
   <video
-    id="2rtQOsWaAXc"
+    id="vid_x887s09"
     class="video-js vjs-theme-uno"
     controls
     width="640"
     height="360"
-    poster="//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg" alt="Beauty of Nature" 
-    aria-label="The Breathtaking Beauty of Nature"
+    poster="/assets/video/poster/dailymotion/meditation.jpg" alt="Morning Energy" 
+    aria-label="Morning Energy"
     data-setup='{
         "fluid" : true,
         "techOrder": [
-            "youtube", "html5"
+            "dailymotion", "html5"
         ],
         "sources": [{
-            "type": "video/youtube",
-            "src": "//youtube.com/watch?v=IUN664s7N-c"
+            "type": "video/dailymotion",
+            "src": "//dai.ly/x887s09"
         }],
         "controlBar": {      
           "pictureInPictureToggle": false,
@@ -119,6 +192,18 @@ lorem:sentences[3]
 </div>
 ++++
 
+
+++++
+<style>
+
+/* -----------------------------------------------------------------------------
+  styles moved to VJS theme uno at: 
+  assets/theme/j1/modules/videojs/css/themes/uno.css
+*/
+
+</style>
+++++
+
 ++++
 <script>
 
@@ -162,7 +247,7 @@ $(function() {
       // create div|caption container
       const newDiv = document.createElement('div');
       newDiv.classList.add('caption');
-      newDiv.textContent = 'The Breathtaking Beauty of Nature';
+      newDiv.textContent = 'Morning Energy';
 
       // insert div|caption container AFTER the image
       image.parentNode.insertBefore(newDiv, image.nextSibling);
@@ -180,15 +265,17 @@ $(function() {
     var j1CoreFinished  = (j1.getState() === 'finished') ? true : false;
 
     if (j1CoreFinished && pageVisible) {
-      const vjs_player  = document.getElementById("2rtQOsWaAXc");
+      // const vjs_player  = document.getElementById("vid_2rtQOsWaAXc");
+      const vjs_player  = document.getElementById('vid_x887s09');
 
       // add captions (on poster image)
-      addCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
-
+      // naddCaptionAfterImage('//img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg');
+      addCaptionAfterImage('/assets/video/poster/dailymotion/meditation.jpg');
+      
       // scroll page to the players top position
       // -----------------------------------------------------------------------
       vjs_player.addEventListener('click', function(event) {
-        const targetDiv         = document.getElementById("2rtQOsWaAXc");
+        const targetDiv         = document.getElementById("vid_x887s09");
         const targetDivPosition = targetDiv.offsetTop;
         const scrollOffset      = (window.innerWidth >= 720) ? -130 : -110;
 
@@ -203,12 +290,12 @@ $(function() {
   // customize the yt player created
   // ---------------------------------------------------------------------------
   var dependencies_met_vjs_player_exist = setInterval(function(options) {
-    var vjsPlayerExist = document.getElementById("2rtQOsWaAXc") ? true : false;
+    var vjsPlayerExist = document.getElementById("vid_x887s09") ? true : false;
 
     if (vjsPlayerExist) {
 
       // apply player customization on 'player ready'
-      videojs("2rtQOsWaAXc").ready(function() {
+      videojs("vid_x887s09").ready(function() {
         const vjsPlayer = this;
 
         // create customControlContainer for progressControlSilder|time (display) elements
@@ -280,3 +367,4 @@ $(function() {
 
 </script>
 ++++
+

data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc

@@ -99,8 +99,7 @@ end::tags[]
 // -----------------------------------------------------------------------------
 tag::data[]
 
-:data-images--themes-menu:                        "assets/image/page/tour/themes-1920x1280.jpg, Themes menu (Bootswatch)"
-:data-images--styles-menu:                        "assets/image/page/tour/styles-menu-1280x800.jpg, Styles menu (Bootswatch)"
+:data-images--bootswatch-themes:                  "assets/image/page/tour/bootswatch-themes.jpg, Bootswatch Themes"
 
 :data-quicksearch--icon:                          "assets/image/page/tour/600_quicksearch/quicksearch_icon.jpg, Search button (magnifier) in the quick access area"
 :data-quicksearch--input:                         "assets/image/page/tour/600_quicksearch/quicksearch_input.jpg, Input bar for a QuickSearch"

data/lib/starter_web/pages/public/tour/_includes/documents/419_advanced_modals_demo.asciidoc

@@ -83,7 +83,7 @@
       </div>
       <!-- Body -->
       <div class="modal-body">
-        <img src="/assets/image/module/attic/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
+        <img src="/assets/image/module/attic/1920x1280/admin-dashboard-bootstrap.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
         <div class="text-center">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
         </div>

data/lib/starter_web/pages/public/tour/_includes/documents/themes_bootstrap.asciidoc

@@ -15,7 +15,7 @@ link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
 and every website.
 
 .Theme menu (Bootswatch)
-lightbox::images--themes-menu[ 1280, {data-images--themes-menu} ]
+lightbox::data-images--themes-menu[1280, {data-images--themes-menu}]
 
 Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
 a great set of already prepared Bootstrap stylesheets in various designs are

data/lib/starter_web/pages/public/tour/asciidoc_extensions.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Asciidoc, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/puzzle-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/martin-sanchez.jpg
   width:                                1920
   height:                               1280
 
@@ -36,8 +36,12 @@ resources:                              [
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/puzzle-1920x1280-bw.jpg
-          alt:                          puzzle-1920x1280-bw
+        - url:                          /assets/image/module/attic/1920x1280/martin-sanchez.jpg
+          alt:                          Photo by Martin Sanchez on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/bootstrap_themes.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Themes
 title_extention:                        Bootstrap V5 Themes
-tagline:                                Individual Bootstrap Styles
+tagline:                                Individual Style
 
 date:                                   2020-11-10
 #last_modified:                         2023-01-01
@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Module, Theme ]
 
 image:
-  path:                                 /assets/image/module/attic/themes-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
   width:                                1920
   height:                               1280
 
@@ -32,12 +32,12 @@ resources:                              [ lightbox ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/module/attic/themes-1920x1280-bw.jpg
-          alt:                          Photo by Clem Onojeghuo on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/stories-ink-tattoo-care.jpg
+          alt:                          Photo by Stories & Ink Tattoo Care on Unsplash
           badge:
             type:                       unsplash
-            author:                     Clem Onojeghuo
-            href:                       //unsplash.com/@clemono
+            author:                     Stories & Ink Tattoo Care
+            href:                       https://unsplash.com/de/@storiesandink
 ---
 
 // Page Initializer
@@ -84,9 +84,64 @@ defined CSS classes in Bootstrap to customize a layout individually.
 </div>
 ++++
 
+
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-include::{documentdir}/themes_bootstrap.asciidoc[]
+[role="mt-5"]
+== The Themes
+
+Styles adjust the website's appearance based on the CSS rules and definitions
+of Bootstrap. Styles do not change the framework's functionality but modify
+rule-based, e.g., the color scheme, fonts, sizes, or the appearance of more
+complex elements like forms or tables. Additionally, a style may add additional
+components to extend the Bootstrap's framework.
+
+Modifying the CSS styles of link:{url-bs--home}[Bootstrap, {browser-window--new}]
+is not rocket science. But, to be honest, some knowledge is needed for the
+link:{url-w3org--css-spec}[CSS technology, {browser-window--new}] to do so.
+I encourage you to spend some time on learning CSS, the
+link:{url-w3schools--css-tutorial}[Design base, {browser-window--new}] of each
+and every website.
+
+.Bootswatch Themes (Examples)
+lightbox::bootswatch-themes[1280, {data-images--bootswatch-themes}]
+
+Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
+a great set of already prepared Bootstrap stylesheets in various designs are
+available on their website; no need to start from scratch. It is not
+required to re-define all the Bootstrap variables and rebuild the framework.
+Many different styles are available. What is already available at Bootswatch
+is at least a good base for your modifications -- your unique design.
+
+Besides the bunch of different stylesheets at *Bootswatch*, an
+link:{url-bootswatch--api}[Integration API, {browser-window--new}] is provided
+that helps a lot to make designs available for an existing site. This API
+is the base to integrate selectable Bootswatch stylesheets into the J1 Template
+navigation system.
+
+[role="mt-4"]
+=== Apply a Style
+
+The base for designing pages using the J1 Template is the style Uno, a modern
+light or dark CSS layout used for many types of websites. What I mentioned
+already, web design is not: one size fits all. The style Uno can be seen as
+a good base, a starting point. Combining Uno and a different styles may be
+a fast solution for your site!
+
+You can find all available stylesheets to be applied on your pages from the
+*Themes* menu. You're invited to check how a page is changing for its design
+if a different stylesheet for web design is used.
+
+[WARNING]
+====
+For changing from one style to the next at *runtime*, the current
+version of the J1 Template system tries add new styles to J1 specific
+components like fonts, headlines, lists or paragraphs. Changing the style
+will work for the most *common* elements, but *not all* of them for now.
+====
+
+Select a style from the *Themes* menu, and the new BS-based stylesheet is
+automatically applied to all pages of your website.
 
 
 [role="mt-5"]

data/lib/starter_web/pages/public/tour/icon_fonts.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Icon Fonts
 title_extention:                        Icons for J1 Template
-tagline:                                Popular Icons for Your Web
+tagline:                                Icons for Your Web
 
 date:                                   2020-11-06
 #last_modified:                         2023-01-01
@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Icon ]
 
 image:
-  path:                                 assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/material_symbols.jpg
   width:                                1920
   height:                               1280
 
@@ -31,12 +31,8 @@ resources:                              [ iconify ]
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/icon-fonts-1920x1280-bw.jpg
-          alt:                          Photo by Harpal Singh on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Harpal Singh
-            href:                       //unsplash.com/@aquatium
+        - url:                          /assets/image/module/attic/1920x1280/material_symbols.jpg
+          alt:                          Material Design Symbols
 ---
 
 // Page Initializer

data/lib/starter_web/pages/public/tour/modal_extentions.adoc

@@ -21,7 +21,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Bootstrap, Modal, Extension ]
 
 image:
-  path:                                 /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
   width:                                1920
   height:                               1280
 
@@ -32,7 +32,7 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/bootstrap-1920x1000-bw.jpg
+        - url:                          /assets/image/module/attic/1920x1280/bootstrap-modal.jpg
           alt:                          Bootstrap Framework Logo
 ---
 

data/lib/starter_web/pages/public/tour/responsive_tables.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Responsive Tables
 title_extention:                        Responsive tables for J1 Template
-tagline:                                Tables viewed best
+tagline:                                Present tables at its best
 
 date:                                   2020-11-09
 #last_modified:                         2023-01-01
@@ -30,12 +30,12 @@ resources:                              []
 resource_options:
   - attic:
       slides:
-        - url:                          /assets/image/page/tour/tables-1920x1280-bw.jpg
-          alt:                          Photo by Markus Spiske on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/towfiqu-barbhuiya.jpg
+          alt:                          Photo by Towfiqu barbhuiya on Unsplash
           badge:
             type:                       unsplash
-            author:                     Markus Spiske
-            href:                       //unsplash.com/@markusspiske/portfolio
+            author:                     Towfiqu barbhuiya
+            href:                       https://unsplash.com/de/@towfiqu999999
 ---
 
 // Page Initializer
@@ -89,7 +89,7 @@ a compromise. To fit the everyday needs for tables, viewed well on desktop
 and mobile devices, two types of *responsive* tables are implemented by the
 J1 Template system:
 
-.Types of responsive tables
+.Types of Responsive Tables
 [cols="3a,3a,6a", options="header", width="100%", role="rtable mt-4"]
 |===
 |Style |Type |Description
@@ -123,7 +123,7 @@ tablets.
 
 
 [role="mt-5"]
-== Bootstrap Tables
+== Bootstrap Tables (striped)
 
 Tables are widely used for documentation pages. Below, simple 2-column tables
 are used to explain some of the Jekyll variables for templating your content
@@ -140,7 +140,7 @@ normally and do not scroll horizontally.
 .Bootstrap using fixed text size `no-rtext`
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext"]
 |===
 |Variable |Description
 
@@ -157,7 +157,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, fixed text size `no-rtext`
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md no-rtext mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md no-rtext mt-4"]
 |===
 |Variable |Description
 
@@ -184,7 +184,7 @@ Post's front matter by specifying a new date/time in the format
 .Bootstrap using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="table-responsive-md"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive-md"]
 |===
 |Variable |Description
 
@@ -198,7 +198,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .Bootstrap, responsive text size
-[cols="4a,8a", options="header", width="100%", role="table-responsive mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped table-responsive mt-4"]
 |===
 |Variable |Description
 
@@ -219,7 +219,8 @@ Post's front matter by specifying a new date/time in the format
 |===
 
 [role="mt-4"]
-== Responsive Tables
+[[rtables-striped]]
+== Responsive Tables (striped)
 
 Responsive tables *rebuild* a table. The header is set to invisible, and
 all columns get vertically *stacked as rows*.
@@ -227,7 +228,7 @@ all columns get vertically *stacked as rows*.
 .R Table using responsive text size
 [source, asciidoc, role="noclip"]
 ----
-[cols="4a,8a", options="header", width="100%", role="rtable"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable"]
 |===
 |Variable |Description
 
@@ -241,7 +242,7 @@ depending upon what Liquid is being processed and what `page` is.
 ----
 
 .R Table, responsive text size
-[cols="4a,8a", options="header", width="100%", role="rtable mt-4"]
+[cols="4a,8a", options="header", width="100%", role="table-striped rtable mt-4"]
 |===
 |Variable |Description
 
@@ -261,7 +262,12 @@ Post's front matter by specifying a new date/time in the format
 
 |===
 
-.R Table using fixed font size
+
+[role="mt-4"]
+[[rtables-not-striped]]
+== Responsive Tables (NOT striped)
+
+.R Table using fixed font size (no rtext)
 [source, asciidoc, role="noclip"]
 ----
 [cols="4a,8a", options="header", width="100%", role="rtable no-rtext"]

data/lib/starter_web/pages/public/tour/typography.adoc

@@ -20,7 +20,7 @@ categories:                             [ Roundtrip ]
 tags:                                   [ Module, Typography ]
 
 image:
-  path:                                 /assets/image/page/tour/typography-1920x1280-bw.jpg
+  path:                                 /assets/image/module/attic/1920x1280/bp-miller.jpg
   width:                                1920
   height:                               1280
 
@@ -35,12 +35,12 @@ resource_options:
       transitionDuration:               fast
       resolutionRefreshRate:            500
       slides:
-        - url:                          /assets/image/page/tour/typography-1920x1280-bw.jpg
-          alt:                          Photo by Alice Donovan Rousel on Unsplash
+        - url:                          /assets/image/module/attic/1920x1280/bp-miller.jpg
+          alt:                          Photo by BP Miller on Unsplash
           badge:
             type:                       unsplash
-            author:                     Alice Donovan Rousel
-            href:                       //unsplash.com/@alicekat/portfolio
+            author:                     BP Miller
+            href:                       //unsplash.com/de/@bp_miller
 ---
 
 // Page Initializer