Assety Javascript

Jeśli z jakichś przyczyn nie masz dostępu do assetów JS w iDir, możesz opublikować odpowiednie pliki poleceniem:

php artisan vendor:publish --tag=idir.js

Assety JS dostępne są z poziomu folderu:

/resources/js/vendor/idir/

# Import bibliotek

Wszystkie biblioteki importowane są zbiorczo z poziomu plików:

• resources/js/vendor/idir/admin/admin.js - dla panelu administracyjnego
• resources/js/vendor/idir/web/web.js - dla strony
• resources/js/vendor/idir/vendor/vendor.js - wspólne dla obu

# Skrypty

Wszystkie skrypty i eventy znajdują się w plikach na poziomie folderu:

• resources/js/vendor/idir/admin/scripts - dla panelu administracyjnego
• resources/js/vendor/idir/web/scripts - dla strony

# Webpack

Wszystkie assety JS są skompilowane na produkcji za pomocą Laravel Mix. W głównym folderze z aplikacją znajduje się plik konfiguracyjny:

• webpack.mix.js
  

który można dostosować do własnych potrzeb (domyślnie umieszcza skompilowane pliki bezpośrednio do folderu public).

Kompilację należy przeprowadzać wyłącznie w trybie deweloperskim. Potrzebne jest do tego środowisko nodejs oraz pobranie dużej liczby zależności przez npm za pomocą polecenia:

npm install

Kompilację można uruchomić poleceniem:

npm run production

# Dodawanie własnych bibliotek do pliku Webpack

Nowe pliki nie ingerujące w assety iDir sugeruje się kompilować do osobnych plików. Proponowana konfiguracja:

• dla panelu administracyjnego:
  

  mix.js('resources/js/admin/admin.js', 'js/custom/admin/admin.js');

• dla strony użytkownika:
  

  mix.js('resources/js/web/web.js', 'js/custom/web/web.js');

Pliki publiczne pod tymi ścieżkami są już wstrzyknięte w nagłówek layout.blade.php:

<script src="{{ mix('js/vendor/idir/vendor/vendor.js') }}" defer></script>
<script src="{{ mix('js/vendor/idir/web/web.js') }}" defer></script>
<script src="{{ asset('js/custom/web/web.js') }}" defer></script>

Dzięki temu możliwe będzie aktualizowanie plików publicznych JS z iDir bezpośrednio przez publikację bez ryzyka, że nadpisze się swoje zmiany i bez konieczności ponownej kompilacji assetów.

# Dodawanie własnych skryptów do pliku Webpack

Nowe pliki nie ingerujące w assety iDir sugeruje się kompilować do osobnych plików. Proponowana konfiguracja:

• dla panelu administracyjnego:
  

  .scripts([
      'resources/js/admin/scripts/**/*.js',
  ], 'public/js/custom/admin/scripts.js')

• dla strony użytkownika:
  

  .scripts([
      'resources/js/web/scripts/**/*.js',
  ], 'public/js/custom/web/scripts.js')

Pliki publiczne pod tymi ścieżkami są już wstrzyknięte przed znacznikiem </body> w layout.blade.php.

@stack('script')
<script src="{{ mix('js/vendor/idir/web/scripts.js') }}" defer></script>
<script src="{{ asset('js/custom/web/scripts.js') }}" defer></script>

Dzięki temu możliwe będzie aktualizowanie plików publicznych JS z iDir bezpośrednio przez publikację bez ryzyka, że nadpisze się swoje zmiany i bez konieczności ponownej kompilacji assetów.

# Przekierowanie skryptów na własną logikę

Jeśli chcemy zmienić logikę skryptu należy wyłączyć bieżący skrypt za pomocą unikatowego namespace-a, a następnie zdefiniować własny skrypt. Przykład:

$(document).off('click.n1ebieski/idir/web/scripts/ajax/field@gus')
    .on('click.web/scripts/ajax/field@gus', '#search-gus .btn', function () {
        // Your logic
    });