Pierre Fults

/*							
This JavaScript code is useful for 
creating accordion menus that are 
both accessible & usable by 
providing focus to the current 
item selected.
*/			

// document ready
$(function() {
	
	// cache objects
	const mainNavLinks = $('header').find('.main-nav > ul').children('li');
	const acc = $('main').find('.accordion');
	
	// target main nav link clicked
	$(mainNavLinks).on('click', 'a', function(){	
		$('.main-nav a').removeClass('current');
		$(this).addClass('current');
	});
	
	// show only the first panel (by default)
	$(acc).find('button').first().addClass('active');
	$(acc).find('.panel').not(':first').attr('hidden', 'hidden').hide();
	
	// update aria-expanded
	$(acc).find('button').not(':first').attr('aria-expanded', 'false');

	// on click event		
	$(acc).find('h3').on('click', 'button', function(){

		// close all other panels
		let otherButtons = $(acc).find('button').not(this); 
		$(otherButtons).removeClass('active').parent().next().slideUp(400, function() {
			toggleExpanded($(this));
			toggleHidden($(this));
		});

		// open current panel selected
		$(this).toggleClass('active').parent().next().slideToggle(400, function() {
			toggleExpanded($(this));
			toggleHidden($(this));
			focusActiveItem($(this));
		});

	});
	
});  // end ready

// functions

// toggle aria-expanded based on panel visibility
function toggleExpanded(elm){
	$(elm).prev('h3').children('button').attr('aria-expanded', $(elm).is(':visible'));
}  // end func

// toggle hidden based on panel visibility
function toggleHidden(elm){
	$(elm).css('display')==='none' ? $(elm).attr('hidden', 'hidden') : $(elm).removeAttr('hidden'); 
}  // end func

// scroll to target
function smoothScrollingTo(target) {
	const root = $('html, body');	
	$(root).stop().animate({ scrollTop: $(target).offset().top - 10 }, 200);
}  // end func

// shift focus to current active item
function focusActiveItem(elm){   	
	const tgtCodeSect = $('main').find('section:nth-of-type(2)');
	let allActiveBtns = $(tgtCodeSect).children('.accordion').find('button').hasClass('active'), 
	tgtActiveBtn = $(elm).prev('h3').children('button');

	// if no items are active then scroll to top of code section
	// else scroll to top of active item
	!allActiveBtns ? smoothScrollingTo(tgtCodeSect) : smoothScrollingTo(tgtActiveBtn);
}  // end func

/*
This styling code is useful for 
overlaying text on top of 
background images, which provides 
an accessible solution when 
combining text & graphics.
*/

/* site container */
.container {  
	--max-width: 960px; 
	width: min(100% - 2rem, var(--max-width));
	margin-inline: auto;
	@media (min-width: 1024px){ width: min(100%, var(--max-width)); }
}

.infoGraphic { margin-block: 1em .75em; }
.infoGraphic :is(p, h2) { margin: 0; }	
.infoGraphic h2 { 
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	line-height: 1.25;
}

[class*="col-"] {
	margin: 1.5em 0 .2142857em;
	display: grid;
	grid-template-columns: 1fr;
	gap: 21px;
}

.col-33-66 p {
	padding: .5em;
	font-weight: 700;
	font-size: 110%;
	line-height: 1.4;
	color: #FFF;
	background-color: #024b82;	
}

/* one-third two-third col layout */
@media (min-width: 634px) { 
	.col-33-66 { grid-template-columns: 306px 1fr; }
	.col-33-66 p { height: 230px; }
}

/* three col layout */
.col-3 { grid-template-columns: repeat(auto-fit, minmax(auto, 306px)); }

/* two-third one-third col layout */		
.col-66-33-spec > div:nth-of-type(2), 
.col-66-33-spec > div:nth-of-type(3) { max-width: 306px; }
	
@media (min-width: 726px) { 
	.col-66-33-spec { grid: repeat(2, 105px) / 1fr 306px; }
	.col-66-33-spec > div:first-of-type { grid-area: 1 / 1 / 3 / 2; }
	.col-66-33-spec > div:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
	.col-66-33-spec > div:nth-of-type(3) { grid-area: 2 / 2 / 3 / 3; }
}

/* info graphics */
[class*="Txt"] {
	position: relative;
	display: block;	
	height: 230px;
	transition: all .4s ease-out;
}

.infoTxt {
	background: #40B5EA 50% 50% no-repeat;
	background-size: cover;  
}

[class*="Txt"]:hover, 
[class*="Txt"]:focus { filter: saturate(150%); } 
	
[class*="Txt"] > h2 {
	position: absolute;
	left: .75em;
	bottom: .5em; 
	text-transform: uppercase;
	color: #FFF;
}
	
.plainTxt.three > h2:first-of-type { bottom: 3.5em; }
.plainTxt.three > h2:nth-of-type(2) { bottom: 2em; }
	
.plainTxt.half { height: 105px; }
	
.graphic1 { background-image:url('../img/info_graphic1.jpg'); }
.graphic2 { background-image:url('../img/info_graphic2.jpg'); }
.graphic3 { background-image:url('../img/info_graphic3.jpg'); }
.graphic4 { background-image:url('../img/info_graphic4.jpg'); }
.graphic5 { background-image:url('../img/info_graphic5.jpg'); }
.graphic6 { background-image:url('../img/info_graphic6.jpg'); }
.three { background-color: #3CB87A; }
.faq, .contact { background-color: #468BCC; }

/*								
This JavaScript code is useful for 
mobile display by utilizing a 
fully accessible off-canvas menu 
to toggle the hamburger style menu 
(can also toggle w/ the escape 
key). This code also resets the 
off-canvas menu (when switching 
out of mobile view).
*/

// document ready
$(function() {

    // add class .js if JS is enabled
    $('html').first().removeClass('no-js').addClass('js');

    // cache menu objects
    const menuLink = $('header[role="banner"]').find('button'), 
    bod = $('body');

    // set up the click behavior
    menuLink.on('click', function(){
        toggleExpanded($(this));
        toggleNav($(this), bod);
    });

    // toggle hamburger menu & body w/ escape key  
    function toggleHandler(e){
        if(e.keyCode == 27){		
            toggleExpanded(menuLink);
            toggleNav(menuLink, bod);
        } 
    }

    // check for smaller screen width 
    function checkSmallScreen(){
        const mq = window.matchMedia("(max-width: 767px)");
        mq.matches ? $(document).on('keyup', toggleHandler) : $(document).off('keyup');
    }

    checkSmallScreen();           
    $(window).resize(checkSmallScreen);

    // reset the hamburger menu (when switching from mobile to tablet/desktop view)
    $(window).resize(function(){
        var width = $(this).width();
        if(width >= 768 && bod.hasClass('active')){    
            menuLink.add(bod).removeClass('active')
                .end()
            .prop('ariaExpanded', 'false')
                .end()
            .find('i').eq(0).removeClass('fa-times').addClass('fa-bars');
        }

    });

});  // end ready 

// functions

// toggle aria-expanded
function toggleExpanded(elm){
    $(elm).attr('aria-expanded', $(elm).attr('aria-expanded') == 'true' ? 'false' : 'true');
}  // end func

// toggle hamburger menu & body
function toggleNav(elm, bodyElm){
    $(elm).add(bodyElm).toggleClass('active')
        .end()
    .find('i').eq(0).toggleClass('fa-bars fa-times');   
}  // end func