r104913 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r104912‎ | r104913 | r104914 >
Date:23:04, 1 December 2011
Author:rsterbin
Status:deferred
Tags:
Comment:
Overlay no longer grabs the whole panel; instead, each form option has a title
and content. This means that it you can now drag the form to see more text.
- modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js:
- Put the title markup into panelOuter template
- New template dialogInner
- Removed the title from each bucket's block template
- New method on every bucket: getTitle()
- New property for bucket 5: inReport
- Updated switch functionailty in bucket 5 to set and use it
- Removed old (non-functional) expire handling from bucket 5
- Updated loadForm() to add the tooltip
- Moved localize() call from each bucket into loadForm()
- Updated openAsModal() to take the link element itself rather than the
link ID; this will allow us to get its offset
- Instead of opening/closing the dialog, openAsModal() and
closeAsModal() create and destroy it -- this is because you can't reset the
position on an existing dialog.
- Added tooltip creation to openAsModal()
- modules/ext.articleFeedbackv5/ext.articleFeedbackv5.js:
- Updated clickFeedbackLink() to send the link element rather than the
link ID
- modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.css:
- Updated styles to work with the new markup
* NB: Still need to style the close button with the gray round image
instead of the jquery default
Modified paths:
  • /trunk/extensions/ArticleFeedbackv5/modules/ext.articleFeedbackv5/ext.articleFeedbackv5.js (modified) (history)
  • /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
——@@ -404,7 +404,9 @@
405405 padding-left: 28px;
406406 color: #777777;
407407 }
 408+
408409 /*---===<<< Sean's Version 5 Styles >>>===---*/
 410+
