resources/mediawiki.special/mediawiki.special.preferences.js

   1 /*
   2  * JavaScript for Special:Preferences
   3  */
   4 ( function( $, mw ) {
   5 $( '#prefsubmit' ).attr( 'id', 'prefcontrol' );
   6 var $preftoc = $('<ul id="preftoc"></ul>');
   7 var $preferences = $( '#preferences' )
   8         .addClass( 'jsprefs' )
   9         .before( $preftoc );
  10
  11 var $fieldsets = $preferences.children( 'fieldset' )
  12         .hide()
  13         .addClass( 'prefsection' );
  14
  15 var $legends = $fieldsets.children( 'legend' )
  16         .addClass( 'mainLegend' );
  17
  18 // Populate the prefToc
  19 $legends.each( function( i, legend ) {
  20         var $legend = $(legend);
  21         if ( i === 0 ) {
  22                 $legend.parent().show();
  23         }
  24         var ident = $legend.parent().attr( 'id' );
  25
  26         var $li = $( '<li/>', {
  27                 'class' : ( i === 0 ) ? 'selected' : null
  28         });
  29         var $a = $( '<a/>', {
  30                 text : $legend.text(),
  31                 id   : ident.replace('prefsection', 'preftab'),
  32                 href : '#' + ident
  33         }).click( function( e ) {
  34                 e.preventDefault();
  35                 // Handle hash manually to prevent jumping
  36                 // Therefore save and restore scrollTop to prevent jumping
  37                 var scrollTop = $(window).scrollTop();
  38                 window.location.hash = $(this).attr('href');
  39                 $(window).scrollTop(scrollTop);
  40
  41                 $preftoc.find( 'li' ).removeClass( 'selected' );
  42                 $(this).parent().addClass( 'selected' );
  43                 $( '#preferences > fieldset' ).hide();
  44                 $( '#' + ident ).show();
  45         });
  46         $li.append( $a );
  47         $preftoc.append( $li );
  48 } );
  49
  50 // If we've reloaded the page or followed an open-in-new-window,
  51 // make the selected tab visible.
  52 // On document ready:
  53 $( function() {
  54         var hash = window.location.hash;
  55         if( hash.match( /^#prefsection-[\w-]+/ ) ) {
  56                 var $tab = $( hash.replace('prefsection', 'preftab') );
  57                 $tab.click();
  58         }
  59 } );
  60
  61 /**
  62  * Given an email validity status (true, false, null) update the label CSS class
  63  */
  64 var updateMailValidityLabel = function( mail ) {
  65         var     isValid = mw.util.validateEmail( mail ),
  66                 $label = $( '#mw-emailaddress-validity' );
  67
  68         // We allow empty address
  69         if( isValid === null ) {
  70                 $label.text( '' ).removeClass( 'valid invalid' );
  71
  72         // Valid
  73         } else if ( isValid ) {
  74                 $label.text( mw.msg( 'email-address-validity-valid' ) ).addClass( 'valid' ).removeClass( 'invalid' );
  75
  76         // Not valid
  77         } else {
  78                 $label.text( mw.msg( 'email-address-validity-invalid' ) ).addClass( 'invalid' ).removeClass( 'valid' );
  79         }
  80 };
  81
  82 // Lame tip to let user know if its email is valid. See bug 22449
  83 // Only bind once for 'blur' so that the user can fill it in without errors
  84 // After that look at every keypress for direct feedback if it was invalid onblur
  85 $( '#mw-input-wpemailaddress' ).one( 'blur', function() {
  86         if ( $( '#mw-emailaddress-validity' ).length === 0 ) {
  87                 $(this).after( '<label for="mw-input-wpemailaddress" id="mw-emailaddress-validity"></label>' );
  88         }
  89         updateMailValidityLabel( $(this).val() );
  90         $(this).keyup( function() {
  91                 updateMailValidityLabel( $(this).val() );
  92         } );
  93 } );
  94
  95
  96
  97 /**
  98 * Timezone functions.
  99 * Guesses Timezone from browser and updates fields onchange
 100 */
 101
 102 var $tzSelect = $( '#mw-input-wptimecorrection' );
 103 var $tzTextbox = $( '#mw-input-wptimecorrection-other' );
 104
 105 var $localtimeHolder = $( '#wpLocalTime' );
 106 var servertime = parseInt( $( 'input[name=wpServerTime]' ).val(), 10 );
 107 var minuteDiff = 0;
 108
 109 var minutesToHours = function( min ) {
 110         var tzHour = Math.floor( Math.abs( min ) / 60 );
 111         var tzMin = Math.abs( min ) % 60;
 112         var tzString = ( ( min >= 0 ) ? '' : '-' ) + ( ( tzHour < 10 ) ? '0' : '' ) + tzHour +
 113                 ':' + ( ( tzMin < 10 ) ? '0' : '' ) + tzMin;
 114         return tzString;
 115 };
 116
 117 var hoursToMinutes = function( hour ) {
 118         var arr = hour.split( ':' );
 119         arr[0] = parseInt( arr[0], 10 );
 120
 121         var minutes;
 122         if ( arr.length == 1 ) {
 123                 // Specification is of the form [-]XX
 124                 minutes = arr[0] * 60;
 125         } else {
 126                 // Specification is of the form [-]XX:XX
 127                 minutes = Math.abs( arr[0] ) * 60 + parseInt( arr[1], 10 );
 128                 if ( arr[0] < 0 ) {
 129                         minutes *= -1;
 130                 }
 131         }
 132         // Gracefully handle non-numbers.
 133         if ( isNaN( minutes ) ) {
 134                 return 0;
 135         } else {
 136                 return minutes;
 137         }
 138 };
 139
 140 var updateTimezoneSelection = function() {
 141         var type = $tzSelect.val();
 142         if ( type == 'guess' ) {
 143                 // Get browser timezone & fill it in
 144                 minuteDiff = -new Date().getTimezoneOffset();
 145                 $tzTextbox.val( minutesToHours( minuteDiff ) );
 146                 $tzSelect.val( 'other' );
 147                 $tzTextbox.get( 0 ).disabled = false;
 148         } else if ( type == 'other'  ) {
 149                 // Grab data from the textbox, parse it.
 150                 minuteDiff = hoursToMinutes( $tzTextbox.val() );
 151         } else {
 152                 // Grab data from the $tzSelect value
 153                 minuteDiff = parseInt( type.split( '|' )[1], 10 ) || 0;
 154                 $tzTextbox.val( minutesToHours( minuteDiff ) );
 155         }
 156
 157         // Determine local time from server time and minutes difference, for display.
 158         var localTime = servertime + minuteDiff;
 159
 160         // Bring time within the [0,1440) range.
 161         while ( localTime < 0 ) {
 162                 localTime += 1440;
 163         }
 164         while ( localTime >= 1440 ) {
 165                 localTime -= 1440;
 166         }
 167         $localtimeHolder.text( minutesToHours( localTime ) );
 168 };
 169
 170 if ( $tzSelect.length && $tzTextbox.length ) {
 171         $tzSelect.change( function() { updateTimezoneSelection(); } );
 172         $tzTextbox.blur( function() { updateTimezoneSelection(); } );
 173         updateTimezoneSelection();
 174 }
 175 } )( jQuery, mediaWiki );