https://www.klimaatadaptatiebrabant.nl/cache/1_159e2igewzsha.c5f8e638c96c.js

1/**
2 * @description Common UI improvements, should be included in all variants.
3 */
4
5require(['domReady', '/ui/noord-brabant-adaptatieportaal/script/nbaHelper.js'],
6    function (domReady, helper) {
7
8    /** @var {Object} */
9    var elements = {
10        sectionContainer: {}
11    };
12    /** @var {Object} */
13    var storage = {
14        photoCollections: [],
15        mainMenuWidthsIsStored: false,
16        filter: 'Filter'
17    };
18    /** @var {Object} */
19    var attributes = {
20        collapseMainMenuClass: "site--mainMenuCollapsed",
21        hideMenuClass: "site--hideMenu",
22        documentSeekerFilterToggle: "ml-document-seeker-filter-toggle",
23        documentSeekerFilterActive: "site--documentSeekerFilterActive"
24    };
25
26    /** @var {object} */
27    var classes = {
28        searchBox: "t-searchBox",
29        searchToggle: "searchToggle",
30        activeState: "--active",
31        headerSmaller: "header--small",
32        collapsible: "at-collapsible__heading"
33    };
34
35    function init () {
36        elements.body = document.body;
37        elements.site = document.querySelector(".site");
38        elements.header = document.getElementById("header");
39        elements.headerContent = document.querySelector(".header__content");
40        elements.logo = document.querySelector(".logo__image");
41        elements.wrapper = document.querySelector(".wrapper");
42        elements.footer = document.querySelector(".footer");
43        elements.allPhotoCollections = document.querySelectorAll(".pb-gallery-type1, .pb-gallery-type2 .pb-gt2-images");
44        elements.documentSeeker = document.querySelector(".ml-document-seeker");
45        elements.documentSeekerFilter = document.querySelector(".ml-document-seeker .ds-filter");
46        elements.searchBox = document.getElementById(classes.searchBox);
47        elements.searchToggle = document.querySelectorAll("." + classes.searchToggle);
48        elements.breadCrumbs = document.getElementById("breadCrumbs");
49        elements.iframe = document.getElementById('iframe');
50        elements.boxedNewsArticle = document.querySelectorAll('.boxed-news .newslistitem');
51        elements.newsArchiveLink = document.querySelector('.newsnavbar a');
52
53        storage.headerHeight = elements.headerContent.clientHeight;
54
55        document.observe("window:resize", toggleMainMenuState);
56        document.observe("window:resize", flexibleStickyFooter);
57
58        positionHeaderFixed();
59
60        if (elements.iframe) {
61            elements.iframe.style.height = (elements.body.getBoundingClientRect().height - storage.headerHeight) + "px"; // sets iframe height in variant-iframe.html
62        }
63
64        if (elements.boxedNewsArticle) {
65            reorderNewsOutput();
66        }
67
68        helper.addTableWrappers();
69        getPhotoCollectionData();
70        if (storage.photoCollections[0]) {
71            document.observe("window:resize", setPhotoCollectionSize);
72        }
73        if (elements.documentSeekerFilter) {
74            optimizeDocumentSeeker();
75        }
76
77        // Click event listener on outer div, because clicks on
78        // document are not registered on iPhone.
79        if (document.addEventListener) {
80            elements.site.addEventListener("click", onDocumentClickOrTouch);
81        } else {
82            elements.site.attachEvent("onclick", onDocumentClickOrTouch);
83        }
84
85        window.onscroll = function () {
86            // document.documentElement, document.documentElement.scrollTop as elements.body.scrollTop fix for older IE
87            var scrollTop = (document.documentElement && document.documentElement.scrollTop) || elements.body.scrollTop;
88
89            changeHeaderSize(scrollTop);
90        };
91
92        // Handle on resize
93        document.fire("window:resize");
94        Event.observe(window, "resize", handleOnResize);
95    }
96
97    function reorderNewsOutput () {
98        for (var i = 0; i < elements.boxedNewsArticle.length; i++) {
99            var boxedNewsItem = elements.boxedNewsArticle[i];
100            var boxedNewsImage = boxedNewsItem.querySelector('.smallNewsImage');
101            var boxedNewsImageContainer = document.createElement('div');
102            var boxedNewsTextContainer = document.createElement('div');
103            var boxedNewsTitle = boxedNewsItem.querySelector('.newsitemtitle');
104            var boxedNewsLink = boxedNewsItem.querySelector('.readon');
105
106            boxedNewsItem.appendChild(boxedNewsImageContainer);
107            boxedNewsItem.appendChild(boxedNewsTextContainer);
108
109            boxedNewsImageContainer.classList.add('boxed-news__imageContainer');
110            boxedNewsImageContainer.appendChild(boxedNewsImage);
111
112            boxedNewsTextContainer.classList.add('boxed-news__textContainer');
113            boxedNewsTextContainer.appendChild(boxedNewsTitle);
114            boxedNewsTextContainer.appendChild(boxedNewsLink);
115        }
116    }
117
118    /**
119     * onDocumentClickOrTouch
120     * @param {Event} event
121     */
122    function onDocumentClickOrTouch (event) {
123        var element = event.target;
124
125        if (elements.documentSeekerFilter) {
126            if (element.parentNode.classList.contains(attributes.documentSeekerFilterToggle)) {
127                elements.site.classList.add(attributes.documentSeekerFilterActive);
128            } else {
129                elements.site.classList.remove(attributes.documentSeekerFilterActive);
130            }
131        }
132

133        if (element.classList.contains(classes.searchToggle)) {
134            helper.stopEvent(event);
135            elements.searchBox.classList.toggle(classes.searchBox + classes.activeState);
136            document.getElementById("searchfield").focus();
137        }
138
139        if (element.classList.contains(classes.collapsible)) {
140            element.classList.toggle(classes.collapsible + "--open");
141        }
142
143        if (element.parentNode.classList.contains('newsnavbar')) {
144            helper.stopEvent(event);
145        }
146    }
147
148    /**
149     * flexibleStickyFooter
150     */
151    function flexibleStickyFooter () {
152        elements.wrapper.style.minHeight = "";
153
154        var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
155        var wrapperHeight = elements.wrapper.getBoundingClientRect().height;
156
157        if (wrapperHeight > viewportHeight) {
158            return;
159        }
160
161        var footerHeight = elements.footer.getBoundingClientRect().height;
162
163        if (wrapperHeight + footerHeight < viewportHeight) {
164            elements.wrapper.style.minHeight = Math.floor(viewportHeight - footerHeight) - elements.header.clientHeight + "px"; // Minus headerHeight to prevent page from bouncing
165        }
166    }
167
168    /**
169     * getPhotoCollectionData
170     */
171    function getPhotoCollectionData () {
172        for (var i = 0; elements.allPhotoCollections.length > i; i++) {
173            var collection = elements.allPhotoCollections[i];
174
175            storage.photoCollections[i] = {};
176            storage.photoCollections[i].originalWidth = collection.getBoundingClientRect().width;
177            storage.photoCollections[i].ratio = collection.getBoundingClientRect().height / storage.photoCollections[i].originalWidth;
178        }
179    }
180
181    /**
182     * setPhotoCollectionSize
183     */
184    function setPhotoCollectionSize () {
185        for (var i = 0; elements.allPhotoCollections.length > i; i++) {
186            var collection = elements.allPhotoCollections[i];
187            var parentBasedWidth = Math.round(elements.allPhotoCollections[i].parentNode.getBoundingClientRect().width);
188            var newWidth = Math.min(parentBasedWidth, storage.photoCollections[i].originalWidth);
189            var newHeight = Math.round(newWidth * storage.photoCollections[i].ratio);
190
191            collection.style.height = newHeight + "px";
192            collection.style.width = newWidth + "px";
193        }
194    }
195
196    /**
197     * toggleMainMenuState
198     */
199    function toggleMainMenuState () {
200        if (!elements.headerContent) {
201            return;
202        }
203
204        if (!storage.mainMenuWidthsIsStored) {
205            storeMainMenuWidths();
206        }
207
208        var headerWidth = elements.headerContent.offsetWidth;
209        var menuFits = headerWidth - storage.mainMenuWidth - storage.logoWidth > 10;
210
211        if (menuFits && elements.site.classList.contains(attributes.collapseMainMenuClass)) {
212            elements.site.classList.remove(attributes.collapseMainMenuClass);
213        }
214
215        if (!menuFits && !elements.site.classList.contains(attributes.collapseMainMenuClass)) {
216            elements.site.classList.add(attributes.collapseMainMenuClass);
217        }
218        positionHeaderFixed();
219    }
220
221    /**
222     * storeMainMenuWidths
223     */
224    function storeMainMenuWidths () {
225        var mainMenuItems = document.querySelectorAll(".menuWrapper > div > ul > li");
226        var mainMenuWidth = 0;
227        var i;
228
229        for (i = 0; mainMenuItems.length > i; i++) {
230            mainMenuWidth += mainMenuItems[i].getBoundingClientRect().width;
231        }
232
233        storage.mainMenuWidth = mainMenuWidth;
234        storage.logoWidth = elements.logo.getAttribute("data-logo-size");
235
236        storage.mainMenuWidthsIsStored = true;
237    }
238
239    /**
240     * optimizeDocumentSeeker
241     */
242    function optimizeDocumentSeeker () {
243        var button = document.createElement("a");
244        var buttonInner = document.createElement("span");
245        var buttonText = document.createTextNode(storage.filter);
246        var element = elements.documentSeeker.parentNode;
247
248        button.classList.add(attributes.documentSeekerFilterToggle);
249        buttonInner.appendChild(buttonText);
250        button.appendChild(buttonInner);
251
252        // Needs to be placed outside of documentSeeker context
253        // because AJAX refreshes everything inside of it.
254        element.insertBefore(button, element.childNodes[0]);
255    }
256
257        /**
258         *  Make header position fixed
259         */
260         function positionHeaderFixed() {
261            storage.headerHeight = elements.header.clientHeight;
262            elements.site.style.paddingTop = storage.headerHeight + "px";
263            elements.header.classList.add("header--pinned");
264        }
265
266        /**
267         * positionBreadcrumbs
268         * Sticks breadCrumbs to page top
269         */
270        function changeHeaderSize(scrollTop) {
271            if (scrollTop >= storage.headerHeight) {
272                elements.site.classList.add(classes.headerSmaller);
273            } else {
274                elements.site.classList.remove(classes.headerSmaller);
275            }
276        }
277
278    /** ---- Event handling ---- */
279
280    /**
281     * handleOnResize
282     */
283    function handleOnResize () {
284        // First of all, create a timer to prevent this function firing 100s of times during the resize event

285        if (typeof(storage.resizeTo) === "number") {
286            window.clearTimeout(storage.resizeTo);
287            delete storage.resizeTo;
288        }
289        storage.resizeTo = function () {
290            document.fire("window:resize");
291        }.delay(0.1);
292    }
293
294    domReady(init);
295});