maglevcms 2.1.0 → 3.0.0.beta1

data/app/components/maglev/uikit/form/combobox_controller.js

@@ -0,0 +1,385 @@
+import { Controller } from '@hotwired/stimulus'
+import { useDebounce } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ["input", "hiddenInput", "hiddenLabelInput", "list", "option", "spinner", "clearButton"]
+  static values = { url: String, turboFrameName: String, clearable: Boolean, spreadFields: Boolean }
+  static debounces = ['remoteFilter']
+
+  connect() {
+    this.selectedIndex = -1
+    this.highlightedIndex = -1
+    this.selectedLabel = null
+
+    this.selectItemAtStartup()
+
+    useDebounce(this)
+  }  
+
+  disconnect() {
+    if (this.mouseoverBlockedId) clearTimeout(this.mouseoverBlockedId)
+    this.teardownObserver()
+  }  
+
+  optionTargetConnected(option) {
+    this.getObserver().observe(option)
+  }
+
+  optionTargetDisconnected(option) {
+    this.getObserver().unobserve(option)
+  }
+
+  observeOptions(entries, _observer) {
+    entries.forEach((entry) => {
+      entry.target.selectField = { 
+        scrollTop: entry.boundingClientRect.height - entry.intersectionRect.height 
+      }      
+    })
+  }
+
+  choose(event) {
+    const index = parseInt(event.currentTarget.dataset.index)
+    
+    this.selectItem(index)
+  }
+
+  focusout(event) {
+    if (this.listTarget.contains(event.relatedTarget)) return
+
+    if (this.selectedIndex === -1 && this.inputTarget.value.length === 0) 
+      this.reset()
+    else if (this.selectedIndex !== -1) {
+      this.inputTarget.value = this.getLabel(this.selectedIndex)
+    } else {
+      this.inputTarget.value = this.selectedLabel
+    }   
+  }
+
+  filter(event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === 'Escape') return
+
+    const query = this.inputTarget.value
+
+    if (query.length === 0) {      
+      this.reset()
+      return
+    }
+
+    if (this.urlValue)
+      this.remoteFilter()
+    else
+      this.localFilter(query)
+  }
+
+  localFilter(query) {
+    let atLeastOneVisible = false
+
+    this.optionTargets.forEach((option) => {
+      const label = option.dataset.label.trim()
+      if (label.toLowerCase().includes(query.toLowerCase())) {
+        option.classList.remove('hidden')
+        atLeastOneVisible = true
+      } else
+        option.classList.add('hidden')
+    })
+
+    if (atLeastOneVisible) {
+      this.highlightFirstItem()
+      this.open()
+    } else {
+      this.close()
+    }
+  }
+
+  remoteFilter() {
+    this.spinnerTarget.classList.remove('hidden')
+
+    // clean the state for the next list of results
+    this.highlightedIndex = -1
+    this.selectedIndex = -1    
+    
+    fetch(this.buildURL(), { headers: { Accept: "text/vnd.turbo-stream.html" } })
+    .then(response => {
+      const numberOfOptions = parseInt(response.headers.get('X-Select-Options-Size') ?? '0')
+      if (numberOfOptions > 0) 
+        this.open() 
+      else 
+        this.close()
+      return response
+    })
+    .then(response => response.text())
+    .then(html => Turbo.renderStreamMessage(html))
+    .then(() => this.spinnerTarget.classList.add('hidden'))
+  }
+
+  mouseover(event) {
+    event.stopPropagation() & event.preventDefault()
+
+    if (this.mouseoverBlocked) return
+
+    const option = event.currentTarget
+    const index = parseInt(option.dataset.index)
+
+    this.highlightItem(index)
+  }   
+
+  handleKeydown(event) {
+    if (event.key === 'ArrowDown') {
+      this.handleArrowDownKeydown(event)
+    } else if (event.key === 'ArrowUp') {
+      this.handleArrowUpKeydown(event)      
+    } else if (event.key === 'Enter') {
+      this.handleEnterKeydown(event)
+    } else if (event.key === 'Escape' || event.key === 'Tab') {
+      this.close()
+    }
+  }
+
+  handleArrowUpKeydown(event) {
+    event.preventDefault() & event.stopPropagation()
+
+    if (!this.hasOptions()) return
+
+    if (this.isOpen())
+      this.highlightPreviousItem()
+    else 
+      this.open()
+  }
+
+  handleArrowDownKeydown(event) {
+    event.preventDefault() & event.stopPropagation()
+
+    if (!this.hasOptions()) return
+
+    if (this.isOpen())
+      this.highlightNextItem()
+    else if (this.selectedIndex !== -1) {
+      this.highlightItem(this.selectedIndex)
+      this.open()
+    } else {
+      this.highlightFirstItem()
+      this.open()
+    }
+  }
+
+  handleEnterKeydown(event) {
+    if (!this.isOpen()) return
+
+    event.preventDefault() & event.stopPropagation()
+
+    this.selectCurrentItem()
+    this.focus()
+
+    // only keep the selected item highlighted 
+    if (this.urlValue) {
+      this.optionTargets.forEach((option) => {
+        if (option.dataset.id !== this.hiddenInputTarget.value)
+          option.classList.add('hidden')
+      })
+    }
+  }
+
+  isOpen() {
+    return !this.listTarget.classList.contains("hidden")
+  }
+
+  open() {
+    this.dispatch('showResults')
+    this.listTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.dispatch('hideResults')
+    this.listTarget.classList.add("hidden")
+  }
+
+  focus() {
+    this.inputTarget.focus()
+    this.inputTarget.setSelectionRange(-1, -1)
+  }
+
+  toggle() {
+    this.focus()
+    this.dispatch('toggleResults')
+    this.listTarget.classList.toggle("hidden")
+  }
+
+  highlightFirstItem() {
+    const index = this.findFirstVisibleItem()
+    if (index === null) return
+    this.highlightItem(index)
+  }
+
+  highlightNextItem() {
+    if (this.highlightedIndex >= this.optionTargets.length - 1) return
+    const nextIndex = this.findNextVisibleItem(this.highlightedIndex)
+    if (nextIndex === null) return
+    this.highlightItem(nextIndex, 'down')
+  }
+
+  highlightPreviousItem() {
+    if (this.highlightedIndex <= 0) return
+    const previousIndex = this.findPreviousVisibleItem(this.highlightedIndex)
+    if (previousIndex === null) return
+    this.highlightItem(previousIndex, 'up')
+  }
+
+  highlightItem(index, direction) {
+    this.unlighlightCurrentItem()
+
+    const option = this.optionTargets[index]
+    option.dataset.focus = true
+
+    if (direction && option.selectField) {
+      const scrollTop = option.selectField.scrollTop * (direction === 'up' ? -1 : 1)
+
+      this.blockMouseover()
+
+      this.listTarget.scrollTop += scrollTop      
+    }
+
+    this.highlightedIndex = index
+  }
+
+  unlighlightCurrentItem() {
+    if (this.highlightedIndex === -1) return
+   
+    const option = this.optionTargets[this.highlightedIndex]
+    delete option.dataset.focus
+  }
+
+  selectCurrentItem() {
+    this.selectItem(this.highlightedIndex)
+  }
+
+  selectItem(index) {
+    if (index === -1) return
+
+    this.unselectItem(this.selectedIndex)
+
+    const option = this.optionTargets[index]
+    option.dataset.selected = true
+
+    this.inputTarget.value = this.getLabel(index)    
+    this.hiddenInputTarget.value = option.dataset.id
+
+    if (this.spreadFieldsValue) {
+      this.hiddenLabelInputTarget.value = this.getLabel(index)
+    }
+
+    if (this.clearableValue) {
+      this.clearButtonTarget.classList.remove('hidden')
+    }
+
+    this.selectedLabel = this.getLabel(index)
+    this.selectedIndex = index
+
+    this.close()
+    this.notifyChange()
+  }
+
+  notifyChange() {
+    const value = this.spreadFieldsValue ? {
+      id: this.hiddenInputTarget.value,
+      label: this.inputTarget.value,
+    } : this.hiddenInputTarget.value
+
+    this.dispatch('change', { detail: { value } })
+  }
+
+  selectItemAtStartup() {
+    const selectedId = this.hiddenInputTarget.value
+    if (selectedId) {
+      const index = this.optionTargets.findIndex((option) => option.dataset.id === selectedId)
+      this.selectedLabel = this.inputTarget.value
+      this.selectItem(index)
+    }
+  }
+
+  unselectItem(index) {
+    if (index === -1) return
+    const option = this.optionTargets[index]
+    delete option.dataset.selected
+  }
+
+  findFirstVisibleItem() {
+    for (let i = 0; i < this.optionTargets.length; i++) {
+      if (!this.optionTargets[i].classList.contains('hidden')) return i
+    }
+    return null
+  }
+
+  findNextVisibleItem(index) {
+    for (let i = index + 1; i < this.optionTargets.length; i++) {
+      if (!this.optionTargets[i].classList.contains('hidden')) return i
+    }
+    return null
+  }
+
+  findPreviousVisibleItem(index) {
+    for (let i = index - 1; i >= 0; i--) {
+      if (!this.optionTargets[i].classList.contains('hidden')) return i
+    }
+    return null
+  }
+
+  getLabel(index) {
+    return this.optionTargets[index].dataset.label.trim()
+  }
+
+  hasOptions() {
+    return this.optionTargets.length > 0
+  }
+
+  reset() {
+    this.inputTarget.value = ''
+    this.hiddenInputTarget.value = ''
+    this.unselectItem(this.selectedIndex)
+    
+    this.optionTargets.forEach(option => option.classList.add('hidden'))
+    
+    if (this.spreadFieldsValue) {
+      this.hiddenLabelInputTarget.value = ''
+    }
+        
+    if (this.clearableValue) {
+      this.clearButtonTarget.classList.add('hidden')
+    }
+    
+    this.selectedIndex = -1
+    this.selectedLabel = null
+
+    this.close()
+    this.notifyChange()
+  }
+
+  buildURL() {
+    const url = new URL(this.urlValue, window.location.origin)
+    url.searchParams.set('query', this.inputTarget.value)
+    url.searchParams.set('turbo_frame', this.turboFrameNameValue)
+    return url.toString()
+  }
+
+  blockMouseover() {
+    this.mouseoverBlocked = true
+    if (this.mouseoverBlockedId) clearTimeout(this.mouseoverBlockedId)
+    this.mouseoverBlockedId = setTimeout(() => this.mouseoverBlocked = false, 200)
+  }
+
+  getObserver() {
+    if (this.observer) return this.observer
+    this.observer = new IntersectionObserver(this.observeOptions, {
+      root: this.listTarget,
+      rootMargin: '0px',
+      threshold: [0, 0.25, 0.5, 0.75, 1]
+    });
+    return this.observer
+  }
+
+  teardownObserver() {
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
+  }
+}

