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 d18a192..0e3e222 100644 (file)
--- 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 60edb56..2ba24e9 100644 (file)
--- 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 97b28ed..c07a593 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -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' ) );
        }
 
        /**

diff --git a/skins/vector/collapsibleNav.css b/skins/vector/collapsibleNav.css
new file mode 100644 (file)
index 0000000..02799d7
--- /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 (file)
index 0000000..67313c9
--- /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( $( '<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 ) );

diff --git a/skins/vector/images/arrow-collapsed-ltr.png b/skins/vector/images/arrow-collapsed-ltr.png
new file mode 100644 (file)
index 0000000..063ac6f
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 (file)
index 0000000..d0c4729
--- /dev/null
+++ b/skins/vector/images/arrow-collapsed-ltr.svg
@@ -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>

diff --git a/skins/vector/images/arrow-collapsed-rtl.png b/skins/vector/images/arrow-collapsed-rtl.png
new file mode 100644 (file)
index 0000000..c346218
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 (file)
index 0000000..8c5e04b
--- /dev/null
+++ b/skins/vector/images/arrow-collapsed-rtl.svg
@@ -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>

diff --git a/skins/vector/images/arrow-expanded.png b/skins/vector/images/arrow-expanded.png
new file mode 100644 (file)
index 0000000..0221028
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 (file)
index 0000000..60704d2
--- /dev/null
+++ b/skins/vector/images/arrow-expanded.svg
@@ -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>