oladhari
commented
1 day ago @gasman I do not why you ignore this serious issue by the way, the fact that we can not delete the comments (annotation) one by one is very bad for the UX of our clients I am trying to add manually by overriding the HTML through javascript but can not find yet a solution how to delete the specific annotation I added a designed button to click on it through the design here is my example:
<head>
<style>
.annotator-controls {
position: relative;
cursor: pointer;
font-size: 20px;
color: white !important; /* X color */
background-color: red; /* Button background */
padding: 5px;
border-radius: 50%; /* Make it a circle */
width: 30px; /* Set width and height to create a circular shape */
height: 30px;
display: flex;
align-items: center; /* Center the X vertically */
justify-content: center; /* Center the X horizontally */
font-weight: bold; /* Make the X bold */
transition: background-color 0.3s ease; /* Optional: Transition effect */
}
/* Add the X using the ::before pseudo-element */
.annotator-controls::before {
content: '×'; /* The X mark */
color: white;
}
/* Optional hover effect for better UX */
.annotator-controls:hover {
background-color: darkred; /* Darker red on hover */
}
</style>
</head>
<script>
const app = new annotator.App();
{% if allow_annotations %}
app.include(annotator.ui.main, {
viewerExtensions: [annotatorExt.viewerWithUsernames]
});
{% else %}
app.include(annotatorExt.viewerModeUi);
{% endif %}
app.include(annotator.storage.http, {
'prefix': "{% url 'wagtail_review:annotations_api_root' %}",
'urls': {
create: 'annotations/',
update: 'annotations/{id}/',
destroy: 'annotations/{id}/',
search: 'search/'
},
'headers': {
{% if allow_annotations %}
'X-CSRFToken': document.getElementById('wagtailreview-respond-form').csrfmiddlewaretoken.value,
{% endif %}
'X-WagtailReview-mode': '{{ mode }}',
'X-WagtailReview-reviewer': '{{ reviewer.id }}',
'X-WagtailReview-token': '{{ token }}',
}
});
app.start().then(function () {
app.annotations.load();
});
{% if allow_responses %}
document.addEventListener('DOMContentLoaded', function() {
function deleteAnnotation() {
// Assuming you have access to the annotator.js instance and its methods
// Call the annotator.js method to delete the annotation
console.log("it is clicked")
console.log(this)
}
// Function to inject text and add click event to the span
function injectTextAndAddEvent(span) {
span.addEventListener('click', deleteAnnotation); // Add click event to call delete function
}
document.querySelectorAll('.annotator-outer.annotator-viewer').forEach(parentDiv => {
parentDiv.addEventListener('mouseenter', function() {
// When the parent is hovered, find the span with class 'annotator-controls'
const span = parentDiv.querySelector('.annotator-controls');
if (span) {
injectTextAndAddEvent(span);
}
});
parentDiv.addEventListener('mouseleave', function() {
// You can optionally remove the click event or take another action when hover is removed
const span = parentDiv.querySelector('.annotator-controls');
if (span) {
span.removeEventListener('click', deleteAnnotation); // Optional clean-up
}
});
});
const form = document.getElementById('wagtailreview-respond-form');
form.style.display = 'none';
formShown = false;
{# Auto-update the form's hidden input when clicking on one of the buttons #}
form.querySelectorAll("button").forEach(button =>
button.addEventListener("click", (event) =>
document.querySelector("#id_result").value =
(event.currentTarget.id === "approve_text")
{# values from wagtail_review/models.py RESULT_CHOICES #}
? "approve" : "comment"
)
);
let button_close_modal=document.getElementById("close_modal");
let overlay = document.getElementById("my-overlay");
let button_respond_review=document.getElementById('wagtailreview-respond-button')
button_close_modal.addEventListener('click', function() {
if (formShown) {
form.style.display = 'none';
overlay.style.display = "none";
formShown = false;
}
})
window.onclick = function(event) {
if (event.target == overlay && formShown) {
form.style.display = 'none';
overlay.style.display = "none";
formShown = false;
}
}
button_respond_review.addEventListener('click', function() {
if (formShown) {
form.style.display = 'none';
overlay.style.display = "none";
formShown = false;
} else {
form.style.display = 'block';
overlay.style.display = "block";
if (document.querySelector(".annotator-hl")){
let approved = document.getElementById('approve_text')
let refused = document.getElementById('refuse_text')
approved.classList.add("hidden");
refused.classList.remove("hidden");
}
formShown = true;
}
return false;
});
});
// TODO: add error alert if approve and comment are not selected
{% endif %}
</script>
{% endif %}
gasman
the best solution that I suggest is to replace
Annotator.jspackage in wagtail-review byRecogito.jspackage which can support both deleting annotation one by one and also using on mobile and tablet