Skip to content

Commit

Permalink
Combined file selection with preview table; issue #4
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtooker
jtooker committed Jan 31, 2017
1 parent 7e82191 commit ad26f4f
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 107 deletions.
21 changes: 13 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,22 @@
</nav>
Path: <input type="text" id="filePathInput" readonly />
</div>
<div id="fileListDiv"></div>
<div id="fileListDiv">
<table id="fileTable">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Original Name</th>
<th>New Name</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="fileButtonDiv">
<button id="selectAllButton">Select All</button>
<button id="selectNoneButton">Select None</button>
<button id="renameButton">Rename</button>
</div>
</fieldset>
<fieldset>
Expand Down Expand Up @@ -83,13 +95,6 @@
</div>
</div>
</fieldset>
<div id="previewDiv">
</div>
<div id="renameDiv">
<button type="button" name="renameButton" id="renameButton">
Rename
</button>
</div>
</div> <!-- main -->
<script src="settings.js"></script>
<script src="model.js"></script>
Expand Down
22 changes: 3 additions & 19 deletions model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,9 @@ function model(callback) {
m_fileInfos.forEach(function (fileInfo) {
simpleInfos.push({
checked: fileInfo.enabled,
fileName: fileInfo.fileName
fileName: fileInfo.fileName,
newName: fileInfo.newName,
error: fileInfo.error
});
});

Expand Down Expand Up @@ -203,23 +205,6 @@ function model(callback) {
});
}

// pubic -------------------------------------------------------------------
function getPreview() {
var changes = [];

m_fileInfos.forEach(function (fileInfo) {
if (fileInfo.enabled) {
changes.push({
oldName: fileInfo.fileName,
newName: fileInfo.newName,
error: fileInfo.error
});
}
});

return changes;
}

