|
1 | | - |
2 | 1 | (function () { |
3 | 2 | const vscode = acquireVsCodeApi(); |
4 | 3 |
|
| 4 | + let gridElements = document.querySelectorAll(".grid"); |
| 5 | + gridElements.forEach((gridElement) => { |
| 6 | + if (!gridElement.className.includes("grid-0")) { |
| 7 | + gridElement.style.display = "none"; |
| 8 | + gridElement.previousElementSibling.firstElementChild.textContent = "⮞"; |
| 9 | + } |
| 10 | + }); |
| 11 | + |
5 | 12 | let lazyloadImages = document.querySelectorAll(".lazy"); |
6 | 13 | let imageObserver = new IntersectionObserver((entries, observer) => { |
7 | 14 | entries.forEach(entry => { |
|
23 | 30 |
|
24 | 31 | const clickHandler = (event, preview) => { |
25 | 32 | let node = event && event.target; |
26 | | - const folderHeader = ['folder','folder-title','folder-arrow']; |
| 33 | + const folderHeader = ['folder', 'folder-title', 'folder-arrow']; |
27 | 34 | if (folderHeader.some(el => node.classList.contains(el))) { |
28 | | - console.log(node); |
29 | 35 | let id = ''; |
30 | 36 | if (node.classList.contains('folder')) { |
31 | 37 | id = node.id; |
32 | 38 | } else { |
33 | 39 | let lastIndexToSplit = node.id.lastIndexOf('-'); |
34 | 40 | id = node.id.slice(0, lastIndexToSplit); |
35 | | - |
36 | 41 | } |
37 | 42 |
|
38 | 43 | let folderGrid = document.getElementById(id + '-grid'); |
39 | 44 | let folderArrow = document.getElementById(id + '-arrow'); |
40 | | - console.log({folderGrid, folderArrow}); |
41 | | - folderGrid.style.display = folderGrid.style.display === "none" ? "" : "none"; |
| 45 | + folderGrid.style.display = folderGrid.style.display === "none" ? "grid" : "none"; |
42 | 46 | folderArrow.textContent = folderArrow.textContent === "⮟" ? "⮞" : "⮟"; |
| 47 | + |
| 48 | + let expandAll = Array.from(gridElements).some(el => el.style.display === "none"); |
| 49 | + if (expandAll) { |
| 50 | + let collapseAllButton = document.getElementsByClassName("codicon-collapse-all"); |
| 51 | + if (collapseAllButton.length !== 0) { |
| 52 | + collapseAllButton[0].setAttribute("class", "codicon codicon-expand-all"); |
| 53 | + } |
| 54 | + } else { |
| 55 | + let expandAllButton = document.getElementsByClassName("codicon-expand-all"); |
| 56 | + if (expandAllButton.length !== 0) { |
| 57 | + expandAllButton[0].setAttribute("class", "codicon codicon-collapse-all"); |
| 58 | + } |
| 59 | + } |
| 60 | + return; |
43 | 61 | } |
44 | | - if (!node.classList.contains('image')) { return; } |
45 | 62 |
|
46 | | - vscode.postMessage({ |
47 | | - command: 'vscodeImageGallery.openViewer', |
48 | | - src: node.src, |
49 | | - preview: preview, |
50 | | - }); |
| 63 | + if (node.classList.contains("codicon-expand-all")) { |
| 64 | + gridElements.forEach((gridElement) => { |
| 65 | + gridElement.style.display = "grid"; |
| 66 | + gridElement.previousElementSibling.firstElementChild.textContent = "⮟"; |
| 67 | + }); |
| 68 | + node.setAttribute("class", "codicon codicon-collapse-all"); |
| 69 | + return; |
| 70 | + } |
| 71 | + if (node.classList.contains("codicon-collapse-all")) { |
| 72 | + gridElements.forEach((gridElement) => { |
| 73 | + gridElement.style.display = "none"; |
| 74 | + gridElement.previousElementSibling.firstElementChild.textContent = "⮞"; |
| 75 | + }); |
| 76 | + node.setAttribute("class", "codicon codicon-expand-all"); |
| 77 | + return; |
| 78 | + } |
| 79 | + |
| 80 | + if (!node.parentElement.classList.contains('image-container')) { return; } |
| 81 | + |
| 82 | + if (node.parentElement.classList.contains('image-container')) { |
| 83 | + node.parentElement.childNodes.forEach((childNode) => { |
| 84 | + if (childNode.nodeName.toLowerCase() === 'img') { |
| 85 | + vscode.postMessage({ |
| 86 | + command: 'vscodeImageGallery.openViewer', |
| 87 | + src: childNode.src, |
| 88 | + preview: preview, |
| 89 | + }); |
| 90 | + } |
| 91 | + }); |
| 92 | + return; |
| 93 | + } |
| 94 | + return; |
51 | 95 | }; |
52 | | - document.addEventListener('click', event => clickHandler(event, preview=true), true); |
53 | | - document.addEventListener('dblclick', event => clickHandler(event, preview=false), true); |
| 96 | + document.addEventListener('click', event => clickHandler(event, preview = true), { passive: true }); |
| 97 | + document.addEventListener('dblclick', event => clickHandler(event, preview = false), { passive: true }); |
| 98 | + |
| 99 | + document.addEventListener('mouseover', event => { |
| 100 | + const node = event && event.target; |
| 101 | + if (!node.classList.contains('image')) { return; } |
| 102 | + |
| 103 | + const lastDotIndex = node.src.lastIndexOf('.'); |
| 104 | + const imgExtension = node.src.slice(lastDotIndex + 1, ).toUpperCase(); |
| 105 | + const dateOptions = { |
| 106 | + year: 'numeric', |
| 107 | + month: 'long', |
| 108 | + day: 'numeric', |
| 109 | + hour: '2-digit', |
| 110 | + minute: '2-digit', |
| 111 | + second: '2-digit', |
| 112 | + }; |
| 113 | + |
| 114 | + const imgMetadata = JSON.parse(node.getAttribute('data-meta')); |
| 115 | + const createdDate = new Date(imgMetadata.ctime).toLocaleDateString('en-US', dateOptions); |
| 116 | + const modifiedDate = new Date(imgMetadata.mtime).toLocaleTimeString('en-US', dateOptions); |
| 117 | + let i = Math.floor(Math.log(imgMetadata.size) / Math.log(1024)); |
| 118 | + let imgSize = (imgMetadata.size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['bytes', 'KB', 'MB', 'GB', 'TB'][i]; |
| 119 | + |
| 120 | + node.previousElementSibling.textContent = ( |
| 121 | + `Dimensions: ${node.naturalHeight} x ${node.naturalWidth} |
| 122 | + Type: ${imgExtension} |
| 123 | + Size: ${imgSize} |
| 124 | + Created: ${createdDate} |
| 125 | + Modified: ${modifiedDate}` |
| 126 | + ).replace(/^ +/gm, ''); |
| 127 | + return; |
| 128 | + }); |
54 | 129 |
|
55 | 130 | window.addEventListener('message', event => { |
56 | 131 | const message = event.data; |
57 | 132 |
|
58 | 133 | switch (message.command) { |
59 | 134 | case 'vscodeImageGallery.addImage': |
60 | 135 | let addedTimestamp = new Date().getTime(); |
| 136 | + let folder = Object.keys(message.imagesBySubFolders)[0]; |
61 | 137 | let imgNode = document.createElement("img"); |
62 | 138 | imgNode.setAttribute("class", "image loaded"); |
63 | 139 | imgNode.setAttribute("id", message.imgPath); |
64 | 140 | imgNode.setAttribute("src", `${message.imgSrc}?t=${addedTimestamp}`); |
65 | 141 | imgNode.setAttribute("data-src", `${message.imgSrc}?t=${addedTimestamp}`); |
| 142 | + imgNode.setAttribute("data-meta", `${JSON.stringify(message.imagesBySubFolders[folder][0].imgMetadata)}`); |
66 | 143 |
|
67 | 144 | let divNode = document.createElement("div"); |
68 | 145 | divNode.setAttribute("class", "filename"); |
69 | 146 | divNode.setAttribute("id", message.imgPath + "-filename"); |
70 | 147 | divNode.textContent = message.imgPath.split("/").pop(); |
71 | 148 |
|
| 149 | + let tooltipNode = document.createElement("span"); |
| 150 | + tooltipNode.setAttribute("class", "tooltiptext"); |
| 151 | + tooltipNode.setAttribute("id", message.imgPath + "-tooltip"); |
| 152 | + |
72 | 153 | let containerNode = document.createElement("div"); |
73 | | - containerNode.setAttribute("class", "image-container"); |
| 154 | + containerNode.setAttribute("class", "image-container tooltip"); |
| 155 | + containerNode.appendChild(tooltipNode); |
74 | 156 | containerNode.appendChild(imgNode); |
75 | 157 | containerNode.appendChild(divNode); |
76 | | - |
77 | | - let grid = document.getElementById(`${Object.keys(message.pathsBySubFolders)[0]}-grid`); |
| 158 | + |
| 159 | + let grid = document.getElementById(`${folder}-grid`); |
78 | 160 | grid.appendChild(containerNode); |
| 161 | + |
| 162 | + let folderItemsCountOnAdd = document.getElementById(`${folder}-items-count`); |
| 163 | + folderItemsCountOnAdd.textContent = folderItemsCountOnAdd.textContent.replace(/\d+/g, (match, _) => parseInt(match) + 1); |
79 | 164 | break; |
80 | 165 | case 'vscodeImageGallery.changeImage': |
81 | 166 | let changedTimestamp = new Date().getTime(); |
82 | 167 | let changeImage = document.getElementById(message.imgPath); |
83 | 168 | changeImage.setAttribute("src", `${message.imgSrc}?t=${changedTimestamp}`); |
84 | 169 | changeImage.setAttribute("data-src", `${message.imgSrc}?t=${changedTimestamp}`); |
| 170 | + changeImage.setAttribute("data-meta", `${JSON.stringify(message.imagesBySubFolders[folder][0].imgMetadata)}`); |
85 | 171 |
|
86 | 172 | let changeFilename = document.getElementById(message.imgPath + "-filename"); |
87 | 173 | changeFilename.setAttribute("class", "filename"); |
|
91 | 177 | case 'vscodeImageGallery.deleteImage': |
92 | 178 | let deleteImage = document.getElementById(message.imgPath); |
93 | 179 | deleteImage.parentElement.remove(); |
| 180 | + |
| 181 | + let folderItemsCountOnDel = document.getElementById(`${Object.keys(message.imagesBySubFolders)[0]}-items-count`); |
| 182 | + folderItemsCountOnDel.textContent = folderItemsCountOnDel.textContent.replace(/\d+/g, (match, _) => parseInt(match) - 1); |
94 | 183 | break; |
95 | 184 | } |
96 | 185 | }, true); |
|
0 commit comments