Show indication of how many images can be compressed for free per month and show warning for when the original image size has been selected.

Author: mattijsvandruenen

src/class-tiny-settings.php

@@ -20,6 +20,7 @@
 
 class Tiny_Settings extends Tiny_WP_Base {
     const DUMMY_SIZE = '_tiny_dummy';
+    const MONTHLY_FREE_COMPRESSIONS = 500;
 
     private $sizes;
     private $tinify_sizes;
@@ -58,9 +59,15 @@ public function admin_init() {
         register_setting('media', $field);
         add_settings_field($field, self::translate('Connection status'), $this->get_method('render_pending_status'), 'media', $section);
 
+        add_action('wp_ajax_tiny_image_sizes_notices', $this->get_method('image_sizes_notices'));
         add_action('wp_ajax_tiny_compress_status', $this->get_method('connection_status'));
     }
 
+    public function image_sizes_notices() {
+        $this->render_image_sizes_notices($_GET["image_sizes_selected"], $_GET["original_selected"]);
+        exit();
+    }
+
     public function connection_status() {
         $this->render_status();
         exit();
@@ -179,6 +186,10 @@ public function render_sizes() {
         foreach ($this->get_sizes() as $size => $option) {
             $this->render_size_checkbox($size, $option);
         }
+
+        echo '<div id="tiny-image-sizes-notices">';
+        $this->render_image_sizes_notices(count(self::get_active_tinify_sizes()), $this->get_sizes()[Tiny_Metadata::ORIGINAL]['tinify']);
+        echo '</div>';
     }
 
     private function render_size_checkbox($size, $option) {
@@ -194,6 +205,23 @@ private function render_size_checkbox($size, $option) {
 <?php
     }
 
+    public function render_image_sizes_notices($active_image_sizes_count, $original_selected) {
+        echo '<br/>';
+        if ($active_image_sizes_count < 1) {
+            echo '<p>' . self::translate_escape('With these settings no images will be compressed') . '.</p>';
+        }
+        else {
+            $free_images_per_month = floor(self::MONTHLY_FREE_COMPRESSIONS / $active_image_sizes_count);
+
+            echo '<p>';
+            printf(self::translate_escape('With these settings you can compress %s images for free each month') . '.', $free_images_per_month);
+            echo '</p>';
+            if ($original_selected) {
+                echo '<p>' . self::translate_escape('Note: your original images will be overwritten with the compressed versions') . '!</p>';
+            }
+        }
+    }
+
     public function get_compression_count() {
         $field = self::get_prefixed_name('status');
         return get_option($field);
@@ -241,7 +269,7 @@ public function render_status() {
         $compressions = self::get_compression_count();
         echo '<p>';
         // We currently have no way to check if a user is free or flexible.
-        if ($compressions == 500) {
+        if ($compressions == self::MONTHLY_FREE_COMPRESSIONS) {
             $link = '<a href="https://tinypng.com/developers" target="_blank">' . self::translate_escape('TinyPNG API account') . '</a>';
             printf(self::translate_escape('You have reached your limit of %s compressions this month') . '.', $compressions);
             echo '<br>';

src/languages/tiny-compress-images-nl_NL.po

@@ -133,6 +133,15 @@ msgstr "Als je meer afbeeldingen wilt comprimeren kun je je %s aanpassen"
 msgid "Upgrade your %s if you like to compress more images"
 msgstr "Upgrade je %s als je meer afbeeldingen wilt comprimeren"
 
+msgid "With these settings you can compress %s images for free each month"
+msgstr "Met deze instellingen kun je elke maand %s afbeeldingen gratis comprimeren"
+
+msgid "With these settings no images will be compressed"
+msgstr "Met deze instellingen worden geen afbeeldingen gecomprimeerd"
+
+msgid "Note: your original images will be overwritten with the compressed versions"
+msgstr "Belangrijk: je originele afbeeldingen worden overschreven met de gecomprimeerde afbeeldingen"
+
 msgid "Please fill in an API key to start compressing images"
 msgstr "Vul een API-sleutel in om te starten met comprimeren"
 

src/scripts/admin.js

@@ -155,6 +155,13 @@
 
   if (adminpage === "options-media-php") {
     jQuery('#tiny-compress-status').load(ajaxurl + '?action=tiny_compress_status')
+
+    jQuery('input[name*="tinypng_sizes"]').on("click", function() {
+      // Unfortunately, we need some additional information to display the correct notices.
+      originalSelected = jQuery('input[name="tinypng_sizes[0]"]:checked').length
+      totalSelectedSizes = jQuery('input[name*="tinypng_sizes"]:checked').length
+      jQuery('#tiny-image-sizes-notices').load(ajaxurl + '?action=tiny_image_sizes_notices&image_sizes_selected=' + totalSelectedSizes + '&original_selected=' + originalSelected)
+    })
   }
 
   jQuery('.tiny-notice a.tiny-dismiss').click(dismiss_notice)

test/integration/SettingsIntegrationTest.php

@@ -86,6 +86,55 @@ public function testShouldPersistNoSizes() {
         $this->assertEquals(0, count(array_map('elementName', $elements)));
     }
 
+    public function testShouldShowOriginalsMessageWhenChecked() {
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $statuses = array_map('innerText', $elements);
+        $this->assertContains('Note: your original images will be overwritten with the compressed versions!', $statuses);
+    }
+
+    public function testShouldHideOriginalsMessageWhenUnchecked() {
+        $element = self::$driver->findElement(
+            WebDriverBy::xpath('//input[@type="checkbox" and @name="tinypng_sizes[0]" and @checked="checked"]'));
+        $element->click();
+        self::$driver->findElement(WebDriverBy::tagName('form'))->submit();
+
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $statuses = array_map('innerText', $elements);
+        $this->assertNotContains('Note: your original images will be overwritten with the compressed versions!', $statuses);
+    }
+
+    public function testShouldShowTotalImagesInfo() {
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $statuses = array_map('innerText', $elements);
+        $this->assertContains('With these settings you can compress 100 images for free each month.', $statuses);
+    }
+
+    public function testShouldUpdateTotalImagesInfo() {
+        $element = self::$driver->findElement(
+            WebDriverBy::xpath('//input[@type="checkbox" and @name="tinypng_sizes[0]" and @checked="checked"]'));
+        $element->click();
+        self::$driver->wait(2)->until(WebDriverExpectedCondition::textToBePresentInElement(
+            WebDriverBy::cssSelector('#tiny-image-sizes-notices'), 'With these settings you can compress 125 images for free each month.'));
+        // Not really necessary anymore to assert this.
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $statuses = array_map('innerText', $elements);
+        $this->assertContains('With these settings you can compress 125 images for free each month.', $statuses);
+    }
+
+    public function testShouldShowCorrectNoImageSizesInfo() {
+        $elements = self::$driver->findElements(
+            WebDriverBy::xpath('//input[@type="checkbox" and starts-with(@name, "tinypng_sizes") and @checked="checked"]'));
+        foreach ($elements as $element) {
+            $element->click();
+        }
+        self::$driver->wait(2)->until(WebDriverExpectedCondition::textToBePresentInElement(
+            WebDriverBy::cssSelector('#tiny-image-sizes-notices'), 'With these settings no images will be compressed.'));
+        // Not really necessary anymore to assert this.
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $statuses = array_map('innerText', $elements);
+        $this->assertContains('With these settings no images will be compressed.', $statuses);
+    }
+
     public function testStatusPresenceOK() {
         reset_webservice();
         $this->set_api_key('PNG123');