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();
}));