Merge pull request #218 from swiety85/98-width-height-for-different-breakpoints

feat(config): Provide support for different item width/height for different breakpoints

Author: swiety85

README.md

@@ -78,6 +78,7 @@ gridsterOptions = {
   dragAndDrop: false, // possible to change items position by drag n drop
   resizable: false, // possible to resize items by drag n drop by item edge/corner
   useCSSTransforms: true, // Uses CSS3 translate() instead of position top/left - significant performance boost.
+  responsiveSizes: true, // allow to set different item sizes for different breakpoints
   // ResponsiveOptions can overwrite default configuration with any option available for specific breakpoint.
   responsiveOptions: [
         {
@@ -110,7 +111,7 @@ gridsterOptions = {
 
 **Warning**
 
-If you use `responsiveOptions`, then coords should be assigned to specific breakpoint attributes:
+If you use `responsiveOptions`, then item coords will be assigned to different breakpoint attributes:
 
 - till `sm` (480px), it uses `x` and `y` attributes
 - `sm` (480px - 768px), it uses `xSm` and `ySm` attributes
@@ -120,6 +121,14 @@ If you use `responsiveOptions`, then coords should be assigned to specific break
 
 (widths in px are only example and works for `responsiveOptions in example above).
 
+If you set `responsiveSizes: true`, then item sizes will be assigned to different breakpoint attributes:
+
+- till `sm` (480px), it uses `w` and `h` attributes
+- `sm` (480px - 768px), it uses `wSm` and `hSm` attributes
+- `md` (768px - 1250px), it uses `wMd` and `hMd` attributes
+- `lg` (1250px - 1800px), it uses `wLg` and `hLg` attributes
+- from `xl` (1800px), it uses `wXl` and `hXl` attributes
+
 ## Demo
 
 Clone or download this repository. Demo folder is dedicated nester project build on Angular CLI. To run:

demo/src/app/app.component.html

@@ -47,7 +47,12 @@
         Max item size: {{itemOptions.maxWidth}} x {{itemOptions.maxHeight}}
     </div>
     <div class="widgetbar">
-        <div gridsterItemPrototype [config]="{helper: true}" [w]="1" [h]="1"
+        <div gridsterItemPrototype [config]="{helper: true}"
+             [w]="1" [h]="1"
+             [wSm]="1" [hSm]="1"
+             [wMd]="2" [hMd]="1"
+             [wLg]="2" [hLg]="2"
+             [wXl]="3" [hXl]="2"
              (drop)="addWidgetFromDrag(gridster, $event)"
              (enter)="over($event)"
              (out)="out($event)"
@@ -61,7 +66,8 @@ <h5 _ngcontent-uoe-2="" class="panel-title">New widget</h5>
             </div>
         </div>
 
-        <div gridsterItemPrototype [config]="{helper: true}" [w]="1" [h]="2"
+        <div gridsterItemPrototype [config]="{helper: true}"
+             [w]="2" [h]="2"
              (drop)="addWidgetFromDrag(gridster, $event)"
              (enter)="over($event)"
              (out)="out($event)"
@@ -75,7 +81,8 @@ <h5 _ngcontent-uoe-2="" class="panel-title">New widget</h5>
             </div>
         </div>
 
-        <div gridsterItemPrototype [config]="{helper: false}" [w]="2" [h]="1"
+        <div gridsterItemPrototype [config]="{helper: false}"
+             [w]="2" [h]="1"
              (drop)="addWidgetFromDrag(gridster, $event)"
              (enter)="over($event)"
              (out)="out($event)"
@@ -104,14 +111,21 @@ <h5 _ngcontent-uoe-2="" class="panel-title">New widget</h5>
                        [(xLg)]="widget.xLg" [(yLg)]="widget.yLg"
                        [(xXl)]="widget.xXl" [(yXl)]="widget.yXl"
                        [(w)]="widget.w" [(h)]="widget.h"
+                       [(wSm)]="widget.wSm" [(hSm)]="widget.hSm"
+                       [(wMd)]="widget.wMd" [(hMd)]="widget.hMd"
+                       [(wLg)]="widget.wLg" [(hLg)]="widget.hLg"
+                       [(wXl)]="widget.wXl" [(hXl)]="widget.hXl"
                        (change)="itemChange($event, gridster1)">
 
             <div class="panel-heading">
                 <h5 class="panel-title">{{ widget.title }}</h5>
             </div>
 
             <div class="panel-body">
-                <app-test></app-test>
+                <p>
+                  Position: {{itemComp?.item?.x}} x {{itemComp?.item?.y}}<br>
+                  Size: {{itemComp?.item?.w}} x {{itemComp?.item?.h}}<br>
+                </p>
                 <p>
                     <label>
                         <input type="checkbox" [(ngModel)]="widget.dragAndDrop" value="true"> Draggable
@@ -127,15 +141,13 @@ <h5 class="panel-title">{{ widget.title }}</h5>
                 <p>
                     <button (click)="remove($event, indx,gridster1)">remove</button>
                 </p>
-                <p>
-                    Position: {{itemComp?.item?.x}} x {{itemComp?.item?.y}}<br>
-                    Size: {{widget.w}} x {{widget.h}}
-                </p>
+                <app-test></app-test>
+
                 <pre>{{ widget | json }}</pre>
 
             </div>
 
         </gridster-item>
 
     </gridster>
-</div>
+</div>

demo/src/app/app.component.ts

@@ -24,6 +24,20 @@ export class AppComponent implements OnInit {
         xl: 'yXl'
     };
 
+    static W_PROPERTY_MAP: any = {
+        sm: 'wSm',
+        md: 'wMd',
+        lg: 'wLg',
+        xl: 'wXl'
+    };
+
+    static H_PROPERTY_MAP: any = {
+        sm: 'hSm',
+        md: 'hMd',
+        lg: 'hLg',
+        xl: 'hXl'
+    };
+
     @ViewChild(GridsterComponent) gridster: GridsterComponent;
     itemOptions = {
         maxWidth: 3,
@@ -51,6 +65,7 @@ export class AppComponent implements OnInit {
         useCSSTransforms: true,
         responsiveView: true, // turn on adopting items sizes on window resize and enable responsiveOptions
         responsiveDebounce: 500, // window resize debounce time
+        responsiveSizes: 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.
@@ -92,30 +107,53 @@ export class AppComponent implements OnInit {
         {
             x: 0, y: 0,
             w: 1, h: 2,
+            wSm: 1, hSm: 1,
+            wMd: 1, hMd: 2,
+            wLg: 1, hLg: 1,
+            wXl: 2, hXl: 2,
             dragAndDrop: true,
             resizable: true,
             title: 'Basic form inputs 1'
         },
         {
-            x: 1, y: 0, w: 3, h: 1,
+            x: 1, y: 0,
+            w: 1, h: 2,
+            wSm: 2, hSm: 1,
+            wMd: 2, hMd: 1,
+            wLg: 3, hLg: 1,
+            wXl: 3, hXl: 1,
             dragAndDrop: true,
             resizable: true,
             title: 'Basic form inputs 2'
         },
         {
-            x: 1, y: 1, w: 2, h: 1,
+            x: 1, y: 1,
+            w: 2, h: 1,
+            wSm: 1, hSm: 2,
+            wMd: 1, hMd: 2,
+            wLg: 2, hLg: 1,
+            wXl: 3, hXl: 1,
             dragAndDrop: true,
             resizable: true,
             title: 'Basic form inputs 3'
         },
         {
-            x: 3, y: 1, w: 1, h: 2,
+            x: 3, y: 1,
+            w: 1, h: 2,
+            wSm: 1, hSm: 2,
+            wMd: 1, hMd: 2,
+            wLg: 3, hLg: 1,
+            wXl: 3, hXl: 1,
             dragAndDrop: true,
             resizable: true,
             title: 'Basic form inputs 4'
         },
         {
             w: 1, h: 2,
+            wSm: 1, hSm: 2,
+            wMd: 1, hMd: 2,
+            wLg: 3, hLg: 1,
+            wXl: 3, hXl: 1,
             dragAndDrop: true,
             resizable: true,
             title: 'Basic form inputs x'
@@ -184,14 +222,21 @@ export class AppComponent implements OnInit {
         const item = event.item;
         const breakpoint = gridster.options.breakpoint;
         const widget = {
-            w: item.w, h: item.h,
             dragAndDrop: true,
             resizable: true,
             title: 'New widget'
         };
 
-        widget[AppComponent.X_PROPERTY_MAP[breakpoint]] = item.x;
-        widget[AppComponent.Y_PROPERTY_MAP[breakpoint]] = item.y;
+        widget[AppComponent.W_PROPERTY_MAP[breakpoint] || 'w'] = item.w;
+        widget[AppComponent.H_PROPERTY_MAP[breakpoint] || 'h'] = item.h;
+        widget[AppComponent.X_PROPERTY_MAP[breakpoint] || 'x'] = item.x;
+        widget[AppComponent.Y_PROPERTY_MAP[breakpoint] || 'y'] = item.y;
+
+        for (const rwdProp of ['wSm', 'hSm', 'wMd', 'hMd', 'wLg', 'hLg', 'wXl', 'hXl']) {
+            if (event.item.itemPrototype.hasOwnProperty(rwdProp)) {
+                widget[rwdProp] = event.item.itemPrototype[rwdProp];
+            }
+        }
 
         this.widgets.push(widget);
 

package.json

@@ -5,6 +5,7 @@
   "main": "./dist/index.js",
   "scripts": {
     "install-demo": "npm install --prefix ./demo",
+    "link-demo": "ln -s $PWD/src/ $PWD/demo/src/app/gridster",
     "serve-demo": "npm start --prefix ./demo",
     "start": "npm start --prefix ./demo",
     "lint": "tslint src/**/*.ts && npm run lint --prefix ./demo",

src/GridsterOptions.ts

@@ -9,6 +9,7 @@ export class GridsterOptions {
     widthHeightRatio: number;
     heightToFontSizeRatio: number;
     responsiveView: boolean;
+    responsiveSizes: boolean;
     dragAndDrop: boolean;
     resizable: boolean;
     shrink: boolean;
@@ -21,6 +22,7 @@ export class GridsterOptions {
         widthHeightRatio: 1,
         shrink: false,
         responsiveView: true,
+        responsiveSizes: false,
         dragAndDrop: true,
         resizable: false,
         useCSSTransforms: false,

src/IGridsterOptions.ts

@@ -20,6 +20,7 @@ export interface IGridsterOptions {
     floating?: boolean;
     responsiveView?: boolean;
     responsiveDebounce?: number;
+    responsiveSizes?: boolean;
     lines?: {
         visible?: boolean,
         color?: string,