🔀 Merge pull request #49 from geriyoco/feat/display-filename

🗃️ Display filename in gallery and viewer

Author: fanurs

media/gallery.css

@@ -17,6 +17,8 @@ html {
 
 .image-container {
 	overflow: hidden;
+	padding: 2%;
+	width: 100%;
 	justify-self: center;
 	border-radius: 5px;
 	background-color: none;
@@ -32,7 +34,8 @@ html {
 
 .image {
 	border-radius: 5px;
-	height: 100%;
+	padding-top: 2%;
+	height: 85%;
 	width: 100%;
 	object-fit: scale-down;
 }
@@ -45,4 +48,12 @@ html {
 
 .loaded {
 	opacity: 1;
+}
+
+.filename {
+	width: 100%;
+	text-align: center;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
 }

media/gallery.js

@@ -46,16 +46,27 @@
 				imgNode.setAttribute("src", message.imgSrc);
 				imgNode.setAttribute("data-src", message.imgSrc);
 
+				let divNode = document.createElement("div");
+				divNode.setAttribute("class", "filename");
+				divNode.setAttribute("id", message.imgPath + "-filename");
+				divNode.textContent = message.imgPath.split("/").pop();
+
 				let containerNode = document.createElement("div");
 				containerNode.setAttribute("class", "image-container");
 				containerNode.appendChild(imgNode);
+				containerNode.appendChild(divNode);
 				grid.appendChild(containerNode);
 				break;
 			case 'vscodeImageGallery.changeImage':
 				let timestamp = new Date().getTime();
 				let changeImage = document.getElementById(message.imgPath);
 				changeImage.setAttribute("src", message.imgSrc + "?t=" + timestamp);
 				changeImage.setAttribute("data-src", message.imgSrc + "?t=" + timestamp);
+
+				let changeFilename = document.getElementById(message.imgPath + "-filename");
+				changeFilename.setAttribute("class", "filename");
+				changeFilename.setAttribute("id", message.imgPath + "-filename");
+				changeFilename.textContent = message.imgPath.split("/").pop();
 				break;
 			case 'vscodeImageGallery.deleteImage':
 				let deleteImage = document.getElementById(message.imgPath);

media/placeholder.jpg

@@ -16,7 +16,10 @@
 		"Visualization"
 	],
 	"activationEvents": [
-		"onStartupFinished"
+		"onCommand:vscodeImageGallery.openGallery",
+		"onWebviewPanel:gryc.gallery",
+		"onWebviewPanel:gryc.viewer",
+		"onCustomEditor:gryc.editor"
 	],
 	"main": "./dist/extension.js",
 	"browser": "./dist/extension.js",

package-lock.json

@@ -4,7 +4,7 @@ import * as utils from './utils';
 export async function createPanel(context: vscode.ExtensionContext, galleryFolder?: vscode.Uri) {
     const panel = vscode.window.createWebviewPanel(
         'gryc.gallery',
-        'Image Gallery',
+        `Image Gallery${galleryFolder ? ': ' + utils.getFilename(galleryFolder.path) : ''}`,
         vscode.ViewColumn.One,
         {
             enableScripts: true,
@@ -31,12 +31,13 @@ export function getWebviewContent(
     webview: vscode.Webview,
     imgWebviewUris: vscode.Uri[],
 ) {
-    const placeholderUrl = "https://www.prowebdesign.ro/wp-content/uploads/2012/12/2-150x150.jpg";
+    const placeholderUrl = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri, 'media', 'placeholder.jpg'));
     const imgHtml = imgWebviewUris.map(
         img => {
             return `
             <div class="image-container">
                 <img id="${img.path}" src="${placeholderUrl}" data-src="${webview.asWebviewUri(img)}" class="image lazy">
+                <div id="${img.path}-filename" class="filename">${utils.getFilename(img.path)}</div>
             </div>
             `;
         }

package.json

@@ -25,21 +25,54 @@ export const nonce = getNonce();
 
 export function getGlob() {
 	const imgExtensions = [
+		'ai',
 		'avif',
 		'bmp',
+		'dib',
 		'gif',
+		'heif',
+		'heic',
+		'eps',
 		'ico',
+		'ind',
+		'indd',
+		'indt',
+		'jp2',
+		'j2k',
+		'jpf',
+		'jpx',
+		'jpm',
+		'mj2',
 		'jpg',
 		'jpe',
 		'jpeg',
+		'jpg_orig',
 		'jif',
 		'jfif',
 		'jfi',
+		'tif',
+		'tiff',
+		'psd',
 		'png',
+		'raw',
+		'arw',
+		'cr2',
+		'nrw',
+		'k25',
 		'webp',
 		'svg',
+		'svgz',
 	];
 	let upperCaseImg = imgExtensions.map(ext => ext.toUpperCase());
 	const globPattern = '**/*.{' + [...imgExtensions, ...upperCaseImg].join(',') + '}';
 	return globPattern;
+}
+
+export function getFilename(imgPath: string) {
+	let filename = decodeURI(imgPath).split("/").pop();
+
+	if (filename) {
+		return filename.split("?").shift();
+	}
+	return filename;
 }

src/main_panel.ts

@@ -7,7 +7,7 @@ export function createPanel(
 ) {
 	const panel = vscode.window.createWebviewPanel(
 		'gryc.viewer',
-		'Image Gallery: Viewer',
+		`${utils.getFilename(imgSrc)}`,
 		vscode.ViewColumn.Two,
 		{
 			enableScripts: true,