Skip to content

Commit 7a4f44c

Browse files
pxpmpxpm
authored
Merge pull request #37 from Laravel-Backpack/changes-to-elfinder-dark
add theme switching to elfinder
2 parents 55f9da3 + dddd0bc commit 7a4f44c

File tree

3 files changed

+105
-61
lines changed

3 files changed

+105
-61
lines changed

‎resources/views/common_styles.blade.php

Lines changed: 76 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,77 @@
1-
<meta charset="utf-8">
2-
<title>File Manager</title>
1+
<meta charset="utf-8">
2+
<title>File Manager</title>
3+
{{-- elFinder CSS (REQUIRED) --}}
4+
@bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.61.tar.gz', 'elfinder-2.1.61')
5+
@basset('elfinder-2.1.61/elFinder-2.1.61/css/elfinder.min.css')
6+
@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/Material/css/theme.min.css')
37

4-
{{-- elFinder CSS (REQUIRED) --}}
5-
@bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.61.tar.gz', 'elfinder-2.1.61')
6-
@basset('elfinder-2.1.61/elFinder-2.1.61/css/elfinder.min.css')
8+
@bassetBlock('elfinderThemeSwitcherScript.js')
9+
<script type="text/javascript">
10+
document.addEventListener('DOMContentLoaded', function() {
11+
function getElfinderStyleSheet(main = true) {
12+
const regex = main ? /RobiNN1\/elFinder-Material-Theme\/Material\/css\/theme\.min\.css/ : /RobiNN1\/elFinder-Material-Theme\/Material\/css\/theme-gray\.min\.css/;
13+
const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
14+
// Find the main elfinder stylesheet
15+
let selectedLinkElement;
16+
for (const linkElement of linkElements) {
17+
if (regex.test(linkElement.href)) {
18+
selectedLinkElement = linkElement;
19+
break;
20+
}
21+
}
22+
return selectedLinkElement;
23+
}
24+
25+
function addElfinderLightStylesheet() {
26+
let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/Material/css/theme-gray.min.css') }}`;
27+
const match = themeLightAsset.match(/<link\s+href="([^"]+)"/i);
28+
if (match && match.length > 1) {
29+
let mainStyleSheet = getElfinderStyleSheet();
30+
let lightStyleSheet = getElfinderStyleSheet(false);
31+
// if found append the light mode css to the main theme stylesheet
32+
if (mainStyleSheet && ! lightStyleSheet) {
33+
let themeLight = document.createElement('link');
34+
themeLight.href = match[1];
35+
themeLight.rel = 'stylesheet';
36+
themeLight.type = 'text/css';
37+
mainStyleSheet.insertAdjacentElement('afterend', themeLight);
38+
}
39+
}
40+
}
41+
42+
let colorMode = window.parent.colorMode?.result ?? window.colorMode?.result ?? false;
43+
44+
if(colorMode !== 'dark') {
45+
addElfinderLightStylesheet();
46+
}
47+
48+
// register a color mode change event so that we remove
49+
// the light stylesheet when the color mode change
50+
if(colorMode) {
51+
let colorModeClass = window.parent.colorMode ?? window.colorMode;
52+
colorModeClass.onChange(function(scheme) {
53+
let styleSheetType = scheme === 'dark' ? false : true;
54+
let selectedLinkElement = getElfinderStyleSheet(styleSheetType);
55+
56+
if (! selectedLinkElement) {
57+
return true;
58+
}
59+
// in case we switched to dark mode, remove the ligth theme css
60+
if(scheme === 'dark') {
61+
selectedLinkElement.parentNode.removeChild(selectedLinkElement);
62+
return true;
63+
}
64+
addElfinderLightStylesheet()
65+
});
66+
}
67+
68+
// we dont want to style the body when elfinder is loaded as a component in a backpack view
69+
// we pass true when loading elfinder inside an iframe to style the iframe body.
70+
@if($styleBodyElement ?? false)
71+
// use the topbar and footbar darker color as the background to ease transitions
72+
document.getElementsByTagName('body')[0].style.background = '#061325';
73+
document.getElementsByTagName('body')[0].style.opacity = 1;
74+
@endif
75+
});
76+
</script>
77+
@endBassetBlock

