Vector: Add navigation collapsing feature
* Moved from the Vector extension (removed there in I47950b5375cae38e2). * Removed bucket testing * Removed "new" version of collapsible nav (the language portal splitting feature) as it didn't seem to be active on any wikis. Can be revived later if considered useful still. * Killed the vector-collapsiblenav preference ** Usage on Wikimedia wikis: - 0.008% on en.wikipedia - 0.02% on de.wikipedia Bug: 46512 Change-Id: I87149d7e15931f02ab700164e9e1d3d707b5e6a5
This commit is contained in:
jrobson
Timo Tijhof
parent
3331aed4d1
commit
603e6589e7
11 changed files with 348 additions and 1 deletions
|
|
@ -478,6 +478,8 @@ changes to languages because of Bugzilla reports.
|
|||
module instead or base your skin on SkinTemplate.
|
||||
* (bug 49629) The hook ExtractThumbParamaters has been deprecated in favour
|
||||
of media handler overriding MediaHandler::parseParamString.
|
||||
* (bug 46512) The collapsibleNav feature from the Vector extension has been moved
|
||||
to the Vector skin in core.
|
||||
|
||||
== Compatibility ==
|
||||
|
||||
|
|
|
|||
|
|
@ -108,6 +108,25 @@ return array(
|
|||
'remoteBasePath' => $GLOBALS['wgStylePath'],
|
||||
'localBasePath' => $GLOBALS['wgStyleDirectory'],
|
||||
),
|
||||
'skins.vector.collapsibleNav' => array(
|
||||
'styles' => array(
|
||||
'vector/collapsibleNav.css',
|
||||
),
|
||||
'scripts' => array(
|
||||
'vector/collapsibleNav.js',
|
||||
),
|
||||
'messages' => array(
|
||||
'vector-collapsiblenav-more',
|
||||
),
|
||||
'dependencies' => array(
|
||||
'jquery.client',
|
||||
'jquery.cookie',
|
||||
'jquery.tabIndex',
|
||||
),
|
||||
'remoteBasePath' => $GLOBALS['wgStylePath'],
|
||||
'localBasePath' => $GLOBALS['wgStyleDirectory'],
|
||||
'position' => 'bottom',
|
||||
),
|
||||
|
||||
/* jQuery */
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ class SkinVector extends SkinTemplate {
|
|||
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
|
||||
);
|
||||
|
||||
$out->addModules( 'skins.vector.js' );
|
||||
$out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
94
skins/vector/collapsibleNav.css
Normal file
94
skins/vector/collapsibleNav.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
* Stylesheet for collapsible nav
|
||||
*/
|
||||
|
||||
#mw-panel.collapsible-nav .portal {
|
||||
/* @embed */
|
||||
background: url(images/portal-break.png) left top no-repeat;
|
||||
padding: 0.25em 0 !important;
|
||||
margin: -11px 9px 10px 11px;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal h3 {
|
||||
color: #4D4D4D;
|
||||
font-weight: normal;
|
||||
/* @embed */
|
||||
background: url(images/arrow-expanded.png) left center no-repeat;
|
||||
/* SVG support using a transparent gradient to guarantee cross-browser
|
||||
* compatibility (browsers able to understand gradient syntax support also SVG) */
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-expanded.svg);
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url(images/arrow-expanded.svg);
|
||||
padding: 4px 0 3px 1.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal h3:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal h3 a {
|
||||
color: #4D4D4D;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal .body {
|
||||
background-image: none !important;
|
||||
padding-top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal .body ul li {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
/* First */
|
||||
#mw-panel.collapsible-nav .portal.first h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal.first {
|
||||
background-image: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Persistent */
|
||||
|
||||
#mw-panel.collapsible-nav .portal.persistent .body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal.persistent h3 {
|
||||
background-image: none !important;
|
||||
padding-left: 0.7em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal.persistent .body {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Collapsed */
|
||||
|
||||
#mw-panel.collapsible-nav .portal.collapsed h3 {
|
||||
color: #0645AD;
|
||||
/* @embed */
|
||||
background: url(images/arrow-collapsed-ltr.png) left center no-repeat;
|
||||
/* SVG support using a transparent gradient to guarantee cross-browser
|
||||
* compatibility (browsers able to understand gradient syntax support also SVG) */
|
||||
/* @embed */
|
||||
background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-collapsed-ltr.svg);
|
||||
/* @embed */
|
||||
background-image: linear-gradient(transparent, transparent), url(images/arrow-collapsed-ltr.svg);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal.collapsed h3 a {
|
||||
color: #0645AD;
|
||||
}
|
||||
|
||||
#mw-panel.collapsible-nav .portal.collapsed h3:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
121
skins/vector/collapsibleNav.js
Normal file
121
skins/vector/collapsibleNav.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/**
|
||||
* Collapsible navigation for Vector
|
||||
*/
|
||||
( function ( mw, $ ) {
|
||||
'use strict';
|
||||
var map;
|
||||
|
||||
// Use the same function for all navigation headings - don't repeat
|
||||
function toggle( $element ) {
|
||||
$.cookie(
|
||||
'vector-nav-' + $element.parent().attr( 'id' ),
|
||||
$element.parent().is( '.collapsed' ),
|
||||
{ 'expires': 30, 'path': '/' }
|
||||
);
|
||||
$element
|
||||
.parent()
|
||||
.toggleClass( 'expanded' )
|
||||
.toggleClass( 'collapsed' )
|
||||
.find( '.body' )
|
||||
.slideToggle( 'fast' );
|
||||
}
|
||||
|
||||
/* Browser Support */
|
||||
|
||||
map = {
|
||||
// Left-to-right languages
|
||||
ltr: {
|
||||
// Collapsible Nav is broken in Opera < 9.6 and Konqueror < 4
|
||||
opera: [['>=', 9.6]],
|
||||
konqueror: [['>=', 4.0]],
|
||||
blackberry: false,
|
||||
ipod: false,
|
||||
iphone: false,
|
||||
ps3: false
|
||||
},
|
||||
// Right-to-left languages
|
||||
rtl: {
|
||||
opera: [['>=', 9.6]],
|
||||
konqueror: [['>=', 4.0]],
|
||||
blackberry: false,
|
||||
ipod: false,
|
||||
iphone: false,
|
||||
ps3: false
|
||||
}
|
||||
};
|
||||
if ( !$.client.test( map ) ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
$( function ( $ ) {
|
||||
var $headings, tabIndex;
|
||||
|
||||
/* General Portal Modification */
|
||||
|
||||
// Always show the first portal
|
||||
$( '#mw-panel > .portal:first' ).addClass( 'first persistent' );
|
||||
// Apply a class to the entire panel to activate styles
|
||||
$( '#mw-panel' ).addClass( 'collapsible-nav' );
|
||||
// Use cookie data to restore preferences of what to show and hide
|
||||
$( '#mw-panel > .portal:not(.persistent)' )
|
||||
.each( function ( i ) {
|
||||
var id = $(this).attr( 'id' ),
|
||||
state = $.cookie( 'vector-nav-' + id );
|
||||
// Add anchor tag to heading for better accessibility
|
||||
$( this ).find( 'h3' ).wrapInner( $( '<a href="#"></a>' ).click( false ) );
|
||||
// In the case that we are not showing the new version, let's show the languages by default
|
||||
if (
|
||||
state === 'true' ||
|
||||
( state === null && i < 1 ) ||
|
||||
( state === null && id === 'p-lang' )
|
||||
) {
|
||||
$(this)
|
||||
.addClass( 'expanded' )
|
||||
.removeClass( 'collapsed' )
|
||||
.find( '.body' )
|
||||
.hide() // bug 34450
|
||||
.show();
|
||||
} else {
|
||||
$(this)
|
||||
.addClass( 'collapsed' )
|
||||
.removeClass( 'expanded' );
|
||||
}
|
||||
// Re-save cookie
|
||||
if ( state !== null ) {
|
||||
$.cookie( 'vector-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } );
|
||||
}
|
||||
} );
|
||||
|
||||
/* Tab Indexing */
|
||||
|
||||
$headings = $( '#mw-panel > .portal:not(.persistent) > h3' );
|
||||
|
||||
// Get the highest tab index
|
||||
tabIndex = $( document ).lastTabIndex() + 1;
|
||||
|
||||
// Fix the search not having a tabindex
|
||||
$( '#searchInput' ).attr( 'tabindex', tabIndex++ );
|
||||
|
||||
// Make it keyboard accessible
|
||||
$headings.attr( 'tabindex', function () {
|
||||
return tabIndex++;
|
||||
});
|
||||
|
||||
// Toggle the selected menu's class and expand or collapse the menu
|
||||
$( '#mw-panel' )
|
||||
.delegate( '.portal:not(.persistent) > h3', 'keydown', function ( e ) {
|
||||
// Make the space and enter keys act as a click
|
||||
if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) {
|
||||
toggle( $(this) );
|
||||
}
|
||||
} )
|
||||
.delegate( '.portal:not(.persistent) > h3', 'mousedown', function ( e ) {
|
||||
if ( e.which !== 3 ) { // Right mouse click
|
||||
toggle( $(this) );
|
||||
$(this).blur();
|
||||
}
|
||||
return false;
|
||||
} );
|
||||
});
|
||||
|
||||
}( mediaWiki, jQuery ) );
|
||||
BIN
skins/vector/images/arrow-collapsed-ltr.png
Normal file
BIN
skins/vector/images/arrow-collapsed-ltr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
37
skins/vector/images/arrow-collapsed-ltr.svg
Normal file
37
skins/vector/images/arrow-collapsed-ltr.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
id="svg2">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(0,-1036.0288)"
|
||||
id="layer1">
|
||||
<path
|
||||
d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z"
|
||||
transform="matrix(0,-2.7307791,1.576616,0,0.05143855,1066.4148)"
|
||||
id="path2985"
|
||||
style="fill:#797979;fill-opacity:1;stroke:none" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
BIN
skins/vector/images/arrow-collapsed-rtl.png
Normal file
BIN
skins/vector/images/arrow-collapsed-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 B |
37
skins/vector/images/arrow-collapsed-rtl.svg
Normal file
37
skins/vector/images/arrow-collapsed-rtl.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
id="svg2">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(0,-1036.0288)"
|
||||
id="layer1">
|
||||
<path
|
||||
d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z"
|
||||
transform="matrix(0,2.7307791,-1.576616,0,15.948561,1021.6428)"
|
||||
id="path2985"
|
||||
style="fill:#797979;fill-opacity:1;stroke:none" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
BIN
skins/vector/images/arrow-expanded.png
Normal file
BIN
skins/vector/images/arrow-expanded.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 B |
37
skins/vector/images/arrow-expanded.svg
Normal file
37
skins/vector/images/arrow-expanded.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
id="svg2">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(0,-1036.3622)"
|
||||
id="layer1">
|
||||
<path
|
||||
d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z"
|
||||
transform="matrix(2.7307791,0,0,1.576616,-14.385956,1036.4136)"
|
||||
id="path2985"
|
||||
style="fill:#797979;fill-opacity:1;stroke:none" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
Loading…
Reference in a new issue