|
iChange COMMUNITY RESOURCES BUSINESS • PERSONAL • COMMUNITY ↑ ↓ SELECT ENTER EXPLORE |
alert('RESOURCE INDEX JAVASCRIPT IS RUNNING');
(function () {
const resources = Array.from( document.querySelectorAll( '#ichange-resource-index .ichange-resource' ) );
if (!resources.length) { return; }
let selectedIndex = 0;
function drawSelection() {
resources.forEach(function (resource, index) {
if (index === selectedIndex) {
resource.style.background = '#f1c84c';
resource.style.color = '#082f5c';
resource.style.borderLeft = '5px solid #f1c84c';
}
else {
resource.style.background = 'transparent';
resource.style.color = '#ffffff';
resource.style.borderLeft = '5px solid transparent';
}
});
}
function selectResource(index) {
selectedIndex = index;
drawSelection();
}
resources.forEach(function (resource, index) {
resource.addEventListener( 'click', function () {
selectResource(index);
} );
});
window.addEventListener( 'keydown', function (event) {
if ( event.key === 'ArrowDown' || event.key === 'ArrowUp' ) {
event.preventDefault(); event.stopPropagation();
}
if (event.key === 'ArrowDown') {
selectedIndex = (selectedIndex + 1) % resources.length;
drawSelection();
return;
}
if (event.key === 'ArrowUp') {
selectedIndex = ( selectedIndex - 1 + resources.length ) % resources.length;
drawSelection();
return;
}
if (event.key === 'Enter') {
event.preventDefault();
/* * RESERVED FOR MODAL */
}
}, true );
drawSelection();
})();