Toggle Ornn Items visibility at lolshop.gg

a.md

Instructions

• Install the User JavaScript and CSS chrome extension (or something similar in your favorite browser)

• Add the following snippets into the extension.

• If everthing works as expected you will see an Ornn icon in the tabs:

b.css

.toggleOrnnItems {
	padding: 1rem .75rem;
}

.toggleOrnnItems.disabled {
	filter: grayscale(.8);
}

.hidden {
	display: none;
}

c.js

const toggleOrnnItems = (e) => {
	const allOrnnItems = document.querySelectorAll(".Image_ornnBorder__Fu1ul");
	e.target.closest("button").classList.toggle("disabled");
	allOrnnItems.forEach(i => i.closest("[class^='Grid_grid']").classList.toggle("hidden"));
}

const reset = (e) => document.querySelector(".toggleOrnnItems").classList.remove("disabled");

const searchControls = document.querySelector("[class^='Tabs_tabs'");

const toggleOrnnItemsIcon = `<button class='toggleOrnnItems' onClick="toggleOrnnItems(event)"><img width='24px' src='https://raw.communitydragon.org/pbe/game/assets/characters/ornn/hud/ornn_circle.png' /></button>`;
	
setTimeout(() => {
	[...document.querySelectorAll("[class^='Tabs_tab_']")].map(i => i.addEventListener("click", reset))
	searchControls.insertAdjacentHTML('beforeend', toggleOrnnItemsIcon);
}, 300);