feat(cellIsOpen): Add a 2 way bound attribute to control if the year …

…and month view slide box is ope

Closes #199

BREAKING CHANGE: auto-open has been renamed to cell-is-open. It is now 2 way bound if the slidebox is open or not so
you can programmatically control the visibility of the slidebox.

README.md

@@ -91,7 +91,7 @@ There is a single directive exposed to create the calendar, use it like so:
     delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
     on-edit-event-click="eventEdited(calendarEvent)"
     on-delete-event-click="eventDeleted(calendarEvent)"
-    auto-open="true">
+    cell-is-open="true">
 </mwl-calendar>
 ```
 
@@ -165,9 +165,9 @@ This expression is called when an event delete link is clicked on the calendar.
 
 This expression is called when a month, day or hour on the calendar is clicked on the year, month and day views respectively. `calendarDate` can be used in the expression and contains the start of the month, day or hour that was clicked on.
 
-### auto-open
+### cell-is-open
 
-Whether to auto open the year and month view breakdown to the current year / month. Default: false
+A 2 way bound variable that when set to true will open the year or month view cell that corresponds to the date passed to the date object passed to `current-day`.
 
 ### day-view-start
 
@@ -186,15 +186,19 @@ The number of chunks to split the day view hours up into. Can be either 10, 15 o
 An optional expression that is evaluated when the drilldown (clicking on a date to change the view) is triggered. Return false from the expression function to disable the drilldown. `calendarDate` can be used in the expression and contains the date that was selected. `calendarNextView` is the view that the calendar will be changed to.  
 
 ### cell-modifier
+
 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
+
 An interpolated string template url that can be used to override the default month cell template.
 
 ### month-cell-events-template-url
+
 An interpolated string template url that can be used to override the default month cell events.
 
 ## Custom directive templates
+
 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

demo/demo.js

@@ -35,6 +35,8 @@ angular
       }
     ];
 
+    vm.isCellOpen = true;
+
     /*
      var currentYear = moment().year();
      var currentMonth = moment().month();

index.html

@@ -93,7 +93,7 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
             delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
             on-edit-event-click="vm.eventEdited(calendarEvent)"
             on-delete-event-click="vm.eventDeleted(calendarEvent)"
-            auto-open="true"
+            cell-is-open="vm.isCellOpen"
             day-view-start="06:00"
             day-view-end="22:00"
             day-view-split="30"

src/directives/mwlCalendar.js

@@ -93,6 +93,7 @@ angular
     $scope.$watchGroup([
       'vm.currentDay',
       'vm.view',
+      'vm.cellIsOpen',
       function() {
         return moment.locale() + $locale.id; //Auto update the calendar when the locale changes
       }
@@ -119,7 +120,7 @@ angular
         currentDay: '=',
         editEventHtml: '=',
         deleteEventHtml: '=',
-        autoOpen: '=',
+        cellIsOpen: '=',
         onEventClick: '&',
         onEventTimesChanged: '&',
         onEditEventClick: '&',

src/directives/mwlCalendarMonth.js

@@ -21,9 +21,10 @@ angular
       }
 
       //Auto open the calendar to the current day if set
-      if (vm.autoOpen) {
+      vm.openDayIndex = null;
+      if (vm.cellIsOpen) {
         vm.view.forEach(function(day) {
-          if (day.inMonth && moment(vm.currentDay).startOf('day').isSame(day.date) && !vm.openDayIndex) {
+          if (day.inMonth && moment(vm.currentDay).startOf('day').isSame(day.date)) {
             vm.dayClicked(day, true);
           }
         });
@@ -47,9 +48,11 @@ angular
       var dayIndex = vm.view.indexOf(day);
       if (dayIndex === vm.openDayIndex) { //the day has been clicked and is already open
         vm.openDayIndex = null; //close the open day
+        vm.cellIsOpen = false;
       } else {
         vm.openDayIndex = dayIndex;
         vm.openRowIndex = Math.floor(dayIndex / 7);
+        vm.cellIsOpen = true;
       }
 
     };
@@ -100,7 +103,7 @@ angular
         onEventTimesChanged: '=',
         editEventHtml: '=',
         deleteEventHtml: '=',
-        autoOpen: '=',
+        cellIsOpen: '=',
         onTimespanClick: '=',
         cellModifier: '=',
         cellTemplateUrl: '@',

src/directives/mwlCalendarYear.js

@@ -12,9 +12,10 @@ angular
       vm.view = calendarHelper.getYearView(vm.events, vm.currentDay, vm.cellModifier);
 
       //Auto open the calendar to the current day if set
-      if (vm.autoOpen) {
+      vm.openMonthIndex = null;
+      if (vm.cellIsOpen) {
         vm.view.forEach(function(month) {
-          if (moment(vm.currentDay).startOf('month').isSame(month.date) && !vm.openMonthIndex) {
+          if (moment(vm.currentDay).startOf('month').isSame(month.date)) {
             vm.monthClicked(month, true);
           }
         });
@@ -38,9 +39,11 @@ angular
       var monthIndex = vm.view.indexOf(month);
       if (monthIndex === vm.openMonthIndex) { //the month has been clicked and is already open
         vm.openMonthIndex = null; //close the open month
+        vm.cellIsOpen = false;
       } else {
         vm.openMonthIndex = monthIndex;
         vm.openRowIndex = Math.floor(monthIndex / 4);
+        vm.cellIsOpen = true;
       }
 
     };
@@ -73,7 +76,7 @@ angular
         onDeleteEventClick: '=',
         editEventHtml: '=',
         deleteEventHtml: '=',
-        autoOpen: '=',
+        cellIsOpen: '=',
         onTimespanClick: '=',
         cellModifier: '='
       },

src/templates/calendar.html

@@ -14,7 +14,7 @@
     on-timespan-click="vm.onTimespanClick"
     edit-event-html="vm.editEventHtml"
     delete-event-html="vm.deleteEventHtml"
-    auto-open="vm.autoOpen"
+    cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
     ng-switch-when="year"
   ></mwl-calendar-year>
@@ -29,7 +29,7 @@
     on-timespan-click="vm.onTimespanClick"
     edit-event-html="vm.editEventHtml"
     delete-event-html="vm.deleteEventHtml"
-    auto-open="vm.autoOpen"
+    cell-is-open="vm.cellIsOpen"
     cell-modifier="vm.cellModifier"
     cell-template-url="{{ vm.monthCellTemplateUrl }}"
     cell-events-template-url="{{ vm.monthCellEventsTemplateUrl }}"

test/unit/directives/mwlCalendar.spec.js

@@ -23,7 +23,7 @@ describe('mwlCalendar directive', function() {
       'calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd" ' +
       'on-edit-event-click="vm.eventEdited(calendarEvent)" ' +
       'on-delete-event-click="vm.eventDeleted(calendarEvent)" ' +
-      'auto-open="true" ' +
+      'cell-is-open="true" ' +
       'day-view-start="06:00" ' +
       'day-view-end="22:00" ' +
       'day-view-split="30" ' +

test/unit/directives/mwlCalendarMonth.spec.js

@@ -20,7 +20,7 @@ describe('mwlCalendarMonth directive', function() {
       'on-event-times-changed="onEventTimesChanged" ' +
       'day-view-start="dayViewStart" ' +
       'day-view-end="dayViewEnd" ' +
-      'auto-open="autoOpen"' +
+      'cell-is-open="cellIsOpen"' +
       'on-timespan-click="onTimeSpanClick"' +
       'day-view-split="dayViewSplit || 30" ' +
       'cell-template-url="{{ monthCellTemplateUrl }}" ' +
@@ -31,7 +31,7 @@ describe('mwlCalendarMonth directive', function() {
   function prepareScope(vm) {
     //These variables MUST be set as a minimum for the calendar to work
     vm.currentDay = calendarDay;
-    vm.autoOpen = true;
+    vm.cellIsOpen = true;
     vm.dayViewStart = '06:00';
     vm.dayViewEnd = '22:00';
     vm.dayViewsplit = 30;

test/unit/directives/mwlCalendarYear.spec.js

@@ -19,7 +19,7 @@ describe('mwlCalendarYear directive', function() {
       'on-event-times-changed="onEventTimesChanged" ' +
       'day-view-start="dayViewStart" ' +
       'day-view-end="dayViewEnd" ' +
-      'auto-open="autoOpen"' +
+      'cell-is-open="cellIsOpen"' +
       'on-timespan-click="onTimeSpanClick"' +
       'day-view-split="dayViewSplit || 30" ' +
       '></mwl-calendar-year>';
@@ -28,7 +28,7 @@ describe('mwlCalendarYear directive', function() {
   function prepareScope(vm) {
     //These variables MUST be set as a minimum for the calendar to work
     vm.currentDay = calendarDay;
-    vm.autoOpen = true;
+    vm.cellIsOpen = true;
     vm.dayViewStart = '06:00';
     vm.dayViewEnd = '22:00';
     vm.dayViewsplit = 30;