Skip to content

Commit 552315a

Browse files
bhlindemannbhlindemann
committed
feat(SettingsController): add styles settings tab and update validation
Added a new action for the styles settings tab in SettingsController. Updated the allowed settings sections to include 'styles'. Modified the settings layout to include a link to the new styles tab. Created a new template for styles settings with various CSS variable options.
1 parent f938984 commit 552315a

File tree

6 files changed

+157
-1
lines changed

6 files changed

+157
-1
lines changed

‎src/SlideshowManager.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ function(RegisterUrlRulesEvent $event) {
234234
'slideshow-manager/settings/basic' => 'slideshow-manager/settings/basic',
235235
'slideshow-manager/settings/layout' => 'slideshow-manager/settings/layout',
236236
'slideshow-manager/settings/controls' => 'slideshow-manager/settings/controls',
237+
'slideshow-manager/settings/styles' => 'slideshow-manager/settings/styles',
237238
'slideshow-manager/settings/advanced' => 'slideshow-manager/settings/advanced',
238239
'slideshow-manager/settings/save' => 'slideshow-manager/settings/save',
239240
]);

‎src/config.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
// 'navigationBg' => 'transparent',
179179
// 'navigationBgHover' => 'rgba(0, 0, 0, 0.05)',
180180
// 'navigationPadding' => '0.5rem',
181+
// 'navigationRadius' => '9999px',
181182
// 'navigationBorderColor' => 'transparent',
182183
// 'navigationBorderColorHover' => 'transparent',
183184
// 'navigationShadow' => 'none',

‎src/controllers/SettingsController.php‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,21 @@ public function actionControls(): Response
101101
]);
102102
}
103103

104+
/**
105+
* Styles settings tab
106+
*/
107+
public function actionStyles(): Response
108+
{
109+
$plugin = SlideshowManager::getInstance();
110+
$plugin->reloadSettings();
111+
$settings = $plugin->getSettings();
112+
113+
return $this->renderTemplate('slideshow-manager/settings/styles', [
114+
'plugin' => $plugin,
115+
'settings' => $settings,
116+
]);
117+
}
118+
104119
/**
105120
* Advanced settings tab
106121
*/
@@ -202,7 +217,7 @@ public function actionSave(): ?Response
202217
*/
203218
private function _validSettingsSection(string $section): string
204219
{
205-
$allowed = ['general', 'basic', 'layout', 'controls', 'advanced'];
220+
$allowed = ['general', 'basic', 'layout', 'controls', 'styles', 'advanced'];
206221

207222
return in_array($section, $allowed, true) ? $section : 'general';
208223
}

‎src/templates/_layouts/settings.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
{{ 'Controls'|t('slideshow-manager') }}
2828
</a>
2929
</li>
30+
<li>
31+
<a href="{{ url('slideshow-manager/settings/styles') }}" {% if selectedSettingsItem == 'styles' %}class="sel"{% endif %} data-nav-item="styles">
32+
{{ 'Styles'|t('slideshow-manager') }}
33+
</a>
34+
</li>
3035
<li>
3136
<a href="{{ url('slideshow-manager/settings/advanced') }}" {% if selectedSettingsItem == 'advanced' %}class="sel"{% endif %} data-nav-item="advanced">
3237
{{ 'Advanced'|t('slideshow-manager') }}

