diff --git a/README.md b/README.md index 7cde6cd0..3a7a0919 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,10 @@ An interpolated string in the form of hh:mm to end the day view at, e.g. setting The number of chunks to split the day view hours up into. Can be either 10, 15 or 30. Default: 30 +### day-view-event-chunk-size + +The number of pixels to "snap" event drag and resizes to. Default: 30 + ### on-view-change-click An optional expression that is evaluated when the view is changed by clicking on a date. Return false from the expression function to disable the view change. `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. diff --git a/src/directives/mwlCalendar.js b/src/directives/mwlCalendar.js index d565d80e..cec0988b 100644 --- a/src/directives/mwlCalendar.js +++ b/src/directives/mwlCalendar.js @@ -139,7 +139,8 @@ angular cellModifier: '&', dayViewStart: '@', dayViewEnd: '@', - dayViewSplit: '@' + dayViewSplit: '@', + dayViewEventChunkSize: '@' }, controller: 'MwlCalendarCtrl as vm', bindToController: true diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js index 3aab574d..30c42cdb 100644 --- a/src/directives/mwlCalendarDay.js +++ b/src/directives/mwlCalendarDay.js @@ -87,7 +87,8 @@ angular onDateRangeSelect: '=', dayViewStart: '=', dayViewEnd: '=', - dayViewSplit: '=' + dayViewSplit: '=', + dayViewEventChunkSize: '=' }, controller: 'MwlCalendarDayCtrl as vm', bindToController: true diff --git a/src/directives/mwlCalendarWeek.js b/src/directives/mwlCalendarWeek.js index 1c3bcfac..e0b4fbf0 100644 --- a/src/directives/mwlCalendarWeek.js +++ b/src/directives/mwlCalendarWeek.js @@ -94,6 +94,7 @@ angular dayViewStart: '=', dayViewEnd: '=', dayViewSplit: '=', + dayViewEventChunkSize: '=', onTimespanClick: '=' }, controller: 'MwlCalendarWeekCtrl as vm', diff --git a/src/directives/mwlDraggable.js b/src/directives/mwlDraggable.js index 644424bb..2e182988 100644 --- a/src/directives/mwlDraggable.js +++ b/src/directives/mwlDraggable.js @@ -27,22 +27,6 @@ angular .css('transform', transformValue); } - function getUnitsMoved(x, y, gridDimensions) { - - var result = {x: x, y: y}; - - if (gridDimensions && gridDimensions.x) { - result.x /= gridDimensions.x; - } - - if (gridDimensions && gridDimensions.y) { - result.y /= gridDimensions.y; - } - - return result; - - } - interact($element[0]).draggable({ snap: snap, onstart: function(event) { @@ -82,7 +66,7 @@ angular .attr('data-y', y); if ($attrs.onDrag) { - $parse($attrs.onDrag)($scope, getUnitsMoved(x, y, snapGridDimensions)); + $parse($attrs.onDrag)($scope, {x: x, y: y}); $scope.$apply(); } @@ -95,7 +79,7 @@ angular event.target.style.pointerEvents = 'auto'; if ($attrs.onDragEnd) { - $parse($attrs.onDragEnd)($scope, getUnitsMoved(x, y, snapGridDimensions)); + $parse($attrs.onDragEnd)($scope, {x: x, y: y}); $scope.$apply(); } diff --git a/src/directives/mwlResizable.js b/src/directives/mwlResizable.js index 382e24ee..c11c5162 100644 --- a/src/directives/mwlResizable.js +++ b/src/directives/mwlResizable.js @@ -24,7 +24,7 @@ angular var originalDimensionsStyle = {}; var resizeEdge; - function getUnitsResized(edge, elm, gridDimensions) { + function getUnitsResized(edge, elm) { var unitsResized = {}; unitsResized.edge = edge; if (edge === 'start') { @@ -34,12 +34,6 @@ angular unitsResized.x = parseFloat(elm.css('width').replace('px', '')) - originalDimensions.width; unitsResized.y = parseFloat(elm.css('height').replace('px', '')) - originalDimensions.height; } - if (gridDimensions && gridDimensions.x) { - unitsResized.x = Math.round(unitsResized.x / gridDimensions.x); - } - if (gridDimensions && gridDimensions.y) { - unitsResized.y = Math.round(unitsResized.y / gridDimensions.y); - } return unitsResized; } @@ -82,7 +76,7 @@ angular } if ($attrs.onResize) { - $parse($attrs.onResize)($scope, getUnitsResized(resizeEdge, elm, snapGridDimensions)); + $parse($attrs.onResize)($scope, getUnitsResized(resizeEdge, elm)); $scope.$apply(); } @@ -92,7 +86,7 @@ angular onend: function(event) { var elm = angular.element(event.target); - var unitsResized = getUnitsResized(resizeEdge, elm, snapGridDimensions); + var unitsResized = getUnitsResized(resizeEdge, elm); $timeout(function() { elm diff --git a/src/templates/calendar.html b/src/templates/calendar.html index 2cf03a4d..a02d43f9 100644 --- a/src/templates/calendar.html +++ b/src/templates/calendar.html @@ -47,6 +47,7 @@ day-view-start="vm.dayViewStart" day-view-end="vm.dayViewEnd" day-view-split="vm.dayViewSplit" + day-view-event-chunk-size="vm.dayViewEventChunkSize" on-timespan-click="vm.onTimespanClick" ng-switch-when="week"> @@ -61,6 +62,7 @@ day-view-start="vm.dayViewStart" day-view-end="vm.dayViewEnd" day-view-split="vm.dayViewSplit" + day-view-event-chunk-size="vm.dayViewEventChunkSize" ng-switch-when="day"> diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html index 19efc744..a6ef991e 100644 --- a/src/templates/calendarDayView.html +++ b/src/templates/calendarDayView.html @@ -18,13 +18,13 @@ ng-style="{top: event.top + 'px', left: event.left + 60 + 'px', height: event.height + 'px'}" mwl-draggable="event.draggable === true" axis="'xy'" - snap-grid="{y: 30, x: 50}" - on-drag="vm.eventDragged(event, y)" - on-drag-end="vm.eventDragComplete(event, y)" + snap-grid="{y: vm.dayViewEventChunkSize || 30, x: 50}" + on-drag="vm.eventDragged(event, y / 30)" + on-drag-end="vm.eventDragComplete(event, y / 30)" mwl-resizable="event.resizable === true && event.endsAt" resize-edges="{top: true, bottom: true}" - on-resize="vm.eventResized(event, edge, y)" - on-resize-end="vm.eventResizeComplete(event, edge, y)"> + on-resize="vm.eventResized(event, edge, y / 30)" + on-resize-end="vm.eventResizeComplete(event, edge, y / 30)"> , diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html index ba7e333b..b6a1fda4 100644 --- a/src/templates/calendarWeekView.html +++ b/src/templates/calendarWeekView.html @@ -56,12 +56,12 @@ data-event-class mwl-draggable="event.draggable === true" axis="vm.showTimes ? 'xy' : 'x'" - snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}" - on-drag="vm.tempTimeChanged(event, y)" - on-drag-end="vm.weekDragged(event, x, y)" + snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: vm.dayViewEventChunkSize || 30} : {x: vm.dayColumnDimensions.width}" + on-drag="vm.tempTimeChanged(event, y / 30)" + on-drag-end="vm.weekDragged(event, x / vm.dayColumnDimensions.width, y / 30)" mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes" resize-edges="{left: true, right: true}" - on-resize-end="vm.weekResized(event, edge, x)"> + on-resize-end="vm.weekResized(event, edge, x / vm.dayColumnDimensions.width)"> '; diff --git a/test/unit/directives/mwlResizable.spec.js b/test/unit/directives/mwlResizable.spec.js index e52d2dad..4f9cc5e3 100644 --- a/test/unit/directives/mwlResizable.spec.js +++ b/test/unit/directives/mwlResizable.spec.js @@ -17,8 +17,8 @@ describe('mwlresizable directive', function() { 'snap-grid="{y: 30}" ' + 'resize-edges="{top: true, bottom: true}" ' + 'on-resize-start="onResizeStart()" ' + - 'on-resize-end="onResizeEnd(x, y)" ' + - 'on-resize="onResize(x, y)" ' + + 'on-resize-end="onResizeEnd(x, y / 30)" ' + + 'on-resize="onResize(x, y / 30)" ' + '>'; function prepareScope(vm) {