const industryImages = {
1:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2f6d25e1691f01a2d2_industry_frame1.svg',
2:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2f69818d11a0ac9d85_industry_frame2.svg',
3:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2fd394f5848f069026_industry_frame3.svg',
4:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2fd44f3009a5dd6b32_industry_frame4.svg',
5:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2f2d142e33990c6bf6_industry_frame5.svg',
6:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2faf431e43f3940cdf_industry_frame6.svg',
7:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2f69818d0038ac9d86_industry_frame7.svg',
8:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2fea877765a7545b38_industry_frame8.svg',
9:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2f2ab06e1f87d1f6cc_industry_frame9.svg',
10:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a2fea8777b1f8545b39_industry_frame10.svg',
11:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3fa79f67f6266cf08b6c_industry_frame11.svg'
}
const industryImagesMobile = {
1:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ed01614d69d71620328_industry_frame1.svg',
2:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ecf7915eb7274c5946c_industry_frame2.svg',
3:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ed09f67f69bb3f075c6_industry_frame3.svg',
4:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ecf5f0dd77e2536f692_industry_frame4.svg',
5:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ecf67123d2133fa4efe_industry_frame5.svg',
6:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ecf218631529d3ca0d3_industry_frame6.svg',
7:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ecf7119b443651912de_industry_frame7.svg',
8:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ed060b0af6b4f401112_industry_frame8.svg',
9:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ed0612d1caaff4418e4_industry_frame9.svg',
10:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3ed016730d68856b2ee4_industry_frame10.svg',
11:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee38744f609b1b59100857_industry_frame11.svg'
}
const teamsImages = {
1:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a5320b9c8da3c19360f_teams_frame1.svg',
2:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a537f8ab6d793e34577_teams_frame2.svg',
3:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a53d394f547ee069198_teams_frame3.svg',
4:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a548523a555a35b8103_teams_frame4.svg',
5:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a531cd7f38a5d2c7df2_teams_frame5.svg',
6:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a54291b03010e2f78ce_teams_frame6.svg',
7:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a53d44f301d34dd6d78_teams_frame7.svg',
8:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a54f7f0e7132787bcee_teams_frame8.svg',
9:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a54d394f5abf3069199_teams_frame9.svg',
10:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a54af431e5ca1940e1d_teams_frame10.svg',
11:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee1a54f8b60c43fb241d3e_teams_frame11.svg'
}
const teamsImagesMobile = {
1:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de1614d6d83d625a73_teams_frame1.svg',
2:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de60b0af4398403b19_teams_frame2.svg',
3:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de2f51e25bbd747006_teams_frame3.svg',
4:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40dedb6a434b453925e2_teams_frame4.svg',
5:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de5c0d76447e3e2d7b_teams_frame5.svg',
6:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40debaf93404b6fb979b_teams_frame6.svg',
7:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de5f0dd7e5a0371a5d_teams_frame7.svg',
8:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40e0ae724b7688582844_teams_frame8.svg',
9:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40ded952bda140ef224f_teams_frame9.svg',
10:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40de612d1cefa3446695_teams_frame10.svg',
11:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee40dfdb6a4345c83925e8_teams_frame11.svg'
}
const timeImages = {
1:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e42196487c5fb65d798d_clock_frame1.png',
2:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e4211987e1a1f277adba_clock_frame2.png',
3:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e4213c4b55b1a8c305b6_clock_frame3.png',
4:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e421002f8f406c0d2a9e_clock_frame4.png',
5:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e4211987e1ae4177adb9_clock_frame5.png',
6:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e42146d7cf84b23b5515_clock_frame6.png',
7:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e421da4f72ef130fc79c_clock_frame7.png',
8:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e4216d255478517e834d_clock_frame8.png',
9:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e421d059053ee3a34455_clock_frame9.png',
10:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e421b11ceab98f580829_clock_frame10.png',
11:'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63c5e4213f09c351bd7999ee_clock_frame11.png'
}
const quoteBracketImages = {
1: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c7d31a0f63eef8dcd5_quote_brackets_1-cropped.svg',
2: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c7edc074bd34b8217a_quote_brackets_2-cropped.svg',
3: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c740f6535d0b958ded_quote_brackets_3-cropped.svg',
4: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c7497535ca2a43d811_quote_brackets_4-cropped.svg',
5: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c74d58d544f7c6ea3c_quote_brackets_5-cropped.svg',
6: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c8fb06d0b8b7b5e325_quote_brackets_6-cropped.svg',
7: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c8f3641219162d6fd4_quote_brackets_7-cropped.svg',
8: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c856c3fbf7b288b402_quote_brackets_8-cropped.svg',
9: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c89f20a2c086475c43_quote_brackets_9-cropped.svg',
10: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c84c133d7c7c53dce6_quote_brackets_10-cropped.svg',
11: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63dc34c85f33617a30a53c07_quote_brackets_11-cropped.svg'
}
const quoteTextImages = {
1: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0eae724bea8657f391_quotes_text_1-01.svg',
2: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0e74f276a76578f971_quotes_text_2-01.svg',
3: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0e0ce5b1efc36100ed_quotes_text_3-01.svg',
4: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0ee2d2f13344e49ec0_quotes_text_4-01.svg',
5: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0ed952bdc597eee7e4_quotes_text_5-01.svg',
6: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0e862db4770f5ed05d_quotes_text_6-01.svg',
7: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0e4fee9d84c66f5a08_quotes_text_7-01.svg',
8: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0edab94dfc369c91d4_quotes_text_8-01.svg',
9: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0ecabe514368ec1a03_quotes_text_9-01.svg',
10: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0e7fd6b0b53a362ab9_quotes_text_10-01.svg',
11: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0f6850476040a955e2_quotes_text_11-01.svg',
12: 'https://uploads-ssl.webflow.com/62a15d12aa7b1a70e4f99a9e/63ee3e0ecff3087e68311612_quotes_text_12-01.svg'
}
document.head.innerHTML = document.head.innerHTML +
`
`;
var bodyPos = document.body.getBoundingClientRect();
for(var i=1; i<=12; i++){
window['elemPos' + i] = document.getElementById("quote_brackets_" + i).getBoundingClientRect();
window['offset' + i] = window['elemPos' + i].top - bodyPos.top;
window['pos' + i] = window['offset' + i] - window.innerHeight;
};
var elemPosQ1 = document.getElementById("industry_image_container").getBoundingClientRect();
var offsetQ1 = elemPosQ1.top - bodyPos.top;
var posQ1 = offsetQ1 - window.innerHeight;
var elemPosQ2 = document.getElementById("teams_image_container").getBoundingClientRect();
var offsetQ2 = elemPosQ2.top - bodyPos.top;
var posQ2 = offsetQ2 - window.innerHeight;
var elemPosQ3 = document.getElementById("time_image_container").getBoundingClientRect();
var offsetQ3 = elemPosQ3.top - bodyPos.top;
var posQ3 = offsetQ3 - window.innerHeight;
// Global variable to control the scrolling behavior
const step = 30; // For each 30px, change an image
function trackScrollPosition() {
const y = window.scrollY-400; //start past the header
if(y-posQ1+100>=0){ //industry
const ind_label = Math.min(Math.floor((y-posQ1+100)/step) + 1, 11);
if(window.innerWidth>550){
const ind_imageToUse = industryImages[ind_label];
document.getElementById('industry_image_container').style.backgroundImage=`url('${ind_imageToUse}')`;
}else{
const ind_imageToUse = industryImagesMobile[ind_label];
document.getElementById('industry_image_container').style.backgroundImage=`url('${ind_imageToUse}')`;
}
}
if(y-posQ2+200>=0){ //teams & fields
const teams_label = Math.min(Math.floor((y-posQ2+200)/step) + 1, 11);
if(window.innerWidth>550){
const teams_imageToUse = teamsImages[teams_label];
document.getElementById('teams_image_container').style.backgroundImage=`url('${teams_imageToUse}')`;
}else{
const teams_imageToUse = teamsImagesMobile[teams_label];
document.getElementById('teams_image_container').style.backgroundImage=`url('${teams_imageToUse}')`;
}
}
if(y-posQ3+200>=0){ //time on DEI
const time_label = Math.min(Math.floor((y-posQ3+200)/step) + 1, 11);
const time_imageToUse = timeImages[time_label];
document.getElementById('time_img').src=`${time_imageToUse}`;
}
var percentage_text = document.getElementsByClassName("top_title");
for(var i=1; i<=12; i++){ //further competencies
if(y-(window['pos' + i]-250)>=0){
const quote_label = Math.min(Math.floor((y-(window['pos' + i]-250))/step) + 1, 11);
const quote_imageToUse = quoteBracketImages[quote_label];
document.getElementById('quote_brackets_' + i).src=`${quote_imageToUse}`;
}
}
}
window.addEventListener('resize', function(event) {
bodyPos = document.body.getBoundingClientRect();
for(var i=1; i<=12; i++){
window['elemPos' + i] = document.getElementById("quote_brackets_" + i).getBoundingClientRect();
window['offset' + i] = window['elemPos' + i].top - bodyPos.top;
window['pos' + i] = window['offset' + i] - window.innerHeight;
};
elemPosQ1 = document.getElementById("industry_image_container").getBoundingClientRect();
offsetQ1 = elemPosQ1.top - bodyPos.top;
posQ1 = offsetQ1 - window.innerHeight;
elemPosQ2 = document.getElementById("teams_image_container").getBoundingClientRect();
offsetQ2 = elemPosQ2.top - bodyPos.top;
posQ2 = offsetQ2 - window.innerHeight;
elemPosQ3 = document.getElementById("time_image_container").getBoundingClientRect();
offsetQ3 = elemPosQ3.top - bodyPos.top;
posQ3 = offsetQ3 - window.innerHeight;
if(window.innerWidth <= 620){
var hov_text = document.getElementsByClassName("hover_instruction");
for(var i = 0; i < hov_text.length; i++){
hov_text[i].innerHTML = 'Click "More Info" to see the percentage of respondants who answered each competency.'
}
}else{
var hov_text = document.getElementsByClassName("hover_instruction");
for(var i = 0; i < hov_text.length; i++){
hov_text[i].innerHTML = 'Hover over each competency or click "More Info" to see the percentage of respondants who answered it.'
}
trackScrollPosition();
}
});
addEventListener('scroll', (event) => {
trackScrollPosition();
});
//Explore
document.getElementById("explore").addEventListener("click", (event) => {
window.scrollTo(0, 750);
})
document.getElementById("explore").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
window.scrollTo(0, 750);
}
});
//Back to top
document.getElementById("back_to_top").addEventListener("click", (event) => {
window.scrollTo(0, 750);
});
document.getElementById("back_to_top").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
window.scrollTo(0, 750);
}
});
//Word Cloud Hover
const psychWordCloudCoords = {
'curiosity': {'x':[-15,138], 'y':[198,230]},
'creativity': {'x':[-44,43], 'y':[3,18]},
'resilience': {'x':[-61,46], 'y':[121,139]},
'ability': {'x':[-15,138], 'y':[230,249]},
'self': {'x':[-142,-15], 'y':[201,247]},
'awareness': {'x':[-142,138], 'y':[249,292]},
'other': {'x':[12,34], 'y':[191,198]},
'growth': {'x':[-130,121], 'y':[18,117]},
'courage': {'x':[57,124], 'y':[139,151]},
'empathy': {'x':[-102,99], 'y':[151,183]},
'vision': {'x':[-113,-73], 'y':[191,201]}
}
const psychPercentages = {
'curiosity': `Curiosity: 13.08%`,
'creativity': `Creativity: 5.91%`,
'resilience': `Resilience: 6.75%`,
'ability': `Ability to be vulnerable: 3.38%`,
'self': `Self Awareness: 20.25%`,
'awareness': `Self Awareness: 20.25%`,
'other': `Other: 0.84%`,
'growth': `Growth Mindset: 24.47%`,
'courage': `Courage: 4.64%`,
'empathy': `Empathy: 17.72%`,
'vision': `Vision: 2.95%`
}
const DEIWordCloudCoords = {
'coalition': {'x':[-228,33], 'y':[7,33]},
'communication': {'x':[-285,284], 'y':[38,96]},
'DEI': {'x':[-285,99], 'y':[96,129]},
'modeling': {'x':[79,133], 'y':[27,38]},
'cultural': {'x':[-194,33], 'y':[129,183]},
'competence': {'x':[-194,187], 'y':[196,242]},
'other': {'x':[-100,-75], 'y':[183,196]},
'marketing': {'x':[33,216], 'y':[143,164]},
'design': {'x':[33,137], 'y':[164,184]},
'negotiation': {'x':[-161,-59], 'y':[242,270]},
'external': {'x':[-41,284], 'y':[242,270]},
'systems': {'x':[-244,148], 'y':[270,292]}
}
const DEIPercentages = {
'coalition': `Coalition Building: 10.59%`,
'communication': `Communication: 28.81%`,
'DEI': `DEI Subject Matter Expertise: 9.32%`,
'modeling': `Modeling: 2.54%`,
'cultural': `Cultural Competence: 23.31%`,
'competence': `Cultural Competence: 23.31%`,
'other': `Other: 1.27%`,
'marketing': `Marketing / Brand / Reputation Management: 1.27%`,
'design': `Design Thinking: 2.97%`,
'negotiation': `Negotiation: 5.08%`,
'external': `External Market Knowledge: 8.05%`,
'systems': `Systems Thinking / Systems Mapping: 6.78%`
}
const competenciesWordCloudCoords = {
'recognizing': {'x':[-108,136], 'y':[7,21]},
'trauma': {'x':[-152,-38], 'y':[35,51]},
'vision': {'x':[-8,36], 'y':[33,51]},
'awareness': {'x':[79,136], 'y':[35,51]},
'systems': {'x':[107,244], 'y':[60,72]},
'coalition': {'x':[-214,99], 'y':[51,91]},
'negotiation': {'x':[169,244], 'y':[84,99]},
'communication': {'x':[-247,246], 'y':[99,150]},
'curiosity': {'x':[-3,38], 'y':[150,167]},
'DEI': {'x':[-247,1], 'y':[167,189]},
'external': {'x':[44,149], 'y':[167,189]},
'cultural': {'x':[-247,-40], 'y':[198,255]},
'competence': {'x':[-247,96], 'y':[255,305]},
'respect': {'x':[-36,11], 'y':[203,216]},
'growth': {'x':[-36,106], 'y':[232,252]},
'collaboration': {'x':[140,206], 'y':[205,220]},
'data': {'x':[105,238], 'y':[261,312]},
'management': {'x':[-85,44], 'y':[305,320]},
'ability': {'x':[-179,-29], 'y':[327,367]},
'empathy': {'x':[136,194], 'y':[326,341]},
'changeAgent': {'x':[21,158], 'y':[347,362]},
'influence': {'x':[-26,24], 'y':[377,391]}
}
const competenciesPercentages = {
'recognizing': `Recognizing the value of different lived experiences: 1.16%`,
'trauma': `Being Trauma-informed: 1.16%`,
'vision': `Vision: 2.33%`,
'awareness': `Awareness: 1.16%`,
'systems': `Systems Thinking / Mapping: 1.16%`,
'coalition': `Coalition Building: 12.79%`,
'negotiation': `Negotiation: 2.33%`,
'communication': `Communication: 32.56%`,
'curiosity': `Curiosity: 1.16%`,
'DEI': `DEI Subject Matter Expertise: 4.65%`,
'external': `External Market Knowledge: 3.49%`,
'cultural': `Cultural Competence: 20.93%`,
'competence': `Cultural Competence: 20.93%`,
'respect': `Respect: 1.16%`,
'growth': `Growth Mindset: 4.65%`,
'collaboration': `Collaboration: 1.16%`,
'data': `Data gathering, unpacking, modeling, etc.: 1.16%`,
'management': `Change Management Skills: 1.16%`,
'ability': `Ability to assess needs: 1.16%`,
'empathy': `Empathy: 2.33%`,
'changeAgent': `Desire to be a Change Agent: 1.16%`,
'influence': `Influence: 1.16%`
}
var psychWordCloud = document.getElementById("psych_img");
var DEIWordCloud = document.getElementById("DEI_skills_img");
var competenciesWordCloud = document.getElementById("competencies_img");
var mouseCoords = [];
psychWordCloud.onmousemove = HoverCoordinates;
DEIWordCloud.onmousemove = HoverCoordinates;
competenciesWordCloud.onmousemove = HoverCoordinates;
//mouse position over image
function FindPosition(el)
{
if(typeof( el.offsetParent ) != "undefined"){
for(var posX = 0, posY = 0; el; el = el.offsetParent){
posX += el.offsetLeft;
posY += el.offsetTop;
}
return [ posX, posY ];
}
else{
return [ el.x, el.y ];
}
}
function HoverCoordinates(e){
var mouseX = 0;
var mouseY = 0;
var imgPosition = FindPosition(e.target);
if (!e) var e = window.event;
if (e.pageX || e.pageY){
mouseX = e.pageX;
mouseY = e.pageY;
}
else if (e.clientX || e.clientY){
mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
mouseX = mouseX - imgPosition[0];
mouseY = mouseY - imgPosition[1];
mouseCoords = [mouseX, mouseY];
if(e.target==psychWordCloud){
var coords = psychWordCloudCoords;
var percentages = psychPercentages;
var tooltip = "psych_tooltip";
var tooltipIndex = 0;
} else if (e.target==DEIWordCloud){
var coords = DEIWordCloudCoords;
var percentages = DEIPercentages;
var tooltip = "DEI_tooltip";
var tooltipIndex = 1;
} else if(e.target==competenciesWordCloud){
var coords = competenciesWordCloudCoords;
var percentages = competenciesPercentages;
var tooltip = "competencies_tooltip";
var tooltipIndex = 2;
}
if(window.innerWidth > 620){
for(var i=0; i<=Object.keys(coords).length; i++){
if(i == Object.keys(coords).length){
document.getElementsByClassName("tooltiptext")[tooltipIndex].style.visibility = "hidden";
}else{
var skill = Object.keys(coords)[i];
if ((coords[skill]['x'][0] <= mouseCoords[0])
&& (mouseCoords[0] <= coords[skill]['x'][1])
&& (coords[skill]['y'][0] <= mouseCoords[1])
&& (mouseCoords[1] <= coords[skill]['y'][1])){
document.getElementById(tooltip).innerHTML = percentages[skill];
document.getElementsByClassName("tooltiptext")[tooltipIndex].style.visibility = "visible";
break;
}
}
}
}else{
document.getElementsByClassName("tooltiptext")[tooltipIndex].style.visibility = "hidden";
}
}
//Alphabet nav
const sections = document.querySelectorAll("section[id]");
const sectionIdList = ["industry", "teams", "time", "psychological", "DEI_skills", "competencies", "easy_find", "further"];
window.addEventListener("scroll", alphaNavHighlighter);
function alphaNavHighlighter() {
// Get current scroll position
let scrollY = window.pageYOffset;
// Now we loop through sections to get height, top and ID values for each
sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = (current.getBoundingClientRect().top + window.pageYOffset) - 50;
var sectionId = current.getAttribute("id");
if (
scrollY > sectionTop &&
scrollY <= sectionTop + sectionHeight
){
document.getElementById("circle").style.top = sectionIdList.indexOf(sectionId)*75 + 18 + 'px';
document.querySelector("#contents a[id*=" + sectionId + "Link]").classList.remove("inactive");
document.querySelector("#contents a[id*=" + sectionId + "Link]").classList.add("active");
} else {
document.querySelector("#contents a[id*=" + sectionId + "Link]").classList.remove("active");
document.querySelector("#contents a[id*=" + sectionId + "Link]").classList.add("inactive");
}
});
}
//Collapsible
function collapse(element){
element.classList.toggle("expand");
var content = element.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
element.children[0].classList.remove("up");
element.children[0].classList.add("down");
}
else {
content.style.maxHeight = content.scrollHeight + "px";
element.children[0].classList.remove("down");
element.children[0].classList.add("up");
}
}
var coll = document.getElementsByClassName("collapsible");
for(var i=0; i < coll.length; i++){
coll[i].addEventListener("click", function() {
collapse(this);
})
coll[i].addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
collapse(this);
}
});
};
//responsive menu
var menuItems = document.getElementById("mobileContents");
var mobileContents = `
`
document.getElementById("mobileMenu").addEventListener("click", function() {
this.classList.toggle("change");
this.parentElement.classList.toggle("mobileBackground");
if(this.classList[0]=="change"){
menuItems.style.display = "inline-block";
menuItems.innerHTML = mobileContents;
} else{
menuItems.style.display = "none";
menuItems.innerHTML = "";
}
});
document.getElementById("mobileMenu").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
this.classList.toggle("change");
this.parentElement.classList.toggle("mobileBackground");
if(this.classList[0]=="change"){
menuItems.style.display = "inline-block";
menuItems.innerHTML = mobileContents;
} else{
menuItems.style.display = "none";
menuItems.innerHTML = "";
}
}
});
window.addEventListener('resize', function(event) {
if(document.getElementById("mobileMenu").classList[0]=="change"){
menuItems.style.display = "inline-block";
menuItems.innerHTML = mobileContents;
} else{
menuItems.style.display = "none";
menuItems.innerHTML = "";
}
}, true);
menuItems.addEventListener("click", function() {
var mobileMenu = document.getElementById("mobileMenu");
mobileMenu.classList.toggle("change");
mobileMenu.parentElement.classList.toggle("mobileBackground");
menuItems.style.display = "none";
})
document.addEventListener("click", (e) => {
const isClickInsideMenu = (document.getElementById("mobile").contains(e.target));
if (!isClickInsideMenu) {
var mobileMenu = document.getElementById("mobileMenu");
if(mobileMenu.classList.contains("change")){
mobileMenu.classList.remove("change");
}
if(mobileMenu.parentElement.classList.contains("mobileBackground")){
mobileMenu.parentElement.classList.remove("mobileBackground");
}
menuItems.style.display = "none";
menuItems.innerHTML = "";
}
});
document.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
const isClickInsideMenu = (document.getElementById("mobile").contains(e.target));
if (!isClickInsideMenu) {
var mobileMenu = document.getElementById("mobileMenu");
if(mobileMenu.classList.contains("change")){
mobileMenu.classList.remove("change");
}
if(mobileMenu.parentElement.classList.contains("mobileBackground")){
mobileMenu.parentElement.classList.remove("mobileBackground");
}
menuItems.style.display = "none";
menuItems.innerHTML = "";
}
}
});