mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-16 14:34:10 +02:00
Add a click listener on the 'from' list
This commit is contained in:
parent
7d36e4399e
commit
4e684a7cad
1 changed files with 79 additions and 70 deletions
|
@ -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) {
|
function createAndCustomizeLink(selectEl, selectElId, className, title, imgSrc, imgAlt, dataMappings, dataPopup, position) {
|
||||||
// Create a link element
|
// Create a link element
|
||||||
var link = document.createElement('a');
|
var link = document.createElement('a');
|
||||||
|
@ -124,77 +194,16 @@ function createAndCustomizeLink(selectEl, selectElId, className, title, imgSrc,
|
||||||
return link;
|
return link;
|
||||||
}
|
}
|
||||||
|
|
||||||
function customizeSelectElement(el, elId) {
|
function handleSelectClick(event, selectElement, changeLink, deleteLink, viewLink) {
|
||||||
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
|
|
||||||
);
|
|
||||||
|
|
||||||
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
|
// Access the target element that was clicked
|
||||||
var clickedElement = event.target;
|
var clickedElement = event.target;
|
||||||
|
|
||||||
// If one item is selected enable buttons, otherwise disable them
|
// If one item is selected, enable buttons; otherwise, disable them
|
||||||
if (el.selectedOptions.length === 1) {
|
if (selectElement.selectedOptions.length === 1) {
|
||||||
enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, clickedElement.value);
|
enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, clickedElement.value);
|
||||||
} else {
|
} else {
|
||||||
disableRelatedWidgetButtons(changeLink, deleteLink, viewLink);
|
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)});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableRelatedWidgetButtons(changeLink, deleteLink, viewLink) {
|
function disableRelatedWidgetButtons(changeLink, deleteLink, viewLink) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue