WordPress/wp-content/themes/twentytwentyone/assets/js/customize.js
desrosj 0e85b07bc8 Twenty Twenty: Import the latest changes from GitHub
For a full list of changes since [49216], see dfe141276c...trunk/.

Props poena, melchoyce, luminuu, aristath, jffng, ryelle, kishanjasani, rolfsiebers, sresok, desrosj.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49247


git-svn-id: http://core.svn.wordpress.org/trunk@49009 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-20 18:26:06 +00:00

61 lines
2.4 KiB
JavaScript

/* global twentytwentyoneGetHexLum, backgroundColorNotice */
( function() {
// Wait until the customizer has finished loading.
wp.customize.bind( 'ready', function() {
var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() );
// Hide the "respect_user_color_preference" setting if the background-color is dark.
if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
wp.customize.control( 'respect_user_color_preference' ).deactivate();
}
// Add notice on init if needed.
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches && wp.customize( 'respect_user_color_preference' ) ) {
if ( supportsDarkMode ) {
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
type: 'info',
message: backgroundColorNotice.message
} ) );
}
// Remove notice when the value changes.
wp.customize( 'background_color', function( setting ) {
setting.bind( function() {
setting.notifications.remove( 'backgroundColorNotice' );
} );
} );
}
// Handle changes to the background-color.
wp.customize( 'background_color', function( setting ) {
setting.bind( function( value ) {
if ( 127 > twentytwentyoneGetHexLum( value ) ) {
wp.customize.control( 'respect_user_color_preference' ).deactivate();
supportsDarkMode = false;
} else {
wp.customize.control( 'respect_user_color_preference' ).activate();
supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get();
}
} );
} );
// Handle changes to the "respect_user_color_preference" setting.
wp.customize( 'respect_user_color_preference', function( setting ) {
setting.bind( function( value ) {
supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() );
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
if ( ! supportsDarkMode ) {
wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' );
} else {
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
type: 'info',
message: backgroundColorNotice.message
} ) );
}
}
} );
} );
} );
}() );