Merge pull request #339 from swiety85/201-responsivenes-base-on-container-width

Responsiveness base on container width

Author: swiety85

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

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,

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');

src/app/app.component.html

@@ -133,10 +133,10 @@ <h5 class="panel-title">{{ widget.title }}</h5>
                   <label>
                       <input type="checkbox" [(ngModel)]="widget.resizable" value="true"> Resizable
                   </label>
-                  <button (click)="setWidth(widget, widget.w+1, $event, gridster1)">width +</button>
-                  <button (click)="setWidth(widget, widget.w-1, $event, gridster1)">width -</button>
-                  <button (click)="setHeight(widget, widget.h+1, $event, gridster1)">height +</button>
-                  <button (click)="setHeight(widget, widget.h-1, $event, gridster1)">height -</button>
+                  <button (click)="setWidth(widget, 1, $event, gridster1)">width +</button>
+                  <button (click)="setWidth(widget, -1, $event, gridster1)">width -</button>
+                  <button (click)="setHeight(widget, 1, $event, gridster1)">height +</button>
+                  <button (click)="setHeight(widget, -1, $event, gridster1)">height -</button>
               </p>
               <p>
                   <button (click)="remove($event, indx,gridster1)">remove</button>

src/app/app.component.ts

@@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
         responsiveView: true, // turn on adopting items sizes on window resize and enable responsiveOptions
         responsiveDebounce: 500, // window resize debounce time
         responsiveSizes: true,
+        responsiveToParent: true,
         // List of different gridster configurations for different breakpoints.
         // Each breakpoint is defined by name stored in "breakpoint" property. There is fixed set of breakpoints
         // available to use with default minWidth assign to each.
@@ -183,10 +184,13 @@ export class AppComponent implements OnInit {
     setWidth(widget: any, size: number, e: MouseEvent, gridster) {
         e.stopPropagation();
         e.preventDefault();
-        if (size < 1) {
-            size = 1;
+
+        const breakpoint = gridster.options.breakpoint;
+        let newWidth = widget[AppComponent.W_PROPERTY_MAP[breakpoint] || 'w'] + size;
+        if (newWidth < 1) {
+            newWidth = 1;
         }
-        widget.w = size;
+        widget[AppComponent.W_PROPERTY_MAP[breakpoint] || 'w'] = newWidth;
 
         gridster.reload();
 
@@ -196,10 +200,13 @@ export class AppComponent implements OnInit {
     setHeight(widget: any, size: number, e: MouseEvent, gridster) {
         e.stopPropagation();
         e.preventDefault();
-        if (size < 1) {
-            size = 1;
+
+        const breakpoint = gridster.options.breakpoint;
+        let newHeight = widget[AppComponent.H_PROPERTY_MAP[breakpoint] || 'h'] + size;
+        if (newHeight < 1) {
+            newHeight = 1;
         }
-        widget.h = size;
+        widget[AppComponent.H_PROPERTY_MAP[breakpoint] || 'h'] = newHeight;
 
         gridster.reload();