r105688 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r105687‎ | r105688 | r105689 >
Date:18:40, 9 December 2011
Author:rsterbin
Status:ok
Tags:
Comment:
Moved tooltip out of the titlebar so that it can be closed from the dialog:
- modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js:
- Replaced template helpToolTip with helpToolTipTrigger
- Moved the tooltip itself into template panelOuter: the ui div now
contains ui-inner and the tooltip
- Updated loadForm() to put the form in ui-inner, separate the tooltip
setup from the tooltip trigger setup, and replace the standard link for
Learn More with a click event to get around the dialog bug preventing that
link from working as expected
- Removed the tooltip events from openAsModal()
- Updated openAsModal() and closeAsModal() to make sure the tooltip
gets hidden when switching between modes
- modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.css:
- The tooltip and its trigger now have separate wrap classes
- Updated positioning to put the tooltip back where it belongs
visually, even though it's in a totally different place in the markup
Modified paths:
  • /trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.css (modified) (history)
  • /trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js (modified) (history)

Diff [purge]

Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.css
——@@ -469,7 +469,6 @@
470470 font-weight: bold;
471471 }
472472 .articleFeedbackv5-tooltip-wrap {
473 - float: right;
474473 position: relative;
475474 }
476475 .articleFeedbackv5-tooltip-wrap:after {
——@@ -478,7 +477,7 @@
479478 .articleFeedbackv5-tooltip {
480479 position: absolute;
481480 z-index: 15;
482 - top: -160px;
 481+ top: -450px;
483482 right: -105px;
484483 font-size: 12px;
485484 width: 234px;
——@@ -518,6 +517,13 @@
519518 height: 26px;
520519 }
521520
 521+.articleFeedbackv5-tooltip-trigger-wrap {
 522+ float: right;
 523+ position: relative;
 524+}
 525+.articleFeedbackv5-tooltip-trigger-wrap:after {
 526+ clear: both;
 527+}
522528 .articleFeedbackv5-tooltip-trigger {
523529 display: block;
524530 float: left;
——@@ -798,6 +804,15 @@
799805 padding-bottom: .17em;
800806 }
801807
 808+.articleFeedbackv5-dialog.ui-dialog .articleFeedbackv5-tooltip-wrap {
 809+ position: static;
 810+}
 811+
 812+.articleFeedbackv5-dialog.ui-dialog .articleFeedbackv5-tooltip {
 813+ top: -195px;
 814+ right: -53px;
 815+}
 816+
802817 body .ui-dialog .ui-icon-closethick {
803818 text-indent: -90000px;
804819 width: 23px;
Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js
——@@ -140,12 +140,12 @@
141141 * The feedback ID (collected on submit, for use in tracking edits)
142142 */
143143 $.articleFeedbackv5.feedbackId = 0;
144 -
145 - /**
146 - * Currently displayed placeholder text for option 2. This is a workaround for Chrome/FF
147 - * behavior overlays.
148 - */
149 - $.currentDefaultText = "";
 144+
 145+ /**
 146+ * Currently displayed placeholder text for option 2. This is a workaround for Chrome/FF
 147+ * behavior overlays.
 148+ */
 149+ $.currentDefaultText = "";
150150
151151 // }}}
152152 // {{{ Templates
——@@ -158,7 +158,21 @@
159159 <div class="articleFeedbackv5-title-wrap">\
160160 <h2 class="articleFeedbackv5-title"></h2>\
161161 </div>\
162 - <div class="articleFeedbackv5-ui" />\
 162+ <div class="articleFeedbackv5-ui">\
 163+ <div class="articleFeedbackv5-ui-inner"></div>\
 164+ <div class="articleFeedbackv5-tooltip-wrap">\
 165+ <div class="articleFeedbackv5-tooltip">\
 166+ <div class="tooltip-top"></div>\
 167+ <div class="tooltip-repeat">\
 168+ <h3><html:msg key="help-tooltip-title" /></h3><span class="articleFeedbackv5-tooltip-close">X</span>\
 169+ <div class="clear"></div>\
 170+ <p class="articleFeedbackv5-tooltip-info"><html:msg key="help-tooltip-info" /></p>\
 171+ <p><a target="_blank" class="articleFeedbackv5-tooltip-link"><html:msg key="help-tooltip-linktext" />&nbsp;&gt;&gt;</a></p>\
 172+ </div>\
 173+ <div class="tooltip-bottom"></div>\
 174+ </div>\
 175+ </div>\
 176+ </div>\
163177 </div>\
164178 <div class="articleFeedbackv5-error"><div class="articleFeedbackv5-error-message"></div></div>\
165179 <div style="clear:both;"></div>\
——@@ -174,21 +188,7 @@
175189 </div>\
176190 ',
177191
178 - helpToolTip: '\
179 - <div class="articleFeedbackv5-tooltip-wrap">\
180 - <a class="articleFeedbackv5-tooltip-trigger"></a>\
181 - <div class="articleFeedbackv5-tooltip">\
182 - <div class="tooltip-top"></div>\
183 - <div class="tooltip-repeat">\
184 - <h3><html:msg key="help-tooltip-title" /></h3><span class="articleFeedbackv5-tooltip-close">X</span>\
185 - <div class="clear"></div>\
186 - <p class="articleFeedbackv5-tooltip-info"><html:msg key="help-tooltip-info" /></p>\
187 - <p><a target="_blank" class="articleFeedbackv5-tooltip-link"><html:msg key="help-tooltip-linktext" />&nbsp;&gt;&gt;</a></p>\
188 - </div>\
189 - <div class="tooltip-bottom"></div>\
190 - </div>\
191 - </div>\
192 - ',
 192+ helpToolTipTrigger: '<div class="articleFeedbackv5-tooltip-trigger-wrap"><a class="articleFeedbackv5-tooltip-trigger"></a></div>',
193193
194194 clear: '<div class="clear"></div>'
195195
——@@ -543,7 +543,7 @@
544544 // Add the tags from the options
545545 $block.find( '.articleFeedbackv5-tags ul' ).each( function () {
546546 var info = $.articleFeedbackv5.currentBucket().tagInfo;
547 - var tabIndex = 1;
 547+ var tabIndex = 1;
548548 for ( var i in info ) {
549549 var key = info[i];
550550 var comm_def_msg = 'articlefeedbackv5-bucket2-' + key + '-comment-default';
——@@ -554,7 +554,7 @@
555555 $tag.attr( 'rel', key );
556556 $tag.find( '.articleFeedbackv5-tag-input' )
557557 .attr( 'id', tag_id )
558 - .attr( 'tabindex', tabIndex++)
 558+ .attr( 'tabindex', tabIndex++)
559559 .val( key );
560560 $tag.find( '.articleFeedbackv5-tag-label' )
561561 .addClass( 'articleFeedbackv5-bucket2-' + key + '-label' )
——@@ -616,7 +616,6 @@
617617 $block.find( '.articleFeedbackv5-comment textarea' )
618618 .focus( function () {
619619 if ( $( this ).val() == $.currentDefaultText ) {
620 - console.log('in if');
621620 $( this ).val( '' );
622621 $(this).addClass( 'active' );
623622 }
——@@ -689,8 +688,8 @@
690689 }
691690 if ( empty ) {
692691 $c.val( $.articleFeedbackv5.currentBucket().commentDefault[key] );
693 - // Store default text, workaround for overlay bug in Chrome/FF
694 - $.currentDefaultText = $.articleFeedbackv5.currentBucket().commentDefault[key];
 692+ // Store default text, workaround for overlay bug in Chrome/FF
 693+ $.currentDefaultText = $.articleFeedbackv5.currentBucket().commentDefault[key];
695694 }
696695 } else {
697696 // Clear checked
——@@ -1839,10 +1838,10 @@
18401839
18411840 // Start up the block to return
18421841 var $block = $( $.articleFeedbackv5.currentCTA().templates.block );
1843 -
1844 - // Fill in the tutorial link
1845 - $block.find( '.articleFeedbackv5-confirmation-learnHow a' )
1846 - .attr( 'href', mw.msg( 'articlefeedbackv5-cta1-learn-how-url' ) );
 1842+
 1843+ // Fill in the tutorial link
 1844+ $block.find( '.articleFeedbackv5-confirmation-learnHow a' )
 1845+ .attr( 'href', mw.msg( 'articlefeedbackv5-cta1-learn-how-url' ) );
18471846
18481847 // Fill in the link
18491848 $block.find( '.articleFeedbackv5-edit-cta-link' )
——@@ -2041,13 +2040,13 @@
20422041 * @param state bool true to enable; false to disable
20432042 */
20442043 $.articleFeedbackv5.enableSubmission = function ( state ) {
2045 - // this is actually required to resolve jQuery behavior of not triggering the
2046 - // click event when .blur() occurs on the textarea and .click() is supposed to
2047 - // be triggered on the button.
2048 - if($.articleFeedbackv5.submissionEnabled == state ) {
2049 - return;
2050 - }
2051 -
 2044+ // this is actually required to resolve jQuery behavior of not triggering the
 2045+ // click event when .blur() occurs on the textarea and .click() is supposed to
 2046+ // be triggered on the button.
 2047+ if($.articleFeedbackv5.submissionEnabled == state ) {
 2048+ return;
 2049+ }
 2050+
20522051 if ( state ) {
20532052 $.articleFeedbackv5.find( '.articleFeedbackv5-submit' ).button( 'enable' );
20542053 } else {
——@@ -2105,27 +2104,33 @@
21062105 // Wrap it in a panel
21072106 var $wrapper = $( $.articleFeedbackv5.templates.panelOuter );
21082107 $wrapper.find( '.articleFeedbackv5-ui' )
2109 - .addClass( 'articleFeedbackv5-option-' + $.articleFeedbackv5.bucketId )
 2108+ .addClass( 'articleFeedbackv5-option-' + $.articleFeedbackv5.bucketId );
 2109+ $wrapper.find( '.articleFeedbackv5-ui-inner' )
21102110 .append( $block );
21112111
 2112+ // Set up the help tooltip
 2113+ $wrapper.find( '.articleFeedbackv5-tooltip-link' )
 2114+ .attr( 'href', mw.msg( 'articlefeedbackv5-help-tooltip-linkurl' ) )
 2115+ .click( function ( e ) {
 2116+ e.preventDefault();
 2117+ window.open( $( e.target ).attr( 'href' ) );
 2118+ } );
 2119+ $wrapper.find( '.articleFeedbackv5-tooltip-close' ).click( function () {
 2120+ $.articleFeedbackv5.find( '.articleFeedbackv5-tooltip' ).toggle();
 2121+ } );
 2122+ $wrapper.find( '.articleFeedbackv5-tooltip' ).hide();
 2123+
21122124 // Set the title
21132125 if ( 'getTitle' in bucket ) {
21142126 $wrapper.find( '.articleFeedbackv5-title' ).html( bucket.getTitle() );
21152127 }
21162128
2117 - // Set up the tooltip for the panel version
2118 - $wrapper.find( '.articleFeedbackv5-title-wrap' ).append( $.articleFeedbackv5.templates.helpToolTip );
2119 - $wrapper.find( '.articleFeedbackv5-tooltip-link' )
2120 - .attr( 'href', mw.msg( 'articlefeedbackv5-help-tooltip-linkurl' ) );
2121 - $wrapper.find( '.articleFeedbackv5-tooltip' ).hide();
 2129+ // Set up the tooltip trigger for the panel version
 2130+ $wrapper.find( '.articleFeedbackv5-title-wrap' ).append( $.articleFeedbackv5.templates.helpToolTipTrigger );
21222131 $wrapper.find( '.articleFeedbackv5-tooltip-trigger' ).click( function () {
2123 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-tooltip' ).toggle();
 2132+ $.articleFeedbackv5.find( '.articleFeedbackv5-tooltip' ).toggle();
21242133 } );
21252134
2126 - $wrapper.find( '.articleFeedbackv5-tooltip-close' ).click( function () {
2127 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-tooltip' ).toggle();
2128 - } );
2129 -
21302135 // Localize
21312136 $wrapper.localize( { 'prefix': 'articlefeedbackv5-' } );
21322137
——@@ -2144,7 +2149,7 @@
21452150 height: 300,
21462151 dialogClass: 'articleFeedbackv5-dialog',
21472152 resizable: false,
2148 - draggable: false,
 2153+ draggable: true,
21492154 title: $.articleFeedbackv5.currentBucket().getTitle(),
21502155 modal: true,
21512156 autoOpen: false,
——@@ -2156,13 +2161,10 @@
21572162 var $titlebar = $title.parent();
21582163 $title.addClass( 'articleFeedbackv5-title' );
21592164
2160 - // Set up the tooltip for the dialoag
2161 - $titlebar.append( $.articleFeedbackv5.templates.helpToolTip );
2162 - $titlebar.find( '.articleFeedbackv5-tooltip' ).hide();
2163 - $titlebar.find( '.articleFeedbackv5-tooltip-link' )
2164 - .attr( 'href', mw.msg( 'articlefeedbackv5-help-tooltip-linkurl' ) );
 2165+ // Set up the tooltip trigger for the dialoag
 2166+ $titlebar.append( $.articleFeedbackv5.templates.helpToolTipTrigger );
21652167 $titlebar.find( '.articleFeedbackv5-tooltip-trigger' ).click( function ( e ) {
2166 - $( e.target ).next( '.articleFeedbackv5-tooltip' ).toggle();
 2168+ $.articleFeedbackv5.find( '.articleFeedbackv5-tooltip' ).toggle();
21672169 } );
21682170 $titlebar.localize( { 'prefix': 'articlefeedbackv5-' } );
21692171
——@@ -2518,6 +2520,7 @@
25192521 var x = 'center';
25202522 // var y = o.top - h - 20;
25212523 var y = 'center';
 2524+ $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-tooltip' ).hide();
25222525 $inner = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-ui' ).detach();
25232526 $.articleFeedbackv5.$dialog.append( $inner );
25242527 $.articleFeedbackv5.$dialog.dialog( 'option', 'width', w + 25 );
——@@ -2542,6 +2545,7 @@
25432546 $.articleFeedbackv5.closeAsModal = function () {
25442547 if ( $.articleFeedbackv5.inDialog ) {
25452548 $.articleFeedbackv5.setLinkId( '0' );
 2549+ $.articleFeedbackv5.$dialog.find( '.articleFeedbackv5-tooltip' ).hide();
25462550 $inner = $.articleFeedbackv5.$dialog.find( '.articleFeedbackv5-ui' ).detach();
25472551 $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-buffer' ).append( $inner );
25482552 $.articleFeedbackv5.$holder.show();

Status & tagging log