documentcloud / documentcloud-notes

Responsively embed DocumentCloud notes.
https://documentcloud.github.io/documentcloud-notes/
MIT License
21 stars 2 forks source link

Do less work when resizing #1

Closed knowtheory closed 8 years ago

knowtheory commented 10 years ago

In the integration branch, scaleNote is called every time the window resize handler fires, regardless of whether the note needs to be rescaled/restyled.

Can this be made smarter, so that notes are not scaled unless the boundary conditions for how each note is displayed has been passed?

aramology commented 10 years ago

There are three states for the widthViewable for a note: smallest (1), where the width of the viewable is shorter than the width of the target; middle (2), where the width of the viewable is shorter than the sum of the widths of the left cover and the target; largest (3), where the width of the viewable is larger then that.

First shiftLeft was taken out from scaleNote, so that shifting the left cover & image happens separately from scaling the image. Note that states 2 (middle) and 3 (largest) only differ in the position of the left cover & image.

For each note, the widthViewable_state records which state it's in. When the width of the viewable changes (or rather when the width of window changes), widthViewable_state is used to tell which state it's coming from and is updated according to the new width of the viewable.

These are the rules for applying shiftLeft and scaleNote:

1,2,3->1 : changing from any state (1,2,3) to the smallest state (1), scaleNote & shiftLeft

1->2,3 : changing from the smallest state (1) to NOT the smallest state (2,3), scaleNote 1,3->2 : changing from NOT the middle state (1,3) to the middle state (2), shiftLeft 1,2->3 : changing from NOT the largest state (1,2) to the largest state (3), shiftLeft