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