I'm relatively new to jQuery and am trying to learn best practices/design patterns with javascript. Came across this link (http://addyosmani.com/resources/essentialjsdesignpatterns/book/) and decided to try and put it to something useful.
So far I've made a notifications menu dropdown using TinyScrollBar (http://baijs.nl/tinyscrollbar/) where the user can remove an individual notification. Once removed, the height of the dropdown updates until there are no more.
Here is a demo of what I have so far http://jsfiddle.net/pSpBM/3/
I would like to know ways on how I can improve my javascript.
JS
var TEST = TEST || {};
/* Notifications */
TEST.notif = {};
TEST.notif._notifOpen = false;
TEST.notif._el = null;
TEST.notif._sum = 0;
TEST.notif._defaultVPHeight = 350;
TEST.notif.init = function(){
this._el = $('#notifications');
$('.notif-trigger').on('click',function(e){
TEST.notif.toggleNotifications();
return false;
});
// when you click outside the notification menu
// hide the notifications
$('html').on('click',function(e){
if( TEST.notif._notifOpen ) {
TEST.notif.hideNotifications();
}
});
// set initial notifications scrollbar height
this._el.tinyscrollbar( {size: TEST.notif._defaultVPHeight} );
};
TEST.notif.showNotifications = function(){
var $el = this._el,
$close = $('.notif-close'),
$li = $('.notif-list li a');
// show notificatoins and update scrollbar position
$el.show().tinyscrollbar_update();
// stop propagation
$li.on('click',function(e){ e.stopPropagation(); });
// remove list-item
$close.on('click', function(e){
// store
var liHeight, newH, overviewH;
// store individual list-item height
liHeight = $(this).parent().height();
// remove the list-item you clicked
$(this).parent().remove();
// store the new height TEST the viewport
newH = TEST.notif._defaultVPHeight - liHeight;
// get height TEST actual contents
overviewH = $('.overview').height();
// set new defaultH
TEST.notif._defaultVPHeight = newH;
// update scrollbar
$el.tinyscrollbar_update();
// once scrollbar is disabled, start changing the viewport height
if( $('#notifications .scrollbar').hasClass('disable') && $('.notif-list li').length > 1 ){
$('#notifications .viewport').height( overviewH );
} else if( $('.notif-list li').length == 1 ) {
$('.notif-list li.empty').show();
}
return false;
});
this._notifOpen = true;
};
TEST.notif.hideNotifications = function(){
this._el.hide();
this._notifOpen = false;
};
TEST.notif.toggleNotifications = function(){
this._notifOpen ? this.hideNotifications() : this.showNotifications();
};
/* init */
$(document).ready(function(){
TEST.notif.init();
});