From a6c363576cbbb70ea81f137d6aff7ebc5b05a480 Mon Sep 17 00:00:00 2001 From: Adam Shaw Date: Sun, 3 Aug 2014 17:46:24 -0700 Subject: [PATCH] refresh position of TimeGrid events when there is a zoom --- src/Calendar.js | 4 +-- src/agenda/AgendaView.js | 7 +++++ src/common/TimeGrid.events.js | 58 ++++++++++++++++++++++++++--------- src/common/TimeGrid.js | 7 +++++ src/common/View.js | 13 ++++++-- 5 files changed, 70 insertions(+), 19 deletions(-) diff --git a/src/Calendar.js b/src/Calendar.js index e8e79f9..edc12f9 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -424,9 +424,7 @@ function Calendar(element, instanceOptions) { } ignoreWindowResize++; - currentView.recordScroll(); // for keeping the scroll value (if any) before refreshing dimensions - currentView.updateHeight(); // will poll getSuggestedViewHeight() and isHeightAuto() - currentView.updateWidth(); + currentView.updateSize(true); // isResize=true. will poll getSuggestedViewHeight() and isHeightAuto() ignoreWindowResize--; return true; // signal success diff --git a/src/agenda/AgendaView.js b/src/agenda/AgendaView.js index da8b4d0..fbeefca 100644 --- a/src/agenda/AgendaView.js +++ b/src/agenda/AgendaView.js @@ -220,6 +220,13 @@ $.extend(AgendaView.prototype, { /* Dimensions ------------------------------------------------------------------------------------------------------------------*/ + updateSize: function(isResize) { + if (isResize) { + this.timeGrid.resize(); + } + View.prototype.updateSize.call(this, isResize); + }, + // Refreshes the horizontal dimensions of the view updateWidth: function() { diff --git a/src/common/TimeGrid.events.js b/src/common/TimeGrid.events.js index 56fc892..d88fad4 100644 --- a/src/common/TimeGrid.events.js +++ b/src/common/TimeGrid.events.js @@ -50,12 +50,7 @@ $.extend(TimeGrid.prototype, { segs = this.renderSegs(segs); // returns only the visible segs segCols = this.groupSegCols(segs); // group into sub-arrays, and assigns 'col' to each seg - // compute vertical coordinates - for (i = 0; i < segs.length; i++) { - seg = segs[i]; - seg.top = this.computeDateTop(seg.start, seg.start); - seg.bottom = this.computeDateTop(seg.end, seg.start); - } + this.computeSegVerticals(segs); // compute and assign top/bottom for (col = 0; col < segCols.length; col++) { // iterate each column grouping colSegs = segCols[col]; @@ -82,6 +77,35 @@ $.extend(TimeGrid.prototype, { }, + // Refreshes the CSS top/bottom coordinates for each segment element. Probably after a window resize/zoom. + updateSegVerticals: function() { + var segs = this.segs; + var i; + + if (segs) { + this.computeSegVerticals(segs); + + for (i = 0; i < segs.length; i++) { + segs[i].el.css( + this.generateSegVerticalCss(segs[i]) + ); + } + } + }, + + + // For each segment in an array, computes and assigns its top and bottom properties + computeSegVerticals: function(segs) { + var i, seg; + + for (i = 0; i < segs.length; i++) { + seg = segs[i]; + seg.top = this.computeDateTop(seg.start, seg.start); + seg.bottom = this.computeDateTop(seg.end, seg.start); + } + }, + + // Renders the HTML for a single event segment's default rendering renderSegHtml: function(seg, disableResizing) { var view = this.view; @@ -135,7 +159,7 @@ $.extend(TimeGrid.prototype, { }, - // Generates an object with css properties/values that should be applied to an event segment element. + // Generates an object with CSS properties/values that should be applied to an event segment element. // Contains important positioning-related properties that should be applied to any event element, customized or not. generateSegPositionCss: function(seg) { var view = this.view; @@ -143,6 +167,7 @@ $.extend(TimeGrid.prototype, { var shouldOverlap = view.opt('slotEventOverlap'); var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point + var props = this.generateSegVerticalCss(seg); // get top/bottom first var left; // amount of space from left edge, a fraction of the total width var right; // amount of space from right edge, a fraction of the total width var props; @@ -161,13 +186,9 @@ $.extend(TimeGrid.prototype, { right = 1 - forwardCoord; } - props = { - zIndex: seg.level + 1, // convert from 0-base to 1-based - top: seg.top, - bottom: -seg.bottom, // flipped because needs to be space beyond bottom edge of event container - left: left * 100 + '%', - right: right * 100 + '%' - }; + props.zIndex = seg.level + 1; // convert from 0-base to 1-based + props.left = left * 100 + '%'; + props.right = right * 100 + '%'; if (shouldOverlap && seg.forwardPressure) { // add padding to the edge so that forward stacked events don't cover the resizer's icon @@ -178,6 +199,15 @@ $.extend(TimeGrid.prototype, { }, + // Generates an object with CSS properties for the top/bottom coordinates of a segment element + generateSegVerticalCss: function(seg) { + return { + top: seg.top, + bottom: -seg.bottom, // flipped because needs to be space beyond bottom edge of event container + }; + }, + + // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col groupSegCols: function(segs) { var view = this.view; diff --git a/src/common/TimeGrid.js b/src/common/TimeGrid.js index 53104ad..9c884a5 100644 --- a/src/common/TimeGrid.js +++ b/src/common/TimeGrid.js @@ -155,6 +155,13 @@ $.extend(TimeGrid.prototype, { ------------------------------------------------------------------------------------------------------------------*/ + // Called when there is a window resize/zoom and we need to recalculate coordinates for the grid + resize: function() { + this.computeSlatTops(); + this.updateSegVerticals(); + }, + + // Populates the given empty `rows` and `cols` arrays with offset positions of the "snap" cells. // "Snap" cells are different the slots because they might have finer granularity. buildCoords: function(rows, cols) { diff --git a/src/common/View.js b/src/common/View.js index fc60f15..ec0ddd2 100644 --- a/src/common/View.js +++ b/src/common/View.js @@ -55,8 +55,7 @@ View.prototype = { // Renders the view inside an already-defined `this.el`. // Subclasses should override this and then call the super method afterwards. render: function() { - this.updateHeight(); - this.updateWidth(); + this.updateSize(); this.trigger('viewRender', this, this, this.el); }, @@ -85,6 +84,16 @@ View.prototype = { ------------------------------------------------------------------------------------------------------------------*/ + // Refreshes anything dependant upon sizing of the container element of the grid + updateSize: function(isResize) { + if (isResize) { + this.recordScroll(); + } + this.updateHeight(); + this.updateWidth(); + }, + + // Refreshes the horizontal dimensions of the calendar updateWidth: function() { // subclasses should implement