Add destroy method and destroy method tests

Author: Maximum Hallinan

src/jquery.big-slide.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();

test/big-slide.spec.js

@@ -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);
+  });
+});
+