-- Reusable Hyperscript behaviours and helper functions for the site.
-- Loaded from base.html before the Hyperscript runtime, so every behaviour
-- defined here can be applied with _="install Name(...)" on any page.
-- See HYPERSCRIPT_CONVENTIONS.md, section 4, before adding to this file.

-- Menus
-- Closes a <details> menu when a link inside it is tapped or Escape is pressed.
behavior CloseMenu
  on click
    if the target matches <a/> remove @open from me end
  end
  on keydown[key is 'Escape'] from window
    remove @open from me
  end
end

-- Soundscape
-- Hides the native audio controls in favour of the designed button, and keeps
-- that button's label and level indicator in step with the audio itself. With
-- the runtime blocked the native player stays, so the piece is always playable.
behavior ToggleSoundscape(player)
  init
    default player to the previous <audio/>
    add @hidden to player
    remove @hidden from me
  end
  on click queue none
    if player.paused
      call player.play()
    else
      call player.pause()
    end
  end
  on play from player
    add .is-playing to me
    put my @data-pause-label into the first .soundscape__label in me
  end
  on pause from player
    remove .is-playing from me
    put my @data-play-label into the first .soundscape__label in me
  end
  on ended from player
    remove .is-playing from me
    put my @data-play-label into the first .soundscape__label in me
  end
end

-- Blow-out
-- The full-viewport <dialog> htmx appends when a work is clicked. It arrives
-- already open, so htmx without Hyperscript still shows the work with a
-- working native close; here it is shut and reopened modally, which buys
-- Escape and a focus trap for nothing.
--
-- It leaves only through history, so the screen and the address bar never
-- disagree: closing steps back, and stepping back takes it off the page.
-- Removing an open dialog does not fire close, so the two cannot loop.
behavior Lightbox
  init
    remove @open from me
    open me
  end
  on close
    call history.back()
  end
  on popstate from window
    remove me
  end
  on keydown[key is 'ArrowLeft']
    call ui.step(the first .lightbox__step--previous in me)
  end
  on keydown[key is 'ArrowRight']
    call ui.step(the first .lightbox__step--next in me)
  end
end

-- Follows a blow-out step, if this end of the sequence has one.
def ui.step(control)
  if no control
    return
  end
  call control.click()
end

-- Uploads
-- A drop zone over a real file input. The input is the control and the Add button
-- still submits it, so with the runtime blocked nothing is lost -- this only saves
-- a trip through the file picker. The browser opens a dropped file as a page unless
-- the default is stopped on dragover as well as on drop, which is why halt is twice.
behavior DropFilesInto(picker)
  init
    default picker to the first <input[type=file]/> in me
  end
  on dragover or dragenter
    halt the event's default
    add .is-over to me
  end
  on dragleave
    remove .is-over from me
  end
  on drop
    halt the event's default
    remove .is-over from me
    set picker.files to the event's dataTransfer's files
  end
end

-- Saving the order
-- A save is quick enough that an indicator beside the button only flashes, so the
-- button itself carries the state: Save order, Saving, Saved. Another move puts it
-- back to Save order, and a reload starts it over, because the label is only ever
-- a report on the last thing posted.
--
-- A failed save must never read as a success. The list refetches itself after one,
-- and that refetch is a swap like any other, so a flag keeps the two apart.
behavior ConfirmsSaving
  init
    set :failed to false
  end
  on htmx:before:request from closest <form/>
    set :failed to false
    remove .is-saved from me
    put my @data-busy into me
  end
  on htmx:after:swap from closest <form/>
    if :failed is false
      put my @data-done into me
      add .is-saved to me
    end
  end
  on htmx:response:error or htmx:error from closest <form/>
    set :failed to true
    remove .is-saved from me
    put my @data-idle into me
  end
end

-- Rearranging
-- Dragging a painting is geometry -- pointer capture, drop targets, autoscroll --
-- so it lives in static/js/drag-order.js and this is the shell that starts it.
-- htmx does the saving: orderMoved bubbles to the form, which posts the sequence.
-- With the runtime blocked the Move earlier and Move later buttons still submit.
behavior DragToReorder(status)
  init
    default status to the next <output/>
    call dragOrder.enhance(me)
  end
  on pointerdown
    call dragOrder.begin(me, event)
  end
  on orderMoved(label)
    put label into status
  end
end