From c4a82188007efb06d474a63215005c551f0b0c31 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Wed, 9 Oct 2019 15:20:03 -0700 Subject: [PATCH 1/6] classify primary-nav.js --- source/js/primary-nav.js | 143 +++++++++++++++++++++++---------------- 1 file changed, 83 insertions(+), 60 deletions(-) diff --git a/source/js/primary-nav.js b/source/js/primary-nav.js index 7e52fc580cc..e4e9dbba7cd 100644 --- a/source/js/primary-nav.js +++ b/source/js/primary-nav.js @@ -1,81 +1,104 @@ import ReactGA from "react-ga"; +import utility from "./utility"; import navNewsletter from "./nav-newsletter.js"; -let primaryNav = { - init: function() { - let elBurger = document.querySelector(`.burger`); - let elWideMenu = document.querySelector(`.wide-screen-menu`); - let elNarrowMenu = document.querySelector(`.narrow-screen-menu`); - let primaryNavContainer = document.getElementById(`primary-nav-container`); - let navMode = primaryNavContainer.dataset.navMode; - let menuOpen = false; +let elements = { + elBurger: `.burger`, + elWideMenu: `.wide-screen-menu`, + elNarrowMenu: `.narrow-screen-menu`, + primaryNavContainer: `#primary-nav-container` +}; - function setWideMenuState(openMenu) { - if (navMode === `zen`) { - if (openMenu) { - elWideMenu.classList.remove(`hidden`); - } else { - elWideMenu.classList.add(`hidden`); - } - } - } +class PrimaryNav { + constructor() { + this.navMode = null; + this.menuOpen = false; + } - function setNarrowMenuState(openMenu) { + setWideMenuState(openMenu) { + if (this.navMode === `zen`) { if (openMenu) { - elNarrowMenu.classList.remove(`hidden`); + elements.elWideMenu.classList.remove(`hidden`); } else { - elNarrowMenu.classList.add(`hidden`); + elements.elWideMenu.classList.add(`hidden`); } } + } - function setBurgerState(openMenu) { - if (openMenu) { - elBurger.classList.add(`menu-open`); - } else { - elBurger.classList.remove(`menu-open`); - } + setNarrowMenuState(openMenu) { + if (openMenu) { + elements.elNarrowMenu.classList.remove(`hidden`); + } else { + elements.elNarrowMenu.classList.add(`hidden`); } + } - function trackMenuState(openMenu) { - if (openMenu) { - ReactGA.event({ - category: `navigation`, - action: `show menu`, - label: `Show navigation menu` - }); - } else { - ReactGA.event({ - category: `navigation`, - action: `hide menu`, - label: `Hide navigation menu` - }); - } + setBurgerState(openMenu) { + if (openMenu) { + elements.elBurger.classList.add(`menu-open`); + } else { + elements.elBurger.classList.remove(`menu-open`); } + } - function setMenuState(openMenu) { - setWideMenuState(openMenu); - setNarrowMenuState(openMenu); - setBurgerState(openMenu); - trackMenuState(openMenu); + trackMenuState(openMenu) { + if (openMenu) { + ReactGA.event({ + category: `navigation`, + action: `show menu`, + label: `Show navigation menu` + }); + } else { + ReactGA.event({ + category: `navigation`, + action: `hide menu`, + label: `Hide navigation menu` + }); } + } - document.addEventListener(`keyup`, e => { - if (e.keyCode === 27) { - menuOpen = false; - setMenuState(menuOpen); - } + setMenuState(openMenu) { + this.setWideMenuState(openMenu); + this.setNarrowMenuState(openMenu); + this.setBurgerState(openMenu); + this.trackMenuState(openMenu); + } + + init() { + if (!utility.checkAndBindDomNodes(elements)) { + return; + } + + this.navMode = elements.primaryNavContainer.dataset.navMode; + + document.addEventListener(`keyup`, event => { + this.docKeyupHanlder(event); }); - elBurger.addEventListener(`click`, () => { - if (navNewsletter.getShownState()) { - // if newsletter section is open, close just that section - // instead of changing the menuOpen state - navNewsletter.closeMobileNewsletter(); - } else { - menuOpen = !menuOpen; - setMenuState(menuOpen); - } + + elements.elBurger.addEventListener(`click`, () => { + this.elBurgerClickHanlder(); }); } -}; + + docKeyupHanlder(event) { + if (event.keyCode === 27) { + this.menuOpen = false; + this.setMenuState(this.menuOpen); + } + } + + elBurgerClickHanlder() { + if (navNewsletter.getShownState()) { + // if newsletter section is open, close just that section + // instead of changing the menuOpen state + navNewsletter.closeMobileNewsletter(); + } else { + this.menuOpen = !this.menuOpen; + this.setMenuState(this.menuOpen); + } + } +} + +const primaryNav = new PrimaryNav(); export default primaryNav; From c19ef20cc89d72da0cb3d21fe9b48ba4b590f467 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Wed, 9 Oct 2019 22:01:17 -0700 Subject: [PATCH 2/6] youtube mobile signup form hack --- .../pages/youtube_regrets_page.html | 1 + source/js/youtube-regrets.js | 28 +++++++++++++------ source/sass/views/youtube-regrets.scss | 23 ++++++++------- 3 files changed, 32 insertions(+), 20 deletions(-) diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html index f4c1ce8ff5e..81233967b3b 100644 --- a/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html +++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html @@ -33,6 +33,7 @@ {% endfor %}
+
diff --git a/source/js/youtube-regrets.js b/source/js/youtube-regrets.js index f861c5f1115..7d8d1e82b37 100644 --- a/source/js/youtube-regrets.js +++ b/source/js/youtube-regrets.js @@ -16,7 +16,9 @@ let elements = { rings: `#view-youtube-regrets .intro-viewport .ring`, introText: `#view-youtube-regrets .intro-viewport .intro-text p`, scrollHint: `#view-youtube-regrets .intro-viewport .scroll-hint`, - newsletterButton: `#view-youtube-regrets .intro-viewport .btn-newsletter` + newsletterButtons: `#view-youtube-regrets .intro-viewport .btn-newsletter`, + newsletterButtonMobile: `#view-youtube-regrets .intro-viewport .btn-newsletter.hidden-lg-up`, + newsletterButtonDesktop: `#view-youtube-regrets .intro-viewport .btn-newsletter.hidden-md-down` }; class YouTubeRegretsTunnel { @@ -63,13 +65,15 @@ class YouTubeRegretsTunnel { * Hide it otherwise. */ setNewsletterButtonVisibility(positionTohide) { - let button = elements.newsletterButton[0]; + let buttons = elements.newsletterButtons; - if (window.pageYOffset >= positionTohide) { - button.classList.add(`d-none`); - } else { - button.classList.remove(`d-none`); - } + buttons.forEach(button => { + if (window.pageYOffset >= positionTohide) { + button.classList.add(`d-none`); + } else { + button.classList.remove(`d-none`); + } + }); } /** @@ -227,10 +231,18 @@ class YouTubeRegretsTunnel { return; } - elements.newsletterButton[0].addEventListener(`click`, event => + elements.newsletterButtonDesktop[0].addEventListener(`click`, event => navNewsletter.buttonDesktopClickHandler(event) ); + elements.newsletterButtonMobile[0].addEventListener(`click`, event => { + if (navNewsletter.getShownState()) { + navNewsletter.closeMobileNewsletter(event); + } else { + navNewsletter.expandMobileNewsletter(event); + } + }); + this.setSceneDepth(); this.setObjectsOpacity(); this.toggleScrollHint(); diff --git a/source/sass/views/youtube-regrets.scss b/source/sass/views/youtube-regrets.scss index d13f58b39c8..c27f042a56a 100644 --- a/source/sass/views/youtube-regrets.scss +++ b/source/sass/views/youtube-regrets.scss @@ -12,6 +12,10 @@ ); } + #nav-newsletter-form-wrapper.faded-in { + height: 100vh; + } + .intro-viewport { --scenePerspective: 55; --blockZTranslate: 0; @@ -167,20 +171,20 @@ bottom: 0; display: flex; flex-direction: column; - justify-content: center; - - @media (min-width: $bp-md) { - justify-content: start; - } + justify-content: start; .intro-text { position: relative; width: 100%; max-width: 840px; - height: 55%; + height: 60%; margin: 0 auto; text-align: center; + @media (min-width: $bp-md) { + height: 55%; + } + p { font-family: "Changa", sans-serif; font-weight: 500; @@ -188,8 +192,7 @@ position: absolute; left: 0; right: 0; - top: 0; - bottom: 0; + bottom: 10px; display: flex; justify-content: center; align-items: center; @@ -199,10 +202,6 @@ @include scaleText(30px, 38px, 50px, 56px); - @media (min-width: $bp-md) { - top: unset; - bottom: 10px; - } } } From 62d20895c169e3fa548f8bdc6315acd97bbdd88b Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Wed, 9 Oct 2019 22:04:40 -0700 Subject: [PATCH 3/6] revert changes made to primary-nav.js --- source/js/primary-nav.js | 143 ++++++++++++++++----------------------- 1 file changed, 60 insertions(+), 83 deletions(-) diff --git a/source/js/primary-nav.js b/source/js/primary-nav.js index e4e9dbba7cd..7e52fc580cc 100644 --- a/source/js/primary-nav.js +++ b/source/js/primary-nav.js @@ -1,104 +1,81 @@ import ReactGA from "react-ga"; -import utility from "./utility"; import navNewsletter from "./nav-newsletter.js"; -let elements = { - elBurger: `.burger`, - elWideMenu: `.wide-screen-menu`, - elNarrowMenu: `.narrow-screen-menu`, - primaryNavContainer: `#primary-nav-container` -}; +let primaryNav = { + init: function() { + let elBurger = document.querySelector(`.burger`); + let elWideMenu = document.querySelector(`.wide-screen-menu`); + let elNarrowMenu = document.querySelector(`.narrow-screen-menu`); + let primaryNavContainer = document.getElementById(`primary-nav-container`); + let navMode = primaryNavContainer.dataset.navMode; + let menuOpen = false; -class PrimaryNav { - constructor() { - this.navMode = null; - this.menuOpen = false; - } + function setWideMenuState(openMenu) { + if (navMode === `zen`) { + if (openMenu) { + elWideMenu.classList.remove(`hidden`); + } else { + elWideMenu.classList.add(`hidden`); + } + } + } - setWideMenuState(openMenu) { - if (this.navMode === `zen`) { + function setNarrowMenuState(openMenu) { if (openMenu) { - elements.elWideMenu.classList.remove(`hidden`); + elNarrowMenu.classList.remove(`hidden`); } else { - elements.elWideMenu.classList.add(`hidden`); + elNarrowMenu.classList.add(`hidden`); } } - } - setNarrowMenuState(openMenu) { - if (openMenu) { - elements.elNarrowMenu.classList.remove(`hidden`); - } else { - elements.elNarrowMenu.classList.add(`hidden`); + function setBurgerState(openMenu) { + if (openMenu) { + elBurger.classList.add(`menu-open`); + } else { + elBurger.classList.remove(`menu-open`); + } } - } - setBurgerState(openMenu) { - if (openMenu) { - elements.elBurger.classList.add(`menu-open`); - } else { - elements.elBurger.classList.remove(`menu-open`); + function trackMenuState(openMenu) { + if (openMenu) { + ReactGA.event({ + category: `navigation`, + action: `show menu`, + label: `Show navigation menu` + }); + } else { + ReactGA.event({ + category: `navigation`, + action: `hide menu`, + label: `Hide navigation menu` + }); + } } - } - trackMenuState(openMenu) { - if (openMenu) { - ReactGA.event({ - category: `navigation`, - action: `show menu`, - label: `Show navigation menu` - }); - } else { - ReactGA.event({ - category: `navigation`, - action: `hide menu`, - label: `Hide navigation menu` - }); + function setMenuState(openMenu) { + setWideMenuState(openMenu); + setNarrowMenuState(openMenu); + setBurgerState(openMenu); + trackMenuState(openMenu); } - } - - setMenuState(openMenu) { - this.setWideMenuState(openMenu); - this.setNarrowMenuState(openMenu); - this.setBurgerState(openMenu); - this.trackMenuState(openMenu); - } - init() { - if (!utility.checkAndBindDomNodes(elements)) { - return; - } - - this.navMode = elements.primaryNavContainer.dataset.navMode; - - document.addEventListener(`keyup`, event => { - this.docKeyupHanlder(event); + document.addEventListener(`keyup`, e => { + if (e.keyCode === 27) { + menuOpen = false; + setMenuState(menuOpen); + } }); - - elements.elBurger.addEventListener(`click`, () => { - this.elBurgerClickHanlder(); + elBurger.addEventListener(`click`, () => { + if (navNewsletter.getShownState()) { + // if newsletter section is open, close just that section + // instead of changing the menuOpen state + navNewsletter.closeMobileNewsletter(); + } else { + menuOpen = !menuOpen; + setMenuState(menuOpen); + } }); } - - docKeyupHanlder(event) { - if (event.keyCode === 27) { - this.menuOpen = false; - this.setMenuState(this.menuOpen); - } - } - - elBurgerClickHanlder() { - if (navNewsletter.getShownState()) { - // if newsletter section is open, close just that section - // instead of changing the menuOpen state - navNewsletter.closeMobileNewsletter(); - } else { - this.menuOpen = !this.menuOpen; - this.setMenuState(this.menuOpen); - } - } -} - -const primaryNav = new PrimaryNav(); +}; export default primaryNav; From 42c3256b800703484a165e79dee57cbd40c15ad4 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Fri, 11 Oct 2019 13:02:39 -0700 Subject: [PATCH 4/6] temp new line to trigger Travis tests --- source/sass/views/youtube-regrets.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/source/sass/views/youtube-regrets.scss b/source/sass/views/youtube-regrets.scss index c27f042a56a..7a11afd7225 100644 --- a/source/sass/views/youtube-regrets.scss +++ b/source/sass/views/youtube-regrets.scss @@ -62,6 +62,7 @@ height: 60vw; } + .block { position: absolute; display: block; From 999b51b1469d25129c6bf72fdae7312b55b3a487 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Fri, 11 Oct 2019 13:03:08 -0700 Subject: [PATCH 5/6] remove temp new line --- source/sass/views/youtube-regrets.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/sass/views/youtube-regrets.scss b/source/sass/views/youtube-regrets.scss index 7a11afd7225..c27f042a56a 100644 --- a/source/sass/views/youtube-regrets.scss +++ b/source/sass/views/youtube-regrets.scss @@ -62,7 +62,6 @@ height: 60vw; } - .block { position: absolute; display: block; From d4e2488b07c400ea3b5366b6a154070248ad9ab4 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Fri, 11 Oct 2019 13:10:25 -0700 Subject: [PATCH 6/6] fix linting error --- source/sass/views/youtube-regrets.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/sass/views/youtube-regrets.scss b/source/sass/views/youtube-regrets.scss index c27f042a56a..192eed9b7d4 100644 --- a/source/sass/views/youtube-regrets.scss +++ b/source/sass/views/youtube-regrets.scss @@ -201,7 +201,6 @@ opacity: 0; @include scaleText(30px, 38px, 50px, 56px); - } }