r69481 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r69480‎ | r69481 | r69482 >
Date:17:17, 17 July 2010
Author:adam
Status:ok (Comments)
Tags:
Comment:
SimpleSearch - moving away from our label-based placeholder text, to input-only solution. Uses placeholder attribute if supported and falls back to simple blur and focues event handlers if not
Modified paths:
  • /trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Modules/SimpleSearch/SimpleSearch.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.combined.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.combined.min.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/Vector/Modules/SimpleSearch/SimpleSearch.js
@@ -37,50 +37,37 @@
3838 return true;
3939 }
4040
41 - // Add form submission handler
42 - $j( 'div#simpleSearch > input#searchInput' )
43 - .each( function() {
44 - $j( '<label />' )
45 - .text( mw.usability.getMsg( 'vector-simplesearch-search' ) )
46 - .css({
47 - 'display': 'none',
48 - 'position' : 'absolute',
49 - 'color': '#999999',
50 - 'cursor': 'text',
51 - 'margin': '0 4px',
52 - 'top': '6px',
53 - 'line-height': '13px'
54 - })
55 - .css( ( $j( 'body' ).is( '.rtl' ) ? 'right' : 'left' ), 0 )
56 - .mousedown( function() {
57 - $j(this).parent().find( 'input#searchInput' ).focus();
58 - return false;
59 - })
60 - .appendTo( $j(this).parent() );
61 - if ( $j(this).val() == '' ) {
62 - $j(this).parent().find( 'label' ).fadeIn( 100 );
63 - }
64 - })
65 - .bind( 'keypress', function() {
66 - // just in case the text field was focus before our handler was bound to it
67 - if ( $j(this).parent().find( 'label:visible' ).size() > 0 )
68 - $j(this).parent().find( 'label' ).fadeOut( 100 );
69 - })
70 - .focus( function() {
71 - $j(this).parent().find( 'label' ).fadeOut( 100 );
72 - })
73 - .blur( function() {
74 - if ( $j(this).val() == '' ) {
75 - $j(this).parent().find( 'label' ).fadeIn( 100 );
76 - }
77 - });
78 - // listen for dragend events in order to clear the label from the search field if
79 - // text is dragged into it. Only works for mozilla
80 - $j( document ).bind( 'dragend', function( event ) {
81 - if ( $j( 'div#simpleSearch > label:visible' ).size() > 0
82 - && $j( 'div#simpleSearch > input#searchInput' ).val().length > 0 )
83 - $j( 'div#simpleSearch > label' ).fadeOut( 100 );
84 - } );
 41+ // Placeholder text
 42+ // if the placeholder attribute is supported, use it
 43+ if ( 'placeholder' in document.createElement( 'input' ) ) {
 44+ $j( 'div#simpleSearch > input#searchInput' )
 45+ .attr( 'placeholder', mw.usability.getMsg( 'vector-simplesearch-search' ) );
 46+ } else {
 47+ $j( 'div#simpleSearch > input#searchInput' )
 48+ .each( function() {
 49+ var $input = $j( this );
 50+ $input
 51+ .bind( 'blur', function() {
 52+ if ( $input.val().length == 0 ) {
 53+ $input
 54+ .val( mw.usability.getMsg( 'vector-simplesearch-search' ) )
 55+ .addClass( 'placeholder' );
 56+ }
 57+ } )
 58+ .bind( 'focus', function() {
 59+ if ( $input.hasClass( 'placeholder' ) ) {
 60+ $input.val( '' ).removeClass( 'placeholder' );
 61+ }
 62+ } )
 63+ .parents( 'form' )
 64+ .bind( 'submit', function() {
 65+ $input.trigger( 'focus' );
 66+ } );
 67+ if ( $input.val() == '' ) {
 68+ $input.trigger( 'blur' );
 69+ }
 70+ } );
 71+ }
