pressbooks-aldine/lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js

/* global wp, _validateWCAGColorContrastExports */
/* exported validateWCAGColorContrast */
let validateWCAGColorContrast = ( function ( $, api, exports ) {
	let self = { validate_color_contrast: [] };
	if ( exports ) {
		$.extend( self, exports );
	}
	/**
	 * Add contrast validation to a control if it is entitled (is a valid color control).
	 *
	 * @param {wp.customize.Control} setting                   - Control.
	 * @param {wp.customize.Value}   setting.validationMessage - Validation message.
	 * @return {boolean} Whether validation was added.
	 */
	self.addWCAGColorContrastValidation = function ( setting ) {
		let initialValidate;

		if ( ! self.isColorControl( setting ) ) {
			return false;
		}
		initialValidate = setting.validate;

		/**
		 * Wrap the setting's validate() method to do validation on the value to be sent to the server.
		 *
		 * @param {mixed} value   - New value being assigned to the setting.
		 * @returns {*}
		 */
		setting.validate = function ( value ) {
			let setting       = this, title, validationError;
			let current_color = value;
			let current_id    = this.id;

			let all_color_controls = _.union( _.flatten( _.values( self.validate_color_contrast  ) ) );

			// remove other (old) notifications
			_.each( _.without( all_color_controls, current_id ), function ( other_color_control_id ) {
				 let other_control = api.control.instance( other_color_control_id );
				 notice            = other_control.container.find( '.notice' );
				 notice.hide();
			} );

			// find other color controls and check contrast with current color control
			let other_color_controls =  self.validate_color_contrast[ current_id ];

			_.each( other_color_controls, function ( other_color_control_id ) {
				let other_control = api.control.instance( other_color_control_id );
				let other_color   = other_control.container.find( '.color-picker-hex' ).val();
				let name          = $( '#customize-control-' + other_color_control_id + ' .customize-control-title' ).text();
				let contrast      = self.hex( current_color, other_color );
				let score         = self.score( contrast );

				// contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : ""
				if ( contrast <  4.5 ) {
					setting.notifications.remove( other_color_control_id );
					validationWarning = new api.Notification( other_color_control_id, { message: self.sprintf( 'WCAG conflict with "%s"<br/>contrast: %s', name, contrast ), type: 'warning' } );
					setting.notifications.add( validationWarning.code, validationWarning );
					// console.log(  color_control_id + ' ' + color + ' ' + contrast + ' ' + score );
				} else {
					setting.notifications.remove( other_color_control_id );
				}
			} );

			return value;
		};

		return true;
	};

	/**
	 * Return whether the setting is entitled (i.e. if it is a title or has a title).
	 *
	 * @param {wp.customize.Setting} setting - Setting.
	 * @returns {boolean}
	 */
	self.isColorControl = function ( setting ) {
		 return _.findKey( self.validate_color_contrast, function ( key, value ) {
			return value == setting.id;
		} );
	};

	api.bind( 'add', function ( setting ) {
		self.addWCAGColorContrastValidation( setting );
	} );

	self.sprintf = function ( format ) {
		for ( let i=1; i < arguments.length; i++ ) {
			format = format.replace( /%s/, arguments[i] );
		}
		return format;
	};

	/**
	 * Methods used to calculate WCAG Color Contrast
	 */

	// from https://github.com/sindresorhus/hex-rgb
	self.hexRgb = function ( hex ) {
		if ( typeof hex !== 'string' ) {
			throw new TypeError( 'Expected a string' );
		}

		hex = hex.replace( /^#/, '' );

		if ( hex.length === 3 ) {
			hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
		}

		let num = parseInt( hex, 16 );

		return [ num >> 16, num >> 8 & 255, num & 255 ];
	};

	// from https://github.com/tmcw/relative-luminance
	// # Relative luminance
	//
	// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	// https://en.wikipedia.org/wiki/Luminance_(relative)
	// https://en.wikipedia.org/wiki/Luminosity_function
	// https://en.wikipedia.org/wiki/Rec._709#Luma_coefficients

	// red, green, and blue coefficients
	let rc = 0.2126,
	  gc = 0.7152,
	  bc = 0.0722,
	  // low-gamma adjust coefficient
	  lowc = 1 / 12.92;

	self.adjustGamma = function ( g ) {
	  return Math.pow( ( g + 0.055 ) / 1.055, 2.4 );
	};

	/**
	 * Given a 3-element array of R, G, B varying from 0 to 255, return the luminance
	 * as a number from 0 to 1.
	 * @param {Array<number>} rgb 3-element array of a color
	 * @returns {number} luminance, between 0 and 1
	 * @example
	 * var luminance = require('relative-luminance');
	 * var black_lum = luminance([0, 0, 0]); // 0
	 */
	self.relativeLuminance = function ( rgb ) {
	  let rsrgb = rgb[0] / 255;
	  let gsrgb = rgb[1] / 255;
	  let bsrgb = rgb[2] / 255;

	  let r = rsrgb <= 0.03928 ? rsrgb * lowc : self.adjustGamma( rsrgb ),
	    g = gsrgb <= 0.03928 ? gsrgb * lowc : self.adjustGamma( gsrgb ),
	    b = bsrgb <= 0.03928 ? bsrgb * lowc : self.adjustGamma( bsrgb );

	  return r * rc + g * gc + b * bc;
	};

	// from https://github.com/tmcw/wcag-contrast
	/**
	 * Get the contrast ratio between two relative luminance values
	 * @param {number} a luminance value
	 * @param {number} b luminance value
	 * @returns {number} contrast ratio
	 * @example
	 * luminance(1, 1); // = 1
	 */
	self.luminance = function ( a, b ) {
	  let l1 = Math.max( a, b );
	  let l2 = Math.min( a, b );
	  return ( l1 + 0.05 ) / ( l2 + 0.05 );
	};

	/**
	 * Get a score for the contrast between two colors as rgb triplets
	 * @param {array} a
	 * @param {array} b
	 * @returns {number} contrast ratio
	 * @example
	 * rgb([0, 0, 0], [255, 255, 255]); // = 21
	 */
	self.rgb = function ( a, b ) {
	  return self.luminance( self.relativeLuminance( a ), self.relativeLuminance( b ) );
	};

	/**
	 * Get a score for the contrast between two colors as hex strings
	 * @param {string} a hex value
	 * @param {string} b hex value
	 * @returns {number} contrast ratio
	 * @example
	 * hex('#000', '#fff'); // = 21
	 */
	self.hex = function ( a, b ) {
	  return self.rgb( self.hexRgb( a ), self.hexRgb( b ) );
	};

	/**
	 * Get a textual score from a numeric contrast value
	 * @param {number} contrast
	 * @returns {string} score
	 * @example
	 * score(10); // = 'AAA'
	 */
	self.score = function ( contrast ) {
	  return contrast >= 7 ? 'AAA' : contrast >= 4.5 ? 'AA' : '';
	};

	return self;

}( jQuery, wp.customize, _validateWCAGColorContrastExports ) );