angular-gridster2 - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

index.js

 require('./dist/gridster.js');
 module.exports = 'angular-gridster2';

package.json

 {
   "name": "angular-gridster2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "angular": ">=1.6.5"
+  },
   "devDependencies": {
+    "angular-animate": "1.6.5",
+    "angular-aria": "1.6.5",
+    "angular-material": "1.1.4",
     "browser-sync": "2.18.12",
     "browser-sync-spa": "1.0.3",
-    "chalk": "1.1.3",
+    "chalk": "2.0.1",
     "del": "3.0.0",
-    "eslint-plugin-angular": "2.4.2",
+    "eslint-plugin-angular": "3.0.0",
     "estraverse": "4.2.0",
@@ -27,3 +32,3 @@ "gulp": "3.9.1",
     "gulp-rename": "1.2.2",
-    "gulp-replace": "0.5.4",
+    "gulp-replace": "0.6.1",
     "gulp-rev": "7.1.2",
@@ -44,13 +49,14 @@ "gulp-rev-replace": "0.4.3",
     "lodash": "4.17.4",
-    "main-bower-files": "2.13.1",
     "phantomjs-prebuilt": "2.1.14",
     "uglify-save-license": "0.4.1",
-    "wiredep": "4.0.0",
     "wrench": "1.5.9"
   },
   "scripts": {
-    "test": "gulp test"
+    "test": "gulp test",
+    "start": "gulp serve",
+    "serve": "gulp serve",
+    "build": "gulp"
   },
   "engines": {
-    "node": ">=4.2.1"
+    "node": ">=8.1.3"
   },
@@ -57,0 +63,0 @@ "homepage": "https://github.io/tiberiuzuld/angular-gridster2",

README.md

 angular-gridster2
 ==============
