feat(cellAutoOpenDisabled): allow disabling the auto opening and clos…

…ing of the slidebox Allows full control over when the slidebox is opened and closed. This will probably become the default behaviour in a future release. BREAKING CHANGE: The `slide-box-disabled` option is deprecated and will be removed in the next release. Use the new `cell-auto-open-disabled` option instead. Before: ``` slide-box-disabled="true" ``` After: ``` cell-auto-open-disabled="true" ``` Closes #426
mattlewis92 · Aug 21, 2016 · 682b522 · 682b522
1 parent a4bed3e
commit 682b522
Show file tree

Hide file tree

Showing 40 changed files with 252 additions and 104 deletions.
diff --git a/docs/examples/all-day-events/javascript.js b/docs/examples/all-day-events/javascript.js
@@ -23,6 +23,5 @@ angular
 
     vm.calendarView = 'day';
     vm.viewDate = moment().toDate();
-    vm.isCellOpen = true;
 
   });
diff --git a/docs/examples/all-day-events/markup.html b/docs/examples/all-day-events/markup.html
@@ -2,7 +2,6 @@
   <mwl-calendar
     events="vm.events"
     view="vm.calendarView"
-    view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen">
+    view-date="vm.viewDate">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/badge-total/javascript.js b/docs/examples/badge-total/javascript.js
@@ -21,6 +21,6 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
   });
diff --git a/docs/examples/badge-total/markup.html b/docs/examples/badge-total/markup.html
@@ -4,6 +4,7 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/cell-is-open/javascript.js b/docs/examples/cell-is-open/javascript.js
@@ -19,6 +19,26 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
+
+    vm.timespanClicked = function(date, cell) {
+
+      if (vm.calendarView === 'month') {
+        if ((vm.cellIsOpen && moment(date).startOf('day').isSame(moment(vm.viewDate).startOf('day'))) || cell.events.length === 0 || !cell.inMonth) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      } else if (vm.calendarView === 'year') {
+        if ((vm.cellIsOpen && moment(date).startOf('month').isSame(moment(vm.viewDate).startOf('month'))) || cell.events.length === 0) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      }
+
+    };
 
   });
diff --git a/docs/examples/cell-is-open/markup.html b/docs/examples/cell-is-open/markup.html
@@ -1,12 +1,14 @@
 <div ng-controller="CellIsOpenCtrl as vm">
   <div class="alert alert-info">
-    The slidebox is <span ng-show="vm.isCellOpen">open</span><span ng-hide="vm.isCellOpen">closed</span>.
+    The slidebox is <span ng-show="vm.cellIsOpen">open</span><span ng-hide="vm.cellIsOpen">closed</span>.
   </div>
   <ng-include src="'calendarControls.html'"></ng-include>
   <mwl-calendar
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/clickable-events/javascript.js b/docs/examples/clickable-events/javascript.js
@@ -19,7 +19,7 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
     vm.eventClicked = function(event) {
       alert.show('Clicked', event);

diff --git a/docs/examples/clickable-events/markup.html b/docs/examples/clickable-events/markup.html
@@ -4,7 +4,8 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true"
     on-event-click="vm.eventClicked(calendarEvent);">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/custom-event-class/javascript.js b/docs/examples/custom-event-class/javascript.js
@@ -15,6 +15,6 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
   });
diff --git a/docs/examples/custom-event-class/markup.html b/docs/examples/custom-event-class/markup.html
@@ -12,6 +12,7 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/draggable-events/javascript.js b/docs/examples/draggable-events/javascript.js
@@ -21,10 +21,31 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
     vm.eventTimesChanged = function(event) {
+      vm.viewDate = event.startsAt;
       alert.show('Dragged and dropped', event);
     };
 
