feat(config): add Gridster responsiveToParent option

resolves #201 Use window.minWidth - resolves #333
swiety85 · Aug 20, 2019 · 35ca28c · 35ca28c
1 parent 12d1723
commit 35ca28c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/projects/angular2gridster/src/lib/GridsterOptions.ts b/projects/angular2gridster/src/lib/GridsterOptions.ts
@@ -10,6 +10,7 @@ export class GridsterOptions {
     heightToFontSizeRatio: number;
     responsiveView: boolean;
     responsiveSizes: boolean;
+    responsiveToParent: boolean;
     dragAndDrop: boolean;
     resizable: boolean;
     shrink: boolean;
@@ -23,6 +24,7 @@ export class GridsterOptions {
         shrink: false,
         responsiveView: true,
         responsiveSizes: false,
+        responsiveToParent: false,
         dragAndDrop: true,
         resizable: false,
         useCSSTransforms: false,
@@ -42,16 +44,17 @@ export class GridsterOptions {
         xl: 1200 // Extra large
     };
 
-    constructor(config: IGridsterOptions) {
-        this.basicOptions = config;
+    constructor(config: IGridsterOptions, gridsterElement: HTMLElement) {
+        const responsiveContainer = config.responsiveToParent ? gridsterElement : window;
 
+        this.basicOptions = config;
         this.responsiveOptions = this.extendResponsiveOptions(config.responsiveOptions || []);
 
         this.change = merge(
-                of(this.getOptionsByWidth(document.documentElement.clientWidth)),
+                of(this.getOptionsByWidth(this.getElementWidth(responsiveContainer))),
                 fromEvent(window, 'resize').pipe(
                     debounceTime(config.responsiveDebounce || 0),
-                    map((event: Event) => this.getOptionsByWidth(document.documentElement.clientWidth))
+                    map((event: Event) => this.getOptionsByWidth(this.getElementWidth(responsiveContainer)))
                 )
             ).pipe(distinctUntilChanged(null, (options: any) => options.minWidth));
     }
@@ -83,4 +86,12 @@ export class GridsterOptions {
             .sort((curr, next) => curr.minWidth - next.minWidth)
             .map((options) => <IGridsterOptions>Object.assign({}, this.defaults, this.basicOptions, options));
     }
+
+    private getElementWidth($element: any) {
+        if ($element === window) {
+            return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        }
+
+        return $element.clientWidth;
+    }
 }
diff --git a/projects/angular2gridster/src/lib/IGridsterOptions.ts b/projects/angular2gridster/src/lib/IGridsterOptions.ts
@@ -21,6 +21,7 @@ export interface IGridsterOptions {
     responsiveView?: boolean;
     responsiveDebounce?: number;
     responsiveSizes?: boolean;
+    responsiveToParent?: boolean;
     lines?: {
         visible?: boolean,
         color?: string,

diff --git a/projects/angular2gridster/src/lib/gridster.component.ts b/projects/angular2gridster/src/lib/gridster.component.ts
@@ -109,7 +109,7 @@ export class GridsterComponent implements OnInit, AfterContentInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.gridsterOptions = new GridsterOptions(this.options);
+        this.gridsterOptions = new GridsterOptions(this.options, this.$element);
 
         if (this.options.useCSSTransforms) {
             this.$element.classList.add('css-transform');