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-08-15 16:57:21 +03:00
|
|
|
<link href="css/grid-n-view.css" rel="stylesheet"/>
|
|
|
|
|
|
2023-07-17 13:13:09 +03:00
|
|
|
<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-18 02:58:23 +03:00
|
|
|
body.splash {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2023-09-19 13:26:48 +03:00
|
|
|
/* demo classes... */
|
|
|
|
|
.image-spacing {
|
|
|
|
|
--gallery-image-spacing: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
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-08-18 02:58:23 +03:00
|
|
|
var pageSetup = function(){
|
|
|
|
|
setup()
|
|
|
|
|
restoreScroll()
|
|
|
|
|
document.body.classList.remove('splash') }
|
|
|
|
|
|
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-18 02:58:23 +03:00
|
|
|
<body onload="pageSetup()" class="splash">
|
2023-07-17 13:03:51 +03:00
|
|
|
|
2023-08-13 13:03:16 +03:00
|
|
|
|
|
|
|
|
<h3>Keyboard controls</h3>
|
|
|
|
|
|
2023-08-12 01:46:35 +03:00
|
|
|
<pre>
|
|
|
|
|
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-08-13 00:23:13 +03:00
|
|
|
NOTE: the "basic actions" below are to be moved to the toolbar...
|
|
|
|
|
|
|
|
|
|
For more info see: <a href="./README.md">README.md</a>
|
2023-07-21 13:29:39 +03:00
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
2023-08-18 23:06:38 +03:00
|
|
|
<h3>Settings and debug controls</h3>
|
2023-08-18 09:11:58 +03:00
|
|
|
|
2023-08-18 23:06:38 +03:00
|
|
|
<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
|
2023-09-19 13:26:48 +03:00
|
|
|
<!-- XXX scrollbar colors still inherited from gallery... -->
|
2023-08-18 23:06:38 +03:00
|
|
|
<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
|
2023-09-19 13:26:48 +03:00
|
|
|
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar drag</button>
|
|
|
|
|
<button onclick="gallery.toggleLoading()">loading screen</button>
|
|
|
|
|
<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">image spacing</button>
|
2023-08-18 09:11:58 +03:00
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
2023-08-16 02:57:03 +03:00
|
|
|
<div class="gallery otter">
|
2023-08-13 14:26:13 +03:00
|
|
|
<!-- toolbar -->
|
2023-08-17 11:24:30 +03:00
|
|
|
<div class="toolbar-anchor">
|
2023-09-03 20:33:41 +03:00
|
|
|
<!-- toolbar: general... -->
|
2023-08-17 17:49:37 +03:00
|
|
|
<div class="toolbar fixed">
|
2023-09-12 15:59:40 +03:00
|
|
|
<button class="drag-handle" title="Drag">drag_indicator</button>
|
2023-08-17 11:24:30 +03:00
|
|
|
<div>
|
2023-09-12 15:59:40 +03:00
|
|
|
<button onclick="gallery" title="Upload">cloud_upload</button>
|
|
|
|
|
<button onclick="gallery" title="Save">save</button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2023-09-12 15:59:40 +03:00
|
|
|
<button onclick="gallery.details.show()" title="Edit">imagesmode<sec>edit</sec></button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2023-09-12 15:59:40 +03:00
|
|
|
<button onclick="gallery.toggleMark()" title="Toggle mark current (space)">select</button>
|
|
|
|
|
<button onclick="gallery.markAll()" title="Mark all (ctrl-a)">select<sec>select</sec></button>
|
|
|
|
|
<button onclick="gallery.unmarkAll()" title="Unmark all (ctrl-d)">square<sec>square</sec></button>
|
|
|
|
|
<button onclick="gallery.markInverse()" title="Reverse mark (ctrl-i)">select<sec>square</sec></button>
|
|
|
|
|
<button onclick="gallery.remove('marked')" title="Remove marked">select<sec>close</sec></button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2023-09-12 15:59:40 +03:00
|
|
|
<button onclick="gallery.crop('marked')" title="Crop marked">select<sec>crossword</sec></button>
|
|
|
|
|
<button onclick="gallery.uncrop()" title="Uncrop">select<sec>grid_on</sec></button>
|
|
|
|
|
<button onclick="gallery" title="Save crop">crossword<sec>add</sec></button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2023-09-12 15:59:40 +03:00
|
|
|
<button onclick="gallery.toggleQueueRemoval()" title="Queue removal (del)">delete</button>
|
|
|
|
|
<button onclick="gallery.toggleQueueRemoval('marked')" title="Toggle marked removal">delete<sec>select</sec></button>
|
|
|
|
|
<button onclick="gallery.removeQueued()" title="Remove queued (shift-del)">delete<sec>close</sec></button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2023-09-12 17:21:04 +03:00
|
|
|
<button onclick="gallery.clear()" title="clear">grid_on<sec>close</sec></button>
|
2023-08-17 11:24:30 +03:00
|
|
|
</div>
|
2023-09-13 18:35:19 +03:00
|
|
|
<button class="collapse" title="Edit (hold to make sticky)">edit_square</button>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- toolbar: states... -->
|
|
|
|
|
<div class="toolbar fixed">
|
|
|
|
|
<button class="drag-handle" title="Drag">drag_indicator</button>
|
2023-09-13 20:15:23 +03:00
|
|
|
<div>
|
|
|
|
|
<button onclick="gallery" title="Save">crossword<sec>add</sec></button>
|
|
|
|
|
</div>
|
2023-09-13 18:35:19 +03:00
|
|
|
<div class="states"></div>
|
2023-09-13 20:15:23 +03:00
|
|
|
<!--div class="states">
|
|
|
|
|
<button onclick="gallery" title="Load 1">1</button>
|
|
|
|
|
<button onclick="gallery" title="Load 1">2</button>
|
|
|
|
|
<button onclick="gallery" title="Load 1">3</button>
|
|
|
|
|
</div-->
|
2023-09-13 18:35:19 +03:00
|
|
|
<button class="collapse" title="Saved (hold to make sticky)">crossword</button>
|
2023-08-15 16:57:21 +03:00
|
|
|
</div>
|
2023-08-13 14:26:13 +03:00
|
|
|
</div>
|
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-08-18 17:48:53 +03:00
|
|
|
<!-- loading screen -->
|
|
|
|
|
<div class="loading">
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
2023-07-17 13:03:51 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
