moringaman
4/23/2017 - 10:10 PM

JQuery Module written using object literal notation

JQuery Module written using object literal notation

($(document).ready(function () {
    
    "use strict";
    
    var headerModule = {
      
        init: function () {
            this.shoNavList = true;
            this.cacheDom();
            this.bindEvents();
            this.toggleNav();
            this.shoLogo();
        },
    
        cacheDom: function () {
            this.$window = $(window);
            this.$element = $('#header');
            this.$sideBar = this.$element.find('#sidebar');
            this.$navList = this.$element.find("ul.menu-list");
            this.$logo = this.$element.find('#logo');
            this.$menuToggle = this.$element.find('#menu-toggle');
        },
        
        shoLogo: function (){
            this.$logo.fadeTo(5000, 0.9);
        },
    
        bindEvents: function () {
            this.$window.on('resize', this.checkViewPort.bind(this));
            this.$menuToggle.on('click', this.toggleMenu.bind(this));
        },
        checkViewPort: function () {
            this.viewPort = this.$window.width();
            console.log("screen width: " + this.viewPort);
            this.toggleNav(this.viewPort);    
        },
        
        toggleNav: function (a) {
            if (a < 667) {
                this.$navList.hide(); 
                this.shoNavList = false; 
                return this.showNavList;
            } else {
                this.$navList.show();
                this.shoNavList = true;
                return this.showNavList;
            }
        },
      
        toggleMenu: function () {
            this.$sideBar.toggle("slow");
            console.log('toggle ' + this.$sideBar);
            if (this.shoNavList) {
                this.$navList.fadeToggle(2000);
            }
        }
        
    };
                   
                
    headerModule.init();
 
}));