Merge pull request #1316 from adumesny/typescript

adumesny · web-flow · commit 4cd4fc1800d3 · 2020-07-30T17:03:40.000-07:00
TS: adding styleInHead option for #1313
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -6,6 +6,7 @@ Change log
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
 - [2.0.0-dev (upcoming)](#200-dev-upcoming)
+- [1.2.0 (upcoming)](#120-upcoming)
 - [1.1.2 (2020-05-17)](#112-2020-05-17)
 - [1.1.1 (2020-03-17)](#111-2020-03-17)
 - [1.1.0 (2020-02-29)](#110-2020-02-29)
@@ -44,6 +45,11 @@ Change log
 You can now have perfect square cells (default) [723](https://github.com/gridstack/gridstack.js/issues/723)
 - fix [1299](https://github.com/gridstack/gridstack.js/pull/1299) many columns round-off error
 
+## 1.2.0 (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)
 
 - fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode
diff --git a/doc/README.md b/doc/README.md
@@ -113,6 +113,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`).
 
 ## Grid attributes
 
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
@@ -1158,6 +1158,23 @@ describe('gridstack', function() {
     });
   });
 
+  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 grid = GridStack.init();
+      expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('DIV');
+    });
+    it('should add STYLE to HEAD if styleInHead === true', function() {
+      var grid = GridStack.init({styleInHead: true});
+      expect((grid as any)._styles.ownerNode.parentNode.tagName).toBe('HEAD');
+    });
+  });
+
   describe('grid.enableMove', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -170,6 +170,7 @@ export class GridStack {
       placeholderText: '',
       handle: '.grid-stack-item-content',
       handleClass: null,
+      styleInHead: false,
       cellHeight: 'auto',
       margin: 10,
       auto: true,
@@ -1075,9 +1076,9 @@ export class GridStack {
       Utils.removeStylesheet(this._stylesId);
     }
     this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
-    // insert style to parent (instead of 'head') to support WebComponent
-    let parent = this.el.parentNode as HTMLElement;
-    this._styles = Utils.createStylesheet(this._stylesId, parent);
+    // insert style to parent (instead of 'head' by default) to support WebComponent
+    let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+    this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
     if (this._styles !== null) {
       this._styles._max = 0;
     }
diff --git a/src/types.ts b/src/types.ts
@@ -162,6 +162,9 @@ export interface GridstackOptions {
    */
   staticGrid?: boolean;
 
+  /** if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`). */
+  styleInHead?: boolean;
+
   /** @internal */
   _isNested?: boolean;
   /** @internal */
