Compare commits

..

No commits in common. "fb62fbccf7b22c5ca92d9dc6221f302892de7f53" and "b194eef0c5bc27eb19fefb278c06b0aeb3055829" have entirely different histories.

14 changed files with 37 additions and 359 deletions

View File

@ -18,7 +18,7 @@ The web interface has mobile optimizations, letting you sort images/files on the
### Screenshots
<span style="display:inline-block; max-width: 70%; max-height: 510px ; margin-right: 4px">
<img style="display:block; max-width:100%; max-height: 250px; " src="resources/imgsort2-landscape.png" alt="Desktop interface"></img>
<img style="display:block; max-width:100%; max-height: 250px; margin-top: 10px" src="resources/imgsort2-configuration.png" alt="Configuration interface"></img>
<img style="display:block; max-width:100%; max-height: 250px; margin-top: 10px" src="resources/configuration.png" alt="Configuration interface"></img>
</span>
<img style="display:inline-block; max-width: 30%; max-height: 510px" src="resources/imgsort2-vertical.png" alt="Mobile interface"></img>

BIN
resources/configuration.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 832 KiB

After

Width:  |  Height:  |  Size: 601 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 232 KiB

After

Width:  |  Height:  |  Size: 298 KiB

View File

@ -1,149 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="256"
height="256"
viewBox="0 0 67.733332 67.733333"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="2.2173472"
inkscape:cx="146.34605"
inkscape:cy="134.39483"
inkscape:window-width="1896"
inkscape:window-height="1026"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<filter
style="color-interpolation-filters:sRGB;"
inkscape:label="Drop Shadow"
id="filter20"
x="0"
y="0"
width="1.0278316"
height="1.0385704">
<feFlood
result="flood"
in="SourceGraphic"
flood-opacity="1.000000"
flood-color="rgb(157,0,6)"
id="feFlood19" />
<feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="0.000000"
id="feGaussianBlur19" />
<feOffset
result="offset"
in="blur"
dx="1.000000"
dy="0.990099"
id="feOffset19" />
<feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite19" />
<feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite20" />
</filter>
<filter
style="color-interpolation-filters:sRGB;"
inkscape:label="Drop Shadow"
id="filter23"
x="0"
y="0"
width="1.0529345"
height="1.0377">
<feFlood
result="flood"
in="SourceGraphic"
flood-opacity="1.000000"
flood-color="rgb(157,0,6)"
id="feFlood22" />
<feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="0.000000"
id="feGaussianBlur22" />
<feOffset
result="offset"
in="blur"
dx="1.000000"
dy="0.990099"
id="feOffset22" />
<feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite22" />
<feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite23" />
</filter>
</defs>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ebdbb2;stroke-width:2.91042"
id="rect1"
width="67.733337"
height="67.733337"
x="0"
y="0"
ry="18.676485" />
<text
xml:space="preserve"
style="font-size:37.0417px;font-family:Impact;-inkscape-font-specification:Impact;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:2.28782;filter:url(#filter20)"
x="34.285786"
y="31.511433"
id="text1"><tspan
id="tspan1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:37.0417px;font-family:'Ubuntu Nerd Font';-inkscape-font-specification:'Ubuntu Nerd Font';text-align:center;text-anchor:middle;fill:#3c3836;stroke-width:2.28782"
x="34.285786"
y="31.511433"
sodipodi:role="line">Im</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:37.0417px;font-family:'Ubuntu Nerd Font';-inkscape-font-specification:'Ubuntu Nerd Font';text-align:center;text-anchor:middle;fill:#ebdbb2;stroke-width:2.91042;filter:url(#filter23)"
x="31.940487"
y="61.066525"
id="text2"><tspan
sodipodi:role="line"
id="tspan2"
style="font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:37.0417px;font-family:'Ubuntu Nerd Font';-inkscape-font-specification:'Ubuntu Nerd Font Italic';fill:#3c3836;stroke-width:2.91042"
x="31.940487"
y="61.066525">2</tspan></text>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgsort 2 - Config</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
@ -28,9 +27,6 @@
<button type="submit" name="submit">Add</button>
</div>
</form>
<h2>Save / Load</h2>
<button onclick="saveMappings()" id="save-button">Save mappings to file</button>
<button onclick="loadMappings()" id="load-button">Load mappings from file</button>
</div>
<div class="second-box" style="max-height: 100%">

