Explorar o código

fix unnecessary scrollbars when zooming. lint issues

Adam Shaw %!s(int64=11) %!d(string=hai) anos
pai
achega
32e10be9f7
Modificáronse 4 ficheiros con 33 adicións e 20 borrados
  1. 8 15
      src/agenda/AgendaView.js
  2. 2 3
      src/basic/BasicView.js
  3. 1 2
      src/common/TimeGrid.events.js
  4. 22 0
      src/util.js

+ 8 - 15
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 <hr> 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 <hr> 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 <hr> goes outside
+				this.bottomRuleEl.show();
 			}
 		}
 	},

+ 2 - 3
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

+ 1 - 2
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
 		};
 	},
 

+ 22 - 0
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
 ----------------------------------------------------------------------------------------------------------------------*/