cleanup and tweaks...

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

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;
 }
 
 

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){
+		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 },
+
+		// 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) } }) 
+			keyboard[key](evt) } }) }
-	window.addEventListener('resize', function(){
-		patchFlexRows([...document.querySelectorAll('.gallery .images img')]) })
-}