spree_admin 5.0.0.rc1

data/app/javascript/spree/admin/controllers/filters_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus";
+import DOMPurify from "dompurify"
+
+export default class extends Controller {
+  static targets = ["input", "badgesContainer", "badgeTemplate"];
+
+  static values = {
+    url: { type: String }
+  };
+
+  connect() {
+    this.inputTargets.forEach((input) => {
+      this.createBadgeFor(input);
+    });
+  }
+
+  createBadgeFor(input, tomSelect = false) {
+    if (
+      input.tagName === "SELECT" &&
+      input.dataset.selectTarget &&
+      !input.classList.contains("tomselected")
+    ) {
+      input.addEventListener("tomSelectInitialized", () => {
+        this.createBadgeFor(input, true);
+      });
+    } else if (input.value !== null && input.value.length !== 0) {
+      let labelEl;
+      if (tomSelect) {
+        labelEl = document.querySelector(`label[for="${input.id}-ts-control"]`);
+      } else {
+        labelEl = document.querySelector(`label[for="${input.id}"]`);
+      }
+
+      let label;
+      if (labelEl) {
+        label = labelEl.textContent;
+      } else if (input.dataset.badgeName) {
+        label = input.dataset.badgeName;
+      } else {
+        label = input.placeholder;
+      }
+
+      let ransackValue;
+      if (input.tagName === "SELECT") {
+        ransackValue = Array.from(input.selectedOptions)
+          .map((option) => option.text)
+          .join(", ");
+      } else {
+        ransackValue = input.value;
+      }
+
+      label = DOMPurify.sanitize(`${label.trim()}: ${ransackValue.trim()}`);
+
+      const newUrl = this.urlValue ? new URL(this.urlValue) : new URL(window.location.href);
+      const newSearchParams = newUrl.searchParams;
+      newSearchParams.delete(input.name);
+      newUrl.search = newSearchParams.toString();
+
+      const filterHTML = this.badgeTemplateTarget.innerHTML
+        .replace(/LABEL/g, label)
+        .replace(/DELETE_URL/g, newUrl.toString());
+
+      this.badgesContainerTarget.insertAdjacentHTML("beforeend", filterHTML);
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/font_picker_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus'
+import TomSelect from 'tom-select/dist/esm/tom-select.complete.js'
+
+export default class extends Controller {
+  static values = {
+    fontsFromGoogle: Array
+  }
+
+  connect() {
+    this.prepareLinkTag()
+    this.element.classList.remove('d-none')
+    this.tomSelect = new TomSelect(this.element, {
+      create: false,
+      maxOptions: 110,
+      render: {
+        item: (data, _escape) => {
+          return `<div style="font-family: '${data.text}'">${data.text}</div>`
+        },
+        option: (data, _escape) => {
+          return `<div style="font-family: '${data.text}'">${data.text}</div>`
+        }
+      }
+    })
+  }
+
+  disconnect() {
+    if (this.tomSelect) {
+      this.tomSelect.destroy()
+    }
+    if (this.linkEl) {
+      this.linkEl.remove()
+    }
+  }
+
+  prepareLinkTag() {
+    if (
+      typeof this.linkEl !== 'undefined' ||
+      !this.fontsFromGoogleValue.length ||
+      document.getElementById('font-picker-styles')
+    ) {
+      return
+    }
+    const fontsAsQueryString = this.fontsFromGoogleValue
+      .map((f) => f.replaceAll(' ', '+'))
+      .join('&family=')
+    const fontsUrl = `https://fonts.googleapis.com/css2?family=${fontsAsQueryString}&display=swap`
+
+    this.linkEl = document.createElement('link')
+    this.linkEl.id = 'font-picker-styles'
+    this.linkEl.href = fontsUrl
+    this.linkEl.rel = 'stylesheet'
+
+    document.head.appendChild(this.linkEl)
+  }
+}

data/app/javascript/spree/admin/controllers/media_form_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+import { destroy } from '@rails/request.js'
+
+export default class extends Controller {
+  static targets = ['checkbox', 'deleteButton']
+
+  static values = {
+    deleteUrl: String
+  }
+
+  deleteSelected = async (e) => {
+    const idsToDelete = this.checkboxTargets.filter((el) => el.checked).map((el) => el.value)
+
+    if (idsToDelete.length && window.confirm('Are you sure?')) {
+      this.deleteButtonTarget.disabled = true
+
+      const response = await destroy(this.deleteUrlValue, {
+        body: {
+          ids: idsToDelete
+        },
+        responseKind: 'turbo-stream'
+      })
+
+      if (response.ok) {
+        this.deleteButtonTarget.disabled = false
+        this.deleteButtonTarget.classList.add('d-none')
+      }
+    }
+  }
+
+  showDeleteButton = () => {
+    if (this.checkboxTargets.some((el) => el.checked)) {
+      this.deleteButtonTarget.classList.remove('d-none')
+    } else {
+      this.deleteButtonTarget.classList.add('d-none')
+    }
+  }
+}

data/app/javascript/spree/admin/controllers/multi_input_controller.js

@@ -0,0 +1,75 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['input']
+
+  static values = {
+    preloadedValues: Array
+  }
+
+  connect() {
+    this.element.reset = this.reset.bind(this)
+    this.element.values = this.values.bind(this)
+    this.element.setValues = this.setValues.bind(this)
+    this.lastInput = null
+    this.setValues(this.preloadedValuesValue)
+  }
+
+  reset() {
+    this.inputTargets.forEach((container, i) => {
+      if (i > 0) {
+        container.remove()
+      } else {
+        const input = container.querySelector('input')
+        input.value = ''
+      }
+    })
+    this.lastInput = this.inputTargets[0].querySelector('input')
+  }
+
+  values() {
+    return this.inputTargets
+      .map((c) => c.querySelector('input'))
+      .map((input) => input?.value)
+      .filter((value) => value?.length > 0)
+  }
+
+  setValues(values) {
+    this.reset()
+    values.forEach((value, i) => {
+      if (i > 0) {
+        this.addInput()
+      }
+      this.inputTargets[i].querySelector('input').value = value
+    })
+    if (this.inputTargets.length === values.length) this.addInput()
+  }
+
+  handleInput(event) {
+    if (event.target.value.length > 0 && (this.lastInput === event.target || this.inputTargets.length === 1)) {
+      this.addInput()
+    }
+  }
+
+  handleKeyDown(event) {
+    if (event.key === 'Backspace' && event.target.value.length === 0 && this.inputTargets.length > 1) {
+      const inputContainer = event.target.closest('[data-multi-input-target="input"]')
+      this.removeInput(inputContainer)
+    }
+  }
+
+  removeInput(input) {
+    if (this.inputTargets.length > 1) {
+      input.remove()
+    }
+  }
+
+  addInput() {
+    const inputToClone = this.inputTargets[this.inputTargets.length - 1]
+    const newInputTemplate = inputToClone.cloneNode(true)
+    newInputTemplate.querySelector('input').value = ''
+    const newInputContainer = inputToClone.insertAdjacentElement('afterend', newInputTemplate)
+    const newInput = newInputContainer.querySelector('input')
+    this.lastInput = newInput
+  }
+}

data/app/javascript/spree/admin/controllers/multi_tom_select_controller.js

@@ -0,0 +1,80 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['selectTemplate', 'select']
+
+  static values = {
+    preloadedValues: { type: Array, default: [] },
+    preloadedOptions: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.element.reset = this.reset.bind(this)
+    this.element.values = this.values.bind(this)
+    this.element.setValues = this.setValues.bind(this)
+
+    this.setValues(this.preloadedValuesValue)
+  }
+
+  reset(addBlankSelect = true) {
+    this.selectTargets.forEach((container) => container.remove())
+
+    if (addBlankSelect)
+      this.addSelect()
+  }
+
+  values() {
+    return this.selectTargets
+      .map((selectTarget) => selectTarget.querySelector('select'))
+      .map((select) => select.options[select.selectedIndex].text)
+      .filter((text) => text?.length > 0)
+  }
+
+  setValues() {
+    this.reset(false)
+    this.preloadedValuesValue.forEach((value) => this.addSelect(value))
+
+    if (this.selectTargets.length === this.preloadedValuesValue.length)
+      this.addSelect()
+  }
+
+  handleSelect(event) {
+    const ts = event.target.tomselect
+
+    if (ts && ts.getValue().length > 0 && (this.lastSelect === event.target || this.selectTargets.length === 1)) {
+      this.addSelect()
+    } else if (ts && ts.getValue().length === 0 && this.selectTargets.length > 1) {
+      const inputContainer = event.target.closest('[data-multi-tom-select-target="select"]')
+      this.removeSelect(inputContainer)
+    }
+  }
+
+  removeSelect(container) {
+    if (this.selectTargets.length > 1) {
+      const select = container.querySelector('select')
+      select.tomselect?.destroy()
+      container.remove()
+    }
+  }
+
+  addSelect(value = null) {
+    const newTomSelectTag = this.selectTemplateTarget.cloneNode(true)
+
+    newTomSelectTag.setAttribute('data-select-options-value', JSON.stringify(this.preloadedOptionsValue))
+
+    if (value)
+      newTomSelectTag.setAttribute('data-select-active-option-value', value.id)
+
+    newTomSelectTag.setAttribute('data-multi-tom-select-target', 'select')
+    newTomSelectTag.setAttribute('data-controller', 'select')
+
+    if (this.hasSelectTargets) {
+      const lastSelect = this.selectTargets[this.selectTargets.length - 1]
+      lastSelect.insertAdjacentElement('afterend', newTomSelectTag)
+    } else {
+      this.element.insertAdjacentElement('beforeend', newTomSelectTag)
+    }
+
+    this.lastSelect = newTomSelectTag.querySelector('select')
+  }
+}

data/app/javascript/spree/admin/controllers/order_billing_address_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.target.required) {
+          mutation.target.disabled = true
+        }
+      })
+    })
+
+    this.hideForms()
+    const selectedBillingAddressType = this.element.querySelector('[name="billing_address_type"]:checked')
+
+    if (selectedBillingAddressType) {
+      const selectedBillingAddressTypeFormName = selectedBillingAddressType.dataset.orderBillingAddressFormNameParam
+      if (selectedBillingAddressTypeFormName) {
+        this.showForm({ params: { formName: selectedBillingAddressTypeFormName } })
+      }
+    }
+  }
+
+  showForm({ params: { formName } }) {
+    this.hideForms()
+    this.observer.disconnect()
+
+    const form = this.element.querySelector(`[data-form="${formName}"]`)
+    form.classList.remove('d-none')
+    form.querySelectorAll('input:required, select:required').forEach((input) => (input.disabled = false))
+  }
+
+  hideForms() {
+    this.observer.observe(this.element, { subtree: true, attributes: true, attributeFilter: ['required'] })
+
+    this.element.querySelectorAll('[data-form]').forEach((form) => form.classList.add('d-none'))
+    this.element.querySelectorAll('input:required, select:required').forEach((input) => (input.disabled = true))
+  }
+}

