Bmansurov has uploaded a new change for review.
https://gerrit.wikimedia.org/r/207005
Change subject: Alpha: Show the main menu without a page reload when JavaScript
is enabled
......................................................................
Alpha: Show the main menu without a page reload when JavaScript is enabled
Bug: T96172
Change-Id: I176125560f110575dd0fba4a299c11bd88f9d33f
---
M includes/skins/MinervaTemplateAlpha.php
M javascripts/Skin.js
M javascripts/modules/mainMenu/MainMenu.js
M javascripts/modules/mainMenu/init.js
R less/images/magnifying-glass-gray.svg
M less/modules/search/SearchOverlay.less
M less/specials/mobilemenu.less
M less/ui.less
8 files changed, 112 insertions(+), 83 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/05/207005/1
diff --git a/includes/skins/MinervaTemplateAlpha.php
b/includes/skins/MinervaTemplateAlpha.php
index 655533b..5a1f24d 100644
--- a/includes/skins/MinervaTemplateAlpha.php
+++ b/includes/skins/MinervaTemplateAlpha.php
@@ -98,7 +98,7 @@
);
} else {
$args += array(
- 'mobileMenuClass' => MobileUI::iconClass(
'search' ),
+ 'mobileMenuClass' => MobileUI::iconClass(
'search', 'element', 'header-icon' ),
'mobileMenuLink' => SpecialPage::getTitleFor(
'MobileMenu' )->getLocalUrl(),
'mobileMenuTitle' => wfMessage(
'mobile-frontend-main-menu' )->parse(),
'searchInputClass' => 'hidden',
@@ -146,51 +146,68 @@
echo $data['secondaryButton'];
}
+ /**
+ * @inheritdoc
+ * @param array $data
+ */
protected function renderMainMenu( $data ) {
- $class = $this->isSpecialMobileMenuPage ? '' : ' hidden';
-
- ?>
- <nav class="<?php echo $class; ?>">
- <?php
- $this->renderMainMenuItems();
- ?>
- </nav>
- <?php
+ // Only add attributes if the page is not Special:MobileMenu
because
+ // on that page the menu is inside the content of the page, and
not
+ // inside the navigation drawer.
+ if ( $this->isSpecialMobileMenuPage ) {
+ echo '<nav>';
+ } else {
+ echo '<nav id="mw-mf-page-left"
class="navigation-drawer">';
+ // Also add the search form on top of the menu on
non-Special:MobileMenu pages
+ echo '<div class="header">' . $this->makeSearchForm(
$data ) . '</div>';
+ }
+ $this->renderMainMenuItems();
+ echo '</nav>';
}
/**
* Renders the page.
- *
- * The menu is included and hidden by default.
+ * If the page is the Special:MobileMenu page then renders the header
on top of the menu.
+ * Otherwise uses the parent::render function to render the page.
*
* @param array $data Data used to build the page
*/
protected function render( $data ) {
- echo $data[ 'headelement' ];
- ?>
- <div id="mw-mf-viewport">
- <div class="header">
- <?php $this->renderHeader( $data ); ?>
- </div>
- <?php $this->renderMainMenu( $data ); ?>
- <div id="mw-mf-page-center">
- <?php
- foreach ( $this->data['banners'] as $banner ) {
- echo $banner;
- }
- ?>
- <div id="content_wrapper">
- <?php $this->renderContentWrapper(
$data ); ?>
+ if ( $this->isSpecialMobileMenuPage ) {
+ echo $data[ 'headelement' ];
+ ?>
+ <div id="mw-mf-viewport">
+ <div id="mw-mf-page-center">
+ <?php
+ foreach ( $this->data['banners'] as
$banner ){
+ echo $banner;
+ }
+ ?>
+ <div class="header">
+ <?php
+ $this->renderHeader( $data );
+ ?>
+ </div>
+ <div id="content_wrapper">
+ <?php
+ $this->renderMainMenu( $data );
+ $this->renderContentWrapper(
$data );
+ ?>
+ </div>
+ <?php
+ $this->renderFooter( $data );
+ ?>
</div>
- <?php $this->renderFooter( $data ); ?>
</div>
- </div>
- <?php
- echo $data['reporttime'];
- echo $data['bottomscripts'];
- ?>
- </body>
- </html>
- <?php
+ <?php
+ echo $data['reporttime'];
+ echo $data['bottomscripts'];
+ ?>
+ </body>
+ </html>
+ <?php
+ } else {
+ parent::render( $data );
+ }
}
}
diff --git a/javascripts/Skin.js b/javascripts/Skin.js
index 0ec4ca5..fba5793 100644
--- a/javascripts/Skin.js
+++ b/javascripts/Skin.js
@@ -39,7 +39,7 @@
* @private
*/
_onPageCenterClick: function ( ev ) {
- if ( ev.target.id !== 'mw-mf-main-menu-button' &&
this.mainMenu.isOpen() ) {
+ if ( this.mainMenu.isOpen() ) {
this.mainMenu.closeNavigationDrawers();
ev.preventDefault();
}
diff --git a/javascripts/modules/mainMenu/MainMenu.js
b/javascripts/modules/mainMenu/MainMenu.js
index e64d644..f475715 100644
--- a/javascripts/modules/mainMenu/MainMenu.js
+++ b/javascripts/modules/mainMenu/MainMenu.js
@@ -16,8 +16,7 @@
* @cfg {String} defaults.mainMenuButton Selector for the main
menu button
*/
defaults: {
- el: '#mw-mf-page-left',
- mainMenuButton: '#mw-mf-main-menu-button'
+ el: '#mw-mf-page-left'
},
/**
* Turn on event logging on the existing main menu by reading
`event-name` data
@@ -45,14 +44,20 @@
}
// Listen to the main menu button clicks
- $( this.options.mainMenuButton ).off( 'click' ).on(
'click', function ( ev ) {
- if ( self.isOpen() ) {
- self.closeNavigationDrawers();
- } else {
- self.openNavigationDrawer();
- }
- ev.preventDefault();
- } );
+ // The second and third selectors are for alpha
+ $( '#mw-mf-main-menu-button, .header .header-icon,
.header .header-title' )
+ // see modules/mainMenu/init.js
+ .off( 'click' )
+ .on( 'click', function ( ev ) {
+ if ( self.isOpen() ) {
+ self.closeNavigationDrawers();
+ } else {
+ self.openNavigationDrawer();
+ }
+ ev.preventDefault();
+ // Stop propagation, otherwise the Skin
will close the open menus on page center click
+ ev.stopPropagation();
+ } );
// FIXME: Remove all of the below when cache cleared
and mw-ui-icon used everywhere.
this.$( '.icon-text' ).addClass( 'mw-ui-icon-before'
).removeClass( 'icon-text mw-ui-icon-before' );
diff --git a/javascripts/modules/mainMenu/init.js
b/javascripts/modules/mainMenu/init.js
index 692f2c8..85ae77b 100644
--- a/javascripts/modules/mainMenu/init.js
+++ b/javascripts/modules/mainMenu/init.js
@@ -5,16 +5,19 @@
M.on( 'header-loaded', function () {
// Render MainMenu when needed
- $( '#mw-mf-main-menu-button' ).on( 'click', function ( ev ) {
- ev.preventDefault();
- mainMenu = new MainMenu();
- mainMenu.openNavigationDrawer();
- } );
+ // The second and third selectors are for alpha
+ $( '#mw-mf-main-menu-button, .header .header-icon, .header
.header-title' )
+ .on( 'click', function ( ev ) {
+ ev.preventDefault();
+ mainMenu = new MainMenu();
+ mainMenu.openNavigationDrawer();
+ } );
// "The back icon takes the user back to the previous page they
were on.". See
// https://trello.com/c/Isf8stWH/1-5-new-mobile-menu-page.
if ( isAlpha ) {
- $( '.header .back' ).on( 'click', function ( ev ) {
+ // Should only apply to the headers in the page center
+ $( '#mw-mf-page-center' ).find( '.header .back' ).on(
'click', function ( ev ) {
ev.preventDefault();
window.history.back();
diff --git a/less/specials/images/magnifying-glass-gray.svg
b/less/images/magnifying-glass-gray.svg
similarity index 100%
rename from less/specials/images/magnifying-glass-gray.svg
rename to less/images/magnifying-glass-gray.svg
diff --git a/less/modules/search/SearchOverlay.less
b/less/modules/search/SearchOverlay.less
index 150ed17..0909881 100644
--- a/less/modules/search/SearchOverlay.less
+++ b/less/modules/search/SearchOverlay.less
@@ -86,5 +86,9 @@
.alpha {
.search-overlay {
background: white;
+ .overlay-header-container.position-fixed {
+ // Search Overlay will show when the main menu is open
+ transform: none;
+ }
}
}
diff --git a/less/specials/mobilemenu.less b/less/specials/mobilemenu.less
index 45e5663..7ca704c 100644
--- a/less/specials/mobilemenu.less
+++ b/less/specials/mobilemenu.less
@@ -16,36 +16,6 @@
}
}
-.client-js {
- .alpha {
- .search-box {
- .search {
- border: none;
- box-shadow: none;
- padding: 0 0 0 25px;
- .background-image-svg(
'images/magnifying-glass-gray.svg', '' );
- background-repeat: no-repeat;
- height: 22px;
-
- // Overwrite mw-ui-input style
- // Placeholder text styling must be set
individually for each browser @winter
- &::-webkit-input-placeholder { // webkit
- font-style: normal;
- }
- &::-moz-placeholder { // FF 4-18
- font-style: normal;
- }
- &:-moz-placeholder { // FF >= 19
- font-style: normal;
- }
- &:-ms-input-placeholder { // IE >= 10
- font-style: normal;
- }
- }
- }
- }
-}
-
.client-nojs {
#mw-mf-page-left {
ul li a {
diff --git a/less/ui.less b/less/ui.less
index fb91c1e..3d164be 100644
--- a/less/ui.less
+++ b/less/ui.less
@@ -122,6 +122,36 @@
}
/* Search */
+.client-js {
+ .alpha {
+ // this is used both in Special:MobileMenu and non
Special:MobileMenu pages
+ .search-box {
+ .search {
+ border: none;
+ box-shadow: none;
+ padding: 0 0 0 25px;
+ .background-image-svg(
'images/magnifying-glass-gray.svg', '' );
+ background-repeat: no-repeat;
+ height: 22px;
+
+ // Overwrite mw-ui-input style
+ // Placeholder text styling must be set
individually for each browser @winter
+ &::-webkit-input-placeholder { // webkit
+ font-style: normal;
+ }
+ &::-moz-placeholder { // FF 4-18
+ font-style: normal;
+ }
+ &:-moz-placeholder { // FF >= 19
+ font-style: normal;
+ }
+ &:-ms-input-placeholder { // IE >= 10
+ font-style: normal;
+ }
+ }
+ }
+ }
+}
.client-use-basic-search,
.client-nojs {
--
To view, visit https://gerrit.wikimedia.org/r/207005
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I176125560f110575dd0fba4a299c11bd88f9d33f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
