2023-07-17 13:13:09 +03:00
|
|
|
<!DOCTYPE html>
|
2023-07-17 13:03:51 +03:00
|
|
|
<html>
|
2023-07-17 13:14:05 +03:00
|
|
|
<head>
|
|
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<meta charset="utf-8" />
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<title>Grid n' View</title>
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<link rel="stylesheet" href="css/grid-n-view.css" />
|
|
|
|
|
<script src="grid-n-view.js"></script>
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<style>
|
2023-08-03 09:52:15 +03:00
|
|
|
/* fade-in body... */
|
|
|
|
|
body {
|
2023-08-03 09:56:41 +03:00
|
|
|
animation: fadeInAnimation ease 2s;
|
2023-08-03 09:52:15 +03:00
|
|
|
animation-iteration-count: 1;
|
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fadeInAnimation {
|
|
|
|
|
0% {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-07-17 13:03:51 +03:00
|
|
|
</style>
|
|
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<script>
|
2023-08-03 09:52:15 +03:00
|
|
|
|
2023-08-03 09:56:41 +03:00
|
|
|
var SCROLL_TIMEOUT = 100
|
|
|
|
|
|
2023-08-03 09:52:15 +03:00
|
|
|
// save/restore scroll position...
|
2023-08-03 18:06:30 +03:00
|
|
|
// XXX might also be nice to restory current image and selection...
|
2023-08-03 09:56:41 +03:00
|
|
|
window.addEventListener('beforeunload', function(){
|
2023-08-03 09:52:15 +03:00
|
|
|
window.scrollX > 0 ?
|
|
|
|
|
(sessionStorage.windowScrollX = window.scrollX)
|
|
|
|
|
: (delete sessionStorage.windowScrollX)
|
2023-08-03 09:56:41 +03:00
|
|
|
sessionStorage.windowScrollY = window.scrollY })
|
2023-08-03 09:52:15 +03:00
|
|
|
var restoreScroll = function(){
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
sessionStorage.windowScrollY
|
|
|
|
|
&& window.scroll(
|
|
|
|
|
(sessionStorage.windowScrollX ?? 0)*1,
|
2023-08-03 09:56:41 +03:00
|
|
|
sessionStorage.windowScrollY*1) }, SCROLL_TIMEOUT ?? 100) }
|
2023-08-03 09:52:15 +03:00
|
|
|
|
2023-07-17 13:03:51 +03:00
|
|
|
</script>
|
2023-07-17 13:13:09 +03:00
|
|
|
|
2023-07-17 13:14:05 +03:00
|
|
|
</head>
|
2023-08-03 09:52:15 +03:00
|
|
|
<body onload="setup(); restoreScroll()">
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-07-21 13:29:39 +03:00
|
|
|
<h3>ToDo</h3>
|
|
|
|
|
<pre>
|
2023-08-11 15:41:11 +03:00
|
|
|
- Save current gallery (zip)
|
|
|
|
|
- <s>Views: Gallery / Details / Lightbox</s>
|
2023-08-03 16:40:59 +03:00
|
|
|
- Details: populate fields
|
|
|
|
|
- toolbar -- floating over gallery
|
|
|
|
|
- lightbox (current)
|
|
|
|
|
- info (current)
|
|
|
|
|
- select / deselect (current / all)
|
|
|
|
|
- delete / clear deleted (current / all)
|
2023-07-29 16:31:00 +03:00
|
|
|
- crop
|
|
|
|
|
- load
|
2023-08-03 16:40:59 +03:00
|
|
|
- toolbar -- floating over image (gallery/lightbox/details/...)
|
|
|
|
|
- lightbox
|
|
|
|
|
- info
|
|
|
|
|
- select / deselect
|
|
|
|
|
- delete
|
|
|
|
|
- Lightbox: hover indicators:
|
2023-07-31 10:41:24 +03:00
|
|
|
- start/end (a-la ImageGrid.Viewer??)
|
2023-07-25 21:57:18 +03:00
|
|
|
- next/prev
|
|
|
|
|
- <s>count</s>
|
|
|
|
|
- <s>selection</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Gallery: Adaptable image justification in grid</s>
|
|
|
|
|
- <s>Gallery: Spacial navigation (up/down/left/right)</s>
|
2023-07-31 10:41:24 +03:00
|
|
|
- <b>auto focus image iff the gallery is visible</b>
|
2023-07-25 21:57:18 +03:00
|
|
|
- handle focus / tabindex (???)
|
|
|
|
|
- <s>option: .loop_images</s>
|
|
|
|
|
- <s>Up/Down: might be a good idea to select an image based on
|
|
|
|
|
longest border instead of closest center (current)...</s>
|
2023-07-22 18:41:49 +03:00
|
|
|
- Gallery: PageUp/PageDown, home/end + allow page navigation
|
2023-07-31 10:41:24 +03:00
|
|
|
- <b>Gallery: focus visible...</b>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
|
2023-07-21 14:40:30 +03:00
|
|
|
- <s>Lightbox: show selection marker</s>
|
2023-07-31 10:41:24 +03:00
|
|
|
- <b>Gallery: constructor...</b>
|
|
|
|
|
Gallery([options])
|
|
|
|
|
Gallery(urls[, options])
|
|
|
|
|
Gallery(dom[, options])
|
|
|
|
|
Gallery(dom, urls[, options])
|
|
|
|
|
- <b>Gallery: view crop</b>
|
|
|
|
|
- open/change/close
|
|
|
|
|
- crop stack (a-la ImageGrid.Viewer)
|
|
|
|
|
- actions:
|
|
|
|
|
- "from selection"
|
2023-08-10 03:53:12 +03:00
|
|
|
- <s>Gallery: drag-n-drop</s>
|
2023-08-07 17:21:55 +03:00
|
|
|
- <s>drop files/images</s> -- add loading indicator
|
2023-08-10 03:53:12 +03:00
|
|
|
- <s>drag to sort</s>
|
2023-08-12 00:31:21 +03:00
|
|
|
- <b>drag marked</b>
|
2023-08-10 03:53:12 +03:00
|
|
|
- styling...
|
2023-07-28 21:23:00 +03:00
|
|
|
- <s>Gallery: remove image</s>
|
2023-08-12 00:31:21 +03:00
|
|
|
- <s>basic delete</s>
|
2023-08-12 00:51:18 +03:00
|
|
|
- <s>delete marked</s>
|
|
|
|
|
- <s>mark images for deletion + delete marked</s>
|
|
|
|
|
- UI/toolbar
|
2023-07-28 19:41:44 +03:00
|
|
|
- <s>Gallery: serialize / deserialize</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- <s>Lightbox: navigation (keyboard / mouse)</s>
|
2023-07-27 15:36:56 +03:00
|
|
|
- <s>Lightbox: fullscreen mode</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- Gallery: element (???)
|
2023-08-04 20:58:53 +03:00
|
|
|
- <s>Would be nice to retain the scroll position on refresh...</s>
|
2023-07-21 13:29:39 +03:00
|
|
|
- ...
|
2023-08-07 17:16:24 +03:00
|
|
|
|
2023-08-12 01:46:35 +03:00
|
|
|
</pre>
|
|
|
|
|
<pre>
|
|
|
|
|
Controls:
|
|
|
|
|
Left / Reight - Previos / next image
|
|
|
|
|
Up / Down - Image above / below
|
|
|
|
|
Space - Mark image (also shift-click)
|
|
|
|
|
Ctrl-A - Mark all images
|
|
|
|
|
Ctrl-D - Unmark all images
|
|
|
|
|
Ctrl-I - Reverse image marks
|
|
|
|
|
Enter - Toggle lightbox
|
|
|
|
|
Esc - Close image info or lightbox
|
|
|
|
|
Delete - Toggle image / marked for deletion (toggle)
|
|
|
|
|
Shift-Delete - Delete marked image(s) or current if none are marked
|
|
|
|
|
|
2023-08-07 17:16:24 +03:00
|
|
|
NOTE: if the grid behaves in an odd way on resize tweak PATCH_MARGIN value,
|
|
|
|
|
though this sould not be necessary.
|
|
|
|
|
(optimal range >1 and <3)
|
2023-07-21 13:29:39 +03:00
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
2023-07-17 13:03:51 +03:00
|
|
|
<div class="gallery">
|
2023-07-20 21:42:17 +03:00
|
|
|
<!-- gallery: content -->
|
|
|
|
|
<div class="images">
|
|
|
|
|
<img src="images/500px/1.JPG" caption="Caption text">
|
|
|
|
|
<img src="images/500px/2.JPG">
|
2023-08-02 12:48:47 +03:00
|
|
|
<img src="images/500px/3.JPG" class="marked">
|
2023-07-20 21:42:17 +03:00
|
|
|
<img src="images/500px/DSC08102.jpg">
|
|
|
|
|
<img src="images/500px/4.JPG">
|
|
|
|
|
<img src="images/500px/5.JPG">
|
2023-08-02 12:48:47 +03:00
|
|
|
<img src="images/500px/DSC08102.jpg" class="marked">
|
2023-07-20 21:42:17 +03:00
|
|
|
<img src="images/500px/6.JPG">
|
|
|
|
|
<img src="images/500px/DSC08102.jpg">
|
2023-08-02 17:36:20 +03:00
|
|
|
<img src="images/500px/2.JPG" class="marked">
|
2023-07-20 21:42:17 +03:00
|
|
|
<img src="images/500px/5.JPG">
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
<!-- lightbox -->
|
|
|
|
|
<div class="lightbox">
|
2023-08-10 20:40:00 +03:00
|
|
|
<!-- XXX not sure about draggable=.. here... -->
|
|
|
|
|
<img draggable="false">
|
2023-07-27 13:26:11 +03:00
|
|
|
<div class="buttons">
|
2023-08-03 16:40:59 +03:00
|
|
|
<div class="button prev"></div>
|
|
|
|
|
<div class="button next"></div>
|
2023-08-03 14:10:59 +03:00
|
|
|
<div class="button info"></div>
|
2023-07-27 13:26:11 +03:00
|
|
|
<div class="button fullscreen"></div>
|
|
|
|
|
<div class="button close"></div>
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
</div>
|
2023-08-02 19:01:34 +03:00
|
|
|
<!-- details -->
|
|
|
|
|
<div class="details">
|
2023-08-10 20:40:00 +03:00
|
|
|
<!-- XXX not sure about draggable=.. here... -->
|
|
|
|
|
<img draggable="false">
|
2023-08-02 19:01:34 +03:00
|
|
|
<div class="caption">
|
2023-08-03 14:10:59 +03:00
|
|
|
CAPTION
|
2023-08-02 19:01:34 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="tags">
|
2023-08-03 14:10:59 +03:00
|
|
|
TAGS
|
2023-08-02 19:01:34 +03:00
|
|
|
</div>
|
2023-08-03 14:10:59 +03:00
|
|
|
<div class="metadata">
|
|
|
|
|
METADATA
|
2023-08-02 19:01:34 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="buttons">
|
2023-08-03 14:10:59 +03:00
|
|
|
<div class="button prev"></div>
|
|
|
|
|
<div class="button next"></div>
|
2023-08-02 19:01:34 +03:00
|
|
|
<div class="button close"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
