Fix not to leak style elemenet #6

keik · Mar 22, 2016 · 5a6aa6c · 5a6aa6c
1 parent f953563
commit 5a6aa6c
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 8 deletions.
diff --git a/Makefile b/Makefile
@@ -11,7 +11,7 @@ watch:
 
 # sub targets
 
-build-js: node_modules
+build-js: node_modules bower_components
 	@mkdir -p dist && \
 	node_modules/.bin/browserify -t babelify $(MAIN) -o $(DIST) && \
 	perl -i -pe 's/\$$VERSION/$(shell node -e 'console.log("v" + require("./package.json").version)')/' $(DIST) && \
@@ -20,7 +20,7 @@ build-js: node_modules
 run-dev-server: node_modules
 	@node_modules/.bin/http-server
 
-watch-js: node_modules
+watch-js: node_modules bower_components
 	@mkdir -p dist && \
 	node_modules/.bin/watchify $(MAIN) -o $(DIST) -t babelify -v -d
 

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ![](https://github.com/keik/slickgrid-colgroup-plugin/raw/master/screenshots/screenshot.png)
 
-[demo](http://keik.info/products/slickgrid-colgroup-plugin/examples/)
+[demo](http://keik.github.io/slickgrid-colgroup-plugin/examples/)
 
 ## Usage
 

diff --git a/dist/slick.colgroup.js b/dist/slick.colgroup.js
@@ -2445,6 +2445,15 @@ function ColGroup() {
       };
     })(grid.getColumns);
 
+    grid.destroy = (function (originalDestroy) {
+      return function () {
+        d('destroy');
+        var styleEl = _cache[_uid].styleEl;
+        styleEl.parentNode.removeChild(styleEl);
+        originalDestroy();
+      };
+    })(grid.destroy);
+
     // no event fired when `autosizeColumns` called, so follow it by advicing below methods with column group resizing.
     ['invalidate', 'render'].forEach(function (fnName) {
       grid[fnName] = (function (origFn) {
@@ -2678,7 +2687,7 @@ function ColGroup() {
       rules.push('\n.slick-header-column.h' + i + ' {\n  margin: ' + (1 - i) * (v.height + v.heightDiff) + 'px 0 0 0;\n  font-size: inherit;\n  height: ' + (i * (v.height + v.heightDiff) - v.heightDiff * 2 + 1) + 'px;\n}');
     }
 
-    var styleEl = $('<style type="text/css" rel="stylesheet" />').appendTo($('head'))[0];
+    var styleEl = cache.styleEl = $('<style type="text/css" rel="stylesheet" />').appendTo($('head'))[0];
     if (styleEl.styleSheet) {
       // IE
       styleEl.styleSheet.cssText = rules.join(' ');

diff --git a/dist/slick.colgroup.min.js b/dist/slick.colgroup.min.js
diff --git a/examples/basic5.html b/examples/basic5.html
@@ -38,7 +38,7 @@
           {id: 'col2-2', name: 'col 2-2', children: [
             {id: 'col2-2-1', name: 'col 2-2-1', field: 'col2-2-1', width: 200},
             {id: 'col2-2-2', name: 'col 2-2-2', field: 'col2-2-2', width: 50}
-          ]},
+          ]}
         ]},
         {id: 'col3', name: 'col3', children: [
           {id: 'col3-1', name: 'col 3-1', field: 'col3-1', width: 300},

diff --git a/src/slick.colgroup.es b/src/slick.colgroup.es
@@ -118,6 +118,15 @@ function ColGroup() {
       };
     }(grid.getColumns));
 
+    grid.destroy = (function(originalDestroy) {
+      return function() {
+        d('destroy');
+        let styleEl = _cache[_uid].styleEl;
+        styleEl.parentNode.removeChild(styleEl);
+        originalDestroy();
+      };
+    }(grid.destroy));
+
     // no event fired when `autosizeColumns` called, so follow it by advicing below methods with column group resizing.
     ['invalidate', 'render'].forEach(function(fnName) {
       grid[fnName] = (function(origFn) {
@@ -361,7 +370,7 @@ function ColGroup() {
 }`);
     }
 
-    let styleEl = $('<style type="text/css" rel="stylesheet" />').appendTo($('head'))[0];
+    let styleEl = cache.styleEl = $('<style type="text/css" rel="stylesheet" />').appendTo($('head'))[0];
     if (styleEl.styleSheet) { // IE
       styleEl.styleSheet.cssText = rules.join(' ');
     } else {

diff --git a/tests/tests.js b/tests/tests.js
@@ -131,6 +131,34 @@ describe('slickgrid-colgroup-plugin', function() {
         assert.equal(after_colgroupRowEl.length, 3);
       });
 
+      it('should not leak element when creating and destroying again', function() {
+        var afterCreate,
+            afterDestroy;
+
+        for (var i = 0; i < 10; i++) {
+          // setup
+          // exercise
+          grid = createGrid();
+          grid.registerPlugin(new Slick.Plugins.ColGroup());
+
+          // verify
+          if (afterCreate)
+            assert.equal(afterCreate, document.getElementsByTagName('*').length);
+          afterCreate = document.getElementsByTagName('*').length;
+
+          // exercise
+          grid.destroy();
+          $('#grid').remove();
+
+            // verify
+          if (afterDestroy)
+            assert.equal(afterDestroy, document.getElementsByTagName('*').length);
+          afterDestroy = document.getElementsByTagName('*').length;
+        }
+
+        grid = createGrid();
+      });
+
     });
   });
 });