D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
pinaclec
/
public_html
/
wp-content
/
themes
/
bb-theme
/
js
/
Filename :
customizer-preview.js
back
Copy
( function( $ ){ /* Internal shorthand */ var api = wp.customize; /** * Helper class for live Customizer previews. * * @since 1.2.0 * @class FLCustomizerPreview */ FLCustomizerPreview = { /** * An instance of FLStyleSheet for live previews. * * @since 1.2.0 * @access private * @property {FLStyleSheet} _styleSheet */ _styleSheet: null, /** * A reference to the current value of fl-heading-style * * @since 1.7 * @access private * @property String _headingStyleValue */ _headingStyleValue: '', /** * A reference of responsive controls. * * @since 1.7.2 * @access private * @property String _responsiveControls */ _responsiveControls: {}, /** * A reference of the current previewed device. * * @since 1.7.6 * @access private * @property String _previewedDevice */ _previewedDevice: 'desktop', /** * Initializes all live Customizer previews. * * @since 1.2.0 * @method init */ init: function() { var fixedHeader = api('fl-fixed-header').get(), headerTopPadding = api('fl-fixed-header-padding-top').get(); // Create the stylesheet. this._styleSheet = new FLStyleSheet(); // Bind CSS callbacks. this._css( 'fl-body-bg-image', 'body', 'background-image', 'url({val})', 'none' ); this._css( 'fl-body-bg-repeat', 'body', 'background-repeat' ); this._css( 'fl-body-bg-position', 'body', 'background-position' ); this._css( 'fl-body-bg-attachment', 'body', 'background-attachment' ); this._css( 'fl-body-bg-size', 'body', 'background-size' ); this._css( 'fl-title-text-color', 'h1, h1 a', 'color' ); this._css( 'fl-title-font-format', 'h1', 'text-transform'); this._css( 'fl-h1-font-size', 'h1', 'font-size', '{val}px', '36px', 'int', true ); this._css( 'fl-h2-font-size', 'h2', 'font-size', '{val}px', '30px', 'int', true ); this._css( 'fl-h3-font-size', 'h3', 'font-size', '{val}px', '24px', 'int', true ); this._css( 'fl-h4-font-size', 'h4', 'font-size', '{val}px', '18px', 'int', true ); this._css( 'fl-h5-font-size', 'h5', 'font-size', '{val}px', '14px', 'int', true ); this._css( 'fl-h6-font-size', 'h6', 'font-size', '{val}px', '12px', 'int', true ); this._css( 'fl-topbar-bg-repeat', '.fl-page-bar', 'background-repeat' ); this._css( 'fl-topbar-bg-position', '.fl-page-bar', 'background-position' ); this._css( 'fl-topbar-bg-attachment', '.fl-page-bar', 'background-attachment' ); this._css( 'fl-topbar-bg-size', '.fl-page-bar', 'background-size' ); this._css( 'fl-header-bg-repeat', '.fl-page-header', 'background-repeat' ); this._css( 'fl-header-bg-position', '.fl-page-header', 'background-position' ); this._css( 'fl-header-bg-attachment', '.fl-page-header', 'background-attachment' ); this._css( 'fl-header-bg-size', '.fl-page-header', 'background-size' ); this._css( 'fl-logo-font-size', '.fl-logo-text', 'font-size', '{val}px', '40px', 'int' ); this._css( 'fl-nav-bg-repeat', '.fl-page-nav-wrap', 'background-repeat' ); this._css( 'fl-nav-bg-position', '.fl-page-nav-wrap', 'background-position' ); this._css( 'fl-nav-bg-attachment', '.fl-page-nav-wrap', 'background-attachment' ); this._css( 'fl-nav-bg-size', '.fl-page-nav-wrap', 'background-size' ); this._css( 'fl-nav-font-size', '.fl-page-nav .navbar-nav', 'font-size', '{val}px', '16px', 'int' ); this._css( 'fl-nav-font-size', '.fl-page-nav .navbar-nav a', 'font-size', '{val}px', '16px', 'int' ); this._css( 'fl-nav-font-size', '.fl-page-header-vertical .fl-page-nav-search a.fa-search', 'font-size', '{val}px', '16px', 'int' ); this._css( 'fl-nav-font-size', '.fl-page-nav .navbar-toggle', 'font-size', '{val}px', '16px', 'int' ); this._css( 'fl-nav-font-format', '.fl-page-nav .navbar-nav', 'text-transform' ); this._css( 'fl-nav-font-format', '.fl-page-nav .navbar-nav a', 'text-transform' ); this._css( 'fl-nav-font-format', '.fl-page-nav .navbar-toggle', 'text-transform' ); this._css( 'fl-content-bg-repeat', '.fl-page-content', 'background-repeat' ); this._css( 'fl-content-bg-position', '.fl-page-content', 'background-position' ); this._css( 'fl-content-bg-attachment', '.fl-page-content', 'background-attachment' ); this._css( 'fl-content-bg-size', '.fl-page-content', 'background-size' ); this._css( 'fl-footer-widgets-bg-repeat', '.fl-page-footer-widgets', 'background-repeat' ); this._css( 'fl-footer-widgets-bg-position', '.fl-page-footer-widgets', 'background-position' ); this._css( 'fl-footer-widgets-bg-attachment', '.fl-page-footer-widgets', 'background-attachment' ); this._css( 'fl-footer-bg-size', '.fl-page-footer-widgets', 'background-size' ); this._css( 'fl-footer-bg-repeat', '.fl-page-footer', 'background-repeat' ); this._css( 'fl-footer-bg-position', '.fl-page-footer', 'background-position' ); this._css( 'fl-footer-bg-attachment', '.fl-page-footer', 'background-attachment' ); this._css( 'fl-footer-bg-size', '.fl-page-footer', 'background-size' ); this._css( 'fl-vertical-header-width', '.fl-page-header-vertical', 'width', '{val}px', '230px', 'int' ); this._css( 'fl-vertical-header-width', '.fl-nav-vertical-left .fl-page-bar, .fl-nav-vertical-left .fl-page-content, .fl-nav-vertical-left .fl-page-footer-wrap, .fl-nav-vertical-left footer.fl-builder-content', 'margin-left', '{val}px', '230px', 'int' ); this._css( 'fl-vertical-header-width', '.fl-nav-vertical-right .fl-page-bar, .fl-nav-vertical-right .fl-page-content, .fl-nav-vertical-right .fl-page-footer-wrap, .fl-nav-vertical-right footer.fl-builder-content', 'margin-right', '{val}px', '230px', 'int' ); this._css( 'fl-header-padding', '.fl-page-header-vertical .fl-page-header-logo, .fl-page-header-vertical .fl-page-nav-collapse ul.navbar-nav > li > a, .fl-page-header-vertical .fl-page-nav-search a.fa-search', 'padding-left', '{val}px', '30px', 'int' ); this._css( 'fl-header-padding', '.fl-page-header-vertical .fl-page-header-logo, .fl-page-header-vertical .fl-page-nav-collapse ul.navbar-nav > li > a, .fl-page-header-vertical .fl-page-nav-search a.fa-search', 'padding-right', '{val}px', '30px', 'int' ); this._css( 'fl-header-logo-top-spacing', '.fl-nav-vertical .fl-page-header-vertical .fl-page-header-container', 'padding-top', '{val}px', '50px', 'int' ); this._css( 'fl-nav-item-spacing', '.fl-page-header-vertical .fl-page-nav-collapse ul.navbar-nav > li > a', 'padding-bottom', '{val}px', '15px', 'int' ); this._css( 'fl-nav-menu-top-spacing', '.fl-page-header-vertical .fl-page-nav-collapse ul.navbar-nav', 'padding-top', '{val}px', '30px', 'int' ); this._css( 'fl-body-font-size', 'body', 'font-size', '{val}px', '14px', 'int', true ); this._css( 'fl-body-line-height', 'body', 'line-height', '{val}', '1.45', false, true ); this._css( 'fl-h1-line-height', 'h1', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h1-letter-spacing', 'h1', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-h2-line-height', 'h2', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h2-letter-spacing', 'h2', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-h3-line-height', 'h3', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h3-letter-spacing', 'h3', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-h4-line-height', 'h4', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h4-letter-spacing', 'h4', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-h5-line-height', 'h5', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h5-letter-spacing', 'h5', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-h6-line-height', 'h6', 'line-height', '{val}', '1.4', false, true ); this._css( 'fl-h6-letter-spacing', 'h6', 'letter-spacing', '{val}px', '0', false, true ); this._css( 'fl-layout-spacing', 'body', 'padding', '{val}px 0', '0' ); this._css( 'fl-header-padding', '.fl-page-nav-centered-inline-logo .fl-page-header-container, .fl-page-nav-bottom .fl-page-header-container, .fl-page-nav-right .fl-page-header-container, .fl-page-nav-left .fl-page-header-container, .fl-page-nav-centered .fl-page-header-container', 'padding', '{val}px 0', '30' ); this._css( 'fl-nav-item-spacing', '.fl-page-header-vertical .navbar-nav > li > a', 'padding-botom', '{val}px', '0' ); this._css( 'fl-nav-item-spacing', '.fl-page-nav .navbar-nav > li > a', 'padding-left', '{val}px', '0' ); this._css( 'fl-nav-item-spacing', '.fl-page-nav .navbar-nav > li > a', 'padding-right', '{val}px', '0' ); if ('hidden' === fixedHeader || 'fadein' === fixedHeader) { this._css('fl-fixed-header-padding-top-custom', '.fl-page', 'padding-top', '0', '0', '', false); } else if ( 'custom' === headerTopPadding ){ this._css('fl-fixed-header-padding-top-custom', '.fl-page', 'padding-top', '{val}px !important', '0', '', false); } // Bind HTML callbacks. this._html( 'fl-topbar-col1-text', '.fl-page-bar-text-1' ); this._html( 'fl-topbar-col2-text', '.fl-page-bar-text-2' ); this._html( 'fl-logo-text', '.fl-logo-text' ); this._html( 'fl-footer-col1-text', '.fl-page-footer-text-1' ); this._html( 'fl-footer-col2-text', '.fl-page-footer-text-2' ); // Bind custom callbacks. this._bind( 'fl-css-code', this._cssCodeChanged ); // Setup Button Styles Preview if ( 'custom' === api( 'fl-button-style' ).get() ){ this._initButtonStyles(); } // Bind responsive controls callback. this._initResponsiveStyles(); // Setup responsive controls preview. this._initResponsivePreview(); }, /** * Binds a callback function to be fired when a setting changes. * * @since 1.2.0 * @access private * @method _bind * @param {String} key The key of the setting to bind to. * @param {Function} callback The callback function to bind. */ _bind: function( key, callback ) { api( key, function( val ) { val.bind( function( newVal ) { callback.call( FLCustomizerPreview, newVal ); }); }); }, /** * Applies a CSS preview when a setting changes. * * @since 1.2.0 * @access private * @method _css * @param {String} key The key of the setting to bind to. * @param {String} selector The CSS selector to apply the change to. * @param {String} property The CSS property to apply the change to. * @param {String} format (Optional) A format in brackets for the value such as "{val}px". * @param {String} fallback (Optional) A fallback value if the value is empty. * @param {String} sanitizeCallback (Optional) The type of sanitization function to call on the value. * @param {Boolean} responsive (Optional) If a control is responsive, then add CSS property for each device. */ _css: function( key, selector, property, format, fallback, sanitizeCallback, responsive ) { api( key, function( val ) { val.bind( function( newVal ) { var updateAllowed = true; switch ( sanitizeCallback ) { case 'int': newVal = FLCustomizerPreview._sanitizeInt( newVal ); break; } if ( 'undefined' != typeof fallback && null != fallback && '' == newVal ) { newVal = fallback; } else if ( 'undefined' != typeof format && null != format ) { newVal = format.replace( '{val}', newVal ); } if ( 'undefined' !== typeof responsive && false === responsive && 'desktop' != FLCustomizerPreview._previewedDevice ) { updateAllowed = false; } if ( updateAllowed ) { FLCustomizerPreview._styleSheet.updateRule( selector, property, newVal ); } }); }); if ( 'undefined' !== typeof responsive ) { FLCustomizerPreview._responsiveControls[ key ] = { selector: selector, property: property, format : format, fallback: fallback, sanitizeCallback: sanitizeCallback, responsive: responsive }; } }, /** * Applies an HTML preview when a setting changes. * * @since 1.2.0 * @access private * @method _html * @param {String} key The key of the setting to bind to. * @param {String} selector The CSS selector to apply the change to. */ _html: function( key, selector ) { api( key, function( val ) { val.bind( function( newVal ) { $( selector ).html( newVal ); }); }); }, /** * Makes sure a value is a number. * * @since 1.2.0 * @access private * @method _sanitizeInt * @param {Number} val The value to sanitize. * @return {Number} */ _sanitizeInt: function( val ) { var number = parseInt( val ); return isNaN( number ) ? 0 : number; }, /** * Callback for when the custom CSS field is changed. * * @since 1.3.3 * @access private * @method _cssCodeChanged * @param {String} val */ _cssCodeChanged: function( val ) { $( '#fl-theme-custom-css' ).html( val ); }, _initButtonStyles: function() { var mainSelector = '.fl-page button:visited,' + '.fl-page input[type=button],' + '.fl-page input[type=submit],' + '.fl-page a.fl-button,' + '.fl-page a.fl-button:visited,' + '.fl-responsive-preview-content button,' + '.fl-responsive-preview-content button:visited,' + '.fl-responsive-preview-content input[type=button],' + '.fl-responsive-preview-content input[type=submit],' + '.fl-responsive-preview-content a.fl-button,' + '.fl-responsive-preview-content a.fl-button:visited,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:visited,' + '.fl-page .bc-btn,' + '.fl-page button.bc-btn,' + '.fl-page button.bc-btn[disabled],' + '.fl-page button.bc-link,' + '.fl-page a.bc-btn, ' + '.fl-page .woocommerce a.button,' + '.fl-page .woocommerce a.button:visited,' + 'body.theme-bb-theme.woocommerce-page .fl-page a.button,' + 'body.theme-bb-theme.woocommerce-page .fl-page a.button:visited,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .product a.button,' + 'body.theme-bb-theme.woocommerce-page .fl-page .product a.button:visited,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .product button.button,' + 'body.theme-bb-theme.woocommerce-page .fl-page .product button.button:visited,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .woocommerce button.button,' + 'body.theme-bb-theme.woocommerce-page .fl-page .woocommerce button.button:visited,'+ 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-module-woocommerce a.button,' + 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-module-woocommerce a.button:visited,' + 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-post-module-woo-button button[type=submit],' + 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-post-module-woo-button a.button,' + 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-post-module-woo-button a.button:visited'; var mainInsideSelector = '.fl-page button:visited *,' + '.fl-page input[type=button] *,' + '.fl-page input[type=submit] *,' + '.fl-page a.fl-button *,' + '.fl-responsive-preview-content button *,' + '.fl-responsive-preview-content button:visited *,' + '.fl-responsive-preview-content input[type=button] *,' + '.fl-responsive-preview-content input[type=submit] *,' + '.fl-responsive-preview-content a.fl-button *,' + '.fl-responsive-preview-content a.fl-button:visited *,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle *,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:visited *,' + '.fl-page .bc-btn *,' + '.fl-page button.bc-btn *,' + '.fl-page button.bc-btn[disabled] *,' + '.fl-page button.bc-link *,' + '.fl-page a.bc-btn *,' + '.fl-page .woocommerce a.button *,' + '.fl-page .woocommerce a.button:visited *'; var hoverSelector = '.fl-page input[type=button]:hover,' + '.fl-page input[type=submit]:hover,' + '.fl-page a.fl-button:hover,' + '.fl-responsive-preview-content button:hover,' + '.fl-responsive-preview-content input[type=button]:hover,' + '.fl-responsive-preview-content input[type=submit]:hover,' + '.fl-page .fl-responsive-preview-content a.fl-button:hover,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:hover,' + '.fl-responsive-preview-content a.fl-button:hover,' + '.fl-page .bc-btn:hover,' + '.fl-page button.bc-btn:hover,' + '.fl-page button.bc-btn[disabled]:hover,' + '.fl-page button.bc-link:hover,' + '.fl-page a.bc-btn:hover,' + '.fl-page .woocommerce a.button:hover,' + 'body.theme-bb-theme.woocommerce-page .fl-page a.button:hover,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .product button.button:hover,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .product a.button:hover,'+ 'body.theme-bb-theme.woocommerce-page .fl-page .woocommerce button.button:hover,'+ 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-module-woocommerce a.button:hover,' + 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-post-module-woo-button button[type=submit]:hover' 'body.theme-bb-theme:not(.woocommerce-page) .fl-page .fl-post-module-woo-button a.button:hover'; var hoverInsideSelector = '.fl-page input[type=button]:hover *,' + '.fl-page input[type=submit]:hover *,' + '.fl-page a.fl-button:hover *,' + '.fl-responsive-preview-content button:hover *,' + '.fl-responsive-preview-content input[type=button]:hover *,' + '.fl-responsive-preview-content input[type=submit]:hover *,' + '.fl-page .fl-responsive-preview-content a.fl-button:hover *,' + '.fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:hover *,' + '.fl-responsive-preview-content a.fl-button:hover *,' + '.fl-page .bc-btn:hover *,' + '.fl-page button.bc-btn:hover *,' + '.fl-page button.bc-btn[disabled]:hover *,' + '.fl-page button.bc-link:hover *,' + '.fl-page a.bc-btn:hover *,' + '.fl-page .woocommerce a.button:hover *'; // Font Size this._css( 'fl-button-font-size', mainSelector, 'font-size', '{val}px', '16px', 'int', true ); // Line Height this._css( 'fl-button-line-height', mainSelector, 'line-height', '{val}', '1.2', null, true ); // Color this._css( 'fl-button-color', mainSelector, 'color' ); this._css( 'fl-button-color', mainInsideSelector, 'color' ); // Hover Color this._css( 'fl-button-hover-color', hoverSelector, 'color' ); this._css( 'fl-button-hover-color', hoverInsideSelector, 'color' ); // Background Color this._css( 'fl-button-background-color', mainSelector, 'background-color' ); // Background Hover this._css( 'fl-button-background-hover-color', hoverSelector, 'background-color' ); // Border Color this._css( 'fl-button-border-color', mainSelector, 'border-color' ); this._css( 'fl-button-border-hover-color', hoverSelector, 'border-color' ); // Border Width this._css( 'fl-button-border-width', mainSelector, 'border-width', '{val}px' ); this._css( 'fl-button-border-width', hoverSelector, 'border-width', '{val}px' ); // Border Style this._css( 'fl-button-border-style', mainSelector, 'border-style' ); this._css( 'fl-button-border-style', hoverSelector, 'border-style' ); // Border Radius this._css( 'fl-button-border-radius', mainSelector, 'border-radius', '{val}px' ); this._css( 'fl-button-border-radius', hoverSelector, 'border-radius', '{val}px' ); // Text Transform this._css( 'fl-button-text-transform', mainSelector, 'text-transform' ); }, /** * Callback for when the responsive controls are changed. * * @since 1.7.2 * @access private * @method _initResponsiveStyles */ _initResponsiveStyles: function() { var controls = FLCustomizerPreview._responsiveControls, breakpoints = ['medium', 'mobile']; if ( ! $.isEmptyObject( controls ) ) { for (i = 0; i < breakpoints.length; i++ ) { $.each( controls, function( key, data ) { if ( false === data.responsive ) { return; } FLCustomizerPreview._css( key + '_' + breakpoints[i], data.selector, data.property, data.format, data.fallback, data.sanitizeCallback ); }); } } }, /** * Adds preview for responsive controls. * * @since 1.7.2 * @access private * @method _initResponsivePreview */ _initResponsivePreview: function() { var controls = FLCustomizerPreview._responsiveControls, newVal = '', controlValues = []; // Listen for a previewed-device message. api.preview.bind( 'previewed-device', function( newDevicePreview ) { controlValues = api.get(); FLCustomizerPreview._previewedDevice = newDevicePreview; if ( ! $.isEmptyObject( controls ) ) { $.each( controls, function( key, data ) { if ( 'desktop' != newDevicePreview && false !== data.responsive ) { newVal = controlValues[ key + '_' + newDevicePreview ]; } else if ( 'desktop' == newDevicePreview ) { newVal = controlValues[ key ]; } else { newVal = ''; } switch ( data.sanitizeCallback ) { case 'int': newVal = FLCustomizerPreview._sanitizeInt( newVal ); break; } if ( 'undefined' != typeof data.fallback && null != data.fallback && '' == newVal ) { newVal = data.fallback; } else if ( 'undefined' != typeof data.format && null != data.format ) { newVal = data.format.replace( '{val}', newVal ); } FLCustomizerPreview._styleSheet.updateRule( data.selector, data.property, newVal ); }); } }); }, }; $( function() { FLCustomizerPreview.init(); } ); })( jQuery );