‎resources/views/elfinder.blade.php

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
@extends(backpack_view('blank'))
22

33
@section('after_scripts')
4+
45
@include('vendor.elfinder.common_scripts')
56
@include('vendor.elfinder.common_styles')
67

78
<!-- elFinder initialization (REQUIRED) -->
89
<script type="text/javascript" charset="utf-8">
910
// Documentation for client options:
1011
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
11-
$().ready(function() {
12-
var theme = 'default';
13-
12+
$(document).ready(function() {
1413
$('#elfinder').elfinder({
1514
// set your elFinder options here
1615
@if($locale)
@@ -21,28 +20,8 @@
2120
},
2221
url : '{{ route("elfinder.connector") }}', // connector URL
2322
soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
24-
themes: {
25-
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
26-
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
27-
},
28-
theme: theme
29-
},
30-
function(fm, extraObj) {
31-
fm.bind('open', function() {
32-
setElFinderColorMode();
33-
});
23+
cssAutoLoad : false,
3424
});
35-
36-
function isElfinderInDarkMode() {
37-
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
38-
}
39-
40-
function setElFinderColorMode() {
41-
theme = isElfinderInDarkMode() ? 'dark' : 'default';
42-
43-
let instance = $('#elfinder').elfinder('instance');
44-
instance.changeTheme(theme).storage('theme', theme);
45-
}
4625
});
4726
</script>
4827
@endsection

‎resources/views/standalonepopup.blade.php

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,25 @@
33
<head>
44

55
@include('vendor.elfinder.common_scripts')
6-
@include('vendor.elfinder.common_styles')
6+
@include('vendor.elfinder.common_styles', ['styleBodyElement' => true])
7+
<style type="text/css">
8+
.elfinder-workzone {
9+
min-height: max-content !important;
10+
}
711
8-
<script type="text/javascript">
9-
$().ready(function () {
10-
var theme = 'default';
12+
#elfinder {
13+
height: 100% !important;
14+
width: 100% !important;
15+
top:0;
16+
left: 0;
17+
}
18+
</style>
1119

12-
var elf = $('#elfinder').elfinder({
20+
<script type="text/javascript">
21+
$(document).ready(function () {
22+
let elfinderConfig = {
23+
cssAutoLoad : false,
24+
speed: 100,
1325
// set your elFinder options here
1426
@if($locale)
1527
lang: '{{ $locale }}', // locale
@@ -35,37 +47,19 @@
3547
window.parent.processSelectedFile(file.path, '{{ $input_id }}');
3648
@endif
3749
38-
parent.jQuery.colorbox.close();
39-
},
40-
themes: {
41-
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
42-
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
43-
},
44-
theme: theme
45-
},
46-
function(fm, extraObj) {
47-
fm.bind('open', function() {
48-
setElFinderColorMode();
49-
});
50-
}).elfinder('instance');
50+
window.parent.jQuery.colorbox.close();
51+
},
52+
};
5153
52-
function isElfinderInDarkMode() {
53-
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
54-
}
55-
56-
function setElFinderColorMode() {
57-
theme = isElfinderInDarkMode() ? 'dark' : 'default';
58-
let instance = $('#elfinder').elfinder('instance');
59-
instance.changeTheme(theme).storage('theme', theme);
60-
}
61-
});
54+
var elf = $('#elfinder').elfinder(elfinderConfig);
55+
document.getElementById('elfinder').style.opacity = 1;
56+
57+
});
6258
</script>
63-
6459
</head>
65-
<body>
60+
<body style="margin:0;position:absolute;top:0;left:0;width:100%;height:100%;transition: opacity 1s ease-out;opacity: 0;">
6661

6762
<!-- Element where elFinder will be created (REQUIRED) -->
68-
<div id="elfinder"></div>
69-
63+
<div id="elfinder" style="position:absolute;top:0;left:0;width:100%;height:100%;"></div>
7064
</body>
7165
</html>

0 commit comments

Comments
 (0)