+    vm.timespanClicked = function(date, cell) {
+
+      if (vm.calendarView === 'month') {
+        if ((vm.cellIsOpen && moment(date).startOf('day').isSame(moment(vm.viewDate).startOf('day'))) || cell.events.length === 0 || !cell.inMonth) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      } else if (vm.calendarView === 'year') {
+        if ((vm.cellIsOpen && moment(date).startOf('month').isSame(moment(vm.viewDate).startOf('month'))) || cell.events.length === 0) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      }
+
+    };
+
   });
diff --git a/docs/examples/draggable-events/markup.html b/docs/examples/draggable-events/markup.html
@@ -4,7 +4,9 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
-    on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)"
+    on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd; vm.eventTimesChanged(calendarEvent)">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/draggable-external-events/javascript.js b/docs/examples/draggable-external-events/javascript.js
@@ -25,7 +25,7 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = false;
 
     vm.eventDropped = function(event, start, end) {
       var externalIndex = vm.externalEvents.indexOf(event);
@@ -37,6 +37,8 @@ angular
       if (end) {
         event.endsAt = end;
       }
+      vm.viewDate = start;
+      vm.cellIsOpen = true;
     };
 
   });
diff --git a/docs/examples/draggable-external-events/markup.html b/docs/examples/draggable-external-events/markup.html
@@ -23,7 +23,8 @@
         events="vm.events"
         view="vm.calendarView"
         view-date="vm.viewDate"
-        cell-is-open="vm.isCellOpen"
+        cell-is-open="vm.cellIsOpen"
+        cell-auto-open-disabled="true"
         on-event-times-changed="vm.eventDropped(calendarEvent, calendarNewEventStart, calendarNewEventEnd)">
       </mwl-calendar>
     </div>

diff --git a/docs/examples/editable-deletable-events/javascript.js b/docs/examples/editable-deletable-events/javascript.js
@@ -34,6 +34,6 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
   });
diff --git a/docs/examples/editable-deletable-events/markup.html b/docs/examples/editable-deletable-events/markup.html
@@ -4,6 +4,7 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/grouping-events/javascript.js b/docs/examples/grouping-events/javascript.js
@@ -41,7 +41,7 @@ angular
 
     vm.calendarView = 'month';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
     vm.groupEvents = function(cell) {
       cell.groups = {};

diff --git a/docs/examples/grouping-events/markup.html b/docs/examples/grouping-events/markup.html
@@ -29,7 +29,8 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
-    cell-modifier="vm.groupEvents(calendarCell)">
+    cell-is-open="vm.cellIsOpen"
+    cell-modifier="vm.groupEvents(calendarCell)"
+    cell-auto-open-disabled="true">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/kitchen-sink/javascript.js b/docs/examples/kitchen-sink/javascript.js
@@ -47,7 +47,7 @@ angular
       }
     ];
 
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
     vm.addEvent = function() {
       vm.events.push({
@@ -82,4 +82,24 @@ angular
       event[field] = !event[field];
     };
 
+    vm.timespanClicked = function(date, cell) {
+
+      if (vm.calendarView === 'month') {
+        if ((vm.cellIsOpen && moment(date).startOf('day').isSame(moment(vm.viewDate).startOf('day'))) || cell.events.length === 0 || !cell.inMonth) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      } else if (vm.calendarView === 'year') {
+        if ((vm.cellIsOpen && moment(date).startOf('month').isSame(moment(vm.viewDate).startOf('month'))) || cell.events.length === 0) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      }
+
+    };
+
   });
diff --git a/docs/examples/kitchen-sink/markup.html b/docs/examples/kitchen-sink/markup.html
@@ -10,21 +10,24 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
           class="btn btn-primary"
           mwl-date-modifier
           date="vm.viewDate"
-          decrement="vm.calendarView">
+          decrement="vm.calendarView"
+          ng-click="vm.cellIsOpen = false">
           Previous
         </button>
         <button
           class="btn btn-default"
           mwl-date-modifier
           date="vm.viewDate"
-          set-to-today>
+          set-to-today
+          ng-click="vm.cellIsOpen = false">
           Today
         </button>
         <button
           class="btn btn-primary"
           mwl-date-modifier
           date="vm.viewDate"
