Google Font Store Locally (#329)

* Add methods to download Google Fonts #328 * Allow loading Google Fonts that are hosted locally only #328 * Fix unstoppable customizer preview refresh for select control #328 * Add serif to the list of font families #328 * Fix incorrect behavior of str_replace for generating font name #328 * Add new customizer control "google-fonts" with ajax callbacks #328 * Apply new control for all font-family fields #328 * Add popup to customizer #328 * Codestyle changes #328 * Codestyle changes #328 * Codestyle changes #328 * Fix jshint errors #328 * Fix jscs errors #328 * Update styles #328 * Increase a top spacing for the message under font-family select * Apply native WP styles for both buttons in popup * Refresh preview after downloading fonts from popup #328 * Refresh preview for fonts that are not from Google Fonts #328 * Add spinner while waiting for downloading fonts #328 * Codestyle fixes #328
VisualComposer · Jul 12, 2022 · a103966 · a103966
1 parent 8c76044
commit a103966
Show file tree

Hide file tree

Showing 8 changed files with 1,398 additions and 87 deletions.
diff --git a/css/customizer-custom.css b/css/customizer-custom.css
@@ -4,4 +4,79 @@
 
 .hiddenSection {
     display: none !important;
-}
+}
+
+.vct-message {
+    margin-top: 5px;
+}
+
+.vct-popup {
+    background-color: rgba(0,0,0, .4);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.vct-popup-content {
+    max-width: 100%;
+    width: 600px;
+    background: #fff;
+    overflow: auto;
+    position: relative;
+    padding: 35px;
+    margin: 0 15px;
+    box-sizing: border-box;
+    border-radius: 5px;
+    text-align: center;
+}
+
+.vct-popup-close {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+
+.vct-popup-close::before,
+.vct-popup-close::after {
+    content: '';
+    height: 2px;
+    width: 20px;
+    background: #bdbdbd;
+    position: absolute;
+}
+
+.vct-popup-close::before {
+    transform: rotate(45deg);
+}
+
+.vct-popup-close::after {
+    transform: rotate(-45deg);
+}
+
+.vct-popup-buttons,
+.vct-spinner-wrapper {
+    margin-top: 30px;
+}
+
+.vct-popup-buttons button {
+    background: #a8a8a8;
+    border-radius: initial;
+    border: none;
+    padding: 10px 15px;
+    color: #fff;
+    cursor: pointer;
+}
diff --git a/functions.php b/functions.php
@@ -380,6 +380,15 @@ function visualcomposerstarter_style() {
 		/* Theme stylesheet */
 		wp_register_style( 'visualcomposerstarter-style', get_stylesheet_uri() );
 
+		/* Enqueue styles */
+		if ( get_theme_mod( 'vct_overall_site_enable_bootstrap', false ) === true ) {
+			wp_enqueue_style( 'bootstrap' );
+		}
+		wp_enqueue_style( 'visualcomposerstarter-font' );
+		wp_enqueue_style( 'visualcomposerstarter-general' );
+		wp_enqueue_style( 'visualcomposerstarter-responsive' );
+		wp_enqueue_style( 'visualcomposerstarter-style' );
+
 		/* Font options */
 		$fonts = array(
 			get_theme_mod( 'vct_fonts_and_style_body_font_family', 'Roboto, sans-serif' ),
@@ -392,20 +401,26 @@ function visualcomposerstarter_style() {
 			get_theme_mod( 'vct_fonts_and_style_buttons_font_family', 'Montserrat' ),
 		);
 
-		$font_uri = VisualComposerStarter_Fonts::vct_theme_get_google_font_uri( $fonts );
+		/* Load Google Fonts (hosted locally) */
+		foreach ( $fonts as $font ) {
+			if ( ! VisualComposerStarter_Fonts::is_google_font( $font ) ) {
+				continue;
+			}
 
-		/* Load Google Fonts */
-		wp_register_style( 'visualcomposerstarter-fonts', $font_uri, array(), null, 'screen' );
+			if ( ! VisualComposerStarter_Fonts::is_google_font_exists_locally( $font ) ) {
+				continue;
+			}
 
-		/* Enqueue styles */
-		if ( get_theme_mod( 'vct_overall_site_enable_bootstrap', false ) === true ) {
-			wp_enqueue_style( 'bootstrap' );
+			$font_id  = VisualComposerStarter_Fonts::get_google_font_id( $font );
+			$font_uri = VisualComposerStarter_Fonts::get_google_font_uri( $font );
+			wp_enqueue_style(
+				"visualcomposerstarter-font-{$font_id}",
+				esc_url( $font_uri ),
+				array(),
+				null,
+				'screen'
+			);
 		}
-		wp_enqueue_style( 'visualcomposerstarter-font' );
-		wp_enqueue_style( 'visualcomposerstarter-general' );
-		wp_enqueue_style( 'visualcomposerstarter-responsive' );
-		wp_enqueue_style( 'visualcomposerstarter-style' );
-		wp_enqueue_style( 'visualcomposerstarter-fonts' );
 	}
 }// End if().
 add_action( 'wp_enqueue_scripts', 'visualcomposerstarter_style' );
@@ -468,6 +483,37 @@ function visualcomposerstarter_customizer_live_preview() {
 }
 add_action( 'customize_preview_init', 'visualcomposerstarter_customizer_live_preview' );
 
+if ( ! function_exists( 'visualcomposerstarter_customizer_scripts' ) ) {
+	/**
+	 * Enqueue script in customizer (not preview!)
+	 *
+	 * Used by hook: 'customize_controls_enqueue_scripts'
+	 *
+	 * @return void
+	 */
+	function visualcomposerstarter_customizer_scripts() {
+		wp_enqueue_script( 'visualcomposerstarter-customizer-popup', get_template_directory_uri() . '/js/customize-popup.js', array(
+			'jquery',
+			'wp-util',
+		), null, true );
+
+		// Add current fonts for "revert" button.
+		$fonts = array(
+			'vct_fonts_and_style_h1_font_family'      => get_theme_mod( 'vct_fonts_and_style_h1_font_family' ),
+			'vct_fonts_and_style_h2_font_family'      => get_theme_mod( 'vct_fonts_and_style_h2_font_family' ),
+			'vct_fonts_and_style_h3_font_family'      => get_theme_mod( 'vct_fonts_and_style_h3_font_family' ),
+			'vct_fonts_and_style_h4_font_family'      => get_theme_mod( 'vct_fonts_and_style_h4_font_family' ),
+			'vct_fonts_and_style_h5_font_family'      => get_theme_mod( 'vct_fonts_and_style_h5_font_family' ),
+			'vct_fonts_and_style_h6_font_family'      => get_theme_mod( 'vct_fonts_and_style_h6_font_family' ),
+			'vct_fonts_and_style_body_font_family'    => get_theme_mod( 'vct_fonts_and_style_body_font_family' ),
+			'vct_fonts_and_style_buttons_font_family' => get_theme_mod( 'vct_fonts_and_style_buttons_font_family' ),
+		);
+
+		wp_localize_script( 'visualcomposerstarter-customizer-popup', 'vctCurrentFonts', $fonts );
+	}
+}
+add_action( 'customize_controls_enqueue_scripts', 'visualcomposerstarter_customizer_scripts' );
+
 if ( ! function_exists( 'visualcomposerstarter_body_classes' ) ) {
 	/**
 	 * Adds custom classes to the array of body classes.