From 7a28e9ae76c81c2bcbf89f7a68a5a67d57bd6e54 Mon Sep 17 00:00:00 2001 From: Robert Swoboda <53216935+Gengar-i@users.noreply.github.com> Date: Wed, 9 Aug 2023 15:26:39 +0200 Subject: [PATCH] IBX-3069: Fixed selection input in firefox (#835) --- .../js/scripts/admin.contenttype.edit.js | 50 +++++++++++++++---- .../public/scss/_content-type-edit.scss | 4 ++ .../admin/ui/component/collapse.html.twig | 2 +- 3 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js index 6f09f52ef1..57d73d5fcb 100644 --- a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js +++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js @@ -1,5 +1,7 @@ (function (global, doc, ibexa, Routing, Translator, bootstrap) { const SELECTOR_INPUTS_TO_VALIDATE = '.ibexa-input[required]:not([disabled]):not([hidden])'; + const SELETOR_FIELD_INPUTS = + '.ibexa-input-text-wrapper:not(.ibexa-input-text-wrapper--search) > input.ibexa-input--text:not([hidden]):not(ibexa-input-text-wrapper--search)'; const TIMEOUT_REMOVE_HIGHLIGHT = 3000; let sourceContainer = null; let currentDraggedItem = null; @@ -98,17 +100,25 @@ }; const attachFieldDefinitionNodeEvents = (fieldNode, { targetContainer }) => { const fieldGroupInput = fieldNode.querySelector('.ibexa-input--field-group'); - const removeFieldsBtn = fieldNode.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions'); + const fieldDefinitionsInputs = fieldNode.querySelectorAll(SELETOR_FIELD_INPUTS); + const removeFieldBtns = fieldNode.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions'); const fieldInputsToValidate = fieldNode.querySelectorAll(SELECTOR_INPUTS_TO_VALIDATE); const groupCollapseNode = targetContainer.closest('.ibexa-collapse--field-definitions-group'); const { fieldsGroupId } = groupCollapseNode.dataset; fieldInputsToValidate.forEach(attachValidateEvents); fieldGroupInput.value = fieldsGroupId; - removeFieldsBtn.forEach((removeFieldBtn) => { + removeFieldBtns.forEach((removeFieldBtn) => { removeFieldBtn.addEventListener('click', removeField, false); }); + if (navigator.userAgent.includes('Firefox')) { + fieldDefinitionsInputs.forEach((fieldDefinitionsInput) => { + fieldDefinitionsInput.addEventListener('mouseenter', mouseEnterInputHandlerForFirefox, false); + fieldDefinitionsInput.addEventListener('mouseleave', mouseLeaveInputHandlerForFirefox, false); + }); + } + const dropdowns = fieldNode.querySelectorAll('.ibexa-dropdown'); dropdowns.forEach((dropdownContainer) => { @@ -336,6 +346,19 @@ }) .catch(ibexa.helpers.notification.showErrorNotification); }; + const toggleDraggableForFirefox = (input, isMouseEnterEvent) => { + const fieldDefinitionNode = input.closest('.ibexa-collapse--field-definition'); + const collapseBodyNode = fieldDefinitionNode.querySelector('.ibexa-collapse__body'); + + fieldDefinitionNode.setAttribute('draggable', !isMouseEnterEvent); + collapseBodyNode.setAttribute('draggable', !isMouseEnterEvent); + }; + const mouseEnterInputHandlerForFirefox = ({ currentTarget, type }) => { + toggleDraggableForFirefox(currentTarget, type === 'mouseenter'); + }; + const mouseLeaveInputHandlerForFirefox = ({ currentTarget, type }) => { + toggleDraggableForFirefox(currentTarget, type === 'mouseenter'); + }; const validateInput = (input) => { const isInputEmpty = !input.value; const field = input.closest('.form-group'); @@ -519,17 +542,24 @@ firstFieldDefinitionsGroupContent.classList.add('ibexa-collapse--active-field-definitions-group'); } - doc.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions').forEach((removeFieldDefinitionsButton) => { - removeFieldDefinitionsButton.addEventListener('click', removeField, false); + if (navigator.userAgent.includes('Firefox')) { + doc.querySelectorAll(`.ibexa-collapse--field-definition ${SELETOR_FIELD_INPUTS}`).forEach((inputField) => { + inputField.addEventListener('mouseenter', mouseEnterInputHandlerForFirefox, false); + inputField.addEventListener('mouseleave', mouseLeaveInputHandlerForFirefox, false); + }); + } + + doc.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions').forEach((removeFieldDefinitionsBtn) => { + removeFieldDefinitionsBtn.addEventListener('click', removeField, false); }); doc.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions-group').forEach( - (removeFieldDefinitionsGroupButton) => { - const groupFieldsDefinitionCount = removeFieldDefinitionsGroupButton + (removeFieldDefinitionsGroupBtn) => { + const groupFieldsDefinitionCount = removeFieldDefinitionsGroupBtn .closest('.ibexa-collapse--field-definitions-group') .querySelectorAll('.ibexa-collapse--field-definition').length; - removeFieldDefinitionsGroupButton.toggleAttribute('disabled', groupFieldsDefinitionCount > 0); - removeFieldDefinitionsGroupButton.addEventListener('click', removeFieldsGroup, false); + removeFieldDefinitionsGroupBtn.toggleAttribute('disabled', groupFieldsDefinitionCount > 0); + removeFieldDefinitionsGroupBtn.addEventListener('click', removeFieldsGroup, false); }, ); @@ -578,9 +608,9 @@ false, ); }); - doc.querySelectorAll('.ibexa-content-type-edit__field-definition-drop-zone').forEach((collapseCotentNode) => { + doc.querySelectorAll('.ibexa-content-type-edit__field-definition-drop-zone').forEach((collapseContentNode) => { const draggable = new FieldDefinitionDraggable({ - itemsContainer: collapseCotentNode, + itemsContainer: collapseContentNode, selectorItem: '.ibexa-collapse--field-definition', selectorPlaceholder: '.ibexa-field-definitions-placeholder', selectorPreventDrag: '.ibexa-collapse__body', diff --git a/src/bundle/Resources/public/scss/_content-type-edit.scss b/src/bundle/Resources/public/scss/_content-type-edit.scss index 19cb718f73..404db94316 100644 --- a/src/bundle/Resources/public/scss/_content-type-edit.scss +++ b/src/bundle/Resources/public/scss/_content-type-edit.scss @@ -127,6 +127,10 @@ &:hover { border-color: $ibexa-color-dark; + + .ibexa-collapse__draggable-btn .ibexa-icon { + fill: $ibexa-color-dark; + } } .ibexa-collapse { diff --git a/src/bundle/Resources/views/themes/admin/ui/component/collapse.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/collapse.html.twig index 6b3ec4fc8f..ae12a37c01 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/collapse.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/collapse.html.twig @@ -42,7 +42,7 @@ data-bs-target="#{{ body_id }}" > - + {% endblock %}