PreferencesFormOOUI.php

Go to the documentation of this file.

<?php
namespace MediaWiki\Specials\Forms;
 
use MediaWiki\Html\Html;
use MediaWiki\HTMLForm\Field\HTMLCheckField;
use MediaWiki\HTMLForm\Field\HTMLToggleSwitchField;
use MediaWiki\HTMLForm\HTMLNestedFilterable;
use MediaWiki\HTMLForm\OOUIHTMLForm;
use MediaWiki\User\User;
use OOUI\ButtonGroupWidget;
use OOUI\ButtonWidget;
use OOUI\FieldsetLayout;
use OOUI\HtmlSnippet;
use OOUI\IndexLayout;
use OOUI\PanelLayout;
use OOUI\TabPanelLayout;
use OOUI\Tag;
use OOUI\Widget;
 
class PreferencesFormOOUI extends OOUIHTMLForm {
    protected $mSubSectionBeforeFields = false;
 
    private $modifiedUser;
 
    private $privateInfoEditable = true;
 
    private $optionsEditable = true;
 
    private $useMobileLayout;
 
    public function setModifiedUser( $user ) {
        $this->modifiedUser = $user;
    }
 
    public function getModifiedUser() {
        if ( $this->modifiedUser === null ) {
            return $this->getUser();
        } else {
            return $this->modifiedUser;
        }
    }
 
    public function isPrivateInfoEditable() {
        return $this->privateInfoEditable;
    }
 
    public function setPrivateInfoEditable( $editable ) {
        $this->privateInfoEditable = $editable;
        $this->suppressDefaultSubmit( !$this->privateInfoEditable && !$this->optionsEditable );
    }
 
    public function areOptionsEditable() {
        return $this->optionsEditable;
    }
 
    public function setOptionsEditable( $optionsEditable ) {
        $this->optionsEditable = $optionsEditable;
        $this->suppressDefaultSubmit( !$this->privateInfoEditable && !$this->optionsEditable );
    }
 
    public function getExtraSuccessRedirectParameters() {
        return [];
    }
 
    public function wrapForm( $html ) {
        $html = Html::rawElement( 'div', [ 'id' => 'preferences' ], $html );
 
        return parent::wrapForm( $html );
    }
 
    public function filterDataForSubmit( $data ) {
        foreach ( $this->mFlatFields as $fieldname => $field ) {
            if ( $field instanceof HTMLNestedFilterable ) {
                $info = $field->mParams;
                $prefix = $info['prefix'] ?? $fieldname;
                foreach ( $field->filterDataForSubmit( $data[$fieldname] ) as $key => $value ) {
                    $data["$prefix$key"] = $value;
                }
                unset( $data[$fieldname] );
            }
        }
 
        return $data;
    }
 
    protected function wrapFieldSetSection( $legend, $section, $attributes, $isRoot ) {
        $layout = parent::wrapFieldSetSection( $legend, $section, $attributes, $isRoot );
 
        $layout->addClasses( [ 'mw-prefs-fieldset-wrapper' ] );
        $layout->removeClasses( [ 'oo-ui-panelLayout-framed' ] );
 
        return $layout;
    }
 
    private function isMobileLayout(): bool {
        if ( $this->useMobileLayout === null ) {
            $skin = $this->getSkin();
            $this->useMobileLayout = false;
            $this->getHookRunner()->onPreferencesGetLayout( $this->useMobileLayout,
                $skin->getSkinName(), [ 'isResponsive' => $skin->isResponsive() ] );
        }
        return $this->useMobileLayout;
    }
 
    public function addFields( $descriptor ) {
        // Replace checkbox fields with toggle switches on Special:Preferences
        if ( $this->isMobileLayout() && $this->getTitle()->isSpecial( 'Preferences' ) ) {
            foreach ( $descriptor as $_ => &$info ) {
                if ( isset( $info['type'] ) && in_array( $info['type'], [ 'check', 'toggle' ] ) ) {
                    unset( $info['type'] );
                    $info['class'] = HTMLToggleSwitchField::class;
                } elseif ( isset( $info['class'] ) && $info['class'] === HTMLCheckField::class ) {
                    $info['class'] = HTMLToggleSwitchField::class;
                }
            }
        }
        return parent::addFields( $descriptor );
    }
 
