Skip to content

Commit fb5e407

Browse files
pxpmpxpm
authored
Merge pull request #35 from Laravel-Backpack/elfinder-dark
Add elFinder dark mode
2 parents e5207ee + 397a88c commit fb5e407

15 files changed

+395
-50
lines changed

‎resources/views/ckeditor4.blade.php

+23-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function getUrlParam(paramName) {
1717
1818
$().ready(function() {
1919
var funcNum = getUrlParam('CKEditorFuncNum');
20+
var theme = 'default';
2021
2122
var elf = $('#elfinder').elfinder({
2223
// set your elFinder options here
@@ -31,8 +32,29 @@ function getUrlParam(paramName) {
3132
getFileCallback : function(file) {
3233
window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
3334
window.close();
34-
}
35+
},
36+
themes: {
37+
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
38+
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
39+
},
40+
theme: theme
41+
},
42+
function(fm, extraObj) {
43+
fm.bind('open', function() {
44+
setElFinderColorMode();
45+
});
3546
}).elfinder('instance');
47+
48+
function isElfinderInDarkMode() {
49+
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
50+
}
51+
52+
function setElFinderColorMode() {
53+
theme = isElfinderInDarkMode() ? 'dark' : 'default';
54+
55+
let instance = $('#elfinder').elfinder('instance');
56+
instance.changeTheme(theme).storage('theme', theme);
57+
}
3658
});
3759
</script>
3860
</head>

‎resources/views/ckeditor4.php

+23-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ function getUrlParam(paramName) {
3333

3434
$().ready(function() {
3535
var funcNum = getUrlParam('CKEditorFuncNum');
36+
var theme = 'default';
3637

3738
var elf = $('#elfinder').elfinder({
3839
// set your elFinder options here
@@ -47,8 +48,29 @@ function getUrlParam(paramName) {
4748
getFileCallback : function(file) {
4849
window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
4950
window.close();
50-
}
51+
},
52+
themes: {
53+
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
54+
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
55+
},
56+
theme: theme
57+
},
58+
function(fm, extraObj) {
59+
fm.bind('open', function() {
60+
setElFinderColorMode();
61+
});
5162
}).elfinder('instance');
63+
64+
function isElfinderInDarkMode() {
65+
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
66+
}
67+
68+
function setElFinderColorMode() {
69+
theme = isElfinderInDarkMode() ? 'dark' : 'default';
70+
71+
let instance = $('#elfinder').elfinder('instance');
72+
instance.changeTheme(theme).storage('theme', theme);
73+
}
5274
});
5375
</script>
5476
</head>

‎resources/views/common_styles.blade.php

+75-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +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+
}
724
8-
{{-- elFinder Backpack Theme --}}
9-
@basset(base_path('vendor/backpack/filemanager/resources/assets/css/elfinder.backpack.theme.css'))
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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +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+
$(document).ready(function() {
1213
$('#elfinder').elfinder({
1314
// set your elFinder options here
1415
@if($locale)
@@ -18,7 +19,8 @@
1819
_token: '{{ csrf_token() }}'
1920
},
2021
url : '{{ route("elfinder.connector") }}', // connector URL
21-
soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}'
22+
soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
23+
cssAutoLoad : false,
2224
});
2325
});
2426
</script>

‎resources/views/elfinder.php

+24-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
// Documentation for client options:
2727
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
2828
$().ready(function() {
29+
var theme = 'default';
30+
2931
$('#elfinder').elfinder({
3032
// set your elFinder options here
3133
<?php if ($locale) { ?>
@@ -35,8 +37,29 @@
3537
_token: '<?= csrf_token() ?>'
3638
},
3739
url : '<?= route('elfinder.connector') ?>', // connector URL
38-
soundPath: '<?= asset($dir.'/sounds') ?>'
40+
soundPath: '<?= asset($dir.'/sounds') ?>',
41+
themes: {
42+
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
43+
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
44+
},
45+
theme: theme
46+
},
47+
function(fm, extraObj) {
48+
fm.bind('open', function() {
49+
setElFinderColorMode();
50+
});
3951
});
52+
53+
function isElfinderInDarkMode() {
54+
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
55+
}
56+
57+
function setElFinderColorMode() {
58+
theme = isElfinderInDarkMode() ? 'dark' : 'default';
59+
60+
let instance = $('#elfinder').elfinder('instance');
61+
instance.changeTheme(theme).storage('theme', theme);
62+
}
4063
});
4164
</script>
4265
</head>

