j1-template 2024.3.16 → 2024.3.17

data/lib/starter_web/pages/public/amplitude_yt_tester.adoc

@@ -44,10 +44,12 @@ resource_options:
 
 // Attribute settings for section control
 //
-:ytp_audio:                             false
-:ytp_example:                           false
-:ms_slider_video_examples:              false
+:ytp-api--description:                  false
+:ytp--example:                          false
+:ytp--audio-player:                     true
+:ms-slider-video--example:              false
 
+:manon-melodie--playlist:               //youtube.com/channel/UCEsIlUzfXYT5AZSOVnbFqsQ
 
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
@@ -65,18 +67,13 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-The J1 Template support playing video on web pages by HTML5 Video, the new
-standard of HTML to show videos on webpages.
-
-Modern browsers support the video tag `<video>` for the new HTML5 video
-standard. The previous proprietary de facto standard software like
-_Flash Player_, _Quicktime_, or _Silverlight_ is no longer needed as the
-Jekyll theme J1 provides HTML5 Video support for local video content
-and from online sources on the Internet.
+The J1 Template supports the AmpltidueJS module playing audio from (YouTube)
+video. The Template system provides a plugin (Tech) to mimic AmpliudeJS
+players to control the audio.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
-ifeval::[{ytp_examples} == true]
+ifeval::[{ytp-api--description} == true]
 [role="mt-4"]
 == YouTube Audio
 
@@ -87,10 +84,9 @@ ifeval::[{ytp_examples} == true]
 // https://www.youtube.com/watch?v=ryxAe4B_3Pg
 // https://www.youtube.com/watch?v=wI1Rr29OCJM
 
-You can embed any YouTube video in your web pages and visitors on your
-site will be able to play and pause the video audio with a simple click.
-With this technique, you can also use a YouTube video as background audio
-that runs in a loop.
+You can embed any YouTube video on your web pages, and visitors can play
+and pause the audio with a simple click. This technique can also be used
+to use a YouTube video as background audio that runs in a loop.
 
 [TIP]
 ====
@@ -101,11 +97,11 @@ http://www.labnol.org/internet/youtube-audio-player/26740/[Embed YouTube as an A
 [role="mt-4"]
 === How to Embed YouTube Audio
 
-It takes just one step to embed a YouTube audio. Open any YouTube video
-and make a note of the YouTube Video ID (a string of 11 characters).
+It takes just one step to embed a YouTube audio. Open any YouTube video and
+make a note of the YouTube Video ID (a string of 11 characters).
 
-Next copy-paste the code below anywhere on your website and replace
-VIDEO_ID with actual ID of your YouTube video.
+Next, copy and paste the code below anywhere on your website, replacing
+VIDEO_ID with the actual ID of your YouTube video.
 
 [source, html]
 ----
@@ -114,50 +110,39 @@ VIDEO_ID with actual ID of your YouTube video.
 <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
 ----
 
-There are few other configuration parameters that you can change depending
-on requirements. For instance, if you set data-autoplay to 1, the audio will
-begin playing immediately on page load. Likewise, set data-loop to 1 and the
-audio will play continuously in a never-ending loop until manually stopped.
+The following example is using the YouTube JavaScript API, which renders a
+regular YouTube player with the width and height set to *0 pixels*. When
+the user clicks the audio button, it toggles the existing YouTube player state,
+and the video begins to play or pauses.
 
-This internally renders the YouTube video using the IFRAME player and would
-thus work on both desktop and mobile browsers. The JavaScript files are hosted
-on Github while the images are hosted on Imgur. It is recommended that you
-copy the assets to your own server before deploying on a heavy-traffic website.
+Here’s the annotated version of the source code. It can be extended to embed
+YouTube playlists; the default playback volume can be changed, or you even
+https://www.labnol.org/internet/embed-part-of-youtube-video/27948/[embeda part, {browser-window--new}]
+of the video.
 
 [role="mt-4"]
 === Technical Details
 
-We are using the YouTube JavaScript API that renders a regular YouTube player
-but with the width and height set to *0 pixels*. When the user clicks the
-audio button, it toggles the existing YouTube player state and the video
-begins to play or pauses.
-
-Here’s the annotated version of the source code. It can be extended to embed
-YouTube playlists, the default playback volume can be changed or you even
-https://www.labnol.org/internet/embed-part-of-youtube-video/27948/[embeda part, {browser-window--new}]
-of the video.
+lorem:sentences[5]
 endif::[]
 