    public function getBody() {
        if ( $this->isMobileLayout() ) {
            // Import the icons used in the mobile view
            $this->getOutput()->addModuleStyles(
                [
                    'oojs-ui.styles.icons-user',
                    'oojs-ui.styles.icons-editing-core',
                    'oojs-ui.styles.icons-editing-advanced',
                    'oojs-ui.styles.icons-wikimediaui',
                    'oojs-ui.styles.icons-content',
                    'oojs-ui.styles.icons-moderation',
                    'oojs-ui.styles.icons-interactions',
                    'oojs-ui.styles.icons-movement',
                    'oojs-ui.styles.icons-wikimedia',
                    'oojs-ui.styles.icons-media',
                    'oojs-ui.styles.icons-accessibility',
                    'oojs-ui.styles.icons-layout',
                ]
            );
            $form = $this->createMobilePreferencesForm();
        } else {
            $form = $this->createDesktopPreferencesForm();
        }
 
        $header = $this->formatFormHeader();
 
        return $header . $form;
    }
 
    public function getLegend( $key ) {
        $legend = parent::getLegend( $key );
        $this->getHookRunner()->onPreferencesGetLegend( $this, $key, $legend );
        return $legend;
    }
 
    public function getPreferenceSections() {
        return array_keys( array_filter( $this->mFieldTree, 'is_array' ) );
    }
 
    private function createMobilePreferencesForm() {
        $sectionButtons = [];
        $sectionContents = [];
        $iconNames = $this->getIconNames();
 
        foreach ( $this->mFieldTree as $key => $val ) {
            if ( !is_array( $val ) ) {
                wfDebug( __METHOD__ . " encountered a field not attached to a section: '$key'" );
                continue;
            }
            $label = $this->getLegend( $key );
            $content =
                $this->getHeaderHtml( $key ) .
                $this->displaySection(
                    $val,
                    "",
                    "mw-prefsection-$key-"
                ) .
                $this->getFooterHtml( $key );
 
            // Creating the header section
            $label = ( new Tag( 'div' ) )->appendContent(
                ( new Tag( 'h5' ) )->appendContent( $label )->addClasses( [ 'mw-prefs-title' ] ),
                $this->createMobileDescription( $key )
            );
            $contentDiv = $this->createContentMobile( $key, $label, $content );
 
            $sectionButton = new ButtonWidget( [
                'id' => 'mw-mobile-prefs-' . $key,
                'icon' => $iconNames[ $key ] ?? 'settings',
                'label' => new HtmlSnippet( $label->toString() ),
                'data' => $key,
                'classes' => [ 'mw-mobile-prefsection' ],
                'framed' => false,
            ] );
            $sectionButtons[] = $sectionButton;
            $sectionContents[] = $contentDiv;
        }
 
        $buttonGroup = new ButtonGroupWidget( [
            'classes' => [ 'mw-mobile-prefs-sections' ],
            'infusable' => true,
        ] );
        $buttonGroup->addItems( $sectionButtons );
        $form = ( new Tag( 'div' ) )
            ->setAttributes( [ 'id' => 'mw-prefs-container' ] )
            ->addClasses( [ 'mw-mobile-prefs-container' ] )
            ->appendContent( $buttonGroup )
            ->appendContent( $sectionContents );
 
        return $form;
    }
 
    private function getIconNames() {
        $iconNames = [
            'personal' => 'userAvatar',
            'rendering' => 'palette',
            'editing' => 'edit',
            'rc' => 'recentChanges',
            'watchlist' => 'watchlist',
            'searchoptions' => 'search',
            'misc' => '',
        ];
        $hookIcons = [];
        // Get icons from extensions that have their own sections
        $this->getHookRunner()->onPreferencesGetIcon( $hookIcons );
        $iconNames += $hookIcons;
 
        return $iconNames;
    }
 
