188 lines
5.9 KiB
HTML
188 lines
5.9 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>
|
|
body.splash {
|
|
opacity: 0;
|
|
}
|
|
|
|
</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) }
|
|
|
|
var pageSetup = function(){
|
|
setup()
|
|
restoreScroll()
|
|
document.body.classList.remove('splash') }
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="pageSetup()" class="splash">
|
|
|
|
|
|
<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>
|
|
|
|
<h3>Settings and debug controls</h3>
|
|
|
|
<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
|
|
<!-- XXX scrollbar still obeys gallery... -->
|
|
<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
|
|
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toggle toolbar drag</button>
|
|
<button onclick="gallery.toggleLoading()">toggle loading screen</button>
|
|
|
|
<hr>
|
|
|
|
<div class="gallery otter">
|
|
<!-- toolbar -->
|
|
<div class="toolbar-anchor">
|
|
<!-- toolbar: states... -->
|
|
<!--div class="toolbar fixed">
|
|
<button class="drag-handle" title="drag">drag_indicator</button>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div class="states">
|
|
<button title="1">1</button>
|
|
<button title="2">2</button>
|
|
<button title="3">3</button>
|
|
</div>
|
|
<button class="collapse" title="toggle toolbar (hold to make sticky)">keyboard_double_arrow_left</button>
|
|
</div-->
|
|
<!-- toolbar: general... -->
|
|
<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.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.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>
|
|
</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>
|
|
<!-- loading screen -->
|
|
<div class="loading">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<!-- vim:set ts=4 sw=4 : -->
|