added serialization + minor fixes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

grid-n-view.html

@@ -46,7 +46,7 @@
 - Gallery: drop images
 - Gallery: drag to sort
 - Gallery: remove image
-- <b>Gallery: serialize / deserialize</b>
+- <s>Gallery: serialize / deserialize</s>
 - <s>Lightbox: navigation (keyboard / mouse)</s>
 - <s>Lightbox: fullscreen mode</s>
 - Gallery: element (???)

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(<image>)
+	//	.load(<images>)
+	//	.load(<image>, <index>)
+	//	.load(<images>, <index>)
+	//
+	//	<images> ::=
+	//		<image>
+	//		| [ <image>, .. ]
+	//	<image> ::=
+	//		<url>
+	//		| [ <url>, <caption>, .. ]
+	//		| { url: <url>, caption: <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')