diff --git a/grid-n-view.html b/grid-n-view.html index 14a7c13..45d33fc 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -46,7 +46,7 @@ - Gallery: drop images - Gallery: drag to sort - Gallery: remove image -- Gallery: serialize / deserialize +- Gallery: serialize / deserialize - Lightbox: navigation (keyboard / mouse) - Lightbox: fullscreen mode - Gallery: element (???) diff --git a/grid-n-view.js b/grid-n-view.js index 4f9d46d..cbe7187 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -20,6 +20,8 @@ // XXX need to account for scrollbar -- add hysteresis??? var patchFlexRows = function(elems, prevent_row_expansion=false){ + if(elems.length == 0){ + return } // NOTE: -1 here is to compensate for rounding errors... var W = elems[0].parentElement.clientWidth - 1 var w = 0 @@ -492,14 +494,73 @@ var Gallery = { patchFlexRows(this.images, !this.allow_row_expansion) 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 }, + // .load() + // .load() + // .load(, ) + // .load(, ) + // + // ::= + // + // | [ , .. ] + // ::= + // + // | [ , , .. ] + // | { url: , caption: , .. } + // + // XXX do we handle previews here??? + load: function(images, index=undefined){ + images = images instanceof Array ? + images + : [images] + // create images... + var elems = [] + for(var data of images){ + if(typeof(data) == 'string'){ + var [url] = [data] + } else if(data instanceof Array){ + var [url, ...data] = data + } else { + var {url, ...data} = data } + var elem = document.createElement('img') + elem.src = url + for(var [key, value] of Object.entries(data)){ + value + && elem.setAttribute(key, value) } + elems.push(elem) } + // add to gallery... + if(index == null){ + this.clear() } + if(index == null + || this.length > 0){ + this.dom.querySelector('.images') + .append(...elems) + } else { + var sibling = this.images.at(index) + index < 0 ? + sibling.after(...elems) + : sibling.before(...elems) } + return this + .update() }, + __image_attributes__: [ + 'caption', + ], + // XXX do we handle previews here??? + json: function(){ + var that = this + return this.images + .map(function(img){ + var res = { url: img.src } + for(var key of that.__image_attributes__){ + var value = img.getAttribute(key) + value + && (res[key] = value) } + return res }) }, + + // XXX + remove: function(){ + // XXX + return this + }, clear: function(){ this.dom.querySelector('.images').innerHTML = '' return this }, @@ -655,6 +716,7 @@ var Lightbox = { .addEventListener('click', function(evt){ evt.stopPropagation() that.gallery.exit_fullscreen_on_lightbox_close + && document.fullscreenElement && document.exitFullscreen() that.hide() }) this.dom.querySelector('.fullscreen')