diff --git a/assets/js/wins.js b/assets/js/wins.js
index 52ca85d7d1..6390af7cf0 100644
--- a/assets/js/wins.js
+++ b/assets/js/wins.js
@@ -1,533 +1,506 @@
----
-
----
- //assigning the google form questions to variables for readability
- //these variables correspond with a question on the google form
- //these variables can be used as a key to access the data
- const time = "Timestamp"
- const email = "Email Address"
- const name = "Full name"
- const linkedin_url = "Linkedin URL (optional)"
- const linkedin_permission = "Could we use your Linkedin profile picture next to your story?"
- const github_url = "Github URL (optional)"
- const github_permission = "Could we use your Github profile picture next to your story?"
- const team = "Select the team(s) you're on"
- const role = "Select your role(s) on the team"
- const specific_role = "What is/was your specific role? (optional)"
- const join_date = "When did you join Hack for LA? (optional)"
- const win = "What do you want to celebrate (select all that apply)?"
- const overview = "Give us a brief overview"
- const display = "Display?"
-
- const otherIcon = `star.svg`
- const badgeIcons = {
- "I got a new job": `briefcase.svg`,
- "I produced something for my portfolio": `file.svg`,
- "I improved my LinkedIn": `linkedin.svg`,
- "I learned how to work better on a team": `team.svg`,
- "I increased the number of commits on my Github profile": `github.svg`,
- "I learned a new language": `code.svg`,
- "I set up 2FA": `twofa.svg`,
- "I became part of a a caring community": `$community.svg`,
- "I worked on an enterprise project": `enterprise.svg`,
- "I worked on a project that will help the people of Los Angeles": `giving.svg`,
- "I worked on two or more projects": `hammers.svg`,
- "I taught or mentored a person on my team": `mentor.svg`,
- "I taught or mentored a person on another team": `mentor-external.svg`,
- "My team delivered software to a stakeholder": `deliverable.svg`,
- "My team launched our MVP": `launch.svg`,
- }
-
- function main() {
- {% assign localData = site.data.external._wins-data %}
- // Escapes JSON for injections. See: #2134. If this is no longer the case, perform necessary edits, and remove this comment
- const cardData = JSON.parse(decodeURIComponent("{{ localData | jsonify | uri_escape }}"));
- window.localStorage.setItem('data', JSON.stringify(cardData));
- makeCards(cardData);
- ifPageEmpty();
- }
+//assigning the google form questions to variables for readability
+//these variables correspond with a question on the google form
+//these variables can be used as a key to access the data
+// const time = "Timestamp"
+// const email = "Email Address"
+const name = "Full name"
+const linkedin_url = "Linkedin URL (optional)"
+// const linkedin_permission = "Could we use your Linkedin profile picture next to your story?"
+const github_url = "Github URL (optional)"
+const github_permission = "Could we use your Github profile picture next to your story?"
+const team = "Select the team(s) you're on"
+const role = "Select your role(s) on the team"
+// const specific_role = "What is/was your specific role? (optional)"
+// const join_date = "When did you join Hack for LA? (optional)"
+const win = "What do you want to celebrate (select all that apply)?"
+const overview = "Give us a brief overview"
+// const display = "Display?"
+const otherIcon = `star.svg`
+const badgeIcons = {
+ "I got a new job": `briefcase.svg`,
+ "I produced something for my portfolio": `file.svg`,
+ "I improved my LinkedIn": `linkedin.svg`,
+ "I learned how to work better on a team": `team.svg`,
+ "I increased the number of commits on my Github profile": `github.svg`,
+ "I learned a new language": `code.svg`,
+ "I set up 2FA": `twofa.svg`,
+ "I became part of a a caring community": `$community.svg`,
+ "I worked on an enterprise project": `enterprise.svg`,
+ "I worked on a project that will help the people of Los Angeles": `giving.svg`,
+ "I worked on two or more projects": `hammers.svg`,
+ "I taught or mentored a person on my team": `mentor.svg`,
+ "I taught or mentored a person on another team": `mentor-external.svg`,
+ "My team delivered software to a stakeholder": `deliverable.svg`,
+ "My team launched our MVP": `launch.svg`,
+}
+
+function main() {
+ const winsDataContainer = document.querySelector("#winsDataContainer");
+ const data = winsDataContainer.getAttribute("data-wins-data");
+ const cardData = JSON.parse(decodeURIComponent(data));
+ winsDataContainer.remove();
+ window.localStorage.setItem('data', JSON.stringify(cardData));
+ makeCards(cardData);
+ ifPageEmpty();
+}
- //Create The "Role" and "Team" Filters From The Displayed Cards On Page Load
- document.addEventListener("DOMContentLoaded", createFilter);
-
- document.addEventListener('click', event => {
- // if the .see-more-div element is clicked
- if (event.target.closest('.see-more-div')) {
- // open the seeMore with the id of the selected target
- seeMore(event.target.id)
- }
- if (event.target.matches('.overlay') || event.target.closest('.overlay-close-icon') || event.target.closest('.top-buffer') || event.target.closest('.bottom-buffer')) {
- hideOverlay();
- }
- // else, do nothing
- return false;
- }, false);
-
- document.addEventListener('keydown', function(event) {
- // if its the enter key and the .see-more-div element is currently tabbed on
- if (event.key === "Enter" && document.activeElement.classList.contains('see-more-div')) {
- // run seeMore with the active tab element id
- seeMore(document.activeElement.id);
- }
- // else, do nothing
- return false;
- }, false);
-
- function createFilter(){
-
- const roleArr = [];
- const teamArr = [];
- const responses = document.querySelector("#responses");
- responses.querySelectorAll('.wins-card-team:not([style*="display:none"]):not([style*="display: none"]').forEach(item =>{
- let value = item.textContent.replace("Team(s):","").trim();
- let team = value.split(",").map(x=>x.trim());
-
- Array.isArray(team) ? teamArr.push(...team) : teamArr.push(team);
-
- })
- //Assign Role for each Wins-Card
- responses.querySelectorAll('.wins-card-role:not([style*="display:none"]):not([style*="display: none"]').forEach(item =>{
- let value = item.textContent.replace("Role(s):","").trim();
- let role = value.split(",").map(x=>x.trim());
- Array.isArray(role) ? roleArr.push(...role) : roleArr.push(role);
- })
-
-
- //Create dropdown key,values where the keys are name of the drops downs and the values are the number of occurences of each key
- const roleHash = Object.fromEntries([ ...roleArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
- const teamHash = Object.fromEntries([ ...teamArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
-
-
- const filterTemplate = document.getElementById("wins-filter-template-repeat");
- const roleDropDown = document.getElementById("role-dropdown");
- const teamDropDown = document.getElementById("team-dropdown");
-
-
- for(const [key,value] of Object.entries(roleHash) ){
- if (key === '') {
- continue
- }
- let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
- cloneFilterTemplate.querySelector("input").value = `role_${key}`;
- cloneFilterTemplate.querySelector("input").id = `role_${key.replace(/\s+/g, '')}`;
- cloneFilterTemplate.querySelector("input").name = `role_${key.replace(/\s+/g, '')}`;
- cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler);
- cloneFilterTemplate.querySelector("label").textContent = `${key}`;
- cloneFilterTemplate.querySelector("label").htmlFor =`role_${key.replace(/\s+/g, '')}`;
- roleDropDown.append(cloneFilterTemplate);
+//Create The "Role" and "Team" Filters From The Displayed Cards On Page Load
+document.addEventListener("DOMContentLoaded", createFilter);
+
+document.addEventListener('click', event => {
+ // if the .see-more-div element is clicked
+ if (event.target.closest('.see-more-div')) {
+ // open the seeMore with the id of the selected target
+ seeMore(event.target.id)
+ }
+ if (event.target.matches('.overlay') || event.target.closest('.overlay-close-icon') || event.target.closest('.top-buffer') || event.target.closest('.bottom-buffer')) {
+ hideOverlay();
+ }
+ // else, do nothing
+ return false;
+}, false);
+
+document.addEventListener('keydown', function(event) {
+ // if its the enter key and the .see-more-div element is currently tabbed on
+ if (event.key === "Enter" && document.activeElement.classList.contains('see-more-div')) {
+ // run seeMore with the active tab element id
+ seeMore(document.activeElement.id);
+ }
+ // else, do nothing
+ return false;
+}, false);
+
+function createFilter() {
+ const roleArr = [];
+ const teamArr = [];
+ const responses = document.querySelector("#responses");
+ responses.querySelectorAll('.wins-card-team:not([style*="display:none"]):not([style*="display: none"]').forEach(item => {
+ let value = item.textContent.replace("Team(s):", "").trim();
+ let team = value.split(",").map(x => x.trim());
+ Array.isArray(team) ? teamArr.push(...team) : teamArr.push(team);
+ })
+ //Assign Role for each Wins-Card
+ responses.querySelectorAll('.wins-card-role:not([style*="display:none"]):not([style*="display: none"]').forEach(item =>{
+ let value = item.textContent.replace("Role(s):","").trim();
+ let role = value.split(",").map(x => x.trim());
+ Array.isArray(role) ? roleArr.push(...role) : roleArr.push(role);
+ })
+ //Create dropdown key,values where the keys are name of the drops downs and the values are the number of occurences of each key
+ const roleHash = Object.fromEntries([...roleArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map())]);
+ const teamHash = Object.fromEntries([...teamArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map())]);
+
+ const filterTemplate = document.getElementById("wins-filter-template-repeat");
+ const roleDropDown = document.getElementById("role-dropdown");
+ const teamDropDown = document.getElementById("team-dropdown");
+
+ for(const [key] of Object.entries(roleHash)) {
+ if (key === '') {
+ continue
}
- for(const [key,value] of Object.entries(teamHash) ){
- let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
- cloneFilterTemplate.querySelector("input").value = `team_${key}`;
- cloneFilterTemplate.querySelector("input").id = `team_${key.replace(/\s+/g, '')}`;
- cloneFilterTemplate.querySelector("input").name = `team_${key.replace(/\s+/g, '')}`;
- cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler);
- cloneFilterTemplate.querySelector("label").textContent = `${key}`;
- cloneFilterTemplate.querySelector("label").htmlFor =`team_${key.replace(/\s+/g, '')}`;
- teamDropDown.append(cloneFilterTemplate);
+ let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
+ cloneFilterTemplate.querySelector("input").value = `role_${key}`;
+ cloneFilterTemplate.querySelector("input").id = `role_${key.replace(/\s+/g, '')}`;
+ cloneFilterTemplate.querySelector("input").name = `role_${key.replace(/\s+/g, '')}`;
+ cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler);
+ cloneFilterTemplate.querySelector("label").textContent = `${key}`;
+ cloneFilterTemplate.querySelector("label").htmlFor =`role_${key.replace(/\s+/g, '')}`;
+ roleDropDown.append(cloneFilterTemplate);
+ }
+ for(const [key] of Object.entries(teamHash)) {
+ let cloneFilterTemplate = filterTemplate.content.firstElementChild.cloneNode(true);
+ cloneFilterTemplate.querySelector("input").value = `team_${key}`;
+ cloneFilterTemplate.querySelector("input").id = `team_${key.replace(/\s+/g, '')}`;
+ cloneFilterTemplate.querySelector("input").name = `team_${key.replace(/\s+/g, '')}`;
+ cloneFilterTemplate.querySelector("input").addEventListener("click",checkboxClickHandler);
+ cloneFilterTemplate.querySelector("label").textContent = `${key}`;
+ cloneFilterTemplate.querySelector("label").htmlFor =`team_${key.replace(/\s+/g, '')}`;
+ teamDropDown.append(cloneFilterTemplate);
+ }
+}
+//Update History State / URL on checkbox click
+function checkboxClickHandler() {
+
+ let incomingFilterData = document.querySelectorAll("input");
+ let queryObj = { };
+
+ //Calculate and Create Updated Query String
+ incomingFilterData.forEach(e => {
+ //Find boxes that are checked
+ if (e.checked) {
+ let data = e.value.split("_");
+ if (data[0] == 'role') {
+ if (data[0] in queryObj) {
+ queryObj[data[0]].push(data[1].trim());
+ } else {
+ queryObj[data[0]] = [];
+ queryObj[data[0]].push(data[1].trim());
+ }
+ }
+
+ if (data[0] == 'team') {
+ if (data[0] in queryObj) {
+ queryObj[data[0]].push(data[1].trim());
+ } else {
+ queryObj[data[0]] = [];
+ queryObj[data[0]].push(data[1].trim());
+ }
+ }
}
+ })
+ let questionSymbol = '?';
+ let queryString = Object.keys(queryObj).map(key => key + '=' + queryObj[key]).join('&').replaceAll(" ", "+");
+ let urlParameter = `${questionSymbol}${queryString}`;
- }
+ //Update URL parameters
+ window.history.replaceState(null, '', urlParameter.replaceAll(" ", "+"));
+}
- //Update History State / URL on checkbox click
- function checkboxClickHandler(event){
-
- let incomingFilterData = document.querySelectorAll("input");
- let queryObj = { };
-
- //Calculate and Create Updated Query String
- incomingFilterData.forEach(e => {
- //Find boxes that are checked
- if(e.checked){
- let data = e.value.split("_");
-
- if(data[0] == 'role'){
-
- if(data[0] in queryObj){
- queryObj[data[0]].push(data[1].trim());
- }
- else{
- queryObj[data[0]] = [];
- queryObj[data[0]].push(data[1].trim());
- }
-
- }
- if(data[0]=='team'){
- if(data[0] in queryObj){
- queryObj[data[0]].push(data[1].trim());
- }
- else{
- queryObj[data[0]] = [];
- queryObj[data[0]].push(data[1].trim());
- }
-
- }
- }
- })
- let questionSymbol = '?';
- let queryString = Object.keys(queryObj).map(key => key + '=' + queryObj[key]).join('&').replaceAll(" ","+");
- let urlParameter = `${questionSymbol}${queryString}`;
-
- //Update URL parameters
- window.history.replaceState(null, '', urlParameter.replaceAll(" ","+"));
+//Update UI on URL history change and on DomContent loaded
+window.addEventListener('DOMContentLoaded',updateUI)
+window.addEventListener('locationchange',updateUI)
+function updateUI(){
+ const filterParams = Object.fromEntries(new URLSearchParams(window.location.search));
+ const winsCards = document.querySelectorAll("#responses > .wins-card");
+ const checkboxes = document.querySelectorAll("input");
+
+ //If there are no entries in URL display all Cards
+ if (Object.keys(filterParams).length === 0) {
+ winsCards.forEach(card => { card.style.display = 'flex'; })
+ return;
}
- //Update UI on URL history change and on DomContent loaded
- window.addEventListener('DOMContentLoaded',updateUI)
- window.addEventListener('locationchange',updateUI)
- function updateUI(){
- const filterParams = Object.fromEntries(new URLSearchParams(window.location.search));
- const winsCards = document.querySelectorAll("#responses > .wins-card");
- const checkboxes = document.querySelectorAll("input");
-
- //If there are no entries in URL display all Cards
- if(Object.keys(filterParams).length === 0){
- winsCards.forEach(card=>{card.style.display='flex';})
- return;
- }
-
- //Ensure that checkboxes are marked according to the url query
- checkboxes.forEach(checkbox =>{
- let checkboxData = checkbox.value;
- let checkboxType = checkboxData.split("_")[0];
- let checkboxValue = checkboxData.split('_')[1];
- if(checkboxType in filterParams){
- let args = filterParams[checkboxType].split(',');
- args.includes(checkboxValue) ? checkbox.checked = true : checkbox.checked = false;
- }
- })
-
-
- //Card Display/Hide Logic
- winsCards.forEach(card=>{
- let teamsInCard = (card.querySelector('.wins-card-team').textContent.replace("Team(s):","")).trim();
- teamsInCard = teamsInCard.split(",").map(x=>x.trim());
- let rolesInCard = (card.querySelector('.wins-card-role').textContent.replace("Role(s):","")).trim();
- rolesInCard = rolesInCard.split(",").map(x=>x.trim());
- let cardUnion = [...rolesInCard,...teamsInCard];
-
-
- if(('role' in filterParams) && ('team' in filterParams)){
- let roleInURL = filterParams.role.split(',');
- let teamInURL = filterParams.team.split(',');
- let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
- let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
- ((roleIntersection.length == 0) || (teamIntersection.length == 0)) ? card.style.display='none' : card.style.display='flex'
- }
- else if('role' in filterParams){
- let roleInURL = filterParams.role.split(',');
- let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
- roleIntersection.length == 0 ? card.style.display='none' : card.style.display='flex';
- }
- else if('team' in filterParams){
- let teamInURL = filterParams.team.split(',');
- let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
- teamIntersection.length == 0 ? card.style.display='none' : card.style.display='flex';
-
- }
-
- })
+ //Ensure that checkboxes are marked according to the url query
+ checkboxes.forEach(checkbox => {
+ let checkboxData = checkbox.value;
+ let checkboxType = checkboxData.split("_")[0];
+ let checkboxValue = checkboxData.split('_')[1];
+ if (checkboxType in filterParams) {
+ let args = filterParams[checkboxType].split(',');
+ args.includes(checkboxValue) ? checkbox.checked = true : checkbox.checked = false;
+ }
+ })
+
+
+ //Card Display/Hide Logic
+ winsCards.forEach(card => {
+ let teamsInCard = (card.querySelector('.wins-card-team').textContent.replace("Team(s):", "")).trim();
+ teamsInCard = teamsInCard.split(",").map(x => x.trim());
+ let rolesInCard = (card.querySelector('.wins-card-role').textContent.replace("Role(s):", "")).trim();
+ rolesInCard = rolesInCard.split(",").map(x => x.trim());
+ // let cardUnion = [...rolesInCard, ...teamsInCard];
+
+ if (('role' in filterParams) && ('team' in filterParams)) {
+ let roleInURL = filterParams.role.split(',');
+ let teamInURL = filterParams.team.split(',');
+ let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
+ let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
+ ((roleIntersection.length == 0) || (teamIntersection.length == 0)) ? card.style.display = 'none' : card.style.display = 'flex'
+ } else if ('role' in filterParams) {
+ let roleInURL = filterParams.role.split(',');
+ let roleIntersection = rolesInCard.filter(x => roleInURL.includes(x));
+ roleIntersection.length == 0 ? card.style.display = 'none' : card.style.display = 'flex';
+ } else if ('team' in filterParams) {
+ let teamInURL = filterParams.team.split(',');
+ let teamIntersection = teamsInCard.filter(x => teamInURL.includes(x));
+ teamIntersection.length == 0 ? card.style.display = 'none' : card.style.display = 'flex';
+ }
+ })
+}
+function ifPageEmpty() {
+ if (document.querySelectorAll('.wins-card').length == 0) {
+ const page = document.querySelector('.wins-page-contain');
+ const p = document.createElement('p');
+ page.appendChild(p);
+ p.innerHTML = "No one has shared a win yet...be the first!";
}
+}
- function ifPageEmpty() {
- if (document.querySelectorAll('.wins-card').length == 0) {
- const page = document.querySelector('.wins-page-contain');
- const p = document.createElement('p');
- page.appendChild(p);
- p.innerHTML = "No one has shared a win yet...be the first!";
- }
- }
+function insertIcons(cardSelector, cardString, viewType, cloneCardTemplate = document) {
+ let initialCardList = cardString.split(',').map(item => item.trim())
+ let otherWinsText = [];
+ let cardList = [];
+ const view = viewType;
+
+ initialCardList.forEach(win => {
+ if (win.length > 0 && Object.keys(badgeIcons).indexOf(win) > -1) {
+ cardList.push(win);
+ } else if (win.length > 0 && Object.keys(badgeIcons).indexOf(win) === -1) {
+ otherWinsText.push(win);
+ }
+ });
+ cardList.push(otherWinsText.join(", "));
+
+ const SVG_FILE_PATH = `/assets/images/wins-page/wins-badges/`
+
+ const iconContainer = cloneCardTemplate.querySelector(cardSelector);
+
+ cardList.forEach(item => {
+ if (item in badgeIcons) {
+ iconContainer.insertAdjacentHTML('beforeend',
+ `