b4um_generators 0.1.0

data/lib/generators/b4um/install/templates/image_lightbox_controller.js

@@ -0,0 +1,414 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['item', 'overlay', 'stage', 'image', 'caption', 'counter', 'previousButton', 'nextButton']
+
+  connect() {
+    this.currentIndex = 0
+    this.isSliding = false
+
+    this.isDragging = false
+    this.dragStartX = 0
+    this.dragCurrentX = 0
+    this.dragPointerId = null
+  }
+
+  open(event) {
+    event.preventDefault()
+
+    const item = event.currentTarget
+    const index = this.itemTargets.indexOf(item)
+
+    if (index === -1) return
+
+    this.currentIndex = index
+    this.showCurrentImage()
+
+    this.overlayTarget.hidden = false
+    document.body.classList.add('image-lightbox-open')
+
+    this.overlayTarget.focus()
+  }
+
+  close() {
+    if (this.isSliding) return
+
+    this.overlayTarget.hidden = true
+    document.body.classList.remove('image-lightbox-open')
+  }
+
+  /*
+  closeOnBackground(event) {
+    if (event.target !== this.overlayTarget) return
+
+    this.close()
+  }*/
+
+  closeOnBackground(event) {
+    if (this.isDragging || this.isSliding) return
+
+    const image = this.imageTarget
+    const rect = image.getBoundingClientRect()
+
+    const clickedOnImage =
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom
+
+    if (clickedOnImage) return
+
+    this.close()
+  }
+
+  previous(event) {
+    event.stopPropagation()
+
+    if (this.itemTargets.length <= 1) return
+
+    const nextIndex = (this.currentIndex - 1 + this.itemTargets.length) % this.itemTargets.length
+
+    this.slideTo(nextIndex, 'previous')
+  }
+
+  next(event) {
+    event.stopPropagation()
+
+    if (this.itemTargets.length <= 1) return
+
+    const nextIndex = (this.currentIndex + 1) % this.itemTargets.length
+
+    this.slideTo(nextIndex, 'next')
+  }
+
+  keydown(event) {
+    if (this.overlayTarget.hidden) return
+
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault()
+        this.close()
+        break
+
+      case 'ArrowLeft':
+        event.preventDefault()
+        this.previous(event)
+        break
+
+      case 'ArrowRight':
+        event.preventDefault()
+        this.next(event)
+        break
+    }
+  }
+
+  prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  }
+
+  pointerDown(event) {
+    if (this.isSliding) return
+    if (this.itemTargets.length <= 1) return
+
+    this.isDragging = true
+    this.dragStartX = event.clientX
+    this.dragCurrentX = event.clientX
+    this.dragPointerId = event.pointerId
+
+    const previousIndex = (this.currentIndex - 1 + this.itemTargets.length) % this.itemTargets.length
+
+    const nextIndex = (this.currentIndex + 1) % this.itemTargets.length
+
+    this.dragPreviousImage = this.createDragImage(previousIndex, 'previous')
+
+    this.dragNextImage = this.createDragImage(nextIndex, 'next')
+
+    this.stageTarget.appendChild(this.dragPreviousImage)
+    this.stageTarget.appendChild(this.dragNextImage)
+
+    this.stageTarget.setPointerCapture(event.pointerId)
+  }
+
+  pointerMove(event) {
+    if (!this.isDragging) return
+    if (event.pointerId !== this.dragPointerId) return
+
+    this.dragCurrentX = event.clientX
+
+    const offset = this.dragCurrentX - this.dragStartX
+    const width = this.stageTarget.clientWidth
+
+    if (width <= 0) return
+
+    this.imageTarget.style.transform = `translateX(${offset}px)`
+
+    this.dragPreviousImage.style.transform = `translateX(${offset - width}px)`
+
+    this.dragNextImage.style.transform = `translateX(${offset + width}px)`
+  }
+
+  pointerCancel(event) {
+    if (!this.isDragging) return
+    if (event.pointerId !== this.dragPointerId) return
+
+    this.dragCurrentX = this.dragStartX
+    this.pointerUp(event)
+  }
+
+  pointerUp(event) {
+    if (!this.isDragging) return
+    if (event.pointerId !== this.dragPointerId) return
+
+    const offset = this.dragCurrentX - this.dragStartX
+    const width = this.stageTarget.clientWidth
+    const threshold = Math.min(width * 0.2, 140)
+    const reducedMotion = this.prefersReducedMotion()
+
+    this.isDragging = false
+
+    if (this.stageTarget.hasPointerCapture(event.pointerId)) {
+      this.stageTarget.releasePointerCapture(event.pointerId)
+    }
+
+    this.dragPointerId = null
+
+    const currentImage = this.imageTarget
+    const previousImage = this.dragPreviousImage
+    const nextImage = this.dragNextImage
+
+    if (Math.abs(offset) < 3) {
+      currentImage.style.transform = ''
+
+      previousImage?.remove()
+      nextImage?.remove()
+
+      this.dragPreviousImage = null
+      this.dragNextImage = null
+      this.isSliding = false
+
+      return
+    }
+
+    const finishDrag = (newIndex, activeImage) => {
+      currentImage.remove()
+
+      if (activeImage !== previousImage) {
+        previousImage?.remove()
+      }
+
+      if (activeImage !== nextImage) {
+        nextImage?.remove()
+      }
+
+      activeImage.classList.remove('image-lightbox__image--dragging')
+      activeImage.style.transition = ''
+      activeImage.style.transform = ''
+      activeImage.dataset.imageLightboxTarget = 'image'
+
+      this.currentIndex = newIndex
+      this.updateInformation()
+
+      this.dragPreviousImage = null
+      this.dragNextImage = null
+      this.isSliding = false
+    }
+
+    const resetDrag = () => {
+      if (reducedMotion) {
+        currentImage.style.transform = ''
+
+        previousImage?.remove()
+        nextImage?.remove()
+
+        this.dragPreviousImage = null
+        this.dragNextImage = null
+        this.isSliding = false
+
+        return
+      }
+
+      currentImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+      previousImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+      nextImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+      requestAnimationFrame(() => {
+        currentImage.style.transform = 'translateX(0)'
+        previousImage.style.transform = 'translateX(-100%)'
+        nextImage.style.transform = 'translateX(100%)'
+      })
+
+      currentImage.addEventListener(
+        'transitionend',
+        () => {
+          currentImage.style.transition = ''
+          currentImage.style.transform = ''
+
+          previousImage.remove()
+          nextImage.remove()
+
+          this.dragPreviousImage = null
+          this.dragNextImage = null
+          this.isSliding = false
+        },
+        { once: true }
+      )
+    }
+
+    if (Math.abs(offset) < threshold) {
+      this.isSliding = true
+      resetDrag()
+      return
+    }
+
+    this.isSliding = true
+
+    const newIndex =
+      offset < 0
+        ? (this.currentIndex + 1) % this.itemTargets.length
+        : (this.currentIndex - 1 + this.itemTargets.length) % this.itemTargets.length
+
+    const activeImage = offset < 0 ? nextImage : previousImage
+
+    if (reducedMotion) {
+      finishDrag(newIndex, activeImage)
+      return
+    }
+
+    currentImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+    previousImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+    nextImage.style.transition = 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1)'
+
+    if (offset < 0) {
+      requestAnimationFrame(() => {
+        currentImage.style.transform = 'translateX(-100%)'
+        nextImage.style.transform = 'translateX(0)'
+      })
+
+      nextImage.addEventListener('transitionend', () => finishDrag(newIndex, nextImage), { once: true })
+    } else {
+      requestAnimationFrame(() => {
+        currentImage.style.transform = 'translateX(100%)'
+        previousImage.style.transform = 'translateX(0)'
+      })
+
+      previousImage.addEventListener('transitionend', () => finishDrag(newIndex, previousImage), { once: true })
+    }
+  }
+
+  createDragImage(index, direction) {
+    const item = this.itemTargets[index]
+    const image = document.createElement('img')
+
+    image.src = item.dataset.imageLightboxUrl
+    image.alt = item.dataset.imageLightboxAlt || ''
+
+    image.className = ['image-lightbox__image', 'image-lightbox__image--dragging'].join(' ')
+
+    image.style.transform = direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)'
+
+    return image
+  }
+
+  slideTo(index, direction) {
+    if (this.isSliding) return
+
+    const nextItem = this.itemTargets[index]
+
+    if (!nextItem) return
+
+    this.isSliding = true
+
+    const currentImage = this.imageTarget
+    const nextImage = document.createElement('img')
+
+    nextImage.alt = nextItem.dataset.imageLightboxAlt || ''
+    nextImage.className = [
+      'image-lightbox__image',
+      'image-lightbox__image--sliding',
+      direction === 'next' ? 'image-lightbox__image--waiting-right' : 'image-lightbox__image--waiting-left'
+    ].join(' ')
+
+    nextImage.addEventListener(
+      'load',
+      () => {
+        this.stageTarget.appendChild(nextImage)
+
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            currentImage.classList.add(
+              'image-lightbox__image--sliding',
+              direction === 'next' ? 'image-lightbox__image--exit-left' : 'image-lightbox__image--exit-right'
+            )
+
+            nextImage.classList.remove('image-lightbox__image--waiting-right', 'image-lightbox__image--waiting-left')
+
+            nextImage.classList.add('image-lightbox__image--active')
+          })
+        })
+
+        const finishSlide = () => {
+          if (!currentImage.isConnected) return
+
+          currentImage.remove()
+
+          nextImage.classList.remove('image-lightbox__image--sliding', 'image-lightbox__image--active')
+
+          nextImage.dataset.imageLightboxTarget = 'image'
+
+          this.currentIndex = index
+          this.updateInformation()
+
+          this.isSliding = false
+        }
+
+        if (this.prefersReducedMotion()) {
+          finishSlide()
+        } else {
+          nextImage.addEventListener('transitionend', finishSlide, { once: true })
+        }
+      },
+      { once: true }
+    )
+
+    nextImage.src = nextItem.dataset.imageLightboxUrl
+  }
+
+  showCurrentImage() {
+    const item = this.itemTargets[this.currentIndex]
+
+    if (!item) return
+
+    this.imageTarget.src = item.dataset.imageLightboxUrl
+    this.imageTarget.alt = item.dataset.imageLightboxAlt || ''
+
+    this.updateInformation()
+  }
+
+  updateInformation() {
+    const item = this.itemTargets[this.currentIndex]
+
+    if (!item) return
+
+    if (this.hasCaptionTarget) {
+      this.captionTarget.textContent = item.dataset.imageLightboxAlt || ''
+    }
+
+    if (this.hasCounterTarget) {
+      this.counterTarget.textContent = `${this.currentIndex + 1} von ${this.itemTargets.length}`
+    }
+
+    const hasMultipleImages = this.itemTargets.length > 1
+
+    if (this.hasPreviousButtonTarget) {
+      this.previousButtonTarget.hidden = !hasMultipleImages
+    }
+
+    if (this.hasNextButtonTarget) {
+      this.nextButtonTarget.hidden = !hasMultipleImages
+    }
+  }
+}

