Permalink
Browse files

Add destroy method and destroy method tests

  • Loading branch information...
Maximum Hallinan
Maximum Hallinan committed Jun 14, 2015
1 parent a6b51e1 commit 903b68643f492590c2ebbc5f963250c9bae80981
Showing with 118 additions and 6 deletions.
  1. +68 −1 src/jquery.big-slide.js
  2. +50 −5 test/big-slide.spec.js
@@ -13,6 +13,31 @@
}(function($) {
'use strict';
// where inlineCSS is the string value of an element's style attribute
// and toRemove is a string of space-separated CSS properties,
// _cleanInlineCSS removes the CSS declaration for each property in toRemove from inlineCSS
// and returns the resulting string
function _cleanInlineCSS(inlineCSS, toRemove){
var inlineCSSArray = inlineCSS.split(';');
var toRemoveArray = toRemove.split(' ');
var cleaned = '';
var keep;
for (var i = 0, j = inlineCSSArray.length; i < j; i++) {
keep = true;
for (var a = 0, b = toRemoveArray.length; a < b; a++) {
if (inlineCSSArray[i] === '' || inlineCSSArray[i].indexOf(toRemoveArray[a]) !== -1) {
keep = false;
}
}
if(keep) {cleaned += inlineCSSArray[i] + '; ';}
}
return cleaned;
}
$.fn.bigSlide = function(options) {
// store the menuLink in a way that is globally accessible
var menuLink = this;
@@ -33,8 +58,15 @@
'afterClose': function() {}
}, options);
// store the menu's state in the model
// CSS properties set by bigSlide.js on all implicated DOM elements
var baseCSSDictionary = 'transition -o-transition -ms-transition -moz-transitions webkit-transition ' + settings.side;
var model = {
//CSS properties set by bigSlide.js on this.$menu
menuCSSDictionary: baseCSSDictionary + ' position top bottom height width',
//CSS properties set by bigSlide.js on this.$push
pushCSSDictionary: baseCSSDictionary,
// store the menu's state in the model
'state': settings.state
};
@@ -43,6 +75,18 @@
init: function(){
view.init();
},
// remove bigSlide behavior from the menu
destroy: function(){
view.destroy();
delete menuLink.bigSlideAPI;
// return a reference to the DOM selection bigSlide.js was called on
// so that the destroy method is chainable
return menuLink;
},
// update the menu's state
changeState: function(){
if (model.state === 'closed') {
@@ -51,6 +95,7 @@
model.state = 'closed'
}
},
// check the menu's state
getState: function(){
return model.state;
@@ -115,7 +160,29 @@
});
}
},
destroy: function(){
//remove inline styles generated by bigSlide.js while preserving any other inline styles
this.$menu.each(function(){
var $this = $(this);
$this.attr( 'style', _cleanInlineCSS($this.attr('style'), model.menuCSSDictionary).trim() );
});
this.$push.each(function(){
var $this = $(this);
$this.attr( 'style', _cleanInlineCSS($this.attr('style'), model.pushCSSDictionary).trim() );
});
//remove active class and unbind bigSlide event handlers
menuLink
.removeClass(settings.activeBtn)
.off('click.bigSlide touchstart.bigSlide');
//release DOM references to avoid memory leaks
this.$menu = null;
this.$push = null;
},
// toggle the menu open
toggleOpen: function() {
settings.beforeOpen();
@@ -96,7 +96,7 @@ describe('exposed internal components', function(){
$menu = $('#menu');
$menuLink = $('.menu-link').bigSlide({
side:'right',
side:'left',
menuWidth: '200px'
});
});
@@ -113,15 +113,15 @@ describe('exposed internal components', function(){
});
it('properties of the exposed settings object should have expected values', function(){
expect($menuLink.bigSlideAPI.settings.side).toEqual('right');
expect($menuLink.bigSlideAPI.settings.side).toEqual('left');
expect($menuLink.bigSlideAPI.settings.menuWidth).toEqual('200px');
});
it('calling view.toggleOpen should open the menu', function(){
$menuLink.bigSlideAPI.view.toggleOpen();
expect($menuLink.bigSlideAPI.model.state).toEqual('open');
expect($menu[0].style.right).toBe("0px");
expect($menu[0].style.left).toBe("0px");
expect($menuLink).toHaveClass('active');
});
@@ -130,8 +130,53 @@ describe('exposed internal components', function(){
$menuLink.bigSlideAPI.view.toggleClose();
expect($menuLink.bigSlideAPI.model.state).toEqual('closed');
expect($menu[0].style.right).toBe("-200px");
expect($menu[0].style.left).toBe("-200px");
expect($menuLink).not.toHaveClass('active');
});
});
});
describe('destroy method', function(){
var $menuLink;
var $panel;
var $push;
beforeEach(function() {
loadFixtures('test.html');
$panel = $('.panel').css('color', 'blue');
$push = $('.push').css('color', 'red');
$menuLink = $('.menu-link').bigSlide({
side:'left',
menuWidth: '200px'
});
$menuLink.trigger('click.bigSlide');
$menuLink.bigSlideAPI.controller.destroy();
});
it('the jQuery object should not have a bigSlide property', function(){
expect($menuLink.bigSlideAPI).not.toBeDefined();
});
it('inline CSS applied by bigSlide should be removed', function(){
expect($push[0].style.left).toBe('');
expect($panel[0].style.left).toBe('');
});
it('inline CSS not applied by bigSlide should be preserved', function(){
expect($push[0].style.cssText.trim()).toBe('color: red;');
expect($panel[0].style.cssText.trim()).toBe('color: blue;');
});
it('the menu link should not have the active class', function(){
expect($menuLink.hasClass('active')).toBe(false);
});
it('no event handlers should be bound to the menu link', function(){
expect($._data($menuLink[0], 'events')).toBe(undefined);
});
});

0 comments on commit 903b686

Please sign in to comment.