orchidsoftware / platform

Orchid is a @laravel package that allows for rapid application development of back-office applications, admin/user panels, and dashboards.
https://orchid.software
MIT License
4.38k stars 644 forks source link

Custom JavaScript code at the bottom of the body tag #1021

Closed Hrache closed 4 years ago

Hrache commented 4 years ago

Hello, I'm here with a question again. This time I would like to know how can I add script tag within java script at the bottom of the body tag ? Thank you!

tabuna commented 4 years ago

Can I find out what this is for? Thanks to stimulus and turbolinks, scripts will be loaded only at the first page load and we won’t get a faster page rendering speed.

tabuna commented 4 years ago

This can be done as follows by adding to the template you need.

@push('scripts')
    <script src="/example.js"></script>
@endpush
Hrache commented 4 years ago

Thanks for quick feedback, I wasn't actually expecting it. So basically I need to turn textarea tag into different markdown editor than is provided by the Orchid: Summernote. I used it in my project and it conflicts with the SimpleMDE, which by the first impressions going to be similar. So it needs Java Script to be added at the bottom of the body tag, it requires id attribute only and/or maybe some configurations and etc ... Thank you for your attention ...

This can be done as follows by adding to the template you need.

@push('scripts')
    <script src="/example.js"></script>
@endpush

Which template I should modify, orchid base templates or there is something else that I should know about ?

tabuna commented 4 years ago

You can change the example header or footer of your application. I also highly recommend getting to know "Use JavaScript".

Hrache commented 4 years ago

Thanks, but how can I do route name check at the PlatformProvider, to add few front-end resource file depending on a request, when the url is dynamic kind of a e.g. "post/edit/1" and the name is "platform.post.edit", I want to check is the name of the current route "platform.post.edit" ?

tabuna commented 4 years ago

This is beyond the scope of the package. You can google material on this topic, for example this.

I strongly do not recommend connecting scripts depending on the user's route, no matter in which project and what technologies you use.

Hrache commented 4 years ago

So you know about this $dashboard->registerResource('scripts', ... if I want to have script tag after the latest jQuery version for around some xyz request then I'll not be able to use any pushes or even the above approach to realize it. So what is the best solution for the Orchid, in case of bare framework (Laravel) we can use pushes and other solutions but not in case of Orchid, I think we should have some pushes after Dashboard::getResource('scripts'), too for a dynamism. I noticed that you've @stack('stylesheets') after Dashboard::getResource('stylesheets') but you don't have @stack('scripts') after Dashboard::getResource('scripts'), so maybe I was about it.

tabuna commented 4 years ago

There are several solutions, the most correct in my opinion would be to build js/css using laravel.mix and then connect it.

//webpack.mix.js

Const mix = requires ('larvae-mix');

// Public script
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

// Platform script
mix.js('resources/js/platform.js', 'public/js')
    .sass('resources/sass/platform.scss', 'public/css');

In your own assemblies, you yourself specify the behavior that you expect and implement it.

It can be either a framework (vue / react) or a library (jquery / chart.js), the default orchid uses stimulus, you don’t have to use it. But for him there is a ready-made deployment team artisan preset orchid.

You just have to collect and connect the final files to your platform:

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Orchid\Platform\Dashboard;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot(Dashboard $dashboard)
    {
        $dashboard->registerResource('scripts', mix('platform.js'));
        $dashboard->registerResource('stylesheets', mix('platform.css'));
    }
}

Please note that your code will be called only once, as in a real single-page application. Therefore, keep this in mind when you put listeners on page loading.

Hrache commented 4 years ago

Thanks, I'll try to copy the header and add my own stack after Dashboard::getResource('scripts') ... Thank you for your feedback and have a nice day. Cheers

Hrache commented 4 years ago
I'm adding scripts and stylesheets into the @stack('head') but the code doesn't want to work, even though I added a bootstrap and the appearance of the admin got changed so I needed to remove it and similar stuff did happen to java script - one of the libraries didn't work by saying that the method that actually is the whole framework doesn't exist.
So what I concluded is that the best way to do that is to add all that data into the Dashboard scripts and stylesheets loops, so how to do that, how can I add data into **Dashbaord::getResource('scripts')** **Dashbaord::getResource('stylesheets')** loops from anywhere in the code, is there a variable, or static class, or helper function and etc ? Thank you for your attention .