Add a click listener on the 'from' list

This commit is contained in:
Rachid Mrad 2023-12-04 10:24:21 -05:00
parent 7d36e4399e
commit 4e684a7cad
No known key found for this signature in database
GPG key ID: EF38E4CEC4A8F3CF

View file

@ -80,6 +80,76 @@ function checkElementThenAddToList(id, listOfElements, attempts) {
}
}
function customizeSelectElement(el, elId) {
let changeLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link change-related',
'Change selected item',
'/public/admin/img/icon-changelink.svg',
'Change',
{
'contacts': '/admin/registrar/contact/__fk__/change/?_to_field=id&_popup=1',
'websites': '/admin/registrar/website/__fk__/change/?_to_field=id&_popup=1',
'alternative_domains': '/admin/registrar/website/__fk__/change/?_to_field=id&_popup=1',
},
true,
0
);
let deleteLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link delete-related',
'Delete selected item',
'/public/admin/img/icon-deletelink.svg',
'Delete',
{
'contacts': '/admin/registrar/contact/__fk__/delete/?_to_field=id&_popup=1',
'websites': '/admin/registrar/website/__fk__/delete/?_to_field=id&_popup=1',
'alternative_domains': '/admin/registrar/website/__fk__/delete/?_to_field=id&_popup=1',
},
true,
2
);
let viewLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link view-related',
'View selected item',
'/public/admin/img/icon-viewlink.svg',
'View',
{
'contacts': '/admin/registrar/contact/__fk__/change/?_to_field=id',
'websites': '/admin/registrar/website/__fk__/change/?_to_field=id',
'alternative_domains': '/admin/registrar/website/__fk__/change/?_to_field=id',
},
false,
3
);
let fromList = el.closest('.selector').querySelector(".selector-available select");
fromList.addEventListener('click', function(event) {
handleSelectClick(event, fromList, changeLink, deleteLink, viewLink);
});
el.addEventListener('click', function(event) {
handleSelectClick(event, el, changeLink, deleteLink, viewLink);
});
// Disable buttons when the selectors are interated with (items are moved from one column to the other)
let selectorButtons = [];
selectorButtons.push(el.closest(".selector").querySelector(".selector-chooseall"));
selectorButtons.push(el.closest(".selector").querySelector(".selector-add"));
selectorButtons.push(el.closest(".selector").querySelector(".selector-remove"));
selectorButtons.forEach((selector) => {
selector.addEventListener("click", ()=>{disableRelatedWidgetButtons(changeLink, deleteLink, viewLink)});
});
}
function createAndCustomizeLink(selectEl, selectElId, className, title, imgSrc, imgAlt, dataMappings, dataPopup, position) {
// Create a link element
var link = document.createElement('a');
@ -124,77 +194,16 @@ function createAndCustomizeLink(selectEl, selectElId, className, title, imgSrc,
return link;
}
function customizeSelectElement(el, elId) {
let changeLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link change-related',
'Change selected item',
'/public/admin/img/icon-changelink.svg',
'Change',
{
'contacts': '/admin/registrar/contact/__fk__/change/?_to_field=id&_popup=1',
'websites': '/admin/registrar/website/__fk__/change/?_to_field=id&_popup=1',
'alternative_domains': '/admin/registrar/draftdomain/__fk__/change/?_to_field=id&_popup=1',
},
true,
0
);
function handleSelectClick(event, selectElement, changeLink, deleteLink, viewLink) {
// Access the target element that was clicked
var clickedElement = event.target;
let deleteLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link delete-related',
'Delete selected item',
'/public/admin/img/icon-deletelink.svg',
'Delete',
{
'contacts': '/admin/registrar/contact/__fk__/delete/?_to_field=id&_popup=1',
'websites': '/admin/registrar/website/__fk__/delete/?_to_field=id&_popup=1',
'alternative_domains': '/admin/registrar/draftdomain/__fk__/delete/?_to_field=id&_popup=1',
},
true,
2
);
let viewLink = createAndCustomizeLink(
el,
elId,
'related-widget-wrapper-link view-related',
'View selected item',
'/public/admin/img/icon-viewlink.svg',
'View',
{
'contacts': '/admin/registrar/contact/__fk__/change/?_to_field=id',
'websites': '/admin/registrar/website/__fk__/change/?_to_field=id',
'alternative_domains': '/admin/registrar/draftdomain/__fk__/change/?_to_field=id',
},
false,
3
);
el.addEventListener('click', function(event) {
// Access the target element that was clicked
var clickedElement = event.target;
// If one item is selected enable buttons, otherwise disable them
if (el.selectedOptions.length === 1) {
enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, clickedElement.value);
} else {
disableRelatedWidgetButtons(changeLink, deleteLink, viewLink);
}
});
// Disable buttons when the selectors are interated with (items are moved from one column to the other)
let selectorButtons = [];
selectorButtons.push(el.closest(".selector").querySelector(".selector-chooseall"));
selectorButtons.push(el.closest(".selector").querySelector(".selector-add"));
selectorButtons.push(el.closest(".selector").querySelector(".selector-remove"));
selectorButtons.forEach((selector) => {
selector.addEventListener("click", ()=>{disableRelatedWidgetButtons(changeLink, deleteLink, viewLink)});
});
// If one item is selected, enable buttons; otherwise, disable them
if (selectElement.selectedOptions.length === 1) {
enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, clickedElement.value);
} else {
disableRelatedWidgetButtons(changeLink, deleteLink, viewLink);
}
}
function disableRelatedWidgetButtons(changeLink, deleteLink, viewLink) {