scrollux-ES6.js

class Scrollux {

    constructor(custom){

        // DOM Elements
        this.$body = $('body')
        this.$section = $('section')
        this.$divanchor = null

        this.navWidth = $(window).width()
        this.navHeight = $(window).height()

        this.$navigator = null
        this.keysPx = null

        this.currentPage = null
        this.scrollbar = null

        this.counter = 1


        // Arrays
        this.anchors = []


        // Settings which the developper can customize
        this.defaults = {
            overflowY : "hidden",
            overflowX : "hidden",
            ringListColor : "#FFF",
            ringListSize : "9px", 
            ringActualSessionColor : "#FFF",
            ringHoverColor : "#FFF",
            setTimeAnimation : 1000,
            footer : false,
            footerSize : "500px" 
        }

        this.settings = $.extend({}, this.defaults, custom)


        // Initialization
        this.init()
    }


    init(){

        let i = this.$section.length

        if (i > 0) {

            var settings = this.settings
            
            this.navigatorClient()
            this.keysSettingsPx()
            this.findSACA(i, settings.footer)
            this.createAside(i)
            this.displayCSS(settings.overflowY, settings.overflowX, settings.ringListColor, settings.ringListSize, settings.footerSize)
            this.$divanchor = $('.divanchor')
            this.hoverList(1, settings.ringActualSessionColor)        
            this.fcurrentPage(i)
            this.keymap(i, settings.setTimeAnimation)
            this.scrollWinY(i, settings.setTimeAnimation)
            this.anchorClick()
            this.mouseHover(settings.ringHoverColor, settings.ringActualSessionColor)

        } else {
            console.log("You don't have any DOM section in your body !")
        }
    }


    // # 1) Find sections, addClass and create anchor for each
    findSACA(i, footer){

        // Search sections
        var finder = $('body').find('section')

        var a = 1

        if (i >= a) {
            
            for (var find of finder) {
                
                // Add class for each section
                if (i >= a) {

                    $(find).addClass('page-' + a)
                    $(find).attr('id', 'page-' + a)
                    
                    // Create a anchor for each section
                    var anchor = "<a href=\"#page-"+ a +"\">"
                                +"<div id=\"divpage-"+ a +"\" class=\"divanchor \"></div>"
                                + "</a>";

                    this.anchors.push(anchor)

                    a += 1
                }  
            }
            
            if (footer == true) finder.last().addClass('footer')

        } else {
            console.log("You don't have any DOM section in your body !")
        }
    }


    // # 2) Display responsive CSS
    displayCSS(overflowY, overflowX, ringListColor, ringListSize, footerSize){

        const body = this.$body
        const section = this.$section
        const aside = $('#aside-scroll')
        const ul = $('#ul-scroll')
        const li = $('.asidelist')
        const div = $('.divanchor')

        const asideHeight = aside.height()
        
        body.css({

            "margin" : "0px",
            "overflow-y" : overflowY,
            "overflow-x" : overflowX
        })

        section.css({

            "width" : "100vw",
            "height" : "100vh",
            "position" : "relative"
        })

        $('.footer').css({
            "height" : footerSize
        })

        aside.css({
            "position" : "fixed",
            "top" : "calc(50% - ("+ asideHeight +"px / 2))",
            "right" : "48px",
            "width" : "auto",
            "height" : "auto",
            "z-index" : "9999"
        })

        ul.css({
            "list-style-type" : "none",
            "display" : "flex",
            "flex-direction" : "column"
        })

        li.css({
            "margin-bottom" : "20px"
        })

        div.css({
            "width" : ringListSize,
            "height" : ringListSize,
            "border" : "2px solid " + ringListColor,
            "border-radius" : "50%",
            "cursor" : "pointer",
            "background-color" : "rgba(255, 255, 255, 0)"
        })
    }


    // # 3) Create a list for DOM aside
    createAside(i){

        let list = "<aside id=\"aside-scroll\"><ul id=\"ul-scroll\">"

        for ( let a = 0 ; a < i ; a++ ) {
            
            list += "<li class=\"asidelist\">" + this.anchors[a] + "</li>"
        }

        list += "</ul></aside>"

        this.$body.append(list)
    }


    // # 4) Current Page Settings
    fcurrentPage(i){

        var i = i
        var h = this.navHeight
        var app = this

        $(window).on('scroll', () => {
            
            app.$scrollbar = $(window).scrollTop()
            
            let scrollbar = app.$scrollbar

            for (let y = 0 ; y < i ; y++) {
                
                let min = (h * (y + 1))
                let max = (h * (y + 2))

                if (scrollbar <= h) {
                    
                    app.currentPage = y + 1
                    break
                } 

                if (scrollbar > min && scrollbar < max){
                    
                    app.currentPage = y + 2
                    break
                }
            }
        });
    }
    

