ResourceLoaderSkinModule.php

Go to the documentation of this file.

<?php
class ResourceLoaderSkinModule extends ResourceLoaderFileModule {
    public $targets = [ 'desktop', 'mobile' ];
 
    private const FEATURE_FILES = [
        'logo' => [
            // Applies the logo and ensures it downloads prior to printing.
            'all' => [ 'resources/src/mediawiki.skinning/logo.less' ],
            // Reserves whitespace for the logo in a pseudo element.
            'print' => [ 'resources/src/mediawiki.skinning/logo-print.less' ],
        ],
        'content' => [
            'screen' => [ 'resources/src/mediawiki.skinning/content.css' ],
        ],
        'interface' => [
            'screen' => [ 'resources/src/mediawiki.skinning/interface.css' ],
        ],
        'normalize' => [
            'screen' => [ 'resources/src/mediawiki.skinning/normalize.less' ],
        ],
        'elements' => [
            'screen' => [ 'resources/src/mediawiki.skinning/elements.css' ],
        ],
        'legacy' => [
            'all' => [ 'resources/src/mediawiki.skinning/messageBoxes.less' ],
            'print' => [ 'resources/src/mediawiki.skinning/commonPrint.css' ],
            'screen' => [ 'resources/src/mediawiki.skinning/legacy.less' ],
        ],
        'i18n-ordered-lists' => [
            'screen' => [ 'resources/src/mediawiki.skinning/i18n-ordered-lists.less' ],
        ],
        'i18n-all-lists-margins' => [
            'screen' => [ 'resources/src/mediawiki.skinning/i18n-all-lists-margins.less' ],
        ],
        'i18n-headings' => [
            'screen' => [ 'resources/src/mediawiki.skinning/i18n-headings.less' ],
        ],
    ];
 
    private $features;
 
    private const DEFAULT_FEATURES = [
        'logo' => false,
        'content' => false,
        'interface' => false,
        'elements' => false,
        'legacy' => false,
        'i18n-ordered-lists' => false,
        'i18n-all-lists-margins' => false,
        'i18n-headings' => false,
    ];
 
    public function __construct(
        array $options = [],
        $localBasePath = null,
        $remoteBasePath = null
    ) {
        parent::__construct( $options, $localBasePath, $remoteBasePath );
        $features = $options['features'] ??
            // For historic reasons if nothing is declared logo and legacy features are enabled.
            [
                'logo' => true,
                'legacy' => true
            ];
        $enabledFeatures = [];
        $compatibilityMode = false;
        foreach ( $features as $key => $enabled ) {
            if ( is_bool( $enabled ) ) {
                $enabledFeatures[$key] = $enabled;
            } else {
                // operating in array mode.
                $enabledFeatures[$enabled] = true;
                $compatibilityMode = true;
            }
        }
        // If the module didn't specify an option use the default features values.
        // This allows new features to be turned on automatically.
        if ( !$compatibilityMode ) {
            foreach ( self::DEFAULT_FEATURES as $key => $enabled ) {
                if ( !isset( $enabledFeatures[$key] ) ) {
                    $enabledFeatures[$key] = $enabled;
                }
            }
        }
        $this->features = array_filter(
            array_keys( $enabledFeatures ),
            function ( $key ) use ( $enabledFeatures ) {
                return $enabledFeatures[ $key ];
            }
        );
    }
 
    public function getStyleFiles( ResourceLoaderContext $context ) {
        $styles = parent::getStyleFiles( $context );
 
        list( $defaultLocalBasePath, $defaultRemoteBasePath ) =
            ResourceLoaderFileModule::extractBasePaths();
 
        foreach ( $this->features as $feature ) {
            if ( !isset( self::FEATURE_FILES[$feature] ) ) {
                // We could be an old version of MediaWiki and a new feature is being requested (T271441).
                continue;
            }
            foreach ( self::FEATURE_FILES[$feature] as $mediaType => $files ) {
                if ( !isset( $styles[$mediaType] ) ) {
                    $styles[$mediaType] = [];
                }
                foreach ( $files as $filepath ) {
                    $styles[$mediaType][] = new ResourceLoaderFilePath(
                        $filepath,
                        $defaultLocalBasePath,
                        $defaultRemoteBasePath
                    );
                }
            }
        }
 
        return $styles;
    }
 
