customizer-preview.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /**
  2. * This file adds some LIVE to the Customizer live preview. To leverage
  3. * this, set your custom settings to 'postMessage' and then add your handling
  4. * here. Your javascript should grab settings from customizer controls, and
  5. * then make any necessary changes to the page using jQuery.
  6. *
  7. * @package Astra
  8. * @since 1.7.0
  9. */
  10. ( function( $ ) {
  11. /* Breadcrumb Typography */
  12. astra_responsive_font_size(
  13. 'astra-settings[breadcrumb-font-size]',
  14. '.ast-breadcrumbs-wrapper .trail-items span, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumb_last, .ast-breadcrumbs-wrapper span, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-wrapper .separator, .ast-breadcrumbs-wrapper .breadcrumb-item, .ast-breadcrumbs-wrapper .breadcrumb-item.active, .ast-breadcrumbs-wrapper .breadcrumb-item:after, .ast-breadcrumbs-inner nav, .ast-breadcrumbs-inner nav .breadcrumb-item, .ast-breadcrumbs-inner nav .breadcrumb-item:after'
  15. );
  16. astra_generate_outside_font_family_css(
  17. 'astra-settings[breadcrumb-font-family]',
  18. '.ast-breadcrumbs-wrapper .trail-items span, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumb_last, .ast-breadcrumbs-wrapper span, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-wrapper .separator, .ast-breadcrumbs-wrapper .breadcrumb-item, .ast-breadcrumbs-wrapper .breadcrumb-item.active, .ast-breadcrumbs-wrapper .breadcrumb-item:after, .ast-breadcrumbs-inner nav, .ast-breadcrumbs-inner nav .breadcrumb-item, .ast-breadcrumbs-inner nav .breadcrumb-item:after'
  19. );
  20. astra_generate_font_weight_css( 'astra-settings[breadcrumb-font-family]', 'astra-settings[breadcrumb-font-weight]', 'font-weight', '.ast-breadcrumbs-wrapper .trail-items span, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumb_last, .ast-breadcrumbs-wrapper span, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-wrapper .separator, .ast-breadcrumbs-wrapper .breadcrumb-item, .ast-breadcrumbs-wrapper .breadcrumb-item.active, .ast-breadcrumbs-wrapper .breadcrumb-item:after, .ast-breadcrumbs-inner nav, .ast-breadcrumbs-inner nav .breadcrumb-item, .ast-breadcrumbs-inner nav .breadcrumb-item:after' );
  21. astra_css(
  22. 'astra-settings[breadcrumb-text-transform]',
  23. 'text-transform',
  24. '.ast-breadcrumbs-wrapper .trail-items span, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumb_last, .ast-breadcrumbs-wrapper span, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-wrapper .separator, .ast-breadcrumbs-wrapper .breadcrumb-item, .ast-breadcrumbs-wrapper .breadcrumb-item.active, .ast-breadcrumbs-wrapper .breadcrumb-item:after, .ast-breadcrumbs-inner nav, .ast-breadcrumbs-inner nav .breadcrumb-item, .ast-breadcrumbs-inner nav .breadcrumb-item:after'
  25. );
  26. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Line Height */
  27. astra_css(
  28. 'astra-settings[breadcrumb-line-height]',
  29. 'line-height',
  30. '.ast-breadcrumbs-wrapper .ast-breadcrumbs-name, .ast-breadcrumbs-wrapper .ast-breadcrumbs-item, .ast-breadcrumbs-wrapper .ast-breadcrumbs .separator, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumb_last, .ast-breadcrumbs-wrapper span, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper a, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-wrapper .separator, .ast-breadcrumbs-wrapper .breadcrumb-item, .ast-breadcrumbs-wrapper .breadcrumb-item.active, .ast-breadcrumbs-wrapper .breadcrumb-item:after, .ast-breadcrumbs-inner nav, .ast-breadcrumbs-inner nav .breadcrumb-item, .ast-breadcrumbs-inner nav .breadcrumb-item:after'
  31. );
  32. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Text Color */
  33. astra_color_responsive_css(
  34. 'breadcrumb',
  35. 'astra-settings[breadcrumb-active-color-responsive]',
  36. 'color',
  37. '.ast-breadcrumbs-wrapper .trail-items .trail-end, .ast-breadcrumbs-wrapper #ast-breadcrumbs-yoast .breadcrumb_last, .ast-breadcrumbs-wrapper .current-item, .ast-breadcrumbs-wrapper .last, .ast-breadcrumbs-inner, .ast-breadcrumbs-wrapper .breadcrumb-item.active'
  38. );
  39. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Link Color */
  40. astra_color_responsive_css(
  41. 'breadcrumb',
  42. 'astra-settings[breadcrumb-text-color-responsive]',
  43. 'color',
  44. '.ast-breadcrumbs-wrapper .trail-items a, .ast-breadcrumbs-wrapper #ast-breadcrumbs-yoast a, .ast-breadcrumbs-wrapper .breadcrumbs a, .ast-breadcrumbs-wrapper .rank-math-breadcrumb a, .ast-breadcrumbs-wrapper .breadcrumb-item a'
  45. );
  46. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Hover Color */
  47. astra_color_responsive_css(
  48. 'breadcrumb',
  49. 'astra-settings[breadcrumb-hover-color-responsive]',
  50. 'color',
  51. '.ast-breadcrumbs-wrapper .trail-items a:hover, .ast-breadcrumbs-wrapper #ast-breadcrumbs-yoast a:hover, .ast-breadcrumbs-wrapper .breadcrumbs a:hover, .ast-breadcrumbs-wrapper .rank-math-breadcrumb a:hover, .ast-breadcrumbs-wrapper .breadcrumb-item a:hover'
  52. );
  53. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Separator Color */
  54. astra_color_responsive_css(
  55. 'breadcrumb',
  56. 'astra-settings[breadcrumb-separator-color]',
  57. 'color',
  58. '.ast-breadcrumbs-wrapper .trail-items li::after, .ast-breadcrumbs-wrapper #ast-breadcrumbs-yoast, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .rank-math-breadcrumb .separator, .ast-breadcrumbs-wrapper .breadcrumb-item:after'
  59. );
  60. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Background Color */
  61. astra_color_responsive_css(
  62. 'breadcrumb',
  63. 'astra-settings[breadcrumb-bg-color]',
  64. 'background-color',
  65. '.ast-breadcrumbs-wrapper, .main-header-bar.ast-header-breadcrumb, .ast-primary-sticky-header-active .main-header-bar.ast-header-breadcrumb'
  66. );
  67. /* Breadcrumb default, Yoast SEO Breadcrumb, Breadcrumb NavXT, Ran Math Breadcrumb, SEOPress Breadcrumb - Alignment */
  68. astra_css(
  69. 'astra-settings[breadcrumb-alignment]',
  70. 'text-align',
  71. '.ast-breadcrumbs-wrapper'
  72. );
  73. /**
  74. * Breadcrumb Spacing
  75. */
  76. wp.customize( 'astra-settings[breadcrumb-spacing]', function( value ) {
  77. value.bind( function( padding ) {
  78. var spacing_value = wp.customize( 'astra-settings[breadcrumb-position]' ).get();
  79. if( 'astra_header_markup_after' == spacing_value || 'astra_header_after' == spacing_value ) {
  80. astra_responsive_spacing( 'astra-settings[breadcrumb-spacing]','.main-header-bar.ast-header-breadcrumb', 'padding', ['top', 'right', 'bottom', 'left' ] );
  81. } else if( 'astra_masthead_content' == spacing_value ) {
  82. astra_responsive_spacing( 'astra-settings[breadcrumb-spacing]','.ast-breadcrumbs-wrapper .ast-breadcrumbs-inner #ast-breadcrumbs-yoast, .ast-breadcrumbs-wrapper .ast-breadcrumbs-inner .breadcrumbs, .ast-breadcrumbs-wrapper .ast-breadcrumbs-inner .rank-math-breadcrumb, .ast-breadcrumbs-wrapper .ast-breadcrumbs-inner .ast-breadcrumbs, .ast-breadcrumbs-wrapper .ast-breadcrumbs-inner', 'padding', ['top', 'right', 'bottom', 'left' ] );
  83. } else {
  84. astra_responsive_spacing( 'astra-settings[breadcrumb-spacing]','.ast-breadcrumbs-wrapper #ast-breadcrumbs-yoast, .ast-breadcrumbs-wrapper .breadcrumbs, .ast-breadcrumbs-wrapper .rank-math-breadcrumb, .ast-breadcrumbs-wrapper .ast-breadcrumbs, .ast-breadcrumbs-wrapper .ast-breadcrumbs-inner', 'padding', ['top', 'right', 'bottom', 'left' ] );
  85. }
  86. } );
  87. } );
  88. /**
  89. * Breadcrumb Separator.
  90. */
  91. wp.customize( 'astra-settings[breadcrumb-separator-selector]', function( value ) {
  92. value.bind( function( value ) {
  93. const customBreadcrumbValue = wp.customize.value( 'astra-settings[breadcrumb-separator]' )();
  94. const currentSelectedSeparator = 'unicode' !== value ? value : customBreadcrumbValue;
  95. let dynamicStyle = '';
  96. dynamicStyle += '.trail-items li::after {';
  97. dynamicStyle += 'content: "' + currentSelectedSeparator + '";';
  98. dynamicStyle += '} ';
  99. astra_add_dynamic_css( 'breadcrumb-separator-selector', dynamicStyle );
  100. } );
  101. } );
  102. wp.customize( 'astra-settings[breadcrumb-separator]', function( value ) {
  103. value.bind( function( value ) {
  104. let dynamicStyle = '';
  105. dynamicStyle += '.trail-items li::after {';
  106. dynamicStyle += 'content: "' + value + '";';
  107. dynamicStyle += '} ';
  108. astra_add_dynamic_css( 'breadcrumb-separator', dynamicStyle );
  109. } );
  110. } );
  111. } )( jQuery );