Modernise MatomoAnalyticsOOUIForm (miraheze#79)

fuerthwiki · Jun 29, 2022 · 79ddfa3 · 79ddfa3
1 parent d4d3358
commit 79ddfa3
Show file tree

Hide file tree

Showing 10 changed files with 760 additions and 944 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## ChangeLog for MatomoAnalytics
 
+### 1.0.6 (29-06-2022)
+* Require MediaWiki 1.38.0
+* Modernise MatomoAnalyticsOOUIForm
+
 ### 1.0.5.14 (07-09-2021)
 * Add CI for MediaWiki standards and security
 

diff --git a/extension.json b/extension.json
@@ -6,12 +6,12 @@
 		"Universal Omega"
 	],
 	"url": "https://github.com/miraheze/MatomoAnalytics",
-	"version": "1.0.5.14",
+	"version": "1.0.6",
 	"descriptionmsg": "matomoanalytics-desc",
 	"license-name": "GPL-3.0-or-later",
 	"type": "specialpage",
 	"requires": {
-		"MediaWiki": ">= 1.35.3"
+		"MediaWiki": ">= 1.38.0"
 	},
 	"AvailableRights": [
 		"noanalytics"
@@ -54,16 +54,16 @@
 	},
 	"ResourceModules": {
 		"ext.matomoanalytics.oouiform": {
-			"scripts": [
-				"ext.matomoanalytics.oouiform.edit.ooui.js",
-				"ext.matomoanalytics.oouiform.ooui.js"
-			],
-			"styles": "ext.matomoanalytics.oouiform.ooui.less",
+			"scripts": "ext.matomoanalytics.oouiform.ooui.js",
+			"targets": [ "desktop", "mobile" ],
 			"dependencies": [
-				"oojs-ui",
-				"mediawiki.editfont.styles"
-			],
-			"targets": [ "desktop", "mobile" ]
+				"mediawiki.storage",
+				"oojs-ui-widgets"
+			]
+		},
+		"ext.matomoanalytics.oouiform.styles": {
+			"targets": [ "desktop", "mobile" ],
+			"styles": "ext.matomoanalytics.oouiform.ooui.less"
 		}
 	},
 	"ResourceFileModulePaths": {

diff --git a/includes/MatomoAnalyticsOOUIForm.php b/includes/MatomoAnalyticsOOUIForm.php
@@ -5,119 +5,76 @@ class MatomoAnalyticsOOUIForm extends OOUIHTMLForm {
 	protected $mSubSectionBeforeFields = false;
 
 	public function wrapForm( $html ) {
-		$html = Xml::tags( 'div', [ 'id' => 'baseform' ], $html );
+		$html = Xml::tags( 'div', [ 'id' => 'matomoanalytics' ], $html );
 
 		return parent::wrapForm( $html );
 	}
 
 	protected function wrapFieldSetSection( $legend, $section, $attributes, $isRoot ) {
-		if ( $isRoot ) {
-			$wrapper = new OOUI\PanelLayout( [
-				'expanded' => false,
-				'scrollable' => true,
-				'framed' => true,
-				'infusable' => false,
-				'classes' => [ 'oo-ui-stackLayout oo-ui-indexLayout-stackLayout' ]
-			] );
+		$layout = parent::wrapFieldSetSection( $legend, $section, $attributes, $isRoot );
 
-			$layout = new OOUI\PanelLayout( [
-				'expanded' => false,
-				'scrollable' => true,
-				'framed' => true,
-				'infusable' => false,
-				'classes' => [ 'oo-ui-tabPanelLayout' ]
-			] );
+		$layout->addClasses( [ 'matomoanalytics-fieldset-wrapper' ] );
+		$layout->removeClasses( [ 'oo-ui-panelLayout-framed' ] );
+
+		return $layout;
+	}
+
+	public function getBody() {
+		$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 );
 
-			$wrapper->appendContent( $layout );
-		} else {
-			$wrapper = $layout = new OOUI\PanelLayout( [
+			$content =
+				$this->getHeaderHtml( $key ) .
+				$this->displaySection(
+					$val,
+					'',
+					"mw-section-{$key}-"
+				) .
+				$this->getFooterHtml( $key );
+
+			$tabPanels[] = new \OOUI\TabPanelLayout( 'mw-section-' . $key, [
+				'classes' => [ 'mw-htmlform-autoinfuse-lazy' ],
+				'label' => $label,
+				'content' => new \OOUI\FieldsetLayout( [
+					'classes' => [ 'matomoanalytics-section-fieldset' ],
+					'id' => "mw-section-{$key}",
+					'label' => $label,
+					'items' => [
+						new \OOUI\Widget( [
+							'content' => new \OOUI\HtmlSnippet( $content )
+						] ),
+					],
+				] ),
 				'expanded' => false,
-				'padded' => true,
 				'framed' => true,
-				'infusable' => false,
 			] );
 		}
 
-		$layout->appendContent(
-			new OOUI\FieldsetLayout( [
-				'label' => $legend,
-				'infusable' => false,
-				'items' => [
-					new OOUI\Widget( [
-						'content' => new OOUI\HtmlSnippet( $section )
-					] ),
-				],
-			] + $attributes )
-		);
-
-		return $wrapper;
-	}
+		$indexLayout = new \OOUI\IndexLayout( [
+			'infusable' => true,
+			'expanded' => false,
+			'autoFocus' => false,
+			'classes' => [ 'matomoanalytics-tabs' ],
+		] );
 
-	public function getBody() {
-		$fakeTabs = [];
-
-		foreach ( $this->getFormSections() as $i => $key ) {
-			$fakeTabs[] = Html::rawElement(
-				'div',
-				[
-					'class' =>
-						'oo-ui-widget oo-ui-widget-enabled oo-ui-optionWidget oo-ui-tabOptionsWidget oo-ui-labelElement' .
-						( $i === 0 ? 'oo-ui-optionWidget-selected' : '' )
-				],
-				Html::element(
-					'a',
-					[
-						'class' => 'oo-ui-labelElement-label',
-						'href' => '#mw-section-' . $key
-					],
-					$this->getLegend( $key )
-				)
-			);
-		}
+		$indexLayout->addTabPanels( $tabPanels );
 
-		$fakeTabsHtml = Html::rawElement(
-			'div',
-			[
-				'class' => 'oo-ui-layout oo-ui-panelLayout oo-ui-indexLayout-tabPanel'
-			],
-			Html::rawElement(
-				'div',
-				[
-					'class' => 'oo-ui-widget oo-ui-widget-enabled ooui-selectWidget oo-ui-selectWidget-depressed oo-ui-tabSelectWidget'
-				],
-				implode( $fakeTabs )
-			)
-		);
-
-		return Html::rawElement(
-			'div',
-			[
-				'class' => 'oo-ui-layout oo-ui-panelLayout oo-ui-paenlLayout-framed mw-baseform-faketabs'
-			],
-			Html::rawElement(
-				'div',
-				[
-					'class' => 'oo-ui-layout oo-ui-menuLayout oo-ui-menuLayout-static oo-ui-menuLayout-top oo-ui-menuLayout-showMenu oo-ui-indexLayout'
-				],
-				Html::rawElement(
-					'div',
-					[
-						'class' => 'oo-ui-menuLayout-menu'
-					],
-					$fakeTabsHtml
-				) .
-				Html::rawElement(
-					'div',
-					[
-						'class' => 'oo-ui-menuLayout-content mw-htmlform-autoinfuse-lazy'
-					],
-					$this->displaySection( $this->mFieldTree, '', 'mw-section-' )
-				)
-			)
-		);
-	}
+		$header = $this->formatFormHeader();
+
+		$form = new \OOUI\PanelLayout( [
+			'framed' => true,
+			'expanded' => false,
+			'classes' => [ 'matomoanalytics-tabs-wrapper' ],
+			'content' => $indexLayout
+		] );
 
-	public function getFormSections() {
-		return array_keys( array_filter( $this->mFieldTree, 'is_array' ) );
+		return $header . $form;
 	}
 }
diff --git a/includes/MatomoAnalyticsViewer.php b/includes/MatomoAnalyticsViewer.php
@@ -26,7 +26,7 @@ public function getFormDescriptor(
 			'visithour' => $mA->getVisitsPerServerHour(),
 			'visitpages' => $mA->getVisitPages(),
 			'visitduration' => $mA->getVisitDurations(),
-			'visitpass' => $mA->getVisitDaysPassed()
+			'visitpass' => $mA->getVisitDaysPassed(),
 		];
 
 		$formDescriptor = [];
@@ -36,7 +36,7 @@ public function getFormDescriptor(
 					'type' => 'info',
 					'label' => $label,
 					'default' => (string)$value,
-					'section' => $type
+					'section' => $type,
 				];
 			}
 		}
