MediaWiki talk:Gadget-DropdownToTabbar.js

Broken

This script breaks the user interface in Safari & Chrome. (old toolbar appears etc.)--DieBuche (talk) 20:55, 22 May 2010 (UTC)

The script is needlesly complicated and slow (due to the jQuery selector traversing all ‎<a> elements in the DOM), and it is broken because it uses .wrapInner incorrectly. Here is a working script from enwiki, guarenteed to work 100% on all browsers. — Edokter (talk) — 21:35, 25 June 2011 (UTC)

/*  _____________________________________________________________________________
 * |                                                                             |
 * |                    === WARNING: GLOBAL GADGET FILE ===                      |
 * |                  Changes to this page affect many users.                    |
 * | Please discuss changes on the talk page or on [[WT:Gadget]] before editing. |
 * |_____________________________________________________________________________|
 *
 * Imported as of 14 June 2011 from [[User:Edokter/MenuToTabs.js]]
 * Change the page action drop-down menus to tabs in Vector
 */
 
if (mw.config.get('skin') == 'vector') {
  $(function() {
    $('#p-cactions')
      .removeClass('vectorMenu').addClass('vectorTabs').css('margin-left', '0.5em')
      .find('li > a').wrap('<span></span>');
  });
}

I just realized this topic is a year old. I'll propose my code at the Village Pump. — Edokter (talk) — 23:28, 25 June 2011 (UTC)

Thanks, I've imported it into the Snippets repository at MediaWiki.org and replaced this gadget with it. I've added more whitespace per our conventions, note that the ResourceLoader minifies this. –Krinkle^talk 00:55, 26 June 2011 (UTC)

I thought gadgets were still loaded raw. — Edokter (talk) — 01:31, 26 June 2011 (UTC)

BUG!

Please change ( 'a' ) back to ( 'li > a' ). The code now causes existing spans to double-wrap the anchors. — Edokter (talk) — 01:43, 26 June 2011 (UTC)

If there are realistic situations in which this is the case, I'm happy to undo that. But I'm leaning towards a "DontDoThat" regarding anything causing pre-existing spans in a non-.vectorTab portlet. –Krinkle^talk 01:56, 26 June 2011 (UTC)

Since addPortletLink did that until recently, I can only imagine other scripts did too. Sounds realistic enough.  Done –Krinkle^talk 02:00, 26 June 2011 (UTC)

Thanks. Better to be on the safe side. I know you committed my patch yesterday, did you backport it to production? My test shows it still adds indiscriminate spans, and 1.19 will be a while. — Edokter (talk) — 02:13, 26 June 2011 (UTC)

Update

{{Editprotected}}

Please update to the following code; it fixes a misalignment in Firefox due to the present ‎<div class="menu">...‎</div> (strangly enough observed only on enwiki). Also, MediaWiki:Gadget-DropdownToTabbar still says "(currently disabled)", which it isn't. — Edokter (talk) — 14:35, 4 July 2011 (UTC)

/**
 * Convert Vector portlets menus to tabs.
 *
 * @source: http://www.mediawiki.org/wiki/Snippets/Convert_vectorMenu_to_vectorTabs
 * @rev: 2
 * @author: Edokter
 */

$( function() {
  if ( mw.config.get( 'skin' ) == 'vector' ) {
    $( '#p-cactions' )
      .removeClass( 'vectorMenu' )
      .addClass( 'vectorTabs' )
      .css( 'margin-left', '0.5em' )
      .find( 'div.menu > ul' )
        .unwrap()
      .find( 'li > a' )
        .wrap( '<span></span>' );
  }
} );

About this change I think it is better to put the if outside of $(), to avoid calling the function $ on other skins (If I remember correctly "mw" is/should be available at that point). Helder 18:12, 4 July 2011 (UTC)

'Should', but it is not 100% guaranteed. This is considered best practice. — Edokter (talk) — 18:39, 4 July 2011 (UTC)

Well, in this case, shouldn't all mw.* calls on MediaWiki:Common.js (particularly mw.config.get('wg...') ) to be wrapped with $(document).ready( ... )? I think if it is safe there it is also safe here (I've always assumed that when doing changes on Common.js and gadgets on Portuguese Wikibooks). Helder 21:52, 4 July 2011 (UTC)

No, because common.js is loaded through the ResourceLoader (while gadgets are not), mw.* is available in common.js. Hence there is no need to wrap anything in common.js in in $() unless it needs to run on document.ready. — Edokter (talk) — 22:52, 4 July 2011 (UTC)

Non-sense. The startUp module is the very first thing executed after MediaWiki initializes, which is where jQuery, mw and the config-vars are populated. This is loaded in the ‎<head> and is always before anything else, even before non-resourceloader scripts. Thus mw.config and the config-vars are globally available. In the case they are not there is most likely major breakages where getting a null value from mw.config.get is likely the least of the worries. By putting the if-statement outside the document-ready statement it will not bind a document-ready event in other skins + save a bit of execution later since the check is not done after the document is ready. Personally I'd even opt for removing the dom-ready entirely since all modules are loaded on the bottom of the page by default, at which point all portlets have been long parsed. Waiting for dom-ready would postpone the action for something the script doesn't need. –Krinkle^talk 22:35, 5 July 2011 (UTC)

Good to know mw is always available. Maybe moving the if inside &() was a hasty decision no my part, so you may undo that change. But since this is a DOM-manipulating gadget, I feel safer executing it on DOM-ready. — Edokter (talk) — 22:51, 5 July 2011 (UTC)

Snippet synchronized with mediawiki.org in this edit –Krinkle^talk 22:35, 5 July 2011 (UTC)

Update to toggle version?

This gadget has been superceded by a toggleable verion on en.wiki. Is it not time to introduce it here as well? — Edokter (talk) — 10:18, 28 August 2012 (UTC)

Bug

This gadget blocks all tabs on pages because of some Vector styling. Please investigate. St. Johann 12:52, 23 May 2018 (UTC)