j1-template 2024.3.17 → 2024.3.18

data/lib/starter_web/pages/public/_includes/documents/photoswipe/200_photoswipe_parameters.asciidoc

@@ -1,5 +1,5 @@
 [role="mt-5"]
-== PhotoSwipe Options
+== PhotoSwipe Parameters
 
 List of available PhotoSwipe options (parameters) alphabetically ordered.
 Find option settings also with the
@@ -11,6 +11,7 @@ https://photoswipe.com/getting-started/[PhotoSwipe Documentation, {browser-windo
 Boolean, `+true+`. Allow swipe navigation to the next slide when the
 current slide is zoomed. Does not apply to mouse events.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -27,6 +28,7 @@ lightbox.init();
 
 Boolean, `+true+`. Left/right arrow keys for navigation.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -45,7 +47,7 @@ lightbox.init();
 Sets the background *backdrop* opacity. Should be *always* defined by
 *bgOpacity* option and *not* by CSS RGBA color.
 
-[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4"]
+[cols="3,2,2,5a", subs=+macros, options="header", width="100%", role="rtable mt-4 mb-5"]
 |===
 |Name |Type |Default |Description \| Example
 
@@ -55,6 +57,7 @@ Sets the background *backdrop* opacity. Should be *always* defined by
 |Sets the background *backdrop* opacity. Should be *always* defined by
 *bgOpacity* option and *not* by CSS RGBA color.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -80,6 +83,7 @@ page.
 Boolean, `+true+`. If image is not zoomable (for example, smaller than
 viewport) it can be closed by clicking on it.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -97,6 +101,7 @@ lightbox.init();
 
 Boolean, `+true+`. Vertical drag gesture to close the PhotoSwipe.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -132,6 +137,7 @@ Message to display when the image wasn't able to load. If you need to
 display HTML - use link:/filters#contenterrorelement[contentErrorElement
 filter].
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -150,6 +156,7 @@ Function `+{x: width, y: height}+`, `+undefined+`. A function that
 should return slide viewport width and height, in format
 `+{x: 100, y: 100}+`.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -188,6 +195,7 @@ In the example below transition duration is set to 1000ms (1s). Easing is
 defined dynamically (opening transition gets ease-out-back, zoom transitions
 gets ease-in-out-back, and closing transition gets ease-in-back):
 
+[role="mb-5"]
 [source, js]
 ----
 const backEasing = {
@@ -225,6 +233,7 @@ lightbox.init();
 
 String, `+/+`. Used for slide count indicator ("1 of 10 ").
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -244,6 +253,7 @@ Boolean, `+true+`. If set to true you'll be able to swipe from the last
 to the first image. Option is always `+false+` when there are less than
 3 slides.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -288,6 +298,7 @@ Integer, `+4000+`. Maximum width of image to animate, if initial
 rendered image width is larger than this value - the opening/closing
 transition will be automatically disabled.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -325,6 +336,7 @@ Function, should return padding object. The option is checked
 frequently, so make sure it's performant. Overrides `+padding+` option
 if defined. For example:
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -355,6 +367,7 @@ lightbox.init();
 
 Boolean, `+true+`. Pinch touch gesture to close the gallery.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -375,6 +388,7 @@ movement. Should be an array with two integers, first one - number of
 items to preload before the current image, second one - after the
 current image. Two nearby images are always loaded.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -394,6 +408,7 @@ Number (ms), `+2000+`. Delay before the loading indicator will be
 displayed, if image is loaded during it - the indicator will not be
 displayed at all. Can be zero.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -412,6 +427,7 @@ lightbox.init();
 Boolean, `+true+`. Restore focus the last active element after
 PhotoSwipe is closed.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -431,6 +447,7 @@ Number, `+333+`. Transition duration in milliseconds, can be `+0+`.
 link:/opening-or-closing-transition#transition-duration-and-easing[Example
 here].
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -449,6 +466,7 @@ lightbox.init();
 Number, `+0.1+`. Spacing between slides. Defined as ratio relative to
 the viewport width (0.1 = 10% of viewport).
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -481,6 +499,7 @@ page.
 Boolean, `+undefined+`. By default PhotoSwipe zooms image with
 ctrl-wheel, if you enable this option - image will zoom just via wheel.
 
