diff --git a/css/grid-n-view.css b/css/grid-n-view.css index ee4619f..628294f 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -80,22 +80,26 @@ body { height: 300px; width: auto; image-rendering: crisp-edges; - box-sizing: border-box; cursor: pointer; } + +/* selection marker... */ .gallery .images img.current { - border: solid 2px red; + z-index: 1; + box-shadow: 0px 0px 0px 5px rgba(255,0,0,0.8); } /*************************************************** Image markers ***/ .gallery .images img+.mark { + z-index: 1; position: relative; } /* marker: selected */ +.gallery .lightbox.selected:after, .gallery .images img+.mark.selected:after { content: ""; position: absolute; @@ -121,6 +125,7 @@ body { height: 100%; top: 0px; left: 0px; + z-index: 1; text-align: center; diff --git a/grid-n-view.html b/grid-n-view.html index f0a06a5..e5aafee 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -22,11 +22,11 @@
-Gallery: Adaptable image justification in grid- Can we make this passive??? (i.e. CSS only) - - Make more accurate -- align right side to pixel... + -Make more accurate -- align right side to pixel...-Gallery: Spacial navigation (up/down/left/right)- Up/Down: might be a good idea to err slightly to the left -Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)- - Lightbox: show selection marker + -Lightbox: show selection marker- Gallery: constructor (list of urls) - Gallery: views - "make view from selection" diff --git a/grid-n-view.js b/grid-n-view.js index db4af85..99ac9f7 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -19,8 +19,9 @@ // XXX need to account for scrollbar -- add hysteresis??? var patchFlexRows = -function(elems){ - var W = elems[0].parentElement.clientWidth - 2 +function(elems, prevent_row_expansion=false){ + // NOTE: -1 here is to compensate for rounding errors... + var W = elems[0].parentElement.clientWidth - 1 var w = 0 var h var row = [] @@ -37,21 +38,26 @@ function(elems){ if(elem.offsetTop == top){ w += elem.offsetWidth row.push(elem) - // next row... + // row donw + prep for next... } else { // NOTE: we are checking which will require a lesser resize // the current row or it with the next image... var r1 = W / w var r2 = W / (w + elem.offsetWidth) - var expanded_row = 1/r1 < r2 + var expanded_row = + prevent_row_expansion ? + false + : 1/r1 < r2 if(!expanded_row){ var r = r1 } else { var r = r2 row.push(elem) } // patch the row... + var nw = 0 for(var e of row){ - e.style.height = Math.floor(h * r) + 'px' } + e.style.height = (h * r) + 'px' + nw += e.offsetWidth } // prep for next row... if(!expanded_row){ w = elem.offsetWidth @@ -135,6 +141,9 @@ var keyboard = { //--------------------------------------------------------------------- var Gallery = { + + allow_row_expansion: true, + code: `@@ -342,6 +351,8 @@ var Gallery = { // clear deselected... for(var mark of this.dom.querySelectorAll('.images img:not(.selected)+.mark')){ mark.remove() } + // update lightbox... + this.lightbox.update() return this }, select: function(){ this.current?.classList.add('selected') @@ -371,7 +382,7 @@ var Gallery = { return this }, update: function(){ - patchFlexRows(this.images) + patchFlexRows(this.images, !this.allow_row_expansion) return this }, load: function(urls){ @@ -438,13 +449,7 @@ var Lightbox = { ?? (this.gallery.current ?? this.gallery.next().current ?? {}).src - // set caption... - this.dom.setAttribute('caption', - (this.gallery.current - ?? this.gallery.next().current - ?? {}) - .getAttribute('caption') - ?? '') + this.update() this.dom.style.display = 'block' return this }, hide: function(){ @@ -455,6 +460,20 @@ var Lightbox = { this.hide() : this.show() }, + update: function(){ + // set caption... + this.dom.setAttribute('caption', + (this.gallery.current + ?? this.gallery.next().current + ?? {}) + .getAttribute('caption') + ?? '') + // set selection... + this.gallery.current.classList.contains('selected') ? + this.dom.classList.add('selected') + : this.dom.classList.remove('selected') + return this }, + prev: function(){ this.gallery.prev().show() return this },