-          increment="vm.calendarView">
+          increment="vm.calendarView"
+          ng-click="vm.cellIsOpen = false">
           Next
         </button>
       </div>
@@ -34,10 +37,10 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
 
     <div class="col-md-6 text-center">
       <div class="btn-group">
-        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
-        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
-        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
-        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'" ng-click="vm.cellIsOpen = false">Year</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false">Month</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</label>
+        <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</label>
       </div>
     </div>
 
@@ -52,11 +55,13 @@ <h2 class="text-center">{{ vm.calendarTitle }}</h2>
     view-date="vm.viewDate"
     on-event-click="vm.eventClicked(calendarEvent)"
     on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
-    cell-is-open="vm.isCellOpen"
+    cell-is-open="vm.cellIsOpen"
     day-view-start="06:00"
     day-view-end="22:59"
     day-view-split="30"
-    cell-modifier="vm.modifyCell(calendarCell)">
+    cell-modifier="vm.modifyCell(calendarCell)"
+    cell-auto-open-disabled="true"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)">
   </mwl-calendar>
 
   <br><br><br>

diff --git a/docs/examples/recurring-events/javascript.js b/docs/examples/recurring-events/javascript.js
@@ -7,7 +7,7 @@ angular
     vm.events = [];
     vm.calendarView = 'month';
     vm.viewDate = moment().toDate();
-    vm.isCellOpen = true;
+    vm.cellIsOpen = true;
 
     $scope.$watchGroup([
       'vm.calendarView',
@@ -45,4 +45,24 @@ angular
 
     });
 
+    vm.timespanClicked = function(date, cell) {
+
+      if (vm.calendarView === 'month') {
+        if ((vm.cellIsOpen && moment(date).startOf('day').isSame(moment(vm.viewDate).startOf('day'))) || cell.events.length === 0 || !cell.inMonth) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      } else if (vm.calendarView === 'year') {
+        if ((vm.cellIsOpen && moment(date).startOf('month').isSame(moment(vm.viewDate).startOf('month'))) || cell.events.length === 0) {
+          vm.cellIsOpen = false;
+        } else {
+          vm.cellIsOpen = true;
+          vm.viewDate = date;
+        }
+      }
+
+    };
+
   });
diff --git a/docs/examples/recurring-events/markup.html b/docs/examples/recurring-events/markup.html
@@ -5,7 +5,9 @@ <h1 class="text-center">{{ vm.calendarTitle }}</h1>
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
-    view-title="vm.calendarTitle">
+    cell-is-open="vm.cellIsOpen"
+    cell-auto-open-disabled="true"
+    view-title="vm.calendarTitle"
+    on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/resizable-events/javascript.js b/docs/examples/resizable-events/javascript.js
@@ -23,7 +23,6 @@ angular
 
     vm.calendarView = 'week';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
 
     vm.eventTimesChanged = function(event) {
       alert.show('Resized', event);

diff --git a/docs/examples/resizable-events/markup.html b/docs/examples/resizable-events/markup.html
@@ -4,7 +4,6 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
     on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd">
   </mwl-calendar>
 </div>
diff --git a/docs/examples/select-range/javascript.js b/docs/examples/select-range/javascript.js
@@ -7,7 +7,6 @@ angular
     vm.events = [];
     vm.calendarView = 'day';
     vm.viewDate = moment().startOf('month').toDate();
-    vm.isCellOpen = true;
 
     vm.rangeSelected = function(startDate, endDate) {
       vm.firstDateClicked = startDate;

diff --git a/docs/examples/select-range/markup.html b/docs/examples/select-range/markup.html
@@ -8,7 +8,6 @@
     events="vm.events"
     view="vm.calendarView"
     view-date="vm.viewDate"
-    cell-is-open="vm.isCellOpen"
     on-date-range-select="vm.rangeSelected(calendarRangeStartDate, calendarRangeEndDate)">
   </mwl-calendar>
 </div>