Init

Prefab.Web/wwwroot/template/html/classic/js/main.js

@@ -0,0 +1,620 @@
+(function ($) {
+    "use strict";
+    
+    // CustomEvent polyfill
+    try {
+        new CustomEvent('IE has CustomEvent, but doesn\'t support constructor');
+    } catch (e) {
+        window.CustomEvent = function(event, params) {
+            let evt;
+            params = params || {
+                bubbles: false,
+                cancelable: false,
+                detail: undefined
+            };
+            evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        CustomEvent.prototype = Object.create(window.Event.prototype);
+    }
+    
+    /**
+     * @param {HTMLInputElement} input
+     * @param {HTMLElement} sub
+     * @param {HTMLElement} add
+     */
+    function CustomNumber(input, sub, add) {
+        const self = this;
+
+        this.input = input;
+        this.sub = sub;
+        this.add = add;
+
+        this._subHandler = function () {
+            self._change(-1);
+            self._changeByTimer(-1);
+        };
+        this._addHandler = function () {
+            self._change(1);
+            self._changeByTimer(1);
+        };
+
+        this.sub.addEventListener('mousedown', this._subHandler, false);
+        this.add.addEventListener('mousedown', this._addHandler, false);
+    }
+
+    CustomNumber.prototype = {
+        destroy: function() {
+            this.sub.removeEventListener('mousedown', this._subHandler, false);
+            this.add.removeEventListener('mousedown', this._addHandler, false);
+        },
+
+        /**
+         * @param {number} direction - one of [-1, 1]
+         * @private
+         */
+        _change: function(direction) {
+            const step = this._step();
+            const min = this._min();
+            const max = this._max();
+
+            let value = this._value() + step * direction;
+
+            if (max != null) {
+                value = Math.min(max, value);
+            }
+            if (min != null) {
+                value = Math.max(min, value);
+            }
+
+            const triggerChange = this.input.value !== value.toString();
+
+            this.input.value = value;
+
+            if (triggerChange) {
+                this.input.dispatchEvent(new CustomEvent('change', {bubbles: true}));
+            }
+        },
+
+        /**
+         * @param {number} direction - one of [-1, 1]
+         * @private
+         */
+        _changeByTimer: function(direction) {
+            const self = this;
+
+            let interval;
+            const timer = setTimeout(function () {
+                interval = setInterval(function () {
+                    self._change(direction);
+                }, 50);
+            }, 300);
+
+            const documentMouseUp = function () {
+                clearTimeout(timer);
+                clearInterval(interval);
+
+                document.removeEventListener('mouseup', documentMouseUp, false);
+            };
+
+            document.addEventListener('mouseup', documentMouseUp, false);
+        },
+
+        /**
+         * @return {number}
+         * @private
+         */
+        _step: function() {
+            let step = 1;
+
+            if (this.input.hasAttribute('step')) {
+                step = parseFloat(this.input.getAttribute('step'));
+                step = isNaN(step) ? 1 : step;
+            }
+
+            return step;
+        },
+
+        /**
+         * @return {?number}
+         * @private
+         */
+        _min: function() {
+            let min = null;
+            if (this.input.hasAttribute('min')) {
+                min = parseFloat(this.input.getAttribute('min'));
+                min = isNaN(min) ? null : min;
+            }
+
+            return min;
+        },
+
+        /**
+         * @return {?number}
+         * @private
+         */
+        _max: function() {
+            let max = null;
+            if (this.input.hasAttribute('max')) {
+                max = parseFloat(this.input.getAttribute('max'));
+                max = isNaN(max) ? null : max;
+            }
+
+            return max;
+        },
+
+        /**
+         * @return {number}
+         * @private
+         */
+        _value: function() {
+            let value = parseFloat(this.input.value);
+
+            return isNaN(value) ? 0 : value;
+        }
+    };
+
+    /** @this {HTMLElement} */
+    $.fn.customNumber = function (options) {
+        options = $.extend({destroy: false}, options);
+
+        return this.each(function () {
+            if (!$(this).is('.form-control-number')) {
+                return;
+            }
+
+            /** @type {(undefined|CustomNumber)} */
+            let instance = $(this).data('customNumber');
+
+            if (instance && options.destroy) {  // destroy
+                instance.destroy();
+                $(this).removeData('customNumber');
+
+            } else if (!instance && !options.destroy) {  // init
+                instance = new CustomNumber(
+                    this.querySelector('.form-control-number__input'),
+                    this.querySelector('.form-control-number__sub'),
+                    this.querySelector('.form-control-number__add')
+                );
+                $(this).data('customNumber', instance);
+            }
+        });
+    };
+
+    $(function () {
+        $('.form-control-number').customNumber();
+    });
+
+    let DIRECTION = null;
+
+    function direction() {
+        if (DIRECTION === null) {
+            DIRECTION = getComputedStyle(document.body).direction;
+        }
+
+        return DIRECTION;
+    }
+
+    function isRTL() {
+        return direction() === 'rtl';
+    }
+
+    /**
+     * Search
+     */
+    $(function () {
+        $('.search-trigger').on('click', function () {
+            const search = $('.search');
+
+            if (search.is('.search--open')) {
+                search.removeClass('search--open');
+            } else {
+                search.addClass('search--open');
+                $('.search__input')[0].focus();
+            }
+        });
+        $(document).on('click', function (event) {
+            if (!$(event.target).closest('.search, .search-trigger').length) {
+                $('.search').removeClass('search--open');
+            }
+        });
+    });
+
+
+    /**
+     * Tabs
+     */
+    $(function () {
+        $('.tabs').each(function (i, element) {
+            $('.tabs__list', element).on('click', '.tabs__tab', function (event) {
+                event.preventDefault();
+
+                const tab = $(this);
+                const content = $('.tabs__tab-content' + $(this).attr('href'), element);
+
+                if (content.length) {
+                    $('.tabs__tab').removeClass('tabs__tab--active');
+                    tab.addClass('tabs__tab--active');
+
+                    $('.tabs__tab-content').removeClass('tabs__tab-content--active');
+                    content.addClass('tabs__tab-content--active');
+                }
+            });
+
+            const currentTab = $('.tabs__tab--active', element);
+            const firstTab = $('.tabs__tab:first', element);
+
+            if (currentTab.length) {
+                currentTab.trigger('click');
+            } else {
+                firstTab.trigger('click');
+            }
+        });
+    });
+
+
+    /**
+     * Home Page Slider
+     */
+    $(function(){
+        $('.block-slider--featured .owl-carousel').owlCarousel({
+            items: 1,
+            nav: false,
+            dots: true,
+            rtl: isRTL()
+        });
+    });
+
+
+    /**
+     * Products Carousel
+     */
+    $(function(){
+        $('.block-products-carousel .owl-carousel').owlCarousel({
+            items: 4,
+            nav: true,
+            dots: false,
+            margin: 14,
+            stagePadding: 7,
+            navText: [
+                '<svg width="8px" height="13px"><use xlink:href="images/sprite.svg#arrow-left-8x13"></use></svg>',
+                '<svg width="8px" height="13px"><use xlink:href="images/sprite.svg#arrow-right-8x13"></use></svg>'
+            ],
+            responsive: {
+                992: {items: 4},
+                768: {items: 3},
+                420: {items: 2},
+                0: {items: 1}
+            },
+            rtl: isRTL()
+        });
+    });
+
+
+    /**
+     * Posts Carousel
+     */
+    $(function(){
+        $('.block-posts-carousel .owl-carousel').owlCarousel({
+            items: 3,
+            nav: true,
+            dots: false,
+            margin: 14,
+            stagePadding: 7,
+            navText: [
+                '<svg width="8px" height="13px"><use xlink:href="images/sprite.svg#arrow-left-8x13"></use></svg>',
+                '<svg width="8px" height="13px"><use xlink:href="images/sprite.svg#arrow-right-8x13"></use></svg>'
+            ],
+            responsive: {
+                992: {items: 3},
+                768: {items: 2},
+                520: {items: 2},
+                0: {items: 1}
+            },
+            rtl: isRTL()
+        });
+    });
+
+
+    /**
+     * Product Gallery
+     */
+    $(function(){
+        $('.product-gallery').each(function (i, element) {
+            const gallery = $(element);
+
+            const image = gallery.find('.product-gallery__featured .owl-carousel');
+            const carousel = gallery.find('.product-gallery__carousel .owl-carousel');
+
+            image
+                .owlCarousel({items: 1, dots: false, rtl: isRTL()})
+                .on('changed.owl.carousel', syncPosition);
+            carousel
+                .on('initialized.owl.carousel', function () {
+                    carousel.find('.product-gallery__carousel-item').eq(0).addClass('product-gallery__carousel-item--active');
+                })
+                .owlCarousel({
+                    items: 5,
+                    dots: false,
+                    margin: 12,
+                    responsive: {
+                        1200: {items: 5},
+                        992: {items: 4},
+                        768: {items: 4},
+                        576: {items: 4},
+                        420: {items: 4},
+                        0: {items: 3}
+                    },
+                    rtl: isRTL()
+                });
+
+            carousel.on('click', '.owl-item', function(e){
+                e.preventDefault();
+
+                image.data('owl.carousel').to($(this).index(), 300, true);
+            });
+
+            image.on('click', '.owl-item a', function(event) {
+                event.preventDefault();
+
+                openPhotoSwipe($(this).closest('.owl-item').index());
+            });
+
+            function getIndexDependOnDir(index) {
+                // we need to invert index id direction === 'rtl' because photoswipe do not support rtl
+                if (isRTL()) {
+                    return image.find('.owl-item img').length - 1 - index;
+                }
+
+                return index;
+            }
+
+            function openPhotoSwipe(index) {
+                const photoSwipeImages = image.find('.owl-item a').toArray().map(function(element) {
+                    const img = $(element).find('img')[0];
+                    const width = $(element).data('width') || img.naturalWidth;
+                    const height = $(element).data('height') || img.naturalHeight;
+
+                    return {
+                        src: element.href,
+                        msrc: element.href,
+                        w: width,
+                        h: height,
+                    };
+                });
+
+                if (isRTL()) {
+                    photoSwipeImages.reverse();
+                }
+
+                const photoSwipeOptions = {
+                    getThumbBoundsFn: function(index) {
+                        const imageElements = image.find('.owl-item img').toArray();
+                        const dirDependentIndex = getIndexDependOnDir(index);
+
+                        if (!imageElements[dirDependentIndex]) {
+                            return null;
+                        }
+
+                        const imageElement = imageElements[dirDependentIndex];
+                        const pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
+                        const rect = imageElement.getBoundingClientRect();
+
+                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
+                    },
+                    index: getIndexDependOnDir(index),
+                    bgOpacity: .9,
+                    history: false
+                };
+
+                const photoSwipeGallery = new PhotoSwipe($('.pswp')[0], PhotoSwipeUI_Default, photoSwipeImages, photoSwipeOptions);
+
+                photoSwipeGallery.listen('beforeChange', function() {
+                    image.data('owl.carousel').to(getIndexDependOnDir(photoSwipeGallery.getCurrentIndex()), 0, true);
+                });
+
+                photoSwipeGallery.init();
+            }
+
+            function syncPosition (el) {
+                let current = el.item.index;
+
+                carousel
+                    .find('.product-gallery__carousel-item')
+                    .removeClass('product-gallery__carousel-item--active')
+                    .eq(current)
+                    .addClass('product-gallery__carousel-item--active');
+                const onscreen = carousel.find('.owl-item.active').length - 1;
+                const start = carousel.find('.owl-item.active').first().index();
+                const end = carousel.find('.owl-item.active').last().index();
+
+                if (current > end) {
+                    carousel.data('owl.carousel').to(current, 100, true);
+                }
+                if (current < start) {
+                    carousel.data('owl.carousel').to(current - onscreen, 100, true);
+                }
+            }
+        });
+    });
+
+
+    /**
+     * Checkout payment methods
+     */
+    $(function () {
+        $('[name="checkout_payment_method"]').on('change', function () {
+            const currentItem = $(this).closest('.payment-methods__item');
+
+            $(this).closest('.payment-methods__list').find('.payment-methods__item').each(function (i, element) {
+                const links = $(element);
+                const linksContent = links.find('.payment-methods__item-container');
+
+                if (element !== currentItem[0]) {
+                    const startHeight = linksContent.height();
+
+                    linksContent.css('height', startHeight + 'px');
+                    links.removeClass('payment-methods__item--active');
+
+                    linksContent.height(); // force reflow
+                    linksContent.css('height', '');
+                } else {
+                    const startHeight = linksContent.height();
+
+                    links.addClass('payment-methods__item--active');
+
+                    const endHeight = linksContent.height();
+
+                    linksContent.css('height', startHeight + 'px');
+                    linksContent.height(); // force reflow
+                    linksContent.css('height', endHeight + 'px');
+                }
+            });
+        });
+
+        $('.payment-methods__item-container').on('transitionend', function (event) {
+            if (event.originalEvent.propertyName === 'height') {
+                $(this).css('height', '');
+            }
+        });
+    });
+
+
+    /**
+     * Testimonials Carousel
+     */
+    $(function(){
+        $('.block-testimonials .owl-carousel').owlCarousel({
+            items: 1,
+            nav: false,
+            dots: true,
+            rtl: isRTL()
+        });
+    });
+
+
+    /**
+     * Mobile Menu
+     */
+    $(function () {
+        $('.header__mobilemenu').on('click', function () {
+            $('.mobilemenu').addClass('mobilemenu--open');
+        });
+        $('.mobilemenu__backdrop, .mobilemenu__close').on('click', function () {
+            $('.mobilemenu').removeClass('mobilemenu--open');
+        });
+    });
+
+
+    /**
+     * Cart
+     */
+    $(function () {
+        $('.header__indicator[data-dropdown-trigger="click"] .header__indicator-button').on('click', function (event) {
+            event.preventDefault();
+
+            const indicator = $(this).closest('.header__indicator');
+
+            if (indicator.is('.header__indicator--open')) {
+                indicator.removeClass('header__indicator--open');
+            } else {
+                indicator.addClass('header__indicator--open');
+            }
+        });
+        $(document).on('click', function (event) {
+            $('.header__indicator')
+                .not($(event.target).closest('.header__indicator'))
+                .removeClass('header__indicator--open');
+        });
+    });
+
+
+    /**
+     * Collapse
+     */
+    $(function () {
+        $('[data-collapse]').each(function (i, element) {
+            const collapse = element;
+
+            $('[data-collapse-trigger]', collapse).on('click', function () {
+                const openClass = $(this).closest('[data-collapse-open-class]').data('collapse-open-class');
+                const item = $(this).closest('[data-collapse-item]');
+                const content = item.children('[data-collapse-content]');
+                const itemParents = item.parents();
+
+                itemParents.slice(0, itemParents.index(collapse) + 1).filter('[data-collapse-item]').css('height', '');
+
+                if (item.is('.' + openClass)) {
+                    const startHeight = content.height();
+
+                    content.css('height', startHeight + 'px');
+                    item.removeClass(openClass);
+
+                    content.height(); // force reflow
+                    content.css('height', '');
+                } else {
+                    const startHeight = content.height();
+
+                    item.addClass(openClass);
+
+                    const endHeight = content.height();
+
+                    content.css('height', startHeight + 'px');
+                    content.height(); // force reflow
+                    content.css('height', endHeight + 'px');
+                }
+            });
+
+            $('[data-collapse-content]', collapse).on('transitionend', function (event) {
+                if (event.originalEvent.propertyName === 'height') {
+                    $(this).css('height', '');
+                }
+            });
+        });
+    });
+
+
+    /**
+     * Price Filter
+     */
+    $(function () {
+        $('.filter-price').each(function (i, element) {
+            const min = $(element).data('min');
+            const max = $(element).data('max');
+            const from = $(element).data('from');
+            const to = $(element).data('to');
+            const slider = element.querySelector('.filter-price__slider');
+
+            noUiSlider.create(slider, {
+                start: [from, to],
+                connect: true,
+                direction: isRTL() ? 'rtl' : 'ltr',
+                range: {
+                    'min': min,
+                    'max': max
+                }
+            });
+
+            const titleValues = [
+                $(element).find('.filter-price__min-value')[0],
+                $(element).find('.filter-price__max-value')[0]
+            ];
+
+            slider.noUiSlider.on('update', function (values, handle) {
+                titleValues[handle].innerHTML = values[handle];
+            });
+        });
+    });
+
+
+    /**
+     * Alerts
+     */
+    $(function () {
+        $('.alert-dismissible .alert__close-button').on('click', function () {
+            $(this).closest('.alert').remove();
+        });
+    });
+})(jQuery);