8572 $j( '#searchInput, #searchInput2, #powerSearchText, #searchText' ).suggestions( {
8673 fetch: function( query ) {
8774 var $this = $j(this);
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php
@@ -17,13 +17,13 @@
1818 array( 'src' => 'Modules/ExpandableSearch/ExpandableSearch.js', 'version' => 5 ),
1919 array( 'src' => 'Modules/EditWarning/EditWarning.js', 'version' => 10 ),
2020 array( 'src' => 'Modules/FooterCleanup/FooterCleanup.js', 'version' => 5 ),
21 - array( 'src' => 'Modules/SimpleSearch/SimpleSearch.js', 'version' => 22 ),
 21+ array( 'src' => 'Modules/SimpleSearch/SimpleSearch.js', 'version' => 23 ),
2222 ),
2323 'combined' => array(
24 - array( 'src' => 'Vector.combined.js', 'version' => 65 ),
 24+ array( 'src' => 'Vector.combined.js', 'version' => 66 ),
2525 ),
2626 'minified' => array(
27 - array( 'src' => 'Vector.combined.min.js', 'version' => 66 ),
 27+ array( 'src' => 'Vector.combined.min.js', 'version' => 67 ),
2828 ),
2929 );
3030 static $modules = array(
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.combined.js
@@ -547,50 +547,37 @@
548548 return true;
549549 }
550550
551 - // Add form submission handler
552 - $j( 'div#simpleSearch > input#searchInput' )
553 - .each( function() {
554 - $j( '<label />' )
555 - .text( mw.usability.getMsg( 'vector-simplesearch-search' ) )
556 - .css({
557 - 'display': 'none',
558 - 'position' : 'absolute',
559 - 'color': '#999999',
560 - 'cursor': 'text',
561 - 'margin': '0 4px',
562 - 'top': '6px',
563 - 'line-height': '13px'
564 - })
565 - .css( ( $j( 'body' ).is( '.rtl' ) ? 'right' : 'left' ), 0 )
566 - .mousedown( function() {
567 - $j(this).parent().find( 'input#searchInput' ).focus();
568 - return false;
569 - })
570 - .appendTo( $j(this).parent() );
571 - if ( $j(this).val() == '' ) {
572 - $j(this).parent().find( 'label' ).fadeIn( 100 );
573 - }
574 - })
575 - .bind( 'keypress', function() {
576 - // just in case the text field was focus before our handler was bound to it
577 - if ( $j(this).parent().find( 'label:visible' ).size() > 0 )
578 - $j(this).parent().find( 'label' ).fadeOut( 100 );
579 - })
580 - .focus( function() {
581 - $j(this).parent().find( 'label' ).fadeOut( 100 );
582 - })
583 - .blur( function() {
584 - if ( $j(this).val() == '' ) {
585 - $j(this).parent().find( 'label' ).fadeIn( 100 );
586 - }
587 - });
588 - // listen for dragend events in order to clear the label from the search field if
589 - // text is dragged into it. Only works for mozilla
590 - $j( document ).bind( 'dragend', function( event ) {
591 - if ( $j( 'div#simpleSearch > label:visible' ).size() > 0
592 - && $j( 'div#simpleSearch > input#searchInput' ).val().length > 0 )
593 - $j( 'div#simpleSearch > label' ).fadeOut( 100 );
594 - } );
 551+ // Placeholder text
 552+ // if the placeholder attribute is supported, use it
 553+ if ( 'placeholder' in document.createElement( 'input' ) ) {
 554+ $j( 'div#simpleSearch > input#searchInput' )
 555+ .attr( 'placeholder', mw.usability.getMsg( 'vector-simplesearch-search' ) );
 556+ } else {
 557+ $j( 'div#simpleSearch > input#searchInput' )
 558+ .each( function() {
 559+ var $input = $j( this );
 560+ $input
 561+ .bind( 'blur', function() {
 562+ if ( $input.val().length == 0 ) {
 563+ $input
 564+ .val( mw.usability.getMsg( 'vector-simplesearch-search' ) )
 565+ .addClass( 'placeholder' );
 566+ }
 567+ } )
 568+ .bind( 'focus', function() {
 569+ if ( $input.hasClass( 'placeholder' ) ) {
 570+ $input.val( '' ).removeClass( 'placeholder' );
 571+ }
 572+ } )
 573+ .parents( 'form' )
 574+ .bind( 'submit', function() {
 575+ $input.trigger( 'focus' );
 576+ } );
 577+ if ( $input.val() == '' ) {
 578+ $input.trigger( 'blur' );
 579+ }
 580+ } );
 581+ }
595582 $j( '#searchInput, #searchInput2, #powerSearchText, #searchText' ).suggestions( {
596583 fetch: function( query ) {
597584 var $this = $j(this);
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.combined.min.js
@@ -26,7 +26,6 @@
2727 +'</strong> other pages.</label>');$j('.mw-templatesUsedExplanation').remove();$j('.collapsible-list label').click(function(){$j(this).parent().toggleClass('expanded').toggleClass('collapsed').find('ul').slideToggle('fast');return false;}).trigger('click');$j('#wpPreview, #wpDiff, .editHelp, #editpage-specialchars').remove();$j('#mw-editform-cancel').remove().appendTo('.editButtons');});if(wgVectorEnabledModules.simplesearch&&skin=='vector'&&typeof os_autoload_inputs!=='undefined'&&os_autoload_forms!=='undefined'){os_autoload_inputs=[];os_autoload_forms=[];}
2828 $j(document).ready(function(){if(!wgVectorEnabledModules.simplesearch||wgVectorPreferences.simplesearch.disablesuggest||skin!='vector'){return true;}
2929 var mod={'browsers':{'ltr':{'opera':[['>=',9.6]],'docomo':false,'blackberry':false,'ipod':false,'iphone':false},'rtl':{'opera':[['>=',9.6]],'docomo':false,'blackberry':false,'ipod':false,'iphone':false}}};if(!$j.wikiEditor.isSupported(mod)){return true;}
30 -$j('div#simpleSearch > input#searchInput').each(function(){$j('<label />').text(mw.usability.getMsg('vector-simplesearch-search')).css({'display':'none','position':'absolute','color':'#999999','cursor':'text','margin':'0 4px','top':'6px','line-height':'13px'}).css(($j('body').is('.rtl')?'right':'left'),0).mousedown(function(){$j(this).parent().find('input#searchInput').focus();return false;}).appendTo($j(this).parent());if($j(this).val()==''){$j(this).parent().find('label').fadeIn(100);}}).bind('keypress',function(){if($j(this).parent().find('label:visible').size()>0)
31 -$j(this).parent().find('label').fadeOut(100);}).focus(function(){$j(this).parent().find('label').fadeOut(100);}).blur(function(){if($j(this).val()==''){$j(this).parent().find('label').fadeIn(100);}});$j(document).bind('dragend',function(event){if($j('div#simpleSearch > label:visible').size()>0&&$j('div#simpleSearch > input#searchInput').val().length>0)
32 -$j('div#simpleSearch > label').fadeOut(100);});$j('#searchInput, #searchInput2, #powerSearchText, #searchText').suggestions({fetch:function(query){var $this=$j(this);var request=$j.ajax({url:wgScriptPath+'/api.php',data:{'action':'opensearch','search':query,'namespace':0,'suggest':''},dataType:'json',success:function(data){$this.suggestions('suggestions',data[1]);}});$j(this).data('request',request);},cancel:function(){var request=$j(this).data('request');if(request&&typeof request.abort=='function'){request.abort();$j(this).removeData('request');}},result:{select:function($textbox){$textbox.closest('form').submit();}},delay:120,positionFromLeft:$j('body').is('.rtl'),highlightInput:true}).bind('paste cut',function(e){$j(this).trigger('keypress');});$j('#searchInput').suggestions({result:{select:function($textbox){$textbox.closest('form').submit();}},special:{render:function(query){if($j(this).children().size()==0){$j(this).show()
 30+if('placeholder'in document.createElement('input')){$j('div#simpleSearch > input#searchInput').attr('placeholder',mw.usability.getMsg('vector-simplesearch-search'));}else{$j('div#simpleSearch > input#searchInput').each(function(){var $input=$j(this);$input.bind('blur',function(){if($input.val().length==0){$input.val(mw.usability.getMsg('vector-simplesearch-search')).addClass('placeholder');}}).bind('focus',function(){if($input.hasClass('placeholder')){$input.val('').removeClass('placeholder');}}).parents('form').bind('submit',function(){$input.trigger('focus');});if($input.val()==''){$input.trigger('blur');}});}
 31+$j('#searchInput, #searchInput2, #powerSearchText, #searchText').suggestions({fetch:function(query){var $this=$j(this);var request=$j.ajax({url:wgScriptPath+'/api.php',data:{'action':'opensearch','search':query,'namespace':0,'suggest':''},dataType:'json',success:function(data){$this.suggestions('suggestions',data[1]);}});$j(this).data('request',request);},cancel:function(){var request=$j(this).data('request');if(request&&typeof request.abort=='function'){request.abort();$j(this).removeData('request');}},result:{select:function($textbox){$textbox.closest('form').submit();}},delay:120,positionFromLeft:$j('body').is('.rtl'),highlightInput:true}).bind('paste cut',function(e){$j(this).trigger('keypress');});$j('#searchInput').suggestions({result:{select:function($textbox){$textbox.closest('form').submit();}},special:{render:function(query){if($j(this).children().size()==0){$j(this).show()
3332 $label=$j('<div />').addClass('special-label').text(mw.usability.getMsg('vector-simplesearch-containing')).appendTo($j(this));$query=$j('<div />').addClass('special-query').text(query).appendTo($j(this));$query.autoEllipsis();}else{$j(this).find('.special-query').empty().text(query).autoEllipsis();}},select:function($textbox){$textbox.closest('form').append($j('<input />').attr({'type':'hidden','name':'fulltext','value':1}));$textbox.closest('form').submit();}},$region:$j('#simpleSearch')});});
\ No newline at end of file
Index: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php
@@ -54,7 +54,7 @@
5555 'base_sets' => array(
5656 'raw' => array(
5757 // Common UsabilityInitiative funtions
58 - array( 'src' => 'js/usability.js', 'version' => 4 ),
 58+ array( 'src' => 'js/usability.js', 'version' => 5 ),
5959
6060 // Core functionality of extension scripts
6161 array( 'src' => 'js/plugins/jquery.async.js', 'version' => 3 ),
@@ -66,7 +66,7 @@
6767 array( 'src' => 'js/plugins/jquery.delayedBind.js', 'version' => 1 ),
6868 array( 'src' => 'js/plugins/jquery.expandableField.js', 'version' => 17 ),
6969 array( 'src' => 'js/plugins/jquery.highlightText.js', 'version' => 1 ),
70 - array( 'src' => 'js/plugins/jquery.suggestions.js', 'version' => 32 ),
 70+ array( 'src' => 'js/plugins/jquery.suggestions.js', 'version' => 33 ),
7171 array( 'src' => 'js/plugins/jquery.textSelection.js', 'version' => 36 ),
7272 array( 'src' => 'js/plugins/jquery.wikiEditor.js', 'version' => 196 ),
7373 array( 'src' => 'js/plugins/jquery.wikiEditor.highlight.js', 'version' => 53 ),
@@ -83,10 +83,10 @@
8484 array( 'src' => 'js/thirdparty/contentCollector.js', 'version' => 2 ),
8585 ),
8686 'combined' => array(
87 - array( 'src' => 'js/plugins.combined.js', 'version' => 450 ),
 87+ array( 'src' => 'js/plugins.combined.js', 'version' => 451 ),
8888 ),
8989 'minified' => array(
90 - array( 'src' => 'js/plugins.combined.min.js', 'version' => 461 ),
 90+ array( 'src' => 'js/plugins.combined.min.js', 'version' => 464 ),
9191 ),
9292 ),
9393 );

Follow-up revisions

RevisionCommit summaryAuthorDate
r69482Accompanies r69481. Style changes for the new search placeholder textadam17:21, 17 July 2010
r69632Fixing indentation on r69481adam16:18, 20 July 2010

Comments

#Comment by Catrope (talk | contribs)   19:24, 19 July 2010
+					if ( $input.val() == '' ) {
+						$input.trigger( 'blur' );
+					}

This code is misindented.

Status & tagging log