more demos + cleanup...

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

css/grid-n-view.css

@@ -12,6 +12,7 @@
 :root {
 	/* dimensions */
 	--gallery-image-base-height: 18rem;
+	--gallery-image-base-width: auto;
 	--gallery-image-spacing: 0rem;
 	--gallery-current-image-border: 0.7rem;
 	--gallery-padding: 3rem;
@@ -206,7 +207,9 @@ button:active {
 /* image... */
 .gallery .images img {
 	height: var(--gallery-image-base-height);
-	width: auto;
+	width: var(--gallery-image-base-width);
+
+	object-fit: contain;
 
 	border: solid var(--gallery-image-margin) transparent;
 	box-sizing: border-box;
@@ -841,6 +844,15 @@ button:active {
 	display: none;
 }
 
+
+icon {
+	font-family: "Material Symbols Outlined";
+	font-weight: 300;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+	font-feature-settings: "liga";   
+}
 	
 
 /**********************************************************************

grid-n-view.html

@@ -15,11 +15,29 @@ body.splash {
 	opacity: 0;
 }
 
-/* demo classes... */
+
+/* demo: image spacing... */
 .image-spacing {
 	--gallery-image-spacing: 0.5em;
 }
 
+
+/* demo: tiny images... */
+.tiny-images {
+	--gallery-image-base-height: 10rem;
+}
+
+/* demo: square image blocks... */
+.image-squares {
+	--gallery-image-spacing: 0.5em;
+}
+.image-squares .images img {
+	--gallery-image-base-width: var(--gallery-image-base-height);
+
+	background: var(--gallery-secondary-color);
+	outline: solid 1px var(--gallery-background-color);
+}
+
 </style>
 
 <script>
@@ -77,12 +95,16 @@ For more info see: <a href="./README.md">README.md</a>
 
 <h3>Settings and debug controls</h3>
 
-<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
+<button onclick="document.body.classList.toggle('gallery-dark')">gallery: ◐</button>
-<!-- XXX scrollbar colors still inherited from gallery... -->
+<button onclick="document.body.classList.toggle('lightbox-dark')">lightbox: ◐</button>
-<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
+<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">gallery: spacing</button>
-<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar drag</button>
+<button onclick="document.body.classList.toggle('image-squares'); gallery.update()">gallery: squares</button>
-<button onclick="gallery.toggleLoading()">loading screen</button>
+<button onclick="document.body.classList.toggle('tiny-images'); gallery.update()">gallery: tiny</button>
-<button onclick="document.body.classList.toggle('image-spacing'); gallery.update()">image spacing</button>
+<br>
+<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toolbar: drag</button>
+<br>
+<br>
+<button onclick="gallery.toggleLoading()">gallery: loading</button>
 
 <hr>
 

grid-n-view.js

@@ -17,14 +17,20 @@
 var PATCH_MARGIN = 2
 // XXX do this partially (ignoring prevent_row_expansion)...
 var patchFlexRows = 
-function(elems, 
+function(elems, options={}){
-		prevent_row_expansion=false, 
+	options = {
-		last_row_resize=1.5, 
+		...{
-		patch_margin=PATCH_MARGIN){
+			prevent_row_expansion: false, 
+			last_row_resize: 1.5, 
+			patch_margin: PATCH_MARGIN,
+			height_attr: 'height',
+		},
+		...options,	
+	}
 	if(elems.length == 0){
 		return }
 	// NOTE: -1 here is to compensate for rounding errors...
-	var W = elems[0].parentElement.clientWidth - patch_margin
+	var W = elems[0].parentElement.clientWidth - options.patch_margin
 	var w = 0
 	var h
 	var row = []
@@ -62,17 +68,18 @@ function(elems,
 		var nw = 0
 		for(var e of row){
 			if(r == 0 || h == 0){
-				e.style.height = ''
+				e.style.setProperty(options.height_attr, '')
 			} else {
-				e.style.height = (h * r) + 'px' }
+				e.style.setProperty(options.height_attr, (h * r) + 'px') }
 			nw += e.offsetWidth }
 		return !!expanded }
 	// NOTE: this will by design skip the last row...
 	// 		...because we handle the row only when we see an image at a 
 	// 		different vertical offset...
 	for(var elem of elems){
-		elem.style.height = ''
+		elem.style.setProperty(options.height_attr, '')
-		elem.style.width = ''
+		// XXX do we need this???
+		//elem.style.width = ''
 		h = h 
 			?? elem.offsetHeight
 		top = top 
@@ -84,7 +91,7 @@ function(elems,
 		// row done + prep for next...
 		} else {
 			var expanded_row = 
-				prevent_row_expansion ?
+				options.prevent_row_expansion ?
 					handleRow()
 					: handleRow('expand')
 			// prep for next row...
@@ -99,8 +106,8 @@ function(elems,
 				top = null
 				row = [] }}}
 	// handle last row...
-	last_row_resize
+	options.last_row_resize
-		&& handleRow(last_row_resize) }
+		&& handleRow(options.last_row_resize) }
 
 var getScrollParent = 
 function(elem){
@@ -942,9 +949,11 @@ var Gallery = {
 		// do the update...
 		this.__update_grid_size_running = true
 		try{
-			patchFlexRows(this.images, 
+			patchFlexRows(this.images, {
-				!this.allow_row_expansion, 
+				prevent_row_expansion: !this.allow_row_expansion, 
-				this.last_row_resize ?? 1.2)
+				last_row_resize: this.last_row_resize ?? 1.2,
+				height_attr: '--gallery-image-base-height',
+			})
 		}catch(err){ }
 		delete this.__update_grid_size_running
 		return this },