Skip to content

Commit

Permalink
v0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@aristath
aristath committed Oct 13, 2019
1 parent 27b2f6b commit 02489d3
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 255 deletions.
2 changes: 2 additions & 0 deletions .gitattributes
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
/.git export-ignore
/.gitattributes export-ignore
/.gitignore export-ignore
/.eslintignore export-ignore
/.eslintrc export-ignore
/CHANGELOG.md export-ignore
/composer.lock export-ignore
/contributing.md export-ignore
Expand Down
2 changes: 1 addition & 1 deletion dist/main.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/Control/WCAGLinkColor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class WCAGLinkColor extends Base {
* @since 1.0
* @var string
*/
public static $control_ver = '2.0';
public static $control_ver = '0.1';

/**
* Enqueue control related scripts/styles.
Expand All @@ -55,10 +55,10 @@ public function enqueue() {
parent::enqueue();

// Enqueue the script.
wp_enqueue_script( 'wplemon-control-auto-links-colorpicker', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/main.js' ), [ 'customize-controls', 'wp-element', 'jquery', 'customize-base', 'kirki-dynamic-control', 'wp-color-picker' ], time(), false );
wp_enqueue_script( 'wplemon-control-auto-links-colorpicker', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/main.js' ), [ 'customize-controls', 'wp-element', 'jquery', 'customize-base', 'kirki-dynamic-control', 'wp-color-picker' ], self::$control_ver, false );

// Enqueue the style.
wp_enqueue_style( 'wplemon-control-auto-links-colorpicker-style', URL::get_from_path( dirname( __DIR__ ) . '/style.css' ), [], time() );
wp_enqueue_style( 'wplemon-control-auto-links-colorpicker-style', URL::get_from_path( dirname( __DIR__ ) . '/style.css' ), [], self::$control_ver );
}

/**
Expand Down
264 changes: 13 additions & 251 deletions src/WCAGLinkColorControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
textColor={ control.getTextColor() }
autoColor={ control.getAutoColor() }
recommendedColorsFlat={ control.getRecommendedColorsFlat() }
activeMode={ control.getMode() }
activeMode={ 'auto' }
hue={ control.getHue() }
/>,
control.container[ 0 ]
Expand All @@ -92,8 +92,6 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
ready: function ready() {
const control = this;

control.setMode( control.getMode() );

// Re-render control when setting changes.
control.setting.bind( () => {
control.renderContent();
Expand Down Expand Up @@ -175,13 +173,9 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
control.backgroundColor = false;
control.textColor = false;
control.recommendedColors = false;
// If auto or recommended mode, change the active color.
if ( 'auto' === control.getMode() || 'recommended' === control.getMode() ) {
const val = control.getAutoColor( parseInt( control.getHue(), 10 ), true );
control.setting.set( val );
} else {
control.renderContent();
}

const val = control.getAutoColor( parseInt( control.getHue(), 10 ), true );
control.setting.set( val );
}, 100 ) );
} );

Expand All @@ -192,13 +186,9 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
control.backgroundColor = false;
control.textColor = false;
control.recommendedColors = false;
// If auto or recommended mode, change the active color.
if ( 'auto' === control.getMode() || 'recommended' === control.getMode() ) {
const val = control.getAutoColor( parseInt( control.getHue(), 10 ), true );
control.setting.set( val );
} else {
control.renderContent();
}

const val = control.getAutoColor( parseInt( control.getHue(), 10 ), true );
control.setting.set( val );
}, 100 ) );
} );
}
Expand Down Expand Up @@ -235,180 +225,17 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
return this.getRecommendedColorsFlat( control.getHue(), forceRecalc )[ 0 ];
},

getMode() {
const control = this;

// If we already have a mode defined return it.
if ( control.forcedMode ) {
return control.forcedMode;
}

const availableModes = control.getAvailableModes();

// If we only have 1 mode, return it.
if ( 1 === availableModes.length ) {
return availableModes[ 0 ];
}

const currentVal = control.setting.get();

// Check if auto.
if ( -1 !== availableModes.indexOf( 'auto' ) && currentVal === control.getAutoColor() ) {
return 'auto';
}

// Check if recommended.
if ( -1 !== availableModes.indexOf( 'recommended' ) && control.isColorRecommended( currentVal ) ) {
return 'recommended';
}

// If custom is available return it, otherwise fallback to the 1st available.
return ( -1 !== availableModes.indexOf( 'custom' ) ) ? 'custom' : availableModes[ 0 ];
},

isColorRecommended( color ) {
return -1 !== this.getRecommendedColorsFlat().indexOf( color );
},

// Get available modes.
getAvailableModes() {
const control = this;
const availableModes = [];
[ 'auto', 'recommended', 'custom' ].forEach( function( mode ) {
if ( control.isModeAvailable( mode ) ) {
availableModes.push( mode );
}
} );
return availableModes;
},

// Check if a mode is available.
isModeAvailable( mode ) {
const control = this;
if ( ! control.params.choices.show ) {
return true;
}
return ( false !== control.params.choices.show[ mode ] );
},

// getRecommendedColors( checkHue ) {
// const control = this;
// const backgroundColor = Color( control.getBackgroundColor() );
// const textColor = Color( control.getTextColor() );
// const isDarkBackground = '#000000' !== backgroundColor.getMaxContrastColor().toCSS();
// const hue = ( 'undefined' !== typeof checkHue ) ? parseInt( checkHue ) : Color( control.setting.get() ).h();
// const lightnessStepsMap = [
// {
// minHue: 20,
// maxHue: 40,
// lightness: [ 20, 40 ],
// step: 2
// },
// {
// minHue: 40,
// maxHue: 150,
// lightness: [ 12, 35 ],
// step: 1.5
// },
// {
// minHue: 150,
// maxHue: 200,
// lightness: [ 15, 35 ],
// step: 1.5
// },
// {
// minHue: 200,
// maxHue: 250,
// lightness: [ 21, 45 ],
// step: 1.5
// },
// // Fallback in case none of the above cases.
// {
// minHue: 0,
// maxHue: 359,
// lightness: [ 27, 42.5 ],
// step: 1.1
// }
// ];
// const minL = () => {
// for ( let i = 0; i < lightnessStepsMap.length; i++ ) {
// if ( hue >= lightnessStepsMap[ i ].minHue && hue <= lightnessStepsMap[ i ].maxHue ) {
// return ( isDarkBackground ) ? 100 - lightnessStepsMap[ i ].lightness[ 1 ] : lightnessStepsMap[ i ].lightness[ 0 ];
// }
// }
// };
// const maxL = () => {
// for ( let i = 0; i < lightnessStepsMap.length; i++ ) {
// if ( hue >= lightnessStepsMap[ i ].minHue && hue <= lightnessStepsMap[ i ].maxHue ) {
// return ( isDarkBackground ) ? 100 - lightnessStepsMap[ i ].lightness[ 0 ] : lightnessStepsMap[ i ].lightness[ 1 ];
// }
// }
// };
// const stepLightness = () => {
// for ( let i = 0; i < lightnessStepsMap.length; i++ ) {
// if ( hue >= lightnessStepsMap[ i ].minHue && hue <= lightnessStepsMap[ i ].maxHue ) {
// return lightnessStepsMap[ i ].step;
// }
// }
// };

// control.recommendedColors = [];

// const saturationSteps = [ 40, 50, 55, 60, 62.5, 65, 67.5, 70, 72, 74, 76, 78, 80, 82, 5, 85, 87.5, 90, 95, 100 ];
// saturationSteps.forEach( function( saturation ) {
// for ( let lightness = minL(); lightness <= maxL(); lightness += stepLightness() ) {
// const item = {
// color: Color( {
// h: hue,
// s: saturation,
// l: lightness
// } )
// };
// item.contrastBackground = item.color.getDistanceLuminosityFrom( backgroundColor );
// item.contrastText = item.color.getDistanceLuminosityFrom( textColor );
// item.score = control.getConstrastScore( item.contrastBackground, item.contrastText );

// // Check if the color is already in our array.
// const colorAlreadyInArray = control.recommendedColors.find( function( el ) {
// return el.color._color === item.color._color;
// } );

// // Only add if the color is not already in the array.
// if ( 4.5 < item.contrastBackground && undefined === colorAlreadyInArray ) {
// control.recommendedColors.push( item );
// }
// }
// } );

// // Add fallbacks in case we couldn't find any colors.
// if ( ! control.recommendedColors.length ) {
// const item = {
// color: Color( {
// h: hue,
// s: 50,
// l: 50
// } ).getReadableContrastingColor( backgroundColor )
// };
// item.contrastBackground = item.color.getDistanceLuminosityFrom( backgroundColor );
// item.contrastText = item.color.getDistanceLuminosityFrom( textColor );
// item.score = control.getConstrastScore( item.contrastBackground, item.contrastText );

// control.recommendedColors.push( item );
// }

// control.recommendedColors.sort( function( a, b ) {
// return b.score - a.score;
// } );

// return control.recommendedColors;
// },

// Get an array of Color objects for recommended colors for this hue.
getRecommendedColors( checkHue ) {
const control = this;
const backgroundColor = Color( control.getBackgroundColor() );
const textColor = Color( control.getTextColor() );
const isDarkBackground = '#000000' !== backgroundColor.getMaxContrastColor().toCSS();
const control = this,
backgroundColor = Color( control.getBackgroundColor() ),
textColor = Color( control.getTextColor() ),
isDarkBackground = '#000000' !== backgroundColor.getMaxContrastColor().toCSS();
let lightnessSteps = ( isDarkBackground ) ? [ 80, 78, 77, 76, 75, 73, 71, 68, 65, 61, 57 ] : [ 20, 22, 23, 24, 25, 27, 29, 32, 35, 39, 43 ];
if ( control.params.choices.lightnessSteps ) {
lightnessSteps = ( isDarkBackground ) ? control.params.choices.lightnessSteps[ 1 ] : control.params.choices.lightnessSteps[ 0 ];
Expand Down Expand Up @@ -443,31 +270,6 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
} );
} );

// for ( let saturation = 50; saturation <= 100; saturation += stepSaturation ) {
// for ( let lightness = minL; lightness <= maxL; lightness += stepLightness ) {
// const item = {
// color: Color( {
// h: hue,
// s: saturation,
// l: lightness
// } )
// };
// item.contrastBackground = item.color.getDistanceLuminosityFrom( backgroundColor );
// item.contrastText = item.color.getDistanceLuminosityFrom( textColor );
// item.score = control.getConstrastScore( item.contrastBackground, item.contrastText );

// // Check if the color is already in our array.
// const colorAlreadyInArray = control.recommendedColors.find( function( el ) {
// return el.color._color === item.color._color;
// } );

// // Only add if the color is not already in the array.
// if ( 4.5 < item.contrastBackground && undefined === colorAlreadyInArray ) {
// control.recommendedColors.push( item );
// }
// }
// }

// Add fallbacks in case we couldn't find any colors.
if ( ! control.recommendedColors.length ) {
const item = {
Expand All @@ -492,8 +294,8 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
},

getConstrastScore( backgroundContrast, textContrast ) {
const scoreB = ( backgroundContrast > 7 ) ? backgroundContrast - 7 : 7 - backgroundContrast;
const scoreT = ( textContrast > 3 ) ? textContrast - 3 : 3 - textContrast;
const scoreB = ( 7 < backgroundContrast ) ? backgroundContrast - 7 : 7 - backgroundContrast;
const scoreT = ( 3 < textContrast ) ? textContrast - 3 : 3 - textContrast;
return 100 / ( scoreB * scoreT );
},

Expand All @@ -519,11 +321,6 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
}
},

setMode( mode ) {
this.forcedMode = mode;
this.renderContent();
},

/**
* Set the hue.
*
Expand Down Expand Up @@ -563,41 +360,6 @@ const WCAGLinkColorControl = wp.customize.Control.extend( {
return control.setHue( Color( control.setting.get() ).h() );
},

// setValue( val ) {
// const control = this;
// const currentVal = control.setting.get();

// if ( 'object' === typeof val ) {
// control.setHue( val.hsl.h );
// val = val.hex;
// }

// // Early exit if there's no change.
// if ( val === currentVal ) {
// return;
// }

// // If auto mode, set the color and early exit.
// if ( 'auto' === this.getMode() ) {
// control.setting.set( control.getAutoColor() );
// return;
// }

// // We're on recommended mode.
// if ( 'recommended' === this.getMode() ) {
// // if a number then we've got a hue.
// // We can simply save the auto-color.
// if ( ! isNaN( val ) ) {
// control.setHue( val );
// control.setting.set( control.getAutoColor() );
// return;
// }
// }

// // Save the value.
// control.setting.set( val );
// },

/**
* Handle removal/de-registration of the control.
*
Expand Down

0 comments on commit 02489d3

Please sign in to comment.