data/app/components/maglev/uikit/form/icon_field_component.html.erb

@@ -0,0 +1,76 @@
+<%= tag.div(
+  class: class_names(
+    'group/icon space-y-1 flex flex-col',
+    'none': blank?
+  ),
+  data: {
+    controller: 'uikit-form-icon-field',
+    'uikit-form-icon-field-search-path-value': search_path,
+    'uikit-form-icon-field-icon-value': value,
+    action: %(
+      dispatcher:icon-selected-#{dom_id}@window->uikit-form-icon-field#onIconSelected
+    )
+  }
+) do %>
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800 flex items-center gap-2">
+    <span><%= label %></span>
+    <% if error %>
+      <span class="text-red-700 bg-red-100 text-xs py-1 px-3 rounded"><%= error %></span>
+    <% end %>
+  </label>
+
+  <%= hidden_field_tag name, value, data: { uikit_form_icon_field_target: "hiddenInput" } %>
+
+  <div class="hidden group-[.none]/icon:flex items-center justify-center bg-gray-100 h-24 rounded">
+    <button type="button"class="flex items-center justify-center flex-col cursor-pointer" data-action="click->uikit-form-icon-field#openPicker">
+      <%= render Maglev::Uikit::IconComponent.new(name: 'book', size: '1.25rem', class_names: 'text-gray-800') %>
+      <span class="uppercase text-xs mt-1"><%= t('maglev.editor.icon_input.add_button') %></span>
+    </button>
+  </div>
+
+  <div 
+    class="flex group-[.none]/icon:hidden items-center justify-center bg-gray-100 h-24 rounded relative" 
+    data-controller="transition"
+    data-action="mouseenter->transition#enter mouseleave->transition#leave"
+  >
+    <%= tag.div(
+      class: class_names('text-6xl text-gray-800 font-bold', value),
+      data: { uikit_form_icon_field_target: "icon" }
+    ) %>
+
+    <div
+      class="flex items-center justify-center py-3 px-2 absolute bg-black/75 bottom-0 w-full text-white text-xs cursor-default rounded-b hidden"
+      data-transition-target="revealable"
+      data-transition-enter="ease-out duration-100"
+      data-transition-enter-start="translate-y-4 opacity-0"
+      data-transition-enter-end="translate-y-0 opacity-100"
+      data-transition-leave="ease-in duration-100"
+      data-transition-leave-start="translate-y-0 opacity-100"
+      data-transition-leave-end="translate-y-4 opacity-0"
+    >
+      <div class="flex items-center gap-6">
+        <button 
+          type="button" 
+          class="flex items-center justify-center flex-col cursor-pointer" 
+          data-action="click->uikit-form-icon-field#openPicker"
+        >
+          <%= render Maglev::Uikit::IconComponent.new(name: 'book') %>
+          <span class="uppercase text-xs mt-1">
+            <%= t('maglev.editor.icon_input.replace_button') %>
+          </span>
+        </button>
+
+        <button
+          type="button"
+          class="flex items-center justify-center flex-col cursor-pointer"
+          data-action="click->uikit-form-icon-field#clear"
+        >
+          <%= render Maglev::Uikit::IconComponent.new(name: 'eraser') %>
+          <span class="uppercase text-xs mt-1">
+            <%= t('maglev.editor.icon_input.clear_button') %>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/maglev/uikit/form/icon_field_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class IconFieldComponent < Maglev::Uikit::BaseComponent
+        attr_reader :name, :options, :search_path
+
+        def initialize(name:, search_path:, options:)
+          @name = name
+          @options = options
+          @search_path = search_path
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def label
+          options[:label]
+        end
+
+        def value
+          options[:value]
+        end
+
+        def error
+          options[:error]
+        end
+
+        delegate :blank?, to: :value
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/form/icon_field_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['icon', 'hiddenInput']
+  static values = { searchPath: String, icon: String }
+
+  focus() {
+    this.openPicker()
+  }
+
+  openPicker() {
+    const frame = document.querySelector('turbo-frame[id="modal"]')
+    frame.src = this.searchPathValue
+  }
+
+  onIconSelected(event) {
+    const icon = event.detail.icon
+    
+    this.hiddenInputTarget.value = icon  
+
+    if (this.iconTarget.classList.contains(this.iconValue)) {
+      this.iconTarget.classList.remove(this.iconValue)
+    }
+    this.iconTarget.classList.add(icon)
+
+    this.element.classList.remove('none')
+
+    this.iconValue = icon
+
+    this.dispatch('change', { detail: { value: icon }})
+  }
+
+  clear() {
+    this.hiddenInputTarget.value = ''
+    this.element.classList.add('none')
+    this.dispatch('change', { detail: { value: null }})
+  }
+}

