Jump to content

Topic on Talk:Requests for comment/Vertical writing support

List of scripts needing fixes

1
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"