data/lib/generators/b4um/install/templates/image_preview_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input', 'container', 'image']
+
+  preview() {
+    const file = this.inputTarget.files[0]
+
+    if (!file) {
+      this.clear()
+      return
+    }
+
+    if (!file.type.startsWith('image/')) {
+      this.clear()
+      return
+    }
+
+    const reader = new FileReader()
+
+    reader.onload = (event) => {
+      this.imageTarget.src = event.target.result
+      this.containerTarget.hidden = false
+    }
+
+    reader.readAsDataURL(file)
+  }
+
+  previewMultiple() {
+    const files = Array.from(this.inputTarget.files)
+
+    this.element.querySelectorAll('[data-image-preview-new]').forEach((image) => image.remove())
+
+    if (files.length === 0) {
+      return
+    }
+
+    files
+      .filter((file) => file.type.startsWith('image/'))
+      .forEach((file) => {
+        const reader = new FileReader()
+
+        reader.onload = (event) => {
+          const image = document.createElement('img')
+
+          image.src = event.target.result
+          image.alt = file.name
+          image.className = 'form-image-preview__image'
+          image.dataset.imagePreviewNew = ''
+
+          this.containerTarget.appendChild(image)
+          this.containerTarget.hidden = false
+        }
+
+        reader.readAsDataURL(file)
+      })
+  }
+
+  toggleRemoval(event) {
+    const item = event.currentTarget
+
+    const checkbox = item.querySelector('[data-image-preview-target="removeCheckbox"]')
+
+    if (!checkbox) return
+
+    checkbox.checked = !checkbox.checked
+
+    item.classList.toggle('form-image-preview__item--removed', checkbox.checked)
+
+    item.setAttribute('aria-pressed', checkbox.checked.toString())
+  }
+
+  toggleRemovalWithKeyboard(event) {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+
+    event.preventDefault()
+
+    this.toggleRemoval(event)
+  }
+
+  clear() {
+    this.imageTarget.removeAttribute('src')
+    this.containerTarget.hidden = true
+  }
+}

