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