data/app/javascript/spree/admin/controllers/page_builder_controller.js

@@ -0,0 +1,316 @@
+import { Controller } from '@hotwired/stimulus'
+export default class extends Controller {
+  static targets = [
+    'form',
+    'fontForm',
+    'previewContainer',
+    'iframe',
+    'sidebar',
+    'sidebarIcon',
+    'desktopButton',
+    'mobileButton'
+  ]
+
+  static values = {
+    previewUrl: String
+  }
+
+  connect() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.removeOverlays()
+      this.initializeOverlays()
+    })
+    this.setResponsiveBreakpoint()
+  }
+
+  disconnect() {
+    this.resizeObserver.disconnect()
+  }
+
+  initialize() {
+    this.loadPreview()
+  }
+
+  loadPreview() {
+    if (this.previewUrlValue) {
+      this.iframeTarget.src = this.previewUrlValue
+    }
+  }
+
+  initializeVisualEditor() {
+    this.iframeDocument = this.iframeTarget.contentDocument
+    this.iframeWindow = this.iframeTarget.contentWindow
+
+    this.iframeDocument.addEventListener('turbo:frame-render', (event) => {
+      const url = new URL(event.detail.fetchResponse.response.url)
+      const activeOverlayId = url.searchParams.get('editor_id')
+
+      this.resizeObserver.observe(this.iframeDocument.body)
+
+      this.removeOverlays()
+      this.initializeOverlays(activeOverlayId)
+    })
+
+    this.iframeDocument.addEventListener('turbo:load', (event) => {
+      const url = new URL(event.detail.url)
+      const activeOverlayId = url.searchParams.get('editor_id')
+
+      this.resizeObserver.observe(this.iframeDocument.body)
+
+      this.removeOverlays()
+      this.initializeOverlays(activeOverlayId)
+    })
+
+    this.resizeObserver.observe(this.iframeDocument.body)
+
+    this.removeOverlays()
+    this.initializeOverlays()
+  }
+
+  removeOverlays() {
+    const overlays = this.iframeDocument.querySelectorAll('.editor-overlay')
+    overlays.forEach((el) => el.remove())
+  }
+
+  initializeOverlays(activeOverlayId = null) {
+    const elements = this.iframeDocument.querySelectorAll('[data-editor-id]')
+    elements.forEach((el) => this.initializeOverlay(el, activeOverlayId === el.dataset.editorId))
+  }
+
+  showSectionsSidebar() {
+    const button = document.getElementById('show-sections-sidebar')
+    if (button) {
+      button.click()
+      button.classList.remove('active')
+    }
+  }
+
+  initializeOverlay(el, isActive = false) {
+    const overlay = this.iframeDocument.createElement('div')
+    const id = el.dataset.editorId
+    const parentId = el.dataset.editorParentId || null // this is only present for blocks, not sections
+    const link = el.dataset.editorLink
+    overlay.classList.add('editor-overlay')
+    overlay.dataset.editorId = id
+
+    if (parentId) {
+      const parent = this.iframeDocument.querySelector(`[data-editor-id="${parentId}"]`)
+      if (parent) {
+        parent.parentNode.appendChild(overlay)
+      }
+    } else {
+      el.parentNode.appendChild(overlay)
+    }
+    let zIndex = 1088 // sections have 1088, blocks have 1089, links have 1090
+
+    switch (true) {
+      case id.startsWith('block'):
+        zIndex = 1089
+        break
+      case id.startsWith('link'):
+        zIndex = 1090
+        break
+    }
+
+    overlay.style.zIndex = zIndex
+
+    const { left, top } = el.getBoundingClientRect()
+    overlay.style.position = 'absolute'
+    overlay.style.top = `${top + this.iframeWindow.scrollY}px`
+    overlay.style.left = `${left + this.iframeWindow.scrollX}px`
+    overlay.style.width = `${el.offsetWidth}px`
+    overlay.style.height = `${el.offsetHeight}px`
+
+    overlay.addEventListener('click', (_event) => {
+      this.clearActiveOverlays()
+      this.iframeWindow.makeOverlayActive(id)
+      window.top.document.getElementById('page_sidebar').src = link
+      this.showSectionsSidebar()
+    })
+
+    const editorToolbar = document.getElementById('editor-toolbar-' + id)
+    if (editorToolbar) {
+      const overlayToolbar = this.iframeDocument.createElement('div')
+      overlayToolbar.classList.add('editor-overlay-toolbar')
+      overlayToolbar.innerHTML = editorToolbar.innerHTML
+      overlay.appendChild(overlayToolbar)
+
+      const toolbarHigher = overlayToolbar.querySelector(
+        '.editor-toolbar-higher'
+      )
+      const toolbarLower = overlayToolbar.querySelector('.editor-toolbar-lower')
+      const toolbarEdit = overlayToolbar.querySelector('.editor-toolbar-edit')
+      const toolbarDelete = overlayToolbar.querySelector(
+        '.editor-toolbar-delete'
+      )
+
+      if (toolbarHigher) {
+        toolbarHigher.addEventListener('click', (event) => {
+          event.stopPropagation()
+          const moveButton = document.getElementById(
+            'editor-toolbar-higher-' + id
+          )
+          if (moveButton) moveButton.click()
+
+          // this is only needed for sections, not blocks
+          if (!parentId) {
+            const turboFrame = el.parentNode
+            if (turboFrame) {
+              turboFrame.previousSibling.before(turboFrame)
+              this.iframeWindow.scrollToOverlay(overlay)
+            }
+          } else {
+            el.parentNode.insertBefore(el, el.previousSibling)
+          }
+          this.removeOverlays()
+          this.initializeOverlays()
+        })
+      }
+      if (toolbarLower) {
+        toolbarLower.addEventListener('click', (event) => {
+          event.stopPropagation()
+          const moveButton = document.getElementById(
+            'editor-toolbar-lower-' + id
+          )
+          if (moveButton) moveButton.click()
+
+          // this is only needed for sections, not blocks
+          if (!parentId) {
+            const turboFrame = el.parentNode
+            if (turboFrame) {
+              turboFrame.nextSibling.after(turboFrame)
+              this.iframeWindow.scrollToOverlay(overlay)
+            }
+          } else {
+            el.parentNode.insertBefore(el.nextSibling, el)
+          }
+          this.removeOverlays()
+          this.initializeOverlays()
+        })
+      }
+      if (toolbarEdit) {
+        toolbarEdit.addEventListener('click', (event) => {
+          event.stopPropagation()
+          this.clearActiveOverlays()
+          this.iframeWindow.makeOverlayActive(id)
+          window.top.document.getElementById('page_sidebar').src = link
+          this.showSectionsSidebar()
+          this.showSidebarMobile()
+        })
+      }
+      if (toolbarDelete) {
+        toolbarDelete.addEventListener('click', (event) => {
+          event.stopPropagation()
+          const deleteButton = document.getElementById(
+            'editor-toolbar-delete-' + id
+          )
+          if (deleteButton) deleteButton.click()
+        })
+      }
+
+      if (isActive) this.iframeWindow.makeOverlayActive(id)
+    }
+
+    overlay.addEventListener('mouseenter', (_event) => {
+      const sidebarElement = document.querySelector(
+        '[data-page-builder-editor-id-param="' + id + '"]'
+      )
+      if (sidebarElement) sidebarElement.classList.add('hover')
+    })
+    overlay.addEventListener('mouseout', (_event) => {
+      const sidebarElement = document.querySelector(
+        '[data-page-builder-editor-id-param="' + id + '"]'
+      )
+      if (sidebarElement) sidebarElement.classList.remove('hover')
+    })
+  }
+
+  clearActiveOverlays(event) {
+    if (event?.currentTarget?.classList.contains('back')) {
+      this.hideSidebarMobile()
+    }
+
+    this.iframeDocument
+      .querySelectorAll('.editor-overlay')
+      .forEach((overlayEl) => {
+        overlayEl.classList.remove('editor-overlay-active')
+        overlayEl.classList.remove('editor-overlay-hover')
+      })
+  }
+
+  makeOverlayActive(event) {
+    this.showSectionsSidebar() // making sure the page sidebar is open
+    const editorId = event.params.editorId
+    this.clearActiveOverlays()
+    this.iframeWindow.makeOverlayActive(editorId)
+  }
+
+  toggleHighlightElement(event) {
+    const editorId = event.params.editorId
+    if (this.iframeWindow) this.iframeWindow.toggleHighlightElement(editorId)
+  }
+
+  refreshPreview(_event) {
+    // save the preview and re-render iframe
+    this.formTarget.requestSubmit()
+  }
+
+  refreshFontPreview(_event) {
+    // save the preview and re-render iframe
+    this.fontFormTarget.requestSubmit()
+  }
+
+  setResponsiveBreakpoint(event) {
+    event?.preventDefault()
+
+    const view = event ? event?.params.breakpoint : sessionStorage.getItem('breakpoint');
+
+    if (view === 'desktop') {
+      sessionStorage.setItem('breakpoint', 'desktop');
+
+      this.previewContainerTarget.classList.remove('mobileLiveView')
+      this.previewContainerTarget.classList.add('desktopLiveView')
+      this.desktopButtonTarget.classList.add('active')
+      this.mobileButtonTarget.classList.remove('active')
+    } else {
+      sessionStorage.setItem('breakpoint', 'mobile');
+
+      this.previewContainerTarget.classList.remove('desktopLiveView')
+      this.previewContainerTarget.classList.add('mobileLiveView')
+      this.desktopButtonTarget.classList.remove('active')
+      this.mobileButtonTarget.classList.add('active')
+    }
+  }
+
+  addSection(event) {
+    event.stopPropagation()
+
+    this.showSectionsSidebar()
+
+    window.top.document.getElementById(
+      'page_sidebar'
+    ).src = `${window.top.location.origin}/admin/page_previews/id/sections/new`
+
+    this.showSidebarMobile()
+  }
+
+  showSidebarMobile(event) {
+    if (event?.currentTarget?.classList.contains('from-hamburger')) {
+      ;[...event.currentTarget.parentNode.children].forEach((el) => {
+        if (event.currentTarget !== el) el.classList.remove('active')
+      })
+      document.querySelector('.mobile-hamburger').click()
+    }
+
+    document.body.classList.add('mobile_sidebar_open')
+  }
+
+  hideSidebarMobile() {
+    document.body.classList.remove('mobile_sidebar_open')
+  }
+
+  deleteCallback() {
+    this.removeOverlays()
+    this.initializeOverlays()
+  }
+}

data/app/javascript/spree/admin/controllers/password_toggle_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["unhide"]
+
+  password(e) {
+    if (this.unhideTarget.type === "password") {
+      this.unhideTarget.type = "text"
+    } else {
+      this.unhideTarget.type = "password"
+    }
+  }
+}
+