Invalid usage of Blade syntax inside `@bassetBlock` directive

[jnoordsij]

Inside the styles for elFinder, there is a @bassetBlock which contains Blade syntax (@if($styleBodyElement ?? false)). However, when one caches the basset blocks with php artisan basset:cache, the Blade will not be rendered (it could not even, as there is no parser nor are values for PHP present), hence the Blade syntax will be persisted in the cached elfinderThemeSwitcherScript.js basset. As this Blade is invalid JavaScript, the corresponding asset will not work on such environments.

See:

FileManager/resources/views/common_styles.blade.php

Lines 25 to 93 in 791ea86

	@bassetBlock('elfinderThemeSwitcherScript.js')
	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
	function getElfinderStyleSheet(main = true) {
	const regex = new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme-gray\.min\.css`); const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
	// Find the main elfinder stylesheet
	let selectedLinkElement;
	for (const linkElement of linkElements) {
	if (regex.test(linkElement.href)) {
	selectedLinkElement = linkElement;
	break;
	}
	}
	return selectedLinkElement;
	}
	function addElfinderLightStylesheet() {
	let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}`;
	const match = themeLightAsset.match(/<link\s+href="([^"]+)"/i);
	if (match && match.length > 1) {
	let mainStyleSheet = getElfinderStyleSheet();
	let lightStyleSheet = getElfinderStyleSheet(false);
	// if found append the light mode css to the main theme stylesheet
	if (mainStyleSheet && ! lightStyleSheet) {
	let themeLight = document.createElement('link');
	themeLight.href = match[1];
	themeLight.rel = 'stylesheet';
	themeLight.type = 'text/css';
	mainStyleSheet.insertAdjacentElement('afterend', themeLight);
	}
	}
	}
	let colorMode = window.parent.colorMode?.result ?? window.colorMode?.result ?? false;
	if(colorMode !== 'dark') {
	addElfinderLightStylesheet();
	}
	// register a color mode change event so that we remove
	// the light stylesheet when the color mode change
	if(colorMode) {
	let colorModeClass = window.parent.colorMode ?? window.colorMode;
	colorModeClass.onChange(function(scheme) {
	let getMainStylesheet = scheme === 'dark' ? false : true;
	let selectedLinkElement = getElfinderStyleSheet(getMainStylesheet);
	if (! selectedLinkElement) {
	return true;
	}
	// in case we switched to dark mode, remove the ligth theme css
	if(scheme === 'dark') {
	selectedLinkElement.parentNode.removeChild(selectedLinkElement);
	return true;
	}
	addElfinderLightStylesheet()
	});
	}
	// we dont want to style the body when elfinder is loaded as a component in a backpack view
	// we pass true when loading elfinder inside an iframe to style the iframe body.
	@if($styleBodyElement ?? false)
	// use the topbar and footbar darker color as the background to ease transitions
	document.getElementsByTagName('body')[0].style.background = '#061325';
	document.getElementsByTagName('body')[0].style.opacity = 1;
	@endif
	});
	</script>
	@endBassetBlock

[pxpm]

Thanks @jnoordsij 🙏

Fixed in #87

Will tag the new version later today or tomorrow after I finish reviewing the rest of the stuff. 👍