MediaWiki talk:Gadget-CollapsibleNav.js

Not needed any more

Hi this is not needed any more there is an extension at https://www.mediawiki.org/wiki/Extension:CollapsibleVector that does this now. 86.132.31.17 (talk) 14:43, 2 November 2014 (UTC)

That extension is not installed here, and I don't know if it ever will be. -- [[User:Edokter]] {{talk}} 16:12, 2 November 2014 (UTC)

Fix location of collapse icons

The collapsible SVG indicators were moved to /w/resources/src/mediawiki.icon/images/arrow-expanded-ltr.svg and /w/resources/src/mediawiki.icon/images/arrow-collapsed-ltr.svg. --Izno (talk) 16:17, 4 October 2020 (UTC)

@Izno: I made those changes but when I went to test, it doesn't seem to have fixed things? — Martin (MSGJ · talk) 21:03, 5 October 2020 (UTC)

@MSGJ: Should have checked. Try /w/resources/src/mediawiki.icon/images/arrow-expanded.svg?d0685 and /w/resources/src/mediawiki.icon/images/arrow-collapsed-ltr.svg?40e9a. I'm not sure why query strings are necessary but I'm not going to test further on the point. --Izno (talk) 21:41, 5 October 2020 (UTC)

You have removed "-ltr" from the first icon. Is that deliberate? — Martin (MSGJ · talk) 09:06, 6 October 2020 (UTC)

Can you link to the change that moved these, would be good to get an explanation for the query string now. — xaosflux ^Talk 12:27, 6 October 2020 (UTC)

@Xaosflux: I'm just responding to the request that was left at WP:VPT##404 errors in collapsible navigation menus gadget need fixing and didn't look any further than to find the new directory location. It is loading as a result of a Less file where the query string is missing, so something in the compilation from Less to CSS, or delivery from there to the browser, adds the string. See the source. Maybe Volker or Jdlrobson or Krinkle will understand how or why it works that way. --Izno (talk) 15:16, 6 October 2020 (UTC)

@MSGJ: I copied those straight out of my browser dev tools (Firefox) that time. You may check that these exist directly at https://en.wikipedia.org/w/resources/src/mediawiki.icon/images/arrow-expanded.svg?d0685 and https://en.wikipedia.org/w/resources/src/mediawiki.icon/images/arrow-collapsed-ltr.svg?40e9a . I would guess a down arrow needs no left-to-right variant, so it makes sense 'ltr' would be removed. --Izno (talk) 15:16, 6 October 2020 (UTC)

 Done, but it still doesn't seem to be working :( — Martin (MSGJ · talk) 12:49, 9 October 2020 (UTC)

Update of code

It probably requires to be updated (doesn't collapse sections, at least for me), most likely with css (the current style used by sections, .vector-menu-portal h3: background-size: 100% 1px;, turns the collapse arrow into a line) using the working source code from the mw:Extension:CollapsibleVector (same base code)?

Village pump discussion MarMi wiki (talk) 13:26, 24 November 2021 (UTC)

js/css

I've just reworked the whole thing to use $.makeCollapsible, which is much simpler. .js:

// CC0

'use strict';

function onToggle( e ) {
	var collapsedIds = mw.storage.getObject( 'vector-nav-collapsed' ) || [],
		index = collapsedIds.indexOf( this.id );

	if ( e.type === 'afterExpand' ) {
		// Remove ID from array
		if ( index !== -1 ) {
			collapsedIds.splice( index, 1 );
		}

		if ( collapsedIds.length ) {
			mw.storage.setObject( 'vector-nav-collapsed', collapsedIds );
		} else {
			// Remove the data altogether if empty
			mw.storage.remove( 'vector-nav-collapsed' );
		}
	} else {
		if ( index === -1 ) {
			collapsedIds.push( this.id );
			mw.storage.setObject( 'vector-nav-collapsed', collapsedIds );
		}
	}
}

$( function () {
	var collapsedIds = mw.storage.getObject( 'vector-nav-collapsed' ) || [];

	$( '#mw-panel .vector-menu' )
		.addClass( 'collapsible-nav mw-collapsible' )
		.addClass( function () {
			if ( collapsedIds.indexOf( this.id ) !== -1 ) {
				return 'mw-collapsed';
			}
		} )
		.children( '.vector-menu-heading' )
			.addClass( 'mw-collapsible-toggle' )
			.end()
		.children( '.vector-menu-content' )
			.addClass( 'mw-collapsible-content' )
			.end()
		.makeCollapsible()
		.on( 'afterCollapse.mw-collapsible afterExpand.mw-collapsible', onToggle );
} );

.css:

.collapsible-nav > .mw-collapsible-toggle {
	float: none;
	cursor: pointer;
}

.collapsible-nav > .mw-collapsible-toggle::before {
	display: inline-block;
	width: 12px;
	content: url(/w/resources/src/mediawiki.icon/images/arrow-expanded.svg?d0685);
}

.collapsible-nav > .mw-collapsible-toggle-collapsed::before {
	content: url(/w/resources/src/mediawiki.icon/images/arrow-collapsed-ltr.svg?40e9a);
}

 Done Izno (talk) 22:05, 31 December 2021 (UTC)

dependencies

Additional dependencies are jquery.makeCollapsible and mediawiki.storage. You may test it as a user script by running

mw.loader.load( '//test.wikipedia.org/w/index.php?title=User:Nardog/CollapsibleNav.js&action=raw&ctype=text/javascript' );

I don't know if this faithfully recreates the previous behavior but I bet it's close looking at the code. Nardog (talk) 14:50, 24 November 2021 (UTC)

@Nardog: verify, this is what you want the dependencies updated to:

* CollapsibleNav[ResourceLoader|dependencies=jquery.cookie,jquery.makeCollapsible,mediawiki.storage|skins=vector]|CollapsibleNav.js|CollapsibleNav.css

? Thank you, — xaosflux ^Talk 16:22, 10 December 2021 (UTC)

jquery.cookie is no longer used so just * CollapsibleNav[ResourceLoader|dependencies=jquery.makeCollapsible,mediawiki.storage|skins=vector]|CollapsibleNav.js|CollapsibleNav.css will do. Nardog (talk) 16:52, 10 December 2021 (UTC)

@Xaosflux: Any reason for the delay? Nardog (talk) 05:38, 26 December 2021 (UTC)

Probably holiday AFKness, I'll update. Izno (talk) 21:57, 31 December 2021 (UTC)

@Nardog: Ok, so I replaced the entirety of the JS and CSS. Was that the intent? Izno (talk) 22:02, 31 December 2021 (UTC)

Yup, looks like that works. Izno (talk) 22:05, 31 December 2021 (UTC)

 Done Izno (talk) 22:05, 31 December 2021 (UTC)

Thank you! Nardog (talk) 02:24, 1 January 2022 (UTC)