Commit graph

3 commits

Author SHA1 Message Date
Trevor Parscal 9303648406 The amazing mystery of scrollTop and onscroll
What I learned today:
* Window doesn't have a scrollTop property, body does (that's why animate
  doesn't work on window)
* jQuery.scrollTop() doesn't work on body (in firefox) but works on
  window everywhere
* jQuery.scrollTop() uses scroll offset, not the scrollTop property
* Body doesn't have an onscroll event, window does

What I really learned today:
* Browsers are very poorly designed

Objective:
* Make clippable elements properly resize in Firefox when scrolled

Diagnosis:
* Scroll events were not being emitted from the scrollable container
  after the merge of Ifec0dae598f7fd99270588bd8ca77777a07e9669 because
  such events are not emitted from body tags, only scrollable divs and
  windows
* jQuery.scrollTop was giving incorrect values when called on the body
  instead of the window, so also due to the aforementioned change, the
  clipping was being calculated incorrectly

Treatment:
* Add $clippableScroller property, which is either a scrollable div or
  the window (could this have side-effects if someone did something
  ridiculous like made the body absolutely positioned and overflow:auto?
  Yes, but I have no other option and that's a strange edge case don't
  you think?)
* Use $clippableScroller for listening to scroll events and getting the
  scrollTop value from jQuery

Bug: 55343
Change-Id: I819aba60b200059886b347115fda437b3dc9cb7a
2013-10-07 13:25:02 -07:00
Roan Kattouw 069eefe343 Fix JS error in ve.ui.ClippableContainer
Sometimes, .clip() would be called when clipping had already been
disabled again, and accessing this.$clippableContainer would cause
an error. This happened to me when typing quickly in MWLinkInspector.

This probably happens when enabling and disabling clipping right after
each other in response to the same event, such that the setTimeout()
for the initial clip is run after clipping has already been disabled.

Change-Id: I0f85ea5f10955188bae51160e1c88eca858ea1bf
2013-09-26 17:39:35 -07:00
Trevor Parscal 143b086c74 Scroll into view support
Objectives:

* Scroll when needed to show highlighted (with keyboard) or selected (by
  any means) options in select widgets
* Allow clipping and automatic scrolling for certain elements when they
  are otherwise going to be rendered partially out of view

Changes:

*.php
* Add links to new file

ve.ui.Widget.css, ve.ui.Dialog.css
* Removed unneeded x-axis overflow rules

ve.ui.ClippableElement.js, ve.ui.Element.css
* New mixin, adds visible area clipping support to an element

ve.ui.PopupToolGroup.js, ve.ui.MenuWidget.js
* Mixin clippable element

ve.ui.OptionWidget.js, ve.ui.OutlineItemWidget.js
* Add scroll-into-view configuration for option widgets

ve.ui.SearchWidget.js
* Scroll items into view when highlighting with keyboard

ve.Element.js
* Add getBorders, getDimensions, getClosestScrollableContainer and
  scrollIntoView static methods
* Add getClosestScrollableElementContainer and scrollElementIntoView
  methods

Bug: 53610
Change-Id: Ie21faa973a68f517c7cfce8bd879b5317f536365
2013-09-16 16:46:58 -07:00