<!-- SWAP VALUES ON CLICK -->
<script>
function setupSwitcher({
/* Click Trigger Class */
swapTrigger = "switcher",
/* Essentials */
swapText = "swap-text",
swapDisplay = "swap-display",
swapClass = "swap-class",
swapUrl = "swap-url",
/* Toggle and Add Attributes */
swapToggleAttribute = "swap-toggle-attribute",
swapAddAttribute = "swap-add-attribute",
swapAddAttributeValue = "swap-add-attribute-value",
/* Replace Attribute Value */
swapAttributeTarget = "swap-attribute-target",
swapTargetValue = "swap-target-value"
} = {}) {
const swapAll = () => {
// SWAP TEXT
document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapText);
const currentValue = swapDomElement.innerText;
swapDomElement.innerText = nextValue;
swapDomElement.setAttribute(swapText, currentValue);
});
// SWAP DISPLAY
document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapDisplay);
const currentValue = swapDomElement.style.display;
swapDomElement.style.display = nextValue;
swapDomElement.setAttribute(swapDisplay, currentValue);
});
// SWAP CLASS
document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapClass);
swapDomElement.classList.toggle(nextValue);
});
// SWAP URL
document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
const nextValue = swapDomElement.getAttribute(swapUrl);
const currentValue = swapDomElement.href;
swapDomElement.href = nextValue;
swapDomElement.setAttribute(swapUrl, currentValue);
});
// TOGGLE ATTRIBUTE
document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
const toggleAttribute = swapDomElement.getAttribute(
swapToggleAttribute
);
swapDomElement.toggleAttribute(toggleAttribute);
});
// ADD ATTRIBUTE
document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
const newAttributeValue = swapDomElement.getAttribute(
swapAddAttributeValue
);
if (swapDomElement.hasAttribute(newAttribute)) {
swapDomElement.removeAttribute(newAttribute);
} else {
swapDomElement.setAttribute(newAttribute, newAttributeValue);
}
});
// REPLACE ATTRIBUTE VALUE
document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
const attributeTarget = swapDomElement.getAttribute(
swapAttributeTarget
);
let attributeValue = swapDomElement.getAttribute(attributeTarget);
let newValue = swapDomElement.getAttribute(swapTargetValue);
swapDomElement.setAttribute(attributeTarget, newValue);
swapDomElement.setAttribute(swapTargetValue, attributeValue);
});
};
document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
switcherDomElement.addEventListener("click", swapAll);
});
}
setupSwitcher();
</script>
Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.
