Rails 6 & Webpacker - thoughtbot/administrate GitHub Wiki

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()

// The next line you only need if you want ActiveStorage support
require("@rails/activestorage").start()

// The next line you only need if you need channels in administrate
require("channels")

// The next two lines you only need if you want ActionText support
require("trix")
require("@rails/actiontext")

require("../administrate/index")

import '../components/table'
import '../components/date_time_picker'

import flatpickr from 'flatpickr'

function bindDateTimePickers() {
  [...document.querySelectorAll('[data-type="time"]')].forEach((time) => {
    flatpickr(time, {
      enableTime: true,
      enableSeconds: true,
      noCalendar: true,
      altInput: true,
      altFormat: ' h:i:S K',
      dateFormat: 'H:i:S' // H:i
    })
  });

  [...document.querySelectorAll('[data-type="datetime"]')].forEach((time) => {
    flatpickr(time, {
      enableTime: true,
      altInput: true,
      altFormat: 'F J (D), Y - h:i:S K',
      dateFormat: 'Z' // Y-m-d H:i
    })
  });

  [...document.querySelectorAll('[data-type="date"]')].forEach((date) => {
    flatpickr(date, {
      altInput: true,
      altFormat: "F j, Y",
      dateFormat: "Y-m-d"
    })
  });
}

document.addEventListener("turbolinks:load", function () {
  bindDateTimePickers()
})

function bindTableLinks() {
  const keycodes = { space: 32, enter: 13 }

  function visitDataUrl(event) {
    /** @type {HTMLTableRowElement} */
    const target = event.target.classList.contains("js-table-row")
      ? event.target
      : event.target.closest('.js-table-row')

    if (!target) {
      return
    }

    if (event.type === "click" ||
        event.keyCode === keycodes.space ||
        event.keyCode === keycodes.enter) {

      if (event.target.href) {
        return
      }

      const dataUrl = target.getAttribute("data-url")
      const selection = window.getSelection().toString()
      if (selection.length === 0 && dataUrl) {
        window.location = dataUrl
      }
    }
  }

  const tables = [...document.getElementsByTagName("table")]
  tables.forEach(
    /** @type {HTMLTableElement} */ (table) => {
    table.addEventListener("click", visitDataUrl)
    table.addEventListener("keydown", visitDataUrl)
  })
}

document.addEventListener("turbolinks:load", function() {
  bindTableLinks()
})