feat(calendarEventTitle): abstract all event title logic into a servi…

…ce that can easily be overridde

BREAKING CHANGE:

The `calendarConfig.displayEventTimes` option has been removed. Just override the
`calendarEventTitle.yearView` and `calendarEventTitle.monthView` functions instead

Closes #349
Closes #361

README.md

@@ -227,8 +227,6 @@ angular.module('myModule')
 
     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.
 
   });

src/directives/mwlCalendarDay.js

@@ -4,11 +4,11 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarDayCtrl', function($scope, $sce, moment, calendarHelper) {
+  .controller('MwlCalendarDayCtrl', function($scope, moment, calendarHelper, calendarEventTitle) {
 
     var vm = this;
 
-    vm.$sce = $sce;
+    vm.calendarEventTitle = calendarEventTitle;
 
     function refreshView() {
       vm.dayViewSplit = vm.dayViewSplit || 30;

src/directives/mwlCalendarMonth.js

@@ -4,10 +4,11 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarMonthCtrl', function($scope, moment, calendarHelper, calendarConfig) {
+  .controller('MwlCalendarMonthCtrl', function($scope, moment, calendarHelper, calendarConfig, calendarEventTitle) {
 
     var vm = this;
     vm.calendarConfig = calendarConfig;
+    vm.calendarEventTitle = calendarEventTitle;
     vm.openRowIndex = null;
 
     $scope.$on('calendar.refreshView', function() {

src/directives/mwlCalendarSlideBox.js

@@ -4,11 +4,11 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarSlideBoxCtrl', function($sce, $scope, $timeout, calendarConfig) {
+  .controller('MwlCalendarSlideBoxCtrl', function($scope, $timeout, calendarConfig, calendarEventTitle) {
 
     var vm = this;
-    vm.$sce = $sce;
     vm.calendarConfig = calendarConfig;
+    vm.calendarEventTitle = calendarEventTitle;
 
     vm.isCollapsed = true;
     $scope.$watch('vm.isOpen', function(isOpen) {

src/directives/mwlCalendarWeek.js

@@ -4,12 +4,12 @@ var angular = require('angular');
 
 angular
   .module('mwl.calendar')
-  .controller('MwlCalendarWeekCtrl', function($scope, $sce, moment, calendarHelper, calendarConfig) {
+  .controller('MwlCalendarWeekCtrl', function($scope, moment, calendarHelper, calendarConfig, calendarEventTitle) {
 
     var vm = this;
 
     vm.showTimes = calendarConfig.showTimesOnWeekView;
-    vm.$sce = $sce;
+    vm.calendarEventTitle = calendarEventTitle;
 
     $scope.$on('calendar.refreshView', function() {
       vm.dayViewSplit = vm.dayViewSplit || 30;

src/services/calendarConfig.js

@@ -46,7 +46,6 @@ angular
       return this.allDateFormats[this.dateFormatter].title;
     },
     dateFormatter: 'angular',
-    displayEventEndTimes: false,
     showTimesOnWeekView: false,
     displayAllMonthEvents: false,
     i18nStrings: {

src/services/calendarEventTitle.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var angular = require('angular');
+
+angular
+  .module('mwl.calendar')
+  .factory('calendarEventTitle', function(calendarDateFilter, calendarTruncateEventTitleFilter) {
+
+    function yearView(event) {
+      return event.title + ' (' + calendarDateFilter(event.startsAt, 'datetime', true) + ')';
+    }
+
+    function monthView(event) {
+      return event.title + ' (' + calendarDateFilter(event.startsAt, 'time', true) + ')';
+    }
+
+    function monthViewTooltip(event) {
+      return calendarDateFilter(event.startsAt, 'time', true) + ' - ' + event.title;
+    }
+
+    function weekView(event) {
+      return event.title;
+    }
+
+    function weekViewTooltip(event) {
+      return event.title;
+    }
+
+    function dayView(event) {
+      return event.allDay ? event.title : calendarTruncateEventTitleFilter(event.title, 20, event.height);
+    }
+
+    return {
+      yearView: yearView,
+      monthView: monthView,
+      monthViewTooltip: monthViewTooltip,
+      weekView: weekView,
+      weekViewTooltip: weekViewTooltip,
+      dayView: dayView
+    };
+
+  });

src/templates/calendarDayView.html

@@ -16,7 +16,7 @@
             <a
               href="javascript:;"
               class="event-item"
-              ng-bind-html="vm.$sce.trustAsHtml(event.title)">
+              ng-bind-html="vm.calendarEventTitle.dayView(event) | calendarTrustAsHtml">
             </a>
           </div>
         </div>
@@ -58,22 +58,22 @@
         <span ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true"></span>
       </span>
       <a href="javascript:;" class="event-item" ng-click="vm.onEventClick({calendarEvent: event})">
-        <span ng-bind-html="vm.$sce.trustAsHtml(event.title) | calendarTruncateEventTitle:20:event.height"></span>
+        <span ng-bind-html="vm.calendarEventTitle.dayView(event) | calendarTrustAsHtml"></span>
       </a>
 
       <a
         href="javascript:;"
         class="event-item-edit"
         ng-if="vm.editEventHtml && event.editable !== false"
-        ng-bind-html="vm.$sce.trustAsHtml(vm.editEventHtml)"
+        ng-bind-html="vm.editEventHtml | calendarTrustAsHtml"
         ng-click="vm.onEditEventClick({calendarEvent: event})">
       </a>
 
       <a
         href="javascript:;"
         class="event-item-delete"
         ng-if="vm.deleteEventHtml && event.deletable !== false"
-        ng-bind-html="vm.$sce.trustAsHtml(vm.deleteEventHtml)"
+        ng-bind-html="vm.deleteEventHtml | calendarTrustAsHtml"
         ng-click="vm.onDeleteEventClick({calendarEvent: event})">
       </a>
 

src/templates/calendarMonthCellEvents.html

@@ -8,7 +8,7 @@
     ng-mouseenter="vm.highlightEvent(event, true)"
     ng-mouseleave="vm.highlightEvent(event, false)"
     tooltip-append-to-body="true"
-    uib-tooltip-html="((event.startsAt | calendarDate:'time':true) + (vm.calendarConfig.displayEventEndTimes && event.endsAt ? ' - ' + (event.endsAt | calendarDate:'time':true) : '') + ' - ' + event.title) | calendarTrustAsHtml"
+    uib-tooltip-html="vm.calendarEventTitle.monthViewTooltip(event) | calendarTrustAsHtml"
     mwl-draggable="event.draggable === true"
     drop-data="{event: event, draggedFromDate: day.date.toDate()}">
   </a>

src/templates/calendarSlideBox.html

@@ -13,23 +13,22 @@
           href="javascript:;"
           class="event-item"
           ng-click="vm.onEventClick({calendarEvent: event})">
-          <span ng-bind-html="vm.$sce.trustAsHtml(event.title)"></span>
-          (<span ng-bind="event.startsAt | calendarDate:(isMonthView ? 'time' : 'datetime'):true"></span><span ng-if="vm.calendarConfig.displayEventEndTimes && event.endsAt"> - <span ng-bind="event.endsAt | calendarDate:(isMonthView ? 'time' : 'datetime'):true"></span></span>)
+          <span ng-bind-html="isMonthView ? vm.calendarEventTitle.monthView(event) : vm.calendarEventTitle.yearView(event) | calendarTrustAsHtml"></span>
         </a>
 
         <a
           href="javascript:;"
           class="event-item-edit"
           ng-if="vm.editEventHtml && event.editable !== false"
-          ng-bind-html="vm.$sce.trustAsHtml(vm.editEventHtml)"
+          ng-bind-html="vm.editEventHtml | calendarTrustAsHtml"
           ng-click="vm.onEditEventClick({calendarEvent: event})">
         </a>
 
         <a
           href="javascript:;"
           class="event-item-delete"
           ng-if="vm.deleteEventHtml && event.deletable !== false"
-          ng-bind-html="vm.$sce.trustAsHtml(vm.deleteEventHtml)"
+          ng-bind-html="vm.deleteEventHtml | calendarTrustAsHtml"
           ng-click="vm.onDeleteEventClick({calendarEvent: event})">
         </a>
       </li>

src/templates/calendarWeekView.html

@@ -67,8 +67,8 @@
               href="javascript:;"
               ng-click="vm.onEventClick({calendarEvent: event})"
               class="event-item"
-              ng-bind-html="vm.$sce.trustAsHtml(event.title)"
-              uib-tooltip-html="event.title | calendarTrustAsHtml"
+              ng-bind-html="vm.calendarEventTitle.weekView(event) | calendarTrustAsHtml"
+              uib-tooltip-html="vm.calendarEventTitle.weekViewTooltip(event) | calendarTrustAsHtml"
               tooltip-placement="left"
               tooltip-append-to-body="true">
             </a>

test/unit/services/calendarEventTitle.spec.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var angular = require('angular');
+beforeEach(angular.mock.module('mwl.calendar'));
+
+describe('calendarEventTitle', function() {
+
+  var calendarEventTitle;
+  beforeEach(inject(function(_calendarEventTitle_) {
+    calendarEventTitle = _calendarEventTitle_;
+  }));
+
+  it('should get the year view title', function() {
+    expect(calendarEventTitle.yearView({
+      title: 'Event name',
+      startsAt: new Date('October 20, 2015 02:00:00')
+    })).to.equal('Event name (Oct 20, 2:00 AM)');
+  });
+
+  it('should get the month view title', function() {
+    expect(calendarEventTitle.monthView({
+      title: 'Event name',
+      startsAt: new Date('October 20, 2015 02:00:00')
+    })).to.equal('Event name (02:00)');
+  });
+
+  it('should get the month view tooltip', function() {
+    expect(calendarEventTitle.monthViewTooltip({
+      title: 'Event name',
+      startsAt: new Date('October 20, 2015 02:00:00')
+    })).to.equal('02:00 - Event name');
+  });
+
+  it('should get the week view title', function() {
+    expect(calendarEventTitle.weekView({
+      title: 'Event name',
+      startsAt: new Date('October 20, 2015 02:00:00')
+    })).to.equal('Event name');
+  });
+
+  it('should get the week view tooltip', function() {
+    expect(calendarEventTitle.weekViewTooltip({
+      title: 'Event name',
+      startsAt: new Date('October 20, 2015 02:00:00')
+    })).to.equal('Event name');
+  });
+
+  it('should get the day view title', function() {
+    expect(calendarEventTitle.dayView({
+      title: 'A really long event title that gets truncated',
+      startsAt: new Date('October 20, 2015 02:00:00'),
+      height: 10
+    })).to.equal('A really long event ...');
+  });
+
+  it('should get the day view title for an all day event', function() {
+    expect(calendarEventTitle.dayView({
+      title: 'A really long event title thats not truncated',
+      startsAt: new Date('October 20, 2015 02:00:00'),
+      height: 10,
+      allDay: true
+    })).to.equal('A really long event title thats not truncated');
+  });
+
+});