+[role="mb-5"]
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({

data/lib/starter_web/pages/public/_includes/documents/photoswipe/210_photoswipe_lightbox_parameters.asciidoc

@@ -1,36 +1,42 @@
 [role="mt-5"]
-== Lightbox Options
+== PhotoSwipe Lightbox
 
 See link:/getting-started[getting started] and link:/data-sources[data
 sources] for examples.
 
-[role="mt-5"]
-=== gallery
+[cols="3,9a", subs=+macros, options="header", width="100%", role="rtable mt-5"]
+|===
+|Name |Description
 
-Element, NodeList, or CSS selector (string) for the gallery element.
+|`gallery`
+|Element, NodeList, or CSS selector (string) for the *gallery* element,
+a swiper slider for example.
 
-[role="mt-5"]
-==== children
+|`children`
+|Element, NodeList, or CSS selector (string) for elements within a
+`gallery`, a swiper slider for example. If not defined or set to `false`,
+the `gallery` *root* node is used.
 
-Element, NodeList, or CSS selector (string) for elements within
-`+gallery+`. For example, link elements. If not defined or set to false
-- root `+gallery+` node will be used.
+|===
 
 [role="mt-5"]
 === pswpModule
 
-Function or Module, `+undefined+`.
+Function or Module. Should return import(), if you need to *dynamic* import.
 
-A function that should return import() promise (if you need dynamic import),
-for example:
+Default: `undefined`
 
+[role="mb-5"]
+.Example
 [source, js]
 ----
-pswpModule: () => import('photoswipe/dist/photoswipe.esm.js');
+pswpModule: PhotoSwipe
 ----
 
-Or the PhotoSwipe *Core* module itself, for example:
+Or the PhotoSwipe *Core* module itself.
 
+[role="mb-5"]
+.Example
 [source, js]
 ----
 const lightbox = new PhotoSwipeLightbox({
@@ -39,19 +45,21 @@ const lightbox = new PhotoSwipeLightbox({
 });
 ----
 
+
 [role="mt-5"]
 === preloadFirstSlide
 
-Boolean, `+true+`. Loads the first slide image in parallel with
-PhotoSwipe Core (while PhotoSwipe is opening).
+Boolean, `true`. Loads the first slide image in parallel with PhotoSwipe
+Core (while PhotoSwipe is opening).
 
+[role="mb-5"]
 [source, js]
 ----
 import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
 const lightbox = new PhotoSwipeLightbox({
-  gallery: '#gallery--test-appendToEl',
+  gallery: '#gallery_id',
+  pswpModule: PhotoSwipe,
   children: 'a',
-  pswpModule: () => import('/photoswipe/photoswipe.esm.js'),
   preloadFirstSlide: false
 });
 lightbox.init();
@@ -60,39 +68,38 @@ lightbox.init();
 [role="mt-5"]
 === Translating
 
-A list of options that might need a translation:
+A list of options that might need a *translation*.
 
-[source,prism-code,language-text,codeBlock_wPnj,docs-styled-scrollbar]
+[role="mb-5"]
+[source, js]
 ----
-closeTitle: 'Close',
-zoomTitle: 'Zoom',
-arrowPrevTitle: 'Previous',
-arrowNextTitle: 'Next',
-
-errorMsg: 'The image cannot be loaded',
-indexIndicatorSep: ' / ',
+{
+  closeTitle:         'Close',
+  zoomTitle:          'Zoom',
+  arrowPrevTitle:     'Previous',
+  arrowNextTitle:     'Next',
+  errorMsg:           'The image cannot be loaded',
+  indexIndicatorSep:  '/'
+}
 ----
 
-Example:
-
+[role="mb-5"]
+.Example
 [source, js]
 ----
-import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';
 const lightbox = new PhotoSwipeLightbox({
-  gallery: '#gallery--test-i18n',
+  gallery: '#gallery_id',
+  pswpModule: PhotoSwipe,
   children: 'a',
-
   closeTitle: 'Close the dialog',
   zoomTitle: 'Zoom the photo',
   arrowPrevTitle: 'Go to the previous photo',
   arrowNextTitle: 'Go to the next photo',
-
   errorMsg: 'The photo cannot be loaded',
   indexIndicatorSep: ' of ',
-
-  pswpModule: () => import('/photoswipe/photoswipe.esm.js'),
   preloadFirstSlide: false
 });
+
 lightbox.init();
 ----
 

data/lib/starter_web/pages/public/_includes/documents/photoswipe/300_caption_plugin_for_photoSwipe.asciidoc

@@ -1,5 +1,6 @@
 [role="mt-5"]
-== PhotoSwipe Captions
+[[photoswipe-captions-plugin]]
+=== Lightbox Captions
 
 PhotoSwipe does not support captions out of the box, but a *plugin* is available.
 The plugin can *automatically position* the text below or aside the image,
@@ -12,7 +13,8 @@ For accessibility, make sure that important captions are always
 available without PhotoSwipe - either use an `alt` attribute on
 thumbnails or `aria-labelledby`.
 
-[role="mt-4"]
+[role="mt-5"]
+[[photoswipe-captions-plugin-initialization]]
 === Initialization
 
 The plugin has a single JS file *photoswipe-caption-plugin.min.js*
@@ -33,12 +35,12 @@ lorem:sentences[3]
   <div class="swiper-wrapper">
     <!-- Slides (required) -->
     <div class="swiper-slide">
-      <img src="<path_to>/image-1.jpg">
+      <img src="path/to/image-1.jpg">
       <span class="pswp-caption-content">Caption: Image 1</span>
     </div>
     <!-- more slides -->
     <div class="swiper-slide">
-      <img src="<path_to>/image-x.jpg">
+      <img src="path/to/image-x.jpg">
       <span class="pswp-caption-content">Caption: Image X</span>
     </div>
   </div> <!-- END wrapper element -->
@@ -56,7 +58,7 @@ lorem:sentences[3]
 </div> <!-- END Main container -->
 ----
 
-[role="mt-4"]
+[role="mt-5"]
 === Base HTML Layout v2
 
 lorem:sentences[3]
@@ -70,12 +72,12 @@ lorem:sentences[3]
     <ul class="swiper-wrapper">
       <!-- Slides (required) -->
       <li class="swiper-slide">
-        <img src="<path_to>/image-1.jpg">
+        <img src="path/to/image-1.jpg">
         <span class="pswp-caption-content">Caption: Image 1</span>
       </li>
       <!-- more slides -->
       <li class="swiper-slide">
-        <img src="<path_to>/image-x.jpg">
+        <img src="path/to/image-x.jpg">
         <span class="pswp-caption-content">Caption: Image X</span>
       </li>
     </ul> <!-- END swiper-wrapper (slides) -->
@@ -93,7 +95,7 @@ lorem:sentences[3]
 </div> <!-- END Main container -->
 ----
 
-[role="mt-4"]
+[role="mt-5"]
 === Extended HTML Layout
 
 lorem:sentences[3]
@@ -107,19 +109,19 @@ lorem:sentences[3]
   <ul class="swiper-wrapper">
     <!-- Slides (required) -->
     <li class="swiper-slide">
-      <a href="<path_to>/image-1.jpg"
+      <a href="path/to/image-1.jpg"
         data-pswp-width="<max_width>"
         data-pswp-height="<max_height>">
-        <img src="<path_to>/image-1.jpg" alt="Image 1">
+        <img src="path/to/image-1.jpg" alt="Image 1">
         <span class="pswp-caption-content">Caption: Image 1</span>
       </a>
     </li>
     <!-- more slides -->
     <li class="swiper-slide">
-      <a href="<path_to>/image-x.jpg"
+      <a href="path/to/image-x.jpg"
         data-pswp-width="<max_width>"
         data-pswp-height="<max_height>">
-        <img src="<path_to>/image-x.jpg" alt="Image X">
+        <img src="path/to/image-x.jpg" alt="Image X">
         <span class="pswp-caption-content">Caption: Image X</span>
       </a>
     </li>
@@ -138,7 +140,7 @@ lorem:sentences[3]
 </div> <!-- END Main container -->
 ----
 
-[role="mt-4"]
+[role="mt-5"]
 === Sniper Initialization (Javascript)
 
 lorem:sentences[3]
@@ -163,45 +165,45 @@ lorem:sentences[3]
 ----
 
 [role="mt-5"]
-== Plugin options
+[[photoswipe-captions-plugin-parameters]]
+== Parameters
 
 lorem:sentences[3]
 
-[role="mt-4"]
-=== captionContent
-
-captionContent: _.pswp-caption-content_
-
-Used to retrieve caption content.
-
-Can be a selector of the element from which caption content will be
-retrieved, if the element is not found - the plugin will try to use the
-thumbnail image `alt` attribute.
-
-[source, html]
-----
-<a href="path/to/large-image.jpg" data-pswp-width="1024" data-pswp-height="768">
-  <img src="path/to/thumbnail.jpg" alt="" />
-  <span class="pswp-caption-content">Caption content</span>
-</a>
-----
-
-Or a function that should return *caption content*.
-
-.Example
-[source, js]
-----
-captionContent: (slide) => {
-  return slide.data.element.querySelector('img').getAttribute('alt');
-}
-----
-
-[role="mt-4"]
-=== type
-
-string, type: _auto_
-
-Position type of the caption can be _auto_, _below_, or _aside_.
+// .HTML Structure
+// [source, html]
+// ----
+// <a href="path/to/large-image.jpg" data-pswp-width="1024" data-pswp-height="768">
+//   <img src="path/to/thumbnail.jpg" alt="" />
+//   <span class="pswp-caption-content">Caption content</span>
+// </a>
+// ----
+
+// Or a function that should return *caption content*.
+
+// .Example
+// [source, js]
+// ----
+// captionContent: (slide) => {
+//   return slide.data.element.querySelector('img').getAttribute('alt');
+// }
+// ----
+
+[cols="4,2,2,4a", subs=+macros, options="header", width="100%", role="rtable mt-5"]
+|===
+|Name |Type |Default |Description \| Example
+
+|`captionContent`
+|string
+|_.pswp-caption-content_
+|Used to retrieve caption content. Can be a selector of the element from
+which caption content will be retrieved, if the element is not found, the
+plugin will try to use the thumbnail image `alt` attribute.
+
+|`type`
+|string
+|_auto_
+|Position type of the caption can be _auto_, _below_, or _aside_.
 
 * _below_, caption will always be placed below the image
 * _aside_, caption will always be placed on the right side of the
@@ -209,15 +211,13 @@ Position type of the caption can be _auto_, _below_, or _aside_.
 * _auto_, the plugin will try to automatically determine the best
   position (depending on available space)
 
-[role="mt-4"]
-=== mobileLayoutBreakpoint
-
-mobileLayoutBreakpoint: 600
-
-Maximum window width at which mobile layout should be used, or a
-function that should return true if mobile layout should be used. For
-example:
+|`mobileLayoutBreakpoint`
+|number
+|600
+|Maximum window width at which mobile layout should be used, or a
+function that should return true if mobile layout should be used. 
 
+.Example
 [source, js]
 ----
 mobileLayoutBreakpoint: (pswp, captionPlugin) => {
@@ -225,39 +225,35 @@ mobileLayoutBreakpoint: (pswp, captionPlugin) => {
 }
 ----
 
-[role="mt-4"]
-=== horizontalEdgeThreshold
-
-horizontalEdgeThreshold: 20
-
-When the caption `x` position is less than this value, it'll get class
+|`horizontalEdgeThreshold`
+|number
+|20
+|When the caption `x` position is less than this value, it'll get class
 `pswp__dynamic-caption--on-hor-edge`. You may use it to apply
 different styling, such as horizontal padding.
 
-[role="mt-4"]
-=== mobileCaptionOverlapRatio
-
-mobileCaptionOverlapRatio: 0.3
-
-A ratio defines the amount of horizontal empty space before the mobile
+|`mobileCaptionOverlapRatio`
+|number
+|0.3
+|Ratio defines the amount of horizontal empty space before the mobile
 caption switches to an "`overlap`" layout. For example, if it's set to
 0.3 - the caption will start overlapping the image when more than 30% of
 horizontal space is not occupied by an image. If you set it to 0 - the
 caption will always overlap. If you set it to 1 - the caption will
 constantly shift the image (unless it's taller than the viewport).
 
-[role="mt-4"]
-=== verticallyCenterImage
-
-verticallyCenterImage: false
-
-If enabled, the image will always be vertically centered in the
+|`verticallyCenterImage`
+|boolean
+|`false`
+|If enabled, the image will always be vertically centered in the
 remaining space between the caption and the rest of the viewport. If set
 to false (default value) - the image will lift up only if the caption
 does not fit below.
 
+|===
 
 [role="mt-5"]
+[[photoswipe-captions-plugin-styling]]
 == Styling
 
 The caption has class `pswp__dynamic-caption`.
@@ -292,6 +288,7 @@ queries if you need to):
 }
 ----
 
+[role="mt-5 mb-8"]
 === How auto positioning works
 
 * Check if there is more horizontal or vertical free space around the