View File

@ -2,8 +2,6 @@
* Handle mappings
* Mappings are stored in local storage as a Map (key: directory)
*/
const invalidFileNameCharsRe =/[^\\\|:\*\?"<>]/; // dont allow \/|:*?<>
const invalidFileNameChars = "\\|:*?<>";
let statusLine = document.getElementById('status');
@ -65,56 +63,6 @@ function addMapping(key, directory) {
renderMappings();
}
/*
* Save/Load from file
*/
function saveMappings() {
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(Array.from(mappings)));
let downloadElement = document.createElement('a');
downloadElement.style = "display: none;";
downloadElement.setAttribute("href", dataStr);
downloadElement.setAttribute("download", "mappings.json");
document.body.appendChild(downloadElement); // required for firefox
downloadElement.click();
downloadElement.remove();
}
function loadMappings() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json';
input.onchange = async (event) => {
const file = event.target.files[0];
if (!file) {
statusLine.textContent = "No file selected";
return;
}
try {
const fileText = await file.text();
const jsonData = JSON.parse(fileText);
// check is valid
if (typeof jsonData !== 'object' || jsonData === null) {
statusLine.textContent = "Invalid JSON structure";
return;
}
// TODO possibly implement sanity checks
localStorage.setItem('mappings', JSON.stringify(jsonData));
renderMappings();
} catch (error) {
console.error(error);;
statusLine = "Error loading file";
}
};
input.click();
}
// event listener for add mapping form
document.getElementById('addMappingForm').addEventListener('submit', function(event) {
event.preventDefault();

View File

@ -5,10 +5,7 @@
// All paths require trailing slashes!
$rootDir = __DIR__ . '/../images/';
// The URI at which the rootDir will be served
// Use /images/ for testing
// When the app is not served at the root https://example.com/ but at a sublocation like https://example.com/imgsort2/,
// you might need to set it to just `images` without the /
$rootPath = '/images/';
$rootPath = 'images/';
// Path of the directory containing all the files to be sorted, relative to $rootDir
$stagingDirName = '.sort/';
@ -80,23 +77,27 @@
/**
* Move a file from staging to the destination directory
* @param file relative to stagingDir
* @param dest new filename relative to rootDir
* @param dir relative to rootDir
*/
function moveFile($file, $dest) {
function moveFile($file, $dir) {
global $stagingDir, $rootDir;
$fullFile = $stagingDir . $file;
$fullDest = $rootDir . $dest;
$fullDir = $rootDir . $dir . "/";
$fullDest = $fullDir . basename($fullFile);
return saveMove($fullFile, $fullDest);
}
/**
* Like movefile, except reversed
* Move a file from destination directory back to the staging directory
* @param dir relative to rootDir
* @param file relative to rootDir/dir
*/
function undoFile($file, $dest) {
function undoFile($file, $dir) {
global $stagingDir, $rootDir;
$fullFile = $stagingDir . $file;
$fullDest = $rootDir . $dest;
return saveMove($fullDest, $fullFile);
$fullDir = $rootDir . $dir . "/";
$fullFile = $fullDir . $file;
$fullDest = $stagingDir . basename($fullFile);
return saveMove($fullFile, $fullDest);
}

View File

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgsort 2</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.png">
</head>
<body>
<script src="index.js" async></script>
@ -22,12 +21,10 @@
</div>
<div class="second-box">
<div class="buttons" id="buttons">
<input id="filename" placeholder="filename" type="text" class="filename-input"></input>
<button onclick="undo()" class="move-button" id="undo-button">Undo</button>
<button onclick="skip()" class="move-button" id="skip-button">Skip</button>
<div id="buttons">
<button onclick="undo()" id="undo-button">Undo</button>
<button onclick="skip()" id="skip-button">Skip</button>
<span class="move-buttons" id="move-buttons"></span>
<br>
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
</div>
<div class="file-list">

View File

@ -1,10 +1,7 @@
const imageExtensions = ['gif','jpg','jpeg','png', 'webp', 'svg', 'pdf'];
const imageExtensions = ['gif','jpg','jpeg','png', 'webp'];
const videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4'];
const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
const invalidFileNameCharsRe =/[\\/\|:\*\?"<>]/; // dont allow \/|:*?<>
const invalidFileNameChars = "\\/|:*?<>";
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
let statusLine = document.getElementById('status');
// store for when done with sorting TODO display
@ -78,13 +75,13 @@ function renderMoveButtons() {
const buttons = document.getElementById('move-buttons');
buttons.innerHTML = '';
mappings.forEach((directory, key) => {
const moveButton = document.createElement('button');
moveButton.innerHTML = `<span class="key">${key}</span> <span class="directory">${directory}</span>`;
moveButton.onclick = function() {
const removeButton = document.createElement('button');
removeButton.innerHTML = `<span class="key">${key}</span> <span class="directory">${directory}</span>`;
removeButton.onclick = function() {
moveFile(directory);
};
moveButton.className = "move-button";
buttons.appendChild(moveButton);
removeButton.class = "move-button";
buttons.appendChild(removeButton);
});
}
@ -206,71 +203,23 @@ function setCurrentFile() {
currentFile = "";
statusLine.textContent = "No more files to sort";
}
// set filename in input field
const fileNameNoExt = currentFile.replace(/\.[^/.]+$/, "");
document.getElementById('filename').value = fileNameNoExt;
renderCurrentFile();
renderFileList();
}
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) {
statusLine.textContent = "No file to process!";
return;
statusLine.innerHTML = "No file to process!";
return
}
const userSetFilename = document.getElementById('filename').value;
if (!userSetFilename) {
statusLine.textContent = "Filename must not be empty";
return;
}
// file names invalid on windows not handled
if (invalidFileNameCharsRe.test(userSetFilename)) {
statusLine.textContent = `Filename must not contain ${invalidFileNameChars}`;
return;
}
// re-add the extension
const fileExt = currentFile.split('.').pop();
let filename = userSetFilename + '.' + fileExt;
let newFilePath = directory + '/' + filename;
const response = await fetch(`imgsort.php?action=moveFile&file=${escape(currentFile)}&dest=${escape(newFilePath)}`);
const response = await fetch(`imgsort.php?action=moveFile&file=${escape(currentFile)}&dest=${directory}`);
const text = await response.text();
// console.log(text);
if (response.ok) {
if (filename != currentFile) {
statusLine.textContent = `Moved '${currentFile}' to '${directory}'`;
} else {
statusLine.textContent = `Moved '${currentFile}' to '${directory}' as '${filename}'`;
}
history.push([currentFile, newFilePath]);
history.push([currentFile, directory]);
// remove file from list
fileList.splice(currentFileIdx, 1);
// set next file
@ -288,12 +237,12 @@ async function undo() {
statusLine.textContent = "Nothing to undo"
return;
}
const [file, newFilePath] = history.pop();
const response = await fetch(`imgsort.php?action=undoFile&file=${escape(file)}&dest=${escape(newFilePath)}`);
const [file, directory] = history.pop();
const response = await fetch(`imgsort.php?action=undoFile&file=${escape(file)}&dest=${directory}`);
const text = await response.text();
// console.log(text);
if (response.ok) {
statusLine.textContent = `Undo: move '${file}' to '${newFilePath}'`;
statusLine.innerHTML = `Undo: move '${file}' to '${directory}'`;
await setFileList()
setCurrentFile();
}
@ -311,15 +260,13 @@ function skip() {
async function initialize() {
// remove the value on reload
document.getElementById('filename').value = "";
await setStagingPath();
await setFileList();
renderMoveButtons();
renderFileList();
// setCurrentFile();
preloadNextFile();
statusLine.textContent = "Ready";
statusLine.textContent = "Loaded";
}
// load existing mappings on page load
@ -329,11 +276,6 @@ window.onload = function() {
// handle keyboard
document.onkeypress = function(e) {
// dont handle keys while user is typing in filename box
if (document.querySelector('input') === document.activeElement) {
return;
}
e = e || window.event;
let keydebug = document.getElementById("keydebug");
if (keydebug) {

View File

@ -24,13 +24,10 @@ $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
@ -97,7 +94,6 @@ footer
min-height: $footer-height // idk why but this is required
overflow-x: scroll
overflow-y: hidden
white-space: nowrap
*
color: $bg
.statusline
@ -121,7 +117,6 @@ a
border-width: 1px
border-color: $fg0-hard
border-radius: 4px
font-family: $monofont
// p
// text-align: justify
@ -150,11 +145,6 @@ button, input
margin: 0.2rem
.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
@ -171,11 +161,6 @@ button:hover
width: 20px
text-align: center
// #directory
#save-button
filter: drop-shadow(0.1rem 0.1rem 0 $light-red)
#load-button
filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
.add-mapping-form
@ -198,10 +183,6 @@ button:hover
// width: 50%
.filename-input
width: 90%
margin: auto
padding: 0.1rem
.file-list
width: 90%
margin: auto
@ -216,20 +197,13 @@ 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: $light-blue !important
background: $dark-blue !important
color: $bg1
@ -238,7 +212,6 @@ button:hover
main
display: flex
flex-direction: row
padding-bottom: $footer-height + 2 * $footer-padding-y
.main-box
width: 75%
max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
@ -259,8 +232,6 @@ button:hover
width: 100%
footer
width: 100%
position: fixed

View File

@ -102,7 +102,6 @@ a {
border-width: 1px;
border-color: #1d2021;
border-radius: 4px;
font-family: "UbuntuMono", monospace;
}
code {
@ -131,16 +130,10 @@ button, input {
font-family: "UbuntuMono", monospace;
margin: 0.2rem;
}
.move-buttons {
button .move-buttons, input .move-buttons {
margin: 0;
}
.move-button {
font-size: 14px;
padding: 6px;
}
button:hover {
color: #282828;
background-color: #ebdbb2;
@ -167,14 +160,6 @@ button:hover {
text-align: center;
}
#save-button {
filter: drop-shadow(0.1rem 0.1rem 0 #9d0006);
}
#load-button {
filter: drop-shadow(0.1rem 0.1rem 0 #076678);
}
.add-mapping-form {
margin: auto;
padding-bottom: 0.4rem;
@ -199,12 +184,6 @@ button:hover {
margin-left: 0;
}
.filename-input {
width: 90%;
margin: auto;
padding: 0.1rem;
}
.file-list {
width: 90%;
margin: auto;
@ -224,12 +203,6 @@ button:hover {
text-align: left;
}
.file-list-item:hover {
background: #458588 !important;
color: #ebdbb2;
cursor: pointer;
}
.file-list-item:nth-child(even) {
background: #ebdbb2;
}
@ -239,7 +212,7 @@ button:hover {
}
.selected-file-list-item {
background: #076678 !important;
background: #458588 !important;
color: #ebdbb2;
}
@ -247,7 +220,6 @@ button:hover {
main {
display: flex;
flex-direction: row;
padding-bottom: 24px;
}
.main-box {
width: 75%;