sutty/app/javascript/packs/application.js

/* eslint no-console:0 */
// 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.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import { Application } from 'stimulus'
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import tableDragger from 'table-dragger'

import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown"
import {exampleSetup} from "prosemirror-example-setup"

import "prosemirror-gapcursor/style/gapcursor.css"
import "prosemirror-menu/style/menu.css"
import "prosemirror-view/style/prosemirror.css"
import "prosemirror-example-setup/style/style.css"

// Lista de equivalencias entre Date#getTimezoneOffset de JS y
// MetadataEvent
const timeZoneOffsets = {
   '720': '-12:00',
   '660': '-11:00',
   '600': '-10:00',
   '570': '-09:30',
   '540': '-09:00',
   '480': '-08:00',
   '420': '-07:00',
   '360': '-06:00',
   '300': '-05:00',
   '240': '-04:00',
   '210': '-03:30',
   '180': '-03:00',
   '120': '-02:00',
    '60': '-01:00',
     '0': '00:00',
   '-60': '+01:00',
  '-120': '+02:00',
  '-180': '+03:00',
  '-210': '+03:30',
  '-240': '+04:00',
  '-270': '+04:30',
  '-300': '+05:00',
  '-330': '+05:30',
  '-345': '+05:45',
  '-360': '+06:00',
  '-390': '+06:30',
  '-420': '+07:00',
  '-480': '+08:00',
  '-525': '+08:45',
  '-540': '+09:00',
  '-570': '+09:30',
  '-600': '+10:00',
  '-630': '+10:30',
  '-660': '+11:00',
  '-720': '+12:00',
  '-765': '+12:45',
  '-780': '+13:00',
  '-840': '+14:00'
};

// Obtiene el huso horario local 
const timeZoneOffset = timeZoneOffsets[(new Date).getTimezoneOffset().toString()];

document.addEventListener('turbolinks:load', () => {

  // Aplicar el huso horario descubierto en los campos de evento solo
  // cuando estamos creando un artículo.
  document.querySelectorAll('.new .event .zone select').forEach(zone => zone.value = timeZoneOffset);

  document.querySelectorAll('.markdown-content').forEach(mdc => {
    let textArea = mdc.querySelector(".content"),
        editor = mdc.querySelector(".editor");

    let view = new EditorView(editor, {
      state: EditorState.create({
        doc: defaultMarkdownParser.parse(textArea.value),
        plugins: exampleSetup({schema})
      })
    })

    // Guardar los cambios al enviar el formulario y cada 10 segundos
    textArea.form.addEventListener('submit', e => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc));
    setInterval(() => textArea.value = defaultMarkdownSerializer.serialize(view.state.doc), 10 * 1000);
    // Ocultar el area
    textArea.style.display = 'none'
  })

  document.querySelectorAll('.table-draggable').forEach(table => {
    tableDragger(table, {
      mode: 'row',
      onlyBody: true,
      dragHandler: '.handle'
    }).on('drop', (from, to, el, mode) => {
      Array.from(document.querySelectorAll('.reorder'))
          .reverse()
          .map((o,i) => o.value = i);

      Array.from(document.querySelectorAll('.submit-reorder'))
          .map(s => s.classList.remove('d-none'));
    });
  });
})