    private function createMobileDescription( $key ) {
        $prefDescriptionMsg = $this->msg( "prefs-description-" . $key );
        $prefDescription = $prefDescriptionMsg->exists() ? $prefDescriptionMsg->text() : "";
        $prefDescriptionElement = ( new Tag( 'p' ) )
            ->appendContent( $prefDescription )
            ->addClasses( [ 'mw-prefs-description' ] );
 
        return $prefDescriptionElement;
    }
 
    private function createContentMobile( $key, $label, $content ) {
        $contentDiv = ( new Tag( 'div' ) );
        $contentDiv->addClasses( [
            'mw-prefs-content-page',
            'mw-prefs-section-fieldset',
        ] );
        $contentDiv->setAttributes( [
            'id' => 'mw-mobile-prefs-' . $key
        ] );
        $contentBody = ( new Tag( 'div' ) )
            ->addClasses( [ 'mw-htmlform-autoinfuse-lazy' ] )
            ->setAttributes( [
                'id' => 'mw-mobile-prefs-' . $key . '-content'
            ] );
        $contentHeader = ( new Tag( 'div' ) )->setAttributes( [
            'id' => 'mw-mobile-prefs-' . $key . '-head'
        ] );
        $contentHeader->addClasses( [ 'mw-prefs-content-head' ] );
        $contentHeaderTitle = ( new Tag( 'h5' ) )->setAttributes( [
            'id' => 'mw-mobile-prefs-' . $key . '-title',
        ] );
        $contentHeaderTitle->appendContent( $label )->addClasses( [ 'mw-prefs-header-title' ] );
        $formContent = new Widget( [
            'content' => new HtmlSnippet( $content )
        ] );
        $hiddenForm = ( new Tag( 'div' ) )->appendContent( $formContent );
        $contentHeader->appendContent( $contentHeaderTitle );
        $contentBody->appendContent( $contentHeader );
        $contentBody->appendContent( $hiddenForm );
        $contentDiv->appendContent( $contentBody );
 
        return $contentDiv;
    }
 
    private function createDesktopPreferencesForm() {
        $tabPanels = [];
        foreach ( $this->mFieldTree as $key => $val ) {
            if ( !is_array( $val ) ) {
                wfDebug( __METHOD__ . " encountered a field not attached to a section: '$key'" );
                continue;
            }
            $label = $this->getLegend( $key );
            $content =
                $this->getHeaderHtml( $key ) .
                $this->displaySection(
                    $val,
                    "",
                    "mw-prefsection-$key-"
                ) .
                $this->getFooterHtml( $key );
 
            $tabPanels[] = new TabPanelLayout( 'mw-prefsection-' . $key, [
                'classes' => [ 'mw-htmlform-autoinfuse-lazy' ],
                'label' => $label,
                'content' => new FieldsetLayout( [
                    'classes' => [ 'mw-prefs-section-fieldset' ],
                    'id' => "mw-prefsection-$key",
                    'label' => $label,
                    'items' => [
                        new Widget( [
                            'content' => new HtmlSnippet( $content )
                        ] ),
                    ],
                ] ),
                'expanded' => false,
                'framed' => true,
            ] );
        }
 
        $indexLayout = new IndexLayout( [
            'infusable' => true,
            'expanded' => false,
            'autoFocus' => false,
            'classes' => [ 'mw-prefs-tabs' ],
        ] );
        $indexLayout->addTabPanels( $tabPanels );
 
        $form = new PanelLayout( [
            'framed' => true,
            'expanded' => false,
            'classes' => [ 'mw-prefs-tabs-wrapper' ],
            'content' => $indexLayout
        ] );
 
        return $form;
    }
}
 
class_alias( PreferencesFormOOUI::class, 'PreferencesFormOOUI' );