Special:Preferences: Construct fake tabs to avoid FOUC
[lhc/web/wiklou.git] / includes / specials / forms / PreferencesFormOOUI.php
1 <?php
2 /**
3 * This program is free software; you can redistribute it and/or modify
4 * it under the terms of the GNU General Public License as published by
5 * the Free Software Foundation; either version 2 of the License, or
6 * (at your option) any later version.
7 *
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 *
13 * You should have received a copy of the GNU General Public License along
14 * with this program; if not, write to the Free Software Foundation, Inc.,
15 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
16 * http://www.gnu.org/copyleft/gpl.html
17 *
18 * @file
19 */
20
21 /**
22 * Form to edit user preferences.
23 */
24 class PreferencesFormOOUI extends OOUIHTMLForm implements PreferencesForm {
25 // Override default value from HTMLForm
26 protected $mSubSectionBeforeFields = false;
27
28 private $modifiedUser;
29
30 /**
31 * @param User $user
32 */
33 public function setModifiedUser( $user ) {
34 $this->modifiedUser = $user;
35 }
36
37 /**
38 * @return User
39 */
40 public function getModifiedUser() {
41 if ( $this->modifiedUser === null ) {
42 return $this->getUser();
43 } else {
44 return $this->modifiedUser;
45 }
46 }
47
48 /**
49 * Get extra parameters for the query string when redirecting after
50 * successful save.
51 *
52 * @return array
53 */
54 public function getExtraSuccessRedirectParameters() {
55 return [];
56 }
57
58 /**
59 * @param string $html
60 * @return string
61 */
62 function wrapForm( $html ) {
63 $html = Xml::tags( 'div', [ 'id' => 'preferences' ], $html );
64
65 return parent::wrapForm( $html );
66 }
67
68 /**
69 * @return string
70 */
71 function getButtons() {
72 if ( !$this->getModifiedUser()->isAllowedAny( 'editmyprivateinfo', 'editmyoptions' ) ) {
73 return '';
74 }
75
76 $html = parent::getButtons();
77
78 if ( $this->getModifiedUser()->isAllowed( 'editmyoptions' ) ) {
79 $t = $this->getTitle()->getSubpage( 'reset' );
80
81 $html .= new OOUI\ButtonWidget( [
82 'infusable' => true,
83 'id' => 'mw-prefs-restoreprefs',
84 'label' => $this->msg( 'restoreprefs' )->text(),
85 'href' => $t->getLinkURL(),
86 'flags' => [ 'destructive' ],
87 'framed' => false,
88 ] );
89
90 $html = Xml::tags( 'div', [ 'class' => 'mw-prefs-buttons' ], $html );
91 }
92
93 return $html;
94 }
95
96 /**
97 * Separate multi-option preferences into multiple preferences, since we
98 * have to store them separately
99 * @param array $data
100 * @return array
101 */
102 function filterDataForSubmit( $data ) {
103 foreach ( $this->mFlatFields as $fieldname => $field ) {
104 if ( $field instanceof HTMLNestedFilterable ) {
105 $info = $field->mParams;
106 $prefix = isset( $info['prefix'] ) ? $info['prefix'] : $fieldname;
107 foreach ( $field->filterDataForSubmit( $data[$fieldname] ) as $key => $value ) {
108 $data["$prefix$key"] = $value;
109 }
110 unset( $data[$fieldname] );
111 }
112 }
113
114 return $data;
115 }
116
117 protected function wrapFieldSetSection( $legend, $section, $attributes, $isRoot ) {
118 // to get a user visible effect, wrap the fieldset into a framed panel layout
119 if ( $isRoot ) {
120 // Mimic TabPanelLayout
121 $wrapper = new OOUI\PanelLayout( [
122 'expanded' => false,
123 'scrollable' => true,
124 // Framed and padded for no-JS, frame hidden with CSS
125 'framed' => true,
126 'infusable' => false,
127 'classes' => [ 'oo-ui-stackLayout oo-ui-indexLayout-stackLayout' ]
128 ] );
129 $layout = new OOUI\PanelLayout( [
130 'expanded' => false,
131 'scrollable' => true,
132 'infusable' => false,
133 'classes' => [ 'oo-ui-tabPanelLayout' ]
134 ] );
135 $wrapper->appendContent( $layout );
136 } else {
137 $wrapper = $layout = new OOUI\PanelLayout( [
138 'expanded' => false,
139 'padded' => true,
140 'framed' => true,
141 'infusable' => false,
142 ] );
143 }
144
145 $layout->appendContent(
146 new OOUI\FieldsetLayout( [
147 'label' => $legend,
148 'infusable' => false,
149 'items' => [
150 new OOUI\Widget( [
151 'content' => new OOUI\HtmlSnippet( $section )
152 ] ),
153 ],
154 ] + $attributes )
155 );
156 return $wrapper;
157 }
158
159 /**
160 * Get the whole body of the form.
161 * @return string
162 */
163 function getBody() {
164 // Construct fake tabs to avoid FOUC. The structure mimics OOUI's tabPanelLayout.
165 // TODO: Consider creating an infusable TabPanelLayout in OOUI-PHP.
166 $fakeTabs = [];
167 foreach ( $this->getPreferenceSections() as $i => $key ) {
168 $fakeTabs[] =
169 Html::rawElement(
170 'div',
171 [
172 'class' =>
173 'oo-ui-widget oo-ui-widget-enabled oo-ui-optionWidget '.
174 'oo-ui-tabOptionWidget oo-ui-labelElement' .
175 ( $i === 0 ? ' oo-ui-optionWidget-selected' : '' )
176 ],
177 Html::element(
178 'a',
179 [
180 'class' => 'oo-ui-labelElement-label',
181 // Make this a usable link instead of a span so the tabs
182 // can be used before JS runs
183 'href' => '#mw-prefsection-' . $key
184 ],
185 $this->getLegend( $key )
186 )
187 );
188 }
189 $fakeTabsHtml = Html::rawElement(
190 'div',
191 [ 'class' => 'oo-ui-layout oo-ui-panelLayout oo-ui-indexLayout-tabPanel' ],
192 Html::rawElement(
193 'div',
194 [ 'class' => 'oo-ui-widget oo-ui-widget-enabled oo-ui-selectWidget '.
195 'oo-ui-selectWidget-depressed oo-ui-tabSelectWidget' ],
196 implode( $fakeTabs )
197 )
198 );
199
200 return Html::rawElement(
201 'div',
202 [ 'class' => 'oo-ui-layout oo-ui-panelLayout oo-ui-panelLayout-framed mw-prefs-faketabs' ],
203 Html::rawElement(
204 'div',
205 [ 'class' => 'oo-ui-layout oo-ui-menuLayout oo-ui-menuLayout-static ' .
206 'oo-ui-menuLayout-top oo-ui-menuLayout-showMenu oo-ui-indexLayout' ],
207 Html::rawElement(
208 'div',
209 [ 'class' => 'oo-ui-menuLayout-menu' ],
210 $fakeTabsHtml
211 ) .
212 Html::rawElement(
213 'div',
214 [ 'class' => 'oo-ui-menuLayout-content' ],
215 $this->displaySection( $this->mFieldTree, '', 'mw-prefsection-' )
216 )
217 )
218 );
219 }
220
221 /**
222 * Get the "<legend>" for a given section key. Normally this is the
223 * prefs-$key message but we'll allow extensions to override it.
224 * @param string $key
225 * @return string
226 */
227 function getLegend( $key ) {
228 $legend = parent::getLegend( $key );
229 Hooks::run( 'PreferencesGetLegend', [ $this, $key, &$legend ] );
230 return $legend;
231 }
232
233 /**
234 * Get the keys of each top level preference section.
235 * @return array of section keys
236 */
237 function getPreferenceSections() {
238 return array_keys( array_filter( $this->mFieldTree, 'is_array' ) );
239 }
240 }