data/lib/generators/b4um/install/templates/navigation_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['menu', 'toggle']
+
+  toggle() {
+    const isOpen = this.element.classList.contains('navigation--open')
+
+    if (isOpen) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  open() {
+    this.element.classList.add('navigation--open')
+    this.toggleTarget.setAttribute('aria-expanded', 'true')
+  }
+
+  close() {
+    this.element.classList.remove('navigation--open')
+    this.toggleTarget.setAttribute('aria-expanded', 'false')
+  }
+}

data/lib/generators/b4um/install/templates/navigation_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module NavigationHelper
+  def navigation_link_to(name, path, controller: nil, action: nil)
+    classes = ["navigation__link"]
+
+    active =
+      if controller && action
+        controller_name == controller.to_s &&
+          action_name == action.to_s
+      elsif controller
+        controller_name == controller.to_s
+      else
+        current_page?(path)
+      end
+
+    classes << "navigation__link--active" if active
+
+    link_to(
+      name,
+      path,
+      class: classes,
+      data: { action: "click->navigation#close" }
+    )
+  end
+end

data/lib/generators/b4um/install/templates/sitemap_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['title']
+
+  connect() {
+    this.reset()
+  }
+
+  toggle(event) {
+    if (window.matchMedia('(min-width: 78rem)').matches) return
+
+    const title = event.currentTarget
+    const item = title.closest('.b4um-sitemap__item')
+
+    if (!item) return
+
+    const isOpen = title.getAttribute('aria-expanded') === 'true'
+
+    title.setAttribute('aria-expanded', String(!isOpen))
+    item.classList.toggle('is-open', !isOpen)
+  }
+
+  reset() {
+    const isDesktop = window.matchMedia('(min-width: 78rem)').matches
+
+    this.titleTargets.forEach((title) => {
+      title.setAttribute('aria-expanded', String(isDesktop))
+    })
+
+    this.element.querySelectorAll('.b4um-sitemap__item.is-open').forEach((item) => {
+      item.classList.remove('is-open')
+    })
+  }
+}

