Finished config
- Added clearer logic - Added clearer UI
This commit is contained in:
parent
d801e39c44
commit
72cb095dec
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html data-bs-theme="dark">
|
<html data-bs-theme="dark" lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Cooperate Cleaner</title>
|
<title>Cooperate Cleaner</title>
|
||||||
@ -14,7 +14,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="navbar"></div>
|
<div id="navbar"></div>
|
||||||
<div id="content"></div>
|
<div id="content" class="vh-100"></div>
|
||||||
<div id="footer"></div>
|
<div id="footer"></div>
|
||||||
<!-- Neutralino.js client. This file is gitignored,
|
<!-- Neutralino.js client. This file is gitignored,
|
||||||
because `neu update` typically downloads it.
|
because `neu update` typically downloads it.
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
.sidebar {
|
||||||
|
border-left: 1px solid #b1b1b1;
|
||||||
|
}
|
||||||
@ -1,28 +1,52 @@
|
|||||||
<div class="position-relative">
|
<div class="container-fluid h-100">
|
||||||
<button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')">
|
<div class="row h-100">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
|
<div class="col-md-9">
|
||||||
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
|
<div class="position-relative">
|
||||||
</svg>
|
<button type="button" class="btn btn-light back-button top-0 start-0 m-3" onclick="loadView('home')">
|
||||||
Back</button>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
|
||||||
</div>
|
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
|
||||||
<section class="py-5">
|
</svg>
|
||||||
<div class="container text-center">
|
Back
|
||||||
<h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
|
</button>
|
||||||
<p class="lead mb-3">Enter your text, clear, done</p>
|
</div>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1 class="display-4"><strong>Cooperate Cleaner</strong></h1>
|
||||||
|
<p class="lead mb-3">Enter your text, clear, done</p>
|
||||||
|
|
||||||
<h2>Input:</h2>
|
<h2>Input:</h2>
|
||||||
<textarea class="form-control w-100" rows="10"></textarea>
|
<textarea class="form-control w-100" rows="10" id="input-textarea"></textarea>
|
||||||
<button type="button" class="btn btn-success mt-3" id="cleaner-clean-btn">
|
<button type="button" class="btn btn-success mt-5" id="cleaner-clean-btn">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
|
||||||
<path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
|
<path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
|
||||||
</svg>
|
</svg>
|
||||||
Clear my input</button>
|
Clear my input
|
||||||
<div class="visually-hidden">
|
</button>
|
||||||
<h2 class="mt-3">Output:</h2>
|
<div class="visually-hidden" id="output-container-div">
|
||||||
<textarea class="form-control w-100" rows="10"></textarea>
|
<h2 class="mt-5">Output:</h2>
|
||||||
|
<textarea class="form-control w-100" rows="10" id="output-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<div class="sidebar h-100 d-flex flex-column justify-content-center ps-4 pe-4">
|
||||||
|
<h2>Quick Settings</h2>
|
||||||
|
<h4 class="mt-4">Auto copy</h4>
|
||||||
|
<div class="form-check ms-3">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="enable-auto-copy" checked>
|
||||||
|
<label class="form-check-label" for="enable-auto-copy">
|
||||||
|
Enable auto copy to clipboard
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<h4 class="mt-4">Enabled filters</h4>
|
||||||
|
<ul class="list-group list-group-flush" id="filter-list">
|
||||||
|
<!-- Filter checkboxes will be dynamically added here -->
|
||||||
|
<div class="spinner-border" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|||||||
@ -1,23 +1,75 @@
|
|||||||
$(document).ready(function() {
|
(function() {
|
||||||
console.log("Initialization of cleaner.js finished.");
|
let config;
|
||||||
init();
|
|
||||||
});
|
|
||||||
|
|
||||||
function init() {
|
$(document).ready(function() {
|
||||||
$(document).keydown(function(event) {
|
console.log("Initialization of cleaner.js finished.");
|
||||||
if (event.altKey) {
|
config = JSON.parse(window.localStorage.getItem("config"));
|
||||||
if (event.keyCode === 13) {
|
console.log(config);
|
||||||
event.preventDefault();
|
init();
|
||||||
clean();
|
});
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
$(document).keydown(function(event) {
|
||||||
|
if (event.altKey) {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
clean();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
$("#cleaner-clean-btn").click(function() {
|
||||||
$("#cleaner-clean-btn").click(function() {
|
console.log("Clean button clicked");
|
||||||
console.log("Clean button clicked");
|
clean();
|
||||||
clean();
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function clean() {
|
initQuickSettings();
|
||||||
console.log("Cleaning...")
|
}
|
||||||
}
|
|
||||||
|
function initQuickSettings() {
|
||||||
|
const filterList = $("#filter-list");
|
||||||
|
filterList.empty(); // Clear any existing list items
|
||||||
|
|
||||||
|
config.rules.forEach(rule => {
|
||||||
|
const listItem = $(`
|
||||||
|
<li class="list-group-item">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" value="" id="${rule.strToReplace}" ${rule.enabled ? 'checked' : ''}>
|
||||||
|
<label class="form-check-label" for="${rule.strToReplace}">
|
||||||
|
${rule.strToReplace}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`);
|
||||||
|
filterList.append(listItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".form-check-input").change(function() {
|
||||||
|
const rule = config.rules.find(r => r.strToReplace === $(this).attr("id"));
|
||||||
|
if (rule) {
|
||||||
|
rule.enabled = $(this).is(":checked");
|
||||||
|
//window.localStorage.setItem("config", JSON.stringify(config));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function clean() {
|
||||||
|
console.log("Cleaning...");
|
||||||
|
|
||||||
|
// Read the input from the textarea
|
||||||
|
let outputText = $("#input-textarea").val();
|
||||||
|
|
||||||
|
// Process each rule
|
||||||
|
config.rules.forEach(rule => {
|
||||||
|
if (rule.enabled) {
|
||||||
|
const searchValue = rule.ignoreCase ? new RegExp(rule.strToReplace, 'gi') : new RegExp(rule.strToReplace, 'g');
|
||||||
|
outputText = outputText.replace(searchValue, rule.replaceStr);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Output the processed text to the output textarea
|
||||||
|
$("#output-textarea").val(outputText);
|
||||||
|
|
||||||
|
// Display the output container
|
||||||
|
$("#output-container-div").removeClass("visually-hidden");
|
||||||
|
}
|
||||||
|
})();
|
||||||
@ -36,7 +36,8 @@
|
|||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
<th scope="col">String to Replace</th>
|
<th scope="col">String to Replace</th>
|
||||||
<th scope="col">Replace With</th>
|
<th scope="col">Replace With</th>
|
||||||
<th scope="col">Enabled by default</th>
|
<th scope="col">Filter enabled</th>
|
||||||
|
<th scope="col">Ignore case</th>
|
||||||
<th scope="col">Action</th>
|
<th scope="col">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|||||||
@ -1,10 +1,18 @@
|
|||||||
var ruleRowTemplate = '<tr class="border-bottom" id="rule-[INDEX]">' +
|
var ruleRowTemplate = '<tr class="border-bottom" id="rule-[INDEX]">' +
|
||||||
' <td scope="row" class="align-middle"><p class="mb-0">[INDEX]</p></td>' +
|
' <td class="align-middle"><p class="mb-0">[INDEX]</p></td>' +
|
||||||
' <td class="align-middle"><input type="text" class="form-control rule-input-str-input" placeholder="String to replace" value="[STR-TO-REPLACE]"></td>' +
|
' <td class="align-middle"><input type="text" class="form-control rule-input-str-input" placeholder="String to replace" value="[STR-TO-REPLACE]"></td>' +
|
||||||
' <td class="align-middle"><input type="text" class="form-control rule-output-str-input" placeholder="Replace with" value="[REPLACE-STR]"></td>' +
|
' <td class="align-middle"><input type="text" class="form-control rule-output-str-input" placeholder="Replace with" value="[REPLACE-STR]"></td>' +
|
||||||
' <td class="align-middle">' +
|
' <td class="align-middle">' +
|
||||||
' <label class="toggle-switch">' +
|
' <label class="toggle-switch">' +
|
||||||
' <input class="rule-enabled-by-default-toggle" type="checkbox" checked>' +
|
' <input class="rule-enabled-by-default-toggle" type="checkbox" [ENABLED]>' +
|
||||||
|
' <div class="toggle-switch-background">' +
|
||||||
|
' <div class="toggle-switch-handle"></div>' +
|
||||||
|
' </div>' +
|
||||||
|
' </label>' +
|
||||||
|
' </td>' +
|
||||||
|
' <td class="align-middle">' +
|
||||||
|
' <label class="toggle-switch">' +
|
||||||
|
' <input class="ignore-case-toggle" type="checkbox" [IGNORECASE]>' +
|
||||||
' <div class="toggle-switch-background">' +
|
' <div class="toggle-switch-background">' +
|
||||||
' <div class="toggle-switch-handle"></div>' +
|
' <div class="toggle-switch-handle"></div>' +
|
||||||
' </div>' +
|
' </div>' +
|
||||||
@ -25,7 +33,7 @@ $("document").ready(function() {
|
|||||||
loadConfig();
|
loadConfig();
|
||||||
|
|
||||||
$("#add-rule-btn").click(function() {
|
$("#add-rule-btn").click(function() {
|
||||||
appendRow(generateRowTemplate("", "", true));
|
appendRow(generateRowTemplate("", "", true, true));
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on("click", ".rule-trash-btn", function() {
|
$(document).on("click", ".rule-trash-btn", function() {
|
||||||
@ -42,13 +50,21 @@ function appendRow(rowTemplate) {
|
|||||||
updateRowIndexes();
|
updateRowIndexes();
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateRowTemplate(str, outputStr, enabled) {
|
function generateRowTemplate(str, outputStr, enabled, ignoreCase) {
|
||||||
var row = ruleRowTemplate;
|
var row = ruleRowTemplate;
|
||||||
row = row.replaceAll("[INDEX]", $(".table tbody tr").length + 1);
|
row = row.replaceAll("[INDEX]", $(".table tbody tr").length + 1);
|
||||||
row = row.replace("[STR-TO-REPLACE]", str);
|
row = row.replace("[STR-TO-REPLACE]", str);
|
||||||
row = row.replace("[REPLACE-STR]", outputStr);
|
row = row.replace("[REPLACE-STR]", outputStr);
|
||||||
if (!enabled) {
|
if (enabled) {
|
||||||
row = row.replace("checked", "");
|
row = row.replace("[ENABLED]", "checked");
|
||||||
|
} else {
|
||||||
|
row = row.replace("[ENABLED]", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(ignoreCase){
|
||||||
|
row = row.replace("[IGNORECASE]", "checked");
|
||||||
|
} else {
|
||||||
|
row = row.replace("[IGNORECASE]", "");
|
||||||
}
|
}
|
||||||
return row;
|
return row;
|
||||||
}
|
}
|
||||||
@ -66,11 +82,12 @@ function buildAndSaveConfig() {
|
|||||||
$("#saved-status").hide();
|
$("#saved-status").hide();
|
||||||
|
|
||||||
var rules = [];
|
var rules = [];
|
||||||
$(".table tbody tr").each(function(index) {
|
$(".table tbody tr").each(function() {
|
||||||
var rule = {};
|
var rule = {};
|
||||||
rule["strToReplace"] = $(this).find(".rule-input-str-input").val();
|
rule["strToReplace"] = $(this).find(".rule-input-str-input").val();
|
||||||
rule["replaceStr"] = $(this).find(".rule-output-str-input").val();
|
rule["replaceStr"] = $(this).find(".rule-output-str-input").val();
|
||||||
rule["enabledByDefault"] = $(this).find(".rule-enabled-by-default-toggle").is(":checked");
|
rule["enabled"] = $(this).find(".rule-enabled-by-default-toggle").is(":checked");
|
||||||
|
rule["ignoreCase"] = $(this).find(".ignore-case-toggle").is(":checked");
|
||||||
rules.push(rule);
|
rules.push(rule);
|
||||||
});
|
});
|
||||||
configJson["rules"] = rules;
|
configJson["rules"] = rules;
|
||||||
@ -89,7 +106,7 @@ function loadConfig() {
|
|||||||
if (config) {
|
if (config) {
|
||||||
configJson = JSON.parse(config);
|
configJson = JSON.parse(config);
|
||||||
configJson["rules"].forEach(function(rule) {
|
configJson["rules"].forEach(function(rule) {
|
||||||
appendRow(generateRowTemplate(rule["strToReplace"], rule["replaceStr"], rule["enabledByDefault"]));
|
appendRow(generateRowTemplate(rule["strToReplace"], rule["replaceStr"], rule["enabled"], rule["ignoreCase"]));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
$("#saving-status").hide();
|
$("#saving-status").hide();
|
||||||
@ -104,4 +121,7 @@ function bindChangeEvents() {
|
|||||||
$(".rule-enabled-by-default-toggle").off("change").on("change", function() {
|
$(".rule-enabled-by-default-toggle").off("change").on("change", function() {
|
||||||
buildAndSaveConfig();
|
buildAndSaveConfig();
|
||||||
});
|
});
|
||||||
|
$(".ignore-case-toggle").off("change").on("change", function() {
|
||||||
|
buildAndSaveConfig();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user