From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Sat, 30 Jul 2016 23:15:07 +0000 (+0200)
Subject: Split the 'mediawiki.htmlform' module code into multiple files
X-Git-Tag: 1.31.0-rc.0~5985^2
X-Git-Url: http://git.cyclocoop.org/%24image?a=commitdiff_plain;h=e1959b29741761edf413256becd63fe692351f6c;p=lhc%2Fweb%2Fwiklou.git

Split the 'mediawiki.htmlform' module code into multiple files

This module implements several related, but separate enhancements to
HTMLForm. While it makes sense to use a single ResourceLoader module
to serve this code, it doesn't make sense to keep all of it in a
single file. It was approaching 500 lines of code, and pieces of the
separate features were mixed together.

This commit mostly shuffles code around, only tweaking some
indentation, 'var' statements and function wrappers.

There is one small functional change: the enhancements now use the
'htmlform.enhance' mw.hook, which is fired on document-ready and when
new fields are added dynamically. Previously it was only used to allow
extensions to define their own HTMLForm enhancements.

(Also moved HTMLForm styles into the same directory as the newly-split
scripts.)

Change-Id: I22054b39868239ddb59317dadfaaa067653f8804
---

diff --git a/resources/Resources.php b/resources/Resources.php
index d2ee1cdc0b..1372a8e8f0 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1068,7 +1068,16 @@ return [
 		'styles' => 'resources/src/mediawiki/mediawiki.hlist.css',
 	],
 	'mediawiki.htmlform' => [
-		'scripts' => 'resources/src/mediawiki/mediawiki.htmlform.js',
+		'scripts' => [
+			'resources/src/mediawiki/htmlform/htmlform.js',
+			'resources/src/mediawiki/htmlform/autocomplete.js',
+			'resources/src/mediawiki/htmlform/checkmatrix.js',
+			'resources/src/mediawiki/htmlform/cloner.js',
+			'resources/src/mediawiki/htmlform/hide-if.js',
+			'resources/src/mediawiki/htmlform/multiselect.js',
+			'resources/src/mediawiki/htmlform/selectandother.js',
+			'resources/src/mediawiki/htmlform/selectorother.js',
+		],
 		'dependencies' => [
 			'mediawiki.RegExp',
 			'jquery.byteLimit',
@@ -1081,12 +1090,12 @@ return [
 		'targets' => [ 'desktop', 'mobile' ],
 	],
 	'mediawiki.htmlform.styles' => [
-		'styles' => 'resources/src/mediawiki/mediawiki.htmlform.css',
+		'styles' => 'resources/src/mediawiki/htmlform/styles.css',
 		'position' => 'top',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
 	'mediawiki.htmlform.ooui.styles' => [
-		'styles' => 'resources/src/mediawiki/mediawiki.htmlform.ooui.css',
+		'styles' => 'resources/src/mediawiki/htmlform/ooui.styles.css',
 		'position' => 'top',
 		'targets' => [ 'desktop', 'mobile' ],
 	],
diff --git a/resources/src/mediawiki/htmlform/autocomplete.js b/resources/src/mediawiki/htmlform/autocomplete.js
new file mode 100644
index 0000000000..8157975560
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/autocomplete.js
@@ -0,0 +1,25 @@
+/*
+ * HTMLForm enhancements:
+ * Set up autocomplete fields.
+ */
+( function ( mw, $ ) {
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		var $autocomplete = $root.find( '.mw-htmlform-autocomplete' );
+		if ( $autocomplete.length ) {
+			mw.loader.using( 'jquery.suggestions', function () {
+				$autocomplete.suggestions( {
+					fetch: function ( val ) {
+						var $el = $( this );
+						$el.suggestions( 'suggestions',
+							$.grep( $el.data( 'autocomplete' ), function ( v ) {
+								return v.indexOf( val ) === 0;
+							} )
+						);
+					}
+				} );
+			} );
+		}
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/checkmatrix.js b/resources/src/mediawiki/htmlform/checkmatrix.js
new file mode 100644
index 0000000000..b825f12b98
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/checkmatrix.js
@@ -0,0 +1,16 @@
+/*
+ * HTMLForm enhancements:
+ * Show fancy tooltips for checkmatrix fields.
+ */
+( function ( mw ) {
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		var $matrixTooltips = $root.find( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
+		if ( $matrixTooltips.length ) {
+			mw.loader.using( 'jquery.tipsy', function () {
+				$matrixTooltips.tipsy( { gravity: 's' } );
+			} );
+		}
+	} );
+
+}( mediaWiki ) );
diff --git a/resources/src/mediawiki/htmlform/cloner.js b/resources/src/mediawiki/htmlform/cloner.js
new file mode 100644
index 0000000000..ab81580bee
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/cloner.js
@@ -0,0 +1,36 @@
+/*
+ * HTMLForm enhancements:
+ * Add/remove cloner clones without having to resubmit the form.
+ */
+( function ( mw, $ ) {
+
+	var cloneCounter = 0;
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		$root.find( '.mw-htmlform-cloner-delete-button' ).filter( ':input' ).click( function ( ev ) {
+			ev.preventDefault();
+			$( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
+		} );
+
+		$root.find( '.mw-htmlform-cloner-create-button' ).filter( ':input' ).click( function ( ev ) {
+			var $ul, $li, html;
+
+			ev.preventDefault();
+
+			$ul = $( this ).prev( 'ul.mw-htmlform-cloner-ul' );
+
+			html = $ul.data( 'template' ).replace(
+				new RegExp( mw.RegExp.escape( $ul.data( 'uniqueId' ) ), 'g' ),
+				'clone' + ( ++cloneCounter )
+			);
+
+			$li = $( '<li>' )
+				.addClass( 'mw-htmlform-cloner-li' )
+				.html( html )
+				.appendTo( $ul );
+
+			mw.hook( 'htmlform.enhance' ).fire( $li );
+		} );
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/hide-if.js b/resources/src/mediawiki/htmlform/hide-if.js
new file mode 100644
index 0000000000..f739746f83
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/hide-if.js
@@ -0,0 +1,212 @@
+/*
+ * HTMLForm enhancements:
+ * Set up 'hide-if' behaviors for form fields that have them.
+ */
+( function ( mw, $ ) {
+
+	/**
+	 * Helper function for hide-if to find the nearby form field.
+	 *
+	 * Find the closest match for the given name, "closest" being the minimum
+	 * level of parents to go to find a form field matching the given name or
+	 * ending in array keys matching the given name (e.g. "baz" matches
+	 * "foo[bar][baz]").
+	 *
+	 * @ignore
+	 * @private
+	 * @param {jQuery} $el
+	 * @param {string} name
+	 * @return {jQuery|null}
+	 */
+	function hideIfGetField( $el, name ) {
+		var $found, $p,
+			suffix = name.replace( /^([^\[]+)/, '[$1]' );
+
+		function nameFilter() {
+			return this.name === name ||
+				( this.name === ( 'wp' + name ) ) ||
+				this.name.slice( -suffix.length ) === suffix;
+		}
+
+		for ( $p = $el.parent(); $p.length > 0; $p = $p.parent() ) {
+			$found = $p.find( '[name]' ).filter( nameFilter );
+			if ( $found.length ) {
+				return $found;
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * Helper function for hide-if to return a test function and list of
+	 * dependent fields for a hide-if specification.
+	 *
+	 * @ignore
+	 * @private
+	 * @param {jQuery} $el
+	 * @param {Array} spec
+	 * @return {Array}
+	 * @return {jQuery} return.0 Dependent fields
+	 * @return {Function} return.1 Test function
+	 */
+	function hideIfParse( $el, spec ) {
+		var op, i, l, v, $field, $fields, fields, func, funcs, getVal;
+
+		op = spec[ 0 ];
+		l = spec.length;
+		switch ( op ) {
+			case 'AND':
+			case 'OR':
+			case 'NAND':
+			case 'NOR':
+				funcs = [];
+				fields = [];
+				for ( i = 1; i < l; i++ ) {
+					if ( !$.isArray( spec[ i ] ) ) {
+						throw new Error( op + ' parameters must be arrays' );
+					}
+					v = hideIfParse( $el, spec[ i ] );
+					fields = fields.concat( v[ 0 ].toArray() );
+					funcs.push( v[ 1 ] );
+				}
+				$fields = $( fields );
+
+				l = funcs.length;
+				switch ( op ) {
+					case 'AND':
+						func = function () {
+							var i;
+							for ( i = 0; i < l; i++ ) {
+								if ( !funcs[ i ]() ) {
+									return false;
+								}
+							}
+							return true;
+						};
+						break;
+
+					case 'OR':
+						func = function () {
+							var i;
+							for ( i = 0; i < l; i++ ) {
+								if ( funcs[ i ]() ) {
+									return true;
+								}
+							}
+							return false;
+						};
+						break;
+
+					case 'NAND':
+						func = function () {
+							var i;
+							for ( i = 0; i < l; i++ ) {
+								if ( !funcs[ i ]() ) {
+									return true;
+								}
+							}
+							return false;
+						};
+						break;
+
+					case 'NOR':
+						func = function () {
+							var i;
+							for ( i = 0; i < l; i++ ) {
+								if ( funcs[ i ]() ) {
+									return false;
+								}
+							}
+							return true;
+						};
+						break;
+				}
+
+				return [ $fields, func ];
+
+			case 'NOT':
+				if ( l !== 2 ) {
+					throw new Error( 'NOT takes exactly one parameter' );
+				}
+				if ( !$.isArray( spec[ 1 ] ) ) {
+					throw new Error( 'NOT parameters must be arrays' );
+				}
+				v = hideIfParse( $el, spec[ 1 ] );
+				$fields = v[ 0 ];
+				func = v[ 1 ];
+				return [ $fields, function () {
+					return !func();
+				} ];
+
+			case '===':
+			case '!==':
+				if ( l !== 3 ) {
+					throw new Error( op + ' takes exactly two parameters' );
+				}
+				$field = hideIfGetField( $el, spec[ 1 ] );
+				if ( !$field ) {
+					return [ $(), function () {
+						return false;
+					} ];
+				}
+				v = spec[ 2 ];
+
+				if ( $field.first().prop( 'type' ) === 'radio' ||
+					$field.first().prop( 'type' ) === 'checkbox'
+				) {
+					getVal = function () {
+						var $selected = $field.filter( ':checked' );
+						return $selected.length ? $selected.val() : '';
+					};
+				} else {
+					getVal = function () {
+						return $field.val();
+					};
+				}
+
+				switch ( op ) {
+					case '===':
+						func = function () {
+							return getVal() === v;
+						};
+						break;
+					case '!==':
+						func = function () {
+							return getVal() !== v;
+						};
+						break;
+				}
+
+				return [ $field, func ];
+
+			default:
+				throw new Error( 'Unrecognized operation \'' + op + '\'' );
+		}
+	}
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		$root.find( '.mw-htmlform-hide-if' ).each( function () {
+			var v, $fields, test, func,
+				$el = $( this ),
+				spec = $el.data( 'hideIf' );
+
+			if ( !spec ) {
+				return;
+			}
+
+			v = hideIfParse( $el, spec );
+			$fields = v[ 0 ];
+			test = v[ 1 ];
+			func = function () {
+				if ( test() ) {
+					$el.hide();
+				} else {
+					$el.show();
+				}
+			};
+			$fields.on( 'change', func );
+			func();
+		} );
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/htmlform.js b/resources/src/mediawiki/htmlform/htmlform.js
new file mode 100644
index 0000000000..19f8f3ece5
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/htmlform.js
@@ -0,0 +1,7 @@
+( function ( mw, $ ) {
+
+	$( function () {
+		mw.hook( 'htmlform.enhance' ).fire( $( document ) );
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/images/question.png b/resources/src/mediawiki/htmlform/images/question.png
new file mode 100644
index 0000000000..acce58c8ce
Binary files /dev/null and b/resources/src/mediawiki/htmlform/images/question.png differ
diff --git a/resources/src/mediawiki/htmlform/images/question.svg b/resources/src/mediawiki/htmlform/images/question.svg
new file mode 100644
index 0000000000..98fbe8dd75
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/images/question.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="21.059" height="21.06"><path fill="#575757" d="M10.529 0c-5.814 0-10.529 4.714-10.529 10.529s4.715 10.53 10.529 10.53c5.816 0 10.529-4.715 10.529-10.53s-4.712-10.529-10.529-10.529zm-.002 16.767c-.861 0-1.498-.688-1.498-1.516 0-.862.637-1.534 1.498-1.534.828 0 1.5.672 1.5 1.534 0 .827-.672 1.516-1.5 1.516zm2.137-6.512c-.723.568-1 .931-1 1.739v.5h-2.205v-.603c0-1.517.449-2.136 1.154-2.688.707-.552 1.139-.845 1.139-1.637 0-.672-.414-1.051-1.24-1.051-.707 0-1.328.189-1.982.638l-1.051-1.807c.861-.604 1.93-1.034 3.342-1.034 1.912 0 3.516 1.051 3.516 3.066-.001 1.43-.794 2.188-1.673 2.877z"/></svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki/htmlform/multiselect.js b/resources/src/mediawiki/htmlform/multiselect.js
new file mode 100644
index 0000000000..3cdab3c63c
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/multiselect.js
@@ -0,0 +1,67 @@
+/*
+ * HTMLForm enhancements:
+ * Convert multiselect fields from checkboxes to Chosen selector when requested.
+ */
+( function ( mw, $ ) {
+
+	function addMulti( $oldContainer, $container ) {
+		var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
+			oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
+			$select = $( '<select>' ),
+			dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
+		oldClass = $.trim( oldClass );
+		$select.attr( {
+			name: name,
+			multiple: 'multiple',
+			'data-placeholder': dataPlaceholder.plain(),
+			'class': 'htmlform-chzn-select mw-input ' + oldClass
+		} );
+		$oldContainer.find( 'input' ).each( function () {
+			var $oldInput = $( this ),
+			checked = $oldInput.prop( 'checked' ),
+			$option = $( '<option>' );
+			$option.prop( 'value', $oldInput.prop( 'value' ) );
+			if ( checked ) {
+				$option.prop( 'selected', true );
+			}
+			$option.text( $oldInput.prop( 'value' ) );
+			$select.append( $option );
+		} );
+		$container.append( $select );
+	}
+
+	function convertCheckboxesToMulti( $oldContainer, type ) {
+		var $fieldLabel = $( '<td>' ),
+		$td = $( '<td>' ),
+		$fieldLabelText = $( '<label>' ),
+		$container;
+		if ( type === 'tr' ) {
+			addMulti( $oldContainer, $td );
+			$container = $( '<tr>' );
+			$container.append( $td );
+		} else if ( type === 'div' ) {
+			$fieldLabel = $( '<div>' );
+			$container = $( '<div>' );
+			addMulti( $oldContainer, $container );
+		}
+		$fieldLabel.attr( 'class', 'mw-label' );
+		$fieldLabelText.text( $oldContainer.find( '.mw-label label' ).text() );
+		$fieldLabel.append( $fieldLabelText );
+		$container.prepend( $fieldLabel );
+		$oldContainer.replaceWith( $container );
+		return $container;
+	}
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		if ( $root.find( '.mw-chosen' ).length ) {
+			mw.loader.using( 'jquery.chosen', function () {
+				$root.find( '.mw-chosen' ).each( function () {
+					var type = this.nodeName.toLowerCase(),
+						$converted = convertCheckboxesToMulti( $( this ), type );
+					$converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
+				} );
+			} );
+		}
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/ooui.styles.css b/resources/src/mediawiki/htmlform/ooui.styles.css
new file mode 100644
index 0000000000..a9e75d7163
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/ooui.styles.css
@@ -0,0 +1,29 @@
+/* OOUIHTMLForm styles */
+
+.mw-htmlform-ooui-wrapper {
+	margin: 1em 0;
+}
+
+.mw-htmlform-ooui .mw-htmlform-submit-buttons {
+	margin-top: 1em;
+}
+
+.mw-htmlform-ooui .mw-htmlform-field-HTMLCheckMatrix,
+.mw-htmlform-ooui .mw-htmlform-matrix,
+.mw-htmlform-ooui .mw-htmlform-matrix tr {
+	width: 100%;
+}
+
+.mw-htmlform-ooui .mw-htmlform-matrix tr td.first {
+	margin-right: 5%;
+	width: 39%;
+}
+
+/* Flatlist styling for PHP widgets... */
+.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
+/* ...and for JS widgets */
+.mw-htmlform-flatlist .oo-ui-optionWidget,
+.mw-htmlform-flatlist .oo-ui-multioptionWidget {
+	display: inline-block;
+	margin-right: 1em;
+}
diff --git a/resources/src/mediawiki/htmlform/selectandother.js b/resources/src/mediawiki/htmlform/selectandother.js
new file mode 100644
index 0000000000..95227d0194
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/selectandother.js
@@ -0,0 +1,41 @@
+/*
+ * HTMLForm enhancements:
+ * Add a dynamic max length to the reason field of SelectAndOther.
+ */
+( function ( mw, $ ) {
+
+	// cache the separator to avoid object creation on each keypress
+	var colonSeparator = mw.message( 'colon-separator' ).text();
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		// This checks the length together with the value from the select field
+		// When the reason list is changed and the bytelimit is longer than the allowed,
+		// nothing is done
+		$root
+			.find( '.mw-htmlform-select-and-other-field' )
+			.each( function () {
+				var $this = $( this ),
+					// find the reason list
+					$reasonList = $root.find( '#' + $this.data( 'id-select' ) ),
+					// cache the current selection to avoid expensive lookup
+					currentValReasonList = $reasonList.val();
+
+				$reasonList.change( function () {
+					currentValReasonList = $reasonList.val();
+				} );
+
+				$this.byteLimit( function ( input ) {
+					// Should be built the same as in HTMLSelectAndOtherField::loadDataFromRequest
+					var comment = currentValReasonList;
+					if ( comment === 'other' ) {
+						comment = input;
+					} else if ( input !== '' ) {
+						// Entry from drop down menu + additional comment
+						comment += colonSeparator + input;
+					}
+					return comment;
+				} );
+			} );
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/selectorother.js b/resources/src/mediawiki/htmlform/selectorother.js
new file mode 100644
index 0000000000..66879e9e14
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/selectorother.js
@@ -0,0 +1,61 @@
+/*
+ * HTMLForm enhancements:
+ * Animate the SelectOrOther fields, to only show the text field when 'other' is selected.
+ */
+( function ( mw, $ ) {
+
+	/**
+	 * @class jQuery.plugin.htmlform
+	 */
+
+	/**
+	 * jQuery plugin to fade or snap to visible state.
+	 *
+	 * @param {boolean} [instantToggle=false]
+	 * @return {jQuery}
+	 * @chainable
+	 */
+	$.fn.goIn = function ( instantToggle ) {
+		if ( instantToggle === true ) {
+			return this.show();
+		}
+		return this.stop( true, true ).fadeIn();
+	};
+
+	/**
+	 * jQuery plugin to fade or snap to hiding state.
+	 *
+	 * @param {boolean} [instantToggle=false]
+	 * @return {jQuery}
+	 * @chainable
+	 */
+	$.fn.goOut = function ( instantToggle ) {
+		if ( instantToggle === true ) {
+			return this.hide();
+		}
+		return this.stop( true, true ).fadeOut();
+	};
+
+	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
+		/**
+		 * @ignore
+		 * @param {boolean|jQuery.Event} instant
+		 */
+		function handleSelectOrOther( instant ) {
+			var $other = $root.find( '#' + $( this ).attr( 'id' ) + '-other' );
+			$other = $other.add( $other.siblings( 'br' ) );
+			if ( $( this ).val() === 'other' ) {
+				$other.goIn( instant );
+			} else {
+				$other.goOut( instant );
+			}
+		}
+
+		$root
+			.on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther )
+			.each( function () {
+				handleSelectOrOther.call( this, true );
+			} );
+	} );
+
+}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/htmlform/styles.css b/resources/src/mediawiki/htmlform/styles.css
new file mode 100644
index 0000000000..1603130f40
--- /dev/null
+++ b/resources/src/mediawiki/htmlform/styles.css
@@ -0,0 +1,49 @@
+/* HTMLForm styles */
+
+table.mw-htmlform-nolabel td.mw-label {
+	display: none;
+}
+
+.mw-htmlform-invalid-input td.mw-input input {
+	border-color: #f00;
+}
+
+.mw-htmlform-flatlist div.mw-htmlform-flatlist-item {
+	display: inline;
+	margin-right: 1em;
+	white-space: nowrap;
+}
+
+/* HTMLCheckMatrix */
+
+.mw-htmlform-matrix td {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+}
+
+tr.mw-htmlform-vertical-label td.mw-label {
+	text-align: left !important;
+}
+
+.mw-icon-question {
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG).
+	 * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
+	background-image: url( images/question.png );
+	/* @embed */
+	background-image: linear-gradient( transparent, transparent ), url( images/question.svg );
+	background-repeat: no-repeat;
+	background-size: 13px 13px;
+	display: inline-block;
+	height: 13px;
+	width: 13px;
+	margin-left: 4px;
+}
+
+.mw-icon-question:lang(ar),
+.mw-icon-question:lang(fa),
+.mw-icon-question:lang(ur) {
+	-webkit-transform: scaleX( -1 );
+	-ms-transform: scaleX( -1 );
+	transform: scaleX( -1 );
+}
diff --git a/resources/src/mediawiki/images/question.png b/resources/src/mediawiki/images/question.png
deleted file mode 100644
index acce58c8ce..0000000000
Binary files a/resources/src/mediawiki/images/question.png and /dev/null differ
diff --git a/resources/src/mediawiki/images/question.svg b/resources/src/mediawiki/images/question.svg
deleted file mode 100644
index 98fbe8dd75..0000000000
--- a/resources/src/mediawiki/images/question.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="21.059" height="21.06"><path fill="#575757" d="M10.529 0c-5.814 0-10.529 4.714-10.529 10.529s4.715 10.53 10.529 10.53c5.816 0 10.529-4.715 10.529-10.53s-4.712-10.529-10.529-10.529zm-.002 16.767c-.861 0-1.498-.688-1.498-1.516 0-.862.637-1.534 1.498-1.534.828 0 1.5.672 1.5 1.534 0 .827-.672 1.516-1.5 1.516zm2.137-6.512c-.723.568-1 .931-1 1.739v.5h-2.205v-.603c0-1.517.449-2.136 1.154-2.688.707-.552 1.139-.845 1.139-1.637 0-.672-.414-1.051-1.24-1.051-.707 0-1.328.189-1.982.638l-1.051-1.807c.861-.604 1.93-1.034 3.342-1.034 1.912 0 3.516 1.051 3.516 3.066-.001 1.43-.794 2.188-1.673 2.877z"/></svg>
\ No newline at end of file
diff --git a/resources/src/mediawiki/mediawiki.htmlform.css b/resources/src/mediawiki/mediawiki.htmlform.css
deleted file mode 100644
index 1603130f40..0000000000
--- a/resources/src/mediawiki/mediawiki.htmlform.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/* HTMLForm styles */
-
-table.mw-htmlform-nolabel td.mw-label {
-	display: none;
-}
-
-.mw-htmlform-invalid-input td.mw-input input {
-	border-color: #f00;
-}
-
-.mw-htmlform-flatlist div.mw-htmlform-flatlist-item {
-	display: inline;
-	margin-right: 1em;
-	white-space: nowrap;
-}
-
-/* HTMLCheckMatrix */
-
-.mw-htmlform-matrix td {
-	padding-left: 0.5em;
-	padding-right: 0.5em;
-}
-
-tr.mw-htmlform-vertical-label td.mw-label {
-	text-align: left !important;
-}
-
-.mw-icon-question {
-	/* SVG support using a transparent gradient to guarantee cross-browser
-	 * compatibility (browsers able to understand gradient syntax support also SVG).
-	 * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
-	background-image: url( images/question.png );
-	/* @embed */
-	background-image: linear-gradient( transparent, transparent ), url( images/question.svg );
-	background-repeat: no-repeat;
-	background-size: 13px 13px;
-	display: inline-block;
-	height: 13px;
-	width: 13px;
-	margin-left: 4px;
-}
-
-.mw-icon-question:lang(ar),
-.mw-icon-question:lang(fa),
-.mw-icon-question:lang(ur) {
-	-webkit-transform: scaleX( -1 );
-	-ms-transform: scaleX( -1 );
-	transform: scaleX( -1 );
-}
diff --git a/resources/src/mediawiki/mediawiki.htmlform.js b/resources/src/mediawiki/mediawiki.htmlform.js
deleted file mode 100644
index c3464ea8f8..0000000000
--- a/resources/src/mediawiki/mediawiki.htmlform.js
+++ /dev/null
@@ -1,417 +0,0 @@
-/**
- * Utility functions for jazzing up HTMLForm elements.
- *
- * @class jQuery.plugin.htmlform
- */
-( function ( mw, $ ) {
-
-	var cloneCounter = 0;
-
-	/**
-	 * Helper function for hide-if to find the nearby form field.
-	 *
-	 * Find the closest match for the given name, "closest" being the minimum
-	 * level of parents to go to find a form field matching the given name or
-	 * ending in array keys matching the given name (e.g. "baz" matches
-	 * "foo[bar][baz]").
-	 *
-	 * @private
-	 * @param {jQuery} $el
-	 * @param {string} name
-	 * @return {jQuery|null}
-	 */
-	function hideIfGetField( $el, name ) {
-		var $found, $p,
-			suffix = name.replace( /^([^\[]+)/, '[$1]' );
-
-		function nameFilter() {
-			return this.name === name ||
-				( this.name === ( 'wp' + name ) ) ||
-				this.name.slice( -suffix.length ) === suffix;
-		}
-
-		for ( $p = $el.parent(); $p.length > 0; $p = $p.parent() ) {
-			$found = $p.find( '[name]' ).filter( nameFilter );
-			if ( $found.length ) {
-				return $found;
-			}
-		}
-		return null;
-	}
-
-	/**
-	 * Helper function for hide-if to return a test function and list of
-	 * dependent fields for a hide-if specification.
-	 *
-	 * @private
-	 * @param {jQuery} $el
-	 * @param {Array} spec
-	 * @return {Array}
-	 * @return {jQuery} return.0 Dependent fields
-	 * @return {Function} return.1 Test function
-	 */
-	function hideIfParse( $el, spec ) {
-		var op, i, l, v, $field, $fields, fields, func, funcs, getVal;
-
-		op = spec[ 0 ];
-		l = spec.length;
-		switch ( op ) {
-			case 'AND':
-			case 'OR':
-			case 'NAND':
-			case 'NOR':
-				funcs = [];
-				fields = [];
-				for ( i = 1; i < l; i++ ) {
-					if ( !$.isArray( spec[ i ] ) ) {
-						throw new Error( op + ' parameters must be arrays' );
-					}
-					v = hideIfParse( $el, spec[ i ] );
-					fields = fields.concat( v[ 0 ].toArray() );
-					funcs.push( v[ 1 ] );
-				}
-				$fields = $( fields );
-
-				l = funcs.length;
-				switch ( op ) {
-					case 'AND':
-						func = function () {
-							var i;
-							for ( i = 0; i < l; i++ ) {
-								if ( !funcs[ i ]() ) {
-									return false;
-								}
-							}
-							return true;
-						};
-						break;
-
-					case 'OR':
-						func = function () {
-							var i;
-							for ( i = 0; i < l; i++ ) {
-								if ( funcs[ i ]() ) {
-									return true;
-								}
-							}
-							return false;
-						};
-						break;
-
-					case 'NAND':
-						func = function () {
-							var i;
-							for ( i = 0; i < l; i++ ) {
-								if ( !funcs[ i ]() ) {
-									return true;
-								}
-							}
-							return false;
-						};
-						break;
-
-					case 'NOR':
-						func = function () {
-							var i;
-							for ( i = 0; i < l; i++ ) {
-								if ( funcs[ i ]() ) {
-									return false;
-								}
-							}
-							return true;
-						};
-						break;
-				}
-
-				return [ $fields, func ];
-
-			case 'NOT':
-				if ( l !== 2 ) {
-					throw new Error( 'NOT takes exactly one parameter' );
-				}
-				if ( !$.isArray( spec[ 1 ] ) ) {
-					throw new Error( 'NOT parameters must be arrays' );
-				}
-				v = hideIfParse( $el, spec[ 1 ] );
-				$fields = v[ 0 ];
-				func = v[ 1 ];
-				return [ $fields, function () {
-					return !func();
-				} ];
-
-			case '===':
-			case '!==':
-				if ( l !== 3 ) {
-					throw new Error( op + ' takes exactly two parameters' );
-				}
-				$field = hideIfGetField( $el, spec[ 1 ] );
-				if ( !$field ) {
-					return [ $(), function () {
-						return false;
-					} ];
-				}
-				v = spec[ 2 ];
-
-				if ( $field.first().prop( 'type' ) === 'radio' ||
-					$field.first().prop( 'type' ) === 'checkbox'
-				) {
-					getVal = function () {
-						var $selected = $field.filter( ':checked' );
-						return $selected.length ? $selected.val() : '';
-					};
-				} else {
-					getVal = function () {
-						return $field.val();
-					};
-				}
-
-				switch ( op ) {
-					case '===':
-						func = function () {
-							return getVal() === v;
-						};
-						break;
-					case '!==':
-						func = function () {
-							return getVal() !== v;
-						};
-						break;
-				}
-
-				return [ $field, func ];
-
-			default:
-				throw new Error( 'Unrecognized operation \'' + op + '\'' );
-		}
-	}
-
-	/**
-	 * jQuery plugin to fade or snap to visible state.
-	 *
-	 * @param {boolean} [instantToggle=false]
-	 * @return {jQuery}
-	 * @chainable
-	 */
-	$.fn.goIn = function ( instantToggle ) {
-		if ( instantToggle === true ) {
-			return this.show();
-		}
-		return this.stop( true, true ).fadeIn();
-	};
-
-	/**
-	 * jQuery plugin to fade or snap to hiding state.
-	 *
-	 * @param {boolean} [instantToggle=false]
-	 * @return {jQuery}
-	 * @chainable
-	 */
-	$.fn.goOut = function ( instantToggle ) {
-		if ( instantToggle === true ) {
-			return this.hide();
-		}
-		return this.stop( true, true ).fadeOut();
-	};
-
-	function enhance( $root ) {
-		var $matrixTooltips, $autocomplete,
-			// cache the separator to avoid object creation on each keypress
-			colonSeparator = mw.message( 'colon-separator' ).text();
-
-		/**
-		 * @ignore
-		 * @param {boolean|jQuery.Event} instant
-		 */
-		function handleSelectOrOther( instant ) {
-			var $other = $root.find( '#' + $( this ).attr( 'id' ) + '-other' );
-			$other = $other.add( $other.siblings( 'br' ) );
-			if ( $( this ).val() === 'other' ) {
-				$other.goIn( instant );
-			} else {
-				$other.goOut( instant );
-			}
-		}
-
-		// Animate the SelectOrOther fields, to only show the text field when
-		// 'other' is selected.
-		$root
-			.on( 'change', '.mw-htmlform-select-or-other', handleSelectOrOther )
-			.each( function () {
-				handleSelectOrOther.call( this, true );
-			} );
-
-		// Add a dynamic max length to the reason field of SelectAndOther
-		// This checks the length together with the value from the select field
-		// When the reason list is changed and the bytelimit is longer than the allowed,
-		// nothing is done
-		$root
-			.find( '.mw-htmlform-select-and-other-field' )
-			.each( function () {
-				var $this = $( this ),
-					// find the reason list
-					$reasonList = $root.find( '#' + $this.data( 'id-select' ) ),
-					// cache the current selection to avoid expensive lookup
-					currentValReasonList = $reasonList.val();
-
-				$reasonList.change( function () {
-					currentValReasonList = $reasonList.val();
-				} );
-
-				$this.byteLimit( function ( input ) {
-					// Should be built the same as in HTMLSelectAndOtherField::loadDataFromRequest
-					var comment = currentValReasonList;
-					if ( comment === 'other' ) {
-						comment = input;
-					} else if ( input !== '' ) {
-						// Entry from drop down menu + additional comment
-						comment += colonSeparator + input;
-					}
-					return comment;
-				} );
-			} );
-
-		// Set up hide-if elements
-		$root.find( '.mw-htmlform-hide-if' ).each( function () {
-			var v, $fields, test, func,
-				$el = $( this ),
-				spec = $el.data( 'hideIf' );
-
-			if ( !spec ) {
-				return;
-			}
-
-			v = hideIfParse( $el, spec );
-			$fields = v[ 0 ];
-			test = v[ 1 ];
-			func = function () {
-				if ( test() ) {
-					$el.hide();
-				} else {
-					$el.show();
-				}
-			};
-			$fields.on( 'change', func );
-			func();
-		} );
-
-		function addMulti( $oldContainer, $container ) {
-			var name = $oldContainer.find( 'input:first-child' ).attr( 'name' ),
-				oldClass = ( ' ' + $oldContainer.attr( 'class' ) + ' ' ).replace( /(mw-htmlform-field-HTMLMultiSelectField|mw-chosen)/g, '' ),
-				$select = $( '<select>' ),
-				dataPlaceholder = mw.message( 'htmlform-chosen-placeholder' );
-			oldClass = $.trim( oldClass );
-			$select.attr( {
-				name: name,
-				multiple: 'multiple',
-				'data-placeholder': dataPlaceholder.plain(),
-				'class': 'htmlform-chzn-select mw-input ' + oldClass
-			} );
-			$oldContainer.find( 'input' ).each( function () {
-				var $oldInput = $( this ),
-				checked = $oldInput.prop( 'checked' ),
-				$option = $( '<option>' );
-				$option.prop( 'value', $oldInput.prop( 'value' ) );
-				if ( checked ) {
-					$option.prop( 'selected', true );
-				}
-				$option.text( $oldInput.prop( 'value' ) );
-				$select.append( $option );
-			} );
-			$container.append( $select );
-		}
-
-		function convertCheckboxesToMulti( $oldContainer, type ) {
-			var $fieldLabel = $( '<td>' ),
-			$td = $( '<td>' ),
-			$fieldLabelText = $( '<label>' ),
-			$container;
-			if ( type === 'tr' ) {
-				addMulti( $oldContainer, $td );
-				$container = $( '<tr>' );
-				$container.append( $td );
-			} else if ( type === 'div' ) {
-				$fieldLabel = $( '<div>' );
-				$container = $( '<div>' );
-				addMulti( $oldContainer, $container );
-			}
-			$fieldLabel.attr( 'class', 'mw-label' );
-			$fieldLabelText.text( $oldContainer.find( '.mw-label label' ).text() );
-			$fieldLabel.append( $fieldLabelText );
-			$container.prepend( $fieldLabel );
-			$oldContainer.replaceWith( $container );
-			return $container;
-		}
-
-		if ( $root.find( '.mw-chosen' ).length ) {
-			mw.loader.using( 'jquery.chosen', function () {
-				$root.find( '.mw-chosen' ).each( function () {
-					var type = this.nodeName.toLowerCase(),
-						$converted = convertCheckboxesToMulti( $( this ), type );
-					$converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
-				} );
-			} );
-		}
-
-		$matrixTooltips = $root.find( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
-		if ( $matrixTooltips.length ) {
-			mw.loader.using( 'jquery.tipsy', function () {
-				$matrixTooltips.tipsy( { gravity: 's' } );
-			} );
-		}
-
-		// Set up autocomplete fields
-		$autocomplete = $root.find( '.mw-htmlform-autocomplete' );
-		if ( $autocomplete.length ) {
-			mw.loader.using( 'jquery.suggestions', function () {
-				$autocomplete.suggestions( {
-					fetch: function ( val ) {
-						var $el = $( this );
-						$el.suggestions( 'suggestions',
-							$.grep( $el.data( 'autocomplete' ), function ( v ) {
-								return v.indexOf( val ) === 0;
-							} )
-						);
-					}
-				} );
-			} );
-		}
-
-		// Add/remove cloner clones without having to resubmit the form
-		$root.find( '.mw-htmlform-cloner-delete-button' ).filter( ':input' ).click( function ( ev ) {
-			ev.preventDefault();
-			$( this ).closest( 'li.mw-htmlform-cloner-li' ).remove();
-		} );
-
-		$root.find( '.mw-htmlform-cloner-create-button' ).filter( ':input' ).click( function ( ev ) {
-			var $ul, $li, html;
-
-			ev.preventDefault();
-
-			$ul = $( this ).prev( 'ul.mw-htmlform-cloner-ul' );
-
-			html = $ul.data( 'template' ).replace(
-				new RegExp( mw.RegExp.escape( $ul.data( 'uniqueId' ) ), 'g' ),
-				'clone' + ( ++cloneCounter )
-			);
-
-			$li = $( '<li>' )
-				.addClass( 'mw-htmlform-cloner-li' )
-				.html( html )
-				.appendTo( $ul );
-
-			enhance( $li );
-		} );
-
-		mw.hook( 'htmlform.enhance' ).fire( $root );
-
-	}
-
-	$( function () {
-		enhance( $( document ) );
-	} );
-
-	/**
-	 * @class jQuery
-	 * @mixins jQuery.plugin.htmlform
-	 */
-}( mediaWiki, jQuery ) );
diff --git a/resources/src/mediawiki/mediawiki.htmlform.ooui.css b/resources/src/mediawiki/mediawiki.htmlform.ooui.css
deleted file mode 100644
index a9e75d7163..0000000000
--- a/resources/src/mediawiki/mediawiki.htmlform.ooui.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* OOUIHTMLForm styles */
-
-.mw-htmlform-ooui-wrapper {
-	margin: 1em 0;
-}
-
-.mw-htmlform-ooui .mw-htmlform-submit-buttons {
-	margin-top: 1em;
-}
-
-.mw-htmlform-ooui .mw-htmlform-field-HTMLCheckMatrix,
-.mw-htmlform-ooui .mw-htmlform-matrix,
-.mw-htmlform-ooui .mw-htmlform-matrix tr {
-	width: 100%;
-}
-
-.mw-htmlform-ooui .mw-htmlform-matrix tr td.first {
-	margin-right: 5%;
-	width: 39%;
-}
-
-/* Flatlist styling for PHP widgets... */
-.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-/* ...and for JS widgets */
-.mw-htmlform-flatlist .oo-ui-optionWidget,
-.mw-htmlform-flatlist .oo-ui-multioptionWidget {
-	display: inline-block;
-	margin-right: 1em;
-}