Creating Drawers and Overlay's have the side effect of adding themselves to the DOM. This is not useful for tests and causes compatibility problems when trying to get our library working in skins (which the editing team is currently working towards doing)
Problem
Drawers and Overlays automatically append themselves to the DOM instead Drawer.prototype.postRender:
postRender: function () {
- var self = this;
- // This module might be loaded at the top of the page e.g. Special:Uploads
- // Thus ensure we wait for the DOM to be loaded
- util.docReady( function () {
- self.appendTo( self.appendToElement );
- self.$el.parent().addClass( 'has-drawer' );
- } );and Overlay.prototype.show
/**
* Attach overlay to current view and show it.
* @memberof Overlay
* @instance
*/
show: function () {
var self = this,
$html = util.getDocument(),
$window = util.getWindow();
this.$el.appendTo( this.appendToElement );In Drawer, inside Drawer.prototype.onShowDrawer a setTimeout hacks around the async nature of Drawer.prototype.postRender:
onShowDrawer: function () {
- var self = this;
+ var self = this,
+ $window = util.getWindow();
this.$el.parent().addClass( 'drawer-visible' );
- setTimeout( function () {
- var $window = util.getWindow();
- $window.one( 'click.drawer', self.hide.bind( self ) );
- if ( self.closeOnScroll ) {
- $window.one( 'scroll.drawer', self.hide.bind( self ) );
- }
- }, self.minHideDelay );Going forward, we'll want to find a better way to do this - where Drawer's/Overlay's are explicitly added to the DOM by OverlayManager and/or DrawerManager (which currently doesn't exist)
Developer notes
To do this safely, for any View, we can check if this.$el.parents().length to tell whether the node has already been inserted in the DOM. Where it hasn't we can continue with the existing behaviour but use mw.log.warn to tell the developer that something needs fixing.
I've written a patch to show what this might look like:
https://gerrit.wikimedia.org/r/473143
Acceptance criteria
- An auto-added overlay/drawer triggers a JavaScript console warning
- The OverlayManager has a public method which can be used to append Drawers or Overlays to a page
- A Drawer and Overlay has been updated to use this mechanism
- Drawers/Overlays will be added to body rather than mw-mf-viewport going forward to support the editing team's work in T198765
- Update the OverlayManager tests
