gallery/README.md
Alex A. Naanou ad30c7e57f reworking of lookbars...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2023-09-13 18:35:19 +03:00

2.6 KiB

Gallery prototype

ToDo

  • BUG?: for some reason toggling fullscreen on a mobile device changes font size...
  • toolbar: drag: broken for non-first relative toolbars...
  • Save current gallery (zip/json?)
  • Save current editor state (zip/json?)
  • Views: Gallery / Details / Lightbox
  • Details: populate fields
  • Details: edit
  • toolbar: prevent form overlaping mutiple toolbars
  • toolbar: collapsed view icon...
  • toolbar: floating over gallery
    • info (current) -- should this be floating over image??
    • select / deselect (current / all)
    • delete / clear deleted (current / all)
    • crop
    • load
    • styling and icons...
    • draggable?
    • handle wrapping better (collapsed / expandend)
      might still need to resize to content on multiline...
  • Lightbox: hide cursor on timeout...
  • Gallery/Lightbox/Details: handle dragging image out of browser -- not possible in brpwser
  • Lightbox: hover indicators:
    • start/end (a-la ImageGrid.Viewer??)
    • next/prev
    • count
    • selection
  • Lightbox: unify buttons with toolbar...
  • Gallery: Adaptable image justification in grid
  • Gallery: Spacial navigation (up/down/left/right)
    • auto focus image iff the gallery is visible
      • handle focus / tabindex (???)
    • option: .loop_images
    • Up/Down: might be a good idea to select an image based on longest border instead of closest center (current)...
  • Gallery: PageUp/PageDown, home/end + allow page navigation
  • Gallery: focus visible...
  • Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)
    • Lightbox: show selection marker
  • Gallery: constructor...
    Gallery([options])
    Gallery(urls[, options])
    Gallery(dom[, options])
    Gallery(dom, urls[, options])
    
  • Gallery: view crop
    • crop stack (a-la ImageGrid.Viewer)
    • GUI: basic buttons
    • named crop
    • GUI: level indicators (a-la ImageGrid.Viewer)
    • GUI: named crop list
  • Gallery: drag-n-drop
    • drop files/images
    • drag to sort
    • drag marked
    • touch support
  • Gallery: remove image
    • basic delete
    • delete marked
    • mark images for deletion + delete marked
  • Gallery: serialize / deserialize
  • Lightbox: navigation (keyboard / mouse)
  • Lightbox: fullscreen mode
  • Would be nice to retain the scroll position on refresh...
  • Gallery: web component (???)
  • ...

Install

Before testing this needs icon fonts to be available:

$ npm install

Architecture

XXX