mediawiki-skins-Vector/includes/SkinVector.php
jdlrobson 13de4ff225 Prepare for updated mw-ui-icon implementation in Vector
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.

This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.

Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
2021-07-20 18:52:40 +00:00

574 lines
19 KiB
PHP

<?php
/**
* Vector - Modern version of MonoBook with fresh look and many usability
* improvements.
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along
* with this program; if not, write to the Free Software Foundation, Inc.,
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* http://www.gnu.org/copyleft/gpl.html
*
* @file
* @ingroup Skins
*/
use MediaWiki\MediaWikiServices;
use Vector\Constants;
use Vector\VectorServices;
/**
* Skin subclass for Vector
* @ingroup Skins
* Skins extending SkinVector are not supported
* @package Vector
* @internal
*/
class SkinVector extends SkinMustache {
/** @var null|array for caching purposes */
private $languages;
/** @var int */
private const MENU_TYPE_DEFAULT = 0;
/** @var int */
private const MENU_TYPE_TABS = 1;
/** @var int */
private const MENU_TYPE_DROPDOWN = 2;
private const MENU_TYPE_PORTAL = 3;
/**
* T243281: Code used to track clicks to opt-out link.
*
* The "vct" substring is used to describe the newest "Vector" (non-legacy)
* feature. The "w" describes the web platform. The "1" describes the version
* of the feature.
*
* @see https://wikitech.wikimedia.org/wiki/Provenance
* @var string
*/
private const OPT_OUT_LINK_TRACKING_CODE = 'vctw1';
/**
* Whether or not the legacy version of the skin is being used.
*
* @return bool
*/
private function isLegacy() : bool {
$isLatestSkinFeatureEnabled = MediaWikiServices::getInstance()
->getService( Constants::SERVICE_FEATURE_MANAGER )
->isFeatureEnabled( Constants::FEATURE_LATEST_SKIN );
return !$isLatestSkinFeatureEnabled;
}
/**
* Overrides template, styles and scripts module when skin operates
* in legacy mode.
*
* @inheritDoc
* @param array|null $options Note; this param is only optional for internal purpose.
* Do not instantiate Vector, use SkinFactory to create the object instead.
* If you absolutely must to, this paramater is required; you have to provide the
* skinname with the `name` key. That's do it with `new SkinVector( ['name' => 'vector'] )`.
* Failure to do that, will lead to fatal exception.
*/
public function __construct( $options = [] ) {
if ( $this->isLegacy() ) {
$options['scripts'] = [ 'skins.vector.legacy.js' ];
$options['styles'] = [ 'skins.vector.styles.legacy' ];
$options['template'] = 'skin-legacy';
} else {
// For historic reasons, the viewport is added when Vector is loaded on the mobile
// domain. This is only possible for 3rd parties or by useskin parameter as there is
// no preference for changing mobile skin.
$responsive = $this->getConfig()->get( 'VectorResponsive' );
if ( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
$mobFrontContext = MediaWikiServices::getInstance()->getService( 'MobileFrontend.Context' );
if ( $mobFrontContext->shouldDisplayMobileView() ) {
$responsive = true;
}
}
$options['responsive'] = $responsive;
if ( $this->shouldConsolidateUserLinks() ) {
$options['link'] = [ 'text-wrapper' => [ 'tag' => 'span' ] ];
}
}
$options['templateDirectory'] = __DIR__ . '/templates';
parent::__construct( $options );
}
/**
* Calls getLanguages with caching.
* @return array
*/
private function getLanguagesCached() : array {
if ( $this->languages !== null ) {
return $this->languages;
}
$this->languages = $this->getLanguages();
return $this->languages;
}
/**
* This should be upstreamed to the Skin class in core once the logic is finalized.
* Returns false if the page is a special page without any languages, or if an action
* other than view is being used.
* @return bool
*/
private function canHaveLanguages() : bool {
$action = Action::getActionName( $this->getContext() );
if ( $action !== 'view' ) {
return false;
}
$title = $this->getTitle();
// Defensive programming - if a special page has added languages explicitly, best to show it.
if ( $title && $title->isSpecialPage() && empty( $this->getLanguagesCached() ) ) {
return false;
}
return true;
}
/**
* @return bool
*/
private function isLanguagesInHeader() {
$featureManager = VectorServices::getFeatureManager();
// Disable button on pages without languages (based on Wikibase RepoItemLinkGenerator class)
return $this->canHaveLanguages() && $featureManager->isFeatureEnabled(
Constants::FEATURE_LANGUAGE_IN_HEADER
);
}
/**
* If in modern Vector and no languages possible, OR the languages in header button
* is enabled but language array is empty, then we shouldn't show the langauge list.
* @return bool
*/
private function shouldHideLanguages() {
return !$this->isLegacy() &&
!$this->canHaveLanguages() ||
// NOTE: T276950 - This should be revisited when an empty state for the language button is chosen.
( $this->isLanguagesInHeader() && empty( $this->getLanguagesCached() ) );
}
/**
* If in modern Vector and the config is set to consolidate user links, enable user link consolidation.
* @return bool
*/
private function shouldConsolidateUserLinks() {
$featureManager = VectorServices::getFeatureManager();
return !$this->isLegacy() &&
$featureManager->isFeatureEnabled(
Constants::FEATURE_CONSOLIDATE_USER_LINKS
);
}
/**
* Returns HTML for the create account button inside the anon user links
* @param string[] $returnto array of query strings used to build the login link
* @return string
*/
private function getCreateAccountHTML( $returnto ) {
$createAccountData = $this->buildCreateAccountData( $returnto );
$createAccountData['single-id'] = 'pt-createaccount';
$createAccountData['class'] = 'mw-ui-button mw-ui-quiet';
$htmlCreateAccount = $this->makeLink( 'create-account', $createAccountData );
return $htmlCreateAccount;
}
/**
* Returns HTML for the login button and learn more link inside the anon user menu
* @param string[] $returnto array of query strings used to build the login link
* @param bool $useCombinedLoginLink if a combined login/signup link will be used
* @return string
*/
private function getLoginHTML( $returnto, $useCombinedLoginLink ) {
// 'single-id' must be provided for `makeLink` to populate `title`, `accesskey` and other attributes
$loginData = $this->buildLoginData( $returnto, $useCombinedLoginLink );
$loginData['single-id'] = 'pt-login';
$loginData['class'] = [
'vector-menu-content-item',
'mw-ui-icon mw-ui-icon-before',
'mw-ui-icon-wikimedia-' . ( $loginData[ 'icon' ] ?? '' )
];
$learnMoreLinkData = [
'text' => $this->msg( 'vector-anon-user-menu-pages-learn' )->text(),
'href' => Title::newFromText( 'Help:Introduction' )->getLocalURL(),
];
$learnMoreLink = $this->makeLink( '', $learnMoreLinkData );
$templateParser = $this->getTemplateParser();
return $templateParser->processTemplate( 'UserLinks__login', [
'htmlLogin' => $this->makeLink( 'login', $loginData ),
'msgLearnMore' => $this->msg( 'vector-anon-user-menu-pages' ),
'htmlLearnMoreLink' => $this->msg( 'parentheses' )->
rawParams( $learnMoreLink )->
escaped()
] );
}
/**
* Returns HTML for the logout button that should be placed in the user (personal) menu
* after the menu itself.
* @return string
*/
private function getLogoutHTML() {
$logoutLinkData = $this->buildLogoutLinkData();
$templateParser = $this->getTemplateParser();
$logoutLinkData['class'] = [
'vector-menu-content-item',
'mw-ui-icon mw-ui-icon-before',
'mw-ui-icon-wikimedia-' . ( $logoutLinkData[ 'icon' ] ?? '' )
];
return $templateParser->processTemplate( 'UserLinks__logout', [
'htmlLogout' => $this->makeLink( 'logout', $logoutLinkData )
] );
}
/**
* Returns template data for UserLinks.mustache
* @param array $menuData existing menu template data to be transformed and copied for UserLinks
* @param bool $isAnon if the user is logged out, used to conditionally provide data
* @param array $searchBoxData representing search box.
* @return array
*/
private function getUserLinksTemplateData( $menuData, $isAnon, $searchBoxData ) : array {
$returnto = $this->getReturnToParam();
$useCombinedLoginLink = $this->useCombinedLoginLink();
$htmlCreateAccount = $this->getCreateAccountHTML( $returnto );
$templateParser = $this->getTemplateParser();
$userMoreHtmlItems = $templateParser->processTemplate( 'UserLinks__more', [
'is-anon' => $isAnon,
'html-create-account' => $htmlCreateAccount,
'data-user-interface-preferences' => $menuData[ 'data-user-interface-preferences' ],
'data-notifications' => $menuData[ 'data-notifications' ],
'data-user-page' => $menuData[ 'data-user-page' ],
] );
$userMoreData = [
"id" => 'p-personal-more',
"class" => 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
"html-items" => $userMoreHtmlItems,
"label" => $this->msg( 'vector-personal-more-label' ),
"heading-class" => 'vector-menu-heading',
"is-dropdown" => false,
];
$userMenuData = $menuData[ 'data-user-menu' ];
if ( $isAnon ) {
$userMenuData[ 'html-before-portal' ] .= $this->getLoginHTML( $returnto, $useCombinedLoginLink );
} else {
// Appending as to not override data potentially set by the onSkinAfterPortlet hook.
$userMenuData[ 'html-after-portal' ] .= $this->getLogoutHTML();
}
return [
'data-user-more' => $userMoreData,
'data-user-menu' => $userMenuData
];
}
/**
* @inheritDoc
*/
public function getTemplateData() : array {
$skin = $this;
$out = $skin->getOutput();
$title = $out->getTitle();
$parentData = parent::getTemplateData();
if ( $this->shouldHideLanguages() ) {
$parentData['data-portlets']['data-languages'] = null;
}
// Naming conventions for Mustache parameters.
//
// Value type (first segment):
// - Prefix "is" or "has" for boolean values.
// - Prefix "msg-" for interface message text.
// - Prefix "html-" for raw HTML.
// - Prefix "data-" for an array of template parameters that should be passed directly
// to a template partial.
// - Prefix "array-" for lists of any values.
//
// Source of value (first or second segment)
// - Segment "page-" for data relating to the current page (e.g. Title, WikiPage, or OutputPage).
// - Segment "hook-" for any thing generated from a hook.
// It should be followed by the name of the hook in hyphenated lowercase.
//
// Conditionally used values must use null to indicate absence (not false or '').
$commonSkinData = array_merge( $parentData, [
'is-consolidated-user-links' => $this->shouldConsolidateUserLinks(),
'is-article' => (bool)$out->isArticle(),
'is-anon' => $this->getUser()->isAnon(),
'is-mainpage' => $title->isMainPage(),
// Remember that the string '0' is a valid title.
// From OutputPage::getPageTitle, via ::setPageTitle().
'html-title' => $out->getPageTitle(),
'html-categories' => $skin->getCategories(),
'input-location' => $this->getSearchBoxInputLocation(),
'sidebar-visible' => $this->isSidebarVisible(),
'is-language-in-header' => $this->isLanguagesInHeader(),
] );
if ( $skin->getUser()->isRegistered() ) {
// Note: This data is also passed to legacy template where it is unused.
$commonSkinData['data-emphasized-sidebar-action'] = [
'href' => SpecialPage::getTitleFor(
'Preferences',
false,
'mw-prefsection-rendering-skin-skin-prefs'
)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
];
}
$shouldConsolidateUserLinks = $this->shouldConsolidateUserLinks();
if ( $shouldConsolidateUserLinks ) {
$commonSkinData['data-vector-user-links'] = $this->getUserLinksTemplateData(
$commonSkinData['data-portlets'],
$commonSkinData['is-anon'],
$commonSkinData['data-search-box']
);
}
$commonSkinData['data-search-box'] = $this->getSearchData(
$commonSkinData['data-search-box'],
$shouldConsolidateUserLinks
);
return $commonSkinData;
}
/**
* Annotates search box with Vector-specific information
*
* @param array $searchBoxData
* @param bool $shouldConsolidateUserLinks
* @return array modified version of $searchBoxData
*/
private function getSearchData( array $searchBoxData, bool $shouldConsolidateUserLinks ) {
$searchClass = 'vector-search-box';
if ( $shouldConsolidateUserLinks ) {
$searchClass .= ' vector-search-box-collapses';
}
if ( $this->shouldSearchExpand() ) {
$searchClass .= ' vector-search-box-show-thumbnail';
}
// Annotate search box with a component class.
$searchBoxData['class'] = $searchClass;
$searchBoxData['is-collapsible'] = $shouldConsolidateUserLinks;
// At lower resolutions the search input is hidden search and only the submit button is shown.
// It should behave like a form submit link (e.g. submit the form with no input value).
// We'll wire this up in a later task T284242.
$searchBoxData['href-search'] = Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl();
return $searchBoxData;
}
/**
* Gets the value of the "input-location" parameter for the SearchBox Mustache template.
*
* @return string Either `Constants::SEARCH_BOX_INPUT_LOCATION_DEFAULT` or
* `Constants::SEARCH_BOX_INPUT_LOCATION_MOVED`
*/
private function getSearchBoxInputLocation() : string {
if ( $this->isLegacy() ) {
return Constants::SEARCH_BOX_INPUT_LOCATION_DEFAULT;
}
return Constants::SEARCH_BOX_INPUT_LOCATION_MOVED;
}
/**
* Determines whether or not the search input should expand when focused
* before WVUI search is loaded. In WVUI, the search input expands to
* accomodate thumbnails in the suggestion list. When thumbnails are
* disabled, the input should not expand. Note this is only relevant for WVUI
* search (not legacy search).
*
* @return bool
*/
private function shouldSearchExpand() : bool {
$featureManager = VectorServices::getFeatureManager();
return $featureManager->isFeatureEnabled( Constants::FEATURE_USE_WVUI_SEARCH ) &&
$this->getConfig()->get( 'VectorWvuiSearchOptions' )['showThumbnail'];
}
/**
* Determines wheather the initial state of sidebar is visible on not
*
* @return bool
*/
private function isSidebarVisible() {
$skin = $this->getSkin();
if ( $skin->getUser()->isRegistered() ) {
$userPrefSidebarState = $skin->getUser()->getOption(
Constants::PREF_KEY_SIDEBAR_VISIBLE
);
$defaultLoggedinSidebarState = $this->getConfig()->get(
Constants::CONFIG_KEY_DEFAULT_SIDEBAR_VISIBLE_FOR_AUTHORISED_USER
);
// If the sidebar user preference has been set, return that value,
// if not, then the default sidebar state for logged-in users.
return ( $userPrefSidebarState !== null )
? (bool)$userPrefSidebarState
: $defaultLoggedinSidebarState;
}
return $this->getConfig()->get(
Constants::CONFIG_KEY_DEFAULT_SIDEBAR_VISIBLE_FOR_ANONYMOUS_USER
);
}
/**
* Combines class and other HTML data required to create the button
* for the languages in header feature with the existing language portletData.
*
* @param array $portletData returned by SkinMustache
* @return array enhanced $portletData
*/
private function createULSLanguageButton( $portletData ) {
$label = $this->msg( 'vector-language-button-label' )
->numParams( count( $this->getLanguagesCached() ) )
->escaped();
$languageButtonData = [
'id' => 'p-lang-btn',
'label' => $label,
'heading-class' =>
' vector-menu-heading ' .
' mw-ui-icon ' .
' mw-ui-icon-before ' .
' mw-ui-icon-wikimedia-language ' .
' mw-ui-button mw-ui-quiet ' .
// ext.uls.interface attaches click handler to this selector.
' mw-interlanguage-selector ',
];
return array_merge( $portletData, $languageButtonData );
}
/**
* helper for applying Vector menu classes to portlets
* @param array $portletData returned by SkinMustache to decorate
* @param int $type representing one of the menu types (see MENU_TYPE_* constants)
* @return array modified version of portletData input
*/
private function decoratePortletClass(
array $portletData,
int $type = self::MENU_TYPE_DEFAULT
) {
$extraClasses = [
self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs',
self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
self::MENU_TYPE_DEFAULT => 'vector-menu',
];
$portletData['heading-class'] = 'vector-menu-heading';
// Add target class to apply different icon to personal menu dropdown for logged in users.
if ( $portletData['id'] === 'p-personal' ) {
if ( $this->shouldConsolidateUserLinks() ) {
$portletData['class'] .= ' vector-user-menu';
$portletData['class'] .= $this->loggedin ?
' vector-user-menu-logged-in' :
' vector-user-menu-logged-out';
$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element';
$portletData['heading-class'] .= $this->loggedin ?
' mw-ui-icon-wikimedia-userAvatar' :
' mw-ui-icon-wikimedia-ellipsis';
} else {
$portletData['class'] .= ' vector-user-menu-legacy';
}
}
if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
$portletData = $this->createULSLanguageButton( $portletData );
}
$class = $portletData['class'];
$portletData['class'] = trim( "$class $extraClasses[$type]" );
return $portletData;
}
/**
* @inheritDoc
* @return array
*/
protected function getPortletData(
$label,
array $urls = []
) : array {
switch ( $label ) {
case 'user-menu':
$type = $this->shouldConsolidateUserLinks() ? self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_DEFAULT;
break;
case 'actions':
case 'variants':
$type = self::MENU_TYPE_DROPDOWN;
break;
case 'views':
case 'namespaces':
$type = self::MENU_TYPE_TABS;
break;
case 'notifications':
case 'personal':
case 'user-page':
$type = self::MENU_TYPE_DEFAULT;
break;
case 'lang':
$type = $this->isLanguagesInHeader() ?
self::MENU_TYPE_DROPDOWN : self::MENU_TYPE_PORTAL;
break;
default:
$type = self::MENU_TYPE_PORTAL;
break;
}
$portletData = $this->decoratePortletClass(
parent::getPortletData( $label, $urls ),
$type
);
// Special casing for Variant to change label to selected.
// Hopefully we can revisit and possibly remove this code when the language switcher is moved.
if ( $label === 'variants' ) {
foreach ( $urls as $key => $item ) {
// Check the class of the item for a `selected` class and if so, propagate the items
// label to the main label.
if ( isset( $item['class'] ) && stripos( $item['class'], 'selected' ) !== false ) {
$portletData['label'] = $item['text'];
}
}
}
return $portletData + [
'is-dropdown' => $type === self::MENU_TYPE_DROPDOWN,
];
}
}