Paladox has uploaded a new change for review.
https://gerrit.wikimedia.org/r/190717
Change subject: Add collapsiblenav back
......................................................................
Add collapsiblenav back
* This brings back colapsiblenav back but with support for disabling it through
setting.
* New setting $wgIncludeCollapsibleNav it is off by default to save performance.
Change-Id: I7b9ff7c95ddf9adbced35e12eb91e69c6f9b59d8
---
M SkinVector.php
M Vector.php
A collapsibleNav.js.js
A components/collapsibleNav.less.less
M components/navigation.less
M variables.less
6 files changed, 265 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Vector
refs/changes/17/190717/1
diff --git a/SkinVector.php b/SkinVector.php
index f5e3634..7cf21e3 100644
--- a/SkinVector.php
+++ b/SkinVector.php
@@ -56,7 +56,14 @@
"/{$this->stylename}/csshover{$min}.htc\")}</style><![endif]-->"
);
- $out->addModules( array( 'skins.vector.js' ) );
+ $out->addModules( ( $GLOBALS['wgIncludeCollapsibleNav'] ?
+ array(
+ 'skins.vector.js',
+ 'skins.vector.collapsibleNav',
+ ) :
+ array(
+ 'skins.vector.js',
+ )));
}
/**
diff --git a/Vector.php b/Vector.php
index 2a344a6..703bc0d 100644
--- a/Vector.php
+++ b/Vector.php
@@ -58,6 +58,13 @@
*/
$GLOBALS['wgVectorUseIconWatch'] = true;
+/**
+ * Adding an option to enable or disable collasibleNav.
+ * False by default because it is to save performance.
+ */
+
+$GLOBALS['wgIncludeCollapsibleNav'] = false;
+
// Register modules
$GLOBALS['wgResourceModules']['skins.vector.styles'] = array(
'styles' => array(
@@ -82,6 +89,23 @@
'localBasePath' => __DIR__,
);
+$GLOBALS['wgResourceModules']['skins.vector.collapsibleNav'] = array(
+ 'scripts' => array(
+ 'collapsibleNav.js',
+ ),
+ 'messages' => array(
+ 'vector-collapsiblenav-more',
+ ),
+ 'dependencies' => array(
+ 'jquery.client',
+ 'jquery.cookie',
+ 'jquery.tabIndex',
+ ),
+ 'remoteSkinPath' => 'Vector',
+ 'localBasePath' => __DIR__,
+ 'position' => 'bottom',
+);
+
// Apply module customizations
$GLOBALS['wgResourceModuleSkinStyles']['vector'] = array(
'jquery.tipsy' => 'skinStyles/jquery.tipsy.less',
diff --git a/collapsibleNav.js.js b/collapsibleNav.js.js
new file mode 100644
index 0000000..0d5c0cc
--- /dev/null
+++ b/collapsibleNav.js.js
@@ -0,0 +1,144 @@
+/**
+ * Collapsible navigation for Vector
+ */
+( function ( mw, $ ) {
+ 'use strict';
+ var map;
+
+ // Use the same function for all navigation headings - don't repeat
+ function toggle( $element ) {
+ var isCollapsed = $element.parent().is( '.collapsed' );
+
+ $.cookie(
+ 'vector-nav-' + $element.parent().attr( 'id' ),
+ isCollapsed,
+ { 'expires': 30, 'path': '/' }
+ );
+
+ $element
+ .parent()
+ .toggleClass( 'expanded' )
+ .toggleClass( 'collapsed' )
+ .find( '.body' )
+ .slideToggle( 'fast' );
+ isCollapsed = !isCollapsed;
+
+ $element
+ .find( '> a' )
+ .attr( {
+ 'aria-pressed': isCollapsed ? 'false' : 'true',
+ 'aria-expanded': isCollapsed ? 'false' : 'true'
+ } );
+ }
+
+ /* 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: [['>=', 6]],
+ iphone: [['>=', 6]],
+ ps3: false
+ },
+ // Right-to-left languages
+ rtl: {
+ opera: [['>=', 9.6]],
+ konqueror: [['>=', 4.0]],
+ blackberry: false,
+ ipod: [['>=', 6]],
+ iphone: [['>=', 6]],
+ ps3: false
+ }
+ };
+ if ( !$.client.test( map ) ) {
+ return true;
+ }
+
+ $( function ( $ ) {
+ var $headings;
+
+ /* 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 );
+ $(this).find( 'ul:first' ).attr( 'id', id +
'-list' );
+ // Add anchor tag to heading for better
accessibility
+ $( this ).find( 'h3' ).wrapInner(
+ $( '<a>' )
+ .attr( {
+ href: '#',
+ 'aria-haspopup': 'true',
+ 'aria-controls': id +
'-list',
+ role: 'button'
+ } )
+ .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();
+ $(this).find( 'h3 > a' )
+ .attr( {
+ 'aria-pressed': 'true',
+ 'aria-expanded': 'true'
+ } );
+ } else {
+ $(this)
+ .addClass( 'collapsed' )
+ .removeClass( 'expanded' );
+ $(this).find( 'h3 > a' )
+ .attr( {
+ 'aria-pressed': 'false',
+ 'aria-expanded': 'false'
+ } );
+ }
+ // 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' );
+
+ // Make it keyboard accessible
+ $headings.attr( 'tabindex', '0' );
+
+ // 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/components/collapsibleNav.less.less
b/components/collapsibleNav.less.less
new file mode 100644
index 0000000..7a25e6b
--- /dev/null
+++ b/components/collapsibleNav.less.less
@@ -0,0 +1,81 @@
+/**
+ * LESS Stylesheet for collapsible nav
+ */
+@import "mediawiki.mixins.less";
+
+#mw-panel.collapsible-nav {
+ .portal {
+
+ h3 {
+ background-position: left center;
+ background-repeat: no-repeat;
+ .background-image-svg('images/arrow-expanded.svg',
'images/arrow-expanded.png');
+ padding: 4px 0 3px 1.5em;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ a {
+ color: #4d4d4d;
+ text-decoration: none;
+ }
+ }
+
+ .body {
+ margin: 0 0 0 1.25em;
+ background-image: none !important;
+ padding-top: 0;
+ display: none;
+
+ ul {
+ li {
+ padding: 0.25em 0;
+ }
+ }
+ }
+
+
+ /* First */
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h3 {
+ display: none;
+ }
+ }
+
+ /* Persistent */
+ &.persistent {
+ .body {
+ display: block;
+ margin-left: 0.5em;
+ }
+
+ h3 {
+ background-image: none !important;
+ padding-left: 0.7em;
+ cursor: default;
+ }
+ }
+
+ /* Collapsed */
+ &.collapsed {
+ h3 {
+ color: #0645ad;
+ background-position: left center;
+ background-repeat: no-repeat;
+
.background-image-svg('images/arrow-collapsed-ltr.svg',
'images/arrow-collapsed-ltr.png');
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ a {
+ color: #0645ad;
+ }
+ }
+ }
+ }
+}
diff --git a/components/navigation.less b/components/navigation.less
index e9c5e4a..e9b23c7 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -1,5 +1,6 @@
@import "mediawiki.mixins";
@import "personalMenu";
+@import "collapsibleNav";
@import "search";
@import "tabs";
diff --git a/variables.less b/variables.less
index b17d15c..e1508a1 100644
--- a/variables.less
+++ b/variables.less
@@ -37,3 +37,10 @@
// Personal menu
@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #4d4d4d;
+@collapsible-nav-heading-collapsed-color: #0645ad;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;
--
To view, visit https://gerrit.wikimedia.org/r/190717
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7b9ff7c95ddf9adbced35e12eb91e69c6f9b59d8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Vector
Gerrit-Branch: master
Gerrit-Owner: Paladox <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