    public function getStyles( ResourceLoaderContext $context ) {
        $logo = $this->getLogoData( $this->getConfig() );
        $styles = parent::getStyles( $context );
        $this->normalizeStyles( $styles );
 
        $isLogoFeatureEnabled = in_array( 'logo', $this->features );
        if ( $isLogoFeatureEnabled ) {
            $default = !is_array( $logo ) ? $logo : $logo['1x'];
            $styles['all'][] = '.mw-wiki-logo { background-image: ' .
                CSSMin::buildUrlValue( $default ) .
                '; }';
            if ( is_array( $logo ) ) {
                if ( isset( $logo['svg'] ) ) {
                    $styles['all'][] = '.mw-wiki-logo { ' .
                        'background-image: -webkit-linear-gradient(transparent, transparent), ' .
                            CSSMin::buildUrlValue( $logo['svg'] ) . '; ' .
                        'background-image: linear-gradient(transparent, transparent), ' .
                            CSSMin::buildUrlValue( $logo['svg'] ) . ';' .
                        'background-size: 135px auto; }';
                } else {
                    if ( isset( $logo['1.5x'] ) ) {
                        $styles[
                            '(-webkit-min-device-pixel-ratio: 1.5), ' .
                            '(min--moz-device-pixel-ratio: 1.5), ' .
                        '(min-resolution: 1.5dppx), ' .
                            '(min-resolution: 144dpi)'
                        ][] = '.mw-wiki-logo { background-image: ' .
                        CSSMin::buildUrlValue( $logo['1.5x'] ) . ';' .
                        'background-size: 135px auto; }';
                    }
                    if ( isset( $logo['2x'] ) ) {
                        $styles[
                            '(-webkit-min-device-pixel-ratio: 2), ' .
                            '(min--moz-device-pixel-ratio: 2), ' .
                            '(min-resolution: 2dppx), ' .
                            '(min-resolution: 192dpi)'
                        ][] = '.mw-wiki-logo { background-image: ' .
                        CSSMin::buildUrlValue( $logo['2x'] ) . ';' .
                        'background-size: 135px auto; }';
                    }
                }
            }
        }
 
        return $styles;
    }
 
    public function getPreloadLinks( ResourceLoaderContext $context ) {
        return $this->getLogoPreloadlinks();
    }
 
    private function getLogoPreloadlinks() : array {
        $logo = $this->getLogoData( $this->getConfig() );
 
        $logosPerDppx = [];
        $logos = [];
 
        $preloadLinks = [];
 
        if ( !is_array( $logo ) ) {
            // No media queries required if we only have one variant
            $preloadLinks[$logo] = [ 'as' => 'image' ];
            return $preloadLinks;
        }
 
        if ( isset( $logo['svg'] ) ) {
            // No media queries required if we only have a 1x and svg variant
            // because all preload-capable browsers support SVGs
            $preloadLinks[$logo['svg']] = [ 'as' => 'image' ];
            return $preloadLinks;
        }
 
        foreach ( $logo as $dppx => $src ) {
            // Keys are in this format: "1.5x"
            $dppx = substr( $dppx, 0, -1 );
            $logosPerDppx[$dppx] = $src;
        }
 
        // Because PHP can't have floats as array keys
        uksort( $logosPerDppx, function ( $a, $b ) {
            $a = floatval( $a );
            $b = floatval( $b );
            // Sort from smallest to largest (e.g. 1x, 1.5x, 2x)
            return $a <=> $b;
        } );
 
        foreach ( $logosPerDppx as $dppx => $src ) {
            $logos[] = [
                'dppx' => $dppx,
                'src' => $src
            ];
        }
 
        $logosCount = count( $logos );
        // Logic must match ResourceLoaderSkinModule:
        // - 1x applies to resolution < 1.5dppx
        // - 1.5x applies to resolution >= 1.5dppx && < 2dppx
        // - 2x applies to resolution >= 2dppx
        // Note that min-resolution and max-resolution are both inclusive.
        for ( $i = 0; $i < $logosCount; $i++ ) {
            if ( $i === 0 ) {
                // Smallest dppx
                // min-resolution is ">=" (larger than or equal to)
                // "not min-resolution" is essentially "<"
                $media_query = 'not all and (min-resolution: ' . $logos[1]['dppx'] . 'dppx)';
            } elseif ( $i !== $logosCount - 1 ) {
                // In between
                // Media query expressions can only apply "not" to the entire expression
                // (e.g. can't express ">= 1.5 and not >= 2).
                // Workaround: Use <= 1.9999 in place of < 2.
                $upper_bound = floatval( $logos[$i + 1]['dppx'] ) - 0.000001;
                $media_query = '(min-resolution: ' . $logos[$i]['dppx'] .
                    'dppx) and (max-resolution: ' . $upper_bound . 'dppx)';
            } else {
                // Largest dppx
                $media_query = '(min-resolution: ' . $logos[$i]['dppx'] . 'dppx)';
            }
 
            $preloadLinks[$logos[$i]['src']] = [
                'as' => 'image',
                'media' => $media_query
            ];
        }
 
        return $preloadLinks;
    }
 
