Last active
April 7, 2021 12:30
-
-
Save SimonHaasnoot/cf2c4a1bdf463bed67c14c976edd52ed to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .flowbox-container h2 { | |
| font-size: 30px; | |
| font-family: "KwantumSansWebBold", "KwantumSansWebBook", Arial, sans-serif; | |
| margin-bottom: 10px; | |
| display: none; | |
| } | |
| .flowbox-container h3 { | |
| font-family: "KwantumSansWebBook", Arial, sans-serif; | |
| font-size: 20px; | |
| margin-bottom: 40px; | |
| display: none; | |
| } | |
| .flowbox-container h3::after { | |
| content: "\E015"; | |
| font-size: 13px; | |
| font-family: "hfgicon"; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| font-style: normal; | |
| font-variant: normal; | |
| font-weight: normal; | |
| text-decoration: none; | |
| text-transform: none; | |
| letter-spacing: 0; | |
| margin-left: 10px; | |
| color: #ee7f00; | |
| } | |
| </style> | |
| <div class="flowbox-container flowbox-container--topspacing flowbox-container--bottomspacing"> | |
| <div class="row"> | |
| <div class="small-12 medium-12 large-12 columns"> | |
| <h2>Zó staat-ie!</h2> | |
| <h3>#Kwantuminhuis</h3> | |
| <div id="js-flowbox-flow" style="min-height: 250px; width: 100%; position: relative"> | |
| <div class="custom-loader__loading rotate" style="position: absolute"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Container div the flowbox needs to be rendered in | |
| const containerId = "#js-flowbox-flow"; | |
| // Flowbox flow key | |
| const key = "2vkzHCHySqi_6a0Fn5ZmLA"; | |
| const loadScript = () => { | |
| (function (d, id) { | |
| if (!window.flowbox) { | |
| var f = function () { | |
| f.q.push(arguments); | |
| }; | |
| f.q = []; | |
| window.flowbox = f; | |
| } | |
| if (d.getElementById(id)) { | |
| return; | |
| } | |
| var s = d.createElement("script"), | |
| fjs = d.scripts[d.scripts.length - 1]; | |
| s.id = id; | |
| s.async = true; | |
| s.src = "https://connect.getflowbox.com/flowbox.js"; | |
| //Init flowbox component when the script is loaded | |
| s.addEventListener("load", () => { | |
| window.flowbox("init", { | |
| container: containerId, | |
| key: key, | |
| locale: "auto", | |
| productId: "0221056", | |
| }); | |
| }); | |
| fjs.parentNode.insertBefore(s, fjs); | |
| })(document, "flowbox-js-embed"); | |
| }; | |
| const watchIntersection = () => { | |
| const callback = (entries, observer) => { | |
| entries.forEach((entry) => { | |
| if (entry.isIntersecting) { | |
| loadScript(); | |
| observer.disconnect(); | |
| } | |
| }); | |
| }; | |
| const observer = new IntersectionObserver(callback, { | |
| rootMargin: "400px", | |
| threshold: 0.1, | |
| }); | |
| const target = document.querySelector(containerId); | |
| observer.observe(target); | |
| }; | |
| // Watch mutations on the container to see if there are items getting loaded in | |
| const watchMutation = () => { | |
| const displayTitles = () => { | |
| const title = document.querySelector('.flowbox-container h2').style.display = 'block'; | |
| const subtitle = document.querySelector('.flowbox-container h3').style.display = 'block'; | |
| } | |
| const callback = function (mutationsList, observer) { | |
| for (const mutation of mutationsList) { | |
| if (mutation.type === "childList") { | |
| if(mutation.addedNodes.length > 0 ) { | |
| displayTitles(); | |
| mutationObserver.disconnect(); | |
| } | |
| } | |
| } | |
| }; | |
| const mutationObserver = new MutationObserver(callback); | |
| const target = document.querySelector(containerId); | |
| mutationObserver.observe(target, {attributes: true, childList: true, subtree: true}); | |
| }; | |
| watchIntersection(); | |
| watchMutation(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment