angular-gridster2 - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

dist/gridster.component.d.ts

@@ -10,3 +10,2 @@ import { OnInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
     calculateLayoutDebounce: Function;
-    onResizeFunction: (event: any) => void;
     movingItem: GridsterItemComponent;
@@ -13,0 +12,0 @@ previewStyle: Function;

dist/gridster.component.js

@@ -23,2 +23,3 @@ "use strict";
         this.$options.itemResizeCallback = undefined;
+        this.$options.itemInitCallback = undefined;
     }
@@ -44,3 +45,3 @@ GridsterComponent.checkCollisionTwoItems = function (item, item2) {
         if (this.options.initCallback) {
-            this.options.initCallback();
+            this.options.initCallback(this);
         }
@@ -234,4 +235,7 @@ };
         if (itemComponent.$item.initCallback) {
-            itemComponent.$item.initCallback(itemComponent);
+            itemComponent.$item.initCallback(itemComponent.item, itemComponent);
         }
+        if (this.$options.itemInitCallback) {
+            this.$options.itemInitCallback(itemComponent.item, itemComponent);
+        }
     };
@@ -238,0 +242,0 @@ GridsterComponent.prototype.removeItem = function (itemComponent) {

dist/gridsterConfig.constant.js

@@ -31,3 +31,7 @@ "use strict";
     itemChangeCallback: undefined,
+    // Arguments: gridsterItem, gridsterItemComponent
     itemResizeCallback: undefined,
+    // Arguments: gridsterItem, gridsterItemComponent
+    itemInitCallback: undefined,
+    // Arguments: gridsterItem, gridsterItemComponent
     draggable: {
@@ -34,0 +38,0 @@ enabled: false,

dist/gridsterConfig.constant.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false}}},{"__symbolic":"module","version":1,"metadata":{"GridsterConfigService":{"gridType":"fit","fixedColWidth":250,"fixedRowHeight":250,"keepFixedHeightInMobile":false,"compactType":"none","mobileBreakpoint":640,"minCols":1,"maxCols":100,"minRows":1,"maxRows":100,"defaultItemCols":1,"defaultItemRows":1,"maxItemCols":50,"maxItemRows":50,"minItemCols":1,"minItemRows":1,"margin":10,"outerMargin":true,"scrollSensitivity":10,"scrollSpeed":20,"initCallback":{"__symbolic":"reference","name":"undefined"},"itemChangeCallback":{"__symbolic":"reference","name":"undefined"},"itemResizeCallback":{"__symbolic":"reference","name":"undefined"},"itemInitCallback":{"__symbolic":"reference","name":"undefined"},"draggable":{"enabled":false,"ignoreContentClass":"gridster-item-content","ignoreContent":false,"dragHandleClass":"drag-handler","stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"resizable":{"enabled":false,"handles":{"s":true,"e":true,"n":true,"w":true,"se":true,"ne":true,"sw":true,"nw":true},"stop":{"__symbolic":"reference","name":"undefined"},"start":{"__symbolic":"reference","name":"undefined"}},"swap":true,"pushItems":false,"displayGrid":"onDrag&Resize","disableWindowResize":false}}}]

dist/gridsterConfig.interface.d.ts

@@ -28,2 +28,3 @@ export declare type GridType = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed' | 'verticalFixed' | 'horizontalFixed';
     itemResizeCallback?: Function;
+    itemInitCallback?: Function;
     draggable?: Draggable;
@@ -30,0 +31,0 @@ resizable?: Resizable;

dist/gridsterResizable.service.d.ts

@@ -31,2 +31,6 @@ import { GridsterItemComponent } from './gridsterItem.component';
     offsetLeft: number;
+    diffTop: number;
+    diffLeft: number;
+    diffRight: number;
+    diffBottom: number;
     margin: number;
@@ -41,10 +45,2 @@ top: number;
     static touchEvent(e: any): void;
-    static getOffsetSum(originalElement: any): {
-        top: number;
-        left: number;
-    };
-    static getScrollSum(originalElement: any): {
-        scrollTop: number;
-        scrollLeft: number;
-    };
     constructor(gridsterItem: GridsterItemComponent, gridster: GridsterComponent);
@@ -56,6 +52,2 @@ dragStart(e: any): void;
     makeResize(): void;
-    getRealCords(e: any): {
-        pageY: number;
-        pageX: number;
-    };
     handleN(e: any): void;
@@ -62,0 +54,0 @@ handleW(e: any): void;

dist/gridsterResizable.service.js

@@ -23,24 +23,2 @@ "use strict";
     };
-    GridsterResizable.getOffsetSum = function (originalElement) {
-        var top = 0;
-        var left = 0;
-        var element = originalElement;
-        while (element) {
-            top = top + parseFloat(element.offsetTop);
-            left = left + parseFloat(element.offsetLeft);
-            element = element.offsetParent;
-        }
-        return { top: Math.round(top), left: Math.round(left) };
-    };
-    GridsterResizable.getScrollSum = function (originalElement) {
-        var top = 0;
-        var left = 0;
-        var element = originalElement;
-        while (element) {
-            top = top + parseFloat(element.scrollTop);
-            left = left + parseFloat(element.scrollLeft);
-            element = element.offsetParent;
-        }
-        return { scrollTop: Math.round(top), scrollLeft: Math.round(left) };
-    };
     GridsterResizable.prototype.dragStart = function (e) {
@@ -81,6 +59,12 @@ switch (e.which) {
         this.margin = this.gridster.$options.margin;
+        this.offsetLeft = this.gridster.el.scrollLeft - this.gridster.el.offsetLeft;
+        this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop;
+        this.diffLeft = e.pageX + this.offsetLeft - this.margin - this.left;
+        this.diffRight = e.pageX + this.offsetLeft - this.margin - this.right;
+        this.diffTop = e.pageY + this.offsetTop - this.margin - this.top;
+        this.diffBottom = e.pageY + this.offsetTop - this.margin - this.bottom;
         this.minHeight = this.gridster.positionYToPixels(this.gridsterItem.$item.minItemRows || this.gridster.$options.minItemRows)
-            - this.gridster.$options.margin;
+            - this.margin;
         this.minWidth = this.gridster.positionXToPixels(this.gridsterItem.$item.minItemCols || this.gridster.$options.minItemCols)
-            - this.gridster.$options.margin;
+            - this.margin;
         this.gridster.movingItem = this.gridsterItem;
@@ -176,10 +160,4 @@ this.gridster.previewStyle();
     };
-    GridsterResizable.prototype.getRealCords = function (e) {
-        var gridsterOffsets = GridsterResizable.getOffsetSum(this.gridster.el);
-        var pageY = e.pageY - gridsterOffsets.top + GridsterResizable.getScrollSum(this.gridster.el).scrollTop;
-        var pageX = e.pageX - gridsterOffsets.left + GridsterResizable.getScrollSum(this.gridster.el).scrollLeft;
-        return { pageY: pageY, pageX: pageX };
-    };
     GridsterResizable.prototype.handleN = function (e) {
-        this.top = this.getRealCords(e).pageY - this.margin;
+        this.top = e.pageY + this.offsetTop - this.margin - this.diffTop;
         this.height = this.bottom - this.top;
@@ -214,3 +192,3 @@ if (this.minHeight > this.height) {
     GridsterResizable.prototype.handleW = function (e) {
-        this.left = this.getRealCords(e).pageX - this.margin;
+        this.left = e.pageX + this.offsetLeft - this.margin - this.diffLeft;
         this.width = this.right - this.left;
@@ -245,3 +223,3 @@ if (this.minWidth > this.width) {
     GridsterResizable.prototype.handleS = function (e) {
-        this.height = this.getRealCords(e).pageY - this.margin - this.gridsterItem.top;
+        this.height = e.pageY + this.offsetTop - this.margin - this.diffBottom - this.top;
         if (this.minHeight > this.height) {
@@ -270,3 +248,3 @@ this.height = this.minHeight;
     GridsterResizable.prototype.handleE = function (e) {
-        this.width = this.getRealCords(e).pageX - this.margin - this.gridsterItem.left;
+        this.width = e.pageX + this.offsetLeft - this.margin - this.diffRight - this.left;
         if (this.minWidth > this.width) {
@@ -273,0 +251,0 @@ this.width = this.minWidth;

dist/gridsterResizable.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"getRealCords":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"getRealCords":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"GridsterResizable":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./gridsterItem.component","name":"GridsterItemComponent"},{"__symbolic":"reference","module":"./gridster.component","name":"GridsterComponent"}]}],"dragStart":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"cancelResize":[{"__symbolic":"method"}],"makeResize":[{"__symbolic":"method"}],"handleN":[{"__symbolic":"method"}],"handleW":[{"__symbolic":"method"}],"handleS":[{"__symbolic":"method"}],"handleE":[{"__symbolic":"method"}],"handleNW":[{"__symbolic":"method"}],"handleNE":[{"__symbolic":"method"}],"handleSW":[{"__symbolic":"method"}],"handleSE":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "angular-gridster2",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "license": "MIT",
@@ -49,19 +49,19 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@angular/animations": "4.3.0",
+    "@angular/animations": "4.3.1",
     "@angular/cdk": "2.0.0-beta.8",
-    "@angular/cli": "1.2.1",
-    "@angular/common": "4.3.0",
-    "@angular/compiler": "4.3.0",
-    "@angular/compiler-cli": "4.3.0",
-    "@angular/core": "4.3.0",
-    "@angular/forms": "4.3.0",
-    "@angular/http": "4.3.0",
-    "@angular/language-service": "4.3.0",
+    "@angular/cli": "1.2.3",
+    "@angular/common": "4.3.1",
+    "@angular/compiler": "4.3.1",
+    "@angular/compiler-cli": "4.3.1",
+    "@angular/core": "4.3.1",
+    "@angular/forms": "4.3.1",
+    "@angular/http": "4.3.1",
+    "@angular/language-service": "4.3.1",
     "@angular/material": "2.0.0-beta.8",
-    "@angular/platform-browser": "4.3.0",
-    "@angular/platform-browser-dynamic": "4.3.0",
-    "@angular/platform-server": "4.3.0",
-    "@angular/router": "4.3.0",
+    "@angular/platform-browser": "4.3.1",
+    "@angular/platform-browser-dynamic": "4.3.1",
+    "@angular/platform-server": "4.3.1",
+    "@angular/router": "4.3.1",
     "@types/jasmine": "2.5.53",
-    "@types/node": "8.0.13",
+    "@types/node": "8.0.14",
     "codelyzer": "3.1.2",
@@ -85,8 +85,8 @@ "core-js": "2.4.1",
     "ts-helpers": "1.1.2",
-    "ts-node": "3.2.0",
+    "ts-node": "3.2.1",
     "tslib": "1.7.1",
     "tslint": "5.5.0",
-    "typescript": "2.4.1",
-    "zone.js": "0.8.13"
+    "typescript": "2.4.2",
+    "zone.js": "0.8.14"
   }
 }

README.md

@@ -7,3 +7,3 @@ angular-gridster2
 [![downloads](https://img.shields.io/npm/dm/angular-gridster2.svg)](https://www.npmjs.com/package/angular-gridster2)
-[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=AARLN6N6WY85E&lc=RO&item_name=Angular%2dgridster2&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/tiberiuzuld)
 
@@ -119,2 +119,4 @@ ### Angular implementation of angular-gridster [Demo](http://tiberiuzuld.github.io/angular-gridster2/angular)
 
+##### Note: The gridster will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.
+
 ##### Default Grid Options:
@@ -150,5 +152,9 @@ ```typescript
   scrollSpeed: 20,  // how much to scroll each mouse move when in the scrollSensitivity zone
-  initCallback: undefined, // callback to call after grid has initialized
-  itemChangeCallback: undefined,  // callback to call for each item when is changes x, y, rows, cols. Arguments: gridsterItem
-  itemResizeCallback: undefined,  // callback to call for each item when width/height changes. Arguments: gridsterItem
+  initCallback: undefined, // callback to call after grid has initialized. Arguments: gridsterComponent
+  itemChangeCallback: undefined,  // callback to call for each item when is changes x, y, rows, cols.
+  // Arguments: gridsterItem, gridsterItemComponent
+  itemResizeCallback: undefined,  // callback to call for each item when width/height changes.
+  // Arguments: gridsterItem, gridsterItemComponent
+  itemInitCallback: undefined,  // callback to call for each item when is initialized.
+  // Arguments: gridsterItem, gridsterItemComponent
   draggable: {
@@ -200,3 +206,3 @@ enabled: false, // enable/disable draggable items
   cols?: number; // number of columns if missing will use grid option defaultItemCols
-  initCallback?: Function; // initialization callback
+  initCallback?: Function; // initialization callback. Argument: GridsterItem, GridsterItemComponent
   dragEnabled?: boolean; // override grid option draggable.enabled
@@ -203,0 +209,0 @@ resizeEnabled?: boolean; // override grid option resizable.enabled

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

272

increased by2.26%

Worsened metrics

Total package byte prevSize

220814

decreased by-0.3%

Lines of code

2076

decreased by-1.05%

No dependency changes