3
Add the ability to sort lists in the "Denylist" and "Allowlist" tabs.
and probably under the “Settings” tab, “Rewrites.”
If I missed something, please add it .
The code example can be tested on the website https://jsfiddle.net/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable List with Checkboxes and Custom Deletion Prompt</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.list-group-item {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
cursor: move;
}
.form-check-input {
cursor: pointer;
}
.delete-btn {
cursor: pointer;
color: gray;
margin-left: 10px;
position: relative;
top: -2px;
}
.delete-confirmation {
display: none;
position: absolute;
right: 50px;
top: 10px;
background-color: #f8f9fa;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
z-index: 10;
}
.delete-confirmation button {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container mt-4">
<h2>Sortable List with Checkboxes and Deletion</h2>
<ul id="sortable" class="list-group">
<li class="list-group-item">
<span>*.ExampleDomain1</span>
<div>
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="check1">
</div>
<span class="delete-btn">×</span>
<div class="delete-confirmation">
<span>Are you sure?</span>
<button class="btn btn-sm btn-danger confirm-delete">Yes</button>
<button class="btn btn-sm btn-secondary cancel-delete">No</button>
<div class="form-check mt-2">
<input class="form-check-input dont-ask-again" type="checkbox" id="dontAskAgain1">
<label class="form-check-label" for="dontAskAgain1">Don't ask again in this session</label>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<span>*.ExampleDomain2</span>
<div>
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="check2">
</div>
<span class="delete-btn">×</span>
<div class="delete-confirmation">
<span>Are you sure?</span>
<button class="btn btn-sm btn-danger confirm-delete">Yes</button>
<button class="btn btn-sm btn-secondary cancel-delete">No</button>
<div class="form-check mt-2">
<input class="form-check-input dont-ask-again" type="checkbox" id="dontAskAgain2">
<label class="form-check-label" for="dontAskAgain2">Don't ask again in this session</label>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<span>*.ExampleDomain3</span>
<div>
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="check3">
</div>
<span class="delete-btn">×</span>
<div class="delete-confirmation">
<span>Are you sure?</span>
<button class="btn btn-sm btn-danger confirm-delete">Yes</button>
<button class="btn btn-sm btn-secondary cancel-delete">No</button>
<div class="form-check mt-2">
<input class="form-check-input dont-ask-again" type="checkbox" id="dontAskAgain3">
<label class="form-check-label" for="dontAskAgain3">Don't ask again in this session</label>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<span>*.ExampleDomain4</span>
<div>
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="check4">
</div>
<span class="delete-btn">×</span>
<div class="delete-confirmation">
<span>Are you sure?</span>
<button class="btn btn-sm btn-danger confirm-delete">Yes</button>
<button class="btn btn-sm btn-secondary cancel-delete">No</button>
<div class="form-check mt-2">
<input class="form-check-input dont-ask-again" type="checkbox" id="dontAskAgain4">
<label class="form-check-label" for="dontAskAgain4">Don't ask again in this session</label>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<span>*.ExampleDomain5</span>
<div>
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="check5">
</div>
<span class="delete-btn">×</span>
<div class="delete-confirmation">
<span>Are you sure?</span>
<button class="btn btn-sm btn-danger confirm-delete">Yes</button>
<button class="btn btn-sm btn-secondary cancel-delete">No</button>
<div class="form-check mt-2">
<input class="form-check-input dont-ask-again" type="checkbox" id="dontAskAgain5">
<label class="form-check-label" for="dontAskAgain5">Don't ask again in this session</label>
</div>
</div>
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
// Initialize sortable functionality
$("#sortable").sortable();
$("#sortable").disableSelection();
// Handle delete button click
$(".delete-btn").on("click", function() {
var listItem = $(this).closest("li");
var dontAsk = sessionStorage.getItem("dontAskAgain");
// Check if "don't ask again" was selected
if (dontAsk === "true") {
listItem.remove(); // Directly remove the item
} else {
var confirmationBox = $(this).siblings(".delete-confirmation");
confirmationBox.show(); // Show confirmation box if not disabled
}
});
// Handle "Yes" button click for deletion
$(".confirm-delete").on("click", function() {
var listItem = $(this).closest("li");
var confirmationBox = $(this).closest(".delete-confirmation");
var dontAskCheckbox = confirmationBox.find(".dont-ask-again");
if (dontAskCheckbox.is(":checked")) {
sessionStorage.setItem("dontAskAgain", "true");
}
listItem.remove(); // Remove the item
});
// Handle "No" button click to cancel
$(".cancel-delete").on("click", function() {
var confirmationBox = $(this).closest(".delete-confirmation");
confirmationBox.hide(); // Hide the confirmation box
});
// Hide confirmation box when clicking outside of it
$(document).on("click", function(event) {
if (!$(event.target).closest(".delete-confirmation, .delete-btn").length) {
$(".delete-confirmation").hide(); // Hide all confirmation boxes
}
});
});
</script>
</body>
</html>1 reply
-
Nice! I also want to sort the allow and deny domains.
Content aside
-
3
Likes
- 2 mths agoLast active
- 1Replies
- 47Views
-
3
Following