Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/poland/js/main.js

Issue 29809575: Fixes #91 - Updates to polish page from review 29800606 (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Changes made before publishing Created June 18, 2018, 2:18 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« static/poland.html ('K') | « static/poland/js/index.js ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: static/poland/js/main.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/poland/js/main.js
@@ -0,0 +1,171 @@
+"use strict";
+
+(function() {
+ function initLanguageSelection() {
+ var locale = document.getElementById("navbar-locale-selected");
+
+ // skip if page does not have language selection (EG: blog)
+ if (!locale) return;
+
+ locale.addEventListener("click", function() {
+ document.getElementById("navbar-locale-menu")
+ .classList.toggle("visible");
+ }, false);
+ }
+
+ function navigationClick(event) {
+ document.getElementById("navbar-menu")
+ .classList.toggle("visible");
+ }
+
+ function initMenu() {
+ document.getElementById("navbar-menu-toggle")
+ .addEventListener("click", navigationClick, false);
+ }
+
+ function initNavbarToggle() {
+ var navbar = document.getElementById("navbar");
+ var navbarLocale = document.getElementById("navbar-locale-menu");
+ var navbarHeight = navbar.offsetHeight;
+ var scrollHandled = false;
+ var lastScrollTop = 0;
+ var desktopBreakpoint = 991;
+
+ // IE9 does not support offsetHeight when element is fixed
+ if (!navbarHeight)
+ return;
+
+ window.addEventListener("scroll", (function() {
+ scrollHandled = false;
+ }));
+
+ setInterval(function() {
+ if(window.innerWidth > desktopBreakpoint) {
+ if (
+ !scrollHandled &&
+ ( // locale menu is not visible
+ !navbarLocale || // our blog doesn't have a locale menu
+ !navbarLocale.classList.contains("visible")
+ )
+ ) {
+ scrollHandled = handleScroll();
+ }
+ }
+ else {
+ navbar.style.top = 0;
+ }
+ }, 250);
+
+ function handleScroll() {
+ var currentScroll = window.pageYOffset;
+ if (currentScroll > lastScrollTop && currentScroll > navbarHeight) {
+ navbar.style.top = "-" + navbarHeight + "px";
+ } else {
+ navbar.style.top = 0;
+ }
+ lastScrollTop = currentScroll;
+ return true;
+ }
+ }
+
+ initLanguageSelection();
+ initMenu();
+ initNavbarToggle();
+})();
+
+(function()
+{
+ /**
+ * Creats a GDPR compatible video
+ * @constructor
+ * @param {Element} parent - video parent / container
+ * @example
+ * <div id="example-video" class="video-parent">
+ * <a
+ * class="video-link"
+ * target="_blank"
+ * href="http://example.com/iframe/video/src">
+ * <img
+ * class="video-thumbnail"
+ * alt="Short description of video"
+ * src="/img/video-thumbnail.png" />
+ * <img
+ * class="video-play"
+ * alt="Open video in separate window""
+ * src="/img/video-link.png" />
+ * </a>
+ * <p class="video-disclaimer">Disclaimer text</p>
+ * </div>
+ */
+ function Video(parent)
+ {
+ /**
+ * Video parent / container element
+ * @member {Element}
+ */
+ this.parent = parent;
+
+ /**
+ * The last time that the play button was clicked
+ * @member {number}
+ */
+ this.lastClicked = 0;
+
+ var videoLink = parent.querySelector(".video-link");
+
+ /**
+ * The iframe video src url
+ * @member {string}
+ */
+ this.src = videoLink.getAttribute("href");
+
+ //remove disclaimer if disclaimer is shown by default
+ this.parent.classList.add("hide-disclaimer");
+
+ //change external link icon into play button icon
+ parent.querySelector(".video-play")
+ .setAttribute("src", "/img/video-play.png");
+
+ //show disclaimer or replace thumbnail with video on click
+ videoLink.addEventListener("click", this._onPlayClick.bind(this));
+ }
+
+ Video.prototype = {
+
+ _onPlayClick: function(event)
+ {
+ event.preventDefault();
+
+ if (this.parent.classList.contains("hide-disclaimer"))
+ this.toggleDisclaimer();
+ //prevent bypassing the disclaimer via double click
+ else if (new Date().getTime() - this.lastClicked > 600)
+ this.insertVideo();
+ },
+
+ toggleDisclaimer: function()
+ {
+ this.parent.classList.toggle("hide-disclaimer");
+ this.lastClicked = new Date().getTime();
+ },
+
+ /** Replace video thumbnail with video iframe */
+ insertVideo: function()
+ {
+ this.parent.classList.add("hide-disclaimer");
+ this.parent.classList.add("has-iframe");
+
+ //replace static thumbnail with iframe video
+ this.parent.innerHTML =
+ "<iframe " +
+ "class='video-iframe' " +
+ "frameborder=0 " +
+ "allowfullscreen " +
+ "src='" + encodeURI(this.src) + "'>" +
+ "</iframe>";
+ }
+ };
+
+ window.videos = [].slice.call(document.querySelectorAll(".video-parent"))
+ .map(function(parent) {return new Video(parent);});
+}());
« static/poland.html ('K') | « static/poland/js/index.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld