167 lines
5.0 KiB
HTML
167 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<title>Grid n' View</title>
|
|
|
|
<link href="css/grid-n-view.css" rel="stylesheet"/>
|
|
|
|
<script src="grid-n-view.js"></script>
|
|
|
|
<style>
|
|
/* fade-in body... */
|
|
body {
|
|
animation: fadeInAnimation ease 2s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes fadeInAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
var SCROLL_TIMEOUT = 100
|
|
|
|
// save/restore scroll position...
|
|
// XXX might also be nice to restory current image and selection...
|
|
window.addEventListener('beforeunload', function(){
|
|
window.scrollX > 0 ?
|
|
(sessionStorage.windowScrollX = window.scrollX)
|
|
: (delete sessionStorage.windowScrollX)
|
|
sessionStorage.windowScrollY = window.scrollY })
|
|
var restoreScroll = function(){
|
|
setTimeout(function(){
|
|
sessionStorage.windowScrollY
|
|
&& window.scroll(
|
|
(sessionStorage.windowScrollX ?? 0)*1,
|
|
sessionStorage.windowScrollY*1) }, SCROLL_TIMEOUT ?? 100) }
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="setup(); restoreScroll()">
|
|
|
|
|
|
<h3>Keyboard controls</h3>
|
|
|
|
<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
|
|
|
|
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)
|
|
NOTE: the "basic actions" below are to be moved to the toolbar...
|
|
|
|
For more info see: <a href="./README.md">README.md</a>
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<div class="gallery otter">
|
|
<!-- toolbar -->
|
|
<div class="toolbar-anchor">
|
|
<div class="toolbar fixed">
|
|
<button class="drag-handle" title="drag">drag_indicator</button>
|
|
<div>
|
|
<button onclick="gallery" title="upload">cloud_upload</button>
|
|
<button onclick="gallery" title="save">save</button>
|
|
</div>
|
|
<!--div>
|
|
<button onclick="gallery" title="save">contrast</button>
|
|
</div-->
|
|
<div>
|
|
<!--button onclick="gallery.details.show()" title="info">imagesmode<sec>label</sec></button-->
|
|
<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<button onclick="gallery" title="crop marked">select<sec>crossword</sec></button>
|
|
<button onclick="gallery" title="uncrop">select<sec>grid_on</sec></button>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<button onclick="gallery.clear()" title="clear">close</button>
|
|
</div>
|
|
<button class="collapse" title="toggle toolbar (hold to make sticky)">keyboard_double_arrow_left</button>
|
|
</div>
|
|
</div>
|
|
<!-- gallery: content -->
|
|
<div class="images">
|
|
<img src="images/500px/1.JPG" caption="Caption text">
|
|
<img src="images/500px/2.JPG">
|
|
<img src="images/500px/3.JPG" class="marked">
|
|
<img src="images/500px/DSC08102.jpg">
|
|
<img src="images/500px/4.JPG">
|
|
<img src="images/500px/5.JPG">
|
|
<img src="images/500px/DSC08102.jpg" class="marked">
|
|
<img src="images/500px/6.JPG">
|
|
<img src="images/500px/DSC08102.jpg">
|
|
<img src="images/500px/2.JPG" class="marked">
|
|
<img src="images/500px/5.JPG">
|
|
</div>
|
|
<!-- lightbox -->
|
|
<div class="lightbox">
|
|
<!-- XXX not sure about draggable=.. here... -->
|
|
<img draggable="false">
|
|
<div class="buttons">
|
|
<div class="button prev"></div>
|
|
<div class="button next"></div>
|
|
<div class="button info"></div>
|
|
<div class="button fullscreen"></div>
|
|
<div class="button close"></div>
|
|
</div>
|
|
</div>
|
|
<!-- details -->
|
|
<div class="details">
|
|
<!-- XXX not sure about draggable=.. here... -->
|
|
<img draggable="false">
|
|
<div class="caption">
|
|
CAPTION
|
|
</div>
|
|
<div class="tags">
|
|
TAGS
|
|
</div>
|
|
<div class="metadata">
|
|
METADATA
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="button prev"></div>
|
|
<div class="button next"></div>
|
|
<div class="button close"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|