npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xenialab/angular-gridster

v0.13.16

Published

This directive gives you gridster behavior

Downloads

4

Readme

angular-gridster

Build Status

An implementation of gridster-like widgets for Angular JS. This is not a wrapper on the original gridster jQuery plugin (http://gridster.net/). It is instead completely rewritten as Angular directives. Rewriting allowed for some additional features and better use of Angular data binding. Even more importantly, the original plugin had unpredictable behavior and crashed when wrapped with an Angular directive in my initial tests.

Demo

See Live Demo

Installation

  npm i javascript-detect-element-resize @xenialab/angular-gridster

Then, import the following in your HTML alongside jQuery and angular:

	<link rel="stylesheet" href="bower_components/angular-gridster/dist/angular-gridster.min.css"/>
	<script src="node_modules/javascript-detect-element-resize/jquery.resize.js"></script>
	<script src="node_modules/angular-gridster/dist/angular-gridster.min.js"></script>

jquery.resize is a jQuery plugin needed to check for changes in the gridster size.

Usage


// load the gridster module
angular.module('myModule', ['gridster']);

Default usage:

<div gridster>
	<ul>
		<li gridster-item="item" ng-repeat="item in standardItems"></li>
	</ul>
</div>

Which expects a scope setup like the following:

// IMPORTANT: Items should be placed in the grid in the order in which they should appear.
// In most cases the sorting should be by row ASC, col ASC

// these map directly to gridsterItem directive options
$scope.standardItems = [
  { sizeX: 2, sizeY: 1, row: 0, col: 0 },
  { sizeX: 2, sizeY: 2, row: 0, col: 2 },
  { sizeX: 1, sizeY: 1, row: 0, col: 4 },
  { sizeX: 1, sizeY: 1, row: 0, col: 5 },
  { sizeX: 2, sizeY: 1, row: 1, col: 0 },
  { sizeX: 1, sizeY: 1, row: 1, col: 4 },
  { sizeX: 1, sizeY: 2, row: 1, col: 5 },
  { sizeX: 1, sizeY: 1, row: 2, col: 0 },
  { sizeX: 2, sizeY: 1, row: 2, col: 1 },
  { sizeX: 1, sizeY: 1, row: 2, col: 3 },
  { sizeX: 1, sizeY: 1, row: 2, col: 4 }
];

Alternatively, you can use the html attributes, similar to the original gridster plugin, but with two-way data binding:

<div gridster>
	<ul>
		<li gridster-item row="item.position[0]" col="item.position[1]" size-x="item.size.x" size-y="item.size.y" ng-repeat="item in customItems"></li>
	</ul>
</div>

or:

<div data-gridster>
	<ul>
		<li data-gridster-item data-row="item.position[0]" data-col="item.position[1]" data-sizex="item.size.x" data-sizey="item.size.y" ng-repeat="item in customItems"></li>
	</ul>
</div>

This allows the items to provide their own structure for row, col, and size:

$scope.customItems = [
  { size: { x: 2, y: 1 }, position: [0, 0] },
  { size: { x: 2, y: 2 }, position: [0, 2] },
  { size: { x: 1, y: 1 }, position: [0, 4] },
  { size: { x: 1, y: 1 }, position: [0, 5] },
  { size: { x: 2, y: 1 }, position: [1, 0] },
  { size: { x: 1, y: 1 }, position: [1, 4] },
  { size: { x: 1, y: 2 }, position: [1, 5] },
  { size: { x: 1, y: 1 }, position: [2, 0] },
  { size: { x: 2, y: 1 }, position: [2, 1] },
  { size: { x: 1, y: 1 }, position: [2, 3] },
  { size: { x: 1, y: 1 }, position: [2, 4] }
];

Instead of using attributes for row, col, and size, you can also just use a mapping object for the gridster-item directive:

<div gridster="gridsterOpts">
	<ul>
		<li gridster-item="customItemMap" ng-repeat="item in customItems"></li>
	</ul>
</div>

This expects a scope similar to the previous example, but with customItemMap also defined in the scope:

// maps the item from customItems in the scope to the gridsterItem options
$scope.customItemMap = {
	sizeX: 'item.size.x',
	sizeY: 'item.size.y',
	row: 'item.position[0]',
	col: 'item.position[1]',
	minSizeY: 'item.minSizeY',
	maxSizeY: 'item.maxSizeY'
};

The gridsterItem directive can be configured like this:

<div gridster="gridsterOpts">
	<ul>
		<li gridster-item="item" ng-repeat="item in standardItems"></li>
	</ul>
</div>

Configuration

Via Scope

Simply pass your desired options to the gridster directive

$scope.gridsterOpts = {
	columns: 6, // the width of the grid, in columns
	pushing: true, // whether to push other items out of the way on move or resize
	floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
	swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
	width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
	colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
	rowHeight: 'match', // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
	margins: [10, 10], // the pixel distance between each widget
	outerMargin: true, // whether margins apply to outer edges of the grid
	sparse: false, // "true" can increase performance of dragging and resizing for big grid (e.g. 20x50)
	isMobile: false, // stacks the grid items if true
	mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
	mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
	minColumns: 1, // the minimum columns the grid must have
	minRows: 2, // the minimum height of the grid, in rows
	maxRows: 100,
	defaultSizeX: 2, // the default width of a gridster item, if not specifed
	defaultSizeY: 1, // the default height of a gridster item, if not specified
	minSizeX: 1, // minimum column width of an item
	maxSizeX: null, // maximum column width of an item
	minSizeY: 1, // minumum row height of an item
	maxSizeY: null, // maximum row height of an item
	resizable: {
	   enabled: true,
	   handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
	   start: function(event, $element, widget) {}, // optional callback fired when resize is started,
	   resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
	   stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
	},
	draggable: {
	   enabled: true, // whether dragging items is supported
	   handle: '.my-class', // optional selector for drag handle
	   start: function(event, $element, widget) {}, // optional callback fired when drag is started,
	   drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
	   stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
	}
};

Via Constant

You can also override the default configuration site wide by modifying the gridsterConfig constant

angular.module('yourApp').run(['gridsterConfig', function(gridsterConfig) {
	gridsterConfig.width = 1000;
}]);

Controller Access

The gridster and gridsterItem directive controller objects can be accessed within their scopes as 'gridster' and 'gridsterItem'.

These controllers are internal APIs that are subject to change.

<div gridster="gridsterOpts">
	<ul>
		<li gridster-item="item" ng-repeat="item in standardItems">
			{{ gridsterItem.isMoving() }}
		</li>
	</ul>
</div>

Gridster Events

gridster-mobile-changed

When the gridster goes in or out of mobile mode, a 'gridster-mobile-changed' event is broadcast on rootScope:

scope.$on('gridster-mobile-changed', function(gridster) {
})

gridster-draggable-changed

When the gridster draggable properties change, a 'gridster-draggable-changed' event is broadcast on rootScope:

scope.$on('gridster-draggable-changed', function(gridster) {
})

gridster-resizable-changed

When the gridster resizable properties change, a 'gridster-resizable-changed' event is broadcast on rootScope:

scope.$on('gridster-resizable-changed', function(gridster) {
})

gridster-resized

When the gridster element's size changes, a 'gridster-resized' event is broadcast on rootScope:

scope.$on('gridster-resized', function(sizes, gridster) {
	// sizes[0] = width
	// sizes[1] = height
	// gridster.
})

Gridster Item Events

gridster-item-transition-end

Gridster items have CSS transitions by default. Gridster items listen for css transition-end across different browsers and broadcast the event 'gridster-item-transition-end'. You can listen for it like this from within the gridster-item directive:

scope.$on('gridster-item-transition-end', function(item) {
	// item.$element
	// item.gridster
	// item.row
	// item.col
	// item.sizeX
	// item.sizeY
	// item.minSizeX
	// item.minSizeY
	// item.maxSizeX
	// item.maxSizeY
})

gridster-item-initialized

After a gridster item's controller has finished with setup, it broadcasts an event 'gridster-item-initialized' on its own scope. You can listen for it like this from within the gridster-item directive:

scope.$on('gridster-item-initialized', function(item) {
	// item.$element
	// item.gridster
	// item.row
	// item.col
	// item.sizeX
	// item.sizeY
	// item.minSizeX
	// item.minSizeY
	// item.maxSizeX
	// item.maxSizeY
})

gridster-item-resized

After a gridster item's size changes (rows or columns), it broadcasts an event 'gridster-item-resized' on its own scope. You can listen for it like this from within the gridster-item directive:

scope.$on('gridster-item-resized', function(item) {
	// item.$element
	// item.gridster
	// item.row
	// item.col
	// item.sizeX
	// item.sizeY
	// item.minSizeX
	// item.minSizeY
	// item.maxSizeX
	// item.maxSizeY
})

Watching item changes of size and position

The typical Angular way would be to do a $scope.$watch on your item or items in the scope. Example:

// two objects, converted to gridster items in the view via ng-repeat
$scope.items = [{},{}];

$scope.$watch('items', function(items){
   // one of the items changed
}, true);

or

$scope.$watch('items[0]', function(){
   // item0 changed
}, true);

or

$scope.$watch('items[0].sizeX', function(){
   // item0 sizeX changed
}, true);

The third argument, true, is to make the watch based on the value of the object, rather than just matching the reference to the object.

Note

This directive/plugin does not generate style tags, like the jQuery plugin. It also uses standard camelCase for variables and object properties, while the original plugin used lower_case_with_underscores. These options have not and may never be implemented:

  • widget_class - not necessary since directives already whatever classes and attributes you want to add
  • widget_margins - replaced by 'margins'
  • widget_base_dimensions - replaced by 'defaultSizeX' and 'defaultSizeY'
  • min_cols - currently, only 'columns' is used to defined the maximum width
  • max_cols - currently, only 'columns' is used to defined the maximum width
  • min_rows - replaced by 'minRows'
  • max_rows - replaced by 'maxRows'
  • max_size_x
  • max_size_y
  • extra_cols
  • extra_rows
  • autogenerate_stylesheet
  • avoid_overlapped_widgets
  • resize.axes
  • resize.handle_class - replaced by 'resize.handle', which doesn't need to be a class
  • resize.handle_append_to
  • resize.max_size
  • collision.on_overlap_start
  • collision.on_overlap
  • collision.on_overlap_stop

Contributing

Install project dependencies

  npm install
  bower install

Style Guide

Please respect the formatting specified in .editorconfig

Grunt Tasks

grunt default Runs jshint & compiles project

grunt dev Opens demo page, starts karma test runner, runs unit tests on src & test folder changes

grunt e2e Watch src folder and run e2e tests on changes

grunt test Runs the unit & e2e tests