@@ -51,7 +51,7 @@ public function getForm(
 
 		$htmlForm = new MatomoAnalyticsOOUIForm( $formDescriptor, $context, 'matomoanalytics-labels' );
 
-		$htmlForm->setId( 'mw-baseform-analytics' );
+		$htmlForm->setId( 'matomoanalytics-form' );
 		$htmlForm->suppressDefaultSubmit();
 
 		return $htmlForm;

diff --git a/includes/SpecialAnalytics.php b/includes/SpecialAnalytics.php
@@ -14,21 +14,13 @@ public function execute( $par ) {
 
 		$out = $this->getOutput();
 		$out->addWikiMsg( 'matomoanalytics-header' );
+
 		$out->addModules( [ 'ext.matomoanalytics.oouiform' ] );
+		$out->addModuleStyles( [ 'ext.matomoanalytics.oouiform.styles' ] );
+		$out->addModuleStyles( [ 'oojs-ui-widgets.styles' ] );
 
 		$analyticsViewer = new MatomoAnalyticsViewer();
 		$htmlForm = $analyticsViewer->getForm( $this->getContext() );
-		$sectionTitles = $htmlForm->getFormSections();
-
-		$sectTabs = [];
-		foreach ( $sectionTitles as $key ) {
-			$sectTabs[] = [
-				'name' => $key,
-				'label' => $htmlForm->getLegend( $key )
-			];
-		}
-
-		$out->addJsConfigVars( 'wgMatomoAnalyticsOOUIFormTabs', $sectTabs );
 
 		$htmlForm->show();
 	}

diff --git a/modules/ext.matomoanalytics.oouiform.edit.ooui.js b/modules/ext.matomoanalytics.oouiform.edit.ooui.js