lots of tweaks...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
f869066082
commit
3c7ed59b26
@ -10,6 +10,7 @@
|
||||
:root {
|
||||
/* dimensions */
|
||||
--gallery-scrollbar-width: 0.5em;
|
||||
--gallery-image-scroll-margin: 1em;
|
||||
|
||||
--lightbox-frame-size: 5vmin;
|
||||
--lightbox-image-margin-top: 0.75;
|
||||
@ -79,6 +80,7 @@ body {
|
||||
.gallery .images img {
|
||||
height: 300px;
|
||||
width: auto;
|
||||
scroll-margin: var(--gallery-image-scroll-margin);
|
||||
image-rendering: crisp-edges;
|
||||
|
||||
cursor: pointer;
|
||||
@ -87,7 +89,9 @@ body {
|
||||
/* selection marker... */
|
||||
.gallery .images img.current {
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.8);
|
||||
box-shadow:
|
||||
0px 0px 0px 0.5em rgba(255,255,255,1),
|
||||
0.3em 0.3em 3em 0em rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
|
||||
@ -97,9 +101,14 @@ body {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.gallery.lightboxed .images img+.mark {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* marker: selected */
|
||||
.gallery .lightbox.selected:after,
|
||||
.gallery .images img+.mark.selected:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -111,7 +120,10 @@ body {
|
||||
border-radius: 50%;
|
||||
|
||||
background: blue;
|
||||
border: solid 1px white;
|
||||
|
||||
box-shadow: 0em 0em 0em 0.05em rgba(255,255,255,1);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -132,6 +144,9 @@ body {
|
||||
color: var(--lightbox-text-color);
|
||||
background: var(--lightbox-background-color);
|
||||
}
|
||||
.gallery.lightboxed .lightbox {
|
||||
display: block;
|
||||
}
|
||||
.gallery .lightbox.show-caption:before {
|
||||
content: attr(caption);
|
||||
position: absolute;
|
||||
|
||||
@ -93,6 +93,7 @@ function(elem) {
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
|
||||
// XXX add shift+arrow to select...
|
||||
// XXX add home/end, pageup/pagedown...
|
||||
var keyboard = {
|
||||
ArrowLeft: function(){
|
||||
@ -142,9 +143,12 @@ var keyboard = {
|
||||
|
||||
var Gallery = {
|
||||
|
||||
// options...
|
||||
//
|
||||
allow_row_expansion: true,
|
||||
click_to_select: true,
|
||||
|
||||
|
||||
code: `
|
||||
<div class="gallery">
|
||||
<!-- gallery: content -->
|
||||
@ -176,9 +180,11 @@ var Gallery = {
|
||||
for(var i of this.dom.querySelectorAll('.images img.current')){
|
||||
i.classList.remove('current') }
|
||||
img.classList.add('current')
|
||||
// XXX add offsets from borders...
|
||||
img.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'nearest',
|
||||
offset: 10,
|
||||
}) },
|
||||
|
||||
// XXX should this be writable???
|
||||
@ -339,7 +345,9 @@ var Gallery = {
|
||||
return this.dom.querySelectorAll('.images img.selected') },
|
||||
// NOTE: this is here because we can't use :before / :after directly
|
||||
// on the img tag...
|
||||
// XXX make this generic and use a .marks list...
|
||||
updateMarkers: function(){
|
||||
var that = this
|
||||
// select...
|
||||
for(var img of this.dom.querySelectorAll('.images img.selected')){
|
||||
var mark = img.nextElementSibling
|
||||
@ -348,21 +356,28 @@ var Gallery = {
|
||||
if(!mark || !mark.classList.contains('mark')){
|
||||
mark = document.createElement('div')
|
||||
mark.classList.add('selected', 'mark')
|
||||
mark.addEventListener('click', function(evt){
|
||||
evt.stopPropagation()
|
||||
that.deselect(mark) })
|
||||
img.after(mark) } }
|
||||
// clear deselected...
|
||||
for(var mark of this.dom.querySelectorAll('.images img:not(.selected)+.mark')){
|
||||
mark.remove() }
|
||||
// update lightbox...
|
||||
this.lightbox.update()
|
||||
this.lightbox.shown
|
||||
&& this.lightbox.update()
|
||||
return this },
|
||||
select: function(){
|
||||
this.current?.classList.add('selected')
|
||||
select: function(img){
|
||||
img = img ?? this.current
|
||||
img?.classList.add('selected')
|
||||
return this.updateMarkers() },
|
||||
deselect: function(){
|
||||
this.current?.classList.remove('selected')
|
||||
deselect: function(img){
|
||||
img = img ?? this.current
|
||||
img?.classList.remove('selected')
|
||||
return this.updateMarkers() },
|
||||
toggleSelect: function(){
|
||||
this.current?.classList.toggle('selected')
|
||||
toggleSelect: function(img){
|
||||
img = img ?? this.current
|
||||
img?.classList.toggle('selected')
|
||||
this.updateMarkers()
|
||||
return this },
|
||||
selectAll: function(){
|
||||
@ -406,8 +421,11 @@ var Gallery = {
|
||||
.addEventListener('click', function(evt){
|
||||
var target = evt.target
|
||||
if(target.tagName == 'IMG'){
|
||||
// shift+click: toggle selections...
|
||||
if(evt.shiftKey){
|
||||
that.toggleSelect(target)
|
||||
// first click selects, second shows...
|
||||
if(that.click_to_select){
|
||||
} else if(that.click_to_select){
|
||||
target.classList.contains('current') ?
|
||||
that.show()
|
||||
: (that.current = target)
|
||||
@ -451,17 +469,17 @@ var Lightbox = {
|
||||
&& this.cache() },
|
||||
|
||||
get shown(){
|
||||
return this.dom.style.display == 'block' },
|
||||
return this.gallery.dom.classList.contains('lightboxed') },
|
||||
show: function(url){
|
||||
this.url = url
|
||||
?? (this.gallery.current
|
||||
?? this.gallery.next().current
|
||||
?? {}).src
|
||||
this.update()
|
||||
this.dom.style.display = 'block'
|
||||
this.gallery.dom.classList.add('lightboxed')
|
||||
return this },
|
||||
hide: function(){
|
||||
this.dom.style.display = ''
|
||||
this.gallery.dom.classList.remove('lightboxed')
|
||||
return this },
|
||||
toggle: function(){
|
||||
return this.shown ?
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user