OLD | NEW |
(Empty) | |
| 1 "use strict"; |
| 2 |
| 3 (function() { |
| 4 function initLanguageSelection() { |
| 5 var locale = document.getElementById("navbar-locale-selected"); |
| 6 |
| 7 // skip if page does not have language selection (EG: blog) |
| 8 if (!locale) return; |
| 9 |
| 10 locale.addEventListener("click", function() { |
| 11 document.getElementById("navbar-locale-menu") |
| 12 .classList.toggle("visible"); |
| 13 }, false); |
| 14 } |
| 15 |
| 16 function navigationClick(event) { |
| 17 document.getElementById("navbar-menu") |
| 18 .classList.toggle("visible"); |
| 19 } |
| 20 |
| 21 function initMenu() { |
| 22 document.getElementById("navbar-menu-toggle") |
| 23 .addEventListener("click", navigationClick, false); |
| 24 } |
| 25 |
| 26 function initNavbarToggle() { |
| 27 var navbar = document.getElementById("navbar"); |
| 28 var navbarLocale = document.getElementById("navbar-locale-menu"); |
| 29 var navbarHeight = navbar.offsetHeight; |
| 30 var scrollHandled = false; |
| 31 var lastScrollTop = 0; |
| 32 var desktopBreakpoint = 991; |
| 33 |
| 34 // IE9 does not support offsetHeight when element is fixed |
| 35 if (!navbarHeight) |
| 36 return; |
| 37 |
| 38 window.addEventListener("scroll", (function() { |
| 39 scrollHandled = false; |
| 40 })); |
| 41 |
| 42 setInterval(function() { |
| 43 if(window.innerWidth > desktopBreakpoint) { |
| 44 if ( |
| 45 !scrollHandled && |
| 46 ( // locale menu is not visible |
| 47 !navbarLocale || // our blog doesn't have a locale menu |
| 48 !navbarLocale.classList.contains("visible") |
| 49 ) |
| 50 ) { |
| 51 scrollHandled = handleScroll(); |
| 52 } |
| 53 } |
| 54 else { |
| 55 navbar.style.top = 0; |
| 56 } |
| 57 }, 250); |
| 58 |
| 59 function handleScroll() { |
| 60 var currentScroll = window.pageYOffset; |
| 61 if (currentScroll > lastScrollTop && currentScroll > navbarHeight) { |
| 62 navbar.style.top = "-" + navbarHeight + "px"; |
| 63 } else { |
| 64 navbar.style.top = 0; |
| 65 } |
| 66 lastScrollTop = currentScroll; |
| 67 return true; |
| 68 } |
| 69 } |
| 70 |
| 71 initLanguageSelection(); |
| 72 initMenu(); |
| 73 initNavbarToggle(); |
| 74 })(); |
| 75 |
| 76 (function() |
| 77 { |
| 78 /** |
| 79 * Creats a GDPR compatible video |
| 80 * @constructor |
| 81 * @param {Element} parent - video parent / container |
| 82 * @example |
| 83 * <div id="example-video" class="video-parent"> |
| 84 * <a |
| 85 * class="video-link" |
| 86 * target="_blank" |
| 87 * href="http://example.com/iframe/video/src"> |
| 88 * <img |
| 89 * class="video-thumbnail" |
| 90 * alt="Short description of video" |
| 91 * src="/img/video-thumbnail.png" /> |
| 92 * <img |
| 93 * class="video-play" |
| 94 * alt="Open video in separate window"" |
| 95 * src="/img/video-link.png" /> |
| 96 * </a> |
| 97 * <p class="video-disclaimer">Disclaimer text</p> |
| 98 * </div> |
| 99 */ |
| 100 function Video(parent) |
| 101 { |
| 102 /** |
| 103 * Video parent / container element |
| 104 * @member {Element} |
| 105 */ |
| 106 this.parent = parent; |
| 107 |
| 108 /** |
| 109 * The last time that the play button was clicked |
| 110 * @member {number} |
| 111 */ |
| 112 this.lastClicked = 0; |
| 113 |
| 114 var videoLink = parent.querySelector(".video-link"); |
| 115 |
| 116 /** |
| 117 * The iframe video src url |
| 118 * @member {string} |
| 119 */ |
| 120 this.src = videoLink.getAttribute("href"); |
| 121 |
| 122 //remove disclaimer if disclaimer is shown by default |
| 123 this.parent.classList.add("hide-disclaimer"); |
| 124 |
| 125 //change external link icon into play button icon |
| 126 parent.querySelector(".video-play") |
| 127 .setAttribute("src", "/img/video-play.png"); |
| 128 |
| 129 //show disclaimer or replace thumbnail with video on click |
| 130 videoLink.addEventListener("click", this._onPlayClick.bind(this)); |
| 131 } |
| 132 |
| 133 Video.prototype = { |
| 134 |
| 135 _onPlayClick: function(event) |
| 136 { |
| 137 event.preventDefault(); |
| 138 |
| 139 if (this.parent.classList.contains("hide-disclaimer")) |
| 140 this.toggleDisclaimer(); |
| 141 //prevent bypassing the disclaimer via double click |
| 142 else if (new Date().getTime() - this.lastClicked > 600) |
| 143 this.insertVideo(); |
| 144 }, |
| 145 |
| 146 toggleDisclaimer: function() |
| 147 { |
| 148 this.parent.classList.toggle("hide-disclaimer"); |
| 149 this.lastClicked = new Date().getTime(); |
| 150 }, |
| 151 |
| 152 /** Replace video thumbnail with video iframe */ |
| 153 insertVideo: function() |
| 154 { |
| 155 this.parent.classList.add("hide-disclaimer"); |
| 156 this.parent.classList.add("has-iframe"); |
| 157 |
| 158 //replace static thumbnail with iframe video |
| 159 this.parent.innerHTML = |
| 160 "<iframe " + |
| 161 "class='video-iframe' " + |
| 162 "frameborder=0 " + |
| 163 "allowfullscreen " + |
| 164 "src='" + encodeURI(this.src) + "'>" + |
| 165 "</iframe>"; |
| 166 } |
| 167 }; |
| 168 |
| 169 window.videos = [].slice.call(document.querySelectorAll(".video-parent")) |
| 170 .map(function(parent) {return new Video(parent);}); |
| 171 }()); |
OLD | NEW |