Replace jQuery ready

resources/assets/js/countdown.js

@@ -1,3 +1,5 @@
+import { ready } from './ready';
+
 const lang = document.documentElement.getAttribute('lang');
 
 const templateFuture = 'in %value %unit';
@@ -67,7 +69,7 @@ function formatFromNow(timestamp) {
 /**
  * Initialises all countdown fields on the page.
  */
-$(function () {
+ready(function () {
   $.each($('[data-countdown-ts]'), function (i, e) {
     const span = $(e);
     const timestamp = span.data('countdown-ts');

resources/assets/js/forms.js

@@ -1,5 +1,6 @@
 require('select2');
 import { formatDay, formatTime } from './date';
+import { ready } from './ready';
 
 /**
  * Sets all checkboxes to the wanted state
@@ -85,7 +86,7 @@ global.setHours = (hours) => {
   setInput(from, to);
 };
 
-$(function () {
+ready(function () {
   /**
      * Disable every submit button after clicking (to prevent double-clicking)
      */
@@ -99,7 +100,7 @@ $(function () {
 /*
  * Button to set current time in time input fields.
  */
-$(function () {
+ready(function () {
   $('.input-group.time').each(function () {
     const elem = $(this);
     elem.find('button').on('click', function () {
@@ -119,7 +120,7 @@ $(function () {
   });
 });
 
-$(function () {
+ready(function () {
   $('select').select2({
     theme: 'bootstrap-5',
     width: '100%',
@@ -129,7 +130,7 @@ $(function () {
 /**
  * Show oauth buttons on welcome title click
  */
-$(function () {
+ready(function () {
   $('#welcome-title').on('click', function () {
     $('.btn-group.btn-group .btn.d-none').removeClass('d-none');
   });
@@ -146,7 +147,7 @@ $(function () {
  *
  * Uses DOMContentLoaded to prevent flickering
  */
-window.addEventListener('DOMContentLoaded', () => {
+ready(() => {
   const filter = document.getElementById('collapseShiftsFilterSelect');
   if (!filter || localStorage.getItem('collapseShiftsFilterSelect') !== 'hidden') {
     return;
@@ -155,7 +156,7 @@ window.addEventListener('DOMContentLoaded', () => {
   filter.classList.remove('show');
 });
 
-$(() => {
+ready(() => {
   if (typeof (localStorage) === 'undefined') {
     return;
   }

resources/assets/js/ready.js

@@ -0,0 +1,7 @@
+export const ready = (callback) => {
+  if (document.readyState !== 'loading') {
+    callback();
+  } else {
+    document.addEventListener('DOMContentLoaded', callback);
+  }
+}

resources/assets/js/sticky-headers.js

@@ -1,7 +1,9 @@
+import { ready } from './ready';
+
 /**
  * Enables the fixed headers and time lane for the shift-calendar and datatables
  */
-$(function () {
+ready(function () {
   if ($('.shift-calendar').length) {
     const timeLanes = $('.shift-calendar .time');
     const headers = $('.shift-calendar .header');

resources/assets/js/vendor.js

@@ -5,6 +5,7 @@ require('./forms');
 require('./sticky-headers');
 require('./countdown');
 
+
 $.ajaxSetup({
   headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
 });