Jump to content

Topic on Talk:Requests for comment/Vertical writing support

List of scripts needing fixes

Yair rand (talkcontribs)

Feel free to add to this list. Apologies for mixing module names with script names.

Generally visible scripts that result in broken behaviour: (These are the only ones I'd consider to be a necessity for deployment.)

  • mediawiki.toc.js
    Two jQuery functions used in this script are shortcuts to a set animation properties. When vertical, $.slideDown and $.slideUp can be replaced with
    $tocList.animate({width: "show", paddingLeft: "show", marginLeft: "show", paddingRight: "show", marginRight: "show"}, "fast" );
    $tocList.animate({width: "hide", paddingLeft: "hide", marginLeft: "hide", paddingRight: "hide", marginRight: "hide"}, "fast" );
    respectively. The padding can be omitted if dealing with unusual CSS situations is unnecessary.
  • jquery.mw-jump.js
    Causes very large gap of whitespace right now.
    .css( { height: 0 } ); and .css( { height: 'auto' } ); need to use width for vertical:
    .css( !vertical ? 'height' : 'width', 0 ); and .css( !vertical ? 'height' : 'width', 'auto' );
  • (Only on Special:Preferences) mediawiki.special.preferences.js has the same code applied to .mw-navigation-hint. Same fix necessary.
  • jquery.suggestions.js
    The variable newCSS needs some changes, similar to those applied in rtl situations.
  • mediawiki.notification.js (minor)
    Most of this works well, but stacked notifications don't animate smoothly, and it doesn't react to scrolling like normal.
    offset = $area.offset(); becomes (in both vertical-lr and vertical-rl):
    offset = { left: $area[ 0 ].getBoundingClientRect().left - document.body.getBoundingClientRect().left };
    This is because scrollLeft and scrollTop are both broken in IE in vertical modes, and offset() relies on them.
    var isFloating = $window.scrollTop() > offset.top; becomes:
    For vertical-lr: $window.scrollLeft() > offset.left;
    scrollLeft won't work.
    For vertical-lr: isFloating = -document.body.getBoundingClientRect().left > offset.left;
    For vertical-rl: $( window ).width() < offset.left + document.body.getBoundingClientRect().left;
    IE gives incorrect values for clientHeight and clientWidth, which are used by $( window ).width(), when in vertical writing mode.
    For vertical-rl: $( document ).width() < offset.left + document.body.getBoundingClientRect().left;
    For vertical-rl: $( document.documentElement ).width() < offset.left + document.body.getBoundingClientRect().left;
    Newer IEs can handle this, but IE8 swaps height and width when handed $( document.documentElement ).width(). Window, body, document, and documentElement, offsetWidth and getComputedStyle, and pretty much everything else also breaks somehow or other.
    For vertical-rl: document.body.getBoundingClientRect().width < offset.left + document.body.getBoundingClientRect().left;
    Unsupported by IE8<...
    For vertical-rl: viewportRect = document.body.getBoundingClientRect(); var isFloating = viewportRect.right - viewportRect.left < offset.left + viewportRect.left;
    This actually tracks the original left side instead of the right. offset objects don't normally have right properties, though.
  • Vector/collapsibleTabs.js
  • Vector/vector.js
    • Contain numerous direct width and left references that need to be rotated. Also makes use of $.fn.offset() in calculateTabDistance, which can be safely switched to .top in vertical without issues.

Situation-dependent: (Not that much of an issue if these don't work.)

  • mediawiki.action.edit.preview.js (really minor)
  • mediawiki.page.gallery.js (minor)
  • jquery.makeCollapsible.js
  • jquery.ui/jquery.ui.button.js could use some minor fixes with the corners.
  • Not sure about jquery.ui.resizable.js and jquery.ui.draggable.js.
  • jquery.ui.listrotator (unused?)
  • Spinner
  • jquery.loadingSpinner (maybe)

Extensions used by Wikimedia:

  • ULS: (Pretty sure this isn't so relevant.)
    • UniversalLanguageSelector/resources/js/ext.uls.webfonts.js
    • UniversalLanguageSelector/resources/js/ext.uls.interface.js
    • ext.uls.languagesettings
    • ext.uls.compactlinks (I think this is beta only, actually)
    • jquery.uls (This also needs design help for dealing with the map image.)
  • Echo: (In terms of visible problems, there's some slight mispositioning of the box, I think. Mostly okay otherwise.)
    • Echo/modules/overlay/ext.echo.overlay.js
    • Echo/modules/overlay/ext.echo.special.js
  • Some MultimediaViewer stuff.
    • Possibly MultimediaViewer/resources/jquery.scrollTo/jquery.scrollTo.js, but I think not.
    • Various MMV scripts that I haven't written a list of yet.
  • WikiEditor: (minor)
    • jquery.wikiEditor.js (maybe)
    • jquery.wikiEditor.dialogs.config.js
    • jquery.wikiEditor.dialogs.js
    • jquery.wikiEditor.toolbar.js
  • Quite possibly many of the TimedText modules and their dependencies. I haven't checked.
  • VisualEditor doesn't have as many complications as one might expect, it seems.
    • The top bar doesn't follow the scroll.
    • The arrow keys should probably be switched.
    • Some issues with navigation.
  • Beta:Popups could use some fixes.
  • I haven't checked:
    • ext.guidedTours
    • mobile
    • Mantle
    • math
    • pageTriage
    • wikibase (I didn't even know this was on the regular wikis...)
  • Flow needs some fixes.

Page-specific scripts:

  • Possibly mediawiki.special.upload.js, not very relevant to our cases anyway, though
Reply to "List of scripts needing fixes"