From fdf499cee2c46720e487a3a5b4f2a69bdb8a8498 Mon Sep 17 00:00:00 2001 From: MizukiTemma Date: Fri, 5 Jul 2024 15:20:30 +0200 Subject: [PATCH] 544: Refactor toggling of document form fields --- CHANGELOG.md | 1 + lunes_cms/cms/admins/document_admin.py | 2 +- .../static/js/toggle_document_form_fields.js | 103 ++++++++++++++++++ lunes_cms/static/js/toggle_plural_field.js | 97 ----------------- 4 files changed, 105 insertions(+), 98 deletions(-) create mode 100644 lunes_cms/static/js/toggle_document_form_fields.js delete mode 100644 lunes_cms/static/js/toggle_plural_field.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 325d2ea4..79fa9d2c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ UNRELEASED * [ [#512](https://github.com/digitalfabrik/lunes-cms/issues/512) ] Gender neutral language * [ [#532](https://github.com/digitalfabrik/lunes-cms/issues/532) ] Fix color of feedback list in dark mode +* [ [#544](https://github.com/digitalfabrik/lunes-cms/issues/544) ] Refactoring of toggle_plural_field.js 2024.6.0 diff --git a/lunes_cms/cms/admins/document_admin.py b/lunes_cms/cms/admins/document_admin.py index 35161ae2..f5da4159 100644 --- a/lunes_cms/cms/admins/document_admin.py +++ b/lunes_cms/cms/admins/document_admin.py @@ -258,5 +258,5 @@ class Media: css = {"all": ("css/document_form.css",)} js = ( "js/image_preview.js", - "js/toggle_plural_field.js", + "js/toggle_document_form_fields.js", ) diff --git a/lunes_cms/static/js/toggle_document_form_fields.js b/lunes_cms/static/js/toggle_document_form_fields.js new file mode 100644 index 00000000..c7cc655b --- /dev/null +++ b/lunes_cms/static/js/toggle_document_form_fields.js @@ -0,0 +1,103 @@ +if (!$) { + $ = django.jQuery; +} + +// Toggle the plural field depending on the chosen word type +$(document).ready(() => { + const togglePluralWordInput = () => { + const isNoun = $("#id_word_type").val() === "Nomen"; + $("#id_plural").closest("div.row").toggle(isNoun); + }; + + $("#id_word_type").change(togglePluralWordInput); + togglePluralWordInput(); +}); + +// Toggle the drop down for grammatical gender depending on the chosen word type +$(document).ready(() => { + const toggleGenderDropdown = () => { + const isNoun = $("#id_word_type").val() === "Nomen"; + $("#id_grammatical_gender").closest("div.row").toggle(isNoun); + }; + + $("#id_word_type").change(toggleGenderDropdown); + toggleGenderDropdown(); +}); + + +// Detect changes in the "word" field and search for a duplicate +$(document).ready(() => { + $("#id_word").change((event) => { + if ($(event.target).val().length > 0) { + $.ajax({ + type: 'GET', + url: '/api/search_duplicate/' + $(event.target).val(), + dataType: "json", + success: function(data) { + showDuplicates(data, $(event.target).closest(".card-body")); + } + }) + } else { + removeDuplicationCheckMessage(); + } + }); + $("#id_word_type").trigger("change"); +}); + +// Create and show message whether there is a possible duplicate +function showDuplicates(data, parent) { + removeDuplicationCheckMessage(); + + if (data["word"]) { + // If there is a duplicated word, use orange background + result = createSearchResultField("#ffbb4a"); + + // Show alert message + addDetailInfo(result, data["message"], "normal"); + + // Show the duplicated word with its word type + addDetailInfo(result, data["word"], "bold"); + + // Show its definition too for more detail + addDetailInfo(result, data["definition"], "normal"); + + // Show related training sets + addDetailInfo(result, data["training_sets"], "normal"); + } else { + // If there is no duplicate, use green background + result = createSearchResultField("#72f399"); + + // Show message that no duplicate was found + addDetailInfo(result, data["message"], "normal"); + } + + parent.prepend(result); +} + +// Create a zone in which result duplicate search will be shown +function createSearchResultField(backgroundColor){ + messageField = document.createElement("div"); + messageField.setAttribute("id", "result"); + messageField.style.padding = "25px"; + messageField.style.backgroundColor = backgroundColor; + + return messageField; +} + +// Create and add detail information +function addDetailInfo(resultField, info, fontWeight) { + detailInfoField = document.createElement("div"); + detailInfoField.style.fontWeight = fontWeight; + detailInfo = document.createTextNode(info); + detailInfoField.append(detailInfo); + resultField.append(detailInfoField); +} + +// Remove the duplicate search result +function removeDuplicationCheckMessage(){ + const existingMessage = document.getElementById("result"); + + if (existingMessage) { + existingMessage.remove(); + } +} diff --git a/lunes_cms/static/js/toggle_plural_field.js b/lunes_cms/static/js/toggle_plural_field.js deleted file mode 100644 index cb110a57..00000000 --- a/lunes_cms/static/js/toggle_plural_field.js +++ /dev/null @@ -1,97 +0,0 @@ -if (!$) { - $ = django.jQuery; -} - -//Toggle the plural field depending on the chosen word type -$(document).ready(() => { - $("#id_word_type").change((event) => - $("#id_plural") - .closest("div.row") - .toggle($(event.target).val() == "Nomen"), - ); - $("#id_word_type").trigger("change"); -}); - -//Toggle the drop down for grammatical gender depending on the chosen word type -$(document).ready(() => { - $("#id_word_type").change((event) => - $("#id_grammatical_gender") - .closest("div.row") - .toggle($(event.target).val() == "Nomen"), - ); - $("#id_word_type").trigger("change"); -}); - -function removeDuplicationCheckMessage(){ - var existingMessage = document.getElementById("result"); - - if (existingMessage) { - existingMessage.remove(); - } -} - -function showDuplicates(data, parent) { - removeDuplicationCheckMessage(); - - result = document.createElement("div"); - result.setAttribute("id", "result"); - - - if (data["word"]) { - // If there is a duplicated word, use orange background - result.style.backgroundColor = "#ffbb4a"; - result.style.padding = "25px" - - // Show alert message - messageBox = document.createElement("div"); - message = document.createTextNode(data["message"]); - messageBox.append(message); - result.append(messageBox); - // Show the duplicated word with its word type - wordBox = document.createElement("div"); - word = document.createTextNode(data["word"]); - wordBox.style.fontWeight = "bold"; - wordBox.append(word); - result.append(wordBox); - // Show its definition too for more detail - definitionBox = document.createElement("div"); - definition = document.createTextNode(data["definition"]); - definitionBox.append(definition); - result.append(definitionBox); - // Show related training sets - trainingSetsBox = document.createElement("div"); - trainingSets = document.createTextNode(data["training_sets"]); - trainingSetsBox.append(trainingSets); - result.append(trainingSetsBox); - } else { - // If there is no duplicate, use green background - result.style.backgroundColor = "#72f399"; - result.style.padding = "25px" - // Show message that no duplicate was found - messageBox = document.createElement("div"); - message = document.createTextNode(data["message"]); - messageBox.append(message); - result.append(messageBox); - } - - parent.prepend(result); -} - - -$(document).ready(() => { - $("#id_word").change((event) => { - if ($(event.target).val().length > 0) { - $.ajax({ - type: 'GET', - url: '/api/search_duplicate/' + $(event.target).val(), - dataType: "json", - success: function(data) { - showDuplicates(data, $(event.target).closest(".card-body")); - } - }) - } else { - removeDuplicationCheckMessage(); - } - }); - $("#id_word_type").trigger("change"); -}); \ No newline at end of file