data/app/components/maglev/uikit/form/image_field_component.html.erb

@@ -0,0 +1,101 @@
+<%= tag.div(
+  class: class_names('group/image', 'none': blank?),
+  data: {
+    controller: 'uikit-form-image-field',
+    'uikit-form-image-field-search-path-value': search_path,
+    'uikit-form-image-field-spread-fields-value': spread_fields?,
+    action: %(
+      dispatcher:image-selected-#{dom_id}@window->uikit-form-image-field#onImageSelected
+    )
+  }
+) do %>
+  <label for="<%= dom_id %>" class="block font-semibold text-gray-800" data-action="click->uikit-form-image-field#focus">
+    <%= label %>
+  </label>
+  <div class="mt-1">
+    <% if spread_fields? %>
+      <% hidden_input_names.each do |key, input_name| %>
+        <%= hidden_field_tag input_name, 
+          value&.fetch(key.to_sym, nil), 
+          data: { 
+            uikit_form_image_field_target: "hidden#{key.camelize}Input" 
+          } %>      
+      <% end %>
+    <% else %>
+      <%= hidden_field_tag name, value, data: { uikit_form_image_field_target: "hiddenUrlInput" } %>
+    <% end %>
+
+    <div class="hidden group-[.none]/image:block">
+      <div class="flex items-center justify-center bg-gray-100 h-48 rounded">
+        <button type="button"class="flex items-center justify-center flex-col cursor-pointer" data-action="click->uikit-form-image-field#openPicker">
+          <%= render Maglev::Uikit::IconComponent.new(name: 'camera') %>
+
+          <p class="uppercase text-xs mt-1">
+            <%= t('maglev.uikit.form.image_field.add_button') %>
+          </p>
+        </button>
+      </div>
+    </div>
+
+    <div class="block group-[.none]/image:hidden" data-controller="transition">
+      <div class="relative bg-checkerboard h-48 rounded overflow-hidden" data-action="mouseenter->transition#enter mouseleave->transition#leave">
+        <img 
+          src="<%= image_url %>" 
+          class="h-full w-full object-contain rounded" 
+          data-controller="broken-image"
+          data-uikit-form-image-field-target="image"
+        />
+        <div
+          class="flex items-center justify-center py-3 px-2 absolute bg-black/75 bottom-0 w-full text-white text-xs cursor-default rounded-b hidden"
+          data-transition-target="revealable"
+          data-transition-enter="ease-out duration-100"
+          data-transition-enter-start="translate-y-4 opacity-0"
+          data-transition-enter-end="translate-y-0 opacity-100"
+          data-transition-leave="ease-in duration-100"
+          data-transition-leave-start="translate-y-0 opacity-100"
+          data-transition-leave-end="translate-y-4 opacity-0"
+        >
+          <div class="flex items-center gap-6">
+            <button 
+              type="button" 
+              class="flex items-center justify-center flex-col cursor-pointer" 
+              data-action="click->uikit-form-image-field#openPicker"
+            >
+              <%= render Maglev::Uikit::IconComponent.new(name: 'camera') %>
+              <span class="uppercase text-xs mt-1">
+                <%= t('maglev.uikit.form.image_field.replace_button') %>
+              </span>
+            </button>
+
+            <button
+              type="button"
+              class="flex items-center justify-center flex-col cursor-pointer"
+              data-action="click->uikit-form-image-field#clear"
+            >
+              <%= render Maglev::Uikit::IconComponent.new(name: 'eraser') %>
+              <span class="uppercase text-xs mt-1">
+                <%= t('maglev.uikit.form.image_field.clear_button') %>
+              </span>
+            </button>            
+          </div>
+        </div>
+      </div>
+
+      <% if alt_text? %>
+        <div class="space-y-1 flex flex-col mt-2">
+          <input 
+            name="<%= alt_text[:name] %>"
+            value="<%= alt_text[:value] %>"
+            type="text" 
+            placeholder="<%= alt_text[:placeholder] || t('maglev.uikit.form.image_field.alt_text_placeholder') %>"
+            autocomplete="off" 
+            class="block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500"
+            data-uikit-form-image-field-target="hiddenAltTextInput"
+            data-action="input->uikit-form-image-field#onChangeAltText"
+            <%= tag.attributes(alt_text[:html_options]) %>
+          >
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/maglev/uikit/form/image_field_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Form
+      class ImageFieldComponent < Maglev::Uikit::BaseComponent
+        attr_reader :label, :name, :search_path, :alt_text
+
+        def initialize(name:, search_path:, options:, alt_text: nil)
+          @name = name
+          @search_path = search_path
+          @value = options[:value]
+          @label = options[:label]
+          @alt_text = alt_text
+          @spread_fields = options[:spread_fields] || false
+        end
+
+        def alt_text?
+          alt_text.present?
+        end
+
+        def dom_id
+          name.to_s.parameterize.underscore
+        end
+
+        def spread_fields?
+          @spread_fields
+        end
+
+        def value
+          return @value unless spread_fields?
+
+          @value.is_a?(Hash) ? @value.compact_blank : { url: @value }
+        end
+
+        def image_url
+          spread_fields? ? value[:url] : value
+        end
+
+        def hidden_input_names
+          return [] unless spread_fields?
+
+          %w[id url filename width height byte_size].index_with do |key|
+            "#{name}[#{key}]"
+          end
+        end
+
+        delegate :blank?, to: :value
+      end
+    end
+  end
+end