From 77904dc473ea8bacb65aca996b4cf213f4249fea Mon Sep 17 00:00:00 2001 From: f Date: Wed, 7 Apr 2021 17:45:27 -0300 Subject: [PATCH] deprecar sprockets y ganar sourcemaps --- app/assets/javascripts/application.js | 5 - .../controllers/reorder_controller.js | 6 +- app/javascript/editor/types/multimedia.ts | 6 +- .../etc}/external_links.js | 0 .../etc}/image_preview.js | 0 app/javascript/etc/index.js | 8 ++ app/javascript/etc/input-date.js | 11 ++ .../etc}/input-tag.js | 3 + app/javascript/etc/prosemirror.js | 29 +++++ app/javascript/etc/timezone.js | 51 ++++++++ .../etc}/turbolinks-anchors.js | 0 .../etc}/validation.js | 0 app/javascript/packs/application.js | 112 ++---------------- app/views/layouts/application.html.haml | 1 - package.json | 6 + yarn.lock | 22 ++++ 16 files changed, 144 insertions(+), 116 deletions(-) delete mode 100644 app/assets/javascripts/application.js rename app/{assets/javascripts => javascript/etc}/external_links.js (100%) rename app/{assets/javascripts => javascript/etc}/image_preview.js (100%) create mode 100644 app/javascript/etc/index.js create mode 100644 app/javascript/etc/input-date.js rename app/{assets/javascripts => javascript/etc}/input-tag.js (80%) create mode 100644 app/javascript/etc/prosemirror.js create mode 100644 app/javascript/etc/timezone.js rename app/{assets/javascripts => javascript/etc}/turbolinks-anchors.js (100%) rename app/{assets/javascripts => javascript/etc}/validation.js (100%) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js deleted file mode 100644 index 63cd7f5..0000000 --- a/app/assets/javascripts/application.js +++ /dev/null @@ -1,5 +0,0 @@ -//= require rails-ujs -//= require turbolinks -//= require input-tag/input-tag.js -//= require input-map/input-map.js -//= require_tree . diff --git a/app/javascript/controllers/reorder_controller.js b/app/javascript/controllers/reorder_controller.js index f457776..dca6e16 100644 --- a/app/javascript/controllers/reorder_controller.js +++ b/app/javascript/controllers/reorder_controller.js @@ -103,7 +103,11 @@ export default class extends Controller { this.reorder() // Mantenemos el primero a la vista - rows[0].row.scrollIntoViewIfNeeded() + if ("scrollIntoViewIfNeeded" in rows[0].row) { + rows[0].row.scrollIntoViewIfNeeded() + } else { + rows[0].row.scrollIntoView() + } } counter () { diff --git a/app/javascript/editor/types/multimedia.ts b/app/javascript/editor/types/multimedia.ts index 7ebf8e8..e304a41 100644 --- a/app/javascript/editor/types/multimedia.ts +++ b/app/javascript/editor/types/multimedia.ts @@ -1,3 +1,4 @@ +import * as ActiveStorage from '@rails/activestorage' import { Editor } from 'editor/editor' import { EditorNode, getValidParentInSelection } from 'editor/types' import { @@ -6,11 +7,6 @@ import { setAuxiliaryToolbar, clearSelected, } from 'editor/utils' -// TODO: tener ActiveStorage como import así no hacemos hacks -declare global { - const ActiveStorage: any -} - function uploadFile (file: File): Promise { return new Promise((resolve, reject) => { const upload = new ActiveStorage.DirectUpload( diff --git a/app/assets/javascripts/external_links.js b/app/javascript/etc/external_links.js similarity index 100% rename from app/assets/javascripts/external_links.js rename to app/javascript/etc/external_links.js diff --git a/app/assets/javascripts/image_preview.js b/app/javascript/etc/image_preview.js similarity index 100% rename from app/assets/javascripts/image_preview.js rename to app/javascript/etc/image_preview.js diff --git a/app/javascript/etc/index.js b/app/javascript/etc/index.js new file mode 100644 index 0000000..482b78f --- /dev/null +++ b/app/javascript/etc/index.js @@ -0,0 +1,8 @@ +import './external_links' +import './image_preview' +import './input-date' +import './input-tag' +import './prosemirror' +import './timezone' +import './turbolinks-anchors' +import './validation' diff --git a/app/javascript/etc/input-date.js b/app/javascript/etc/input-date.js new file mode 100644 index 0000000..035029c --- /dev/null +++ b/app/javascript/etc/input-date.js @@ -0,0 +1,11 @@ +// Validar fechas en navegadores que no soportan date, como +// Webkit/Safari +document.addEventListener('turbolinks:load', () => { + document.querySelectorAll('input[type="date"]').forEach(date => { + if (date.type === 'date') return + + date.addEventListener('change', event => { + date.setCustomValidity(date.validity.patternMismatch ? date.dataset.patternMismatch : '') + }) + }) +}) diff --git a/app/assets/javascripts/input-tag.js b/app/javascript/etc/input-tag.js similarity index 80% rename from app/assets/javascripts/input-tag.js rename to app/javascript/etc/input-tag.js index f07d8dc..2ebb3c6 100644 --- a/app/assets/javascripts/input-tag.js +++ b/app/javascript/etc/input-tag.js @@ -1,3 +1,6 @@ +import InputTag from 'input-tag/input-tag' +import InputMap from 'input-map/input-map' + document.addEventListener('turbolinks:load', () => { document.querySelectorAll('.taggable').forEach(target => { target.innerHTML = '' diff --git a/app/javascript/etc/prosemirror.js b/app/javascript/etc/prosemirror.js new file mode 100644 index 0000000..5ef4383 --- /dev/null +++ b/app/javascript/etc/prosemirror.js @@ -0,0 +1,29 @@ +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" + +document.addEventListener('turbolinks:load', () => { + document.querySelectorAll('.markdown-content').forEach(mdc => { + let textArea = mdc.querySelector(".content"), + editor = mdc.querySelector(".markdown-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' + }) +}) diff --git a/app/javascript/etc/timezone.js b/app/javascript/etc/timezone.js new file mode 100644 index 0000000..b9a8037 --- /dev/null +++ b/app/javascript/etc/timezone.js @@ -0,0 +1,51 @@ +// 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); +}) diff --git a/app/assets/javascripts/turbolinks-anchors.js b/app/javascript/etc/turbolinks-anchors.js similarity index 100% rename from app/assets/javascripts/turbolinks-anchors.js rename to app/javascript/etc/turbolinks-anchors.js diff --git a/app/assets/javascripts/validation.js b/app/javascript/etc/validation.js similarity index 100% rename from app/assets/javascripts/validation.js rename to app/javascript/etc/validation.js diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 9964dc4..6aa3a2e 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -1,19 +1,4 @@ /* 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 { Notifier } from '@airbrake/browser' @@ -27,94 +12,13 @@ import 'core-js/stable' import 'regenerator-runtime/runtime' import 'controllers' import 'editor/editor' +import 'fork-awesome/scss/fork-awesome.scss' +import 'etc' -import {EditorState} from "prosemirror-state" -import {EditorView} from "prosemirror-view" -import {schema, defaultMarkdownParser, defaultMarkdownSerializer} from "prosemirror-markdown" -import {exampleSetup} from "prosemirror-example-setup" +import Rails from '@rails/ujs' +import Turbolinks from 'turbolinks' +import * as ActiveStorage from '@rails/activestorage' -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" -import "fork-awesome/scss/fork-awesome.scss" - -// 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(".markdown-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' - }) - - // Validar fechas en navegadores que no soportan date - document.querySelectorAll('input[type="date"]').forEach(date => { - if (date.type === 'date') return - - date.addEventListener('change', event => { - date.setCustomValidity(date.validity.patternMismatch ? date.dataset.patternMismatch : '') - }) - }) -}) +Rails.start() +Turbolinks.start() +ActiveStorage.start() diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index d4f94e6..891d635 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -16,7 +16,6 @@ = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' - = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' = favicon_link_tag 'sutty_cuadrada.png', rel: 'apple-touch-icon', type: 'image/png' %body{ class: yield(:body) } diff --git a/package.json b/package.json index 4146064..0a2458a 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "@babel/preset-env": "^7.12.17", "@babel/preset-typescript": "~7.12", "@rails/actiontext": "^6.0.0", + "@rails/activestorage": "^6.1.3-1", + "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", @@ -22,8 +24,12 @@ "prosemirror-markdown": "^1.4.5", "prosemirror-schema-basic": "^1.1.2", "stimulus": "^1.1.1", + "turbolinks": "^5.2.0", "typescript": "^4.1.5", "webpack-dev-server": "^3.11.2", "zepto": "^1.2.0" + }, + "devDependencies": { + "@types/rails__activestorage": "^6.0.0" } } diff --git a/yarn.lock b/yarn.lock index 6b8b24e..11ff78c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1091,6 +1091,18 @@ dependencies: spark-md5 "^3.0.0" +"@rails/activestorage@^6.1.3-1": + version "6.1.3-1" + resolved "https://registry.yarnpkg.com/@rails/activestorage/-/activestorage-6.1.3-1.tgz#3304eaf597279c5943f793068b0147cb639239ed" + integrity sha512-BCrnyrRWIZX3eQieMHrmWuMCEZgwSifmSVFg46tGjdbDa6wjK3jitFDQ+gYXhyN3Cs4Hb+kAJb+0oMiprkzY0A== + dependencies: + spark-md5 "^3.0.0" + +"@rails/ujs@^6.1.3-1": + version "6.1.3-1" + resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.3-1.tgz#c25ca8473a40298ecab7b0020214e77c0e6f5188" + integrity sha512-mygePdimLMOQ2nr9YclG1UIyKgaNfb2dMhsjhTs18j6DvlKR9VRz1j/Mbd2E7VL7HX7hlMBD1cltDrQsTZPjEw== + "@rails/webpacker@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.2.1.tgz#87cdbd4af2090ae2d74bdc51f6f04717d907c5b3" @@ -1202,6 +1214,11 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24" integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug== +"@types/rails__activestorage@^6.0.0": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@types/rails__activestorage/-/rails__activestorage-6.0.0.tgz#e633f2a430993f754792dfdbe2b64fc1f2d33869" + integrity sha512-Qk6dASfYYHym/95KQbPmUECuaveB5+sYEQdHDwKHvmwtrEbqjMH4t56MMCyzarweFDrA6ysULoCoa1f2nydwLg== + "@types/request@2.48.5": version "2.48.5" resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.5.tgz#019b8536b402069f6d11bee1b2c03e7f232937a0" @@ -7797,6 +7814,11 @@ tunnel-agent@^0.6.0: dependencies: safe-buffer "^5.0.1" +turbolinks@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c" + integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw== + tweetnacl@^0.14.3, tweetnacl@~0.14.0: version "0.14.5" resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"