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

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
  • Loading branch information...
Matt Lewis
Matt Lewis committed Aug 21, 2016
1 parent a4bed3e commit 682b522e47b08ab7ec8a1c82dec0e3ba2b78a4cd
Showing with 252 additions and 104 deletions.
  1. +0 −1 docs/examples/all-day-events/javascript.js
  2. +1 −2 docs/examples/all-day-events/markup.html
  3. +1 −1 docs/examples/badge-total/javascript.js
  4. +2 −1 docs/examples/badge-total/markup.html
  5. +21 −1 docs/examples/cell-is-open/javascript.js
  6. +4 −2 docs/examples/cell-is-open/markup.html
  7. +1 −1 docs/examples/clickable-events/javascript.js
  8. +2 −1 docs/examples/clickable-events/markup.html
  9. +1 −1 docs/examples/custom-event-class/javascript.js
  10. +2 −1 docs/examples/custom-event-class/markup.html
  11. +22 −1 docs/examples/draggable-events/javascript.js
  12. +4 −2 docs/examples/draggable-events/markup.html
  13. +3 −1 docs/examples/draggable-external-events/javascript.js
  14. +2 −1 docs/examples/draggable-external-events/markup.html
  15. +1 −1 docs/examples/editable-deletable-events/javascript.js
  16. +2 −1 docs/examples/editable-deletable-events/markup.html
  17. +1 −1 docs/examples/grouping-events/javascript.js
  18. +3 −2 docs/examples/grouping-events/markup.html
  19. +21 −1 docs/examples/kitchen-sink/javascript.js
  20. +14 −9 docs/examples/kitchen-sink/markup.html
  21. +21 −1 docs/examples/recurring-events/javascript.js
  22. +4 −2 docs/examples/recurring-events/markup.html
  23. +0 −1 docs/examples/resizable-events/javascript.js
  24. +0 −1 docs/examples/resizable-events/markup.html
  25. +0 −1 docs/examples/select-range/javascript.js
  26. +0 −1 docs/examples/select-range/markup.html
  27. +1 −1 docs/examples/slide-box-disabled/markup.html
  28. +0 −1 docs/examples/timespan-click/javascript.js
  29. +1 −1 docs/examples/timespan-click/markup.html
  30. +0 −1 docs/examples/view-change-click/javascript.js
  31. +0 −1 docs/examples/view-change-click/markup.html
  32. +6 −0 src/directives/mwlCalendar.js
  33. +38 −12 src/directives/mwlCalendarMonth.js
  34. +37 −11 src/directives/mwlCalendarYear.js
  35. +2 −0 src/templates/calendar.html
  36. +1 −1 src/templates/calendarMonthCell.html
  37. +1 −1 src/templates/calendarMonthView.html
  38. +2 −2 src/templates/calendarYearView.html
  39. +15 −17 test/unit/directives/mwlCalendarMonth.spec.js
  40. +15 −16 test/unit/directives/mwlCalendarYear.spec.js
@@ -23,6 +23,5 @@ angular

vm.calendarView = 'day';
vm.viewDate = moment().toDate();
vm.isCellOpen = true;

});
@@ -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>
@@ -21,6 +21,6 @@ angular

vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.isCellOpen = true;
vm.cellIsOpen = true;

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

};

});
@@ -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>
@@ -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);
@@ -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>
@@ -15,6 +15,6 @@ angular

vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.isCellOpen = true;
vm.cellIsOpen = true;

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

};

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

});
@@ -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>
@@ -34,6 +34,6 @@ angular

vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.isCellOpen = true;
vm.cellIsOpen = true;

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

};

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

};

});
@@ -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>
@@ -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);
@@ -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>
@@ -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;
@@ -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>
Oops, something went wrong.

0 comments on commit 682b522

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