https://www.audit.vic.gov.au/themes/vago/dist/scripts/src/report-aside.js

1import breakpoints from './breakpoints.js';
2import utils from './utils.js';
3import reportSectionsNavigation from './report-sections-navigation.js';
4import '../vendor/modernizr.js';
5import "../vendor/sticky.js";
6//import '../vendor/jquery.ba-throttle-debounce.js'; // No export, just loads the script
7
8var BREAKPOINT_FULL = 1140;
9var FORM_FULL = 'full';
10var FORM_MOBILE = 'mobile';
11
12var $el,
13    _effectiveForm,
14    _id = 'body.page-node-type-report .region-content-aside',
15    _reportSectionsNavigation,
16    _sticky;
17
18function breakpointFullTripped(isViewportGrowing) {
19
20    if (isViewportGrowing) {
21
22        setForm(FORM_FULL);
23
24    } else {
25
26        setForm(FORM_MOBILE);
27    }
28}
29
30function breakpointTripped(breakpoint, isViewportGrowing) {
31
32    switch (breakpoint) {
33
34        case BREAKPOINT_FULL:
35
36            breakpointFullTripped(isViewportGrowing);
37
38            break;
39    }
40}
41
42function getForm() {
43    return _effectiveForm;
44}
45
46function init() {
47    if (_.isUndefined($el)) {
48        $el = jQuery(_id);
49    }
50
51    if (reportSectionsNavigation.isPresent()) {
52        _reportSectionsNavigation = reportSectionsNavigation;
53        _reportSectionsNavigation.init(false);
54    } else {
55        _reportSectionsNavigation = null;
56    }
57
58    _sticky = null;
59
60    breakpoints.add([BREAKPOINT_FULL]);
61
62    /*
63        Because no breakpoints are tripped when the
64        page first loads, figure out what the window
65        width is and fake a trip to initialise
66        everything.
67    */
68    if (BREAKPOINT_FULL > utils.windowWidth()) {
69        breakpointTripped(BREAKPOINT_FULL, false);
70    } else {
71        breakpointTripped(BREAKPOINT_FULL, true);
72    }
73
74    jQuery(document).on(
75        'breakpoints:trip',
76        function (event, breakpoint, isViewportGrowing) {
77            breakpointTripped(breakpoint, isViewportGrowing);
78        }
79    );
80}
81
82function isPresent() {
83    if (_.isUndefined($el)) {
84        $el = jQuery(_id);
85
86        if (0 >= $el.length) return false;
87    }
88
89    return true;
90}
91
92/**
93 * Regulates the height of the report-aside element so that the element
94 * doesn't extend beyond the bottom of the viewport when sticky.
95 */
96function regulateHeight() {
97    var overflow;
98
99    if ($el.hasClass('is-sticky')) {
100        /**
101         * Determine if the report-aside element extends beyond the
102         * bottom of the viewport, and if so, by how much (overflow).
103         */
104        overflow = utils.viewportBottomOverflow($el);
105
106        if (0 > overflow) {
107            /**
108             * If the report-aside element is overflowing the viewport,
109             * adjust the height of the element by subtracting the amount
110             * of the overflow (expressed as a negative integer), plus
111             * an extra 100 pixels so the element doesn't sit flush with
112             * the bottom of the viewport.
113             */
114            $el.height(($el.height() + overflow) - 40);
115            jQuery('.sections', $el).first().css('overflow-y', 'auto');
116        }
117    } else {
118        $el.height('auto');
119        jQuery('.sections', $el).first().css('overflow-y', 'hidden');
120
121        if (!_.isNull(_sticky)) {
122            _sticky.update();
123        }
124    }
125}
126
127function setForm(form, silent) {
128    if (!_.isBoolean(silent)) {
129        silent = false;
130    }
131
132    if (getForm() === form) {
133        /**
134         * No point changing into a form that we're already in.
135         */
136        return;
137    }
138
139    switch (form) {
140        case FORM_FULL:
141            setFullForm(silent);
142            break;
143        case FORM_MOBILE:
144            setMobileForm(silent);
145            break;
146    }
147}
148
149function setFullForm(silent) {
150    if (!_.isBoolean(silent)) {
151        silent = false;
152    }
153
154    jQuery('main.region').css('width', '');
155
156    jQuery(window).off('resize.report-aside');
157    jQuery(window).off('scroll.report-aside');
158    jQuery(window).off('vago.report-sections-navigation:collapsing');
159    jQuery(window).off('vago.report-sections-navigation:expanded');
160
161    if (!_.isNull(_reportSectionsNavigation)) {
162        _reportSectionsNavigation.setSectionsAsShowing();
163    }
164
165    unsetSticky();
166
167    if (!utils.isDrupalToolbarActive()) {
168        setSticky(FORM_FULL);
169    }
170
171    if (!_.isNull(_reportSectionsNavigation)) {
172        _reportSectionsNavigation.setForm(
173            _reportSectionsNavigation.FORM_FULL
174        );
175    }
176
177    if (Modernizr.flexbox) {
178        jQuery(window).on(
179            'resize.report-aside',
180            jQuery.debounce(
181                500,
182                function () {
183                    regulateHeight();
184                }
185            )
186        );
187
188        jQuery(window).on(
189            'scroll.report-aside',
190            jQuery.throttle(
191                500,
192                function () {
193                    regulateHeight();
194                }
195            )
196        );
197    }
198
199    _effectiveForm = FORM_FULL;
200
201    if (!silent) $el.trigger('vago.report-aside:form-full');
202}
203
204function setMobileForm(silent) {
205    if (!_.isBoolean(silent)) {
206        silent = false;

207    }
208
209    jQuery(window).off('resize.report-aside');
210    jQuery(window).off('scroll.report-aside');
211
212    if (!_.isNull(_reportSectionsNavigation)) {
213        _reportSectionsNavigation.setSectionsAsHidden();
214    }
215
216    if (Modernizr.flexbox) {
217        /**
218         * Only make the navigation sticky on mobile if we have flexbox,
219         * otherwise it won't work from a user-experience POV.
220         */
221        if (!utils.isDrupalToolbarActive()) {
222            setSticky(FORM_MOBILE);
223        }
224    } else {
225        unsetSticky();
226    }
227
228    if (!_.isNull(_reportSectionsNavigation)) {
229        _reportSectionsNavigation.setForm(
230            _reportSectionsNavigation.FORM_MOBILE
231        );
232    }
233
234    jQuery('main.region').css('width', '99%');
235
236    if (!_.isNull(_sticky)
237        && Modernizr.flexbox
238    ) {
239        jQuery(window).on(
240            'resize.report-aside',
241            jQuery.debounce(
242                500,
243                function () {
244                    regulateHeight();
245                }
246            )
247        );
248
249        jQuery(window).on(
250            'scroll.report-aside',
251            jQuery.throttle(
252                500,
253                function () {
254                    regulateHeight();
255                }
256            )
257        );
258
259        jQuery(window).on(
260            'vago.report-sections-navigation:collapsing',
261            function () {
262                $el.height('auto');
263            }
264        );
265
266        jQuery(window).on(
267            'vago.report-sections-navigation:expanded',
268            function () {
269                regulateHeight('auto');
270            }
271        );
272    }
273
274    _effectiveForm = FORM_MOBILE;
275
276    if (!silent) $el.trigger('vago.report-aside:form-mobile');
277}
278
279function setSticky(form) {
280    /**
281     * Only make the stickyness smart if we don't have flexbox at our
282     * disposal. Otherwise, we'll take care of regulating the height of
283     * the sticky element ourselves.
284     */
285    var isStickySmart = !Modernizr.flexbox;
286
287    unsetSticky();
288
289    switch (form) {
290        case FORM_FULL:
291            _sticky = new Sticky(
292                _id,
293                {
294                    'marginTop': utils.isDrupalToolbarHorizontal() ? 165 : 87,
295                    'smart': isStickySmart,
296                    'stickyClass': 'is-sticky'
297                }
298            );
299
300            break;
301        case FORM_MOBILE:
302            _sticky = new Sticky(
303                _id,
304                {
305                    'marginTop': utils.isDrupalToolbarHorizontal() ? 78 : 0,
306                    'smart': isStickySmart,
307                    'stickyClass': 'is-sticky'
308                }
309            );
310
311            break;
312    }
313}
314
315function unsetSticky() {
316    if (!_.isNull(_sticky)) {
317        _sticky.destroy();
318        _sticky = null;
319    }
320
321    $el
322        .height('auto')
323        .css('position', '')
324        .css('top', '')
325        .css('left', '')
326        .css('width', '')
327        .removeClass('is-sticky');
328
329}
330
331export default {init, isPresent};