diff --git a/grid-n-view.html b/grid-n-view.html index f930e29..2bcaec3 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -32,6 +32,7 @@ body { 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) diff --git a/grid-n-view.js b/grid-n-view.js index f78c0b7..c8e8d46 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -565,8 +565,7 @@ var Gallery = { return this.updateMarkers() }, show: function(){ - this.lightbox.show() - return this }, + return this.showLightbox() }, showLightbox: function(){ this.lightbox.show() return this }, @@ -619,7 +618,10 @@ var Gallery = { elem.setAttribute('draggable', 'true') for(var [key, value] of Object.entries(data)){ value - && elem.setAttribute(key, value) } + // XXX is this a good way to destinguish classes and attrs??? + && (typeof(value) == 'boolean' ? + elem.classList.add(key) + : elem.setAttribute(key, value)) } elems.push(elem) } // add to gallery... if(index == null){ @@ -634,10 +636,16 @@ var Gallery = { sibling.after(...elems) : sibling.before(...elems) } return this + .updateMarkers() .update() }, __image_attributes__: [ 'caption', ], + __image_classes__: [ + // XXX should this be here or set as a root attribute??? + 'current', + 'marked', + ], // XXX do we handle previews here??? json: function(images=undefined){ var that = this @@ -650,12 +658,15 @@ var Gallery = { this.images : images return images - .map(function(img){ + .map(function(img, i){ var res = { url: img.src } - for(var key of that.__image_attributes__){ + for(var key of that.__image_attributes__ ?? []){ var value = img.getAttribute(key) value && (res[key] = value) } + for(var key of that.__image_classes__ ?? []){ + img.classList.contains(key) + && (res[key] = true) } return res }) }, remove: function(...images){