diff --git a/css/grid-n-view.css b/css/grid-n-view.css index 3e9a3b3..2d7dbb3 100644 --- a/css/grid-n-view.css +++ b/css/grid-n-view.css @@ -105,7 +105,9 @@ body { right: 0.5em; bottom: 0.5em; border-radius: 50%; + background: blue; + border: solid 1px white; } diff --git a/grid-n-view.js b/grid-n-view.js index ddb3152..0da54fb 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -163,6 +163,17 @@ var Gallery = { get images(){ return [...this.dom.querySelectorAll('.images img')] }, + get urls(){ + return this.images + .map(function(img){ + // XXX not sure if we should remove the preview dir... + return img.src }) }, + /*/ + return img.src + // remove preview dir... + .replace(/\/[0-9]+px\//, '/') }) }, + //*/ + getRow: function(img, direction='current'){ if(['above', 'current', 'below'].includes(img)){ direction = img @@ -304,6 +315,8 @@ var Gallery = { // selection... get selected(){ return this.dom.querySelectorAll('.images img.selected') }, + // NOTE: this is here because we can't use :before / :after directly + // on the img tag... updateMarkers: function(){ // select... for(var img of this.dom.querySelectorAll('.images img.selected')){ @@ -341,26 +354,47 @@ var Gallery = { img.classList.toggle('selected') } return this.updateMarkers() }, - show: function(){ this.lightbox.show() return this }, - // XXX + update: function(){ + patchFlexRows(this.images) + return this }, + load: function(urls){ - }, + this.clear() + var images = this.dom.querySelector('.images') + for(var url of urls){ + var img = document.createElement('img') + img.src = url + images.appendChild(img) } + return this }, + clear: function(){ + this.dom.querySelector('.images').innerHTML = '' + return this }, + setup: function(dom){ var that = this this.dom = dom - this.dom.addEventListener('click', function(evt){ - var target = evt.target - if(target.tagName == 'IMG' - // skip images in lightbox... - && target.parentElement === that.dom){ - that.current = target - that.show() } }) - return this }, + this.dom + .addEventListener('click', function(evt){ + var target = evt.target + if(target.tagName == 'IMG' + // skip images in lightbox... + && target.parentElement === that.dom){ + that.current = target + that.show() } }) + + // handle resizing... + new ResizeObserver( + function(elems){ + that.update() }) + .observe(this.dom) + + return this + .update() }, } @@ -497,8 +531,6 @@ var setupGallery = function(gallery){ .setup(gallery) } var setup = function(){ - patchFlexRows([...document.querySelectorAll('.gallery .images img')]) - var galleries = document.body.querySelectorAll('.gallery') for(var gallery of galleries){ // XXX this is wrong... @@ -507,10 +539,7 @@ var setup = function(){ document.addEventListener('keydown', function(evt){ var key = evt.key if(key in keyboard){ - keyboard[key](evt) } }) - window.addEventListener('resize', function(){ - patchFlexRows([...document.querySelectorAll('.gallery .images img')]) }) -} + keyboard[key](evt) } }) }