jenkins-bot has submitted this change and it was merged.
Change subject: Update to match changes done in vector, Split some code into
own js and less files.
......................................................................
Update to match changes done in vector, Split some code into own js and less
files.
Update js in metrolook and metrolook.search
Change-Id: Ia15ee72b5e5c1b3e6eca6b39f6919b6967672ac1
---
M SkinMetrolookHooks.php
A components/collapsibleNav.custom.less
M components/collapsibleNav.less
A js/collapsibleNav.custom.js
M js/collapsibleNav.js
M js/metrolook.js
M js/metrolook.search.js
M skin.json
R skinStyles/mediawiki.special.preferences.styles.less.less
9 files changed, 472 insertions(+), 398 deletions(-)
Approvals:
Paladox: Looks good to me, approved
jenkins-bot: Verified
diff --git a/SkinMetrolookHooks.php b/SkinMetrolookHooks.php
index f0c7951..74a099e 100644
--- a/SkinMetrolookHooks.php
+++ b/SkinMetrolookHooks.php
@@ -26,6 +26,22 @@
)
);
+ protected static $featurescustom = array(
+ 'collapsiblenav-custom' => array(
+ 'preferences' => array(
+ 'skinmetrolook-collapsiblenav-custom' => array(
+ 'type' => 'toggle',
+ 'label-message' =>
'skinmetrolook-collapsiblenav-preference',
+ 'section' =>
'rendering/advancedrendering',
+ ),
+ ),
+ 'requirements' => array(
+ 'skinmetrolook-collapsiblenav-custom' => true,
+ ),
+ 'modules' => array(
'skins.metrolook.collapsibleNav-custom' ),
+ )
+ );
+
/* Static Methods */
/**
@@ -38,7 +54,7 @@
* @return bool
*/
public static function isEnabled( $name ) {
- global $wgMetrolookFeatures, $wgUser;
+ global $wgMetrolookFeatures, $wgUser, $wgMetrolookSearchBar;
// Features with global set to true are always enabled
if ( !isset( $wgMetrolookFeatures[$name] ) ||
$wgMetrolookFeatures[$name]['global'] ) {
@@ -46,16 +62,30 @@
}
// Features with user preference control can have any number of
preferences
// to be specific values to be enabled
- if ( $wgMetrolookFeatures[$name]['user'] ) {
- if ( isset( self::$features[$name]['requirements'] ) ) {
- foreach (
self::$features[$name]['requirements'] as $requirement => $value ) {
- // Important! We really do want fuzzy
evaluation here
- if ( $wgUser->getOption( $requirement )
!= $value ) {
- return false;
+ if ( $wgMetrolookSearchBar ) {
+ if ( $wgMetrolookFeatures[$name]['user'] ) {
+ if ( isset(
self::$features[$name]['requirements'] ) ) {
+ foreach (
self::$features[$name]['requirements'] as $requirement => $value ) {
+ // Important! We really do want
fuzzy evaluation here
+ if ( $wgUser->getOption(
$requirement ) != $value ) {
+ return false;
+ }
}
}
+ return true;
}
- return true;
+ } else {
+ if ( $wgMetrolookFeatures[$name]['user'] ) {
+ if ( isset(
self::$featurescustom[$name]['requirements'] ) ) {
+ foreach (
self::$featurescustom[$name]['requirements'] as $requirement => $value ) {
+ // Important! We really do want
fuzzy evaluation here
+ if ( $wgUser->getOption(
$requirement ) != $value ) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
}
// Features controlled by $wgMetrolookFeatures with both global
and user
// set to false are awlways disabled
@@ -73,11 +103,21 @@
* @param $skin Skin current skin
*/
public static function beforePageDisplay( $out, $skin ) {
+ global $wgMetrolookSearchBar;
if ( $skin instanceof SkinMetrolook ) {
- // Add modules for enabled features
- foreach ( self::$features as $name => $feature ) {
- if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
- $out->addModules( $feature['modules'] );
+ if ( $wgMetrolookSearchBar ) {
+ // Add modules for enabled features
+ foreach ( self::$features as $name => $feature
) {
+ if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
+ $out->addModules(
$feature['modules'] );
+ }
+ }
+ } else {
+ // Add modules for enabled features
+ foreach ( self::$featurescustom as $name =>
$feature ) {
+ if ( isset( $feature['modules'] ) &&
self::isEnabled( $name ) ) {
+ $out->addModules(
$feature['modules'] );
+ }
}
}
}
@@ -93,15 +133,28 @@
* @param $defaultPreferences array list of default user preference
controls
*/
public static function getPreferences( $user, &$defaultPreferences ) {
- global $wgMetrolookFeatures;
+ global $wgMetrolookFeatures, $wgMetrolookSearchBar;
- foreach ( self::$features as $name => $feature ) {
- if (
- isset( $feature['preferences'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] ) ||
$wgMetrolookFeatures[$name]['user'] )
- ) {
- foreach ( $feature['preferences'] as $key =>
$options ) {
- $defaultPreferences[$key] = $options;
+ if ( $wgMetrolookSearchBar ) {
+ foreach ( self::$features as $name => $feature ) {
+ if (
+ isset( $feature['preferences'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] )
|| $wgMetrolookFeatures[$name]['user'] )
+ ) {
+ foreach ( $feature['preferences'] as
$key => $options ) {
+ $defaultPreferences[$key] =
$options;
+ }
+ }
+ }
+ } else {
+ foreach ( self::$featurescustom as $name => $feature ) {
+ if (
+ isset( $feature['preferences'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] )
|| $wgMetrolookFeatures[$name]['user'] )
+ ) {
+ foreach ( $feature['preferences'] as
$key => $options ) {
+ $defaultPreferences[$key] =
$options;
+ }
}
}
}
@@ -117,25 +170,34 @@
global $wgMetrolookFeatures;
$configurations = array();
- foreach ( self::$features as $name => $feature ) {
- if (
- isset( $feature['configurations'] ) &&
- ( !isset( $wgMetrolookFeatures[$name] ) ||
self::isEnabled( $name ) )
- ) {
- foreach ( $feature['configurations'] as
$configuration ) {
- global $$wgConfiguration;
- $configurations[$configuration] =
$$wgConfiguration;
+ if ( $wgMetrolookSearchBar ) {
+ foreach ( self::$features as $name => $feature ) {
+ if (
+ isset( $feature['configurations'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] )
|| self::isEnabled( $name ) )
+ ) {
+ foreach ( $feature['configurations'] as
$configuration ) {
+ global $$wgConfiguration;
+ $configurations[$configuration]
= $$wgConfiguration;
+ }
+ }
+ }
+ } else {
+ foreach ( self::$featurescustom as $name => $feature ) {
+ if (
+ isset( $feature['configurations'] ) &&
+ ( !isset( $wgMetrolookFeatures[$name] )
|| self::isEnabled( $name ) )
+ ) {
+ foreach ( $feature['configurations'] as
$configuration ) {
+ global $$wgConfiguration;
+ $configurations[$configuration]
= $$wgConfiguration;
+ }
}
}
}
if ( count( $configurations ) ) {
$vars = array_merge( $vars, $configurations );
}
-
- global $wgMetrolookMobile;
- $vars['wgMetrolook'] = array(
- 'mobile' => $wgMetrolookMobile,
- );
return true;
}
@@ -145,10 +207,17 @@
* @return bool
*/
public static function makeGlobalVariablesScript( &$vars ) {
+ global $wgMetrolookSearchBar;
// Build and export old-style wgMetrolookEnabledModules object
for back compat
$enabledModules = array();
- foreach ( self::$features as $name => $feature ) {
- $enabledModules[$name] = self::isEnabled( $name );
+ if ( $wgMetrolookSearchBar ) {
+ foreach ( self::$features as $name => $feature ) {
+ $enabledModules[$name] = self::isEnabled( $name
);
+ }
+ } else {
+ foreach ( self::$featurescustom as $name => $feature ) {
+ $enabledModules[$name] = self::isEnabled( $name
);
+ }
}
$vars['wgMetrolookEnabledModules'] = $enabledModules;
diff --git a/components/collapsibleNav.custom.less
b/components/collapsibleNav.custom.less
new file mode 100644
index 0000000..aae9b2b
--- /dev/null
+++ b/components/collapsibleNav.custom.less
@@ -0,0 +1,83 @@
+/**
+ * LESS Stylesheet for collapsible nav
+ */
+@import "../variables.less";
+@import "mediawiki.mixins.less";
+
+#mw-panel-custom.collapsible-nav {
+ .portal-custom {
+
+ h5 {
+ background-position: left center;
+ background-repeat: no-repeat;
+ .background-image-svg('../images/open.svg',
'../images/open.png');
+ padding: @collapsible-nav-heading-padding;
+ margin-left: -0.5em;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ a {
+ color: @collapsible-nav-heading-color;
+ text-decoration: none;
+ }
+ }
+
+ .body-custom {
+ margin: @collapsible-nav-body-margin;
+ background-image: none !important;
+ padding-top: 0;
+ display: none;
+
+ ul {
+ li {
+ padding: 0.25em 0;
+ }
+ }
+ }
+
+
+ /* First */
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h5 {
+ display: none;
+ }
+ }
+
+ /* Persistent */
+ &.persistent {
+ .body-custom {
+ display: block;
+ margin-left: 0.5em;
+ }
+
+ h5 {
+ background-image: none !important;
+ padding-left: 0.7em;
+ cursor: default;
+ }
+ }
+
+ /* Collapsed */
+ &.collapsed {
+ h5 {
+ color: @collapsible-nav-heading-collapsed-color;
+ background-position: left center;
+ background-repeat: no-repeat;
+
.background-image-svg('../images/closed-ltr.svg', '../images/closed-ltr.png');
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ a {
+ color:
@collapsible-nav-heading-collapsed-color;
+ }
+ }
+ }
+ }
+}
diff --git a/components/collapsibleNav.less b/components/collapsibleNav.less
index b5ce1ee..70e76c0 100644
--- a/components/collapsibleNav.less
+++ b/components/collapsibleNav.less
@@ -81,93 +81,3 @@
}
}
}
-
-
-/*
- *
- * Custom
- *
- *
- */
-
-/**
- * LESS Stylesheet for collapsible nav
- */
-
-#mw-panel-custom.collapsible-nav {
- .portal-custom {
-
- h5 {
- background-position: left center;
- background-repeat: no-repeat;
- .background-image-svg('../images/open.svg',
'../images/open.png');
- padding: @collapsible-nav-heading-padding;
- margin-left: -0.5em;
-
- &:hover {
- cursor: pointer;
- text-decoration: none;
- }
-
- a {
- color: @collapsible-nav-heading-color;
- text-decoration: none;
- }
- }
-
- .body-custom {
- margin: @collapsible-nav-body-margin;
- background-image: none !important;
- padding-top: 0;
- display: none;
-
- ul {
- li {
- padding: 0.25em 0;
- }
- }
- }
-
-
- /* First */
- &.first {
- background-image: none;
- margin-top: 0;
- h5 {
- display: none;
- }
- }
-
- /* Persistent */
- &.persistent {
- .body-custom {
- display: block;
- margin-left: 0.5em;
- }
-
- h5 {
- background-image: none !important;
- padding-left: 0.7em;
- cursor: default;
- }
- }
-
- /* Collapsed */
- &.collapsed {
- h5 {
- color: @collapsible-nav-heading-collapsed-color;
- background-position: left center;
- background-repeat: no-repeat;
-
.background-image-svg('../images/closed-ltr.svg', '../images/closed-ltr.png');
-
- &:hover {
- text-decoration: underline;
- }
-
- a {
- color:
@collapsible-nav-heading-collapsed-color;
- }
- }
- }
- }
-}
diff --git a/js/collapsibleNav.custom.js b/js/collapsibleNav.custom.js
new file mode 100644
index 0000000..03f33a0
--- /dev/null
+++ b/js/collapsibleNav.custom.js
@@ -0,0 +1,141 @@
+/**
+ * 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-custom' )
+ .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 */
+
+ // Apply a class to the entire panel to activate styles
+ $( '#mw-panel-custom' ).addClass( 'collapsible-nav' );
+ // Use cookie data to restore preferences of what to show and
hide
+ $( '#mw-panel-custom > .portal-custom: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( 'h5' ).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-custom' )
+ .hide() // bug 34450
+ .show();
+ $( this ).find( 'h5 > a' )
+ .attr( {
+ 'aria-pressed': 'true',
+ 'aria-expanded': 'true'
+ } );
+ } else {
+ $( this )
+ .addClass( 'collapsed' )
+ .removeClass( 'expanded' );
+ $( this ).find( 'h5 > 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-custom >
.portal-custom:not(.persistent) > h5' );
+
+ // Make it keyboard accessible
+ $headings.attr( 'tabindex', '0' );
+
+ // Toggle the selected menu's class and expand or collapse the
menu
+ $( '#mw-panel-custom' )
+ .delegate( '.portal-custom:not(.persistent) > h5',
'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-custom:not(.persistent) > h5',
'mousedown', function ( e ) {
+ if ( e.which !== 3 ) { // Right mouse click
+ toggle( $( this ) );
+ $( this ).blur();
+ }
+ return false;
+ } );
+ } );
+}( mediaWiki, jQuery ) );
diff --git a/js/collapsibleNav.js b/js/collapsibleNav.js
index 1899f20..8884734 100644
--- a/js/collapsibleNav.js
+++ b/js/collapsibleNav.js
@@ -139,152 +139,3 @@
} );
} );
}( mediaWiki, jQuery ) );
-
-/*
- *
- * Custom
- *
- *
- */
-
-/**
- * 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-custom' )
- .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 */
-
- // Apply a class to the entire panel to activate styles
- $( '#mw-panel-custom' ).addClass( 'collapsible-nav' );
- // Use cookie data to restore preferences of what to show and
hide
- $( '#mw-panel-custom > .portal-custom: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( 'h5' ).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-custom' )
- .hide() // bug 34450
- .show();
- $( this ).find( 'h5 > a' )
- .attr( {
- 'aria-pressed': 'true',
- 'aria-expanded': 'true'
- } );
- } else {
- $( this )
- .addClass( 'collapsed' )
- .removeClass( 'expanded' );
- $( this ).find( 'h5 > 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-custom >
.portal-custom:not(.persistent) > h5' );
-
- // Make it keyboard accessible
- $headings.attr( 'tabindex', '0' );
-
- // Toggle the selected menu's class and expand or collapse the
menu
- $( '#mw-panel-custom' )
- .delegate( '.portal-custom:not(.persistent) > h5',
'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-custom:not(.persistent) > h5',
'mousedown', function ( e ) {
- if ( e.which !== 3 ) { // Right mouse click
- toggle( $( this ) );
- $( this ).blur();
- }
- return false;
- } );
- } );
-}( mediaWiki, jQuery ) );
diff --git a/js/metrolook.js b/js/metrolook.js
index b80d681..da71120 100644
--- a/js/metrolook.js
+++ b/js/metrolook.js
@@ -1,96 +1,100 @@
-/* global $ */
-var openDiv;
-function toggleDiv( divID ) {
- $( '#' + divID ).fadeToggle( 150, function () {
- openDiv = $( this ).is( ':visible' ) ? divID : null;
- } );
-}
+( function ( $ ) {
+ $( function () {
+ var openDiv;
-$( document ).click( function ( e ) {
- if ( !$( e.target ).closest( '#' + openDiv ).length ) {
- toggleDiv( openDiv );
- }
-} );
+ function toggleDiv( divID ) {
+ $( '#' + divID ).fadeToggle( 150, function () {
+ openDiv = $( this ).is( ':visible' ) ? divID :
null;
+ } );
+ }
-function isTouchDevice() {
- return !!( 'ontouchstart' in window );
-}
-
-function isMobileUserAgent() {
- return !!(
/mobi|alcatel|Android|android|kindle|webOS|webos|iPhone|iPad|iPod|Tablet|PlayBook|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) );
-}
-
-$( function () {
- if ( isTouchDevice() && isMobileUserAgent() ) {
- $( '#usermenu > div' ).toggleClass( 'no-js js' );
- $( '#usermenu .js div' ).hide();
- $( '#usermenu .js' ).click( function ( e ) {
- $( '#usermenu .js div' ).fadeToggle( 150 );
- $( '#usermenu' ).toggleClass( 'active' );
- e.stopPropagation();
- } );
-
- $( '.actionmenu > div' ).toggleClass( 'no-js js' );
- $( '.actionmenu .js div' ).hide();
- $( '.actionmenu .js' ).click( function ( e ) {
- $( '.actionmenu .js div' ).fadeToggle( 150 );
- $( '.clicker' ).toggleClass( 'active' );
- e.stopPropagation();
- } );
-
- $( document ).click( function () {
- if ( $( '.actionmenu .js div' ).is( ':visible' ) ) {
- $( '.actionmenu .js div', this ).fadeOut( 150 );
- $( '.clicker' ).removeClass( 'active' );
- }
-
- if ( $( '#usermenu .js div' ).is( ':visible' ) ) {
- $( '#usermenu .js div', this ).fadeOut( 150 );
- $( '#usermenu' ).removeClass( 'active' );
+ $( document ).click( function ( e ) {
+ if ( !$( e.target ).closest( '#' + openDiv ).length ) {
+ toggleDiv( openDiv );
}
} );
- } // end mobile-only code
- $( '#hamburgerIcon' ).click( function ( e ) {
- $( '#mw-panel, #mw-panel-custom' ).fadeToggle( 150 );
- $( '.clicker' ).toggleClass( 'active' );
- if (
- $( '#mw-panel' ).is( ':visible' ) ||
- $( '#mw-panel-custom' ).is( ':visible' )
- ) {
- $( '#mw-panel, #mw-panel-custom', this ).fadeOut( 150 );
- $( '.clicker' ).removeClass( 'active' );
+ function isTouchDevice() {
+ return !!( 'ontouchstart' in window );
}
- e.stopPropagation();
- } );
- $( 'img.editbutton' ).click( function ( e ) {
- $( '#left-navigation' ).fadeToggle( 150 );
- $( '.clicker' ).toggleClass( 'active' );
- if ( $( '#left-navigation' ).is( ':visible' ) ) {
- $( '#left-navigation', this ).fadeOut( 150 );
- $( '.clicker' ).removeClass( 'active' );
+ function isMobileUserAgent() {
+ return !!(
/mobi|alcatel|Android|android|kindle|webOS|webos|iPhone|iPad|iPod|Tablet|PlayBook|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) );
}
- e.stopPropagation();
- } );
- $( 'img.downarrow' ).click( function ( e ) {
- toggleDiv( 'bartile' );
- if ( $( '#bartile' ).is( ':visible' ) ) {
- $( '#bartile', this ).fadeOut( 150 );
- $( '.clicker' ).removeClass( 'active' );
- }
- e.stopPropagation();
- } );
+ $( function () {
+ if ( isTouchDevice() && isMobileUserAgent() ) {
+ $( '#usermenu > div' ).toggleClass( 'no-js js'
);
+ $( '#usermenu .js div' ).hide();
+ $( '#usermenu .js' ).click( function ( e ) {
+ $( '#usermenu .js div' ).fadeToggle(
150 );
+ $( '#usermenu' ).toggleClass( 'active'
);
+ e.stopPropagation();
+ } );
- // Listen to clicks (taps on mobile) to the black bar and if it was
- // clicked/tapped (instead of an individual tile), dismiss the menu.
- // This improves usability especially on lower-end mobile devices with
- // smaller screens.
- // Fixes https://phabricator.wikimedia.org/T105785
- $( '#tilegroup' ).not( '.tile-wrapper' ).on( 'click', function () {
- if ( $( '#bartile' ).is( ':visible' ) ) {
- toggleDiv( 'bartile' );
- }
+ $( '.actionmenu > div' ).toggleClass( 'no-js
js' );
+ $( '.actionmenu .js div' ).hide();
+ $( '.actionmenu .js' ).click( function ( e ) {
+ $( '.actionmenu .js div' ).fadeToggle(
150 );
+ $( '.clicker' ).toggleClass( 'active' );
+ e.stopPropagation();
+ } );
+
+ $( document ).click( function () {
+ if ( $( '.actionmenu .js div' ).is(
':visible' ) ) {
+ $( '.actionmenu .js div', this
).fadeOut( 150 );
+ $( '.clicker' ).removeClass(
'active' );
+ }
+
+ if ( $( '#usermenu .js div' ).is(
':visible' ) ) {
+ $( '#usermenu .js div', this
).fadeOut( 150 );
+ $( '#usermenu' ).removeClass(
'active' );
+ }
+ } );
+ } // end mobile-only code
+
+ $( '#hamburgerIcon' ).click( function ( e ) {
+ $( '#mw-panel, #mw-panel-custom' ).fadeToggle(
150 );
+ $( '.clicker' ).toggleClass( 'active' );
+ if (
+ $( '#mw-panel' ).is( ':visible' ) ||
+ $( '#mw-panel-custom' ).is( ':visible' )
+ ) {
+ $( '#mw-panel, #mw-panel-custom', this
).fadeOut( 150 );
+ $( '.clicker' ).removeClass( 'active' );
+ }
+ e.stopPropagation();
+ } );
+
+ $( 'img.editbutton' ).click( function ( e ) {
+ $( '#left-navigation' ).fadeToggle( 150 );
+ $( '.clicker' ).toggleClass( 'active' );
+ if ( $( '#left-navigation' ).is( ':visible' ) )
{
+ $( '#left-navigation', this ).fadeOut(
150 );
+ $( '.clicker' ).removeClass( 'active' );
+ }
+ e.stopPropagation();
+ } );
+
+ $( 'img.downarrow' ).click( function ( e ) {
+ toggleDiv( 'bartile' );
+ if ( $( '#bartile' ).is( ':visible' ) ) {
+ $( '#bartile', this ).fadeOut( 150 );
+ $( '.clicker' ).removeClass( 'active' );
+ }
+ e.stopPropagation();
+ } );
+
+ // Listen to clicks (taps on mobile) to the black bar
and if it was
+ // clicked/tapped (instead of an individual tile),
dismiss the menu.
+ // This improves usability especially on lower-end
mobile devices with
+ // smaller screens.
+ // Fixes https://phabricator.wikimedia.org/T105785
+ $( '#tilegroup' ).not( '.tile-wrapper' ).on( 'click',
function () {
+ if ( $( '#bartile' ).is( ':visible' ) ) {
+ toggleDiv( 'bartile' );
+ }
+ } );
+ } );
} );
-} );
+}( jQuery ) );
diff --git a/js/metrolook.search.js b/js/metrolook.search.js
index 47b30e3..0c94afe 100644
--- a/js/metrolook.search.js
+++ b/js/metrolook.search.js
@@ -1,30 +1,33 @@
-/* global $ */
+( function ( $ ) {
+ $( function () {
-function isTouchDevice() {
- return !!( 'ontouchstart' in window );
-}
+ function isTouchDevice() {
+ return !!( 'ontouchstart' in window );
+ }
-/* This is here to fix js issue with iPad (all models) */
-$( function () {
- if ( isTouchDevice() ) {
- if (
/mobi|alcatel|Android|android|webOS|webos|iPhone|iPod|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) ) {
- $( '#p-search' ).hide();
- $( 'img.searchbar' ).click( function ( e ) {
- $( '#p-search' ).fadeToggle( 150 );
- $( '.clicker' ).toggleClass( 'active' );
- e.stopPropagation();
- } );
- $( 'img.searchbar' ).click( function () {
- if ( $( '#p-search' ).is( ':visible' ) ) {
- $( '#p-search', this ).fadeOut( 150 );
- $( '.clicker' ).removeClass( 'active' );
+ /* This is here to fix js issue with iPad (all models) */
+ $( function () {
+ if ( isTouchDevice() ) {
+ if (
/mobi|alcatel|Android|android|webOS|webos|iPhone|iPod|Wii|Silk|BlackBerry|playstation|phone|nintendo|htc[-_]|IEMobile|CriOS|Opera
Mini|opera.m|palm|panasonic|philips|samsung|Mobile|mobile/i.test(
navigator.userAgent ) ) {
+ $( '#p-search' ).hide();
+ $( 'img.searchbar' ).click( function (
e ) {
+ $( '#p-search' ).fadeToggle(
150 );
+ $( '.clicker' ).toggleClass(
'active' );
+ e.stopPropagation();
+ } );
+ $( 'img.searchbar' ).click( function ()
{
+ if ( $( '#p-search' ).is(
':visible' ) ) {
+ $( '#p-search', this
).fadeOut( 150 );
+ $( '.clicker'
).removeClass( 'active' );
+ }
+ } );
}
- } );
- }
- /* Fix search bar not showing on iPad */
- if ( /kindle|iPad|PlayBook|Tablet/i.test( navigator.userAgent )
) {
- $( '#p-search' ).show();
- }
- }
-} );
+ /* Fix search bar not showing on iPad */
+ if ( /kindle|iPad|PlayBook|Tablet/i.test(
navigator.userAgent ) ) {
+ $( '#p-search' ).show();
+ }
+ }
+ } );
+ } );
+}( jQuery ) );
diff --git a/skin.json b/skin.json
index 14eaa9c..5cfc8fc 100644
--- a/skin.json
+++ b/skin.json
@@ -97,6 +97,20 @@
"jquery.cookie",
"jquery.tabIndex"
]
+ },
+ "skins.metrolook.collapsibleNav-custom": {
+ "position": "bottom",
+ "scripts": [
+ "js/collapsibleNav.custom.js"
+ ],
+ "styles": [
+ "components/collapsibleNav.custom.less"
+ ],
+ "dependencies": [
+ "jquery.client",
+ "jquery.cookie",
+ "jquery.tabIndex"
+ ]
}
},
"ResourceFileModulePaths": {
@@ -127,7 +141,7 @@
"+mediawiki.sectionAnchor":
"skinStyles/mediawiki.sectionAnchor.less",
"ooui": "skinStyles/ooui.less",
"mediawiki.special":
"skinStyles/mediawiki.special.less",
- "mediawiki.special.preferences":
"skinStyles/mediawiki.special.preferences.less"
+ "+mediawiki.special.preferences.styles":
"skinStyles/mediawiki.special.preferences.styles.less"
}
},
"config": {
diff --git a/skinStyles/mediawiki.special.preferences.less
b/skinStyles/mediawiki.special.preferences.styles.less.less
similarity index 88%
rename from skinStyles/mediawiki.special.preferences.less
rename to skinStyles/mediawiki.special.preferences.styles.less.less
index c463718..310887d 100644
--- a/skinStyles/mediawiki.special.preferences.less
+++ b/skinStyles/mediawiki.special.preferences.styles.less.less
@@ -7,13 +7,13 @@
* howerver this would require backporting the other skins.
*/
-#preftoc {
+.client-js #preftoc {
/* Tabs */
width: 100%;
float: left;
clear: both;
- margin: 0 !important;
- padding: 0 !important;
+ margin: 0;
+ padding: 0;
.background-image('../images/preferences/break.png');
background-position: bottom left;
background-repeat: no-repeat;
@@ -43,7 +43,6 @@
background-position: bottom;
background-repeat: repeat-x;
color: #333;
- text-decoration: none;
}
}
}
@@ -65,7 +64,7 @@
}
}
-#preferences {
+.client-js #preferences {
float: left;
width: 100%;
margin: 0;
@@ -77,15 +76,15 @@
fieldset {
border: none;
border-top: solid 1px #ccc;
+ }
- &.prefsection {
- border: none;
- padding: 0;
- margin: 1em;
+ >fieldset {
+ border: none;
+ padding: 0;
+ margin: 1em;
- legend.mainLegend {
- display: none;
- }
+ >legend {
+ display: none;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/253913
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ia15ee72b5e5c1b3e6eca6b39f6919b6967672ac1
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: master
Gerrit-Owner: Paladox <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Paladox <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
