-
No file
-
-
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index 345edd1..f18fa1b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
-const imageExtensions = ['gif','jpg','jpeg','png', 'webp'];
+const imageExtensions = ['gif','jpg','jpeg','png', 'webp', 'svg', 'pdf'];
const videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4'];
const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
-const invalidFileNameCharsRe =/[^\\/\|:\*\?"<>]/; // dont allow \/|:*?<>
+const invalidFileNameCharsRe =/[\\/\|:\*\?"<>]/; // dont allow \/|:*?<>
const invalidFileNameChars = "\\/|:*?<>";
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
@@ -78,13 +78,13 @@ function renderMoveButtons() {
const buttons = document.getElementById('move-buttons');
buttons.innerHTML = '';
mappings.forEach((directory, key) => {
- const removeButton = document.createElement('button');
- removeButton.innerHTML = `${key} ${directory}`;
- removeButton.onclick = function() {
+ const moveButton = document.createElement('button');
+ moveButton.innerHTML = `${key} ${directory}`;
+ moveButton.onclick = function() {
moveFile(directory);
};
- removeButton.class = "move-button";
- buttons.appendChild(removeButton);
+ moveButton.className = "move-button";
+ buttons.appendChild(moveButton);
});
}
@@ -216,6 +216,29 @@ function setCurrentFile() {
}
+function setCurrentFileFromName(filename) {
+ let idx = fileList.indexOf(filename);
+ if (idx < 0) {
+ message = `Can not set file from name '${filename}': Not found in list`;
+ statusLine.textContent = message;
+ console.error(message);
+ return;
+ }
+ currentFileIdx = idx;
+ setCurrentFile();
+}
+
+// Event delegation
+document.getElementById('file-list').addEventListener('click', function(event) {
+ if (event.target && event.target.tagName === 'P') {
+ // Call the function with the content of the clicked paragraph
+ if (event.target.textContent != "No files") {
+ setCurrentFileFromName(event.target.textContent);
+ }
+ }
+});
+
+
async function moveFile(directory) {
if (!currentFile) {
@@ -288,13 +311,15 @@ function skip() {
async function initialize() {
+ // remove the value on reload
+ document.getElementById('filename').value = "";
await setStagingPath();
await setFileList();
renderMoveButtons();
renderFileList();
// setCurrentFile();
preloadNextFile();
- statusLine.textContent = "Loaded";
+ statusLine.textContent = "Ready";
}
// load existing mappings on page load
diff --git a/src/sass/main.sass b/src/sass/main.sass
index f65ab80..392f4cb 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -24,10 +24,13 @@ $file-height: 300px
$splash-font-size: 40px
$button-font-size: $font-size
$button-padding: 8px
+$move-button-font-size: $font-size - 2px
+$move-button-padding: $button-padding - 2px
*
font-family: "Ubuntu", Verdana, sans-serif
color: $fg
+ // font-size: $font-size
html, body // fill entire screen so that footer is always on bottom
@@ -94,6 +97,7 @@ footer
min-height: $footer-height // idk why but this is required
overflow-x: scroll
overflow-y: hidden
+ white-space: nowrap
*
color: $bg
.statusline
@@ -117,6 +121,7 @@ a
border-width: 1px
border-color: $fg0-hard
border-radius: 4px
+ font-family: $monofont
// p
// text-align: justify
@@ -143,8 +148,13 @@ button, input
filter: drop-shadow(0.1rem 0.1rem 0 $accent)
font-family: $monofont
margin: 0.2rem
- .move-buttons
- margin: 0
+.move-buttons
+ margin: 0
+
+.move-button
+ font-size: $move-button-font-size
+ padding: $move-button-padding
+
button:hover
color: $button-fg-hl
background-color: $button-bg-hl
@@ -206,13 +216,20 @@ button:hover
margin: 0
padding: 0.1rem
text-align: left
+.file-list-item:hover
+ background: $dark-blue !important
+ color: $bg1
+ cursor: pointer
+
+
+
.file-list-item:nth-child(even)
background: $bg1
.file-list-item:nth-child(odd)
background: $bg2
.selected-file-list-item
- background: $dark-blue !important
+ background: $light-blue !important
color: $bg1
diff --git a/src/style.css b/src/style.css
index 59c7b66..61a8557 100644
--- a/src/style.css
+++ b/src/style.css
@@ -102,6 +102,7 @@ a {
border-width: 1px;
border-color: #1d2021;
border-radius: 4px;
+ font-family: "UbuntuMono", monospace;
}
code {
@@ -130,10 +131,16 @@ button, input {
font-family: "UbuntuMono", monospace;
margin: 0.2rem;
}
-button .move-buttons, input .move-buttons {
+
+.move-buttons {
margin: 0;
}
+.move-button {
+ font-size: 14px;
+ padding: 6px;
+}
+
button:hover {
color: #282828;
background-color: #ebdbb2;
@@ -217,6 +224,12 @@ button:hover {
text-align: left;
}
+.file-list-item:hover {
+ background: #458588 !important;
+ color: #ebdbb2;
+ cursor: pointer;
+}
+
.file-list-item:nth-child(even) {
background: #ebdbb2;
}
@@ -226,7 +239,7 @@ button:hover {
}
.selected-file-list-item {
- background: #458588 !important;
+ background: #076678 !important;
color: #ebdbb2;
}