feat(templates): make all templates configurable from the calendarConfig

Closes #236

BREAKING CHANGE:
`month-cell-template-url` and `month-cell-events-template-url` options have been removed in favour of the calendarConfig.

To migrate:

```
angular.module('myModule')
  .config(function(calendarConfig) {
    calendarConfig.templates.calendarMonthCell = '/path/to/custom/template.html';
    calendarConfig.templates.calendarMonthCellEvents = '/path/to/custom/template.html';
  });
```

README.md

@@ -189,30 +189,38 @@ An optional expression that is evaluated when the view is changed by clicking on
 
 An optional expression that is evaluated on each cell generated for the year and month views. `calendarCell` can be used in the expression and is an object containing the current cell data which you can modify (see the `calendarHelper` service source code or just console.log it to see what data is available). If you add the `cssClass` property it will be applied to the cell.
 
-### month-cell-template-url
+## Configuring the calendar default config
 
-An interpolated string template url that can be used to override the default month cell template.
+You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:
 
-### month-cell-events-template-url
+```javascript
+angular.module('myModule')
+  .config(function(calendarConfig) {
 
-An interpolated string template url that can be used to override the default month cell events.
+    console.log(calendarConfig); //view all available config
 
-## Custom directive templates
+    calendarConfig.templates.calendarMonthView = 'path/to/custom/template.html'; //change the month view template to a custom template
 
-All templates apart from the month cell templates are linked to directives so you can change any template and use your own using a decorator like so:
-```
-//This will change the slide box directive template to one of your choosing
-app.config(['$provide', function($provide) {
-  $provide.decorator('mwlCalendarSlideBoxDirective', ['$delegate', function($delegate) {
-    var directive = $delegate[0];
-    delete directive.template; //the calendar uses template instead of template-url so you need to delete this
-    directive.templateUrl = 'path/to/my/slide/box/template.html';
-    return $delegate;
-  }]);
-}]);
+    calendarConfig.dateFormatter = 'moment'; //use either moment or angular to format dates on the calendar. Default angular. Setting this will override any date formats you have already set.
+
+    calendarConfig.allDateFormats.moment.date.hour = 'HH:mm'; //this will configure times on the day view to display in 24 hour format rather than the default of 12 hour
+
+    calendarConfig.allDateFormats.moment.title = 'ddd D MMM'; //this will configure the day view title to be shorter
+
+    calendarConfig.i18nStrings.eventsLabel = 'Events'; //This will set the events label on the day view
+
+    calendarConfig.displayAllMonthEvents = true; //This will display all events on a month view even if they're not in the current month. Default false.
+
+    calendarConfig.displayEventEndTimes = true; //This will display event end times on the month and year views. Default false.
+
+    calendarConfig.showTimesOnWeekView = true; //Make the week view more like the day view, with the caveat that event end times are ignored.
+
+  });
 ```
 
-For more info on using decorators see this [great guide](http://angular-tips.com/blog/2013/09/experiment-decorating-directives/).
+## Custom directive templates
+
+All calendar template urls can be changed using the `calendarConfig` as illustrated above. 
 
 ## The mwl-date-modifier directive
 
@@ -272,33 +280,6 @@ moment.locale('en', {
 });
 ```
 
-## Configuring date formats
-
-You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:
-
-```javascript
-angular.module('myModule')
-  .config(function(calendarConfig) {
-
-    console.log(calendarConfig); //view all available config
-
-    calendarConfig.dateFormatter = 'moment'; //use either moment or angular to format dates on the calendar. Default angular. Setting this will override any date formats you have already set.
-
-    calendarConfig.allDateFormats.moment.date.hour = 'HH:mm'; //this will configure times on the day view to display in 24 hour format rather than the default of 12 hour
-
-    calendarConfig.allDateFormats.moment.title = 'ddd D MMM'; //this will configure the day view title to be shorter
-
-    calendarConfig.i18nStrings.eventsLabel = 'Events'; //This will set the events label on the day view
-
-    calendarConfig.displayAllMonthEvents = true; //This will display all events on a month view even if they're not in the current month. Default false.
-
-    calendarConfig.displayEventEndTimes = true; //This will display event end times on the month and year views. Default false.
-
-    calendarConfig.showTimesOnWeekView = true; //Make the week view more like the day view, with the caveat that event end times are ignored.
-
-  });
-```
-
 For a full list of all available formats and their defaults see [calendarConfig.js](https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/src/services/calendarConfig.js)
 
 ## Demo

karma.conf.js

