Skip to content

Commit bc4563a

Browse files
author
Daniel Neto
committed
fix: Enhance theme switching functionality with cookie support and dark mode management
#10387
1 parent d88fc95 commit bc4563a

File tree

3 files changed

+205
-153
lines changed

3 files changed

+205
-153
lines changed

‎plugin/Gallery/view/themeSwitcher.php‎

Lines changed: 173 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,173 @@
1-
<?php
2-
global $themeSwitcherAdded;
3-
$iframeWidth = 400;
4-
$iframeHeight = 200;
5-
$zoom = 0.7;
6-
if (!isset($themeSwitcherAdded)) {
7-
$themeSwitcherAdded = 1;
8-
?>
9-
<style>
10-
.openThemeOptionsUL {
11-
top: auto;
12-
max-height: 250px;
13-
overflow-y: auto;
14-
width: 100%;
15-
margin-left: -100%;
16-
margin-top: -26px;
17-
overflow-x: visible;
18-
}
19-
20-
.openThemeOptionsUL li .fas {
21-
display: none;
22-
}
23-
24-
.openThemeOptionsUL li.active .far {
25-
display: none;
26-
}
27-
28-
.openThemeOptionsUL li.active .fas {
29-
display: inline-block;
30-
}
31-
32-
#sideBarContainer .openThemeOptionsUL {
33-
margin: 0;
34-
}
35-
36-
#showThemeIframeDiv {
37-
position: fixed;
38-
top: 70px;
39-
left: 50%;
40-
margin-left: -<?php echo $iframeWidth / 2; ?>px;
41-
background-color: #000;
42-
-webkit-box-shadow: 0 0 5px 2px #000;
43-
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
44-
-moz-box-shadow: 0 0 5px 2px #000;
45-
/* Firefox 3.5 - 3.6 */
46-
box-shadow: 0 0 5px 2px #000;
47-
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
48-
z-index: 2000;
49-
width: <?php echo $iframeWidth; ?>px;
50-
height: <?php echo $iframeHeight; ?>px;
51-
padding: 0;
52-
overflow: hidden;
53-
}
54-
55-
#frame {
56-
width: <?php echo $iframeWidth / $zoom; ?>px;
57-
height: <?php echo $iframeHeight / $zoom; ?>px;
58-
border: 1px solid black;
59-
}
60-
61-
#frame {
62-
-ms-zoom: <?php echo $zoom; ?>;
63-
-moz-transform: scale(<?php echo $zoom; ?>);
64-
-moz-transform-origin: 0 0;
65-
-o-transform: scale(<?php echo $zoom; ?>);
66-
-o-transform-origin: 0 0;
67-
-webkit-transform: scale(<?php echo $zoom; ?>);
68-
-webkit-transform-origin: 0 0;
69-
}
70-
</style>
71-
<script>
72-
$(document).ready(function() {
73-
$(window).click(function() {
74-
$('.openThemeOptions').next('ul').hide();
75-
$('#showThemeIframeDiv').fadeOut();
76-
});
77-
$('.liThemes').click(function(event) {
78-
event.stopPropagation();
79-
});
80-
$('.openThemeOptions').on("click", function(e) {
81-
$(this).next('ul').toggle();
82-
if (!$(this).next('ul').is(":visible")) {
83-
$('#showThemeIframeDiv').fadeOut();
84-
}
85-
e.stopPropagation();
86-
e.preventDefault();
87-
});
88-
89-
$('body').append('<div id="showThemeIframeDiv" style="display:none;"></div>');
90-
setInterval(function() {
91-
if (!$('.openThemeOptions').is(":visible")) {
92-
$('#showThemeIframeDiv').fadeOut();
93-
}
94-
}, 1000);
95-
});
96-
97-
function showThemeIframe(name) {
98-
$('#showThemeIframeDiv').fadeIn();
99-
$('#showThemeIframeDiv').html('<iframe id="frame" frameBorder="0" width="100%" height="250px" src="' + webSiteRootURL + 'view/css/custom/theme.php?theme=' + name + '" ></iframe>');
100-
}
101-
102-
103-
function changeTheme(name) {
104-
$('.liThemes').removeClass('active');
105-
$('#li' + name).addClass('active');
106-
$('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + name + '.css');
107-
Cookies.set('customCSS', name, {
108-
path: '/',
109-
expires: 365
110-
});
111-
}
112-
</script>
113-
<?php
114-
}
115-
$aClass = "";
116-
$keyComplement = "";
117-
if ($navBarButtons) {
118-
$aClass = "btn btn-default btn-block";
119-
$keyComplement .= "navBarButtons";
120-
}
121-
?>
122-
<li class="dropdown-submenu" style="position: relative;">
123-
<a class="openThemeOptions <?php echo $aClass; ?>" tabindex="-1" href="#">
124-
<i class="fas fa-adjust"></i>
125-
<span class="menuLabel">
126-
<?php echo __("Change theme"); ?>
127-
</span>
128-
</a>
129-
<ul class="dropdown-menu openThemeOptionsUL">
130-
<?php
131-
$themes = Gallery::getThemes();
132-
$curentTheme = getCurrentTheme();
133-
foreach ($themes as $key => $value) {
134-
$k = $key . $keyComplement;
135-
$class = "";
136-
if ($curentTheme == $value['name']) {
137-
$class = "active";
138-
}
139-
140-
echo '<li class="' . $class . ' liThemes" id="li' . $value['name'] . '" ><a class="openThemeOptionsSub" tabindex="-1" href="#" '
141-
. 'onmouseover="showThemeIframe(\'' . $value['name'] . '\');"'
142-
. 'onclick="changeTheme(\'' . $value['name'] . '\');"'
143-
. '><i class="far fa-images"></i><i class="fas fa-image"></i> ' . $value['label'] . '</a></li>';
144-
}
145-
?>
146-
</ul>
147-
</li>
1+
<?php
2+
global $themeSwitcherAdded;
3+
$iframeWidth = 400;
4+
$iframeHeight = 200;
5+
$zoom = 0.7;
6+
if (!isset($themeSwitcherAdded)) {
7+
$themeSwitcherAdded = 1;
8+
?>
9+
<style>
10+
.openThemeOptionsUL {
11+
top: auto;
12+
max-height: 250px;
13+
overflow-y: auto;
14+
width: 100%;
15+
margin-left: -100%;
16+
margin-top: -26px;
17+
overflow-x: visible;
18+
}
19+
20+
.openThemeOptionsUL li .fas {
21+
display: none;
22+
}
23+
24+
.openThemeOptionsUL li.active .far {
25+
display: none;
26+
}
27+
28+
.openThemeOptionsUL li.active .fas {
29+
display: inline-block;
30+
}
31+
32+
#sideBarContainer .openThemeOptionsUL {
33+
margin: 0;
34+
}
35+
36+
#showThemeIframeDiv {
37+
position: fixed;
38+
top: 70px;
39+
left: 50%;
40+
margin-left: -<?php echo $iframeWidth / 2; ?>px;
41+
background-color: #000;
42+
-webkit-box-shadow: 0 0 5px 2px #000;
43+
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
44+
-moz-box-shadow: 0 0 5px 2px #000;
45+
/* Firefox 3.5 - 3.6 */
46+
box-shadow: 0 0 5px 2px #000;
47+
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
48+
z-index: 2000;
49+
width: <?php echo $iframeWidth; ?>px;
50+
height: <?php echo $iframeHeight; ?>px;
51+
padding: 0;
52+
overflow: hidden;
53+
}
54+
55+
#frame {
56+
width: <?php echo $iframeWidth / $zoom; ?>px;
57+
height: <?php echo $iframeHeight / $zoom; ?>px;
58+
border: 1px solid black;
59+
}
60+
61+
#frame {
62+
-ms-zoom: <?php echo $zoom; ?>;
63+
-moz-transform: scale(<?php echo $zoom; ?>);
64+
-moz-transform-origin: 0 0;
65+
-o-transform: scale(<?php echo $zoom; ?>);
66+
-o-transform-origin: 0 0;
67+
-webkit-transform: scale(<?php echo $zoom; ?>);
68+
-webkit-transform-origin: 0 0;
69+
}
70+
</style>
71+
<script>
72+
$(document).ready(function() {
73+
$(window).click(function() {
74+
$('.openThemeOptions').next('ul').hide();
75+
$('#showThemeIframeDiv').fadeOut();
76+
});
77+
$('.liThemes').click(function(event) {
78+
event.stopPropagation();
79+
});
80+
$('.openThemeOptions').on("click", function(e) {
81+
$(this).next('ul').toggle();
82+
if (!$(this).next('ul').is(":visible")) {
83+
$('#showThemeIframeDiv').fadeOut();
84+
}
85+
e.stopPropagation();
86+
e.preventDefault();
87+
});
88+
89+
$('body').append('<div id="showThemeIframeDiv" style="display:none;"></div>');
90+
setInterval(function() {
91+
if (!$('.openThemeOptions').is(":visible")) {
92+
$('#showThemeIframeDiv').fadeOut();
93+
}
94+
}, 1000);
95+
});
96+
97+
function showThemeIframe(name) {
98+
$('#showThemeIframeDiv').fadeIn();
99+
$('#showThemeIframeDiv').html('<iframe id="frame" frameBorder="0" width="100%" height="250px" src="' + webSiteRootURL + 'view/css/custom/theme.php?theme=' + name + '" ></iframe>');
100+
}
101+
102+
103+
function applyThemeFromCookie() {
104+
var customCSSCookie = Cookies.get('customCSS');
105+
if (customCSSCookie) {
106+
// Fix CSS link (covers bfcache restore; initial load is handled by inline script in head.php)
107+
var currentHref = $('#customCSS').attr('href') || '';
108+
if (currentHref.indexOf('/' + customCSSCookie + '.css') === -1) {
109+
$('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + customCSSCookie + '.css');
110+
}
111+
// Fix active menu item to reflect the locally stored theme
112+
$('.liThemes').removeClass('active');
113+
$('#li' + customCSSCookie).addClass('active');
114+
}
115+
}
116+
117+
function changeTheme(name) {
118+
$('.liThemes').removeClass('active');
119+
$('#li' + name).addClass('active');
120+
$('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + name + '.css');
121+
Cookies.set('customCSS', name, {
122+
path: '/',
123+
expires: 365
124+
});
125+
}
126+
127+
$(document).ready(function() {
128+
if (typeof Cookies !== 'undefined') {
129+
applyThemeFromCookie();
130+
}
131+
});
132+
133+
window.addEventListener('pageshow', function(event) {
134+
if (event.persisted && typeof Cookies !== 'undefined') {
135+
applyThemeFromCookie();
136+
}
137+
});
138+
</script>
139+
<?php
140+
}
141+
$aClass = "";
142+
$keyComplement = "";
143+
if ($navBarButtons) {
144+
$aClass = "btn btn-default btn-block";
145+
$keyComplement .= "navBarButtons";
146+
}
147+
?>
148+
<li class="dropdown-submenu" style="position: relative;">
149+
<a class="openThemeOptions <?php echo $aClass; ?>" tabindex="-1" href="#">
150+
<i class="fas fa-adjust"></i>
151+
<span class="menuLabel">
152+
<?php echo __("Change theme"); ?>
153+
</span>
154+
</a>
155+
<ul class="dropdown-menu openThemeOptionsUL">
156+
<?php
157+
$themes = Gallery::getThemes();
158+
$curentTheme = getCurrentTheme();
159+
foreach ($themes as $key => $value) {
160+
$k = $key . $keyComplement;
161+
$class = "";
162+
if ($curentTheme == $value['name']) {
163+
$class = "active";
164+
}
165+
166+
echo '<li class="' . $class . ' liThemes" id="li' . $value['name'] . '" ><a class="openThemeOptionsSub" tabindex="-1" href="#" '
167+
. 'onmouseover="showThemeIframe(\'' . $value['name'] . '\');"'
168+
. 'onclick="changeTheme(\'' . $value['name'] . '\');"'
169+
. '><i class="far fa-images"></i><i class="fas fa-image"></i> ' . $value['label'] . '</a></li>';
170+
}
171+
?>
172+
</ul>
173+
</li>

‎plugin/Layout/darkModeSwitch.php‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,40 @@ function toogleThemeMode() {
3636
function loadTheme() {
3737
var themeMode = Cookies.get('themeMode');
3838
var isEmptythemeMode = empty(themeMode);
39-
var themeName = '<?php echo $config->getDefaultTheme(); ?>';
39+
var customCSSCookie = Cookies.get('customCSS');
40+
var defaultTheme = '<?php echo $config->getDefaultTheme(); ?>';
41+
var alternativeTheme = '<?php echo $config->getAlternativeTheme(); ?>';
42+
var themeName = defaultTheme;
4043
if (!isEmptythemeMode) {
41-
themeName = '<?php echo $config->getAlternativeTheme(); ?>';
44+
themeName = alternativeTheme;
45+
}
46+
// customCSS cookie (set by the theme switcher) takes priority,
47+
// matching the same logic as getCurrentTheme() on the PHP side.
48+
if (!empty(customCSSCookie)) {
49+
themeName = customCSSCookie;
4250
}
43-
4451
$('#themeMode').prop('checked', !isEmptythemeMode);
4552
$('#customCSS').attr('href', webSiteRootURL + 'view/css/custom/' + themeName + '.css');
53+
54+
// Manage the dark.css overlay separately (uses id="darkThemeCSS")
55+
var darkOverlayHref = webSiteRootURL + 'view/css/dark.css';
56+
if (!isEmptythemeMode) {
57+
if ($('#darkThemeCSS').length === 0) {
58+
$('head').append('<link id="darkThemeCSS" rel="stylesheet" type="text/css" href="' + darkOverlayHref + '" />');
59+
} else {
60+
$('#darkThemeCSS').attr('href', darkOverlayHref);
61+
}
62+
} else {
63+
$('#darkThemeCSS').attr('href', '');
64+
}
4665
}
4766
$(document).ready(function() {
4867
loadTheme();
4968
});
50-
</script>
69+
70+
window.addEventListener('pageshow', function(event) {
71+
if (event.persisted) {
72+
loadTheme();
73+
}
74+
});
75+
</script>

‎view/include/head.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,11 @@
131131
if (!empty($theme)) {
132132
?>
133133
<link href="<?php echo getURL('view/css/custom/' . $theme . '.css'); ?>" rel="stylesheet" type="text/css" id="customCSS" />
134+
<script>(function(){var m=document.cookie.match(/(?:^|;\s*)customCSS=([^;]*)/);if(m){var t=decodeURIComponent(m[1]).replace(/[^a-zA-Z0-9_-]/g,'');if(t){var l=document.getElementById('customCSS');if(l)l.href=l.href.replace(/\/[^\/]+\.css(\?.*)?$/,'/'+t+'.css');}}}());</script>
134135
<?php
135136
if ($isCurrentThemeDark) {
136137
?>
137-
<link href="<?php echo getURL('view/css/dark.css'); ?>" rel="stylesheet" type="text/css" id="customCSS" />
138+
<link href="<?php echo getURL('view/css/dark.css'); ?>" rel="stylesheet" type="text/css" id="darkThemeCSS" />
138139
<?php
139140
}
140141
}
@@ -211,4 +212,4 @@
211212
TimeLogEnd($timeLogHead, __LINE__);
212213
ogSite();
213214
TimeLogEnd($timeLogHead, __LINE__);
214-
?>
215+
?>

0 commit comments

Comments
 (0)