Как удалить аннотацию с помощью Wagtail Review и Annotator.js по нажатию кнопки?

Я работаю с Wagtail Review и Annotator.js в своем проекте. Я хочу добавить кнопку удаления (символ «X» внутри красного круга) к аннотациям, при нажатии на которую должна удаляться соответствующая аннотация. Я добавил кнопку удаления внутри элементов управления аннотацией, но у меня не получается правильно инициировать удаление.

Что у меня есть на данный момент:

  • Я использую Annotator.js для создания и управления аннотациями. Аннотации появляются при наведении на родительский элемент (annotator-outer annotator-viewer).
  • Кнопка удаления динамически внедряется внутрь .annotator-controls span, когда аннотация становится видимой.
  • Я пытаюсь использовать событие click для запуска удаления аннотации, но я не уверен, как правильно вызвать функцию Annotator.js delete или правильно ли я обрабатываю взаимодействие внутри Wagtail Review.

Вот мой текущий подход:

  1. При наведении на родительскую аннотацию (.annotator-outer.annotator-viewer) я динамически добавляю кнопку удаления «X» внутри .annotator-controls.
  2. Я прикрепляю слушателя события click к кнопке удаления.
  3. Я ожидаю, что щелчок вызовет удаление аннотации с помощью Annotator.js.

Фрагмент кода: 

document.addEventListener('DOMContentLoaded', (event) => {
    function deleteAnnotation() {
        console.log('Delete function triggered!');
        // Assuming annotator.js method is accessible to delete the annotation
        if (window.annotator && window.annotator.deleteSelected) {
            window.annotator.deleteSelected();
            console.log('Annotation deleted');
        } else {
            console.log('annotator.js method not found.');
        }
    }

    function injectTextAndAddEvent(span) {
        span.textContent = '×'; // Add delete button content
        span.addEventListener('click', deleteAnnotation); // Attach click event
    }

    document.querySelectorAll('.annotator-outer.annotator-viewer').forEach(parentDiv => {
        parentDiv.addEventListener('mouseenter', function() {
            const span = parentDiv.querySelector('.annotator-controls');
            if (span) {
                injectTextAndAddEvent(span);
            }
        });
    });
});

Проблема:

  • Кнопка появляется, как и ожидалось, но нажатие на нее не удаляет аннотацию.
  • Я не уверен, что использую правильный метод Annotator.js или есть лучший способ взаимодействия с аннотациями внутри фреймворка Wagtail Review.

С чем мне нужна помощь:

  • Как правильно вызвать удаление аннотации с помощью Annotator.js при нажатии на кнопку удаления?
  • Есть ли в Annotator.js или Wagtail Review конкретный метод, который я должен использовать для удаления аннотаций?

Буду признателен за любые соображения от человека, знакомого как с Annotator.js, так и с Wagtail Review.

Измените deleteAnnotation, чтобы взять объект аннотации, и используйте removeAnnotation, чтобы удалить его.

document.addEventListener('DOMContentLoaded', () => {
    function deleteAnnotation(annotation) {
        window.annotator?.removeAnnotation(annotation);
    }

    function injectDeleteButton(span, annotation) {
        span.textContent = '×'; 
        span.onclick = () => deleteAnnotation(annotation);
    }

    document.querySelectorAll('.annotator-outer.annotator-viewer').forEach(parent => {
        parent.onmouseenter = () => {
            const span = parent.querySelector('.annotator-controls');
            const annotation = /* fetch the annotation */;
            span && injectDeleteButton(span, annotation);
        };
    });
});

Чтобы удалить аннотацию как во фронтенде, так и в бэкенде, мы внесли изменения в JavaScript-код и представление Django annotations_api.py.

Цель состоит в том, чтобы динамически удалять аннотацию как во фронт-энде, так и в бэк-энде, не требуя перезагрузки страницы.

Шаги по удалению аннотации

1. JavaScript (Frontend)

  • Код JavaScript прослушивает события mouseenter и mouseleave на элементах с классом annotator-outer annotator-viewer.
  • При наведении на элемент аннотации он определяет ее ID и динамически прикрепляет событие удаления к кнопке «Удалить» в контейнере аннотации.
  • При нажатии на кнопку удаления запускается API-запрос DELETE для удаления аннотации из бэкенда, а также удаляется подсветка аннотации на фронтенде.

Код на JavaScript

Объяснение кода JavaScript

  1. removeHighlight: Удаляет подсветку удаленной аннотации, ссылаясь на data-annotation-id.
  2. deleteAnnotation: отправляет запрос DELETE на бэкенд и при успешном ответе удаляет подсветку аннотации.
  3. injectTextAndAddEvent: инжектирует функциональность удаления в кнопку управления аннотацией при наведении на нее курсора.

2. Обновление бэкенда Django (annotations_api.py)

Представление, отвечающее за обработку аннотаций в annotations_api.py, обновлено, чтобы разрешить запросы DELETE.

Обновлено item Просмотр в annotations_api.py

@never_cache
def item(request, id):
    reviewer, mode = _check_reviewer_credentials(request)

    if request.method == 'GET':
        annotation = get_object_or_404(Annotation, id=id)

        # only allow retrieving annotations within the same review as the current user's credentials
        if reviewer.review != annotation.reviewer.review:
            raise PermissionDenied

        return JsonResponse(annotation.as_json_data())

    elif request.method == 'DELETE':
        annotation = get_object_or_404(Annotation, id=id)

        # Check if the reviewer is allowed to delete the annotation
        if reviewer.review != annotation.reviewer.review:
            raise PermissionDenied

        # If the reviewer has permission, delete the annotation
        annotation.delete()

        return JsonResponse({'status': 'Annotation deleted successfully'}, status=204)

    else:
        return HttpResponseNotAllowed(['GET', 'DELETE'], "Method not allowed")

Объяснение кода Django

  • GET Request: Получает конкретную аннотацию по идентификатору, обеспечивая разрешение рецензента.
  • DELETE Request: Удаляет аннотацию по ID, если у рецензента есть разрешение. Возвращает статус 204, указывающий на успешное удаление.

Summary:

  1. Frontend: JavaScript динамически внедряет обработчик события удаления, посылает запрос DELETE и удаляет основные моменты.
    2. .
  2. Backend: annotations_api.py обрабатывает запросы DELETE для безопасного удаления аннотации из базы данных.

Эта настройка гарантирует, что и фронтенд, и бэкенд будут обрабатывать удаление аннотаций без обновления страницы. Дайте мне знать, соответствует ли это решение вашим требованиям или требуются дополнительные настройки.

Вернуться на верх