refactor: Use typescript for (almost) all main site javascript

app/javascript/entrypoints/application.js → app/javascript/entrypoints/application.ts

@@ -24,17 +24,14 @@ import * as getPartial from "@src/get-partial"
 import * as getReportsForm from "@src/get-reports-form"
 import * as getSnippet from "@src/get-snippet"
 import * as getVerifiedUsers from "@src/get-verified-users"
-import * as imagePreview from "@src/image-preview"
 import * as infiniteScroll from "@src/infinite-scroll"
 import * as lazyVideo from "@src/lazy-video"
 import * as microlight from "@src/microlight"
 import * as modal from "@src/modal"
 import * as navigation from "@src/navigation"
 import * as numPlayersSlider from "@src/num-players-slider"
 import * as ollieForm from "@src/ollie-form"
-import * as revealByCheckbox from "@src/reveal-by-checkbox"
 import * as revealBySelect from "@src/reveal-by-select"
-import * as revealOnDifference from "@src/reveal-on-difference"
 import * as scrollIndicator from "@src/scroll-indicator"
 import * as scrollIntoViewOnLoad from "@src/scroll-into-view-on-load"
 import * as sticky from "@src/sticky"
@@ -56,15 +53,12 @@ document.addEventListener("turbolinks:load", () => {
   getReportsForm.bind()
   getSnippet.bind()
   getVerifiedUsers.bind()
-  imagePreview.bind()
   infiniteScroll.bind()
   lazyVideo.bind()
   modal.bind()
   navigation.bind()
   ollieForm.bind()
-  revealByCheckbox.bind()
   revealBySelect.bind()
-  revealOnDifference.bind()
   scrollIndicator.bind()
   sticky.bind()
   tabs.bind()

app/javascript/entrypoints/logged-in-user.js → app/javascript/entrypoints/logged-in-user.ts

@@ -22,9 +22,12 @@ import * as favorite from "@src/favorite"
 import * as getPostAnalytics from "@src/get-post-analytics"
 import * as getUserAnalytics from "@src/get-user-analytics"
 import * as ide from "@src/ide"
+import * as imagePreview from "@src/image-preview"
 import * as inscrybMde from "@src/inscryb-mde"
 import * as linkedInput from "@src/linked-input"
 import * as setCssVariable from "@src/set-css-variable"
+import * as revealByCheckbox from "@src/reveal-by-checkbox"
+import * as revealOnDifference from "@src/reveal-on-difference"
 
 document.addEventListener("turbolinks:load", () => {
   const svelteComponents = {
@@ -52,6 +55,9 @@ document.addEventListener("turbolinks:load", () => {
   getUserAnalytics.bind()
   setCssVariable.bind()
   linkedInput.bind()
+  imagePreview.bind()
+  revealByCheckbox.bind()
+  revealOnDifference.bind()
 
   chart.render()
   inscrybMde.render()
@@ -60,11 +66,11 @@ document.addEventListener("turbolinks:load", () => {
 document.addEventListener("turbolinks:before-cache", () => {
   inscrybMde.destroy()
 
-  const svelteComponents = document.querySelectorAll("[data-svelte-component]")
-  svelteComponents.forEach(element => element.dataset.initialized = null)
+  const svelteComponents = Array.from(document.querySelectorAll("[data-svelte-component]")) as HTMLElement[]
+  svelteComponents.forEach(element => element.dataset.initialized = "null")
 })
 
 document.addEventListener("turbolinks:click", () => {
-  const svelteComponents = document.querySelectorAll("[data-svelte-component]")
-  svelteComponents.forEach(element => element.dataset.initialized = null)
+  const svelteComponents = Array.from(document.querySelectorAll("[data-svelte-component]")) as HTMLElement[]
+  svelteComponents.forEach(element => element.dataset.initialized = "null")
 })

app/javascript/src/apply-custom-css.js → app/javascript/src/apply-custom-css.ts

@@ -4,9 +4,9 @@ export function bind() {
   elements.forEach((element) => element.removeAndAddEventListener("input", applyCustomCSS))
 }
 
-function applyCustomCSS() {
-  const value = this.value
+function applyCustomCSS({ currentTarget }: { currentTarget: HTMLFormElement }) {
+  const value = currentTarget.value
   const styleTag = document.querySelector("#custom-css")
 
-  styleTag.textContent = value
+  if (styleTag) styleTag.textContent = value
 }

app/javascript/src/blocks.js → app/javascript/src/blocks.ts

@@ -4,29 +4,29 @@ import LimitedCheckboxes from "@components/form/LimitedCheckboxes.svelte"
 import FetchRails from "@src/fetch-rails"
 
 export function bind() {
-  const element = document.querySelector("[data-role~='block-sortable']")
+  const element = document.querySelector("[data-role~='block-sortable']") as HTMLElement
 
   if (element) buildBlockSortable(element)
 
   const createBlockElements = document.querySelectorAll("[data-action~='create-block']")
   createBlockElements.forEach(element => element.removeAndAddEventListener("click", createBlock))
 }
 
-function createBlock() {
-  if (this.dataset.disabled == "true") return
+function createBlock({ currentTarget }: { currentTarget: HTMLElement }) {
+  if (currentTarget.dataset.disabled == "true") return
 
-  this.dataset.disabled = true
+  currentTarget.dataset.disabled = "true"
 
-  new FetchRails("/blocks", { block: { content_type: this.dataset.contentType, name: this.dataset.name } })
+  new FetchRails("/blocks", { block: { content_type: currentTarget.dataset.contentType, name: currentTarget.dataset.name } })
     .post().then(data => {
       new Promise((resolve) => new Function("resolve", data)(resolve))
       renderSvelteComponents()
     }).finally(() => {
-      this.dataset.disabled = false
+      currentTarget.dataset.disabled = "false"
     })
 }
 
-function buildBlockSortable(element) {
+function buildBlockSortable(element: HTMLElement) {
   Sortable.create(element, {
     draggable: "[data-sortable-block]",
     animation: 50,
@@ -35,11 +35,12 @@ function buildBlockSortable(element) {
 }
 
 function updateBlockSortable() {
-  const blocks = document.querySelectorAll(".content-block")
+  const blocks = Array.from(document.querySelectorAll(".content-block")) as HTMLElement[]
 
-  const positions = []
+  const positions: { id: any[]; position: number }[] = []
   blocks.forEach((block, i) => positions.push({ id: [block.dataset.id], position: i }))
 
+  // @ts-ignore
   const progressBar = new Turbolinks.ProgressBar()
   progressBar.setValue(0)
   progressBar.show()
@@ -55,23 +56,30 @@ function renderSvelteComponents() {
   initializeSvelteComponent("LimitedCheckboxes", LimitedCheckboxes)
 }
 
-export function insertBlockTemplate(event) {
+export function insertBlockTemplate(event: MouseEvent) {
   event.preventDefault()
 
-  const template = document.getElementById(`${this.dataset.template}`).content.cloneNode(true)
-  const targetElement = document.querySelector(`[data-template-target="${this.dataset.target}"]`)
+  const currentTarget = event.currentTarget as HTMLElement
+  const templateElement = document.getElementById(`${currentTarget.dataset.template}`) as HTMLFormElement
 
-  targetElement.append(template)
+  if (!templateElement) return
+
+  const template = templateElement.content.cloneNode(true)
+  const targetElement = document.querySelector(`[data-template-target="${currentTarget.dataset.target}"]`)
+
+  if (targetElement) targetElement.append(template)
 }
 
-export function removeBlockTemplate(event) {
+export function removeBlockTemplate(event: MouseEvent) {
   event.preventDefault()
 
-  const target = event.target.closest("[data-remove-target]")
-  target.remove()
+  const currentTarget = event.currentTarget as HTMLElement
+  const target = currentTarget.closest("[data-remove-target]")
+
+  if (target) target.remove()
 }
 
-export function buildInputSortable(element) {
+export function buildInputSortable(element: HTMLElement) {
   Sortable.create(element, {
     animation: 50,
     handle: "[data-role~='sortable-handle']"

app/javascript/src/carousel-cards.ts

@@ -0,0 +1,67 @@
+import Siema, { type SiemaOptions } from "siema"
+
+let carouselCards: Siema[] = []
+
+export function destroy() {
+  if (carouselCards.length == 0) return
+
+  const elements = document.querySelectorAll("[data-role='carousel-cards']")
+
+  elements.forEach(element => { element.classList.remove("initialised") })
+  carouselCards.forEach(carousel => carousel.destroy(true))
+
+  carouselCards = []
+}
+
+export function render() {
+  const elements = Array.from(document.querySelectorAll("[data-role='carousel-cards']")) as HTMLElement[]
+
+  if (elements.length == 0) return
+
+  elements.forEach(element => {
+    carouselCards = [...carouselCards, new Siema({
+      selector: element,
+      onInit: (() => element.classList.add("initialised")),
+      onChange: carouselCardsChanged,
+      perPage: { 450: 2, 768: 3 },
+      duration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 200
+    })]
+
+    element.dataset.carouselId = (carouselCards.length - 1).toString()
+  })
+
+  const previousElements = document.querySelectorAll("[data-action='carousel-previous']")
+  previousElements.forEach((element) => element.removeAndAddEventListener("click", carouselPrevious))
+
+  const nextElements = document.querySelectorAll("[data-action='carousel-next']")
+  nextElements.forEach((element) => element.removeAndAddEventListener("click", carouselNext))
+}
+
+function carouselCardsChanged(this: Siema & SiemaOptions) {
+  const selector = this.selector as HTMLElement
+  if (!selector) return
+
+  const parent = selector.closest(".card-carousel")
+  if (!parent) return
+
+  const nextElement = parent.querySelector("[data-action='carousel-next']")
+  const previousElement = parent.querySelector("[data-action='carousel-previous']")
+
+  if (previousElement) previousElement.classList.toggle("card-carousel__control--disabled", this.currentSlide == 0)
+  if (nextElement) nextElement.classList.toggle("card-carousel__control--disabled", this.currentSlide + this.perPage >= parseInt(selector?.dataset?.max || ''))
+}
+
+function carouselNext({ currentTarget }: { currentTarget: HTMLElement }) {
+  const carouselId = getCarouselId(currentTarget)
+  carouselCards[carouselId].next()
+}
+
+function carouselPrevious({ currentTarget }: { currentTarget: HTMLElement }) {
+  const carouselId = getCarouselId(currentTarget)
+  carouselCards[carouselId].prev()
+}
+
+function getCarouselId(element: HTMLElement): number {
+  const carouselElement = element.closest(".card-carousel")?.querySelector("[data-role='carousel-cards']") as HTMLElement
+  return parseInt(carouselElement.dataset.carouselId || '0')
+}