‎src/templates/settings/styles.twig‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
{#
2+
# Slideshow Manager Styles Settings
3+
#
4+
# @link https://lindemannrock.com
5+
# @copyright Copyright (c) 2026 LindemannRock
6+
#}
7+
8+
{% extends "slideshow-manager/_layouts/settings" %}
9+
{% import "_includes/forms" as forms %}
10+
11+
{% set title = 'Styles'|t('slideshow-manager') %}
12+
{% set selectedSettingsItem = 'styles' %}
13+
{% set selectedSubnavItem = 'settings' %}
14+
{% set fullPageForm = true %}
15+
16+
{% set crumbs = [
17+
{ label: slideshowHelper.fullName|t('slideshow-manager'), url: url('slideshow-manager') },
18+
{ label: 'Settings'|t('slideshow-manager'), url: url('slideshow-manager/settings') },
19+
{ label: 'Styles'|t('slideshow-manager'), url: url('slideshow-manager/settings/styles') },
20+
] %}
21+
22+
{% set cssVarsOverridden = settings.isOverriddenByConfig('swiperCssVars') %}
23+
24+
{% set cssVarGroups = [
25+
{
26+
heading: 'Theme'|t('slideshow-manager'),
27+
fields: [
28+
{ key: 'themeColor', label: 'Theme Color'|t('slideshow-manager'), placeholder: 'var(--color-brand)' },
29+
],
30+
},
31+
{
32+
heading: 'Navigation'|t('slideshow-manager'),
33+
fields: [
34+
{ key: 'navigationSize', label: 'Navigation Size'|t('slideshow-manager'), placeholder: '44px' },
35+
{ key: 'navigationTopOffset', label: 'Navigation Top Offset'|t('slideshow-manager'), placeholder: '50%' },
36+
{ key: 'navigationSidesOffset', label: 'Navigation Sides Offset'|t('slideshow-manager'), placeholder: '10px' },
37+
{ key: 'navigationColor', label: 'Navigation Color'|t('slideshow-manager'), placeholder: 'var(--color-brand)' },
38+
{ key: 'navigationInactiveColor', label: 'Navigation Inactive Color'|t('slideshow-manager'), placeholder: 'rgba(0, 0, 0, 0.3)' },
39+
{ key: 'navigationBg', label: 'Navigation Background'|t('slideshow-manager'), placeholder: 'transparent' },
40+
{ key: 'navigationBgHover', label: 'Navigation Background Hover'|t('slideshow-manager'), placeholder: 'rgba(0, 0, 0, 0.05)' },
41+
{ key: 'navigationPadding', label: 'Navigation Padding'|t('slideshow-manager'), placeholder: '0.5rem' },
42+
{ key: 'navigationRadius', label: 'Navigation Radius'|t('slideshow-manager'), placeholder: '9999px' },
43+
{ key: 'navigationBorderColor', label: 'Navigation Border Color'|t('slideshow-manager'), placeholder: 'transparent' },
44+
{ key: 'navigationBorderColorHover', label: 'Navigation Border Color Hover'|t('slideshow-manager'), placeholder: 'transparent' },
45+
{ key: 'navigationShadow', label: 'Navigation Shadow'|t('slideshow-manager'), placeholder: 'none' },
46+
{ key: 'navigationShadowHover', label: 'Navigation Shadow Hover'|t('slideshow-manager'), placeholder: 'none' },
47+
],
48+
},
49+
{
50+
heading: 'Pagination'|t('slideshow-manager'),
51+
fields: [
52+
{ key: 'paginationColor', label: 'Pagination Color'|t('slideshow-manager'), placeholder: 'var(--color-brand)' },
53+
{ key: 'paginationBulletSize', label: 'Bullet Size'|t('slideshow-manager'), placeholder: '8px' },
54+
{ key: 'paginationBulletWidth', label: 'Bullet Width'|t('slideshow-manager'), placeholder: '8px' },
55+
{ key: 'paginationBulletHeight', label: 'Bullet Height'|t('slideshow-manager'), placeholder: '8px' },
56+
{ key: 'paginationBulletInactiveColor', label: 'Bullet Inactive Color'|t('slideshow-manager'), placeholder: '#000' },
57+
{ key: 'paginationBulletInactiveOpacity', label: 'Bullet Inactive Opacity'|t('slideshow-manager'), placeholder: '0.2' },
58+
{ key: 'paginationBulletOpacity', label: 'Bullet Opacity'|t('slideshow-manager'), placeholder: '1' },
59+
{ key: 'paginationBulletHorizontalGap', label: 'Bullet Horizontal Gap'|t('slideshow-manager'), placeholder: '4px' },
60+
{ key: 'paginationBulletVerticalGap', label: 'Bullet Vertical Gap'|t('slideshow-manager'), placeholder: '6px' },
61+
{ key: 'paginationFractionColor', label: 'Fraction Color'|t('slideshow-manager'), placeholder: 'inherit' },
62+
{ key: 'paginationProgressbarBgColor', label: 'Progressbar Background Color'|t('slideshow-manager'), placeholder: 'rgba(0, 0, 0, 0.25)' },
63+
{ key: 'paginationProgressbarSize', label: 'Progressbar Size'|t('slideshow-manager'), placeholder: '4px' },
64+
{ key: 'paginationLeft', label: 'Pagination Left'|t('slideshow-manager'), placeholder: 'auto' },
65+
{ key: 'paginationRight', label: 'Pagination Right'|t('slideshow-manager'), placeholder: '8px' },
66+
{ key: 'paginationTop', label: 'Pagination Top'|t('slideshow-manager'), placeholder: 'auto' },
67+
{ key: 'paginationBottom', label: 'Pagination Bottom'|t('slideshow-manager'), placeholder: '8px' },
68+
],
69+
},
70+
{
71+
heading: 'Scrollbar'|t('slideshow-manager'),
72+
fields: [
73+
{ key: 'scrollbarBorderRadius', label: 'Scrollbar Border Radius'|t('slideshow-manager'), placeholder: '10px' },
74+
{ key: 'scrollbarTop', label: 'Scrollbar Top'|t('slideshow-manager'), placeholder: 'auto' },
75+
{ key: 'scrollbarBottom', label: 'Scrollbar Bottom'|t('slideshow-manager'), placeholder: '4px' },
76+
{ key: 'scrollbarLeft', label: 'Scrollbar Left'|t('slideshow-manager'), placeholder: 'auto' },
77+
{ key: 'scrollbarRight', label: 'Scrollbar Right'|t('slideshow-manager'), placeholder: '4px' },
78+
{ key: 'scrollbarSidesOffset', label: 'Scrollbar Sides Offset'|t('slideshow-manager'), placeholder: '1%' },
79+
{ key: 'scrollbarBgColor', label: 'Scrollbar Background Color'|t('slideshow-manager'), placeholder: 'rgba(0, 0, 0, 0.1)' },
80+
{ key: 'scrollbarDragBgColor', label: 'Scrollbar Drag Color'|t('slideshow-manager'), placeholder: 'rgba(0, 0, 0, 0.5)' },
81+
{ key: 'scrollbarSize', label: 'Scrollbar Size'|t('slideshow-manager'), placeholder: '4px' },
82+
],
83+
},
84+
{
85+
heading: 'Thumbs & Slide'|t('slideshow-manager'),
86+
fields: [
87+
{ key: 'thumbActiveColor', label: 'Thumb Active Color'|t('slideshow-manager'), placeholder: 'var(--color-brand)' },
88+
{ key: 'slideBgColor', label: 'Slide Background Color'|t('slideshow-manager'), placeholder: 'transparent' },
89+
],
90+
},
91+
] %}
92+
93+
{% block content %}
94+
<form method="post" accept-charset="UTF-8">
95+
{{ actionInput('slideshow-manager/settings/save') }}
96+
{{ csrfInput() }}
97+
{{ redirectInput('slideshow-manager/settings/styles') }}
98+
{{ hiddenInput('section', 'styles') }}
99+
100+
<p class="light" style="margin-top: 0;">
101+
{{ 'Set Swiper CSS variables used by `craft.slideshowManager.buildCssVars()`. Leave fields empty to use Swiper defaults.'|t('slideshow-manager') }}
102+
</p>
103+
104+
{% if cssVarsOverridden %}
105+
<p class="warning with-icon">
106+
{{ 'These values are being overridden by the <code>swiperCssVars</code> setting in <code>config/slideshow-manager.php</code>.'|t('slideshow-manager')|raw }}
107+
</p>
108+
{% endif %}
109+
110+
{% for group in cssVarGroups %}
111+
{% if not loop.first %}
112+
<hr>
113+
{% endif %}
114+
115+
<h2>{{ group.heading }}</h2>
116+
117+
{% for field in group.fields %}
118+
{{ forms.textField({
119+
label: field.label,
120+
id: 'swiperCssVars-' ~ field.key,
121+
name: 'settings[swiperCssVars][' ~ field.key ~ ']',
122+
value: settings.swiperCssVars[field.key] ?? '',
123+
placeholder: field.placeholder,
124+
disabled: cssVarsOverridden,
125+
}) }}
126+
{% endfor %}
127+
{% endfor %}
128+
129+
<div class="buttons">
130+
<button type="submit" class="btn submit">{{ 'Save Settings'|t('slideshow-manager') }}</button>
131+
</div>
132+
</form>
133+
{% endblock %}

‎src/variables/SlideshowVariable.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@ public function buildCssVars(?array $cssVars = null): string
221221
'navigationBg' => '--swiper-navigation-bg:var(--_swiper-navigation-bg, {value})',
222222
'navigationBgHover' => '--swiper-navigation-bg-hover:var(--_swiper-navigation-bg-hover, {value})',
223223
'navigationPadding' => '--swiper-navigation-padding:var(--_swiper-navigation-padding, {value})',
224+
'navigationRadius' => '--swiper-navigation-radius:var(--_swiper-navigation-radius, {value})',
224225
'navigationBorderColor' => '--swiper-navigation-border-color:var(--_swiper-navigation-border-color, {value})',
225226
'navigationBorderColorHover' => '--swiper-navigation-border-color-hover:var(--_swiper-navigation-border-color-hover, {value})',
226227
'navigationShadow' => '--swiper-navigation-shadow:var(--_swiper-navigation-shadow, {value})',

0 commit comments

Comments
 (0)