https://nicerodds.es/js/journey.js?cache=10

1
2// ---------------------------------------------------------------------------
3// Fit the chooser to the effective viewport
4// ---------------------------------------------------------------------------
5// The chooser is laid out in fixed design pixels (760px wide options, 46px
6// heading). On the park/drive pages everything sized off the viewport goes
7// through CCFIX.viewportWidth()/viewportHeight() so it fills the display and
8// only the chrome is corrected for the browser's page zoom. This page had no
9// such step, so the whole screen was simply shrunk by the root zoom. Derive a
10// fit factor from the *effective* viewport, the same way fitDeviceToViewport
11// and applyFooterScale do in js/ui.js, and apply it as CSS `zoom` on the
12// article's children (see article.journey > * in css/styles.less).
13var JOURNEY_DESIGN_W = 1080;    // .options width in css/styles.less
14var JOURNEY_TARGET_SHARE = 0.87; // share of the effective width the chooser should take
15var JOURNEY_MARGIN = 24;         // breathing room above/below
16var JOURNEY_FIT_MIN = 0.5, JOURNEY_FIT_MAX = 2;
17
18function fitJourneyToViewport() {
19    var article = document.querySelector('article.journey');
20    if (!article) return;
21
22    var hasFix = (typeof CCFIX !== 'undefined' && CCFIX);
23    var viewportWidth = hasFix ? CCFIX.viewportWidth() : window.innerWidth;
24    // This page has no toolbar, so the article may use the full height
25    // (ui-scale.js otherwise reserves --footer-h below it).
26    article.style.setProperty('--footer-h', '0px');
27    var viewportHeight = article.clientHeight || (hasFix ? CCFIX.viewportHeight() : window.innerHeight);
28    if (!viewportWidth || !viewportHeight) return;
29
30    // Measure the natural content height at fit = 1. The children are zoomed,
31    // not the article, so their offsets stay in unzoomed layout px.
32    article.style.setProperty('--journey-fit', '1');
33    var children = Array.prototype.filter.call(article.children, function (el) {
34        return getComputedStyle(el).display !== 'none';
35    });
36    var first = children[0], last = children[children.length - 1];
37    var contentH = first && last
38        ? (last.offsetTop + last.offsetHeight) - first.offsetTop
39        : 0;
40
41    var k = (viewportWidth * JOURNEY_TARGET_SHARE) / JOURNEY_DESIGN_W;
42    if (contentH > 0) {
43        k = Math.min(k, (viewportHeight - JOURNEY_MARGIN * 2) / contentH);
44    }
45    k = Math.max(JOURNEY_FIT_MIN, Math.min(JOURNEY_FIT_MAX, k));
46
47    article.style.setProperty('--journey-fit', String(Math.round(k * 1000) / 1000));
48}
49
50window.addEventListener("DOMContentLoaded", async (event) => {  
51
52    if (document.querySelectorAll('.journey .options').length > 0) {
53
54        let disclaimer = getCookie('disclaimer');
55
56        if (!disclaimer || disclaimer != 'true') {
57            window.location.href = '/safety'
58        }
59
60        let mode = getCookie('journey');
61        if (!mode) {
62            mode = 'park';
63        }
64        document.querySelector('.journey .option[data-selection="' + mode + '"]').classList.add('selected');
65
66        fitJourneyToViewport();
67        window.addEventListener('resize', fitJourneyToViewport);
68        // ui-scale.js calls this whenever its scale or mode changes (incl. on resize).
69        var prevCCFixChange = window.onCCFixChange;
70        window.onCCFixChange = function (scale, fixMode) {
71            if (typeof prevCCFixChange === 'function') { try { prevCCFixChange(scale, fixMode); } catch (e) { } }
72            fitJourneyToViewport();
73        };
74        // Translations arrive after DOMContentLoaded and change the content height.
75        if (document.fonts && document.fonts.ready) { document.fonts.ready.then(fitJourneyToViewport); }
76        setTimeout(fitJourneyToViewport, 250);
77        setTimeout(fitJourneyToViewport, 1000);
78
79
80        document.getElementById('continue-btn').addEventListener('click', (elem) => {
81            let mode = document.querySelector('.journey .option.selected').getAttribute('data-selection');
82
83            setCookie('journey', mode, 365)
84            if (mode == 'park') {
85                window.location.href = '/park';
86            } else {
87                window.location.href = '/driving';
88            }
89        });
90
91        document.querySelectorAll('.journey .options .option').forEach((button) => {
92           
93            button.addEventListener('click', (e) => {
94                e.stopPropagation();
95                document.querySelectorAll('.journey .options .option').forEach((elem) => {
96                    elem.classList.remove('selected');
97                });
98    
99                e.target.closest('.option').classList.add('selected');
100    
101            });
102        })
103
104    }
105});