adding styleInHead option (#1313)

gregid · web-flow · commit 621a239d0c81 · 2020-07-30T09:04:19.000-07:00
* Adding styleInHead option
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -37,6 +37,7 @@ Change log
 ## 1.1.2-dev (upcoming)
 
 - fix [1311](https://github.com/gridstack/gridstack.js/issues/1311) domAttr is not defined
+- adds `styleInHead` option to allow for selecting older behavior (adding STYLE element to HEAD element instead of parentNode)
 
 ## 1.1.2 (2020-05-17)
 
diff --git a/doc/README.md b/doc/README.md
@@ -102,6 +102,7 @@ gridstack.js API
 - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain)
 - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://gridstackjs.com/demo/rtl.html)
 - `staticGrid` - removes drag&drop&resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
+- `styleInHead` - if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`).
 - `verticalMargin` - vertical gap size (default: `20`). Can be:
   * an integer (px)
   * a string (ex: '2em', '20px', '2rem')
diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js
@@ -1155,6 +1155,34 @@ describe('gridstack', function() {
       expect($('.grid-stack').hasClass('grid-stack-rtl')).toBe(false);
     });
   });
+  
+  describe('grid.opts.styleInHead', function() {
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('should add STYLE to parent node as a default', function() {
+      var options = {
+        cellHeight: 80,
+        verticalMargin: 10,
+        float: false,
+      };
+      var grid = GridStack.init(options);
+      expect(grid._styles.ownerNode.parentNode.tagName).toBe('DIV');
+    });
+    it('should add STYLE to HEAD if styleInHead === true', function() {
+      var options = {
+        cellHeight: 80,
+        verticalMargin: 10,
+        float: false,
+        styleInHead: true
+      };
+      var grid = GridStack.init(options);
+      expect(grid._styles.ownerNode.parentNode.tagName).toBe('HEAD');
+    });
+  });
 
   describe('grid.enableMove', function() {
     beforeEach(function() {
diff --git a/src/gridstack.js b/src/gridstack.js
@@ -733,6 +733,7 @@
       placeholderText: '',
       handle: '.grid-stack-item-content',
       handleClass: null,
+      styleInHead: false,
       cellHeight: 60,
       verticalMargin: 20,
       auto: true,
@@ -1092,8 +1093,9 @@
       Utils.removeStylesheet(this._stylesId);
     }
     this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
-    // insert style to parent (instead of 'head') to support WebComponent
-    this._styles = Utils.createStylesheet(this._stylesId, this.el.parentNode);
+    var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode
+    // if styleInHead === false insert style to parent to support WebComponent
+    this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     if (this._styles !== null) {
       this._styles._max = 0;
     }
