Extracting parts of forms into Unpoly modals/popups

Copy%form{ action: my_filter_path, class: 'filter-form', 'up-history': true, 'up-target': '.filter-form, .result-list' }
  %input(type='text' name='query' placeholder='Search...')

  %div(filter-popup)
    # Trigger button for the popup
    %a{ class: 'btn btn-secondary', 'filter-popup-button': '', role: 'button' }

    # The content of the popup form
    .filter-content(filter-popup-content)
      # Your form inputs, nested and styled in filter groups as you wish
      %input(type='checkbox' name='locked')
      # ...
   
      %a{ class: 'btn btn-secondary', role: 'button', 'up-dismiss': true }
        Abbrechen
      %button{ class: 'btn btn-primary', type: 'submit' }
        Anwenden
        
.result-list
  # ...        

Copyimport { copyValues } from '../util/form'

up.compiler('[filter-popup]', function(element) {

  const button = element.querySelector('[filter-popup-button]')
  const rootForm = button.closest('form')
  const popupContent = element.querySelector('[filter-popup-content]')

  up.on(button, 'click', async function(evt) {
    evt.stopPropagation() // Without this, the click will bubble up and immediately close the popup

    const { fragment: overlayForm } = await up.render(
      {
        align: 'right',
        class: 'filter',
        dismissable: 'key outside',
        fragment: `<form>${popupContent.outerHTML}</form>`,
        layer: 'swap',
        mode: 'popup',
        navigate: false,
        origin: button,
        position: 'bottom',
      },
    )
    copyValues(rootForm, overlayForm) // Copy all values from the root layer form into the popup form

    up.layer.on('submit', function(evt, overlayForm) {
      evt.preventDefault() // Prevent the form submit because we need to submit the whole root form
      
      // Copy them back to the root form as soon as the form in the layer is submitted
      copyValues(overlayForm, rootForm)
      up.layer.dismiss() // Close the layer
      up.submit(rootForm) // Submit the root form to achieve index changes with the filters
    })
  })

})

Copy// Copies input values from sourceForm to targetForm.
export function copyValues(sourceForm, targetForm) {
  for (const sourceField of sourceForm.elements) {
    const targetField = targetForm.elements.namedItem(sourceField.name)
    if (!targetField) continue

    if (targetField instanceof RadioNodeList) {
      for (const radio of targetField) {
        if (radio.value === sourceField.value) {
          radio.checked = sourceField.checked
        }
      }
    } else if (targetField.type === 'checkbox') {
      targetField.checked = sourceField.checked
    } else {
      targetField.value = sourceField.value
    }
  }
}