-# Angularjs 1.x version
- 
-## Description
- 
-angular-gridster2 inspired by [angular-gridster](https://github.com/ManifestWebDesign/angular-gridster) 
- 
-#### [Demo](http://tiberiuzuld.github.io/angular-gridster2/angularjs)
- 
-#### Install with Bower
+# Angularjs 1.x version [Demo](http://tiberiuzuld.github.io/angular-gridster2/angularjs)
+
+#### Install
 ```bash
-  bower install angular-gridster2@1.x --save
-```
-#### Install with npm
-```bash
   npm install angular-gridster2@1.x --save
@@ -23,6 +13,4 @@ ```
 ```html
-  <link rel="stylesheet" href="bower_components/angular-gridster2/dist/gridster.css"/>
-  <script src="bower_components/lodash/lodash.js"></script>
-  <script src="bower_components/javascript-detect-element-resize/detect-element-resize.js"></script>
-  <script src="bower_components/angular-gridster2/dist/gridster.js"></script>
+  <link rel="stylesheet" href="node_modules/angular-gridster2/dist/gridster.css"/>
+  <script src="node_modules/angular-gridster2/dist/gridster.js"></script>
 ```
@@ -40,5 +28,5 @@
 ```html
-<div gridster="vm.options">
-  <div gridster-item="item" ng-repeat="item in vm.dashboard"></div>
-</div>
+<gridster options="vm.options">
+  <gridster-item item="item" ng-repeat="item in vm.dashboard"></gridster-item>
+</gridster>
 ```
@@ -79,46 +67,96 @@ Expects a scope setup(options object is optional):
 
-Optional option ```initCallback``` for items after initialization.   
-All item options are optional. If any property is missing gridster will use the default options for rows, cols and   
-for x,y will auto position item where it fits
+##### Default Grid Options:
+```typescript
+import {GridsterConfig} from './gridsterConfig.interface';
 
-## Configuration
+export const GridsterConfigService: GridsterConfig = {
+  gridType: 'fit', // 'fit' will fit the items in the container without scroll;
+  // 'scrollVertical' will fit on width and height of the items will be the same as the width
+  // 'scrollHorizontal' will fit on height and width of the items will be the same as the height
+  // 'fixed' will set the rows and columns dimensions based on fixedColWidth and fixedRowHeight options
+  fixedColWidth: 250, // fixed col width for gridType: 'fixed'
+  fixedRowHeight: 250, // fixed row height for gridType: 'fixed'
+  keepFixedHeightInMobile: false, // keep the height from fixed gridType in mobile layout
+  compactType: 'none', // compact items: 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up'
+  mobileBreakpoint: 640, // if the screen is not wider that this, remove the grid layout and stack the items
+  minCols: 1, // minimum amount of columns in the grid
+  maxCols: 100, // maximum amount of columns in the grid
+  minRows: 1, // minimum amount of rows in the grid
+  maxRows: 100, // maximum amount of rows in the grid
+  defaultItemCols: 1, // default width of an item in columns
+  defaultItemRows: 1, // default height of an item in rows
+  maxItemCols: 50, // max item number of cols
+  maxItemRows: 50, // max item number of rows
+  minItemCols: 1, // min item number of columns
+  minItemRows: 1, // min item number of rows
+  margin: 10,  // margin between grid items
+  outerMargin: true,  // if margins will apply to the sides of the container
+  scrollSensitivity: 10,  // margin of the dashboard where to start scrolling
+  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
+  draggable: {
+    enabled: false, // enable/disable draggable items
+    ignoreContentClass: 'gridster-item-content', // default content class to ignore the drag event from
+    ignoreContent: false, // if true drag will start only from elements from `dragHandleClass`
+    dragHandleClass: 'drag-handler', // drag event only from this class. If `ignoreContent` is true.
+    stop: undefined, // callback when dragging an item stops.  Accepts Promise return to cancel/approve drag.
+    start: undefined // callback when dragging an item starts.
+    // Arguments: item, gridsterItem, event
+  },
+  resizable: {
+    enabled: false, // enable/disable resizable items
+    handles: {
+      s: true,
+      e: true,
+      n: true,
+      w: true,
+      se: true,
+      ne: true,
+      sw: true,
+      nw: true
+    }, // resizable edges of an item
+    stop: undefined, // callback when resizing an item stops. Accepts Promise return to cancel/approve resize.
+    start: undefined // callback when resizing an item starts.
+    // Arguments: item, gridsterItem, event
+  },
+  swap: true, // allow items to switch position if drop on top of another
+  pushItems: false, // push items when resizing and dragging
+  displayGrid: 'onDrag&Resize' // display background grid of rows and columns
+};
+```
 
-#### Via Scope
-Simply pass your desired options to the gridster directive
+##### Gridster options api
+```typescript
+    this.options.api.resize(); // call if size of container changes. Grid will auto resize on window resize.
+    this.options.api.optionsChanged(); // call on change of options after initialization
+    this.options.api.getNextPossiblePosition(item: GridsterItem); // call to get a viable position for item. Returns true if found
+```
 
-```JavaScript
-$scope.options = {
-     gridType: 'fit', // 'fit' will fit the items in the container without scroll;
-     // 'scrollVertical' will fit on width and height of the items will be the same as the width
-     // 'scrollHorizontal' will fit on height and width of the items will be the same as the height
-     compactUp: false, // compact items up if there is room
-     compactLeft: false, // compact items left if there is room
-     mobileBreakpoint: 640, // if the screen is not wider that this, remove the grid layout and stack the items
-     minCols: 1,// minimum amount of columns in the grid
-     maxCols: 100,// maximum amount of columns in the grid
-     minRows: 1,// minimum amount of rows in the grid
-     maxRows: 100,// maximum amount of rows in the grid
-     defaultItemCols: 1, // default width of an item in columns
-     defaultItemRows: 1, // default height of an item in rows
-     minItemCols: 1, // min item number of columns
-     minItemRows: 1, // min item number of rows
-     margin: 10, //margin between grid items
-     outerMargin: true, //if margins will apply to the sides of the container
-     scrollSensitivity: 10, //margin of the dashboard where to start scrolling
-     scrollSpeed: 20, //how much to scroll each mouse move when in the scrollSensitivity zone
-     itemChangeCallback: undefined, //callback to call for each item when is changes x, y, rows, cols. Arguments:gridsterItem, scope
-     initCallback: undefined, //callback to call after first initialization
-     draggable: {
-       enabled: false, // enable/disable draggable items
-       stop: undefined // callback when dragging an item stops. Arguments: gridsterItem, scope
-     },
-     resizable: {
-       enabled: false, // enable/disable resizable items
-       handles: ['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw'], // resizable edges of an item
-       stop: undefined // callback when resizing an item stops. Arguments: gridsterItem, scope
-     },
-     swap: true
-   };
+##### Gridster item options:
+```typescript
+export interface GridsterItem {
+  x?: number; // x position if missing will auto position
+  y?: number; // y position if missing will auto position
+  rows?: number; // number of rows if missing will use grid option defaultItemRows
+  cols?: number; // number of columns if missing will use grid option defaultItemCols
+  initCallback?: Function; // initialization callback
+  dragEnabled?: boolean; // override grid option draggable.enabled
+  resizeEnabled?: boolean; // override grid option resizable.enabled
+  maxItemRows?: number; // override grid option maxItemRows
+  minItemRows?: number; // override grid option minItemRows
+  maxItemCols?: number; // override grid option maxItemCols
+  minItemCols?: number; // override grid option minItemCols
+}
 ```
 
+##### Gridster Item Events 
+
+  broadcasts ```'gridster-item-change'``` // triggered when a item cols,rows, x ,y changed
+  
+  broadcasts ```'gridster-item-resize'``` // triggered when a item width/height changed
+
+Note: When a item changes cols/rows both events get triggered
+
 #### Via Constant
@@ -128,12 +166,7 @@ You can also override the default configuration by modifying the ```gridsterConfig``` constant
 ```js
-angular.module('app').run(['gridsterConfig', function(gridsterConfig) {
-	 gridsterConfig.gridType = 'fit';
+angular.module('app').run(['gridsterConfig', function(GridsterConfig) {
+	 GridsterConfig.gridType = 'fit';
 }]);
 ```
 
-### Gridster Item Events
-
-broadcasts ```'gridster-item-change'``` if item changes x ,y , cols, rows  
-broadcasts ```'gridster-item-resize'``` if item changes pixels height or width
-
 ### Contributing
@@ -144,3 +177,2 @@
  npm install
- bower install
 ```
@@ -155,2 +187,4 @@
 
+##### angular-gridster2 inspired by [angular-gridster](https://github.com/ManifestWebDesign/angular-gridster) 
+
 ### License
@@ -157,0 +191,0 @@ The MIT License

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

Total package byte prevSize

80303

increased by69.94%

Lines of code

1763

increased by67.11%

Number of lines in readme file

188

increased by22.08%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

42

increased by2.44%

Dependency changes

• + Addedangular@>=1.6.5

• + Addedangular@1.8.3(transitive)