2023-08-14 11:54:14 +03:00
|
|
|
# Gallery prototype
|
|
|
|
|
|
|
|
|
|
## ToDo
|
|
|
|
|
|
|
|
|
|
- Save current gallery (zip)
|
|
|
|
|
- ~~Views: Gallery / Details / Lightbox~~
|
|
|
|
|
- Details: populate fields
|
|
|
|
|
- ~~toolbar -- floating over gallery~~
|
|
|
|
|
- lightbox (current)
|
|
|
|
|
- info (current)
|
|
|
|
|
- select / deselect (current / all)
|
|
|
|
|
- delete / clear deleted (current / all)
|
|
|
|
|
- crop
|
|
|
|
|
- load
|
|
|
|
|
- **styling and icons...**
|
|
|
|
|
- toolbar -- floating over image (gallery/lightbox/details/...)
|
|
|
|
|
- lightbox
|
|
|
|
|
- info
|
|
|
|
|
- select / deselect
|
|
|
|
|
- delete
|
|
|
|
|
- Lightbox: hover indicators:
|
|
|
|
|
- start/end (a-la ImageGrid.Viewer??)
|
|
|
|
|
- next/prev
|
|
|
|
|
- ~~count~~
|
|
|
|
|
- ~~selection~~
|
|
|
|
|
- ~~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~~ -- add loading indicator
|
|
|
|
|
- ~~drag to sort~~
|
|
|
|
|
- **drag marked**
|
|
|
|
|
- touch...
|
|
|
|
|
- styling...
|
|
|
|
|
- ~~Gallery: remove image~~
|
|
|
|
|
- ~~basic delete~~
|
|
|
|
|
- ~~delete marked~~
|
|
|
|
|
- ~~mark images for deletion + delete marked~~
|
|
|
|
|
- ~~Gallery: serialize / deserialize~~
|
|
|
|
|
- ~~Lightbox: navigation (keyboard / mouse)~~
|
|
|
|
|
- ~~Lightbox: fullscreen mode~~
|
|
|
|
|
- Gallery: element (???)
|
|
|
|
|
- ~~Would be nice to retain the scroll position on refresh...~~
|
|
|
|
|
- ...
|
|
|
|
|
|
|
|
|
|
|
2023-08-15 16:57:21 +03:00
|
|
|
## Install
|
|
|
|
|
|
|
|
|
|
Before testing this needs icon fonts to be available:
|
|
|
|
|
```
|
|
|
|
|
$ npm install
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
2023-08-14 11:56:29 +03:00
|
|
|
## Architecture
|
|
|
|
|
|
|
|
|
|
XXX
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-08-14 11:54:14 +03:00
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
