Angular Gridster

Gridster with all functionality

by Rishi Kumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" href="http://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css">
<script src="http://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<div ng-controller="sampleCtrl">
  <div gridster="gridsterOptions" class="gridsterloc">
    <ul>
      <li initialize-watcher gridster-item="widget" ng-repeat="widget in widgets" row="widget.row" col="widget.col" size-x="widget.sizeX" size-y="widget.sizeY" type="{{widget.chartType}}">
        <div class="box">
          <div class="box-header">
            <h3>{{widget.name}}</h3>
            <div class="box-header-btns pull-right"></div>
          </div>
          <div class="box-content">
            <div>
              <h5>Sample content</h5>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

CSS

.grid {
  border: 1px dashed black;
}

.gridster .gridster-item {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.gridster .gridster-item-drag {
  color: black;
}

ul {
  list-style: none;
}

JavaScript

var app = angular.module("myApp", ['gridster'])

app.controller("sampleCtrl", ["$scope", "$timeout", function($scope, $timeout) {
  $scope.widgets = [{
    row: 3,
    col: 3,
    sizeX: 1,
    sizeY: 1,
    chartType: "bar",
    name: "Sample"
  }, {
    row: 3,
    col: 3,
    sizeX: 3,
    sizeY: 2,
    chartType: "bar",
    name: "Custom"
  }]
  $scope.widgetname = "First widget";
  $scope.gridsterOptions = {
    margins: [20, 20],
    columns: 4,
    rowHeight: 150,
    pushing: true,
    floating: true,
    swapping: true,
    resizable: {
      enabled: true
    },
    draggable: {
      enabled: true
    },
    resizable: {
      enabled: true,
      handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
      start: function(event, $element, widget) {}, // optional callback fired when resize
      resize: function(event, $element, widget) {

      }, // optional callback fired when item is
      stop: function(event, $element, widget) {

        } // optional callback fired when item is
    },
    draggable: {
      enabled: true, // whether dragging items is
      start: function(event, $element, widget) {}, // optional callback fired when drag is
      drag: function(event, $element, widget) {}, // optional callback fired when item is
      stop: function(event, $element, widget) {
          widget.size = {
            width: '100%',
            height: '100%'
          }
        } // optional callback fired when item is
    },
  };
}])

app.directive('initializeWatcher', function() {
  return {
    restrict: 'AE',
    link: function(scope) {
      scope.$on('gridster-item-initialized', function(event, item) {

      });
    }
  };
});