From f4cfdad6ee12c07a362b123a3eee50bc09f1ab76 Mon Sep 17 00:00:00 2001 From: Erik Bernhardson Date: Wed, 1 May 2013 17:27:14 -0700 Subject: [PATCH] Tooltips for HTMLCheckMatrix Generates tooltips on the columns labels of HTMLCheckMatrix. Bug: 47094 Change-Id: I9670ecdc2cb553df07ee06e3b83b003382471d27 --- includes/HTMLForm.php | 31 +++++++++++++++++----- resources/mediawiki/mediawiki.htmlform.js | 8 ++++++ skins/common/images/question-small.png | Bin 0 -> 441 bytes skins/common/images/question.svg | 12 +++++++++ skins/common/shared.css | 26 ++++++++++++++++++ 5 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 skins/common/images/question-small.png create mode 100644 skins/common/images/question.svg 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 0000000000000000000000000000000000000000..590f0cb75eb88358c70b675a8e686e5c170b2fe8 GIT binary patch literal 441 zcmV;q0Y?6bP)z%13?s=xonxv!q&!gA|y?a0}D(0-2H%H;~xY( z;aaUvEp6_Ow1N;6OPjL{;lLjd&qk{dcWgG{SW`LO+nIT@kM}4EE5vc!CwVGq0H6n; zCRs_!@;rZC=_m=K(WpamOmYms;4hYvQb}o9mOlXiI78AhEC4)9dUv%UnYgCt%;)ny z$vXgn6TDe#cZ;I9p3P=gP1E!M?78OQWHPyD9LG13PQ33t0@$|J9+KQA`Lv#gybavY zK8^s?Wm$fbJZKY=28^QU3qaR1Ev&U$B!?s)0CZa1cL1Q?kn~}U2}xdh1^}o7lGO%N z*IIiFV8m jB8;TaOGwwc|J>d$0hOH9u7Ux_00000NkvXXu0mjfv#7GZ literal 0 HcmV?d00001 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 @@ + + + + + + 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; } -- 2.20.1