// initial array of information to store
// name refers to name of the .jpg file stored on squarespace
// title is what we refer to them. its obsolete for this script but
// i was too lazy to delete it
// active is the gif url that is called upon hover
let initStaff = [
{name: 'RINKA', title: 'Partner', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e2940ec9a058d53bfac/1543638574723/matt.gif'},
{name: 'MORALES', title: 'Partner', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e474ae237fc55d7dacf/1543638607719/steve.gif'},
{name: 'GRISWOLD', title: 'Partner', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020de970a6ad79cd12be31/1543638511684/chad.gif'},
{name: 'HOFFMANN', title: 'Sr. Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020de4352f53138d274cde/1543638506412/bradhof.gif'},
{name: 'PLISKA', title: 'Sr. Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e3e70a6ad79cd12c163/1543638599913/ryanp.gif'},
{name: 'GRILL', title: 'Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020dde562fa71d4c75a994/1543638500969/audry.gif'},
{name: 'KABARA', title: 'Sr. Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020def8a922dd6f3144a59/1543638520993/dk.gif'},
{name: 'MEYER', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e1fb8a045e8f439aca8/1543638573187/kayla.gif'},
{name: 'JARDANEH', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020df56d2a738dea5e8b44/1558624948636/owen.gif'},
{name: 'YOUNG', title: 'Sr. Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020dfb0ebbe8bdba699d7b/1543638529707/elliot.gif'},
{name: 'TORRES', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e2eaa4a997cdced3d01/1543638582958/melissa.gif'},
{name: 'CROSSMAN', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e010ebbe8bdba699d9b/1543638535884/evan.gif'},
{name: 'TIMMER', title: 'Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e0988251b9d3ce8dc52/1543638543997/jess.gif'},
{name: 'GREHN', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e18b8a045e8f439ac3b/1543638560472/karl.gif'},
{name: 'POGORELC', title: 'Sr. Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e03562fa71d4c75ab27/1543638537866/greg.gif'},
{name: 'KNITT', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020de7758d46c25c30d558/1543638513050/buck.gif'},
{name: 'FOX', title: 'Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e0f21c67c7381b19c79/1543638553759/john.gif'},
{name: 'GEBHARDT', title: 'Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e0e2b6a280deeb360fc/1543638549454/jessg.gif'},
{name: 'KERR', title: 'Sr. Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020ddd70a6ad79cd12bdb7/1543638499152/andrew.gif'},
{name: 'BRAD_H', title: 'Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020de24d7a9cb0b6f4371b/1543638506091/bradhi.gif'},
{name: 'SEQUENZ', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e07575d1f6d6b3482ac/1543638545001/james.gif'},
{name: 'CONRAD', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e29575d1f6d6b348470/1543638576928/megan.gif'},
{name: 'MONACHOS', title: 'Sr. Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e1c575d1f6d6b348404/1543638562298/katie.gif'},
{name: 'JARMON', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e42575d1f6d6b34853e/1543638601950/saraj.gif'},
{name: 'NEIDINGER', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e3c8a922dd6f3144d4e/1543638596563/ryann.gif'},
{name: 'MAGGIE', title: 'Int. Project Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e2188251b9d3ce8dd4d/1543638573284/maggie.gif'},
{name: 'GERHARD', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020dd9aa4a997cdced398b/1543638778309/adam.gif'},
{name: 'BRUDNY', title: 'Office Manager', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e1621c67c7381b19cff/1543638563398/kaitlyn.gif'},
{name: 'WOODWARD', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020deef950b75aa1c1b909/1543638517450/chris.gif'},
{name: 'SLOWINSKI', title: 'Marketing Coordinator', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e46aa4a997cdced3e4f/1543638606839/saras.gif'},
{name: 'GUERTIN', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e3021c67c7381b19e33/1543638585513/michael.gif'},
{name: 'STRAUBE', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e36f950b75aa1c1bbc7/1543638588702/nick.gif'},
{name: 'PAUTSCH', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e140ebbe8bdba699ea9/1543638552810/josef.gif'},
{name: 'QIANQIAN', title: 'Design Professional', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020e3840ec9a058d53c040/1543638592402/qq.gif'},
{name: 'BENCE', title: 'Sr. Interior Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020dd90e2e721902631c65/1543638657450/allison.gif'},
{name: 'KARAS', title: 'Sr. Project Architect', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020df4f950b75aa1c1b93f/1543638525873/dk2.gif'},
{name: 'MARTELL', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5c020dfb70a6ad79cd12becb/1558624979476/eric.gif'},
{name: 'ANDRUS', title: 'Design Professional', active: 'https://images.squarespace-cdn.com/content/5ba9c8ba92441b1edbb4467a/1568143719893-UFLJKC31KJ9F7CROQMVD/corey.gif'},
{name: 'ROWE', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5d7807ff8dcdaa5a3af90834/1568147459588/zacc.gif'},
{name: 'MOORE', title: 'Designer', active: 'https://static1.squarespace.com/static/5ba9c8ba92441b1edbb4467a/5c020d9421c67c7381b1987e/5d7807ff8da0a3504b6f0f0c/1568147459562/tommy.gif'},
];
var initGif = function(staffList) {
// blank array for later
var rcaStaff = [];
// set up a pattern from which to get images
var imagePattern = /.+\/(.+)(?=\.jpg)/
var titlePattern = /
+/
// takes information from initial information Array
// places it into a named array so that information can be
// more easily called upon
// ie - rcaStaff['STAFF NAME'] rather than initStaff[1]
staffList.forEach(function(member) {
rcaStaff[member.name] = {title: member.title, active: member.active};
});
// for use if we have a specific ID for the sqs-gallery
let gallery = document.getElementById('team-1').getElementsByClassName('sqs-gallery-container')[0];
// grab all of the staff grid elements based on a specified class
// and iterates through all of them to attach event listeners to elements
Array.from(gallery.getElementsByClassName('slide')).forEach(function(headshot) {
// get the location of the staff member's name and store for later
var $headshotTitle = headshot.getElementsByClassName('image-slide-title')[0];
let oldTitle = $headshotTitle.innerHTML;
// get the location of their image
let $headshotImage = headshot.getElementsByTagName('img')[0];
let $headshotImageInitial = $headshotImage.getAttribute('data-src');
// get their name in plain text
if (imagePattern.exec($headshotImageInitial) !== null) {
let name = imagePattern.exec($headshotImageInitial)[1];
// add title to everyone's name
if (titlePattern.exec($headshotTitle.innerHTML) == null) {
$headshotTitle.innerHTML += "
";
$headshotTitle.innerHTML += rcaStaff[name].title;
}
headshot.addEventListener("mouseover", function( event ) {
// replace their name and image with info based on array
// since its a name array, we just use the name of the person in html
// to call for specific information in the array
$headshotImage.src =rcaStaff[name].active;
});
headshot.addEventListener("mouseout", function( event ) {
// replace with original image
$headshotImage.src = $headshotImageInitial;
});
}
});
}
// tell the script to watch the body for changes
var targetNode = document.getElementsByTagName('body')[0];
// create observer options
var observerOptions = { childList: true };
// create callback function
var callback = function(mutationsList, observer) {
check = document.getElementById('team-1');
if (check !== null) {
initGif(initStaff);
}
};
// create the observer
var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);