Merge f93792d into 4798be0

network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html

@@ -63,3 +63,7 @@
   {# This uses the mofo main.js for now, to make sure "things work" until we (maybe never?) create a separate bundle #}
   <script src="{% static "_js/main.compiled.js" %}"></script>
 {% endblock %}
+
+{% block extra_scripts %}
+  <script src="{% static "_js/mozfest.compiled.js" %}"></script>
+{% endblock %}

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/profile_directory.html

@@ -13,6 +13,6 @@
 
   {% if filters|length > 0 %}
   <input type="hidden" data-api-endpoint="{{ api_endpoint }}">
-  <script src="{% static 'js/directory-listing-filters.js' %}" async defer></script>
+  <script src="{% static '_js/directory-listing-filters.compiled.js' %}" async defer></script>
   {% endif %}
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html

@@ -87,3 +87,7 @@
 {% block footer_block %}
 {% include "partials/footer.html" %}
 {% endblock %}
+
+{% block extra_scripts %}
+  <script src="{% static "_js/youtube-regrets.compiled.js" %}"></script>
+{% endblock %}

source/js/buyers-guide/bg-main.js

@@ -93,7 +93,7 @@ let main = {
     let envReq = new XMLHttpRequest();
 
     envReq.addEventListener(`load`, () => {
-      callback.call(this, JSON.parse(envReq.response));
+      callback(JSON.parse(envReq.response));
     });
 
     envReq.open(`GET`, `/environment.json`);

source/js/common/template-js-handles/footer-donate-button.js

@@ -2,6 +2,7 @@ import { ReactGA } from "../react-ga-proxy.js";
 
 /**
  * Bind click handler to #donate-footer-btn
+ * ("Donate" button on footer)
  */
 export default () => {
   let donateFooterBtn = document.getElementById(`donate-footer-btn`);

source/js/common/template-js-handles/header-donate-button.js

@@ -0,0 +1,18 @@
+import { ReactGA } from "../../common";
+
+/**
+ * Bind click handler to #donate-header-btn
+ * ("Donate" button on primary nav)
+ */
+export default () => {
+  let donateHeaderBtn = document.getElementById(`donate-header-btn`);
+  if (donateHeaderBtn) {
+    donateHeaderBtn.addEventListener(`click`, () => {
+      ReactGA.event({
+        category: `donate`,
+        action: `donate button tap`,
+        label: `${document.title} header`
+      });
+    });
+  }
+};

source/js/common/template-js-handles/index.js

@@ -1,8 +1,10 @@
-import bindFooterDonateButtonHandler from "./footer-donate-button";
+import bindHeaderDonateButtonHanlder from "./header-donate-button.js";
+import bindFooterDonateButtonHandler from "./footer-donate-button.js";
 
 /**
  * Bind event handlers
  */
 export const bindCommonEventHandlers = () => {
+  bindHeaderDonateButtonHanlder();
   bindFooterDonateButtonHandler();
 };

source/js/foundation/index.js

@@ -1,2 +1,5 @@
-export { bindEventHandlers } from "./template-js-handler";
+export {
+  bindWindowEventHandlers,
+  bindEventHandlers
+} from "./template-js-handler";
 export { injectReactComponents } from "./inject-react";

source/js/foundation/inject-react/multipage-nav.js

@@ -3,23 +3,21 @@ import ReactDOM from "react-dom";
 import MultipageNavMobile from "../../components/multipage-nav-mobile/multipage-nav-mobile.jsx";
 
 /**
- * Inject multipage navs (secondary navs)
+ * Inject mobile version of multipage navs (secondary navs)
  * @param {Array} apps The existing array we are using to to track all ReactDOM.render calls
  */
 export default apps => {
-  if (document.querySelector(`#multipage-nav`)) {
-    let links = [];
+  let multipageLinks = document.querySelectorAll(`#multipage-nav a`);
 
-    links = [].map.call(
-      document.querySelectorAll(`#multipage-nav a`),
-      child => {
-        return {
-          label: child.textContent.trim(),
-          href: child.getAttribute(`href`),
-          isActive: !!child.getAttribute(`class`).match(/active/)
-        };
-      }
-    );
+  if (multipageLinks.length > 0) {
+    let links = [...multipageLinks].map(link => {
+      console.log(`link`, link);
+      return {
+        label: link.textContent.trim(),
+        href: link.getAttribute(`href`),
+        isActive: !!link.getAttribute(`class`).match(/active/)
+      };
+    });
 
     apps.push(
       new Promise(resolve => {

source/js/foundation/pages/mozfest/index.js

@@ -0,0 +1,3 @@
+export { bindEventHandlers } from "./template-js-handler";
+
+bindMozFestEventHandlers();

source/js/foundation/pages/mozfest/template-js-handler/footer-social-button.js

@@ -0,0 +1,22 @@
+import { ReactGA } from "../../../../common";
+
+/**
+ * Bind handler to social buttons on MozFest footer
+ */
+export default () => {
+  let footerSocialButtons = document.querySelectorAll(
+    `body.mozfest footer a[data-platform]`
+  );
+
+  if (footerSocialButtons) {
+    footerSocialButtons.forEach(button => {
+      button.addEventListener(`click`, () => {
+        ReactGA.event({
+          category: `social`,
+          action: `social button tap`,
+          label: `${button.dataset.platform} footer button tap`
+        });
+      });
+    });
+  }
+};

source/js/mozfest-event-handlers.js → source/js/foundation/pages/mozfest/template-js-handler/home-banner.js

@@ -1,4 +1,22 @@
-const bindHomeBannerHandlers = () => {
+import { ReactGA } from "../../../../common";
+
+const watchVideoButtonHandler = () => {
+  let homeWatchVideoButton = document.querySelector(
+    `#mozfest-home-watch-video-button`
+  );
+
+  if (homeWatchVideoButton) {
+    homeWatchVideoButton.addEventListener(`click`, () => {
+      ReactGA.event({
+        category: `CTA`,
+        action: `watch video tap`,
+        label: `watch video button tap`
+      });
+    });
+  }
+};
+
+const backgroundVideoHandler = () => {
   let homepageBanner = document.querySelector(
     "#view-mozfest-home #hero .banner"
   );
@@ -46,6 +64,10 @@ const bindHomeBannerHandlers = () => {
   }
 };
 
+/**
+ * Bind handlers to MozFest homepage banner
+ */
 export default () => {
-  bindHomeBannerHandlers();
+  watchVideoButtonHandler();
+  backgroundVideoHandler();
 };

source/js/foundation/pages/mozfest/template-js-handler/index.js

@@ -0,0 +1,12 @@
+import homepageBannerHandler from "./home-banner.js";
+import primaryButtonHandler from "./primary-button.js";
+import footerSocialButtonHandler from "./footer-social-button.js";
+
+/**
+ * Bind event handlers to MozFest specific elements
+ */
+export const bindEventHandlers = () => {
+  footerSocialButtonHandler();
+  homepageBannerHandler();
+  primaryButtonHandler();
+};

source/js/foundation/pages/mozfest/template-js-handler/primary-button.js

@@ -0,0 +1,22 @@
+import { ReactGA } from "../../../../common";
+
+/**
+ * Bind handler to primary buttons on MozFest
+ */
+export default () => {
+  let cmsPrimaryButtons = document.querySelectorAll(
+    `body.mozfest .cms a.btn.btn-primary`
+  );
+
+  if (cmsPrimaryButtons) {
+    cmsPrimaryButtons.forEach(button => {
+      button.addEventListener(`click`, () => {
+        ReactGA.event({
+          category: `CTA`,
+          action: `button tap`,
+          label: button.innerText
+        });
+      });
+    });
+  }
+};

source/js/youtube-regrets.js → source/js/foundation/pages/youtube-regrets/index.js

@@ -1,5 +1,5 @@
-import utility from "./utility";
-import navNewsletter from "./nav-newsletter.js";
+import utility from "../../../utility.js";
+import navNewsletter from "../../../nav-newsletter.js";
 
 // factor for bringing image blocks closer to perspective origin
 const ZOOM_FACTOR = 2.5;
@@ -257,4 +257,4 @@ class YouTubeRegretsTunnel {
 
 const youTubeRegretsTunnel = new YouTubeRegretsTunnel();
 
-export default youTubeRegretsTunnel;
+youTubeRegretsTunnel.init();

source/js/foundation/template-js-handler/index.js

@@ -1,9 +1,21 @@
+import stickyCtaHandler from "./window/sticky-cta";
+import stickyShareButtonGroupHandler from "./window/sticky-share-button-group";
+
 import internetHealthSeeMoreHanlder from "./internet-health-see-more.js";
 import loadMoreEntriesHandler from "./load-more-entries.js";
 import participatePageDonateHandler from "./participate-page-donate.js";
 import pulseProfileCardHandler from "./pulse-profile-card.js";
 import pulseProfileListFilterHandler from "./pulse-profile-list-filter.js";
 
+/**
+ * Bind global event handlers
+ */
+export const bindWindowEventHandlers = () => {
+  // global handlers for "window"
+  stickyCtaHandler();
+  stickyShareButtonGroupHandler();
+};
+
 /**
  * Bind event handlers
  */

source/js/foundation/template-js-handler/window/sticky-cta.js

@@ -0,0 +1,74 @@
+/**
+ * Bind handler to window for sticky CTA button to work on mobile
+ */
+export default () => {
+  let lastKnownScrollPosition = 0;
+  let ticking = false;
+  let elBurgerWrapper = document.querySelector(`.wrapper-burger`);
+
+  let adjustNavbar = scrollPosition => {
+    if (scrollPosition > 0) {
+      elBurgerWrapper.classList.add(`scrolled`);
+    } else {
+      elBurgerWrapper.classList.remove(`scrolled`);
+    }
+  };
+
+  let elCtaAnchor = document.querySelector(`#cta-anchor`);
+  let elStickyButton = document.querySelector(
+    `.narrow-sticky-button-container`
+  );
+  let noopCtaButton = () => {};
+  let adjustCtaButton = noopCtaButton;
+
+  if (elCtaAnchor && elStickyButton) {
+    let getAnchorPosition = () => {
+      return (
+        elCtaAnchor.getBoundingClientRect().top +
+        window.scrollY -
+        window.innerHeight
+      );
+    };
+
+    let ctaAnchorPosition = getAnchorPosition();
+
+    window.addEventListener(`resize`, () => {
+      ctaAnchorPosition = getAnchorPosition();
+    });
+
+    let scrollCtaButton = scrollPosition => {
+      if (scrollPosition > ctaAnchorPosition) {
+        elStickyButton.classList.add(`hidden`);
+        adjustCtaButton = noopCtaButton;
+      }
+    };
+
+    let initCtaButton = scrollPosition => {
+      if (scrollPosition <= ctaAnchorPosition) {
+        elStickyButton.classList.remove(`hidden`);
+        adjustCtaButton = scrollCtaButton;
+      }
+    };
+
+    adjustCtaButton = initCtaButton;
+  }
+
+  let onScroll = () => {
+    lastKnownScrollPosition = window.scrollY;
+
+    if (!ticking) {
+      window.requestAnimationFrame(() => {
+        adjustNavbar(lastKnownScrollPosition);
+        adjustCtaButton(lastKnownScrollPosition);
+        ticking = false;
+      });
+    }
+
+    ticking = true;
+  };
+
+  window.addEventListener(`scroll`, onScroll);
+
+  // Call once to get scroll position on initial page load.
+  onScroll();
+};

source/js/foundation/template-js-handler/window/sticky-share-button-group.js

@@ -0,0 +1,31 @@
+/**
+ * Bind scroll handler to window to toggle sticky share buttons on blog page
+ */
+export default () => {
+  let blogPageStickyButtons = document.querySelector(
+    `#view-blog .blog-sticky-side .share-button-group`
+  );
+  let blogPageFullButtons = document.querySelector(
+    `#view-blog .blog-body .share-button-group`
+  );
+
+  if (blogPageStickyButtons && blogPageFullButtons) {
+    const isInViewport = element => {
+      let box = element.getBoundingClientRect();
+
+      return box.top <= window.innerHeight && box.top + box.height >= 0;
+    };
+
+    const toggleStickyButtons = () => {
+      if (isInViewport(blogPageFullButtons)) {
+        blogPageStickyButtons.classList.add(`faded`);
+      } else {
+        blogPageStickyButtons.classList.remove(`faded`);
+      }
+    };
+
+    window.addEventListener(`scroll`, toggleStickyButtons);
+
+    toggleStickyButtons();
+  }
+};