Alex A. Naanou 7845185212 todo inventory + notes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2023-08-23 23:04:23 +03:00
2023-08-22 21:58:33 +03:00
2023-07-16 23:14:58 +03:00
2023-07-17 13:22:06 +03:00
2023-08-22 21:42:00 +03:00
2023-07-08 18:33:50 +03:00
2023-08-15 16:57:21 +03:00
2023-08-23 23:04:23 +03:00

Gallery prototype

ToDo

  • BUG?: for some reason toggling fullscreen on a mobile device changes font size...
  • Save current gallery (zip/json?)
  • Views: Gallery / Details / Lightbox
  • Details: populate fields
  • Details: edit
  • 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
    • open/change/close
    • crop stack (a-la ImageGrid.Viewer)
    • actions:
      • "from selection"
  • Gallery: drag-n-drop
    • drop files/images
    • drag to sort
    • drag marked
    • touch...
  • Gallery: remove image
    • basic delete
    • delete marked
    • mark images for deletion + delete marked
  • Gallery: serialize / deserialize
  • Lightbox: navigation (keyboard / mouse)
  • Lightbox: fullscreen mode
  • Gallery: web component (???)
  • Would be nice to retain the scroll position on refresh...
  • ...

Install

Before testing this needs icon fonts to be available:

$ npm install

Architecture

XXX

Description
learning how to make small gallery
Readme 3.7 MiB
Languages
HTML 100%