Move javascript utilities to their own class PageAssets and creatd blade directive @pa to simplify using them

This commit is contained in:
Deon George 2024-07-28 14:52:56 +10:00
parent 628fbac8f9
commit eaece2b69d
6 changed files with 216 additions and 95 deletions

View File

@ -38,8 +38,6 @@
@section('scripts') @section('scripts')
@include('adminlte::layouts.partials.scripts') @include('adminlte::layouts.partials.scripts')
@yield('page-scripts')
@show @show
</body> </body>
</html> </html>

View File

@ -41,6 +41,9 @@
<![endif]--> <![endif]-->
--}} --}}
<!-- Page Styles -->
{!! PageAssets::css() !!}
@yield('page-styles') @yield('page-styles')
@if(file_exists('css/fixes.css')) @if(file_exists('css/fixes.css'))

View File

@ -101,6 +101,11 @@
}); });
</script> </script>
<!-- Page Scripts -->
{!! PageAssets::js() !!}
@yield('page-scripts')
@if(file_exists('js/custom.js')) @if(file_exists('js/custom.js'))
<!-- Any Custom JS --> <!-- Any Custom JS -->
<script src="{{ asset('js/custom.js') }}"></script> <script src="{{ asset('js/custom.js') }}"></script>

188
src/PageAssets.php Normal file
View File

@ -0,0 +1,188 @@
<?php
namespace Leenooks;
use Illuminate\Support\Arr;
use Illuminate\Support\Collection;
/**
* Useful tools (js/css) used when rendering pages
*/
class PageAssets
{
// Types that we can handle
private const array types = [
'css',
'js',
];
public const array assets = [
'datatables' => [
'base' => [
'css' => [
'//cdn.datatables.net/2.1.2/css/dataTables.bootstrap4.css',
//'//cdn.datatables.net/2.1.2/css/dataTables.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/2.1.2/js/dataTables.min.js',
'//cdn.datatables.net/2.1.2/js/dataTables.bootstrap4.min.js',
],
],
'buttons' => [
'css' => [
'//cdn.datatables.net/buttons/3.1.0/css/buttons.bootstrap4.min.css',
//'//cdn.datatables.net/buttons/3.1.0/css/buttons.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/buttons/3.1.0/js/dataTables.buttons.min.js',
//'//cdn.datatables.net/buttons/3.1.0/js/buttons.dataTables.min.js',
'//cdn.datatables.net/buttons/3.1.0/js/buttons.bootstrap4.min.js',
'//cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js',
],
],
'conditionalpaging' => [
'js' => [
'//cdn.datatables.net/plug-ins/2.0.5/features/conditionalPaging/dataTables.conditionalPaging.min.js',
],
],
'fixedheader' => [
'css' => [
'//cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.bootstrap4.min.css',
//'//cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.min.js',
//'//cdn.datatables.net/fixedheader/4.0.1/js/fixedHeader.dataTables.min.js',
'//cdn.datatables.net/fixedheader/4.0.1/js/fixedHeader.bootstrap4.min.js',
]
],
'responsive' => [
'css' => [
'//cdn.datatables.net/responsive/3.0.2/css/responsive.bootstrap4.min.css',
//'//cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.min.js',
//'//cdn.datatables.net/responsive/3.0.2/js/responsive.bootstrap.min.js',
'//cdn.datatables.net/responsive/3.0.2/js/responsive.bootstrap4.min.js',
]
],
'rowgroup' => [
'css' => [
'//cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.bootstrap4.min.css',
//'//cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/rowgroup/1.5.0/js/dataTables.rowGroup.min.js',
//'//cdn.datatables.net/rowgroup/1.5.0/js/rowGroup.dataTables.min.js',
'//cdn.datatables.net/rowgroup/1.5.0/js/rowGroup.bootstrap4.min.js',
],
],
'searchpanes' => [
'css' => [
'//cdn.datatables.net/searchpanes/2.3.1/css/searchPanes.bootstrap4.min.css',
//'//cdn.datatables.net/searchpanes/2.3.1/css/searchPanes.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/searchpanes/2.3.1/js/dataTables.searchPanes.min.js',
//'//cdn.datatables.net/searchpanes/2.3.1/js/searchPanes.dataTables.min.js',
'//cdn.datatables.net/searchpanes/2.3.1/js/searchPanes.bootstrap4.min.js',
],
],
'searchpanes-left' => [
'css' => [
'/plugin/dataTables/leftSearchPanes.css',
],
],
'select' => [
'css' => [
'//cdn.datatables.net/select/2.0.3/css/select.bootstrap4.min.css',
//'//cdn.datatables.net/select/2.0.3/css/select.dataTables.min.css',
],
'js' => [
'//cdn.datatables.net/select/2.0.3/js/dataTables.select.min.js',
//'//cdn.datatables.net/select/2.0.3/js/select.dataTables.min.js',
'//cdn.datatables.net/select/2.0.3/js/select.bootstrap4.min.js',
]
],
],
];
// Items to manage
public static Collection $items;
// Add an item to the list
public static function add(string $type,Collection|array|string $asset): void
{
if (! in_array($type,self::types))
throw new \Exception('Invalid type: '.$type);
if (! isset(self::$items))
self::init();
if (is_string($asset))
self::$items
->get($type)
->push($asset)
->unique();
else
self::$items->put($type,
self::$items
->get($type)
->merge($asset->values())
->unique());
}
// Add a predefined asset
public static function asset(string $id): void
{
if (! isset(self::$items))
self::init();
if (str_contains($id,',')) {
[$item,$arguments] = explode(',',$id,2);
$arguments = collect(explode('|',$arguments));
} else {
$item = $id;
$arguments = collect();
}
$arguments = $arguments->prepend('base');
$asset = collect(Arr::get(self::assets,$item))->only($arguments);
foreach (self::types as $type)
if ($x=$asset->pluck($type)->filter()->flatten())
self::add($type,$x);
}
// Render the CSS items
public static function css(): string
{
return isset(self::$items)
? self::$items
->get('css')
->map(fn($item)=>sprintf('<link rel="stylesheet" href="%s">',$item))
->join('')
: '';
}
public static function init(): void
{
self::$items = collect([
'js' => collect(),
'css' => collect(),
]);
}
// Render the JS items
public static function js(): string
{
return isset(self::$items)
? self::$items
->get('js')
->map(fn($item)=>sprintf('<script type="text/javascript" src="%s"></script>',$item))
->join('')
: '';
}
}