data/lib/generators/b4um/install/templates/theme_controller.js

@@ -0,0 +1,122 @@
+import { Controller } from '@hotwired/stimulus'
+
+const STORAGE_KEY = 'b4um-theme'
+const DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)'
+const THEMES = ['system', 'light', 'dark']
+
+export default class extends Controller {
+  static targets = ['menu', 'toggle', 'icon', 'option']
+
+  connect() {
+    this.systemTheme = window.matchMedia(DARK_MEDIA_QUERY)
+
+    this.handleSystemThemeChange = this.handleSystemThemeChange.bind(this)
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+
+    this.systemTheme.addEventListener('change', this.handleSystemThemeChange)
+    document.addEventListener('click', this.handleOutsideClick)
+    document.addEventListener('keydown', this.handleKeydown)
+
+    this.applyTheme()
+    this.close()
+  }
+
+  disconnect() {
+    this.systemTheme?.removeEventListener('change', this.handleSystemThemeChange)
+
+    document.removeEventListener('click', this.handleOutsideClick)
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+
+    if (this.menuTarget.hidden) {
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  select(event) {
+    const theme = event.currentTarget.dataset.themeValue
+
+    if (!THEMES.includes(theme)) return
+
+    if (theme === 'system') {
+      localStorage.removeItem(STORAGE_KEY)
+    } else {
+      localStorage.setItem(STORAGE_KEY, theme)
+    }
+
+    this.applyTheme()
+    this.close()
+  }
+
+  open() {
+    this.menuTarget.hidden = false
+    this.toggleTarget.setAttribute('aria-expanded', 'true')
+  }
+
+  close() {
+    this.menuTarget.hidden = true
+    this.toggleTarget.setAttribute('aria-expanded', 'false')
+  }
+
+  applyTheme() {
+    const preference = this.preference
+    const resolvedTheme = this.resolveTheme(preference)
+
+    document.documentElement.dataset.b4umTheme = resolvedTheme
+
+    this.updateOptions(preference)
+    this.updateIcon(resolvedTheme)
+  }
+
+  get preference() {
+    const storedTheme = localStorage.getItem(STORAGE_KEY)
+
+    return THEMES.includes(storedTheme) ? storedTheme : 'system'
+  }
+
+  resolveTheme(preference) {
+    if (preference === 'dark') return 'dark'
+    if (preference === 'light') return 'light'
+
+    return this.systemTheme.matches ? 'dark' : 'light'
+  }
+
+  updateOptions(preference) {
+    this.optionTargets.forEach((option) => {
+      const active = option.dataset.themeValue === preference
+
+      option.classList.toggle('is-active', active)
+      option.setAttribute('aria-checked', String(active))
+    })
+  }
+
+  updateIcon(theme) {
+    this.iconTarget.textContent = theme === 'dark' ? '☾' : '☀'
+  }
+
+  handleSystemThemeChange() {
+    if (this.preference !== 'system') return
+
+    this.applyTheme()
+  }
+
+  handleOutsideClick(event) {
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  handleKeydown(event) {
+    if (event.key !== 'Escape') return
+    if (this.menuTarget.hidden) return
+
+    this.close()
+    this.toggleTarget.focus()
+  }
+}