feat(SlideshowManager): add custom pagination template support

- Enhanced pagination configuration to include a custom template option.
- Updated `config.php`, `Install.php`, `Settings.php`, and relevant Twig templates to support the new 'custom' pagination type.
- Implemented logic in `SlideshowVariable.php` to handle custom template rendering for pagination.

Author: bhlindemann

src/config.php

@@ -67,7 +67,8 @@
             'pagination' => [
                 'enabled' => true,
                 'clickable' => true,
-                'type' => 'bullets',           // bullets, fraction, progressbar
+                'type' => 'bullets',           // bullets, fraction, progressbar, custom
+                'customTemplate' => '{current} / {total}', // Used when type = custom
             ],
             'paginationVisibility' => 'default', // default, hide-mobile, hide-desktop, mobile-only, desktop-only
 

src/migrations/Install.php

@@ -130,6 +130,7 @@ protected function createTables(): void
                     'enabled' => true,
                     'clickable' => true,
                     'type' => 'bullets',
+                    'customTemplate' => '{current} / {total}',
                 ],
                 'autoplay' => [
                     'enabled' => false,

src/models/Settings.php

@@ -53,6 +53,7 @@ class Settings extends Model
             'enabled' => true,
             'clickable' => true,
             'type' => 'bullets',
+            'customTemplate' => '{current} / {total}',
         ],
         'autoplay' => [
             'enabled' => false,

src/templates/_components/fields/SlideshowConfigField/input.twig

@@ -55,9 +55,18 @@
                 { label: 'Bullets', value: 'bullets' },
                 { label: 'Fraction', value: 'fraction' },
                 { label: 'Progressbar', value: 'progressbar' },
+                { label: 'Custom', value: 'custom' },
             ],
         }) }}
 
+        {{ forms.textField({
+            label: 'Custom Pagination Template'|t('slideshow-manager'),
+            instructions: 'Used only when Pagination Type is Custom. Available placeholders: {current}, {total}'|t('slideshow-manager'),
+            name: 'paginationCustomTemplate',
+            value: config.paginationCustomTemplate ?? '{current} / {total}',
+            placeholder: '{current} / {total}',
+        }) }}
+
         {{ forms.lightswitchField({
             label: 'Clickable Pagination'|t('slideshow-manager'),
             instructions: 'Allow clicking pagination to navigate'|t('slideshow-manager'),

src/templates/_components/fields/SlideshowField/config.twig

@@ -56,6 +56,26 @@
             }) }}
 
             <div id="field-pagination-visibility-{{ uniqueId }}" class="{{ (config.pagination.enabled ?? true) ? '' : 'hidden' }}">
+                {{ forms.selectField({
+                    label: 'Pagination Type'|t('slideshow-manager'),
+                    name: namespace ~ '[slideshowConfig][pagination][type]',
+                    value: config.pagination.type ?? 'bullets',
+                    options: [
+                        { label: 'Bullets', value: 'bullets' },
+                        { label: 'Fraction', value: 'fraction' },
+                        { label: 'Progressbar', value: 'progressbar' },
+                        { label: 'Custom', value: 'custom' },
+                    ],
+                }) }}
+
+                {{ forms.textField({
+                    label: 'Custom Pagination Template'|t('slideshow-manager'),
+                    instructions: 'Used only when Pagination Type is Custom. Available placeholders: {current}, {total}'|t('slideshow-manager'),
+                    name: namespace ~ '[slideshowConfig][pagination][customTemplate]',
+                    value: config.pagination.customTemplate ?? '{current} / {total}',
+                    placeholder: '{current} / {total}',
+                }) }}
+
                 {{ forms.selectField({
                     label: 'Pagination Visibility'|t('slideshow-manager'),
                     name: namespace ~ '[slideshowConfig][paginationVisibility]',

src/templates/settings/basic.twig

@@ -90,12 +90,24 @@
                 { label: 'Bullets', value: 'bullets' },
                 { label: 'Fraction', value: 'fraction' },
                 { label: 'Progressbar', value: 'progressbar' },
+                { label: 'Custom', value: 'custom' },
             ],
             disabled: settings.isOverriddenByConfig('defaultSwiperConfig.pagination.type'),
             warning: settings.isOverriddenByConfig('defaultSwiperConfig.pagination.type') ?
                 'This is being overridden by the <code>defaultSwiperConfig.pagination.type</code> setting in <code>config/slideshow-manager.php</code>.'|t('slideshow-manager')|raw : null,
         }) }}
 
+        {{ forms.textField({
+            label: 'Custom Pagination Template'|t('slideshow-manager'),
+            instructions: 'Used only when Pagination Type is Custom. Available placeholders: <code>{current}</code>, <code>{total}</code>'|t('slideshow-manager')|raw,
+            id: 'defaultSwiperConfig-pagination-customTemplate',
+            name: 'settings[defaultSwiperConfig][pagination][customTemplate]',
+            value: settings.defaultSwiperConfig.pagination.customTemplate ?? '{current} / {total}',
+            disabled: settings.isOverriddenByConfig('defaultSwiperConfig.pagination.customTemplate'),
+            warning: settings.isOverriddenByConfig('defaultSwiperConfig.pagination.customTemplate') ?
+                'This is being overridden by the <code>defaultSwiperConfig.pagination.customTemplate</code> setting in <code>config/slideshow-manager.php</code>.'|t('slideshow-manager')|raw : null,
+        }) }}
+
         {{ forms.lightswitchField({
             label: 'Clickable Pagination'|t('slideshow-manager'),
             instructions: 'Allow clicking pagination to navigate'|t('slideshow-manager'),

src/variables/SlideshowVariable.php

@@ -175,6 +175,10 @@ public function buildSwiperConfig(array $config, string $sliderId): array
             if (!empty($config['paginationType'])) {
                 $swiperConfig['pagination']['type'] = $config['paginationType'];
             }
+
+            if (!empty($config['paginationCustomTemplate'])) {
+                $swiperConfig['pagination']['customTemplate'] = (string)$config['paginationCustomTemplate'];
+            }
         } else {
             $swiperConfig['pagination'] = false;
         }
@@ -390,6 +394,22 @@ function initSwiper_{$safeFunctionName}() {
                 config = Object.assign({}, config, overrides);
             }
 
+            // Support pagination type "custom" via template placeholders.
+            // Swiper requires pagination.renderCustom to be a function, which cannot be JSON encoded.
+            if (config.pagination && typeof config.pagination === 'object' && config.pagination.type === 'custom') {
+                const customTemplate = typeof config.pagination.customTemplate === 'string' && config.pagination.customTemplate.trim() !== ''
+                    ? config.pagination.customTemplate
+                    : '{current} / {total}';
+
+                config.pagination.renderCustom = function(swiper, current, total) {
+                    return customTemplate
+                        .split('{current}').join(String(current))
+                        .split('{total}').join(String(total));
+                };
+
+                delete config.pagination.customTemplate;
+            }
+
             if (debug) {
                 console.log('Initializing Swiper "' + sliderId + '" with config:', config);
             }