215 lines
6.5 KiB
HTML
215 lines
6.5 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;
|
|
}
|
|
|
|
|
|
/* demo: image spacing... */
|
|
.image-spacing {
|
|
--gallery-image-spacing: 0.5em;
|
|
}
|
|
|
|
|
|
/* demo: tiny images... */
|
|
.tiny-images {
|
|
--gallery-image-base-height: 10rem;
|
|
}
|
|
|
|
/* demo: square image blocks... */
|
|
.image-squares {
|
|
--gallery-image-spacing: 0.5em;
|
|
}
|
|
.image-squares .images img {
|
|
--gallery-image-base-width: var(--gallery-image-base-height);
|
|
|
|
background: var(--gallery-secondary-color);
|
|
outline: solid 1px var(--gallery-background-color);
|
|
}
|
|
|
|
</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')">gallery: ◐</button>
|
|
<button onclick="document.body.classList.toggle('lightbox-dark')">lightbox: ◐</button>
|
|
<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">gallery: spacing</button>
|
|
<button onclick="document.body.classList.toggle('image-squares'); gallery.update()">gallery: squares</button>
|
|
<button onclick="document.body.classList.toggle('tiny-images'); gallery.update()">gallery: tiny</button>
|
|
<br>
|
|
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar: drag</button>
|
|
<br>
|
|
<br>
|
|
<button onclick="gallery.toggleLoading()">gallery: loading</button>
|
|
|
|
<hr>
|
|
|
|
<div class="gallery otter">
|
|
<!-- toolbar -->
|
|
<div class="toolbar-anchor">
|
|
<!-- 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">grid_on<sec>close</sec></button>
|
|
</div>
|
|
<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>
|
|
<div>
|
|
<button onclick="gallery" title="Save">crossword<sec>add</sec></button>
|
|
</div>
|
|
<div class="states"></div>
|
|
<!--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-->
|
|
<button class="collapse" title="Saved (hold to make sticky)">crossword</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 : -->
|