Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

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
  • Loading branch information...
Matt Lewis
Matt Lewis committed Jun 26, 2016
1 parent 08c4292 commit a8ad01ae46f6a31c15e77fb859cf63416be7ad29
@@ -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.
});
@@ -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;
@@ -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() {
@@ -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) {
@@ -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;
@@ -46,7 +46,6 @@ angular
return this.allDateFormats[this.dateFormatter].title;
},
dateFormatter: 'angular',
displayEventEndTimes: false,
showTimesOnWeekView: false,
displayAllMonthEvents: false,
i18nStrings: {
@@ -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
};

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

@@ -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>
@@ -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>
@@ -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>
@@ -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');
});

});

0 comments on commit a8ad01a

Please sign in to comment.
You can’t perform that action at this time.