Merge pull request #64 from geriyoco/main

🚀 Updating to v0.2.6

CHANGELOG.md

@@ -1,11 +1,18 @@
 # Change Log
 
-## [0.2.5] - 2022-04-28
+## [0.2.6] - 2022-06-23
+### Added
+- Gallery supports collapsible subfolders
+- Sort subfolders and files by alphanumeric order
+
+## [0.2.5] - 2022-05-14
 ### Added
 - Sort filenames by alphanumeric order by default
 - Added additional configuration for sorting in settings
 
-## [0.2.3] - 2022-04-28
+## [0.2.4] - 2022-05-12
+
+## [0.2.3] - 2022-05-01
 ### Added
 - Display filename as tab title in the viewer
 - Display filename underneath each image in gallery

README.md

@@ -7,6 +7,7 @@ A light-weighted extension that brings you the best image browsing experience in
 - Smooth panning and zooming
 - Gallery view of images
 - Lazily load images as they are scrolled into view
+- Collapsible subfolders
 - Clicking on an image opens it up in a viewer tab
 - Auto-refresh when modified
 - Extension size less than 1 MB

media/gallery.css

@@ -4,6 +4,7 @@
 
 html {
 	scroll-behavior: smooth;
+	overflow-y: scroll;
 }
 
 .grid {
@@ -12,7 +13,7 @@ html {
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	grid-auto-rows: 250px;
 	grid-gap: 10px;
-	padding: 10px
+	padding: 10px;
 }
 
 .image-container {
@@ -56,4 +57,24 @@ html {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
+}
+
+.folder {
+	margin-top: 5px;
+	padding: 15px;
+	display: flex;
+	width: 100%;
+	background-color: hsl(0, 0%, 17%);
+	color: white;
+	border: 0;
+}
+
+.folder-title {
+	padding-left: 10px;
+	text-align: left;
+	flex-grow: 1;
+}
+
+.folder:hover {
+	box-shadow: 0 0 10px hsl(60, 65%, 90%);
 }

media/gallery.js

@@ -2,7 +2,6 @@
 (function () {
 	const vscode = acquireVsCodeApi();
 
-	let grid = document.getElementsByClassName("grid")[0];
 	let lazyloadImages = document.querySelectorAll(".lazy");
 	let imageObserver = new IntersectionObserver((entries, observer) => {
 		entries.forEach(entry => {
@@ -14,37 +13,55 @@
 					image.classList.remove("lazy");
 					image.classList.add("loaded");
 				};
-				if (lazyloadImages[lazyloadImages.length - 1].src === image.src) {
-					imageObserver.disconnect();
-				}
 			}
 		});
 	});
 
 	lazyloadImages.forEach((image) => {
 		imageObserver.observe(image);
 	});
-
+	
 	document.addEventListener('click', event => {
 		let node = event && event.target;
+		const folderHeader = ['folder','folder-title','folder-arrow'];
+		if (folderHeader.some(el => node.classList.contains(el))) {
+			console.log(node);
+			let id = '';
+			if (node.classList.contains('folder')) {
+				id = node.id;
+			} else {
+				let lastIndexToSplit = node.id.lastIndexOf('-');
+				id = node.id.slice(0, lastIndexToSplit);
+
+			}
+
+			let folderGrid = document.getElementById(id + '-grid');
+			let folderArrow = document.getElementById(id + '-arrow');
+			console.log({folderGrid, folderArrow});
+			folderGrid.style.display = folderGrid.style.display === "none" ? "" : "none";
+			folderArrow.textContent = folderArrow.textContent === "⮟" ? "⮞" : "⮟";
+		}
 		if (!node.classList.contains('image')) { return; }
 
 		vscode.postMessage({
 			command: 'vscodeImageGallery.openViewer',
 			src: node.src,
 		});
+
 	}, true);
 
+
 	window.addEventListener('message', event => {
 		const message = event.data;
 
 		switch (message.command) {
 			case 'vscodeImageGallery.addImage':
+				let addedTimestamp = new Date().getTime();
 				let imgNode = document.createElement("img");
 				imgNode.setAttribute("class", "image loaded");
 				imgNode.setAttribute("id", message.imgPath);
-				imgNode.setAttribute("src", message.imgSrc);
-				imgNode.setAttribute("data-src", message.imgSrc);
+				imgNode.setAttribute("src", `${message.imgSrc}?t=${addedTimestamp}`);
+				imgNode.setAttribute("data-src", `${message.imgSrc}?t=${addedTimestamp}`);
 
 				let divNode = document.createElement("div");
 				divNode.setAttribute("class", "filename");
@@ -55,13 +72,15 @@
 				containerNode.setAttribute("class", "image-container");
 				containerNode.appendChild(imgNode);
 				containerNode.appendChild(divNode);
+
+				let grid = document.getElementById(`${Object.keys(message.pathsBySubFolders)[0]}-grid`);
 				grid.appendChild(containerNode);
 				break;
 			case 'vscodeImageGallery.changeImage':
-				let timestamp = new Date().getTime();
+				let changedTimestamp = new Date().getTime();
 				let changeImage = document.getElementById(message.imgPath);
-				changeImage.setAttribute("src", message.imgSrc + "?t=" + timestamp);
-				changeImage.setAttribute("data-src", message.imgSrc + "?t=" + timestamp);
+				changeImage.setAttribute("src", `${message.imgSrc}?t=${changedTimestamp}`);
+				changeImage.setAttribute("data-src", `${message.imgSrc}?t=${changedTimestamp}`);
 
 				let changeFilename = document.getElementById(message.imgPath + "-filename");
 				changeFilename.setAttribute("class", "filename");