From: jrobson Date: Mon, 9 Sep 2013 23:49:39 +0000 (-0700) Subject: Vector: Add navigation collapsing feature X-Git-Tag: 1.31.0-rc.0~18632 X-Git-Url: http://git.cyclocoop.org/%22.%24redirect_annul.%22?a=commitdiff_plain;h=603e6589e7678be099cea50129fde9696ef48c8b;p=lhc%2Fweb%2Fwiklou.git 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 --- diff --git a/RELEASE-NOTES-1.22 b/RELEASE-NOTES-1.22 index d18a192294..0e3e222d36 100644 --- a/RELEASE-NOTES-1.22 +++ b/RELEASE-NOTES-1.22 @@ -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 == diff --git a/resources/Resources.php b/resources/Resources.php index 60edb56a22..2ba24e9576 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -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 */ diff --git a/skins/Vector.php b/skins/Vector.php index 97b28ed356..c07a593bdd 100644 --- a/skins/Vector.php +++ b/skins/Vector.php @@ -57,7 +57,7 @@ class SkinVector extends SkinTemplate { "/{$this->stylename}/csshover{$min}.htc\")}" ); - $out->addModules( 'skins.vector.js' ); + $out->addModules( array( 'skins.vector.js', 'skins.vector.collapsibleNav' ) ); } /** diff --git a/skins/vector/collapsibleNav.css b/skins/vector/collapsibleNav.css new file mode 100644 index 0000000000..02799d766f --- /dev/null +++ b/skins/vector/collapsibleNav.css @@ -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; +} diff --git a/skins/vector/collapsibleNav.js b/skins/vector/collapsibleNav.js new file mode 100644 index 0000000000..67313c95fb --- /dev/null +++ b/skins/vector/collapsibleNav.js @@ -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( $( '' ).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 ) ); diff --git a/skins/vector/images/arrow-collapsed-ltr.png b/skins/vector/images/arrow-collapsed-ltr.png new file mode 100644 index 0000000000..063ac6f7cd Binary files /dev/null and b/skins/vector/images/arrow-collapsed-ltr.png differ diff --git a/skins/vector/images/arrow-collapsed-ltr.svg b/skins/vector/images/arrow-collapsed-ltr.svg new file mode 100644 index 0000000000..d0c4729ceb --- /dev/null +++ b/skins/vector/images/arrow-collapsed-ltr.svg @@ -0,0 +1,37 @@ + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/skins/vector/images/arrow-collapsed-rtl.png b/skins/vector/images/arrow-collapsed-rtl.png new file mode 100644 index 0000000000..c34621824a Binary files /dev/null and b/skins/vector/images/arrow-collapsed-rtl.png differ diff --git a/skins/vector/images/arrow-collapsed-rtl.svg b/skins/vector/images/arrow-collapsed-rtl.svg new file mode 100644 index 0000000000..8c5e04b956 --- /dev/null +++ b/skins/vector/images/arrow-collapsed-rtl.svg @@ -0,0 +1,37 @@ + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/skins/vector/images/arrow-expanded.png b/skins/vector/images/arrow-expanded.png new file mode 100644 index 0000000000..0221028efd Binary files /dev/null and b/skins/vector/images/arrow-expanded.png differ diff --git a/skins/vector/images/arrow-expanded.svg b/skins/vector/images/arrow-expanded.svg new file mode 100644 index 0000000000..60704d27b1 --- /dev/null +++ b/skins/vector/images/arrow-expanded.svg @@ -0,0 +1,37 @@ + + + + + + + + + image/svg+xml + + + + + + + + +