@@ -20,6 +20,10 @@ var webpackConfig = {
       test: /\.html$/,
       loader: 'html',
       exclude: /node_modules/
+    }, {
+      test: /\.less/,
+      loader: 'null',
+      exclude: /node_modules/
     }],
     postLoaders: [{
       test: /\.js$/,

package.json

@@ -36,6 +36,7 @@
     "moment": "^2.10.6",
     "ng-annotate-loader": "0.0.10",
     "node-libs-browser": "~0.5.2",
+    "null-loader": "~0.1.1",
     "phantomjs": "~1.9.17",
     "pre-git": "~3.1.1",
     "style-loader": "~0.13.0",

src/directives/mwlCalendar.js

@@ -108,10 +108,10 @@ angular
     });
 
   })
-  .directive('mwlCalendar', function(calendarUseTemplates) {
+  .directive('mwlCalendar', function(calendarConfig) {
 
     return {
-      template: calendarUseTemplates ? require('./../templates/calendar.html') : '',
+      templateUrl: calendarConfig.templates.calendar,
       restrict: 'EA',
       scope: {
         events: '=',
@@ -130,9 +130,7 @@ angular
         cellModifier: '&',
         dayViewStart: '@',
         dayViewEnd: '@',
-        dayViewSplit: '@',
-        monthCellTemplateUrl: '@',
-        monthCellEventsTemplateUrl: '@'
+        dayViewSplit: '@'
       },
       controller: 'MwlCalendarCtrl as vm',
       bindToController: true

src/directives/mwlCalendarDay.js

@@ -73,10 +73,10 @@ angular
     };
 
   })
-  .directive('mwlCalendarDay', function(calendarUseTemplates) {
+  .directive('mwlCalendarDay', function(calendarConfig) {
 
     return {
-      template: calendarUseTemplates ? require('./../templates/calendarDayView.html') : '',
+      templateUrl: calendarConfig.templates.calendarDayView,
       restrict: 'EA',
       require: '^mwlCalendar',
       scope: {

src/directives/mwlCalendarHourList.js

@@ -48,11 +48,11 @@ angular
     });
 
   })
-  .directive('mwlCalendarHourList', function(calendarUseTemplates) {
+  .directive('mwlCalendarHourList', function(calendarConfig) {
 
     return {
       restrict: 'EA',
-      template: calendarUseTemplates ? require('./../templates/calendarHourList.html') : '',
+      templateUrl: calendarConfig.templates.calendarHourList,
       controller: 'MwlCalendarHourListCtrl as vm',
       scope: {
         viewDate: '=',

src/directives/mwlCalendarMonth.js

@@ -89,10 +89,10 @@ angular
     };
 
   })
-  .directive('mwlCalendarMonth', function(calendarUseTemplates) {
+  .directive('mwlCalendarMonth', function(calendarConfig) {
 
     return {
-      template: calendarUseTemplates ? require('./../templates/calendarMonthView.html') : '',
+      templateUrl: calendarConfig.templates.calendarMonthView,
       restrict: 'EA',
       require: '^mwlCalendar',
       scope: {
@@ -106,9 +106,7 @@ angular
         deleteEventHtml: '=',
         cellIsOpen: '=',
         onTimespanClick: '=',
-        cellModifier: '=',
-        cellTemplateUrl: '@',
-        cellEventsTemplateUrl: '@'
+        cellModifier: '='
       },
       controller: 'MwlCalendarMonthCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

src/directives/mwlCalendarSlideBox.js

@@ -19,11 +19,11 @@ angular
     });
 
   })
-  .directive('mwlCalendarSlideBox', function(calendarUseTemplates) {
+  .directive('mwlCalendarSlideBox', function(calendarConfig) {
 
     return {
       restrict: 'EA',
-      template: calendarUseTemplates ? require('./../templates/calendarSlideBox.html') : '',
+      templateUrl: calendarConfig.templates.calendarSlideBox,
       replace: true,
       controller: 'MwlCalendarSlideBoxCtrl as vm',
       require: ['^?mwlCalendarMonth', '^?mwlCalendarYear'],

src/directives/mwlCalendarWeek.js

@@ -75,10 +75,10 @@ angular
     };
 
   })
-  .directive('mwlCalendarWeek', function(calendarUseTemplates) {
+  .directive('mwlCalendarWeek', function(calendarConfig) {
 
     return {
-      template: calendarUseTemplates ? require('./../templates/calendarWeekView.html') : '',
+      templateUrl: calendarConfig.templates.calendarWeekView,
       restrict: 'EA',
       require: '^mwlCalendar',
       scope: {

src/directives/mwlCalendarYear.js

@@ -62,10 +62,10 @@ angular
     };
 
   })
-  .directive('mwlCalendarYear', function(calendarUseTemplates) {
+  .directive('mwlCalendarYear', function(calendarConfig) {
 
     return {
-      template: calendarUseTemplates ? require('./../templates/calendarYearView.html') : '',
+      templateUrl: calendarConfig.templates.calendarYearView,
       restrict: 'EA',
       require: '^mwlCalendar',
       scope: {

src/entry.js

@@ -2,4 +2,33 @@
 
 require('./less/calendar.less');
 
-module.exports = require('./module');
+var angular = require('angular');
+
+function requireAll(r) {
+  r.keys().forEach(r);
+}
+
+module.exports = angular
+  .module('mwl.calendar', [])
+  .run(function($templateCache, calendarConfig) {
+
+    if (EXCLUDE_TEMPLATES === false) {
+
+      var templatesContext = require.context('./templates', false, /\.html/);
+
+      templatesContext.keys().forEach(function(templateName) {
+        var templateNameWithoutPrefix = templateName.replace('./', '');
+        var cacheTemplateName = 'mwl/' + templateNameWithoutPrefix;
+        if (!$templateCache.get(cacheTemplateName)) {
+          $templateCache.put(cacheTemplateName, templatesContext(templateName));
+          calendarConfig.templates[templateNameWithoutPrefix.replace('.html', '')] = cacheTemplateName;
+        }
+      });
+
+    }
+
+  }).name;
+
+requireAll(require.context('./directives', true, /\.js$/));
+requireAll(require.context('./filters', true, /\.js$/));
+requireAll(require.context('./services', true, /\.js$/));

src/services/calendarConfig.js

@@ -53,5 +53,6 @@ angular
       eventsLabel: 'Events',
       timeLabel: 'Time',
       weekNumber: 'Week {week}'
-    }
+    },
+    templates: {}
   });

src/templates/calendar.html

@@ -31,8 +31,6 @@
     delete-event-html="vm.deleteEventHtml"
     cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
-    cell-template-url="{{ vm.monthCellTemplateUrl }}"
-    cell-events-template-url="{{ vm.monthCellEventsTemplateUrl }}"
     ng-switch-when="month"
     ></mwl-calendar-month>
 

src/templates/calendarMonthCell.html

@@ -29,7 +29,7 @@
     <i class="fa fa-chevron-up"></i>
   </div>
 
-  <ng-include src="vm.cellEventsTemplateUrl || 'calendarMonthCellEvents.html'"></ng-include>
+  <ng-include src="vm.calendarConfig.templates.calendarMonthCellEvents"></ng-include>
 
   <div id="cal-week-box" ng-if="$first && rowHovered">
     {{ vm.calendarConfig.i18nStrings.weekNumber.replace('{week}', day.date.week()) }}

src/templates/calendarMonthView.html

@@ -16,7 +16,7 @@
         class="cal-cell1 cal-cell {{ day.highlightClass }}"
         ng-click="vm.dayClicked(day, false, $event)"
         ng-class="{pointer: day.events.length > 0}">
-        <ng-include src="vm.cellTemplateUrl || 'calendarMonthCell.html'"></ng-include>
+        <ng-include src="vm.calendarConfig.templates.calendarMonthCell"></ng-include>
       </div>
     </div>
 

test/unit/directives/mwlCalendarMonth.spec.js

@@ -11,7 +11,6 @@ describe('mwlCalendarMonth directive', function() {
     directiveScope,
     showModal,
     calendarHelper,
-    $templateCache,
     template =
       '<mwl-calendar-month ' +
       'events="events" ' +
@@ -81,9 +80,8 @@ describe('mwlCalendarMonth directive', function() {
 
   beforeEach(angular.mock.module('mwl.calendar'));
 
-  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _$templateCache_) {
+  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_) {
     $rootScope = _$rootScope_;
-    $templateCache = _$templateCache_;
     calendarHelper = _calendarHelper_;
     scope = $rootScope.$new();
     prepareScope(scope);
@@ -176,24 +174,4 @@ describe('mwlCalendarMonth directive', function() {
     });
   });
 
-  it('should use a custom cell url', function() {
-    var templatePath = 'customMonthCell.html';
-    $templateCache.put(templatePath, '<my-custom-cell>Hello world!</my-custom-cell>');
-    scope.monthCellTemplateUrl = templatePath;
-    MwlCalendarCtrl.cellModifier = angular.noop;
-    scope.$broadcast('calendar.refreshView');
-    scope.$apply();
-    expect(element.find('my-custom-cell').length).to.be.at.least(1);
-  });
-
-  it('should use a custom cell events url', function() {
-    var templatePath = 'customMonthCellEvents.html';
-    $templateCache.put(templatePath, '<my-custom-events>Hello world!</my-custom-events>');
-    scope.monthCellEventsTemplateUrl = templatePath;
-    MwlCalendarCtrl.cellModifier = angular.noop;
-    scope.$broadcast('calendar.refreshView');
-    scope.$apply();
-    expect(element.find('my-custom-events').length).to.be.at.least(1);
-  });
-
 });

test/unit/entry.js

@@ -1,7 +1,7 @@
 'use strict';
 require('angular');
 require('angular-mocks');
-require('../../src/module');
+require('../../src/entry');
 
 var testsContext = require.context('.', true, /\.spec/);
 testsContext.keys().forEach(testsContext);