The following is some code I just wrote. I keep wondering as always what I can do to make this more efficient. Please help me make this code object oriented and if anyone could help me write automated or even non automated tests for my widget...
Also is this considered a closure? I don't think it is but I would love to know how to produce better quality/reusable code. Oh- bonus points for any corrections to my techniques used as well. I'm really trying to step my JS game up and I know it needs work...
var ExplodedContentWidget = $('[data-widget~="exploded-content"]');
// search for existance of the exploded widget in DOM
if (ExplodedContentWidget[0]){
var ExplodedDefaultEl = $('[data-function~="default-state"]');
var ExplodedEl = $('[data-function~="exploded-state-1"]');
var ExplodedEl2 = $('[data-function~="exploded-state-2"]');
var CloseButton = $('.button-close');
ExplodedEl.hide(); // default exploded content is hidden
ExplodedEl2.hide();
CloseButton.hide();
ExplodedContentWidget.on('click',function(){
ExplodedEl.slideToggle('slow');
});
var FullScreenViewButton = $('button');
FullScreenViewButton.on('click',function(){
ExplodedDefaultEl.hide();
ExplodedContentWidget.addClass('exploded-fullscreen-state');
ExplodedEl2.slideToggle('slow');
CloseButton.fadeIn();
ExplodedEl2.on('click',function(){
ExplodedContentWidget.removeClass('exploded-fullscreen-state');
ExplodedDefaultEl.show();
ExplodedEl.toggle();
ExplodedEl2.toggle();
CloseButton.hide();
});
});
}