Limit height of playback tool when analysis/configuration/download etc pane is open.

[craigsapp]

Example for score https://polishscores.org/?id=pl-kk--kk-i-482--002-004

Default position of the MIDI playback progress bar:

When the score view progresses towards the bottom of the page, the progress bar goes upwards, but stops before it hits the navigation tools:

When a navigation pane is open, the

MIDI playback progress bar travels over it:

Instead the MIDI playback tool should stop once it reaches the pane (brownish background).

Limit the position of the MIDI playback bar to the bottom of the navigation panes. Currently the max position is fixed to a pixel height of the navigation tool bar bottom, but it will need to be adjusted dynamcally (navigation panes will have different heights, and could even be different heights depending on the active language being Polish or English).

[craigsapp]

Perhaps this can be done with a MutationObserver on the pane height (when it is visible).

Currently done with this CSS:

#player {
        position:sticky;
        position: -webkit-sticky;
        margin-left:-15px;
        margin-top:0px;
        visibility:hidden;
        color: #666;
}

[craigsapp]

Implemented with commit https://github.com/craigsapp/website-polish-scores/commit/4c29a6a2e8633f5aa0d206d3647910c79f0b0114

The scroll event listener was also required (which simulates position: sticky).

Example: https://polishscores.org/?id=pl-kk--kk-i-382--079-004

Default position:

Opening the configuration pane:

Scrolling down the page:

Closing the configuration pane:

[craigsapp]

Commit https://github.com/craigsapp/website-polish-scores/commit/8a94e614a0f356df670c273e4591fc7dbaf238af moves the listeners/observer to _includes/listeners where it will be easier to find later.