AngularJS: Example Card Configuration

The following are some blocks of code that could be used in an AngularJS app using DecksterJS.

These configurations are done for the pop-out feature.

app = angular.module('decksterTestApp', ['ngRoute', 'decksterjs'])
.config(['$routeProvider', function($routeProvider) {

  // Configures the base URL for deckster pop-outs
  var popoutRoute = Deckster.getPopoutRoute('/deckster/');

  // Configures the pop-out base template
  $routeProvider.when(popoutRoute.fullPath, {
    templateUrl: 'partials/deckster-popout.html'
  });
}]);

---

The following controller configures a specific page to have a Deckster deck

app.controller('MainCtrl', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout) {
  $scope.initialized = false;
  $scope.mainDeck = {
    rootUrl: '#/deckster',
    // These are example option settings for gridster (see http://gridster.net/#documentation)
    gridsterOpts: {
      max_cols: 4,
      widget_margins: [10, 10],
      widget_base_dimensions: ['auto', 250],
      responsive_breakpoint: 850
    }
  };

// Example configuration of how the content is fetched for the "summary" and "detailed" views of each card.
  var getSummaryTemplate = function(cardConfig, cb) {
    // Not using the cardConfig here but you could use it to make request
    $http.get('partials/testSummaryCard.html').success(function (html) {
      cb && cb($compile(html)($scope));
    });
  };

  var getDetailsTemplate = function(cardConfig, cb) {
    // Not using the cardConfig here but you could use it to make request
    $http.get('partials/testDetailsCard.html').success(function (html) {
      cb && cb($compile(html)($scope));
    });
  };

  // Example definition of a static array of card configurations. This information could also be loaded them from a server (ex: user defined cards)
  $scope.mainDeck.cards = [
    {
      title: 'Photos',
      id: 'photoCard',
      hasPopout: true,
      summaryContentHtml: getSummaryTemplate,
      detailsContentHtml: getDetailsTemplate,
      position: {
        size_x: 1,
        size_y: 1,
        col: 1,
        row: 1
      }
    },
    {
      title: 'Alerts',
      id: 'alertsCard',
      summaryContentHtml: getSummaryTemplate,
      detailsContentHtml: getDetailsTemplate,
      position: {
        size_x: 1,
        size_y: 2,
        col: 4,
        row: 1
      }
    },
    {
      title: 'Geospatial',
      id: 'mapCard',
      summaryContentHtml: getSummaryTemplate,
      detailsContentHtml: getDetailsTemplate,
      position: {
        size_x: 2,
        size_y: 2,
        col: 2,
        row: 1
      }
    },
    {
      title: 'Table Data',
      id: 'tableCard',
      summaryContentHtml: getSummaryTemplate,
      detailsContentHtml: getDetailsTemplate,
      position: {
        size_x: 1,
        size_y: 2,
        col: 1,
        row: 2
      }
    },
    {
      title: 'Timeline',
      id: 'timelineCard',
      summaryContentHtml: getSummaryTemplate,
      detailsContentHtml: getDetailsTemplate,
      position: {
        size_x: 3,
        size_y: 1,
        col: 2,
        row: 3
      }
    }
  ];

// Once the cards are loaded (could be done in a async call) initialize the deck $timeout(function () { $scope.initialized = true; });

}]);