https://www.kinderhulp-afrika.nl/ui/sapphire/droplets/friendlyBurger/friendlyBurger.js

1(function () {
2    'use strict';
3
4    define(function () {
5
6        var elements = {};
7        var isDrawerOpen = false;
8        var isOpenClass = '';
9
10        return {
11            setup: setup,
12            open: openDrawer,
13            close: closeDrawer
14        };
15
16        /**
17         * @constructor
18         */
19        function setup (selectors, classNames) {
20            selectors = selectors  || {};
21            selectors.anywhere = selectors.hasOwnProperty('anywhere') ? selectors.anywhere : false;
22            selectors.content = selectors.hasOwnProperty('content') ? selectors.content : '#content';
23            selectors.toggler = selectors.hasOwnProperty('toggler') ? selectors.toggler : '.friendlyBurger-toggler';
24            selectors.drawer = selectors.hasOwnProperty('drawer') ? selectors.drawer : '.friendlyBurger-drawer';
25            selectors.close = selectors.hasOwnProperty('close') ? selectors.close : '.friendlyBurger-close';
26
27            classNames = classNames || {};
28            isOpenClass = classNames.hasOwnProperty('isOpen') ? classNames.isOpen : 'friendlyBurger--isOpen';
29
30            elements.body = document.body;
31            elements.anywhere = document.querySelector(selectors.anywhere);
32            elements.content = document.querySelector(selectors.content);
33            elements.toggler = document.querySelector(selectors.toggler);
34            elements.drawer = document.querySelector(selectors.drawer);
35            elements.close = document.querySelector(selectors.close);
36
37            if (!elements.body || !elements.content || !elements.toggler || !elements.drawer) {
38                console.log('not all friendlyBurger elements are on this page');
39                return;
40            }
41
42            if (elements.anywhere) {
43                elements.anywhere.addEventListener('click', handleClick);
44                return;
45            }
46
47            document.addEventListener('click', handleClick);
48        }
49
50        /**
51         * @param event
52         */
53        function handleClick (event) {
54            var element = event.target;
55
56            if (isToggler(element)) {
57                toggleDrawer(event);
58                return;
59            }
60
61            if (isCloseButton(element)) {
62                closeDrawer(event);
63                return;
64            }
65
66            if (isDrawerOpen && !isDrawer(element)) {
67                closeDrawer(event);
68            }
69        }
70
71        /**
72         * @param event
73         */
74        function toggleDrawer (event) {
75            if (isDrawerOpen) {
76                closeDrawer(event);
77                return;
78            }
79
80            openDrawer(event);
81        }
82
83        /**
84         * @param event
85         */
86        function openDrawer (event) {
87            if (event) {
88                event.preventDefault();
89            }
90
91            elements.body.classList.add(isOpenClass);
92            isDrawerOpen = true;
93
94            // Focus without scrolling
95            var y = window.pageYOffset;
96            elements.drawer.focus();
97            window.scrollTo(0, y);
98        }
99
100        /**
101         * @param event
102         */
103        function closeDrawer (event) {
104            if (event) {
105                event.preventDefault();
106            }
107
108            elements.body.classList.remove(isOpenClass);
109            isDrawerOpen = false;
110
111            // Focus without scrolling
112            var y = window.pageYOffset;
113            elements.content.focus();
114            window.scrollTo(0, y);
115        }
116
117        /**
118         * @param {HTMLElement} element
119         * @returns {boolean}
120         */
121        function isToggler (element) {
122            return (element === elements.toggler || elements.toggler.contains(element));
123        }
124
125        /**
126         * @param {HTMLElement} element
127         * @returns {boolean}
128         */
129        function isCloseButton (element) {
130            if (!elements.close) {
131                return false;
132            }
133
134            return (element === elements.close || elements.close.contains(element));
135        }
136
137        /**
138         * @param {HTMLElement} element
139         * @returns {boolean}
140         */
141        function isDrawer (element) {
142            return (element === elements.drawer || elements.drawer.contains(element));
143        }
144    });
145})();