// private -----------------------------------------------------------------
function isFileTypeEnabled(fileName) {
var found = false;
Expand Down Expand Up @@ -498,7 +483,6 @@ function model(callback) {
areLoading: areLoading,
getFileInfo: getFileInfo,
getOptions: getOptions,
getPreview: getPreview,
setDirectory: setDirectory,
setExtensionFilter: setExtensionFilter,
toggleUsePrefix: toggleUsePrefix,
Expand Down
150 changes: 70 additions & 80 deletions view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
var m_chooseDirectoryButton = document.querySelector("#chooseDirectoryButton");
var m_filePathInput = document.querySelector("#filePathInput");
var m_fileListDiv = document.querySelector("#fileListDiv");
var m_fileTable = document.querySelector("#fileTable");
var m_fileSelectDiv = document.querySelector("#fileButtonDiv");
var m_selectAllButton = document.querySelector("#selectAllButton");
var m_selectNoneButton = document.querySelector("#selectNoneButton");
Expand All @@ -28,7 +29,6 @@
var m_upperExtCheckbox = document.querySelector("#upperExtCheckbox");
var m_extensionToCheckbox = document.querySelector("#extensionToCheckbox");
var m_extensionsToTextInput = document.querySelector("#extensionsToTextInput");
var m_previewDiv = document.querySelector("#previewDiv");
var m_renameButton = document.querySelector("#renameButton");

var m_model;
Expand All @@ -48,48 +48,87 @@
}

// private -----------------------------------------------------------------
function createFileEntryDiv(fileInfo) {
function calculatePreviewRowStyle(fileInfo) {
function calculateColor() {
if (fileInfo.error !== undefined) {
return "red";
}
if (fileInfo.fileName === fileInfo.newName) {
return "gray";
}
}
var color = calculateColor();

return color === undefined
? ""
: "color: " + color;
}

// private -----------------------------------------------------------------
function createFileEntryRow(fileInfo, row) {
var cell;
var checkbox;
var fileNameLabel;
var div;

div = document.createElement("div");
div.id = fileInfo.fileName + ".div";
div.className = "fileEntry";
function toggleRow() {
// delay as the event has not finished
setTimeout(function () {
m_model.toggleSelection(fileInfo.fileName);
});
}

row.style = calculatePreviewRowStyle(fileInfo); // TODO: replace by css class
row.title = fileInfo.error || "";

checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = fileInfo.fileName + ".checkbox";
checkbox.checked = fileInfo.checked;
checkbox.addEventListener("click", function () {
// delay as the event has not finished
setTimeout(function () {
m_model.toggleSelection(fileInfo.fileName);
});
});
cell = row.insertCell();
cell.appendChild(checkbox);

fileNameLabel = document.createElement("label");
fileNameLabel.htmlFor = checkbox.id;
fileNameLabel.appendChild(document.createTextNode(fileInfo.fileName));
cell = row.insertCell();
cell.appendChild(document.createTextNode(fileInfo.fileName));

div.appendChild(checkbox);
div.appendChild(fileNameLabel);
return div;
cell = row.insertCell();
cell.appendChild(document.createTextNode(fileInfo.newName));

row.addEventListener("click", toggleRow);
}

// private -----------------------------------------------------------------
function populateInputFilesArea(fileInfo) {
m_filePathInput.value = fileInfo.directoryPath;

m_fileListDiv.innerHTML = "";
fileInfo.files.forEach(function (fileInfo) {
var div = createFileEntryDiv(fileInfo);
m_fileListDiv.appendChild(div);
});

m_fileSelectDiv.style.display = fileInfo.files.length > 0
function populateFilesArea(fileState) {
var displayStyle = fileState.files.length > 0
? "block"
: "none";
var showRenameButton = true;
var renameCount = fileState.files.filter(function (fileInfo) {
return fileInfo.checked && fileInfo.error === undefined;
}).length > 0;
var oldTBody = m_fileTable.getElementsByTagName("tbody")[0];
var newTBody = document.createElement("tbody");
var row;

m_filePathInput.value = fileState.directoryPath;

fileState.files.forEach(function (fileInfo) {
row = newTBody.insertRow();
createFileEntryRow(fileInfo, row);
});

m_fileTable.replaceChild(newTBody, oldTBody);
m_fileListDiv.style.display = displayStyle;
m_fileSelectDiv.style.display = displayStyle;

showRenameButton = showRenameButton &&
fileState.files.every(function (fileInfo) {
return fileInfo.error === undefined;
});
showRenameButton = showRenameButton &&
fileState.files.some(function (fileInfo) {
return fileInfo.fileName !== fileInfo.newName;
});
showRenameButton = showRenameButton && renameCount > 0;
m_renameButton.disabled = !showRenameButton;
}

// private -----------------------------------------------------------------
Expand All @@ -116,52 +155,6 @@
m_extensionsToTextInput.disabled = !options.haveCustomExtensions;
}

// private -----------------------------------------------------------------
function calculatePreviewRowStyle(fileInfo) {
function calculateColor() {
if (fileInfo.error !== undefined) {
return "red";
}
if (fileInfo.oldName === fileInfo.newName) {
return "gray";
}
}
var color = calculateColor();

return color === undefined
? ""
: " style=\"color: " + color + "\"";
}

// private -----------------------------------------------------------------
function populatePreviewArea(previewData) {
var rowStyle = "";
var rowTitle = "";
var showRenameButton = true;
var html = "<table>";

previewData.forEach(function (fileInfo) {
showRenameButton = showRenameButton && fileInfo.error === undefined;
rowStyle = calculatePreviewRowStyle(fileInfo); // TODO: replace by css class
rowTitle = fileInfo.error === undefined
? ""
: " title=\"" + fileInfo.error + "\"";

html += "<tr" + rowStyle + rowTitle + "><td>";
html += fileInfo.oldName;
html += "</td><td>";
html += fileInfo.newName;
html += "</td></tr>";
});

html += "</table>";

m_previewDiv.innerHTML = html;

showRenameButton = showRenameButton && previewData.length > 0;
m_renameButton.disabled = !showRenameButton;
}

// private -----------------------------------------------------------------
function refresh(what) {
if (what && what.errorMessage) {
Expand All @@ -171,15 +164,12 @@

populateLoading();

if (!what || what.inputFiles) {
populateInputFilesArea(m_model.getFileInfo());
if (!what || what.files) {
populateFilesArea(m_model.getFileInfo());
}
if (!what || what.options) {
populateOptionsArea(m_model.getOptions());
}
if (!what || what.preview) {
populatePreviewArea(m_model.getPreview());
}
}

// private -----------------------------------------------------------------
Expand Down

0 comments on commit ad26f4f

Please sign in to comment.