    // # 5) Keys Settings
    keymap(i, setTimeAnimation){

        var i = i
        var app = this
        var flag = true // bool for animation

        $(document).keydown((e) => {

            if (flag == false) return

            if (e.keyCode != 40 || e.keyCode != 38) {
                event.preventDefault()
                flag = true
            }

            flag = false

            // Down
            if (e.keyCode == 40) {

                if (app.counter != i) app.counter += 1

                var counter = app.counter

                if (counter < (i + 1)) {

                    app.currentPage = app.counter

                    app.hoverList(counter)

                    $('html, body').animate({
                        scrollTop : $(".page-" + app.counter).offset().top
                    }, setTimeAnimation, () => {
                                flag = true
                            });
                }
            } else if (e.keyCode == 38) {
                
                if (app.counter != 1) app.counter -= 1
                
                var counter = app.counter

                if (counter > 0) {

                    app.currentPage = app.counter

                    app.hoverList(counter)

                    $('html, body').animate({
                        scrollTop : $(".page-" + app.counter).offset().top
                    }, setTimeAnimation, () => {
                                flag = true
                            });
                }
            }
        });
    }


    // # 6) Scroll event
    scrollWinY(i, setTimeAnimation){

        var i = i
        var app = this
        var flag = true // bool for animation

        $(document).bind('DOMMouseScroll mousewheel MozMousePixelScroll', (e) => {

            if (flag == false) return

            //descente neg //montee pos
            var wheelEvent = event.wheelDeltaY;

            flag = false;

            if (wheelEvent < 0) {

                if (app.counter != i) app.counter += 1

                var counter = app.counter

                if (counter < (i + 1)) {

                    app.currentPage = app.counter

                    app.hoverList(counter)

                    $('html, body').animate({
                        scrollTop : $(".page-" + app.counter).offset().top
                    }, setTimeAnimation, () => {
                                flag = true
                            });
                }
            } else {

                if (app.counter != 1) app.counter -= 1
                
                var counter = app.counter

                if (counter > 0) {

                    app.currentPage = app.counter

                    app.hoverList(counter)

                    $('html, body').animate({
                        scrollTop : $(".page-" + app.counter).offset().top
                    }, setTimeAnimation, () => {
                                flag = true
                            });
                }
            }
        });
    }


    // # 7) Navigator detection
    navigatorClient(){

        if (navigator.userAgent.indexOf("Firefox") != -1 ) this.$navigator = "Firefox"
        
        else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) this.$navigator = "IE"; 
        
        else this.$navigator = "Default";
    }


    // # 8) Keys px
    keysSettingsPx(){

        if (this.$navigator == 'Default') this.keysPx = 40;

        if (this.$navigator == 'Firefox') this.keysPx = 48;
    }


    // 9) Add color on eventlist on client page.
    hoverList(ctp){

        var divanchor = this.$divanchor;

        if (divanchor.hasClass('actual-Session')) {
            
            $('.actual-Session').css({
                "background-color" : "rgba(255, 255, 255, 0)"
            });
            
            divanchor.removeClass('actual-Session');
        }

        $('#divpage-' + ctp).addClass('actual-Session');

        $('.actual-Session').css({
            "background-color" : this.settings.ringActualSessionColor
        });
    }


    // # 10) Anchor on click
    anchorClick(){
    
        var app = this;
        var anchor = $('#ul-scroll').find('a');

        anchor.on('click', function(){

            let idom = $(this).children().attr('id');
            let ctp = idom.replace("divpage-", "");

            app.counter = parseInt(ctp);
            app.currentPage = app.counter;

            app.hoverList(app.counter);
        });
    }


    // # 11) Display Css for mouse hoverlist
    mouseHover(ringHoverColor, ringActualSessionColor){

        var app = this;
        var div = $('.divanchor');
        var self = null;

        div.hover(function(){

            self = $(this);

            self.css({

                "background-color" : ringHoverColor
            });
            
        }, function(){

            if (self.hasClass('actual-Session')) {

                self.css({
                    "background-color" : ringActualSessionColor
                });
                return;

            } else {

                self.css({
                    "background-color" : "rgba(255, 255, 255, 0)"
                });
            }
        });
    }
}