1 /* global extDependencyMap */
7 let value = $( this ).val()
8 .replace( /[\[\]{}|#<>%+? ]/g, '_' ) // eslint-disable-line no-useless-escape
9 .replace( /&/, '&' )
10 .replace( /__+/g, '_' )
12 .replace( /_+$/, '' );
13 value = value.charAt( 0 ).toUpperCase() + value.slice( 1 );
14 $label.text( labelText.replace( '$1', value ) );
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();
22 $( document.getElementById( $( '.dbRadio:checked' ).attr( 'rel' ) ) ).show();
23 $( '.dbRadio' ).on( 'click', () => {
24 const $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' );
36 // Scroll to the bottom of upgrade log
37 $( '#config-live-log' ).children( 'textarea' ).each( function () {
38 this.scrollTop = this.scrollHeight;
41 // Show/hide random stuff (email, upload)
42 $( '.showHideRadio' ).on( 'click', function () {
43 const $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' );
49 // eslint-disable-next-line no-jquery/no-animate-toggle
50 $wrapper.hide( 'slow' );
53 $( '.hideShowRadio' ).on( 'click', function () {
54 const $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' );
60 // eslint-disable-next-line no-jquery/no-animate-toggle
61 $wrapper.show( 'slow' );
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();
71 // Enable/disable "other" textboxes
72 $( '.enableForOther' ).on( 'click', function () {
73 const $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' );
80 // eslint-disable-next-line no-jquery/no-slide
81 $textbox.prop( 'readonly', true ).closest( '.config-block' ).slideUp( 'fast' );
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 );
91 // Show/Hide memcached servers when needed
92 $( 'input[name$="config__MainCacheType"]' ).on( 'change', () => {
93 const $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
99 // eslint-disable-next-line no-jquery/no-animate-toggle
100 $memc.hide( 'slow' );
104 function areReqsSatisfied( name ) {
105 let i, ext, skin, node;
106 if ( !extDependencyMap[ name ] ) {
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 ) {
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 ) {
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', () => {
135 $( '.mw-ext-with-dependencies input' ).each( function () {
136 const name = this.getAttribute( 'data-name' );
137 if ( areReqsSatisfied( name ) ) {
139 this.disabled = false;
141 // Uncheck and disable the checkbox
142 this.checked = false;
143 this.disabled = true;
148 const base = window.location.pathname.split( '/mw-config' )[ 0 ];
149 function getLogoPath( src ) {
150 return src.replace( '$wgResourceBasePath', base );
154 sidebar: 'config__Logo1x',
155 icon: 'config__LogoIcon',
156 wordmark: 'config__LogoWordmark',
157 tagline: 'config__LogoTagline'
160 // setup live preview of logos
161 function getLogoData() {
163 Object.keys( nodes ).forEach( ( key ) => {
164 const input = document.getElementById( nodes[ key ] );
166 data[ key ] = getLogoPath( input.value );
173 * Render the logo based on the current input field values.
175 * @param {jQuery} $preview
177 function renderLogo( $preview ) {
178 const data = getLogoData();
179 const $sidebar = $( '<div>' );
180 $sidebar.addClass( 'sidebar' );
181 const sidebarLogo = data.sidebar || data.icon;
183 const $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' )
187 ).appendTo( $sidebar );
189 const $menu = $( '<span>' ).addClass( 'cdx-card__text' ).append(
190 $( '<span>' ).addClass( 'cdx-card__text__title' ).append(
191 $( '<a>' ).attr( 'href', '#' ).text( $preview.data( 'main-page' ) )
194 $menu.appendTo( $sidebarCard );
196 const $main = $( '<span>' ).addClass( 'logo-main' ).addClass( 'cdx-card' );
198 $( '<span>' ).addClass( 'cdx-card__thumbnail cdx-thumbnail' ).html(
199 $( '<img>' ).attr( 'src', data.icon ).addClass( 'logo-icon' )
202 const $container = $( '<span>' ).addClass( 'cdx-card__text' ).appendTo( $main );
205 wordmark: $( '[name=config_LogoSiteName]' ).val()
207 [ 'wordmark', 'tagline' ].forEach( ( key ) => {
208 const src = data[ key ];
210 $( '<img>' ).attr( 'src', src ) :
211 $( '<div>' ).text( fallback[ key ] );
213 // The following classes are used here:
216 $el.addClass( 'logo-' + key ).appendTo( $container );
218 $preview.empty().append( $sidebar, $main );
224 * @param {jQuery} $preview
225 * @param {string} tooltip
227 function addDroppers( $preview, tooltip ) {
228 Object.keys( nodes ).forEach( ( key ) => {
229 const dropper = document.createElement( 'div' );
230 const 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', ( ev ) => {
237 dropper.addEventListener( 'drop', function ( ev ) {
238 // Prevent default behavior (Prevent file from being opened)
241 const item = ev.dataTransfer.items[ 0 ];
242 // Only allow images.
243 if ( item && item.type.indexOf( 'image/' ) === 0 ) {
244 const blob = item.getAsFile();
245 const reader = new FileReader();
246 reader.readAsDataURL( blob );
247 reader.onloadend = function () {
248 const base64data = reader.result;
249 d.previousSibling.value = base64data;
250 renderLogo( $preview );
257 // setup preview area to respond to changes.
258 const $pOptions = $( '.config-personalization-options' );
259 if ( $pOptions.length ) {
260 const $previewArea = $pOptions.find( '.logo-preview-area' );
261 $pOptions.find( ' input' ).on( 'input', () => {
262 renderLogo( $previewArea );
264 addDroppers( $previewArea, $previewArea.data( 'filedrop' ) );
265 renderLogo( $previewArea );
268 $( 'a.config-help-field-hint' ).on( 'click', function () {
269 // eslint-disable-next-line no-jquery/no-class-state
271 .siblings( 'div.config-help-field-content' )
272 .toggleClass( 'config-help-field-content-hidden' );