AngularJS: Example Card Configuration

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

Configure the pop-out functionality

    app = angular.module('core', ['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 = { // 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
        }
      };

    // 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 in "mainDeck."
      // This information could also be loaded them from a server (ex: user defined cards)
      $scope.mainDeck.cards = [
        {
          title: 'Photos', // display title
          id: 'photoCard',
          hasPopout: true, // whether pop-out button will appear on card
          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;
  });

}]);