hero-area-customize-preview.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * File hero-area-customize-preview.js.
  3. *
  4. * Allows previewing of all the options in real time
  5. */
  6. ( function( $ ) {
  7. // Don't show the CTA if everything is empty
  8. $( '<style type="text/css">.hero-area.hero-no-title.hero-no-content.hero-no-buttontext.hero-no-buttonlink { display: none !important; } </style>' ).appendTo( 'head' );
  9. // Checkbox toggle
  10. wp.customize( 'radcliffe_2_hero_area_display', function( value ) {
  11. // Check to see if CTA is set to hidden; if yes, hide in the Customizer, too.
  12. if( false === wp.customize.settings.values.radcliffe_2_hero_area_display ) {
  13. $( '.hero-area' ).hide();
  14. }
  15. value.bind( function( to ) {
  16. if ( false === to ) {
  17. $( '.hero-area' ).hide();
  18. } else {
  19. $( '.hero-area' ).show();
  20. }
  21. } );
  22. } );
  23. // CTA Title
  24. wp.customize( 'radcliffe_2_hero_area_title', function( value ) {
  25. value.bind( function( to ) {
  26. $( '.hero-area-title' ).text( to );
  27. if ( '' === to ) {
  28. $( '.hero-area' ).addClass( 'hero-no-title' );
  29. } else {
  30. $( '.hero-area' ).removeClass( 'hero-no-title' );
  31. }
  32. } );
  33. } );
  34. // CTA Content
  35. wp.customize( 'radcliffe_2_hero_area_content', function( value ) {
  36. value.bind( function( to ) {
  37. $( '.hero-area-content' ).html( to );
  38. if ( '' === to ) {
  39. $( '.hero-area' ).addClass( 'hero-no-content' );
  40. } else {
  41. $( '.hero-area' ).removeClass( 'hero-no-content' );
  42. }
  43. } );
  44. } );
  45. // CTA Button Text
  46. wp.customize( 'radcliffe_2_hero_area_button_text', function( value ) {
  47. value.bind( function( to ) {
  48. $( '.hero-area-button a' ).text( to );
  49. if ( '' === to ) {
  50. $( '.hero-area' ).addClass( 'hero-no-buttontext' );
  51. } else {
  52. $( '.hero-area' ).removeClass( 'hero-no-buttontext' );
  53. }
  54. } );
  55. } );
  56. // CTA Button Link
  57. wp.customize( 'radcliffe_2_hero_area_button_url', function( value ) {
  58. value.bind( function( to ) {
  59. $( '.hero-area-button a' ).attr( 'href', to );
  60. if ( '' === to ) {
  61. $( '.hero-area' ).addClass( 'hero-no-buttonlink' );
  62. } else {
  63. $( '.hero-area' ).removeClass( 'hero-no-buttonlink' );
  64. }
  65. } );
  66. } );
  67. // CTA Background Image
  68. wp.customize( 'radcliffe_2_hero_area_background', function( value ) {
  69. value.bind( function( to ) {
  70. if ( "" === to ) {
  71. $( '.hero-area' ).removeClass( 'has-post-thumbnail' ).css( 'background-image', 'none' );
  72. } else {
  73. $( '.hero-area' ).addClass( 'has-post-thumbnail' ).css( 'background-image', 'url(' + to + ')');
  74. }
  75. } );
  76. } );
  77. // CTA Background Overlay Opacity
  78. // Set up our preview CSS using increments of 10, up to 90
  79. $css = '';
  80. for ( $i = 0; $i <= 90; $i += 10 ) {
  81. $css += '.background-opacity-' + $i + '.hero-area:before { opacity: ' + ( $i/100 ) + '; }';
  82. }
  83. $( '<style type="text/css">' + $css + '</style>' ).appendTo( 'head' );
  84. // We can't append CSS to a :before element via JavaScript, since it's not in the DOM
  85. // So let's preview using classes instead!
  86. wp.customize( 'radcliffe_2_hero_overlay_opacity', function( value ) {
  87. value.bind( function( to ) {
  88. $( '.hero-area' ).each( function() {;
  89. // Lets get rid of any existing classes
  90. var prefix = 'background-opacity-';
  91. var classes = this.className.split( ' ' ).filter( function( c ) {
  92. return c.lastIndexOf( prefix, 0 ) !== 0;
  93. } );
  94. this.className = classes.join( ' ' ).trim();
  95. } );
  96. $( '.hero-area' ).addClass( 'background-opacity-' + to );
  97. } );
  98. } );
  99. } )( jQuery );