‎resources/views/filepicker.blade.php

+24-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77

88
<script type="text/javascript">
99
$().ready(function () {
10+
var theme = 'default';
11+
1012
var elf = $('#elfinder').elfinder({
1113
// set your elFinder options here
1214
@if($locale)
@@ -51,8 +53,29 @@
5153
// display parent directory in listing as ".."
5254
oldSchool : false
5355
}
54-
}
56+
},
57+
themes: {
58+
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
59+
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
60+
},
61+
theme: theme
62+
},
63+
function(fm, extraObj) {
64+
fm.bind('open', function() {
65+
setElFinderColorMode();
66+
});
5567
}).elfinder('instance');
68+
69+
function isElfinderInDarkMode() {
70+
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
71+
}
72+
73+
function setElFinderColorMode() {
74+
theme = isElfinderInDarkMode() ? 'dark' : 'default';
75+
76+
let instance = $('#elfinder').elfinder('instance');
77+
instance.changeTheme(theme).storage('theme', theme);
78+
}
5679
});
5780
</script>
5881
</head>

‎resources/views/filepicker.php

+24-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424

2525
<script type="text/javascript">
2626
$().ready(function () {
27+
var theme = 'default';
28+
2729
var elf = $('#elfinder').elfinder({
2830
// set your elFinder options here
2931
<?php if ($locale) { ?>
@@ -68,8 +70,29 @@
6870
// display parent directory in listing as ".."
6971
oldSchool : false
7072
}
71-
}
73+
},
74+
themes: {
75+
default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
76+
dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
77+
},
78+
theme: theme
79+
},
80+
function(fm, extraObj) {
81+
fm.bind('open', function() {
82+
setElFinderColorMode();
83+
});
7284
}).elfinder('instance');
85+
86+
function isElfinderInDarkMode() {
87+
return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
88+
}
89+
90+
function setElFinderColorMode() {
91+
theme = isElfinderInDarkMode() ? 'dark' : 'default';
92+
93+
let instance = $('#elfinder').elfinder('instance');
94+
instance.changeTheme(theme).storage('theme', theme);
95+
}
7396
});
7497
</script>
7598

‎resources/views/standalonepopup.blade.php

+27-11
Original file line numberDiff line numberDiff line change
@@ -3,11 +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+
}
11+
12+
#elfinder {
13+
height: 100% !important;
14+
width: 100% !important;
15+
top:0;
16+
left: 0;
17+
}
18+
</style>
719

820
<script type="text/javascript">
9-
$().ready(function () {
10-
var elf = $('#elfinder').elfinder({
21+
$(document).ready(function () {
22+
let elfinderConfig = {
23+
cssAutoLoad : false,
24+
speed: 100,
1125
// set your elFinder options here
1226
@if($locale)
1327
lang: '{{ $locale }}', // locale
@@ -33,17 +47,19 @@
3347
window.parent.processSelectedFile(file.path, '{{ $input_id }}');
3448
@endif
3549
36-
parent.jQuery.colorbox.close();
37-
}
38-
}).elfinder('instance');
39-
});
40-
</script>
50+
window.parent.jQuery.colorbox.close();
51+
},
52+
};
4153
54+
var elf = $('#elfinder').elfinder(elfinderConfig);
55+
document.getElementById('elfinder').style.opacity = 1;
56+
57+
});
58+
</script>
4259
</head>
43-
<body>
60+
<body style="margin:0;position:absolute;top:0;left:0;width:100%;height:100%;transition: opacity 1s ease-out;opacity: 0;">
4461

4562
<!-- Element where elFinder will be created (REQUIRED) -->
46-
<div id="elfinder"></div>
47-
63+
<div id="elfinder" style="position:absolute;top:0;left:0;width:100%;height:100%;"></div>
4864
</body>
4965
</html>

0 commit comments

Comments
 (0)