Merge pull request #78 from geriyoco/main

🔖 Publish v0.2.7

Author: alex2chan

.github/workflows/vsce_publish.yml

@@ -4,9 +4,6 @@ on:
   push:
     branches:
     - production
-  release:
-    types:
-    - created
 
 jobs:
   build:

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## [0.2.7] - 2022-06-26
+### Changed
+- Single clicking an image in Gallery view opens up the image in Preview Mode
+- Double clicking an image in Gallery view opens up the image (not in Preview Mode)
+### Fixed
+- Files within subfolders were not being sorted correctly
+
 ## [0.2.6] - 2022-06-23
 ### Added
 - Gallery supports collapsible subfolders

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright (c) 2022 TEH, Chi-En
+Copyright (c) 2022 GeriYoco owners, including Alex CHANDRA (alex2chan) and TEH
+Chi-En (fanurs).
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,5 +1,5 @@
 # Image Gallery
-[![.github/workflows/vsce_publish.yml](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml/badge.svg?branch=production&event=release)](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml)
+[![.github/workflows/vsce_publish.yml](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml/badge.svg?branch=production)](https://github.com/geriyoco/vscode-image-gallery/actions/workflows/vsce_publish.yml)
 
 A light-weighted extension that brings you the best image browsing experience in VS Code.
 
@@ -21,6 +21,6 @@ A light-weighted extension that brings you the best image browsing experience in
 See [here](docs/photo_credits.md) for the photo credits.
 
 ## Like this work?
-- :star: Star this project on [GitHub](https://github.com/geriyoco/vscode-image-gallery) and [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GeriYoco.vscode-image-gallery)
-- :arrow_right_hook: Share with your friends: [Twitter](https://www.twitter.com/home?status=Just%20discovered%20this%20on%20the%20%23VSMarketplace%3A%20https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DGeriYoco.vscode-image-gallery), [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://marketplace.visualstudio.com/items?itemName=GeriYoco.vscode-image-gallery)
-- :computer: Contribute to the project
+- ⭐ Star this project on [GitHub](https://github.com/geriyoco/vscode-image-gallery) and [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=GeriYoco.vscode-image-gallery)
+- ↪️ Share with your friends: [Twitter](https://twitter.com/intent/tweet?text=Just%20discovered%20this%20on%20the%20%23VSMarketplace%3A%20https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DGeriYoco.vscode-image-gallery), [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://marketplace.visualstudio.com/items?itemName=GeriYoco.vscode-image-gallery)
+- 🖥️ Contribute to the project

media/gallery.js

@@ -20,8 +20,8 @@
 	lazyloadImages.forEach((image) => {
 		imageObserver.observe(image);
 	});
-	
-	document.addEventListener('click', event => {
+
+	const clickHandler = (event, preview) => {
 		let node = event && event.target;
 		const folderHeader = ['folder','folder-title','folder-arrow'];
 		if (folderHeader.some(el => node.classList.contains(el))) {
@@ -46,10 +46,11 @@
 		vscode.postMessage({
 			command: 'vscodeImageGallery.openViewer',
 			src: node.src,
+			preview: preview,
 		});
-
-	}, true);
-
+	};
+	document.addEventListener('click', event => clickHandler(event, preview=true), true);
+	document.addEventListener('dblclick', event => clickHandler(event, preview=false), true);
 
 	window.addEventListener('message', event => {
 		const message = event.data;

package.json

@@ -2,7 +2,7 @@
 	"name": "vscode-image-gallery",
 	"displayName": "Image Gallery",
 	"description": "An extension that enhances image browsing experience.",
-	"version": "0.2.6",
+	"version": "0.2.7",
 	"publisher": "GeriYoco",
 	"repository": {
 		"type": "git",

src/extension.ts

@@ -1,17 +1,16 @@
 import * as vscode from 'vscode';
-import * as main_panel from './main_panel';
-import * as viewer_panel from './viewer_panel';
-import * as viewer_editor from './viewer_editor';
+import * as gallery from './gallery';
+import * as viewer from './viewer';
 import * as file_watcher from './file_watcher';
 
 
 export function activate(context: vscode.ExtensionContext) {
 	console.log('Welcome! VS Code extension "GeriYoco: Image Gallery" is now active.');
 
-	const viewerEditor = new viewer_editor.ViewerCustomEditor(context);
+	const viewerEditor = new viewer.ViewerCustomEditor(context);
 	context.subscriptions.push(
 		vscode.window.registerCustomEditorProvider(
-			viewer_editor.ViewerCustomEditor.viewType,
+			viewer.ViewerCustomEditor.viewType,
 			viewerEditor,
 			{
 				supportsMultipleEditorsPerDocument: true,
@@ -25,23 +24,23 @@ export function activate(context: vscode.ExtensionContext) {
 	let dispGallery = vscode.commands.registerCommand(
 		'vscodeImageGallery.openGallery',
 		async (galleryFolder?: vscode.Uri) => {
-			const mainPanel = await main_panel.createPanel(context, galleryFolder);
+			const mainPanel = await gallery.createPanel(context, galleryFolder);
 			const galleryFileWatcher = file_watcher.galleryFileWatcher(mainPanel, galleryFolder);
 			context.subscriptions.push(galleryFileWatcher);
 
 			mainPanel.webview.onDidReceiveMessage(
-				message => {
+				async message => {
 					switch (message.command) {
 						case 'vscodeImageGallery.openViewer':
-							const viewerPanel = viewer_panel.createPanel(context, message.src);
-							const viewerFileWatcher = file_watcher.viewerFileWatcher(viewerPanel);
-
-							viewerPanel.onDidDispose(
-								() => {
-									viewerFileWatcher.dispose();
+							const resource = vscode.Uri.file(vscode.Uri.parse(message.src).path);
+							await vscode.commands.executeCommand(
+								'vscode.open',
+								resource,
+								{
+									preserveFocus: true,
+									preview: message.preview,
+									viewColumn: vscode.ViewColumn.Two,
 								},
-								undefined,
-								context.subscriptions
 							);
 							return;
 					}

src/main_panel.ts renamed to src/gallery.ts

@@ -51,7 +51,7 @@ export function sortPathsBySubFolders(pathsBySubFolders: { [key: string]: Array<
     Object.keys(pathsBySubFolders).sort(comparator).forEach(
         subfolder => {
             sortedResult[subfolder] = pathsBySubFolders[subfolder].sort(
-                (path1: vscode.Uri, path2: vscode.Uri) => path1.path.localeCompare(path2.path)
+                (path1: vscode.Uri, path2: vscode.Uri) => comparator(path1.path, path2.path)
             );
         }
     );

src/viewer_panel.ts renamed to src/viewer.ts

@@ -1,23 +1,32 @@
 import * as vscode from 'vscode';
 import * as utils from './utils';
 
-export function createPanel(
-	context: vscode.ExtensionContext,
-	imgSrc: string,
-) {
-	const panel = vscode.window.createWebviewPanel(
-		'gryc.viewer',
-		`${utils.getFilename(imgSrc)}`,
-		vscode.ViewColumn.Two,
-		{
-			enableScripts: true,
-			retainContextWhenHidden: true,
-		}
-	);
+export class ViewerCustomEditor implements vscode.CustomReadonlyEditorProvider {
+	public static readonly viewType = 'gryc.editor';
+
+	constructor(private readonly context: vscode.ExtensionContext) { }
 
-	panel.webview.html = getWebviewContent(context, panel.webview, imgSrc);
+	public async openCustomDocument(uri: vscode.Uri) {
+		return { uri, dispose: () => { } };
+	}
 
-	return panel;
+	public async resolveCustomEditor(
+		document: vscode.CustomDocument,
+		webviewPanel: vscode.WebviewPanel,
+	): Promise<void> {
+		let documentPath = webviewPanel.webview.asWebviewUri(document.uri).toString();
+		let documentDir = document.uri.path.split('/').slice(0, -1).join('/');
+		webviewPanel.webview.options = {
+			localResourceRoots: [
+				vscode.Uri.joinPath(this.context.extensionUri, 'media'),
+				vscode.Uri.file(utils.getCwd()),
+                vscode.Uri.file(documentDir),
+            ],
+			enableScripts: true,
+			enableForms: false
+		};
+		webviewPanel.webview.html = getWebviewContent(this.context, webviewPanel.webview, documentPath);
+	}
 }
 
 export function getWebviewContent(