From 32e10be9f79ca1e9c4bc846330e8144e7c310ca8 Mon Sep 17 00:00:00 2001 From: Adam Shaw Date: Sun, 3 Aug 2014 18:54:13 -0700 Subject: [PATCH] fix unnecessary scrollbars when zooming. lint issues --- src/agenda/AgendaView.js | 23 ++++++++--------------- src/basic/BasicView.js | 5 ++--- src/common/TimeGrid.events.js | 3 +-- src/util.js | 22 ++++++++++++++++++++++ 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/agenda/AgendaView.js b/src/agenda/AgendaView.js index fbeefca..7c114a4 100644 --- a/src/agenda/AgendaView.js +++ b/src/agenda/AgendaView.js @@ -238,8 +238,6 @@ $.extend(AgendaView.prototype, { // Adjusts the vertical dimensions of the view to the specified values setHeight: function(totalHeight, isAuto) { var scrollerHeight; - var timeGridHeight; - var extraHeight; // # of pixels the time-grid element needs to expand to fill the scroller if (this.bottomRuleHeight === null) { // calculate the height of the rule the very first time @@ -248,19 +246,16 @@ $.extend(AgendaView.prototype, { this.bottomRuleEl.hide(); // .show() will be called later if this
is necessary // reset all dimensions back to the original state - this.scrollerEl.height('').removeClass('fc-scroller'); + this.scrollerEl.css('overflow', ''); + unsetScroller(this.scrollerEl); uncompensateScroll(this.noScrollRowEls); if (!isAuto) { // should we force dimensions of the scroll container, or let the contents be natural height? scrollerHeight = this.computeScrollerHeight(totalHeight); - timeGridHeight = this.timeGrid.el.height(); - this.scrollerEl.height(scrollerHeight); + if (setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars? - if (timeGridHeight > scrollerHeight) { // do we need scrollbars? - - // force scrollbars and make the all-day and header rows lines up - this.scrollerEl.addClass('fc-scroller'); + // make the all-day and header rows lines up compensateScroll(this.noScrollRowEls, getScrollbarWidths(this.scrollerEl)); // the scrollbar compensation might have changed text flow, which might affect height, so recalculate @@ -270,12 +265,10 @@ $.extend(AgendaView.prototype, { this.restoreScroll(); } - else { - // display the
if there is enough extra space - extraHeight = scrollerHeight - timeGridHeight; - if (extraHeight > this.bottomRuleHeight + 5) { - this.bottomRuleEl.show(); - } + else { // no scrollbars + // still, force a height and display the bottom rule (marks the end of day) + this.scrollerEl.height(scrollerHeight).css('overflow', 'hidden'); // in case
goes outside + this.bottomRuleEl.show(); } } }, diff --git a/src/basic/BasicView.js b/src/basic/BasicView.js index 11dc6d9..6e4cc8d 100644 --- a/src/basic/BasicView.js +++ b/src/basic/BasicView.js @@ -184,15 +184,14 @@ $.extend(BasicView.prototype, { var scrollerHeight; // reset all heights to be natural - this.scrollerEl.height('').removeClass('fc-scroller'); + unsetScroller(this.scrollerEl); uncompensateScroll(this.headRowEl); scrollerHeight = this.computeScrollerHeight(totalHeight); this.setGridHeight(scrollerHeight, isAuto); - if (!isAuto && this.dayGrid.el.height() > scrollerHeight) { // should we show scrollbars? + if (!isAuto && setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars? - this.scrollerEl.height(scrollerHeight).addClass('fc-scroller'); compensateScroll(this.headRowEl, getScrollbarWidths(this.scrollerEl)); // doing the scrollbar compensation might have created text overflow which created more height. redo diff --git a/src/common/TimeGrid.events.js b/src/common/TimeGrid.events.js index d88fad4..07d0b1c 100644 --- a/src/common/TimeGrid.events.js +++ b/src/common/TimeGrid.events.js @@ -170,7 +170,6 @@ $.extend(TimeGrid.prototype, { 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; if (shouldOverlap) { // double the width, but don't go beyond the maximum forward coordinate (1.0) @@ -203,7 +202,7 @@ $.extend(TimeGrid.prototype, { generateSegVerticalCss: function(seg) { return { top: seg.top, - bottom: -seg.bottom, // flipped because needs to be space beyond bottom edge of event container + bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container }; }, diff --git a/src/util.js b/src/util.js index fa56601..0f9601b 100644 --- a/src/util.js +++ b/src/util.js @@ -115,6 +115,28 @@ function matchCellWidths(els) { } +// Turns a container element into a scroller if its contents is taller than the allotted height. +// Returns true if the element is now a scroller, false otherwise. +// NOTE: this method is best because it takes weird zooming dimensions into account +function setPotentialScroller(containerEl, height) { + containerEl.height(height).addClass('fc-scroller'); + + // are scrollbars needed? + if (containerEl[0].scrollHeight > containerEl[0].clientHeight) { + return true; + } + + unsetScroller(containerEl); // undo + return false; +} + + +// Takes an element that might have been a scroller, and turns it back into a normal element. +function unsetScroller(containerEl) { + containerEl.height('').removeClass('fc-scroller'); +} + + /* General DOM Utilities ----------------------------------------------------------------------------------------------------------------------*/