-ifeval::[{ytp_example} == true]
+ifeval::[{ytp--example} == true]
 [role="mt-5"]
-=== YT Player
+== YT Player Example
 ++++
-<!-- 1. The <iframe> (and video player) will replace this <div> tag.            -->
+<!-- the <iframe> (video player) will replace this <div> tag                    -->
 <!-- =========================================================================== -->
 <div style="display:flex;justify-content:center;align-items:center;">
   <div id="youtube-audio1" data-video="WxcWO9O4DSM" data-autoplay="0" data-loop="1"></div>
   <div id="youtube-audio2" data-video="zAmDwCz2BOs" data-autoplay="0" data-loop="1"></div>
-  <!-- div id="youtube-audio2"></div -->
   <div id="youtube-audio3" data-video="ryxAe4B_3Pg" data-autoplay="0" data-loop="1"></div>
   <div id="youtube-audio4" data-video="wI1Rr29OCJM" data-autoplay="0" data-loop="1"></div>
 </div>
-++++
 
-++++
 <script>
   $(function() {
 
-    // Load the IFrame Player API code asynchronously.
+    // load the IFrame Player API code (asynchronously)
     var techScript;
 
     var tech    = document.createElement('script');
@@ -171,33 +156,64 @@ ifeval::[{ytp_example} == true]
 ++++
 endif::[]
 
+
+ifeval::[{ytp--audio-player} == true]
 [role="mt-5"]
-== Amplitude Player
+== Amplitude YT Player
 
-lorem:sentences[5]
+The example below demonstrates playing only the *Audio* track from YouTube
+Video using an AmplitudJS player. The J1 template uses the video *plugin* ytp
+to extend the native functionality of the AmplitudeJS API to playback YouTube
+files for the audio part.
 
-.Mimi Rutherfurt · Maritim Verlag (YouTube)
-amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-8"]
+[role="mt-4 mb-5"]
+[TIP]
+====
+Find complete playlist for the example of Manon Mélodie on link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
+====
 
-++++
-<script>
-  $(function() {
+// [role="mt-4"]
+// [[manon_melodie]]
+// === Manon Mélodie
 
-    // Load the IFrame Player API code asynchronously.
-    var techScript;
+// lorem:sentences[3]
 
-    var tech    = document.createElement('script');
-    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
-    techScript  = document.getElementsByTagName('script')[0];
+// .Manon Mélodie · YouTube 2024
+// amplitude::manon_melodie_yt_large[role="mt-4 mb-5"]
 
-    techScript.parentNode.insertBefore(tech, techScript);
+[role="mt-4"]
+=== Mimi Rutherfurt
 
-  });
-</script>
-++++
+lorem:sentences[3]
+
+.Mimi Rutherfurt · Maritim Verlag
+amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-5"]
+
+// [role="mt-4"]
+// [[faelle_des_bnd]]
+// === Die größten Fälle des BND
+
+// lorem:sentences[3]
 
+// .Die größten Fälle des BND · Maritim Verlag
+// amplitude::faelle_des_bnd_yt_large[role="mt-4 mb-5"]
 
-ifeval::[{ms_slider_video_examples} == true]
+endif::[]
+
+[role="mb-8"]
+[CAUTION]
+====
+Playing audio tracks is currently supported only for videos from YouTube (YT).
+The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+player buttons and controls to manage a *playlist* of video the same as known
+for native audio files.
+
+Note, AmplitudeJS YT Player can only be used with the J1 Template. Currently,
+only AJS players of type *compact* and *large* are supported.
+====
+
+
+ifeval::[{ms-slider-video--example} == true]
 [[ms_video]]
 == MS Slider using YouTube Video
 
@@ -226,6 +242,4 @@ controlling MPEG 4 video content on websites and web applications.
 
 .Video over VideoJS
 gallery::jg_video_html5_videojs[role="mt-4 mb-5"]
-
 endif::[]
-

data/lib/starter_web/pages/public/photoswipe_api.adoc

@@ -0,0 +1,150 @@
+---
+title:                                  PhotoSwipe
+title_extention:                        Application Interface
+tagline:                                Application Interface
+
+date:                                   2025-01-17
+#last_modified:                         2025-01-01
+
+description: >
+                                        PhotoSwipe is a popular JavaScript image gallery library well-suited
+                                        for desktops browsers and apps on mobile devices with touchscreens. PhotoSwipe provides a smooth and engaging way to showcase images on the web, especially  on mobile devices.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, slider, photoswipe
+
+categories:                             [ Manuals ]
+tags:                                   [ Module, Photoswipe ]
+
+image:
+  path:                                 /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             true
+personalization:                        true
+permalink:                              /pages/public/photoswipe_api/
+
+resources:                              [ photoswipe ]
+resource_options:
+  - toccer:
+      collapseDepth:                    3
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+          alt:                          PhotoSwipe API
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Attribute settings for page content control (e.g includes)
+//
+:documentdir:                           _includes/documents
+
+// Attribute settings for section control
+//
+:photoswipe-options:                    /pages/public/photoswipe_api/#photoswipe-options
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// See: https://photoswipe.com/getting-started
+
+[role="dropcap"]
+PhotoSwipe is a popular JavaScript image gallery library well-suited for
+desktops browsers and apps on mobile devices with touchscreens. PhotoSwipe
+provides a smooth and engaging way to showcase images on the web, especially
+on mobile devices. Here's a breakdown of its key functionalities.
+
+Displays images in a lightbox::
+When you click on an image, it overlays the current page with a zoomed-in
+view of the image. Easily zoom in and out of images and pan around them.
+View images in full-screen for an immersive experience
+
+Supports galleries::
+You can link multiple images together, allowing users to easily browse
+through a collection.
+
+Touch-friendly::
+Designed with intuitive touch gestures for navigation (swiping, pinching, etc.).
+Supports touch gestures like swiping, pinching, and dragging.
+
+Responsive::
+Adapts to different screen sizes and orientations.
+
+Customizable::
+Offers various options for customization, such as themes, transitions, and
+social sharing features.
+
+Keyboard Navigation::
+Navigate through images using keyboard shortcuts.
+
+Social Sharing::
+Easily share images on social media platforms.
+
+PhotoSwipe comes with a rich https://photoswipe.com/getting-startedi[API, {browser-window--new}].
+The programming interface allows developers to create individual user
+interfaces (UI) for pagination, navigation and more. Find large number of
+complex examples on the pages of the
+https://uiinitiative.com/[UI Initiative project, {browser-window--new}].
+
+The rich API makes PhotoSwipe an excellent choice for *web developers*, not least
+for template systems like J1 Template. In the current version of the J1 template
+(version 2025.x), PhotoSwipe is the *default slider* and *replaces* the *previously*
+used *carousels* _Owl Carousel_, _Slickslider_, and _Masterslider_ by their
+implementations based on _PhotoSwipeJS_.
+
+[NOTE]
+====
+The https://photoswipe.com/getting-startedi[PhotoSwipe API documentation, {browser-window--new}]
+pages are based on version *v11.2.1* for the current J1 template version 2025.x.
+The idea of providing this documentation is *not* to simply copy the original
+pages as duplicates. For better readability and usability, all pages are
+restructured and enhanced by code examples or improved description texts.
+
+The documentation pages for the J1 Template project will be used for the 
+**AI**-based **chat client** (*planned* for 4th quarter of 2025). The agent
+will be trained by all available documentation pages of the Template system
+to give users an easy-to-use source for using the J1 Template to create
+websites for their needs.
+
+All previously used slider *resources* are available in version 2025.x for
+*backward compatibility* but are no longer used for the example
+pages of the *built-in web*.
+====
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+// include::{documentdir}/100_swiper_html_layout.asciidoc[]
+// include::{documentdir}/100_swiper_initialization.asciidoc[]
+
+include::{documentdir}/photoswipe/200_photoswipe_parameters.asciidoc[]
+include::{documentdir}/photoswipe/210_photoswipe_lightbox_parameters.asciidoc[]
+
+// include::{documentdir}/200_swiper_parameters_l_o.asciidoc[]
+// include::{documentdir}/200_swiper_parameters_p_s.asciidoc[]
+// include::{documentdir}/200_swiper_parameters_t_z.asciidoc[]
+
+// include::{documentdir}/300_swiper_instance_properties.asciidoc[]
+
+include::{documentdir}/photoswipe/300_caption_plugin_for_photoSwipe.asciidoc[]
+// include::{documentdir}/400_swiper_modules.asciidoc[]
+
+// include::{documentdir}/500_swiper_methods.asciidoc[]
+
+// include::{documentdir}/600_swiper_events.asciidoc[]
+

data/lib/starter_web/pages/public/swiper_api.adoc

@@ -0,0 +1,128 @@
+---
+title:                                  SwiperJS
+title_extention:                        Application Interface
+tagline:                                Application Interface
+
+date:                                   2025-01-07
+#last_modified:                         2025-01-01
+
+description: >
+                                        Swiper comes with a very rich API. It allows
+                                        creating your own pagination, navigation buttons,
+                                        parallax effects and many more.
+
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        html, html5, slider, swiper
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Module, Swiper ]
+
+image:
+  path:                                 /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+  width:                                1920
+  height:                               1280
+
+attic:                                  false
+regenerate:                             true
+personalization:                        true
+permalink:                              /pages/public/swiper_api/
+
+resources:                              [ swiper ]
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+  - attic:
+      slides:
+        - url:                          /assets/image/modules/attics/markus-spiske-1920x1280.jpg
+          alt:                          Swiper API
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Attribute settings for page content control (e.g includes)
+//
+:documentdir:                           _includes/documents
+
+// Attribute settings for section control
+//
+:swiper--features:                      false
+:swiper--global-options:                true
+:swiper-modules:                        /pages/public/swiper_api/#swiper-modules
+:swiper-modules--a11y:                  /pages/public/swiper_api/#swiper-modules-a11y
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// See: https://swiperjs.com/swiper-api
+
+[role="dropcap"]
+Swiper is a free, modern touch slider with hardware-accelerated transitions.
+The slider is intended for desktop websites, mobile (web) apps, and native or
+hybrid mobile environments.
+
+Swiper comes with a rich https://swiperjs.com/swiper-api[API, {browser-window--new}].
+The programming interface allows developers to create individual user
+interfaces (UI) for pagination, navigation and more. Find large number of
+complex examples on the pages of the
+https://uiinitiative.com/[UI Initiative project, {browser-window--new}].
+
+The rich API makes Swiper an excellent choice for *web developers*, not least
+for template systems like J1 Template. In the current version of the J1 template
+(version 2025.x), Swiper is the *default slider* and *replaces* the *previously*
+used *carousels* _Owl Carousel_, _Slickslider_, and _Masterslider_ by their
+implementations based on _SwiperJS_.
+
+[NOTE]
+====
+The https://swiperjs.com/swiper-api[Swiper API documentation, {browser-window--new}]
+pages are based on version *v11.2.1* for the current J1 template version 2025.x.
+The idea of providing this documentation is *not* to simply copy the original
+pages as duplicates. For better readability and usability, all pages are
+restructured and enhanced by code examples or improved description texts.
+
+The documentation pages for the J1 Template project will be used for the 
+**AI**-based **chat client** (*planned* for 4th quarter of 2025). The agent
+will be trained by all available documentation pages of the Template system
+to give users an easy-to-use source for using the J1 Template to create
+websites for their needs.
+
+All previously used slider *resources* are available in version 2025.x for
+*backward compatibility* but are no longer used for the example
+pages of the *built-in web*.
+====
+
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+include::{documentdir}/swiper/100_swiper_features.asciidoc[]
+
+include::{documentdir}/swiper/100_swiper_html_layout.asciidoc[]
+include::{documentdir}/swiper/100_swiper_initialization.asciidoc[]
+
+include::{documentdir}/swiper/110_swiper_common_options.asciidoc[]
+
+include::{documentdir}/swiper/200_swiper_parameters_a_k.asciidoc[]
+include::{documentdir}/swiper/200_swiper_parameters_l_o.asciidoc[]
+include::{documentdir}/swiper/200_swiper_parameters_p_s.asciidoc[]
+include::{documentdir}/swiper/200_swiper_parameters_t_z.asciidoc[]
+
+include::{documentdir}/swiper/300_swiper_instance_properties.asciidoc[]
+
+include::{documentdir}/swiper/400_swiper_modules.asciidoc[]
+
+include::{documentdir}/swiper/500_swiper_methods.asciidoc[]
+
+include::{documentdir}/swiper/600_swiper_events.asciidoc[]