mw-config/config.js

   1 /* global extDependencyMap */
   2 ( function () {
   3         $( function () {
   4                 var $label, labelText;
   5
   6                 function syncText() {
   7                         var value = $( this ).val()
   8                                 .replace( /[\[\]{}|#<>%+? ]/g, '_' ) // eslint-disable-line no-useless-escape
   9                                 .replace( /&/, '&amp;' )
  10                                 .replace( /__+/g, '_' )
  11                                 .replace( /^_+/, '' )
  12                                 .replace( /_+$/, '' );
  13                         value = value.charAt( 0 ).toUpperCase() + value.slice( 1 );
  14                         $label.text( labelText.replace( '$1', value ) );
  15                 }
  16
  17                 // Show/hide code for DB-specific options
  18                 // FIXME: Do we want slow, fast, or even non-animated (instantaneous) showing/hiding here?
  19                 $( '.dbRadio' ).each( function () {
  20                         $( document.getElementById( $( this ).attr( 'rel' ) ) ).hide();
  21                 } );
  22                 $( document.getElementById( $( '.dbRadio:checked' ).attr( 'rel' ) ) ).show();
  23                 $( '.dbRadio' ).on( 'click', function () {
  24                         var $checked = $( '.dbRadio:checked' ),
  25                                 $wrapper = $( document.getElementById( $checked.attr( 'rel' ) ) );
  26                         // eslint-disable-next-line no-jquery/no-sizzle
  27                         if ( $wrapper.is( ':hidden' ) ) {
  28                                 // FIXME: Use CSS transition
  29                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  30                                 $( '.dbWrapper' ).hide( 'slow' );
  31                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  32                                 $wrapper.show( 'slow' );
  33                         }
  34                 } );
  35
  36                 // Scroll to the bottom of upgrade log
  37                 $( '#config-live-log' ).children( 'textarea' ).each( function () {
  38                         this.scrollTop = this.scrollHeight;
  39                 } );
  40
  41                 // Show/hide random stuff (email, upload)
  42                 $( '.showHideRadio' ).on( 'click', function () {
  43                         var $wrapper = $( '#' + $( this ).attr( 'rel' ) );
  44                         if ( $( this ).is( ':checked' ) ) {
  45                                 // FIXME: Use CSS transition
  46                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  47                                 $wrapper.show( 'slow' );
  48                         } else {
  49                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  50                                 $wrapper.hide( 'slow' );
  51                         }
  52                 } );
  53                 $( '.hideShowRadio' ).on( 'click', function () {
  54                         var $wrapper = $( '#' + $( this ).attr( 'rel' ) );
  55                         if ( $( this ).is( ':checked' ) ) {
  56                                 // FIXME: Use CSS transition
  57                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  58                                 $wrapper.hide( 'slow' );
  59                         } else {
  60                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  61                                 $wrapper.show( 'slow' );
  62                         }
  63                 } );
  64
  65                 // Hide "other" textboxes by default
  66                 // Should not be done in CSS for javascript disabled compatibility
  67                 if ( !$( '#config__NamespaceType_other' ).is( ':checked' ) ) {
  68                         $( '.enabledByOther' ).closest( '.config-block' ).hide();
  69                 }
  70
  71                 // Enable/disable "other" textboxes
  72                 $( '.enableForOther' ).on( 'click', function () {
  73                         var $textbox = $( document.getElementById( $( this ).attr( 'rel' ) ) );
  74                         // FIXME: Ugh, this is ugly
  75                         if ( $( this ).val() === 'other' ) {
  76                                 // FIXME: Use CSS transition
  77                                 // eslint-disable-next-line no-jquery/no-slide
  78                                 $textbox.prop( 'readonly', false ).closest( '.config-block' ).slideDown( 'fast' );
  79                         } else {
  80                                 // eslint-disable-next-line no-jquery/no-slide
  81                                 $textbox.prop( 'readonly', true ).closest( '.config-block' ).slideUp( 'fast' );
  82                         }
  83                 } );
  84
  85                 // Synchronize radio button label for sitename with textbox
  86                 $label = $( 'label[for="config__NamespaceType_site-name"]' );
  87                 labelText = $label.text();
  88                 $label.text( labelText.replace( '$1', '' ) );
  89                 $( '#config_wgSitename' ).on( 'keyup change', syncText ).each( syncText );
  90
  91                 // Show/Hide memcached servers when needed
  92                 $( 'input[name$="config__MainCacheType"]' ).on( 'change', function () {
  93                         var $memc = $( '#config-memcachewrapper' );
  94                         if ( $( 'input[name$="config__MainCacheType"]:checked' ).val() === 'memcached' ) {
  95                                 // FIXME: Use CSS transition
  96                                 // eslint-disable-next-line no-jquery/no-animate-toggle
  97                                 $memc.show( 'slow' );
  98                         } else {
  99                                 // eslint-disable-next-line no-jquery/no-animate-toggle
 100                                 $memc.hide( 'slow' );
 101                         }
 102                 } );
 103
 104                 function areReqsSatisfied( name ) {
 105                         var i, ext, skin, node;
 106                         if ( !extDependencyMap[ name ] ) {
 107                                 return true;
 108                         }
 109
 110                         if ( extDependencyMap[ name ].extensions ) {
 111                                 for ( i in extDependencyMap[ name ].extensions ) {
 112                                         ext = extDependencyMap[ name ].extensions[ i ];
 113                                         node = document.getElementById( 'config_ext-' + ext );
 114                                         if ( !node || !node.checked ) {
 115                                                 return false;
 116                                         }
 117                                 }
 118                         }
 119                         if ( extDependencyMap[ name ].skins ) {
 120                                 for ( i in extDependencyMap[ name ].skins ) {
 121                                         skin = extDependencyMap[ name ].skins[ i ];
 122                                         node = document.getElementById( 'config_skin-' + skin );
 123                                         if ( !node || !node.checked ) {
 124                                                 return false;
 125                                         }
 126                                 }
 127                         }
 128
 129                         return true;
 130                 }
 131
 132                 // Disable checkboxes if the extension has dependencies
 133                 $( '.mw-ext-with-dependencies input' ).prop( 'disabled', true );
 134                 $( '.config-ext-input[data-name]' ).on( 'change', function () {
 135                         $( '.mw-ext-with-dependencies input' ).each( function () {
 136                                 var name = this.getAttribute( 'data-name' );
 137                                 if ( areReqsSatisfied( name ) ) {
 138                                         // Re-enable it!
 139                                         this.disabled = false;
 140                                 } else {
 141                                         // Uncheck and disable the checkbox
 142                                         this.checked = false;
 143                                         this.disabled = true;
 144                                 }
 145                         } );
 146                 } );
 147
 148                 var base = window.location.pathname.split( '/mw-config' )[ 0 ];
 149                 function getLogoPath( src ) {
 150                         return src.replace( '$wgResourceBasePath', base );
 151                 }
 152
 153                 var nodes = {
 154                         sidebar: 'config__Logo1x',
 155                         icon: 'config__LogoIcon',
 156                         wordmark: 'config__LogoWordmark',
 157                         tagline: 'config__LogoTagline'
 158                 };
 159
 160                 // setup live preview of logos
 161                 function getLogoData() {
 162                         var data = {};
 163                         Object.keys( nodes ).forEach( function ( key ) {
 164                                 var input = document.getElementById( nodes[ key ] );
 165                                 if ( input ) {
 166                                         data[ key ] = getLogoPath( input.value );
 167                                 }
 168                         } );
 169                         return data;
 170                 }
 171
 172                 /**
 173                  * Render the logo based on the current input field values.
 174                  *
 175                  * @param {jQuery} $preview
 176                  */
 177                 function renderLogo( $preview ) {
 178                         var data = getLogoData();
 179                         var $sidebar = $( '<div>' );
 180                         $sidebar.addClass( 'sidebar' );
 181                         var sidebarLogo = data.sidebar || data.icon;
 182                         if ( sidebarLogo ) {
 183                                 var $sidebarCard = $( '<span>' ).addClass( 'cdx-card' ).css( 'display', 'inline-block' ).append(
 184                                         $( '<span>' ).addClass( 'cdx-card__thumbnail cdx-thumbnail' ).html(
 185                                                 $( '<img>' ).attr( 'src', sidebarLogo ).addClass( 'logo-sidebar' )
 186                                         )
 187                                 ).appendTo( $sidebar );
 188
 189                                 var $menu = $( '<span>' ).addClass( 'cdx-card__text' ).append(
 190                                         $( '<span>' ).addClass( 'cdx-card__text__title' ).append(
 191                                                 $( '<a>' ).attr( 'href', '#' ).text( $preview.data( 'main-page' ) )
 192                                         )
 193                                 );
 194                                 $menu.appendTo( $sidebarCard );
 195                         }
 196                         var $main = $( '<span>' ).addClass( 'logo-main' ).addClass( 'cdx-card' );
 197                         if ( data.icon ) {
 198                                 $( '<span>' ).addClass( 'cdx-card__thumbnail cdx-thumbnail' ).html(
 199                                         $( '<img>' ).attr( 'src', data.icon ).addClass( 'logo-icon' )
 200                                 ).appendTo( $main );
 201                         }
 202                         var $container = $( '<span>' ).addClass( 'cdx-card__text' ).appendTo( $main );
 203
 204                         var fallback = {
 205                                 wordmark: $( '[name=config_LogoSiteName]' ).val()
 206                         };
 207                         [ 'wordmark', 'tagline' ].forEach( function ( key ) {
 208                                 var src = data[ key ];
 209                                 var $el = src ?
 210                                         $( '<img>' ).attr( 'src', src ) :
 211                                         $( '<div>' ).text( fallback[ key ] );
 212
 213                                 // The following classes are used here:
 214                                 // * logo-wordmark
 215                                 // * logo-tagline
 216                                 $el.addClass( 'logo-' + key ).appendTo( $container );
 217                         } );
 218                         $preview.empty().append( $sidebar, $main );
 219                 }
 220
 221                 /**
 222                  * Adds file droppers
 223                  *
 224                  * @param {jQuery} $preview
 225                  * @param {string} tooltip
 226                  */
 227                 function addDroppers( $preview, tooltip ) {
 228                         Object.keys( nodes ).forEach( function ( key ) {
 229                                 var dropper = document.createElement( 'div' );
 230                                 var input = document.getElementById( nodes[ key ] );
 231                                 dropper.textContent = tooltip;
 232                                 input.parentNode.insertBefore( dropper, input.nextSibling );
 233                                 dropper.classList.add( 'logo-dropper' );
 234                                 dropper.addEventListener( 'dragover', function ( ev ) {
 235                                         ev.preventDefault();
 236                                 } );
 237                                 dropper.addEventListener( 'drop', function ( ev ) {
 238                                         // Prevent default behavior (Prevent file from being opened)
 239                                         ev.preventDefault();
 240                                         var d = this;
 241                                         var item = ev.dataTransfer.items[ 0 ];
 242                                         // Only allow images.
 243                                         if ( item && item.type.indexOf( 'image/' ) === 0 ) {
 244                                                 var blob = item.getAsFile();
 245                                                 var reader = new FileReader();
 246                                                 reader.readAsDataURL( blob );
 247                                                 reader.onloadend = function () {
 248                                                         var base64data = reader.result;
 249                                                         d.previousSibling.value = base64data;
 250                                                         renderLogo( $preview );
 251                                                 };
 252                                         }
 253                                 } );
 254                         } );
 255                 }
 256
 257                 // setup preview area to respond to changes.
 258                 var $pOptions = $( '.config-personalization-options' );
 259                 if ( $pOptions.length ) {
 260                         var $previewArea = $pOptions.find( '.logo-preview-area' );
 261                         $pOptions.find( ' input' ).on( 'input', function () {
 262                                 renderLogo( $previewArea );
 263                         } );
 264                         addDroppers( $previewArea, $previewArea.data( 'filedrop' ) );
 265                         renderLogo( $previewArea );
 266                 }
 267
 268                 $( 'a.config-help-field-hint' ).on( 'click', function () {
 269                         // eslint-disable-next-line no-jquery/no-class-state
 270                         $( this )
 271                                 .siblings( 'div.config-help-field-content' )
 272                                 .toggleClass( 'config-help-field-content-hidden' );
 273                 } );
 274         } );
 275 }() );