From: Erik Bernhardson <ebernhardson@wikimedia.org>
Date: Thu, 2 May 2013 00:27:14 +0000 (-0700)
Subject: Tooltips for HTMLCheckMatrix
X-Git-Tag: 1.31.0-rc.0~19536^2
X-Git-Url: http://git.cyclocoop.org/url?a=commitdiff_plain;h=f4cfdad6ee12c07a362b123a3eee50bc09f1ab76;p=lhc%2Fweb%2Fwiklou.git

Tooltips for HTMLCheckMatrix

Generates tooltips on the columns labels of HTMLCheckMatrix.
Bug: 47094

Change-Id: I9670ecdc2cb553df07ee06e3b83b003382471d27
---

diff --git a/includes/HTMLForm.php b/includes/HTMLForm.php
index ad7574f279..e4a77a0208 100644
--- a/includes/HTMLForm.php
+++ b/includes/HTMLForm.php
@@ -1862,12 +1862,18 @@ class HTMLCheckField extends HTMLFormField {
  * are of the form "columnName-rowName"
  *
  * Options:
- *   columns:           Required list of columns in the matrix.
- *   rows:              Required list of rows in the matrix.
- *   force-options-on:  Accepts array of column-row tags to be displayed as enabled
- *                      but unavailable to change
- *   force-options-off: Accepts array of column-row tags to be displayed as disabled
- *                      but unavailable to change.
+ *   - columns
+ *     - Required list of columns in the matrix.
+ *   - rows
+ *     - Required list of rows in the matrix.
+ *   - force-options-on
+ *     - Accepts array of column-row tags to be displayed as enabled but unavailable to change
+ *   - force-options-off
+ *     - Accepts array of column-row tags to be displayed as disabled but unavailable to change.
+ *   - tooltips
+ *     - Optional array mapping row label to tooltip content
+ *   - tooltip-class
+ *     - Optional CSS class used on tooltip container span. Defaults to mw-icon-question.
  */
 class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
 
@@ -1944,8 +1950,21 @@ class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
 		}
 		$tableContents .= Html::rawElement( 'tr', array(), "\n$headerContents\n" );
 
+		$tooltipClass = 'mw-icon-question';
+		if ( isset( $this->mParams['tooltip-class'] ) ) {
+			$tooltipClass = $this->mParams['tooltip-class'];
+		}
+
 		// Build the options matrix
 		foreach ( $rows as $rowLabel => $rowTag ) {
+			// Append tooltip if configured
+			if ( isset( $this->mParams['tooltips'][$rowLabel] ) ) {
+				$tooltipAttribs = array(
+					'class' => "mw-htmlform-tooltip $tooltipClass",
+					'title' =>  $this->mParams['tooltips'][$rowLabel],
+				);
+				$rowLabel .= ' ' . Html::element( 'span', $tooltipAttribs, '' );
+			}
 			$rowContents = Html::rawElement( 'td', array(), $rowLabel );
 			foreach ( $columns as $columnTag ) {
 				$thisTag = "$columnTag-$rowTag";
diff --git a/resources/mediawiki/mediawiki.htmlform.js b/resources/mediawiki/mediawiki.htmlform.js
index 87529b4d6b..ac6f2a156b 100644
--- a/resources/mediawiki/mediawiki.htmlform.js
+++ b/resources/mediawiki/mediawiki.htmlform.js
@@ -125,4 +125,12 @@
 		} );
 	}
 
+	$( document ).ready( function() {
+		var $matrixTooltips = $( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
+		if ( $matrixTooltips.length ) {
+			mw.loader.using( 'jquery.tipsy', function () {
+				$matrixTooltips.tipsy();
+			} );
+		}
+	} );
 }( mediaWiki, jQuery ) );
diff --git a/skins/common/images/question-small.png b/skins/common/images/question-small.png
new file mode 100644
index 0000000000..590f0cb75e
Binary files /dev/null and b/skins/common/images/question-small.png differ
diff --git a/skins/common/images/question.svg b/skins/common/images/question.svg
new file mode 100644
index 0000000000..27973053ba
--- /dev/null
+++ b/skins/common/images/question.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="21.059px" height="21.06px" viewBox="0 0 21.059 21.06" enable-background="new 0 0 21.059 21.06" xml:space="preserve">
+<path fill="#575757" d="M10.529,0C4.715,0,0,4.714,0,10.529s4.715,10.53,10.529,10.53c5.816,0,10.529-4.715,10.529-10.53
+	S16.346,0,10.529,0z M10.527,16.767c-0.861,0-1.498-0.688-1.498-1.516c0-0.862,0.637-1.534,1.498-1.534c0.828,0,1.5,0.672,1.5,1.534
+	C12.027,16.078,11.355,16.767,10.527,16.767z M12.664,10.255c-0.723,0.568-1,0.931-1,1.739v0.5H9.459v-0.603
+	c0-1.517,0.449-2.136,1.154-2.688c0.707-0.552,1.139-0.845,1.139-1.637c0-0.672-0.414-1.051-1.24-1.051
+	c-0.707,0-1.328,0.189-1.982,0.638L7.479,5.346c0.861-0.604,1.93-1.034,3.342-1.034c1.912,0,3.516,1.051,3.516,3.066
+	C14.336,8.808,13.543,9.566,12.664,10.255z"/>
+</svg>
diff --git a/skins/common/shared.css b/skins/common/shared.css
index fb140b2662..d946ce2504 100644
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -235,6 +235,32 @@ td.mw-label {
 .prefsection table.mw-htmlform-matrix {
 	width: auto;
 }
+
+.mw-icon-question {
+	/* @embed */
+	background: url('images/question-small.png') no-repeat;
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG)
+	 * lifted from #pt-login css rule in skins/vector/screen.css */
+	/* @embed */
+	background: -webkit-linear-gradient(transparent, transparent), url('images/question.svg') no-repeat;
+	/* @embed */
+	background: linear-gradient(transparent, transparent), url('images/question.svg') 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);
+}
+
 td.mw-submit {
 	white-space: nowrap;
 }