feat: adds toggle to disable bg image replacement

Codeinwp · Oct 21, 2019 · 3c3997a · 3c3997a
1 parent 98c19ef
commit 3c3997a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 2 deletions.
diff --git a/assets/js/bundle.min.js b/assets/js/bundle.min.js
diff --git a/assets/vue/components/lazyload.vue b/assets/vue/components/lazyload.vue
@@ -18,6 +18,23 @@
             </div>
         </div>
         <div class="field columns">
+            <label class="label column has-text-grey-dark">
+                {{strings.enable_bg_lazyload_title}}
+                <p class="is-italic has-text-weight-normal">
+                    {{strings.enable_bg_lazyload_desc}}
+                </p>
+            </label>
+            <div class="column is-3">
+                <toggle-button :class="'has-text-dark'"
+                               v-model="lazyloadBgImages"
+                               :disabled="this.$store.state.loading"
+                               :labels="{checked: strings.enabled, unchecked: strings.disabled}"
+                               :width="80"
+                               :height="25"
+                               color="#008ec2"></toggle-button>
+            </div>
+        </div>
+        <div class="field columns" v-if="showBgSelectors">
             <div class="column">
                 <label class="label has-text-grey-dark">
                     <span>{{strings.watch_title_lazyload}}</span>
@@ -56,6 +73,7 @@
 				strings: optimoleDashboardApp.strings.options_strings,
 				all_strings: optimoleDashboardApp.strings,
 				showSave: false,
+                showBgSelectors: this.$store.state.site_settings.bg_replacer=== 'enabled',
 				new_data: {},
 			}
 		},
@@ -82,6 +100,16 @@
 					return !(this.site_settings.lazyload_placeholder === 'disabled');
 				}
 			},
+			lazyloadBgImages: {
+				set: function (value) {
+					this.showSave = true;
+					this.new_data.bg_replacer = value ? 'enabled' : 'disabled';
+					this.showBgSelectors = value;
+				},
+				get: function () {
+					return !(this.site_settings.bg_replacer === 'disabled');
+				}
+			},
             lazyloadSelectors: {
 	            set: function ( value ) {
                     this.showSave = true;

diff --git a/inc/admin.php b/inc/admin.php
@@ -303,6 +303,9 @@ protected function get_background_lazy_css() {
 		foreach ( $watchers as $selector ) {
 			$css[] = 'html.optimole_has_js ' . $selector . ':not(.optml-bg-lazyloaded)';
 		}
+		if ( empty( $css ) ) {
+			return '';
+		}
 		$css = implode( ",\n", $css ) . ' { background-image: none !important; } ';
 
 		return strip_tags( $css );
@@ -590,6 +593,8 @@ private function get_dashboard_strings() {
 				'toggle_lazyload'                   => __( 'Scale images & Lazy load', 'optimole-wp' ),
 				'enable_image_replace'              => __( 'Enable image replacement', 'optimole-wp' ),
 				'enable_retina_title'               => __( 'Enable Retina images', 'optimole-wp' ),
+				'enable_bg_lazyload_title'          => __( 'Enable lazyload for background images', 'optimole-wp' ),
+				'enable_bg_lazyload_desc'           => __( 'Lazyload images used as CSS backgrounds.', 'optimole-wp' ),
 				'enable_retina_desc'                => __( 'Deliver retina ready images to your visitors', 'optimole-wp' ),
 				'enable_network_opt_title'          => __( 'Enable network based optimizations', 'optimole-wp' ),
 				'enable_resize_smart_title'         => __( 'Enable Smart Cropping', 'optimole-wp' ),

diff --git a/inc/lazyload_replacer.php b/inc/lazyload_replacer.php
@@ -75,7 +75,11 @@ public static function get_background_lazyload_selectors() {
 		if ( null != self::$background_lazyload_selectors && is_array( self::$background_lazyload_selectors ) ) {
 			return self::$background_lazyload_selectors;
 		}
+		if ( self::instance()->settings->get( 'bg_replacer' ) === 'disabled' ) {
+			self::$background_lazyload_selectors = [];
 
+			return self::$background_lazyload_selectors;
+		}
 		$default_watchers = [
 			'.elementor-section[data-settings*="background_background"]',
 			'.elementor-section > .elementor-background-overlay',
@@ -90,7 +94,7 @@ public static function get_background_lazyload_selectors() {
 
 		$all_watchers = array_filter(
 			$all_watchers,
-			function( $value ) {
+			function ( $value ) {
 				return ! empty( $value ) && strlen( $value ) >= 2;
 			}
 		);

diff --git a/inc/settings.php b/inc/settings.php
@@ -24,6 +24,7 @@ class Optml_Settings {
 		'lazyload'             => 'disabled',
 		'network_optimization' => 'disabled',
 		'lazyload_placeholder' => 'disabled',
+		'bg_replacer'          => 'enabled',
 		'retina_images'        => 'disabled',
 		'resize_smart'         => 'disabled',
 		'filters'              => [],
@@ -125,6 +126,7 @@ public function parse_settings( $new_settings ) {
 				case 'lazyload_placeholder':
 				case 'retina_images':
 				case 'resize_smart':
+				case 'bg_replacer':
 				case 'img_to_video':
 					$sanitized_value = $this->to_map_values( $value, array( 'enabled', 'disabled' ), 'enabled' );
 					break;
@@ -277,6 +279,7 @@ public function get_site_settings() {
 			'network_optimization' => $this->get( 'network_optimization' ),
 			'retina_images'        => $this->get( 'retina_images' ),
 			'lazyload_placeholder' => $this->get( 'lazyload_placeholder' ),
+			'bg_replacer'          => $this->get( 'bg_replacer' ),
 			'resize_smart'         => $this->get( 'resize_smart' ),
 			'image_replacer'       => $this->get( 'image_replacer' ),
 			'max_width'            => $this->get( 'max_width' ),