fix(templates): ensure all custom templates are loaded before renderi…

…ng the calendar

Closes #279

src/directives/mwlCalendar.js

@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarCtrl', function($scope, $log, $timeout, $attrs, $locale, moment, calendarTitle) {
+  .controller('MwlCalendarCtrl', function($scope, $log, $timeout, $attrs, $locale, moment, calendarTitle, calendarHelper) {
 
     var vm = this;
 
@@ -107,6 +107,12 @@ angular
       }
     });
 
+    calendarHelper.loadTemplates().then(function() {
+      vm.templatesLoaded = true;
+    }).catch(function(err) {
+      $log.error('Could not load all calendar templates', err);
+    });
+
   })
   .directive('mwlCalendar', function(calendarConfig) {
 

src/services/calendarHelper.js

@@ -4,7 +4,7 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .factory('calendarHelper', function(dateFilter, moment, calendarConfig) {
+  .factory('calendarHelper', function($q, $templateRequest, dateFilter, moment, calendarConfig) {
 
     function formatDate(date, format) {
       if (calendarConfig.dateFormatter === 'angular') {
@@ -338,6 +338,17 @@ angular
       return ((dayViewEndM.diff(dayViewStartM, 'hours') + 1) * hourHeight) + 2;
     }
 
+    function loadTemplates() {
+
+      var templatePromises = Object.keys(calendarConfig.templates).map(function(key) {
+        var templateUrl = calendarConfig.templates[key];
+        return $templateRequest(templateUrl);
+      });
+
+      return $q.all(templatePromises);
+
+    }
+
     return {
       getWeekDayNames: getWeekDayNames,
       getYearView: getYearView,
@@ -348,6 +359,7 @@ angular
       getDayViewHeight: getDayViewHeight,
       adjustEndDateFromStartDiff: adjustEndDateFromStartDiff,
       formatDate: formatDate,
+      loadTemplates: loadTemplates,
       eventIsInPeriod: eventIsInPeriod //expose for testing only
     };
 

src/templates/calendar.html

@@ -1,4 +1,7 @@
-<div class="cal-context" ng-switch="vm.view">
+<div
+  class="cal-context"
+  ng-switch="vm.view"
+  ng-if="vm.templatesLoaded">
 
   <div class="alert alert-danger" ng-switch-default>The value passed to the view attribute of the calendar is not set</div>
 
@@ -16,8 +19,8 @@
     delete-event-html="vm.deleteEventHtml"
     cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
-    ng-switch-when="year"
-  ></mwl-calendar-year>
+    ng-switch-when="year">
+  </mwl-calendar-year>
 
   <mwl-calendar-month
     events="vm.events"
@@ -31,8 +34,8 @@
     delete-event-html="vm.deleteEventHtml"
     cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
-    ng-switch-when="month"
-    ></mwl-calendar-month>
+    ng-switch-when="month">
+  </mwl-calendar-month>
 
   <mwl-calendar-week
     events="vm.events"
@@ -43,8 +46,8 @@
     day-view-end="vm.dayViewEnd"
     day-view-split="vm.dayViewSplit"
     on-timespan-click="vm.onTimespanClick"
-    ng-switch-when="week"
-    ></mwl-calendar-week>
+    ng-switch-when="week">
+  </mwl-calendar-week>
 
   <mwl-calendar-day
     events="vm.events"
@@ -55,6 +58,6 @@
     day-view-start="vm.dayViewStart"
     day-view-end="vm.dayViewEnd"
     day-view-split="vm.dayViewSplit"
-    ng-switch-when="day"
-    ></mwl-calendar-day>
+    ng-switch-when="day">
+  </mwl-calendar-day>
 </div>

test/unit/directives/mwlCalendar.spec.js

@@ -8,7 +8,9 @@ describe('mwlCalendar directive', function() {
     element,
     scope,
     $rootScope,
+    $q,
     $timeout,
+    calendarHelper,
     directiveScope,
     MwlCalendarMonthCtrl,
     clock,
@@ -88,12 +90,15 @@ describe('mwlCalendar directive', function() {
 
   beforeEach(angular.mock.module('mwl.calendar'));
 
-  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _$timeout_) {
+  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _$timeout_, _$q_, _calendarHelper_) {
+    $q = _$q_;
     $rootScope = _$rootScope_;
     $timeout = _$timeout_;
+    calendarHelper = _calendarHelper_;
     scope = $rootScope.$new();
     scope.vm = {};
     clock = sinon.useFakeTimers(new Date(2015, 4, 1).getTime());
+    calendarHelper.loadTemplates = sinon.stub().returns($q.when());
     prepareScope(scope.vm);
 
     element = $compile(template)(scope);
@@ -137,6 +142,14 @@ describe('mwlCalendar directive', function() {
     });
   });
 
+  it('should load all templates', function() {
+    expect(calendarHelper.loadTemplates).to.have.been.calledOnce;
+  });
+
+  it('should set templates loaded to true', function() {
+    expect(MwlCalendarCtrl.templatesLoaded).to.be.true;
+  });
+
   afterEach(function() {
     clock.restore();
   });

test/unit/services/calendarHelper.spec.js

@@ -6,11 +6,13 @@ beforeEach(angular.mock.module('mwl.calendar'));
 
 describe('calendarHelper', function() {
 
-  var calendarHelper, events, clock, calendarDay, calendarConfig;
+  var calendarHelper, events, clock, calendarDay, calendarConfig, $templateCache, $rootScope;
 
-  beforeEach(inject(function(_calendarHelper_, _calendarConfig_) {
+  beforeEach(inject(function(_calendarHelper_, _calendarConfig_, _$templateCache_, _$rootScope_) {
     calendarHelper = _calendarHelper_;
     calendarConfig = _calendarConfig_;
+    $templateCache = _$templateCache_;
+    $rootScope = _$rootScope_;
 
     events = [{
       title: 'Event 1',
@@ -651,4 +653,20 @@ describe('calendarHelper', function() {
 
   });
 
+  describe('loadTemplates', function() {
+
+    it('should return a promise with all loaded templates', function(done) {
+      calendarConfig.templates = {
+        template: 'test.html'
+      };
+      $templateCache.put('test.html', 'contents');
+      calendarHelper.loadTemplates().then(function(result) {
+        expect(result).to.deep.equal(['contents']);
+        done();
+      });
+      $rootScope.$apply();
+    });
+
+  });
+
 });