From 73c87127ced1421851572f13aa4b6b9176617c9f Mon Sep 17 00:00:00 2001
From: selul <marius.cristea@vertistudio.com>
Date: Wed, 25 Sep 2019 19:05:15 +0300
Subject: [PATCH] feat: adds retina settings control which enable/disable
 serving of HiDPI images

---
 assets/vue/components/resize.vue | 27 +++++++++++++++++++++++++++
 inc/admin.php                    |  5 +++++
 inc/settings.php                 |  3 +++
 3 files changed, 35 insertions(+)

diff --git a/assets/vue/components/resize.vue b/assets/vue/components/resize.vue
index 3433804d..6c43a4cc 100755
--- a/assets/vue/components/resize.vue
+++ b/assets/vue/components/resize.vue
@@ -17,6 +17,24 @@
                                color="#008ec2"></toggle-button>
             </div>
 
+        </div>
+        <div class="field  columns">
+            <label class="label column has-text-grey-dark">
+                {{strings.enable_retina_title}}
+                <p class="is-italic has-text-weight-normal">
+                    {{strings.enable_retina_desc}}
+                </p>
+            </label>
+            <div class="column is-3">
+                <toggle-button :class="'has-text-dark'"
+                               v-model="retinaReady"
+                               :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 ">
             <label class="label   column has-text-grey-dark no-padding-right ">
@@ -122,6 +140,15 @@
                 get: function () {
                     return !(this.site_settings.resize_smart === 'disabled');
                 }
+            },
+            retinaReady: {
+                set: function (value) {
+                    this.showSave = true;
+                    this.new_data.retina_images = value ? 'enabled' : 'disabled';
+                },
+                get: function () {
+                    return !(this.site_settings.retina_images === 'disabled');
+                }
             }
         }
     }
diff --git a/inc/admin.php b/inc/admin.php
index 2c11e102..032a1615 100755
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -62,6 +62,7 @@ public function inline_bootstrap_script() {
 		$bgclasses       = empty( $bgclasses ) ? '' : sprintf( '"%s"', implode( '","', (array) $bgclasses ) );
 		$watcher_classes = empty( $watcher_classes ) ? '' : sprintf( '"%s"', implode( '","', (array) $watcher_classes ) );
 		$default_network = ( $this->settings->get( 'network_optimization' ) === 'enabled' );
+		$retina_ready    = ! ( $this->settings->get( 'retina_images' ) === 'enabled' );
 		$output          = sprintf(
 			'
 		<style type="text/css">
@@ -89,6 +90,7 @@ public function inline_bootstrap_script() {
 							backgroundReplaceClasses: [%s],
 							watchClasses: [%s],
 							network_optimizations: %s,
+							ignoreDpr: %s,
 							quality: %d
 						}
 						
@@ -101,6 +103,7 @@ public function inline_bootstrap_script() {
 			$bgclasses,
 			$watcher_classes,
 			defined( 'OPTML_NETWORK_ON' ) && constant( 'OPTML_NETWORK_ON' ) ? ( OPTML_NETWORK_ON ? 'true' : 'false' ) : ( $default_network ? 'true' : 'false' ),
+			$retina_ready ? 'true' : 'false',
 			$this->settings->get_numeric_quality()
 		);
 		echo $output;
@@ -553,6 +556,8 @@ private function get_dashboard_strings() {
 				'toggle_ab_item'                    => __( 'Admin bar status', 'optimole-wp' ),
 				'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_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' ),
 				'enable_lazyload_placeholder_title' => __( 'Enable generic lazyload placeholder', 'optimole-wp' ),
diff --git a/inc/settings.php b/inc/settings.php
index a586e815..bf898579 100644
--- a/inc/settings.php
+++ b/inc/settings.php
@@ -24,6 +24,7 @@ class Optml_Settings {
 		'lazyload'             => 'disabled',
 		'network_optimization' => 'disabled',
 		'lazyload_placeholder' => 'disabled',
+		'retina_images' => 'disabled',
 		'resize_smart'         => 'disabled',
 		'filters'              => [],
 		'quality'              => 'auto',
@@ -108,6 +109,7 @@ public function parse_settings( $new_settings ) {
 				case 'image_replacer':
 				case 'network_optimization':
 				case 'lazyload_placeholder':
+				case 'retina_images':
 				case 'resize_smart':
 					$sanitized_value = $this->to_map_values( $value, array( 'enabled', 'disabled' ), 'enabled' );
 					break;
@@ -254,6 +256,7 @@ public function get_site_settings() {
 			'admin_bar_item'       => $this->get( 'admin_bar_item' ),
 			'lazyload'             => $this->get( 'lazyload' ),
 			'network_optimization' => $this->get( 'network_optimization' ),
+			'retina_images' => $this->get( 'retina_images' ),
 			'lazyload_placeholder' => $this->get( 'lazyload_placeholder' ),
 			'resize_smart'         => $this->get( 'resize_smart' ),
 			'image_replacer'       => $this->get( 'image_replacer' ),