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')