Skip to content

Commit

Permalink
fix some sizing problems
Browse files Browse the repository at this point in the history
  • Loading branch information
arshaw committed Oct 25, 2018
1 parent a767f12 commit 5baf119
Show file tree
Hide file tree
Showing 8 changed files with 51 additions and 61 deletions.
4 changes: 2 additions & 2 deletions src/Calendar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@ export default class Calendar {
this.handleOptions(this.optionsManager.computed)

if (name === 'height' || name === 'contentHeight' || name === 'aspectRatio') {
this.updateSize()
this.resizeComponent()
} else if (name === 'timeZone') {
this.dispatch({
type: 'CHANGE_TIMEZONE',
Expand Down Expand Up @@ -718,7 +718,7 @@ export default class Calendar {

let savedScroll = this.component.view.queryScroll()

this.component.updateSize(true) // isResize=true
this.component.updateRootSize(true) // isResize=true

savedScroll.isLocked = true // will prevent view from computing own values
this.component.view.applyScroll(savedScroll)
Expand Down
26 changes: 10 additions & 16 deletions src/CalendarComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ export default class CalendarComponent extends Component<CalendarComponentProps>

removeElement(this.contentEl)
this.toggleElClassNames(false)
this.clearHeightVars()

super.destroy()
}
Expand Down Expand Up @@ -106,7 +105,7 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
this.subrender('renderToolbars', [ props.viewSpec, props.dateProfile, props.dateProfileGenerator, title ])
this.renderView(props, title)

this.updateSize()
this.updateRootSize()
this.thawContentHeight()
this.view.popScroll()
}
Expand Down Expand Up @@ -196,18 +195,18 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
// Sizing
// -----------------------------------------------------------------------------------------------------------------

updateSize(isResize = false) {
super.updateSize(isResize)

if (isResize) {
this.clearHeightVars()
}

if (this.isHeightAuto == null) {
updateRootSize(isResize = false) {
if (isResize || this.isHeightAuto == null) {
this.computeHeightVars()
}

this.view.updateHeight(this.viewHeight, this.isHeightAuto, isResize)
this.updateSize(this.viewHeight, this.isHeightAuto, isResize)
}

updateSize(totalHeight, isAuto, isResize) {
super.updateSize(totalHeight, isAuto, isResize)

this.view.updateSize(this.viewHeight, this.isHeightAuto, isResize)
}

computeHeightVars() {
Expand Down Expand Up @@ -235,11 +234,6 @@ export default class CalendarComponent extends Component<CalendarComponentProps>
}
}

clearHeightVars() {
this.isHeightAuto = null
this.viewHeight = null
}

queryToolbarsHeight() {
let height = 0

Expand Down
8 changes: 2 additions & 6 deletions src/View.ts
Original file line number Diff line number Diff line change
Expand Up @@ -249,13 +249,9 @@ export default abstract class View extends DateComponent {
------------------------------------------------------------------------------------------------------------------*/


updateHeight(totalHeight, isAuto, isResize) {
this.updateSize(isResize)
}

updateSize(totalHeight: number, isAuto: boolean, isResize: boolean) {
super.updateSize(totalHeight, isAuto, isResize)

updateSize(isResize) {
super.updateSize(isResize)
this.updateNowIndicator()
}

Expand Down
34 changes: 17 additions & 17 deletions src/agenda/AgendaView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -229,10 +229,19 @@ export default class AgendaView extends View {
------------------------------------------------------------------------------------------------------------------*/


// Adjusts the vertical dimensions of the view to the specified values
updateHeight(totalHeight, isAuto, isResize) {
super.updateHeight(totalHeight, isAuto, isResize)
updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
super.updateSize(viewHeight, isAuto, isResize) // will call updateBaseSize. important that executes first

this.timeGrid.updateSize(viewHeight, isAuto, isResize)

if (this.dayGrid) {
this.dayGrid.updateSize(viewHeight, isAuto, isResize)
}
}


// Adjusts the vertical dimensions of the view to the specified values
updateBaseSize(viewHeight, isAuto, isResize) {
let eventLimit
let scrollerHeight
let scrollbarWidths
Expand All @@ -244,7 +253,7 @@ export default class AgendaView extends View {
// TODO: separate setting height from scroller VS timeGrid.
if (!this.timeGrid.colEls) {
if (!isAuto) {
scrollerHeight = this.computeScrollerHeight(totalHeight)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.scroller.setHeight(scrollerHeight)
}
return
Expand Down Expand Up @@ -275,7 +284,7 @@ export default class AgendaView extends View {

if (!isAuto) { // should we force dimensions of the scroll container?

scrollerHeight = this.computeScrollerHeight(totalHeight)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.scroller.setHeight(scrollerHeight)
scrollbarWidths = this.scroller.getScrollbarWidths()

Expand All @@ -288,7 +297,7 @@ export default class AgendaView extends View {

// the scrollbar compensation might have changed text flow, which might affect height, so recalculate
// and reapply the desired height to the scroller.
scrollerHeight = this.computeScrollerHeight(totalHeight)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.scroller.setHeight(scrollerHeight)
}

Expand All @@ -304,18 +313,9 @@ export default class AgendaView extends View {
}


updateSize(isResize: boolean) {
this.timeGrid.updateSize(isResize)

if (this.dayGrid) {
this.dayGrid.updateSize(isResize)
}
}


// given a desired total height of the view, returns what the height of the scroller should be
computeScrollerHeight(totalHeight) {
return totalHeight -
computeScrollerHeight(viewHeight) {
return viewHeight -
subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
}

Expand Down
28 changes: 14 additions & 14 deletions src/basic/BasicView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,10 +150,15 @@ export default class BasicView extends View {
------------------------------------------------------------------------------------------------------------------*/


// Refreshes the horizontal dimensions of the view
updateHeight(totalHeight, isAuto, isResize) {
super.updateHeight(totalHeight, isAuto, isResize)
updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
super.updateSize(viewHeight, isAuto, isResize) // will call updateBaseSize. important that executes first

this.dayGrid.updateSize(viewHeight, isAuto, isResize)
}


// Refreshes the horizontal dimensions of the view
updateBaseSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
let { dayGrid } = this
let eventLimit = this.opt('eventLimit')
let headRowEl =
Expand All @@ -167,7 +172,7 @@ export default class BasicView extends View {
// TODO: separate setting height from scroller VS dayGrid.
if (!dayGrid.rowEls) {
if (!isAuto) {
scrollerHeight = this.computeScrollerHeight(totalHeight)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.scroller.setHeight(scrollerHeight)
}
return
Expand Down Expand Up @@ -195,8 +200,8 @@ export default class BasicView extends View {
}

// distribute the height to the rows
// (totalHeight is a "recommended" value if isAuto)
scrollerHeight = this.computeScrollerHeight(totalHeight)
// (viewHeight is a "recommended" value if isAuto)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.setGridHeight(scrollerHeight, isAuto)

// is the event limit dynamically calculated?
Expand All @@ -216,7 +221,7 @@ export default class BasicView extends View {
}

// doing the scrollbar compensation might have created text overflow which created more height. redo
scrollerHeight = this.computeScrollerHeight(totalHeight)
scrollerHeight = this.computeScrollerHeight(viewHeight)
this.scroller.setHeight(scrollerHeight)
}

Expand All @@ -226,14 +231,9 @@ export default class BasicView extends View {
}


updateSize(isResize: boolean) {
this.dayGrid.updateSize(isResize)
}


// given a desired total height of the view, returns what the height of the scroller should be
computeScrollerHeight(totalHeight) {
return totalHeight -
computeScrollerHeight(viewHeight) {
return viewHeight -
subtractInnerElHeight(this.el, this.scroller.el) // everything that's NOT the scroller
}

Expand Down
2 changes: 1 addition & 1 deletion src/component/Component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default class Component<PropsType> {
}

// when isResize is true, causes all subrenders to have sizes updated
updateSize(isResize: boolean = false) {
updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
let methodNames = isResize ? this.sizeMethodNames : this.dirtySizeMethodNames

methodNames.forEach((sizeMethodName) => {
Expand Down
6 changes: 3 additions & 3 deletions src/component/DateComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -114,13 +114,13 @@ export default class DateComponent extends Component<DateComponentProps> {
this.subrender('renderEventResizeState', [ props.eventResize, dateId ], 'unrenderEventResizeState', true)
}

updateSize(isResize: boolean = false) {
updateSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
let map = this.dirtySizeMethodNames

if (isResize || map.has('afterSkeletonRender') || map.has('_renderDates') || map.has('renderEvents')) {
// sort of the catch-all sizing
// anything that might cause dimension changes
this.updateBaseSize()
this.updateBaseSize(viewHeight, isAuto, isResize)
this.buildPositionCaches()
}

Expand Down Expand Up @@ -153,7 +153,7 @@ export default class DateComponent extends Component<DateComponentProps> {
this.dirtySizeMethodNames = new Map()
}

updateBaseSize() {
updateBaseSize(viewHeight: number, isAuto: boolean, isResize: boolean) {
}

buildPositionCaches() {
Expand Down
4 changes: 2 additions & 2 deletions src/list/ListView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ export default class ListView extends View {
}


updateHeight(totalHeight, isAuto, isResize) {
super.updateHeight(totalHeight, isAuto, isResize)
updateSize(totalHeight, isAuto, isResize) {
super.updateSize(totalHeight, isAuto, isResize)

this.scroller.clear() // sets height to 'auto' and clears overflow

Expand Down

0 comments on commit 5baf119

Please sign in to comment.