| 1 |
/** |
| 2 |
* Customizer PREVIEW JS (runs inside the preview iframe). |
| 3 |
* |
| 4 |
* Gives the accent colour instant live preview: when brand_color changes it |
| 5 |
* re-applies the same CSS custom properties the server prints in |
| 6 |
* mlsimport_standalone_brand_color_css() — so the preview matches exactly what |
| 7 |
* publishing will produce. Every other setting uses the 'refresh' transport and |
| 8 |
* reloads the preview server-side, so only the colour is handled here. |
| 9 |
*/ |
| 10 |
( function ( wp ) { |
| 11 |
'use strict'; |
| 12 |
|
| 13 |
// Bail if the Customizer API is unavailable in this context. |
| 14 |
if ( ! wp || ! wp.customize ) { |
| 15 |
return; |
| 16 |
} |
| 17 |
|
| 18 |
// Id of the <style> element this script owns inside the preview <head>. |
| 19 |
var STYLE_ID = 'mlsimport-customizer-accent'; |
| 20 |
|
| 21 |
/** |
| 22 |
* Build the accent CSS custom-property block for a given colour. |
| 23 |
* |
| 24 |
* Mirrors mlsimport_standalone_brand_color_css() on the server so the live |
| 25 |
* preview matches the published result. Derives hover/darker variants via |
| 26 |
* CSS color-mix(). |
| 27 |
* |
| 28 |
* @param {string} value Accent colour (any CSS colour value). |
| 29 |
* @return {string} CSS text defining the accent custom properties. |
| 30 |
*/ |
| 31 |
function accentCss( value ) { |
| 32 |
return ':root{' |
| 33 |
+ '--mlsimport-accent:' + value + ';' |
| 34 |
+ '--mlsimport-accent-hover:color-mix(in srgb,' + value + ' 85%,#fff);' |
| 35 |
+ '--mlsimport-accent2:color-mix(in srgb,' + value + ' 80%,#000);' |
| 36 |
+ '--mlsimport-accent2-hover:color-mix(in srgb,' + value + ' 70%,#000);' |
| 37 |
+ '--mlsimport-secondary:' + value + ';' |
| 38 |
+ '--mlsimport-good:' + value + ';' |
| 39 |
+ '}' |
| 40 |
// :root included so cards rendered outside a grid wrapper (Similar Listings |
| 41 |
// on a property page) get the accent too — mirrors the saved-output rule in |
| 42 |
// mlsimport_standalone_brand_color_css(); the two MUST stay identical or the |
| 43 |
// preview shows a colour the published page won't. |
| 44 |
+ ':root,.mlsimport-listings,.mlsimport-page-block{--mli-accent:' + value + ';}'; |
| 45 |
} |
| 46 |
|
| 47 |
// Live-update the accent whenever the brand_color setting changes. |
| 48 |
wp.customize( 'mlsimport_standalone_options[brand_color]', function ( setting ) { |
| 49 |
setting.bind( function ( value ) { |
| 50 |
// Look up our injected style element (may not exist yet). |
| 51 |
var el = document.getElementById( STYLE_ID ); |
| 52 |
// Empty value: remove any existing override and stop. |
| 53 |
if ( ! value ) { |
| 54 |
if ( el ) { |
| 55 |
el.parentNode.removeChild( el ); |
| 56 |
} |
| 57 |
return; |
| 58 |
} |
| 59 |
// Create the style element on first use. |
| 60 |
if ( ! el ) { |
| 61 |
el = document.createElement( 'style' ); |
| 62 |
el.id = STYLE_ID; |
| 63 |
document.head.appendChild( el ); |
| 64 |
} |
| 65 |
// Write the freshly computed accent CSS into it. |
| 66 |
el.textContent = accentCss( value ); |
| 67 |
} ); |
| 68 |
} ); |
| 69 |
} )( window.wp ); |
| 70 |
|