View File

@ -15,11 +15,11 @@ class CustomBladeServiceProvider extends ServiceProvider
*/ */
public function boot() public function boot()
{ {
Blade::directive('css',function(string $expression,array $args=[]) { Blade::directive('css',function(string $expression) {
return $this->resolve('css',$expression); return $this->resolve('css',$expression);
}); });
Blade::directive('js',function($expression,string $options=NULL) { Blade::directive('js',function($expression) {
return $this->resolve('js',$expression); return $this->resolve('js',$expression);
}); });
} }
@ -41,97 +41,7 @@ class CustomBladeServiceProvider extends ServiceProvider
switch ($type) { switch ($type) {
case 'datatables': case 'datatables':
switch ($content) { Log::alert(sprintf('Blade @css/@js for %s deprecicated, use @pa',$type));
case 'css':
// Base
$css->put($type,'https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css');
foreach ($arguments as $option) {
$key = $type.':'.$option;
switch ($option) {
case 'bootstrap4':
$css->put($key,'/plugin/dataTables/dataTables.bootstrap4.css');
break;
case 'buttons':
$css->put($key,'https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css');
break;
case 'fixedheader':
$css->put($key,'https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css');
break;
case 'rowgroup':
$css->put($key,'https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.dataTables.min.css');
break;
case 'responsive':
$css->put($key,'http://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css');
break;
case 'searchpanes':
$css->put($key,'https://cdn.datatables.net/searchpanes/1.2.1/css/searchPanes.dataTables.min.css');
break;
case 'searchpanes-left':
$css->put('searchpanes:searchpanes-left','/plugin/dataTables/leftSearchPanes.css');
break;
case 'select':
$css->put($key,'https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css');
break;
default:
throw new \Exception(sprintf('Unknown [%s] option: [%s:%s]',$type,$content,$option));
}
}
break;
case 'js':
// Base
$js->put($type,'https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js');
foreach ($arguments as $option) {
$key = $type.':'.$option;
switch ($option) {
case 'bootstrap4':
$js->put($key,'/plugin/dataTables/dataTables.bootstrap4.js');
break;
case 'buttons':
$js->put($key,'https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js');
$js->put($key.'html5','https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js');
$js->put($key.'jszip','https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js');
break;
case 'fixedheader':
$js->put($key,'https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js');
break;
case 'responsive':
$js->put($key,'https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js');
break;
case 'rowgroup':
$js->put($key,'https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js');
break;
case 'searchpanes':
$js->put($key,'https://cdn.datatables.net/searchpanes/1.2.1/js/dataTables.searchPanes.min.js');
break;
case 'select':
$js->put($key,'https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js');
break;
default:
throw new \Exception(sprintf('Unknown [%s] option: [%s:%s]',$type,$content,$option));
}
}
}
break; break;
case 'datepick': case 'datepick':

View File

@ -2,11 +2,15 @@
namespace Leenooks\Providers; namespace Leenooks\Providers;
use Illuminate\Foundation\AliasLoader;
use Illuminate\Support\Facades\Blade; use Illuminate\Support\Facades\Blade;
use Leenooks\Http\Middleware\GuestUser; use Leenooks\Http\Middleware\GuestUser;
use Illuminate\Routing\Router; use Illuminate\Routing\Router;
use Illuminate\Support\Collection; use Illuminate\Support\Collection;
use Illuminate\Support\ServiceProvider; use Illuminate\Support\ServiceProvider;
use Leenooks\PageAssets;
use Leenooks\Traits\SingleOrFail;
use Orchestra\Support\Facades\Asset;
/** /**
* Class GuestUserServiceProvider. * Class GuestUserServiceProvider.
@ -15,6 +19,8 @@ use Illuminate\Support\ServiceProvider;
*/ */
class LeenooksServiceProvider extends ServiceProvider class LeenooksServiceProvider extends ServiceProvider
{ {
use SingleOrFail;
private string $_path = ''; private string $_path = '';
/** /**
@ -24,6 +30,12 @@ class LeenooksServiceProvider extends ServiceProvider
*/ */
public function boot(Router $router) public function boot(Router $router)
{ {
self::bootSingleOrfail();
// Custom Aliases
$loader = AliasLoader::getInstance();
$loader->alias('PageAssets',PageAssets::class);
$router->pushMiddlewareToGroup('web',GuestUser::class); $router->pushMiddlewareToGroup('web',GuestUser::class);
$this->loadViewsFrom($this->_path.'/resources/themes/adminlte/views/', 'adminlte'); $this->loadViewsFrom($this->_path.'/resources/themes/adminlte/views/', 'adminlte');
@ -36,6 +48,11 @@ class LeenooksServiceProvider extends ServiceProvider
//Blade::componentNamespace('Leenooks\\Components','leenooks'); //Blade::componentNamespace('Leenooks\\Components','leenooks');
Blade::anonymousComponentPath($this->_path.'/resources/components', 'leenooks'); Blade::anonymousComponentPath($this->_path.'/resources/components', 'leenooks');
// Add our page assets
Blade::directive('pa',function($expression) {
return sprintf('<?php PageAssets::asset(\'%s\') ?>',$expression);
});
// Enable a Collect::recursive() function // Enable a Collect::recursive() function
Collection::macro('recursive', function () { Collection::macro('recursive', function () {
return $this->map(function ($value) { return $this->map(function ($value) {