blog_theme/assets/js/main.js

var body = $('body');

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadHidden = false;

$(function () {
    'use strict';
    author();
    stickySidebar();
    pagination();
    facebook();
    video();
    gallery();
    offCanvas();
});

function author() {
    'use strict';
    $('.author-name').on('click', function () {
        $(this).next('.author-social').toggleClass('enabled');
    });
}

function stickySidebar() {
    'use strict';
    var marginTop = 30;

    jQuery('.sidebar-column, .related-column').theiaStickySidebar({
        additionalMarginTop: marginTop,
        additionalMarginBottom: 30,
    });
}

function pagination() {
    'use strict';
    var wrapper = $('.post-feed .row');
    var button = $('.infinite-scroll-button');

    if (body.hasClass('paged-next')) {
        wrapper.on('request.infiniteScroll', function (event, path) {
            button.hide();
        });

        wrapper.on('load.infiniteScroll', function (event, response, path) {
            if ($(response).find('body').hasClass('paged-next')) {
                button.show();
            }
        });

        wrapper.infiniteScroll({
            append: '.post-column',
            button: '.infinite-scroll-button',
            debug: false,
            hideNav: '.pagination',
            history: false,
            path: '.pagination .older-posts',
            scrollThreshold: false,
            status: '.infinite-scroll-status',
        });
    }
}

function facebook() {
    'use strict';
    var widget = $('.widget-facebook');

    if (
        widget.find('.fb-page').attr('data-href') ==
        '__YOUR_FACEBOOK_PAGE_URL__'
    ) {
        widget.remove();
    }
}

function video() {
    'use strict';
    $('.post-content').fitVids();
}

function gallery() {
    'use strict';
    var images = document.querySelectorAll('.kg-gallery-image img');
    images.forEach(function (image) {
        var container = image.closest('.kg-gallery-image');
        var width = image.attributes.width.value;
        var height = image.attributes.height.value;
        var ratio = width / height;
        container.style.flex = ratio + ' 1 0%';
    });

    pswp(
        '.kg-gallery-container',
        '.kg-gallery-image',
        '.kg-gallery-image',
        false,
        true
    );
    pswp('.kg-image-card', '.kg-image', '.kg-image', false, false);
}

function offCanvas() {
    'use strict';
    $('.burger:not(.burger.close)').on('click', function () {
        body.addClass('canvas-visible canvas-opened');
        dimmer('open', 'medium');
    });

    $('.burger-close').on('click', function () {
        if (body.hasClass('canvas-opened')) {
            body.removeClass('canvas-opened');
            dimmer('close', 'medium');
        }
    });

    $('.dimmer').on('click', function () {
        if (body.hasClass('canvas-opened')) {
            body.removeClass('canvas-opened');
            dimmer('close', 'medium');
        }
    });
}

function pswp(container, element, trigger, caption, isGallery) {
    var parseThumbnailElements = function (el) {
        var items = [],
            gridEl,
            linkEl,
            item;

        $(el)
            .find(element)
            .each(function (i, v) {
                gridEl = $(v);
                linkEl = gridEl.find(trigger);

                item = {
                    src: isGallery
                        ? gridEl.find('img').attr('src')
                        : gridEl.attr('src'),
                    w: 0,
                    h: 0,
                };

                if (caption && gridEl.find(caption).length) {
                    item.title = gridEl.find(caption).html();
                }

                items.push(item);
            });

        return items;
    };

    var openPhotoSwipe = function (index, galleryElement) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
            gallery,
            options,
            items;

        items = parseThumbnailElements(galleryElement);

        options = {
            closeOnScroll: false,
            history: false,
            index: index,
            shareEl: false,
            showAnimationDuration: 0,
            showHideOpacity: true,
        };

        gallery = new PhotoSwipe(
            pswpElement,
            PhotoSwipeUI_Default,
            items,
            options
        );
        gallery.listen('gettingData', function (index, item) {
            if (item.w < 1 || item.h < 1) {
                // unknown size
                var img = new Image();
                img.onload = function () {
                    // will get size after load
                    item.w = this.width; // set image width
                    item.h = this.height; // set image height
                    gallery.updateSize(true); // reinit Items
                };
                img.src = item.src; // let's download image
            }
        });
        gallery.init();
    };

    var onThumbnailsClick = function (e) {
        e.preventDefault();

        var index = $(e.target)
            .closest(container)
            .find(element)
            .index($(e.target).closest(element));
        var clickedGallery = $(e.target).closest(container);

        openPhotoSwipe(index, clickedGallery[0]);

        return false;
    };

    $(container).on('click', trigger, function (e) {
        onThumbnailsClick(e);
    });
}

function dimmer(action, speed) {
    'use strict';
    var dimmer = $('.dimmer');

    switch (action) {
        case 'open':
            dimmer.fadeIn(speed);
            break;
        case 'close':
            dimmer.fadeOut(speed);
            break;
    }
}