https://www.greenfamilyartfoundation.org/lib/g/2.0/scripts/artlogi…/galleries_js/layout.js

1import debounce from './debounce.js';
2
3var layout = {
4
5    init: function () {
6
7        $('.read_more_container').each(function () {
8            if ($('#read_more_content', this).length) {
9                $('#read_more_button a', this).off().click(function () {
10                    $(this).closest('.read_more_container').find('#read_more_button').addClass("hidden").find("a").attr("aria-expanded", "true");
11                    $(this).closest('.read_more_container').find('#read_less_button').removeClass("hidden");
12                    $(this).closest('.read_more_container').find('#read_more_content').slideDown(400);
13                    return false;
14                });
15
16                $('#read_less_button a', this).off().click(function () {
17                    $(this).closest('.read_more_container').find('#read_more_content').slideUp(300, function () {
18                        $(this).closest('.read_more_container').find('#read_more_button').removeClass("hidden").find("a").attr("aria-expanded", "false");
19                        $(this).closest('.read_more_container').find('#read_less_button').addClass("hidden");
20                    });
21                    return false;
22                });
23            }
24        });
25
26        $('.reveal_more_text_container').each(function () {
27            if ($('.full_content', this).length) {
28                $('.read_more_link a', this).off().click(function () {
29                    $(this).closest('.reveal_more_text_container').find('.initial_content, .read_more_link').slideUp();
30                    $(this).closest('.reveal_more_text_container').find('.full_content').slideDown().focus();
31                    $(this).closest('.reveal_more_text_container').find('.read_less_link').slideDown();
32                    return false;
33                });
34                $('.read_less_link a', this).off().click(function () {
35                    $(this).closest('.reveal_more_text_container').find('.full_content, .read_less_link').slideUp();
36                    $(this).closest('.reveal_more_text_container').find('.initial_content').slideDown().focus();
37                    $(this).closest('.reveal_more_text_container').find('.read_more_link').slideDown();
38                    return false;
39                });
40            }
41        });
42
43        $('.open_panel_link a').off().click(function () {
44            var related_container = $(this).attr('href');
45            if (typeof related_container != 'undefined' && $(related_container).length > 0) {
46                if ($(this).closest('.open_panel_link').hasClass('active')) {
47                    $(this).closest('.open_panel_link').removeClass('active');
48                    $(this).find('.label_toggle[data-inactive]').each(function () {
49                        $(this).text($(this).attr('data-inactive'));
50                    });
51                    $(related_container).slideUp(500, 'easeInOutQuad').focus();
52                } else {
53                    $(this).closest('.open_panel_link').addClass('active');
54                    $(this).find('.label_toggle[data-active]').each(function () {
55                        $(this).text($(this).attr('data-active'));
56                    });
57                    $(related_container).slideDown(500, 'easeInOutQuad');
58                    $('html, body').animate({
59                        scrollTop: $(related_container).offset().top - 60
60                    }, 800, 'easeInOutQuad',
61                        function () {
62
63                        });
64                }
65                return false;
66            }
67        });
68
69
70        if ($("#container").fitVids) {
71            $("#container").fitVids({ ignore: '.video_inline' });
72            $(window).on('resize.fitvids', function () {
73                $('.fluid-width-video-wrapper').each(function () {
74                    if ($(window).width() > 767) {
75                        if (parseInt($(this).css('padding-top')) > parseInt($(this).parent().height()) || $(this).hasClass('dynamic-width-downscaled')) {
76                            var new_padding_top = (($(this).parent().height() / $(this).parent().width()) * 100);
77                            if (parseInt(new_padding_top) < 20) {
78                                new_padding_top = 20;
79                            }
80                            $(this).css('padding-top', new_padding_top + '%');
81                            $(this).addClass('dynamic-width-downscaled');
82                        }
83                    }
84
85                });
86            });
87        }
88
89        window.galleries.layout.header.init();
90        if ($('#header').hasClass('header_fixed')) {
91            window.galleries.layout.header_fixed();
92        }
93
94        $('#content_module:not(.content_module), .content_module').each(function () {
95            var $this = $(this);
96            if ($.trim($this.html()) == '') {
97                $this.addClass('no_content');
98            }
99        });
100
101        window.galleries.layout.images.init();
102
103        // Set in a timeout to fix an issue with flow list on android devices
104        // Parallax also added to timeout to help prevent any timing issues
105        setTimeout(function () {
106
107            window.galleries.layout.inview.init()
108
109            if ($('.parallax-element').length && typeof $(window).parallax != 'undefined') {
110                $(window).parallax.setup();
111                $(window).trigger('scroll'); // Added by Dan H on 25/09/2018 to fix a pageload bug https://artlogic.monday.com/boards/117534001/pulses/114995279
112            }
113
114        }, 100);
115
116
117
118
119
120    },
121
122    images: {
123
124        init: function () {
125
126            window.galleries.layout.images.align_captions();
127            window.galleries.layout.images.align_sidebar_image_captions();
128
129            $(window).on('resize', window.galleries.debounce(200, function () {
130                window.galleries.layout.images.align_captions();
131                window.galleries.layout.images.align_sidebar_image_captions();
132            }));
133
134            $('.image_align_caption').on('change.lazyload-complete', function () {
135                window.galleries.layout.images.align_captions($(this));
136            });
137
138            $('.align_sidebar_image_caption').on('change.lazyload-complete', function () {
139                window.galleries.layout.images.align_sidebar_image_captions($(this));
140            });
141        },
142
143        align_captions: function (elements) {
144
145            var elements = typeof elements != 'undefined' ? elements : '.image_align_caption';
146
147            $(elements).each(function () {
148
149                var image_object_fit_string = typeof $(this).find('img').css('object-fit') != 'undefined' ? $(this).find('img').css('object-fit') : '';
150                var image_object_fit_enabled = false;

151
152                if (image_object_fit_string == 'contain' || image_object_fit_string == 'cover') {
153                    image_object_fit_enabled = true;
154                }
155
156                if ($(this).find('.object-fit-container').length && image_object_fit_enabled) {
157                    var image_wrapper = $(this).find('.object-fit-container');
158                } else if ($(this).find('> span:first-child').not('.caption').length) {
159                    var image_wrapper = $(this).find('> span:first-child').not('.caption');
160                } else {
161                    var image_wrapper = $(this).find('img');
162                }
163
164                if (image_wrapper.length) {
165                    var item_width = image_wrapper.width();
166                    var item_height = image_wrapper.height();
167                    var image_width = (typeof $(this).attr('data-width') != 'undefined' ? $(this).attr('data-width') : 0);
168                    var image_height = (typeof $(this).attr('data-height') != 'undefined' ? $(this).attr('data-height') : 0);
169                    if (image_object_fit_enabled && image_width && image_height && parseInt(image_height) > parseInt(image_width)) {
170                        var height_proportion = image_height / item_height;
171                        var caption_width = image_width / height_proportion;
172
173                        if (caption_width && caption_width > 150) {
174                            $(this).find('.caption').css('max-width', caption_width);
175                        }
176                    } else if (!image_object_fit_enabled) {
177                        var caption_width = image_width;
178
179                        if (caption_width && caption_width > 150) {
180                            $(this).find('.caption').css('max-width', caption_width);
181                        }
182                    }
183                }
184            });
185        },
186
187        align_sidebar_image_captions: function (elements) {
188            var elements = typeof elements != 'undefined' ? elements : '.image.align_sidebar_image_caption';
189
190            $(elements).each(function () {
191                const $this = $(this);
192                const $img = $this.find('img');
193
194                if ($img.css('object-fit') === 'contain') {
195                    $img.css('width', 'auto');
196
197                    $img.on('load', function () {
198                        const $imgWidth = $img.width();
199
200                        if ($imgWidth) {
201                            $this.next('.caption').css({
202                                'max-width': $imgWidth + 'px',
203                                'margin-left': 'auto',
204                                'margin-right': 'auto',
205                            });
206                        }
207                    });
208                }
209            });
210        },
211
212    },
213
214    inview: {
215
216        elements: '.records_list:not(#list_preview_navigation) ul li, #popup_content #image_gallery #image_container, .artwork_detail_wrapper:not(.site-popup-enabled-content) #image_gallery #image_container, #sidebar, .sidebar, .feature_panels ul li.panel, .inview_element',
217
218        init: function (custom_elements) {
219            if (custom_elements && typeof custom_elements != 'undefined') {
220                var inview_elements = $(custom_elements);
221            } else {
222                var inview_elements = $(this.elements);
223            }
224            if ($(inview_elements).length) {
225                Artlogic.import('plugins/inview.js')
226                    .then(function (inview) {
227                        if ($.isFunction($.fn.inview)) {
228                            // if (custom_elements && typeof custom_elements != 'undefined') {
229                            //     inview_elements = $(custom_elements);
230                            // } else {
231                            //     inview_elements = $(window.galleries.layout.inview.elements);
232                            // }
233                            var lazyload_enabled = $('body').hasClass('layout-lazyload-enabled');
234
235                            inview_elements.inview({
236                                'lazyload': lazyload_enabled,
237                                'lazyload_selector': '.image, .image_lazy_load',
238                                'lazyload_loader_html': '<svg class="loader" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10"/></svg>'
239                            });
240                        }
241                    })
242            }
243        },
244
245        destroy: function () {
246            Artlogic.import('plugins/inview.js')
247                .then(function (inview) {
248                    if (typeof $.fn.inview.destroy != 'undefined') {
249                        $.fn.inview.destroy();
250                    }
251                })
252        }
253
254    },
255
256    header: {
257
258        init: function () {
259
260            if ($('#hero_header').length) {
261                if (typeof $('#hero_header').attr('data-height-override') != 'undefined') {
262                    $('body').addClass('layout-hero-header-height-override-' + $('#hero_header').attr('data-height-override'));
263                }
264            }
265
266            window.galleries.layout.header.process();
267            $(window).resize(function () {
268                window.galleries.layout.header.process();
269            });
270        },
271
272        process: function () {
273
274
275            var elements_to_offset = '.hero_splash_text, #hero_header > .inner, #slideshow.fullscreen_slideshow .content';
276            if ($('#header').length && $('.header-ui-wrapper').length && $('#logo').length) {
277                var header_height = $('#header').height();
278
279                if ($('#hero_header').hasClass('hero-mode-fullbleed') && $('#hero_header').hasClass('hero-fixed-aspect-ratio') && $('#header.header_transparent').length == 0) {
280                    $('#hero_header').css('margin-top', header_height);
281                } else if ($('#hero_header').hasClass('hero-mode-fullbleed')) {
282                    $(elements_to_offset).css('padding-top', header_height);
283                }
284
285                if ($('#hero_header').hasClass('hero-mode-fullbleed') && $('#hero_header').hasClass('hero-fixed-aspect-ratio')) {
286                    $('#hero_header').css('min-height', '');
287                    if ($('#hero_header #hero_heading').height() > $('#hero_header').height() - 40) {
288                        $('#hero_header').css('min-height', $('#hero_header #hero_heading').height() + 40);
289                    }
290                }
291
292                var logo_bottom_offset = $('#logo').offset().top + $('#logo').height();
293                var toolbar_top_offset = $('.header-ui-wrapper').offset().top;
294                if (logo_bottom_offset - 1 < toolbar_top_offset) {
295                    $('#header').addClass('header_toolbar_wrapped');
296                } else {
297                    $('#header').removeClass('header_toolbar_wrapped');
298                }
299            } else {
300                $(elements_to_offset).css('padding-top', '');
301            }
302
303            $('.feature_panels .panel_hero .hero_section').each(function () {
304                $(this).css('min-height', '');
305                $(this).closest('.panel_hero').find('.hero_section_placeholder').css('min-height', '');
306                if (($('.hero_heading', this).height()) > $(this).height() - 40) {
307                    $(this).css('min-height', $('.hero_heading', this).height() + 40);
308                    $(this).closest('.panel_hero').find('.hero_section_placeholder').css('min-height', $('.hero_heading', this).height() + 40);
309                }
310            });
311
312            // add .subnav_wrapped class if subnav is too long and has wrapped
313            if ($('.heading_wrapper').length && ($('.heading_wrapper #h1_wrapper').length || $('.heading_wrapper .h1_wrapper').length) && $('.heading_wrapper #sub_nav ul li').length) {
314
315
316                $('.heading_wrapper #sub_nav').removeClass('subnav_wrapped')
317
318                //DC - not sure why we were previously accounting for element heights in this, so removed..
319                var subnav_top_offset = ($('.heading_wrapper #sub_nav').offset().top) - parseInt($('.heading_wrapper #sub_nav').css('margin-top'));
320
321                if ($('.heading_wrapper #h1_wrapper').length) {
322
323                    var h1_wrapper_top_offset = ($('.heading_wrapper #h1_wrapper').offset().top) - parseInt($('.heading_wrapper #h1_wrapper').css('margin-top'));
324                }
325                if ($('.heading_wrapper .h1_wrapper').length) {
326
327                    var h1_wrapper_top_offset = ($('.heading_wrapper .h1_wrapper').offset().top) - parseInt($('.heading_wrapper .h1_wrapper').css('margin-top'));
328                }
329
330

331                var offset_difference = function (subnav_top_offset, h1_wrapper_top_offset) {
332                    return Math.abs(subnav_top_offset - h1_wrapper_top_offset);
333                }(subnav_top_offset, h1_wrapper_top_offset);
334
335                // if the top offsets are different then we know it has wrapped
336                // Allow 3 px for differences in font rendering between browsers
337                if (offset_difference >= 3) {
338                    $('.heading_wrapper #sub_nav').addClass('subnav_wrapped')
339                }
340            }
341        }
342
343    },
344
345    header_fixed: function () {
346
347        $('body').addClass('layout-fixed-header');
348
349    },
350
351    navigation_centered: function (element) {
352        $(element).fadeTo(0, 0).css({ 'float': 'left', 'visibility': 'visible' });
353        $(window).on("load", function () {
354            $(element)
355                .css({
356                    'width': $(element).width() + 2,
357                    'margin': '0 auto',
358                    'float': 'none'
359                })
360                .fadeTo(250, 1)
361                ;
362            $(element).css({ 'display': '', 'float': '' });
363        });
364    },
365
366    content_follower: function (element, sticky_element) {
367        sticky_element = sticky_element && typeof sticky_element != 'undefined' ? sticky_element : false;
368
369        /*  
370            Now uses css 'position:sticky' if supported. This may need to be applied to a *different* element
371            to the old js method. In which case, specify the original element first and the separate sticky_element for newer browsers.
372        */
373        if ($(element).length > 0) {
374
375            var supportsPositionSticky;
376            // Detect whether '@supports' CSS is supported, preventing errors in IE
377            var supports_supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
378            if (supports_supportsCSS) {
379                // Older Edge supports '@supports' but not position sticky
380                supportsPositionSticky = CSS.supports('position', 'sticky');
381                console.log('sticky supported');
382            } else {
383                //IE doesn't support '@supports' or 'object-fit', so we can consider them the same
384                supportsPositionSticky = false;
385            }
386
387
388            if (supportsPositionSticky || typeof supportsPositionSticky !== 'undefined') {
389
390                if (sticky_element) {
391                    console.log('sticky added to sticky_element');
392                    var $sticky = $(sticky_element);
393                } else {
394                    console.log('sticky added to element');
395                    var $sticky = $(element);
396                }
397
398                $sticky.addClass('content_follow_sticky');
399                // var header_height = ($('#header').is(':visible') ? $('#header').outerHeight() : 0);
400                // Not needed when an element is sticky: $sticky.css('top', header_height + 30);
401
402                // $(window).resize(function(){
403                //     var header_height = ($('#header').is(':visible') ? $('#header').outerHeight() : 0);
404                //     // Not needed when an element is sticky: $sticky.css('top', header_height + 30);
405                // });
406
407            } else {
408
409                console.log('legacy content-follow');
410                var $scrolling_div = $(element);
411                // Older method
412                var offset = $scrolling_div.offset().top;
413                if ($('#header.header_fixed').length > 0) {
414                    var offset = offset - $('#header.header_fixed').outerHeight();
415                }
416                if ($('#cms-frontend-toolbar-container').length > 0) {
417                    var offset = offset - $('#cms-frontend-toolbar-container').outerHeight();
418                }
419                $(window).scroll(function () {
420                    var window_scroll_pos = $(window).scrollTop();
421                    if (window_scroll_pos > offset) {
422                        $scrolling_div.stop().animate({ "marginTop": (window_scroll_pos - offset) + 10 + "px" }, "slow");
423                    }
424                    else if (window_scroll_pos == 0) {
425                        $scrolling_div.stop().animate({ "marginTop": (window_scroll_pos) + "px" }, "slow");
426                    }
427                });
428            }
429
430        }
431    },
432
433    push_to_fullheight: function (element, css_height_rule, subtract_px, add_px) {
434        var $elem = $(element);
435        var subtract_css = ' - 0px';
436        var add_css = ' + 0px';
437
438        if ($elem.length) {
439            var content_module_offset = $elem.offset().top;
440            if ($(subtract_px).length) {
441                subtract_css = ' - ' + subtract_px.toString() + 'px'
442            }
443            if ($(add_px).length) {
444                add_css = ' + ' + add_px.toString() + 'px'
445            }
446            // if ( $('body.cms-frontend-toolbar-active').length ) {
447            //     content_module_offset -= 28;
448            // }
449            var height = 'calc((100vh - ' + content_module_offset + 'px)' + subtract_css + add_css + ')'
450            $elem.css(css_height_rule, height);
451        } else {
452            console.log("Element pushed to fullheight doesn't exist.");
453        }
454    },
455
456}
457
458window.galleries = window.galleries || {};
459window.galleries.layout = layout;
460export default layout;