409411 .clear {
410412 display: block !important;
411413 height: 0 !important;
——@@ -414,12 +416,34 @@
415417 width: 100% !important;
416418 border: none !important;
417419 }
418 -/* tooltip styling. by default the element to be styled is .tooltip */
419 -.articleFeedbackv5-panel .title-wrap {
 420+
 421+.articleFeedbackv5-panel {
 422+ width: 598px;
 423+ background: #f5faff;
 424+ border: 1px solid #ccc;
 425+ color: #000;
 426+}
 427+
 428+.articleFeedbackv5-panel .articleFeedback-buffer {
 429+ padding: 20px;
 430+}
 431+
 432+.articleFeedbackv5-panel .articleFeedbackv5-title-wrap {
420433 position: relative;
 434+ display: block;
421435 }
422 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip {
423 - display: none;
 436+
 437+.articleFeedbackv5-panel .articleFeedbackv5-ui {
 438+ clear: both;
 439+ display: block;
 440+}
 441+
 442+.articleFeedbackv5-panel h2 {
 443+ float: left;
 444+ border: none;
 445+}
 446+
 447+.articleFeedbackv5-tooltip {
424448 position: absolute;
425449 z-index: 15;
426450 top: -185px;
——@@ -428,33 +452,24 @@
429453 width: 234px;
430454 color: #000;
431455 }
432 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip .tooltip-top {
 456+
 457+.articleFeedbackv5-tooltip .tooltip-top {
433458 background: url(images/bg-tooltip-top.png);
434459 height: 11px;
435460 }
436 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip .tooltip-repeat {
 461+
 462+.articleFeedbackv5-tooltip .tooltip-repeat {
437463 background: url(images/bg-tooltip.png) repeat-y;
438464 padding: 0 20px 1px;
439465 margin: 0;
440466 }
441 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip .tooltip-bottom {
 467+
 468+.articleFeedbackv5-tooltip .tooltip-bottom {
442469 background: url(images/bg-tooltip-bottom.png);
443470 height: 26px;
444471 }
445 -.articleFeedbackv5-panel {
446 - width: 598px;
447 - background: #f5faff;
448 - border: 1px solid #ccc;
449 - color: #000;
450 -}
451 -.articleFeedbackv5-panel .articleFeedback-buffer {
452 - padding: 20px;
453 -}
454 -.articleFeedbackv5-panel h2 {
455 - float: left;
456 - border: none;
457 -}
458 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip-trigger {
 472+
 473+.articleFeedbackv5-tooltip-trigger {
459474 display: block;
460475 height: 27px;
461476 width: 26px;
——@@ -463,31 +478,38 @@
464479 position: relative;
465480 text-indent: -9999px;
466481 }
467 -.articleFeedbackv5-panel .articleFeedbackv5-tooltip-trigger:hover {
 482+
 483+.articleFeedbackv5-tooltip-trigger:hover {
468484 background: url(images/bg-tooltip-trigger-hov.png) no-repeat;
469485 cursor: pointer;
470486 text-decoration: none;
471487 }
472 -.articleFeedbackv5-panel .form-row {
 488+
 489+.articleFeedbackv5-ui .form-row {
473490 margin: 0 0 15px;
474491 }
475 -.articleFeedbackv5-panel .instructions-left {
 492+
 493+.articleFeedbackv5-ui .instructions-left {
476494 float:left;
477495 margin: 0 15px 0 0;
478496 font-size: 1.2em;
479497 }
480 -.articleFeedbackv5-panel .buttons {
 498+
 499+.articleFeedbackv5-ui .buttons {
481500 float: left;
482501 }
483 -.articleFeedbackv5-panel .buttons .form-item {
 502+
 503+.articleFeedbackv5-ui .buttons .form-item {
484504 float: left;
485505 margin: 0 15px 0 0;
486506 }
487 -.articleFeedbackv5-panel .buttons label,
488 -.articleFeedbackv5-panel .buttons input {
 507+
 508+.articleFeedbackv5-ui .buttons label,
 509+.articleFeedbackv5-ui .buttons input {
489510 display: none;
490511 }
491 -.articleFeedbackv5-panel .buttons .articleFeedbackv5-button-placeholder {
 512+
 513+.articleFeedbackv5-ui .buttons .articleFeedbackv5-button-placeholder {
492514 display: inline-block;
493515 height: 20px;
494516 width: 50px;
——@@ -500,14 +522,17 @@
501523 border-radius: 3px; /* future proofing */
502524 -khtml-border-radius: 3px; /* for old Konqueror browsers */
503525 }
504 -.articleFeedbackv5-panel .buttons .articleFeedbackv5-button-placeholder:hover {
 526+
 527+.articleFeedbackv5-ui .buttons .articleFeedbackv5-button-placeholder:hover {
505528 background: url(images/bg-button.png) repeat-x;
506529 cursor: pointer;
507530 }
508 -.articleFeedbackv5-panel .buttons .articleFeedbackv5-button-placeholder-active {
 531+
 532+.articleFeedbackv5-ui .buttons .articleFeedbackv5-button-placeholder-active {
509533 background: url(images/bg-button.png) repeat-x;
510534 }
511 -.articleFeedbackv5-panel .feedback-text {
 535+
 536+.articleFeedbackv5-ui .feedback-text {
512537 resize: none;
513538 background: #fff;
514539 border: 1px solid #000;
——@@ -519,19 +544,23 @@
520545 font: sans-serif;
521546 color: #ddd;
522547 }
523 -.articleFeedbackv5-panel .feedback-text.active {
 548+
 549+.articleFeedbackv5-ui .feedback-text.active {
524550 color: #000;
525551 }
526 -.articleFeedbackv5-panel .articleFeedbackv5-disclosure {
 552+
 553+.articleFeedbackv5-ui .articleFeedbackv5-disclosure {
527554 float: right;
528555 width: 335px;
529556 margin: 10px 0 0;
530557 }
531 -.articleFeedbackv5-panel .articleFeedbackv5-disclosure p {
 558+
 559+.articleFeedbackv5-ui .articleFeedbackv5-disclosure p {
532560 margin: 0;
533561 font-size: 0.75em;
534562 }
535 -.articleFeedbackv5-panel .articleFeedbackv5-submit {
 563+
 564+.articleFeedbackv5-ui .articleFeedbackv5-submit {
536565 float: left;
537566 height: 30px;
538567 width: auto;
——@@ -548,7 +577,8 @@
549578 -webkit-box-shadow: -3px 3px 3px #999;
550579 box-shadow: -3px 3px 3px #999;
551580 }
552 -.articleFeedbackv5-panel .articleFeedbackv5-submit span {
 581+
 582+.articleFeedbackv5-ui .articleFeedbackv5-submit span {
553583 font-size: 16px;
554584 display: inline-block;
555585 height: 21px;
——@@ -558,10 +588,12 @@
559589 padding: 0 30px 0 0;
560590 background: url(images/bg-submit-icon.png) right center no-repeat;
561591 }
 592+
562593 /*** Option 2 ***/
563594 .articleFeedbackv5-tags ul {
564595 margin: 0 0 10px;
565596 }
 597+
566598 .articleFeedbackv5-tags ul li {
567599 color: #666;
568600 list-style: none;
——@@ -578,14 +610,17 @@
579611 -khtml-border-radius: 8px; /* for old Konqueror browsers */
580612 position: relative;
581613 }
 614+
582615 .articleFeedbackv5-tags ul li:first-child {
583616 margin: 0;
584617 }
 618+
585619 .articleFeedbackv5-tags ul li:hover, .articleFeedbackv5-tags ul li.active {
586620 background: #fff;
587621 border-color: #ccc;
588622 color: #000;
589623 }
 624+
590625 .articleFeedbackv5-tags ul li.active .tag-selector {
591626 position: absolute;
592627 background: url(images/bg-tag-active.png) no-repeat center bottom;
——@@ -596,9 +631,11 @@
597632 left: 50%;
598633 margin: 0 0 0 -5px;
599634 }
 635+
600636 .articleFeedbackv5-tags ul li input {
601637 display: none;
602638 }
 639+
603640 .articleFeedbackv5-tags ul li label {
604641 padding: 0 0 0 22px;
605642 cursor: pointer;
——@@ -606,61 +643,82 @@
607644 height: 16px;
608645 line-height: 18px;
609646 }
 647+
610648 .articleFeedbackv5-tags ul li .articleFeedbackv5-bucket2-suggestion-label {
611649 background: url(images/bg-tag-suggestion-off.png) no-repeat 0 center;
612650 }
 651+
613652 .articleFeedbackv5-tags ul li .articleFeedbackv5-bucket2-question-label {
614653 background: url(images/bg-tag-question-off.png) no-repeat 0 center;
615654 }
 655+
616656 .articleFeedbackv5-tags ul li .articleFeedbackv5-bucket2-problem-label {
617657 background: url(images/bg-tag-problem-off.png) no-repeat 0 center;
618658 }
 659+
619660 .articleFeedbackv5-tags ul li .articleFeedbackv5-bucket2-praise-label {
620661 background: url(images/bg-tag-praise-off.png) no-repeat 0 center;
621662 }
 663+
622664 .articleFeedbackv5-tags ul li:hover .articleFeedbackv5-bucket2-suggestion-label,
623665 .articleFeedbackv5-tags ul li.active .articleFeedbackv5-bucket2-suggestion-label {
624666 background: url(images/bg-tag-suggestion-on.png) no-repeat 0 center;
625667 }
 668+
626669 .articleFeedbackv5-tags ul li:hover .articleFeedbackv5-bucket2-question-label,
627670 .articleFeedbackv5-tags ul li.active .articleFeedbackv5-bucket2-question-label {
628671 background: url(images/bg-tag-question-on.png) no-repeat 0 center;
629672 }
 673+
630674 .articleFeedbackv5-tags ul li:hover .articleFeedbackv5-bucket2-problem-label,
631675 .articleFeedbackv5-tags ul li.active .articleFeedbackv5-bucket2-problem-label {
632676 background: url(images/bg-tag-problem-on.png) no-repeat 0 center;
633677 }
 678+
634679 .articleFeedbackv5-tags ul li:hover .articleFeedbackv5-bucket2-praise-label,
635680 .articleFeedbackv5-tags ul li.active .articleFeedbackv5-bucket2-praise-label {
636681 background: url(images/bg-tag-praise-on.png) no-repeat 0 center;
637682 }
 683+
638684 /*** Option 3 ***/
639685 .articleFeedbackv5-rating-new .articleFeedbackv5-rating-label {
640686 background: url(images/bg-rating-off.png) no-repeat;
641687 }
 688+
642689 .articleFeedbackv5-rating-new .articleFeedbackv5-rating-label.active {
643690 background: url(images/bg-rating-on.png) no-repeat;
644691 }
 692+
645693 .articleFeedbackv5-rating .articleFeedbackv5-rating-prompt {
646694 }
647695
648696
649697 /*** Dialog ***/
650698 .articleFeedbackv5-dialog {
 699+ border: 1px solid #cccccc;
 700+}
 701+
 702+.articleFeedbackv5-dialog.ui-dialog .ui-widget-header {
 703+ background: #f5faff !important;
651704 border: none;
652705 }
653 -.articleFeedbackv5-dialog.ui-widget-content,
 706+
 707+.articleFeedbackv5-dialog.ui-dialog .ui-dialog-content {
 708+ background: #f5faff;
 709+}
 710+
654711 .articleFeedbackv5-dialog.ui-dialog .ui-widget-header {
655 - background: transparent !important;
 712+ font-weight: normal;
 713+ margin-bottom: 0;
 714+ padding-top: .5em;
 715+ padding-bottom: .17em;
656716 }
657 -.articleFeedbackv5-dialog .ui-widget-header {
658 - border: none;
 717+
 718+.articleFeedbackv5-dialog.ui-dialog .articleFeedbackv5-tooltip-trigger {
 719+ margin-right: 20px;
659720 }
660 -.articleFeedbackv5-dialog .ui-dialog-titlebar-close {
661 - background-color: white;
662 - border: 1px solid gray;
663 - top: 35px !important;
664 - right: -5px !important;
665 - padding: 0;
 721+
 722+.articleFeedbackv5-dialog.ui-dialog .articleFeedbackv5-tooltip {
 723+ right: -67px;
666724 }
667725
Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js
——@@ -139,13 +139,26 @@
140140
141141 panelOuter: '\
142142 <div class="articleFeedbackv5-panel">\
143 - <div class="articleFeedbackv5-buffer articleFeedbackv5-ui">\
 143+ <div class="articleFeedbackv5-buffer">\
 144+ <div class="articleFeedbackv5-title-wrap">\
 145+ <h2 class="articleFeedbackv5-title"></h2>\
 146+ </div>\
 147+ <div class="articleFeedbackv5-ui" />\
144148 </div>\
145 - <div class="articleFeedbackv5-error"><div class="articleFeedbackv5-error-message"><html:msg key="error" /></div></div>\
 149+ <div class="articleFeedbackv5-error"><div class="articleFeedbackv5-error-message"></div></div>\
146150 <div style="clear:both;"></div>\
147151 </div>\
148 - ',
 152+ ',
149153
 154+ dialogInner: '\
 155+ <div class="articleFeedbackv5-dialog-inner">\
 156+ <div class="articleFeedbackv5-buffer">\
 157+ </div>\
 158+ <div class="articleFeedbackv5-error"><div class="articleFeedbackv5-error-message"></div></div>\
 159+ <div style="clear:both;"></div>\
 160+ </div>\
 161+ ',
 162+
150163 helpToolTip: '\
151164 <a class="articleFeedbackv5-tooltip-trigger"></a>\
152165 <div class="articleFeedbackv5-tooltip">\
——@@ -198,41 +211,50 @@
199212 */
200213 block: '\
201214 <form>\
202 - <div class="title-wrap">\
203 - <h2 class="articleFeedbackv5-title"><html:msg key="bucket1-title" /></h2>\
204 - </div>\
205 - <div class="form-row articleFeedbackv5-bucket1-toggle">\
206 - <p class="instructions-left"><html:msg key="bucket1-question-toggle" /></p>\
207 - <div class="buttons">\
208 - <div class="form-item" rel="yes" id="articleFeedbackv5-bucket1-toggle-wrapper-yes">\
209 - <label for="articleFeedbackv5-bucket1-toggle-yes"><html:msg key="bucket1-toggle-found-yes-full" /></label>\
210 - <span class="articleFeedbackv5-button-placeholder"><html:msg key="bucket1-toggle-found-yes" value="yes" /></span>\
211 - <input type="radio" name="toggle" id="articleFeedbackv5-bucket1-toggle-yes" class="query-button" value="yes" />\
 215+ <div class="form-row articleFeedbackv5-bucket1-toggle">\
 216+ <p class="instructions-left"><html:msg key="bucket1-question-toggle" /></p>\
 217+ <div class="buttons">\
 218+ <div class="form-item" rel="yes" id="articleFeedbackv5-bucket1-toggle-wrapper-yes">\
 219+ <label for="articleFeedbackv5-bucket1-toggle-yes"><html:msg key="bucket1-toggle-found-yes-full" /></label>\
 220+ <span class="articleFeedbackv5-button-placeholder"><html:msg key="bucket1-toggle-found-yes" value="yes" /></span>\
 221+ <input type="radio" name="toggle" id="articleFeedbackv5-bucket1-toggle-yes" class="query-button" value="yes" />\
 222+ </div>\
 223+ <div class="form-item" rel="no" id="articleFeedbackv5-bucket1-toggle-wrapper-no">\
 224+ <label for="articleFeedbackv5-bucket1-toggle-no"><html:msg key="bucket1-toggle-found-no-full" /></label>\
 225+ <span class="articleFeedbackv5-button-placeholder"><html:msg key="bucket1-toggle-found-no" /></span>\
 226+ <input type="radio" name="toggle" id="articleFeedbackv5-bucket1-toggle-no" class="query-button last" value="no" />\
 227+ </div>\
 228+ <div class="clear"></div>\
212229 </div>\
213 - <div class="form-item" rel="no" id="articleFeedbackv5-bucket1-toggle-wrapper-no">\
214 - <label for="articleFeedbackv5-bucket1-toggle-no"><html:msg key="bucket1-toggle-found-no-full" /></label>\
215 - <span class="articleFeedbackv5-button-placeholder"><html:msg key="bucket1-toggle-found-no" /></span>\
216 - <input type="radio" name="toggle" id="articleFeedbackv5-bucket1-toggle-no" class="query-button last" value="no" />\
217 - </div>\
218230 <div class="clear"></div>\
219231 </div>\
 232+ <div class="articleFeedbackv5-comment">\
 233+ <textarea id="find-feedback" class="feedback-text" name="comment"></textarea>\
 234+ </div>\
 235+ <div class="articleFeedbackv5-disclosure">\
 236+ <p class="articlefeedbackv5-shared-on-feedback"></p>\
 237+ <p class="articlefeedbackv5-transparency-terms"></p>\
 238+ </div>\
 239+ <button class="articleFeedbackv5-submit" type="submit" disabled="disabled"><html:msg key="bucket1-form-submit" /></button>\
220240 <div class="clear"></div>\
221 - </div>\
222 - <div class="articleFeedbackv5-comment">\
223 - <textarea id="find-feedback" class="feedback-text" name="comment"></textarea>\
224 - </div>\
225 - <div class="articleFeedbackv5-disclosure">\
226 - <p class="articlefeedbackv5-shared-on-feedback"></p>\
227 - <p class="articlefeedbackv5-transparency-terms"></p>\
228 - </div>\
229 - <button class="articleFeedbackv5-submit" type="submit" disabled="disabled"><html:msg key="bucket1-form-submit" /></button>\
230 - <div class="clear"></div>\
231241 </form>\
232242 '
233243
234244 },
235245
236246 // }}}
 247+ // {{{ getTitle
 248+
 249+ /**
 250+ * Gets the title
 251+ *
 252+ * @return string the title
 253+ */
 254+ getTitle: function () {
 255+ return mw.msg( 'articlefeedbackv5-bucket1-title' );
 256+ },
 257+
 258+ // }}}
237259 // {{{ buildForm
238260
239261 /**
——@@ -269,9 +291,6 @@
270292 target: '_blank'
271293 } ) );
272294
273 - // Localize the block
274 - $block.localize( { 'prefix': 'articlefeedbackv5-' } );
275 -
276295 // Turn the submit into a slick button
277296 $block.find( '.articleFeedbackv5-submit' )
278297 .button()
——@@ -431,9 +450,6 @@
432451 */
433452 block: '\
434453 <form>\
435 - <div class="title-wrap">\
436 - <h2 class="articleFeedbackv5-title"><html:msg key="bucket2-title" /></h2>\
437 - </div>\
438454 <div>\
439455 <div class="articleFeedbackv5-tags">\
440456 <ul></ul>\
——@@ -471,6 +487,18 @@
472488 },
473489
474490 // }}}
 491+ // {{{ getTitle
 492+
 493+ /**
 494+ * Gets the title
 495+ *
 496+ * @return string the title
 497+ */
 498+ getTitle: function () {
 499+ return mw.msg( 'articlefeedbackv5-bucket2-title' );
 500+ },
 501+
 502+ // }}}
475503 // {{{ buildForm
476504
477505 /**
——@@ -530,9 +558,6 @@
531559 target: '_blank'
532560 } ) );
533561
534 - // Localize the block
535 - $block.localize( { 'prefix': 'articlefeedbackv5-' } );
536 -
537562 // Turn the submit into a slick button
538563 $block.find( '.articleFeedbackv5-submit' )
539564 .button()
——@@ -705,9 +730,6 @@
706731 */
707732 block: '\
708733 <form>\
709 - <div class="title-wrap">\
710 - <h2 class="articleFeedbackv5-title"><html:msg key="bucket3-title" /></h2>\
711 - </div>\
712734 <div>\
713735 <p class="instructions-left"><html:msg key="bucket3-rating-question" /></p>\
714736 <div class="articleFeedbackv5-rating articleFeedbackv5-rating-new">\
——@@ -742,6 +764,18 @@
743765 },
744766
745767 // }}}
 768+ // {{{ getTitle
 769+
 770+ /**
 771+ * Gets the title
 772+ *
 773+ * @return string the title
 774+ */
 775+ getTitle: function () {
 776+ return mw.msg( 'articlefeedbackv5-bucket3-title' );
 777+ },
 778+
 779+ // }}}
746780 // {{{ buildForm
747781
748782 /**
——@@ -788,9 +822,6 @@
789823 $block.find( '.articleFeedbackv5-comment textarea' )
790824 .val( mw.msg( 'articlefeedbackv5-bucket3-comment-default' ) );
791825
792 - // Localize the block
793 - $block.localize( { 'prefix': 'articlefeedbackv5-' } );
794 -
795826 // Turn the submit into a slick button
796827 $block.find( '.articleFeedbackv5-submit' )
797828 .button()
——@@ -977,10 +1008,6 @@
9781009 * The template for the whole block
9791010 */
9801011 block: '\
981 - <form>\
982 - <div class="title-wrap">\
983 - <h2 class="articleFeedbackv5-title"><html:msg key="bucket4-title" /></h2>\
984 - </div>\
9851012 <div class="form-row articleFeedbackv5-bucket4-toggle">\
9861013 <h3><html:msg key="bucket4-subhead"></h3>\
9871014 <p class="instructions-left"><html:msg key="bucket4-teaser-line1" /><br />\
——@@ -991,12 +1018,23 @@
9921019 </div>\
9931020 <a class="articleFeedbackv5-submit"><html:msg key="bucket4-form-submit" /></a>\
9941021 <div class="clear"></div>\
995 - </form>\
9961022 '
9971023
9981024 },
9991025
10001026 // }}}
 1027+ // {{{ getTitle
 1028+
 1029+ /**
 1030+ * Gets the title
 1031+ *
 1032+ * @return string the title
 1033+ */
 1034+ getTitle: function () {
 1035+ return mw.msg( 'articlefeedbackv5-bucket4-title' );
 1036+ },
 1037+
 1038+ // }}}
10011039 // {{{ buildForm
10021040
10031041 /**
——@@ -1028,9 +1066,6 @@
10291067 } )
10301068 );
10311069
1032 - // Localize the block
1033 - $block.localize( { 'prefix': 'articlefeedbackv5-' } );
1034 -
10351070 // Turn the submit into a slick button
10361071 $block.find( '.articleFeedbackv5-submit' )
10371072 .button()
——@@ -1072,6 +1107,11 @@
10731108 */
10741109 loadAggregate: true,
10751110
 1111+ /**
 1112+ * Whether we're currently looking at the report
 1113+ */
 1114+ inReport: false,
 1115+
10761116 // }}}
10771117 // {{{ templates
10781118
——@@ -1087,8 +1127,6 @@
10881128 <form>\
10891129 <div class="articleFeedbackv5-switch articleFeedbackv5-switch-report articleFeedbackv5-visibleWith-form" rel="report"><html:msg key="bucket5-report-switch-label" /></div>\
10901130 <div class="articleFeedbackv5-switch articleFeedbackv5-switch-form articleFeedbackv5-visibleWith-report" rel="form"><html:msg key="bucket5-form-switch-label" /></div>\
1091 - <div class="articleFeedbackv5-title articleFeedbackv5-visibleWith-form"><html:msg key="bucket5-form-panel-title" /></div>\
1092 - <div class="articleFeedbackv5-title articleFeedbackv5-visibleWith-report"><html:msg key="bucket5-report-panel-title" /></div>\
10931131 <div class="articleFeedbackv5-explanation articleFeedbackv5-visibleWith-form"><a class="articleFeedbackv5-explanation-link"><html:msg key="bucket5-form-panel-explanation" /></a></div>\
10941132 <div class="articleFeedbackv5-description articleFeedbackv5-visibleWith-report"><html:msg key="bucket5-report-panel-description" /></div>\
10951133 <div style="clear:both;"></div>\
——@@ -1153,6 +1191,22 @@
11541192 },
11551193
11561194 // }}}
 1195+ // {{{ getTitle
 1196+
 1197+ /**
 1198+ * Gets the title
 1199+ *
 1200+ * @return string the title
 1201+ */
 1202+ getTitle: function () {
 1203+ if ( $.articleFeedbackv5.buckets[5].inReport ) {
 1204+ return mw.msg( 'articlefeedbackv5-bucket5-report-panel-title' );
 1205+ } else {
 1206+ return mw.msg( 'articlefeedbackv5-bucket5-form-panel-title' );
 1207+ }
 1208+ },
 1209+
 1210+ // }}}
11571211 // {{{ buildForm
11581212
11591213 /**
——@@ -1208,9 +1262,6 @@
12091263 .attr( 'placeholder', mw.msg( 'articlefeedbackv5-bucket5-form-panel-helpimprove-email-placeholder' ) )
12101264 .placeholder(); // back. compat. for older browsers
12111265
1212 - // Localize the block
1213 - $block.localize( { 'prefix': 'articlefeedbackv5-' } );
1214 -
12151266 // Activate tooltips
12161267 $block.find( '[title]' )
12171268 .tipsy( {
——@@ -1319,17 +1370,18 @@
13201371 // Set up form/report switch behavior
13211372 $block.find( '.articleFeedbackv5-switch' )
13221373 .click( function ( e ) {
1323 - if ( $(this).attr( 'rel' ) == 'report' && $.articleFeedbackv5.currentBucket().loadAggregate ) {
 1374+ var which = $( this ).attr( 'rel' );
 1375+ if ( which == 'report' && $.articleFeedbackv5.currentBucket().loadAggregate ) {
13241376 $.articleFeedbackv5.currentBucket().loadAggregateRatings();
13251377 $.articleFeedbackv5.currentBucket().loadAggregate = false;
13261378 }
1327 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-visibleWith-' + $(this).attr( 'rel' ) )
1328 - .show();
1329 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-switch' )
1330 - .not( $(this) )
 1379+ $.articleFeedbackv5.find( '.articleFeedbackv5-visibleWith-' + which ).show();
 1380+ $.articleFeedbackv5.find( '.articleFeedbackv5-switch' )
 1381+ .not( $( this ) )
13311382 .each( function () {
1332 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-visibleWith-' + $(this).attr( 'rel' ) ).hide();
 1383+ $.articleFeedbackv5.find( '.articleFeedbackv5-visibleWith-' + $( this ).attr( 'rel' ) ).hide();
13331384 } );
 1385+ $.articleFeedbackv5.currentBucket().inReport = which == 'report';
13341386 e.preventDefault();
13351387 return false;
13361388 } );
——@@ -1541,18 +1593,6 @@
15421594 }
15431595 } );
15441596
1545 - // Expiration
1546 - var $ui = $.articleFeedbackv5.find( 'articleFeedbackv5-ui' );
1547 - if ( typeof feedback.status === 'string' && feedback.status === 'expired' ) {
1548 - $ui.addClass( 'articleFeedbackv5-expired' );
1549 - $ui.find( '.articleFeedbackv5-expiry' )
1550 - .slideDown( 'fast' );
1551 - } else {
1552 - $ui.removeClass( 'articleFeedbackv5-expired' )
1553 - $ui.find( '.articleFeedbackv5-expiry' )
1554 - .slideUp( 'fast' );
1555 - }
1556 -
15571597 // Status change - un-new the rating controls
15581598 $.articleFeedbackv5.find( '.articleFeedbackv5-rating-new' )
15591599 .removeClass( 'articleFeedbackv5-rating-new' );
——@@ -1582,7 +1622,6 @@
15831623 data[key] = $.articleFeedbackv5.find( 'input[name="' + key + '"]' ).val();
15841624 }
15851625 $.articleFeedbackv5.find( '.articleFeedbackv5-expertise input:checked' ).each( function () {
1586 - console.log($(this).is(':checked'));
15871626 data['expertise-' + $( this ).val()] = 1;
15881627 } );
15891628 return data;
——@@ -1912,16 +1951,6 @@
19131952 * @param Element $block the form block
19141953 */
19151954 $.articleFeedbackv5.addHelpButton = function ( $block ) {
1916 - // Add the help tooltip to the title
1917 - $block.find( '.title-wrap' )
1918 - .append( $.articleFeedbackv5.templates.helpToolTip )
1919 - .append( $.articleFeedbackv5.templates.clear );
1920 - // Start out the tooltip hidden
1921 - $block.find( '.articleFeedbackv5-tooltip' ).hide();
1922 - // Toogle on click
1923 - $block.find( '.articleFeedbackv5-tooltip-trigger' ).click( function () {
1924 - $.articleFeedbackv5.find( '.articleFeedbackv5-tooltip' ).toggle();
1925 - } );
19261955 };
19271956
19281957 // }}}
——@@ -2022,14 +2051,24 @@
20232052 if ( 'bindEvents' in bucket ) {
20242053 bucket.bindEvents( $block );
20252054 }
2026 - if ( 'fillForm' in bucket ) {
2027 - bucket.fillForm( $block, response );
2028 - }
20292055
20302056 // Wrap it in a panel
20312057 var $wrapper = $( $.articleFeedbackv5.templates.panelOuter );
20322058 $wrapper.find( '.articleFeedbackv5-ui' ).append( $block );
 2059+ if ( 'getTitle' in bucket ) {
 2060+ $wrapper.find( '.articleFeedbackv5-title' ).html( bucket.getTitle() );
 2061+ }
20332062
 2063+ // Set up the tooltip for the panel version
 2064+ $wrapper.find( '.articleFeedbackv5-title-wrap' ).append( $.articleFeedbackv5.templates.helpToolTip );
 2065+ $wrapper.find( '.articleFeedbackv5-tooltip' ).hide();
 2066+ $wrapper.find( '.articleFeedbackv5-tooltip-trigger' ).click( function () {
 2067+ $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-tooltip' ).toggle();
 2068+ } );
 2069+
 2070+ // Localize
 2071+ $wrapper.localize( { 'prefix': 'articlefeedbackv5-' } );
 2072+
20342073 // Add it to the page
20352074 $.articleFeedbackv5.$holder
20362075 .html( $wrapper )
——@@ -2038,18 +2077,6 @@
20392078 // Add an empty dialog
20402079 $.articleFeedbackv5.$dialog = $( '<div id="articleFeedbackv5-dialog-wrap"></div>' );
20412080 $.articleFeedbackv5.$holder.after( $.articleFeedbackv5.$dialog );
2042 - var w = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-panel' ).width();
2043 - var h = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-panel' ).height();
2044 - $.articleFeedbackv5.$dialog.dialog( {
2045 - width: w + 20,
2046 - height: h + 50,
2047 - dialogClass: 'articleFeedbackv5-dialog',
2048 - resizable: false,
2049 - autoOpen: false,
2050 - close: function ( event, ui ) {
2051 - $.articleFeedbackv5.closeAsModal();
2052 - }
2053 - } );
20542081
20552082 // Set loaded
20562083 $.articleFeedbackv5.isLoaded = true;
——@@ -2177,6 +2204,7 @@
21782205 };
21792206
21802207 // }}}
 2208+
21812209 // }}}
21822210 // {{{ UI methods
21832211
——@@ -2189,9 +2217,11 @@
21902218 */
21912219 $.articleFeedbackv5.markShowstopperError = function ( message ) {
21922220 console.log( message );
 2221+ var msg_html = mw.msg( 'articlefeedbackv5-error' );
21932222 if ($.articleFeedbackv5.debug && message) {
2194 - $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-error-message' ).html( message.replace( "\n", '<br />' ) );
 2223+ msg_html = message.replace( "\n", '<br />' );
21952224 }
 2225+ $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-error-message' ).html( msg_html );
21962226 var veil = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-error' );
21972227 var box = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-panel' );
21982228 // TODO: Make this smarter -- on ubuntu/ff at least, using the
——@@ -2253,18 +2283,46 @@
22542284 /**
22552285 * Opens the feedback tool as a modal window
22562286 *
2257 - * @param linkId string the link ID to set on open
 2287+ * @param $link Element the feedback link
22582288 */
2259 - $.articleFeedbackv5.openAsModal = function ( linkId ) {
2260 - $.articleFeedbackv5.setLinkId( linkId );
 2289+ $.articleFeedbackv5.openAsModal = function ( $link ) {
22612290 if ( !$.articleFeedbackv5.isLoaded ) {
22622291 $.articleFeedbackv5.loadForm();
22632292 }
22642293 if ( !$.articleFeedbackv5.inDialog ) {
2265 - $inner = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-panel' ).detach();
 2294+ var w = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-ui' ).width();
 2295+ var h = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-ui' ).height();
 2296+ var o = $link.offset();
 2297+ var x = 'center';
 2298+ // var y = o.top - h - 20;
 2299+ var y = 'center';
 2300+ $inner = $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-ui' ).detach();
22662301 $.articleFeedbackv5.$dialog.append( $inner );
2267 - $.articleFeedbackv5.setLinkId( linkId );
2268 - $.articleFeedbackv5.$dialog.dialog( 'open' );
 2302+ $.articleFeedbackv5.setLinkId( $link.data( 'linkId' ) );
 2303+ $.articleFeedbackv5.$dialog.dialog( {
 2304+ width: w + 20,
 2305+ height: h + 50,
 2306+ position: [ x, y ],
 2307+ dialogClass: 'articleFeedbackv5-dialog',
 2308+ resizable: false,
 2309+ draggable: true,
 2310+ title: $.articleFeedbackv5.currentBucket().getTitle(),
 2311+ modal: true,
 2312+ close: function ( event, ui ) {
 2313+ $.articleFeedbackv5.closeAsModal();
 2314+ }
 2315+ } );
 2316+ var $title = $( '#ui-dialog-title-articleFeedbackv5-dialog-wrap' );
 2317+ var $titlebar = $title.parent();
 2318+ $title.addClass( 'articleFeedbackv5-title' );
 2319+ // Set up the tooltip
 2320+ $titlebar.append( $.articleFeedbackv5.templates.helpToolTip );
 2321+ $titlebar.find( '.articleFeedbackv5-tooltip' ).hide();
 2322+ $titlebar.find( '.articleFeedbackv5-tooltip-trigger' ).click( function ( e ) {
 2323+ $( e.target ).next( '.articleFeedbackv5-tooltip' ).toggle();
 2324+ } );
 2325+ $titlebar.localize( { 'prefix': 'articlefeedbackv5-' } );
 2326+
22692327 $.articleFeedbackv5.inDialog = true;
22702328 }
22712329 };
——@@ -2278,8 +2336,9 @@
22792337 $.articleFeedbackv5.closeAsModal = function () {
22802338 if ( $.articleFeedbackv5.inDialog ) {
22812339 $.articleFeedbackv5.setLinkId( '0' );
2282 - $inner = $.articleFeedbackv5.$dialog.find( '.articleFeedbackv5-panel' ).detach();
2283 - $.articleFeedbackv5.$holder.append( $inner );
 2340+ $inner = $.articleFeedbackv5.$dialog.find( '.articleFeedbackv5-ui' ).detach();
 2341+ $.articleFeedbackv5.$holder.find( '.articleFeedbackv5-buffer' ).append( $inner );
 2342+ $.articleFeedbackv5.$dialog.dialog( 'destroy' );
22842343 $.articleFeedbackv5.inDialog = false;
22852344 }
22862345 };
Index: trunk/extensions/ArticleFeedbackv5/modules/ext.articleFeedbackv5/ext.articleFeedbackv5.js
——@@ -18,13 +18,13 @@
1919 };
2020
2121 // Click event
22 -var clickFeedbackLink = function ( linkId ) {
 22+var clickFeedbackLink = function ( $link ) {
2323 // Click tracking
2424 if ( useClickTracking && $.isFunction( $.trackActionWithInfo ) ) {
25 - $.trackActionWithInfo( linkInfo[linkId].clickTracking, mw.config.get( 'wgTitle' ) );
 25+ $.trackActionWithInfo( linkInfo[ $link.data( 'linkId' ) ].clickTracking, mw.config.get( 'wgTitle' ) );
2626 }
2727 // Set the link id
28 - $( '#mw-articlefeedbackv5' ).articleFeedbackv5( 'openAsModal', linkId );
 28+ $( '#mw-articlefeedbackv5' ).articleFeedbackv5( 'openAsModal', $link );
2929 }
3030
3131 /* Load at the bottom of the article */
——@@ -47,18 +47,21 @@
4848 mw.msg( 'articlefeedbackv5-section-linktext' ) + '</a>' +
4949 ']'
5050 );
51 -$( 'span.editsection a.articleFeedbackv5-sectionlink' ).click( function ( e ) {
52 - e.preventDefault();
53 - clickFeedbackLink( '1' );
54 -} );
 51+$( 'span.editsection a.articleFeedbackv5-sectionlink' )
 52+ .data( 'linkId', 1 )
 53+ .click( function ( e ) {
 54+ e.preventDefault();
 55+ clickFeedbackLink( $( e.target ) );
 56+ } );
5557
5658 /* Add toolbox link */
5759 var $aftLink4 = $( '<li id="t-articlefeedbackv5"><a href="#mw-articlefeedbackv5"></a></li>' )
5860 .find( 'a' )
 61+ .data( 'linkId', 4 )
5962 .text( mw.msg( 'articlefeedbackv5-toolbox-linktext' ) )
6063 .click( function ( e ) {
6164 e.preventDefault();
62 - clickFeedbackLink( '4' );
 65+ clickFeedbackLink( $( e.target ) );
6366 } )
6467 .end();
6568 $( '#p-tb' ).find( 'ul' ).append( $aftLink4 );

Follow-up revisions

RevisionCommit summaryAuthorDate
r104929Bug fixes in jquery plugin:...rsterbin00:35, 2 December 2011

Status & tagging log