Refactor jquery

src/js/Framework/Clipboard.js

@@ -1,27 +1,26 @@
 export class Clipboard {
-  constructor(element)
-  {
+  constructor (element) {
     element.addEventListener('click', (event) => {
-      const elementId = event.currentTarget.getAttribute('data-clipboard-target');
+      const elementId = event.currentTarget.getAttribute('data-clipboard-target')
 
       if (elementId === null) {
         console.error(
           'data-clipboard-target attribute was not provided. This is the element we will be copying from.'
-        );
+        )
 
-        return;
+        return
       }
 
-      const textSource = document.querySelector(elementId);
+      const textSource = document.querySelector(elementId)
 
       if (textSource === null) {
-        console.error('Source element was not found "' + elementId + '".');
+        console.error('Source element was not found "' + elementId + '".')
 
-        return;
+        return
       }
 
-      const text = textSource.select();
-      document.execCommand('copy');
-    });
+      const text = textSource.select()
+      document.execCommand('copy')
+    })
   }
 }

src/js/Framework/Cookies.js

@@ -1,56 +1,39 @@
 export class Cookies {
   constructor () {
-    /**
-     * Utilities; useful scripts
-     */
-    this.cookies = {};
+    this.cookies = {}
   }
 
-  /**
-   * Are cookies enabled?
-   *
-   * @return bool
-   */
   isEnabled () {
     // try to grab the property
-    var cookiesEnabled = !!(navigator.cookieEnabled)
+    let cookiesEnabled = !!(navigator.cookieEnabled)
 
     // unknown property?
     if (typeof navigator.cookieEnabled === 'undefined' && !cookiesEnabled) {
       // try to set a cookie
       document.cookie = 'testcookie'
-      cookiesEnabled = ($.inArray('testcookie', document.cookie) !== -1)
+      cookiesEnabled = document.cookie.includes('testcookie')
     }
 
-    // return
     return cookiesEnabled
   }
 
-  /**
-   * Read a cookie
-   *
-   * @return mixed
-   */
   readCookie (name) {
-    // get cookies
-    var cookies = document.cookie.split(';')
+    const cookies = document.cookie.split(';')
     name = name + '='
 
-    for (var i = 0; i < cookies.length; i++) {
-      var cookie = cookies[i]
-      while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length)
-      if (cookie.indexOf(name) === 0) return cookie.substring(name.length, cookie.length)
-    }
+    cookies.forEach((cookie) => {
+      cookie.trim()
+      if (cookie.indexOf(name) === 0) {
+        return cookie.substring(name.length, cookie.length)
+      }
+    })
 
-    // fallback
     return null
   }
 
-  setCookie (name, value, days) {
-    if (typeof days === 'undefined') days = 7
-
-    var expireDate = new Date()
+  setCookie (name, value, days = 7) {
+    const expireDate = new Date()
     expireDate.setDate(expireDate.getDate() + days)
-    document.cookie = name + '=' + escape(value) + ';expires=' + expireDate.toUTCString() + ';path=/'
+    document.cookie = name + '=' + value + ';expires=' + expireDate.toUTCString() + ';path=/'
   }
 }

src/js/Framework/DateTimePicker/DatePicker.js