    private function normalizeStyles( array &$styles ) : void {
        foreach ( $styles as $key => $val ) {
            if ( !is_array( $val ) ) {
                $styles[$key] = [ $val ];
            }
        }
    }
 
    public static function getAvailableLogos( $conf ) : array {
        $logos = $conf->get( 'Logos' );
        if ( $logos === false ) {
            // no logos were defined... this will either
            // 1. Load from wgLogo and wgLogoHD
            // 2. Trigger runtime exception if those are not defined.
            $logos = [];
        }
 
        // If logos['1x'] is not defined, see if we can use wgLogo
        if ( !isset( $logos[ '1x' ] ) ) {
            $logo = $conf->get( 'Logo' );
            if ( $logo ) {
                $logos['1x'] = $logo;
            }
        }
 
        try {
            $logoHD = $conf->get( 'LogoHD' );
            // make sure not false
            if ( $logoHD ) {
                // wfDeprecated( __METHOD__ . ' with $wgLogoHD set instead of $wgLogos', '1.35', false, 1 );
                $logos += $logoHD;
            }
        } catch ( ConfigException $e ) {
            // no backwards compatibility changes needed.
        }
 
        // check the configuration is valid
        if ( !isset( $logos['1x'] ) ) {
            throw new \RuntimeException( "The key `1x` is required for wgLogos or wgLogo must be defined." );
        }
        // return the modified logos!
        return $logos;
    }
 
    protected function getLogoData( Config $conf ) {
        $logoHD = self::getAvailableLogos( $conf );
        $logo = $logoHD['1x'];
 
        $logo1Url = OutputPage::transformResourcePath( $conf, $logo );
 
        $logoUrls = [
            '1x' => $logo1Url,
        ];
 
        if ( isset( $logoHD['svg'] ) ) {
            $logoUrls['svg'] = OutputPage::transformResourcePath(
                $conf,
                $logoHD['svg']
            );
        } elseif ( isset( $logoHD['1.5x'] ) || isset( $logoHD['2x'] ) ) {
            // Only 1.5x and 2x are supported
            if ( isset( $logoHD['1.5x'] ) ) {
                $logoUrls['1.5x'] = OutputPage::transformResourcePath(
                    $conf,
                    $logoHD['1.5x']
                );
            }
            if ( isset( $logoHD['2x'] ) ) {
                $logoUrls['2x'] = OutputPage::transformResourcePath(
                    $conf,
                    $logoHD['2x']
                );
            }
        } else {
            // Return a string rather than a one-element array, getLogoPreloadlinks depends on this
            return $logo1Url;
        }
 
        return $logoUrls;
    }
 
    public function isKnownEmpty( ResourceLoaderContext $context ) {
        // Regardless of whether the files are specified, we always
        // provide mw-wiki-logo styles.
        return false;
    }
 
    protected function getLessVars( ResourceLoaderContext $context ) {
        $lessVars = parent::getLessVars( $context );
        $logos = self::getAvailableLogos( $this->getConfig() );
 
        if ( isset( $logos['wordmark'] ) ) {
            $logo = $logos['wordmark'];
            $lessVars[ 'logo-enabled' ] = true;
            $lessVars[ 'logo-wordmark-url' ] = CSSMin::buildUrlValue( $logo['src'] );
            $lessVars[ 'logo-wordmark-width' ] = intval( $logo['width'] );
            $lessVars[ 'logo-wordmark-height' ] = intval( $logo['height'] );
        } else {
            $lessVars[ 'logo-enabled' ] = false;
        }
        return $lessVars;
    }
 
    public function getDefinitionSummary( ResourceLoaderContext $context ) {
        $summary = parent::getDefinitionSummary( $context );
        $summary[] = [
            'logos' => self::getAvailableLogos( $this->getConfig() ),
        ];
        return $summary;
    }
}