AngularJS: Example Card Configuration

These blocks of code are examples of how to configure your cards and add them to your module.

First, inject these dependencies into your module

    app = angular.module('core', ['ngRoute', 'decksterjs'])

Then, if needed, configure the routing of the pop-out functionality in a configuration block app.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'
  });
}]);

You will then need to configure the controller to have a Deckster deck. First, inject the following Angular services:

app.controller('PageController', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout) {

Then, within the controller, set initialized to false and configure your deck. Here we are calling it mainDeck, but you may have multiple decks.

  $scope.initialized = false;
  $scope.mainDeck = { // the name "mainDeck" should be referenced in your decksterDeck directive.
    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], // define height of one "row"
      responsive_breakpoint: 850
    }
  };

Each card in your deck will need some way to acquire the data it should display. The following two functions are examples of how to retrieve a particular HTML partial. You can configure the cards to display a different partial depending on whether they are expanded ('details') or not ('summary'). Here we have those two separated into two functions, both retrieving a sample HTML file.

// 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));
    });
  };

Then create your cards. Below is an example of a static array added to the cards field of your mainDeck object, but they can also be loaded from a server.

  $scope.mainDeck.cards = [
    {
      title: 'Photos', // display title
      id: 'photoCard',
      hasPopout: true, // whether pop-out button will appear on card
      // here we set the HTML fields to the functions we defined previously
      summaryContentHtml: getSummaryTemplate, // HTML to appear when not expanded
      detailsContentHtml: getDetailsTemplate, // HTML to appear when expanded
      position: { // produces a 1x1 card in the left-most corner
        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; });

}]);