@@ -1,9 +1,7 @@
-import flatpickr from "flatpickr"
+import flatpickr from 'flatpickr'
 
 export class DatePicker {
   constructor (element) {
-    this._element = $(element)
-
     this.dayNames = [
       Translator.trans('datepicker.full.days.sunday'), Translator.trans('datepicker.full.days.monday'), Translator.trans('datepicker.full.days.tuesday'),
       Translator.trans('datepicker.full.days.wednesday'), Translator.trans('datepicker.full.days.thursday'), Translator.trans('datepicker.full.days.friday'),
@@ -26,10 +24,8 @@ export class DatePicker {
       Translator.trans('datepicker.short.months.july'), Translator.trans('datepicker.short.months.august'), Translator.trans('datepicker.short.months.september'),
       Translator.trans('datepicker.short.months.october'), Translator.trans('datepicker.short.months.november'), Translator.trans('datepicker.short.months.december')
     ]
-  }
 
-  init () {
-    flatpickr(this._element, {
+    this.element = flatpickr(element, {
       locale: {
         firstDayOfWeek: 1,
         weekdays: {

src/js/Framework/DateTimePicker/DateTimePicker.js

@@ -1,25 +1,8 @@
-import {DatePicker} from './DatePicker';
-import flatpickr from "flatpickr"
+import { DatePicker } from './DatePicker'
 
 export class DateTimePicker extends DatePicker {
   constructor (element) {
     super(element)
-  }
-
-  init () {
-    flatpickr(this._element, {
-      enableTime: true,
-      locale: {
-        firstDayOfWeek: 1,
-        weekdays: {
-          shorthand: this.dayNamesShort,
-          longhand: this.dayNames
-        },
-        months: {
-          shorthand: this.monthNamesShort,
-          longhand: this.monthNames
-        }
-      }
-    })
+    this.element._flatpickr.config.enableTime = true
   }
 }

src/js/Framework/DateTimePicker/TimePicker.js

@@ -1,14 +1,10 @@
-import flatpickr from "flatpickr"
+import flatpickr from 'flatpickr'
 
 export class TimePicker {
   constructor (element) {
-    this._element = $(element)
-  }
-
-  init () {
-    flatpickr(this._element, {
+    this.element = flatpickr(element, {
       enableTime: true,
-      noCalendar: true,
+      noCalendar: true
     })
   }
 }

src/js/Framework/Flash.js

@@ -3,8 +3,7 @@ import Vue from 'vue'
 
 export class Flash {
   static add (message, type, delay = 10000) {
-
-    let toastId = 'toast' + Date.now()
+    const toastId = 'toast' + Date.now()
 
     const component = new Vue({
       ...Toast,
@@ -16,12 +15,8 @@ export class Flash {
       }
     }).$mount()
 
-    $('#toast-wrapper').prepend(component.$el)
-
+    const toastWrapper = document.querySelector('#toast-wrapper')
+    toastWrapper.insertBefore(component.$el, toastWrapper.firstChild)
     return toastId
   }
-
-  static remove (toastId) {
-    $(`#${toastId}`).toast('hide')
-  }
 }

src/js/Framework/Form.js

@@ -1,65 +1,13 @@
 export class Form {
   constructor () {
-    this.initForm()
-  }
-
-  initForm () {
-    this.dateFields()
-    $('form').on('submit', $.proxy(this.hijackSubmit, this))
-  }
-
-  parseDate (element, key) {
-    if (typeof element.data(key) === 'undefined' || element.data(key) === null) {
-      return ''
-    }
-
-    let data = element.data(key).split('-')
-    return new Date(
-        parseInt(data[0], 10),
-        parseInt(data[1], 10) - 1,
-        parseInt(data[2], 10)
-    )
-  }
-
-  dateFields () {
-    $('[data-role=datepicker]').each((i, el) => {
-      let datepicker = $(el);
-      let format = datepicker.data('format');
-
-      let startDate = false;
-      if (typeof datepicker.data('date-start-date') !== 'undefined' && datepicker.data('date-start-date')) {
-        startDate = moment(datepicker.data('date-start-date'), format);
-      }
-
-      let endDate = false;
-      if (typeof datepicker.data('date-end-date') !== 'undefined' && datepicker.data('date-end-date')) {
-        endDate = moment(datepicker.data('date-end-date'), format);
-      }
-
-      datepicker.datetimepicker({
-        dayViewHeaderFormat: "MMMM YYYY", /* Leverages same syntax as 'format' */
-        locale: jsData.request.locale,
-        format: format,
-        minDate: startDate,
-        maxDate: endDate,
-        keepOpen: true,
-        icons: {
-          time: "fa fa-clock-o",
-          date: "fa fa-calendar",
-          up: "fa fa-arrow-up",
-          down: "fa fa-arrow-down",
-          previous: "fa fa-arrow-left",
-          next: "fa fa-arrow-right"
-        },
-      });
-    });
-
-    $('.js-input-focus').on('click', function() {
-      $($(this).data('toggle')).focus();
-    });
+    this.forms = document.querySelectorAll('form')
+    this.forms.forEach((form) => {
+      form.addEventListener('submit', () => { this.hijackSubmit() })
+    })
   }
 
   hijackSubmit () {
-    $(this).trigger('form_submitting')
+    const event = new Event('form_submitting')
+    document.dispatchEvent(event)
   }
 }