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);}); |
+}()); |