BossBey File Manager

Editing: porto-section-scroll.js

// Section Scroll
(function(theme, $) {
    'use strict';

theme = theme || {};

var instanceName = '__sectionScroll';

var PluginSectionScroll = function($el, opts) {
        return this.initialize($el, opts);
    };

PluginSectionScroll.defaults = {
        targetClass: '.section-scroll',
        dotsNav: true
    };

PluginSectionScroll.prototype = {
        initialize: function($el, opts) {
            if ($el.data(instanceName)) {
                return this;
            }

this.$el = $el;

this
                .setData()
                .setOptions(opts)
                .build()
                .events();

return this;
        },

setData: function() {
            this.$el.data(instanceName, this);

return this;
        },

setOptions: function(opts) {
            this.options = $.extend(true, {}, PluginSectionScroll.defaults, opts, {
                wrapper: this.$el
            });

return this;
        },

getEventsPage: function(e) {
            var events = [];

events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
            events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);

if ( ('ontouchstart' in window || navigator.msMaxTouchPoints) && ( typeof e.pointerType === 'undefined' || e.pointerType != 'mouse' ) && typeof e.touches !== 'undefined') {
                events.y = e.touches[0].pageY;
                events.x = e.touches[0].pageX;
            }

return events;
        },

build: function() {
            if (!this.options.wrapper.length) {
                return;
            }
            var self = this,
                el_obj = this.options.wrapper.get(0);

// Check type of header and change the target for header (by change header color purpose)
            self.$header = $('#header');

$('html').addClass('overflow-hidden');

// Turn the section full height or not depeding on the content size
            self.updateSectionsHeight();

// Wrap all sections in a section wrapper
            $( this.options.targetClass ).wrap('<div class="section-wrapper"></div>');

// Set the section wrapper height
            $('.section-wrapper').each(function(){
                $(this).height( $(this).find('.section-scroll').outerHeight() );
            });

// Add active class to the first section on page load
            $('.section-wrapper').first().addClass('active');
            
            var flag = false,
                scrollableFlag = false,
                touchDirection = '',
                touchstartY = 0,
                touchendY = 0,
                checkTimer;

var wheelEvent;
            if ('ontouchstart' in window || navigator.msMaxTouchPoints) {
                el_obj.addEventListener('touchstart', function(e) {
                    touchstartY = self.getEventsPage(e).y;
                });
                wheelEvent = 'onwheel' in document ? 'wheel touchmove' : document.onmousewheel !== undefined ? 'mousewheel touchmove' : 'DOMMouseScroll touchmove';
            } else {
                wheelEvent = 'onwheel' in document ? 'wheel pointermove' : document.onmousewheel !== undefined ? 'mousewheel pointermove' : 'DOMMouseScroll pointermove';
                el_obj.addEventListener('pointerdown', function(e) {
                    if (typeof e.pointerType === 'undefined' || 'mouse' != e.pointerType) {
                        touchstartY = self.getEventsPage(e).y;
                    }
                });
            }

if( window.innerWidth < 992 ) {
                $('html').removeClass('overflow-hidden');
                $(window).on('scroll', function(){

var index = 0;
                    $('.section-wrapper').each(function(){
                        if( $(this).offset().top <= $(window).scrollTop() + 50 ) {
                            $('.section-scroll-dots-navigation > ul > li').removeClass('active');
                            $('.section-scroll-dots-navigation > ul > li').eq( index ).addClass('active');

self.$header.trigger( 'porto_section_scroll_scrolled', [index] );
                        }

index++;
                    });
                    
                });
            }

var $currentSection = $('.section-wrapper').eq( self.getCurrentIndex() ).find('.section-scroll'),
                    $nextSection = self.getNextSection(wheelDirection, touchDirection),
                    nextSectionOffsetTop;

// If is the last section, then change the offsetTop value
                if( self.getCurrentIndex() == $('.section-wrapper').length - 1 ) {
                    nextSectionOffsetTop = $(document).height();
                } else {
                    nextSectionOffsetTop = $nextSection.offset().top;
                }

if ( touchDirection ) {
                    if ( checkTimer ) {
                        clearTimeout( checkTimer );
                    }
                    checkTimer = setTimeout(function(){
                        if( $('.section-wrapper').eq( self.getCurrentIndex() ).find('.section-scroll').hasClass('section-scroll-scrollable') ) {
                            $('html').removeClass('overflow-hidden');
                        } else {
                            $('html').addClass('overflow-hidden');
                        }
                    }, 1200);
                }

// For non full height sections
                if( $currentSection.hasClass('section-scroll-scrollable') ) {
                    
                    if( !flag && !scrollableFlag ) {

if(wheelDirection || touchDirection == 'up') {
                            if($nextSection.length && ( $(window).scrollTop() + window.innerHeight ) >= nextSectionOffsetTop ) {
                                flag = true;
                                setTimeout(function(){
                                    setTimeout(function(){
                                        flag = false;
                                    }, 500);
                                }, 1000);

if( self.getCurrentIndex() == ( $('.section-wrapper').length - 1 )  ) {
                                    return false;
                                }

// Move to the next section
                                self.moveTo( $currentSection.offset().top + $currentSection.outerHeight() );

// Change Section Active Class
                                self.changeSectionActiveState( $nextSection );

self.$header.css({
                                    opacity: 0,
                                    transition: 'ease opacity 500ms'
                                });
                            }

if( !touchDirection ) {
                                for( var i = 1; i < 100; i++ ) {
                                    $('body, html').scrollTop( $(window).scrollTop() + 1 );

if( ( $(window).scrollTop() + window.innerHeight ) >= nextSectionOffsetTop ) {
                                        scrollableFlag = true;
                                        setTimeout(function(){
                                            scrollableFlag = false;
                                        }, 500);
                                        break;
                                    }
                                }
                            }
                        } else {
                            if( $(window).scrollTop() <= $currentSection.offset().top ) {
                                flag = true;
                                setTimeout(function(){
                                    setTimeout(function(){
                                        flag = false;
                                    }, 500);
                                }, 1000);

if( self.getCurrentIndex() == 0  ) {
                                    return false;
                                }

// Move to the next section
                                self.moveTo( $currentSection.offset().top - window.innerHeight );

// Change Section Active Class
                                self.changeSectionActiveState( $nextSection );

if( !touchDirection ) {
                                for( var i = 1; i < 100; i++ ) {
                                    $('body, html').scrollTop( $(window).scrollTop() - 1 );

if( $(window).scrollTop() <= $currentSection.offset().top ) {
                                        scrollableFlag = true;
                                        setTimeout(function(){
                                            scrollableFlag = false;
                                        }, 500);
                                        break;
                                    }
                                }
                            }
                        }

// Change Dots Active Class
                        self.changeDotsActiveState();

return;

}
                }

if (touchDirection && Math.abs(touchstartY - touchendY) <= (window.innerHeight / 100 * 2)) {
                    return;
                }

// For full height sections
                if( !flag && !scrollableFlag ) {

if(wheelDirection || touchDirection == 'up') {
                        if( self.getCurrentIndex() == ( $('.section-wrapper').length - 1 )  ) {
                            return;//return false;
                        }

// Change Section Active Class
                        self.changeSectionActiveState( $nextSection );

setTimeout(function(){
                            // Move to the next section
                            self.moveTo( $nextSection.offset().top );

}, 150);
                    } else {
                        if( self.getCurrentIndex() == 0  ) {
                            return;//return false;
                        }

// Change Section Active Class
                        self.changeSectionActiveState( $nextSection );

if( $nextSection.height() > window.innerHeight ) {
                            // Move to the next section
                            self.moveTo( $currentSection.offset().top - window.innerHeight );
                        } else {
                            setTimeout(function(){
                                // Move to the next section
                                self.moveTo( $nextSection.offset().top );

}, 150);
                        }
                    }

// Change Dots Active Class
                    self.changeDotsActiveState();

self.$header.css({
                        opacity: 0,
                        transition: 'ease opacity 500ms'
                    });

// Style next section
                    $nextSection.css({
                        position: 'relative',
                        opacity: 1,
                        'z-index': 1,
                        transform: 'translate3d(0,0,0) scale(1)'
                    });

// Style previous section
                    $currentSection.css({
                        position: 'fixed',
                        width: '100%',
                        top: 0,
                        left: 0,
                        opacity: 0,
                        'z-index': 0,
                        transform: 'translate3d(0,0,-10px) scale(0.7)',
                        transition: 'ease transform 600ms, ease opacity 600ms',
                    });
                    var offsetMargin = parseInt($currentSection.css('marginLeft'), 10) + parseInt($currentSection.css('marginRight'), 10);
                    if (offsetMargin < 0) {
                        $currentSection.css('width', 'calc(100% + ' + offsetMargin * -1 + 'px)');
                    }

setTimeout(function(){
                        $currentSection.css({
                            position: 'relative',
                            opacity: 1,
                            transform: 'translate3d(0,0,-10px) scale(1)'
                        });

self.$header.css({
                            opacity: 1
                        });

self.$header.trigger('porto_section_scroll_scrolled', [self.getCurrentIndex()]);

setTimeout(function(){
                            flag = false;
                        }, 500);
                    }, 1000);

flag = true;

}
            };

wheelEvent.split(' ').forEach(function(eventName) {
                el_obj.addEventListener(eventName, process_scroll);
            });
            // Dots Navigation
            if( this.options.dotsNav ) {
                self.dotsNavigation();
            }

// First Load
            setTimeout(function(){
                if( $(window.location.hash).get(0) ) {
                    self.moveTo( $(window.location.hash).parent().offset().top );

self.changeSectionActiveState( $(window.location.hash) );

// Change Dots Active Class
                    self.changeDotsActiveState();

self.updateHash( true );
                } else {
                    var hash  = window.location.hash,
                        index = hash.replace('#','');

if( !hash ) {
                        index = 1;
                    }

self.moveTo( $('.section-wrapper').eq( index - 1 ).offset().top );

self.changeSectionActiveState( $('.section-wrapper').eq( index - 1 ).find('.section-scroll') );

// Change Dots Active Class
                    self.changeDotsActiveState();

self.updateHash( true );
                }

if( $('.section-wrapper').eq( self.getCurrentIndex() ).find('.section-scroll').hasClass('section-scroll-scrollable') ) {
                    $('html').removeClass('overflow-hidden');
                }

$(window).trigger('section.scroll.ready');

self.$header.trigger('porto_section_scroll_scrolled', [self.getCurrentIndex()]);
            }, 500);

return this;
        },

updateSectionsHeight: function() {
            var self = this;

$('.section-scroll').each(function() {
                $(this).css( 'height', '' );
                if( $(this).outerHeight() < ( window.innerHeight + 3 ) ) {
                    $(this).css({ height: '100vh' });
                } else {
                    $(this).addClass('section-scroll-scrollable');
                }
            });

// Set the section wrapper height
            $('.section-wrapper').each(function(){
                $(this).height( $(this).find('.section-scroll').outerHeight() );
            });

return this;
        },

updateHash: function( first_load ){
            var self = this;

if( !window.location.hash ) {
                window.location.hash = 1;
            } else {
                if(!first_load) {
                    var section_id = self.getCurrentIndex() + 1;

window.location.hash = section_id;
                }
            }

return this;
        },

getCurrentIndex: function() {
            var self = this,
                currentIndex = 0;

$('.section-wrapper').each(function(index) {
                if ($(this).hasClass('active')) {
                    currentIndex = index;
                    return currentIndex;
                }
            });

return currentIndex;
        },

moveTo: function( $scrollTopValue, first_load ) {
            var self = this;

$('body, html').animate({
                scrollTop: $scrollTopValue
            }, 1000, 'easeOutQuint');

setTimeout(function(){
                self.updateHash();
            }, 500);

return this;
        },

getNextSection: function(wheelDirection, touchDirection) {
            var self = this,
                $nextSection = '';

// Scroll Direction
            if(wheelDirection || touchDirection == 'up') {
                $nextSection = $('.section-wrapper').eq( self.getCurrentIndex() + 1 ).children().eq(0);
            } else {
                $nextSection = $('.section-wrapper').eq( self.getCurrentIndex() - 1 ).children().eq(0);
            }

return $nextSection;
        },

changeSectionActiveState: function( $nextSection ) {
            var self = this;

$('.section-wrapper').removeClass('active');
            $nextSection.parent().addClass('active');

return this;
        },

changeDotsActiveState: function() {
            var self = this;

$('.section-scroll-dots-navigation > ul > li').removeClass('active');
            $('.section-scroll-dots-navigation > ul > li').eq( self.getCurrentIndex() ).addClass('active');

return this;
        },

dotsNavigation: function() {
            var self = this;

var dotsNav = $('<div class="section-scroll-dots-navigation"><ul class="list list-unstyled"></ul></div>'),
                currentSectionIndex = self.getCurrentIndex();

if( self.options.dotsClass ) {
                dotsNav.addClass( self.options.dotsClass );
            }

for( var i = 0; i < $('.section-scroll').length; i++ ) {
                var title = $('.section-wrapper').eq( i ).find('.section-scroll').data('section-scroll-title');

dotsNav.find('> ul').append( '<li'+ ( ( currentSectionIndex == i ) ? ' class="active"' : '' ) +'><a href="#'+ i +'" data-nav-id="'+ i +'"><span>'+ title +'</span></a></li>' );
            }

$('.page-wrapper').append( dotsNav );

dotsNav.find('a[data-nav-id]').on('click touchstart', function(e){
                e.preventDefault();
                var $this = $(this);

$('.section-scroll').css({
                    opacity: 0,
                    transition: 'ease opacity 300ms'
                });

self.$header.css({
                    opacity: 0,
                    transition: 'ease opacity 500ms'
                });

setTimeout(function(){
                    self.moveTo( $('.section-wrapper').eq( $this.data('nav-id') ).offset().top )

$('.section-wrapper').removeClass('active');
                    $('.section-wrapper').eq( $this.data('nav-id') ).addClass('active');

$('.section-wrapper').eq( self.getCurrentIndex() ).find('.section-scroll').css({
                        opacity: 1
                    });

setTimeout(function(){
                        $('.section-scroll').css({ opacity: 1 });

self.$header.css({
                            opacity: 1
                        });

self.$header.trigger('porto_section_scroll_scrolled', [self.getCurrentIndex()]);
                    }, 500);

self.changeDotsActiveState();
                }, 500);
            });

return this;
        },

events: function() {
            var self = this;

$(window).on('section.scroll.ready', function(){
                $(window).scrollTop(0);
            });

$(document).ready(function(){
                var resizeTrigger = null;
                $(window).smartresize(function() {
                    if ( resizeTrigger ) {
                        clearTimeout( resizeTrigger );
                    }
                    resizeTrigger = setTimeout(function() {
                        self.updateSectionsHeight();
                    }, 300);

if ( window.innerWidth < 992 ) {
                        $('html').removeClass('overflow-hidden');
                    }
                });
            });

return this;
        }
    };

// expose to scope
    $.extend(theme, {
        PluginSectionScroll: PluginSectionScroll
    });

// jquery plugin
    $.fn.themePluginSectionScroll = function(opts) {
        return this.map(function() {
            var $this = $(this);

if ($this.data(instanceName)) {
                return $this.data(instanceName);
            } else {
                return new PluginSectionScroll($this, opts);
            }

});
    };

}).apply(this, [window.theme, jQuery]);

Cancel