MAGETWO-54779: [GitHub] Image size for Product Watermarks can't be set #5270

- adding custom validation for AAAxBBB type of inputs in validation rules with translation

Author: cpartica

app/code/Magento/Catalog/i18n/en_US.csv

@@ -700,6 +700,7 @@ Image,Image
 "Allowed file types: jpeg, gif, png.","Allowed file types: jpeg, gif, png."
 "Image Opacity","Image Opacity"
 "Example format: 200x300.","Example format: 200x300."
+"The value is not within the specified format eg: 200x300","The value is not within the specified format eg: 200x300"
 "Image Position","Image Position"
 Small,Small
 "Attribute Label","Attribute Label"

app/code/Magento/Catalog/view/adminhtml/ui_component/design_config_form.xml

@@ -55,12 +55,13 @@
                 <field name="watermark_image_size">
                     <argument name="data" xsi:type="array">
                         <item name="config" xsi:type="array">
+                            <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
                             <item name="label" xsi:type="string" translate="true">Image Size</item>
                             <item name="dataType" xsi:type="string">text</item>
                             <item name="formElement" xsi:type="string">input</item>
                             <item name="dataScope" xsi:type="string">watermark_image_size</item>
                             <item name="validation" xsi:type="array">
-                                <item name="validate-digits" xsi:type="boolean">true</item>
+                                <item name="validate-image-size-range" xsi:type="boolean">true</item>
                             </item>
                             <item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
                         </item>
@@ -118,12 +119,13 @@
                 <field name="watermark_thumbnail_size">
                     <argument name="data" xsi:type="array">
                         <item name="config" xsi:type="array">
+                            <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
                             <item name="label" xsi:type="string" translate="true">Image Size</item>
                             <item name="dataType" xsi:type="string">text</item>
                             <item name="formElement" xsi:type="string">input</item>
                             <item name="dataScope" xsi:type="string">watermark_thumbnail_size</item>
                             <item name="validation" xsi:type="array">
-                                <item name="validate-digits" xsi:type="boolean">true</item>
+                                <item name="validate-image-size-range" xsi:type="boolean">true</item>
                             </item>
                             <item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
                         </item>
@@ -181,12 +183,13 @@
                 <field name="watermark_small_image_size">
                     <argument name="data" xsi:type="array">
                         <item name="config" xsi:type="array">
+                            <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
                             <item name="label" xsi:type="string" translate="true">Image Size</item>
                             <item name="dataType" xsi:type="string">text</item>
                             <item name="formElement" xsi:type="string">input</item>
                             <item name="dataScope" xsi:type="string">watermark_small_image_size</item>
                             <item name="validation" xsi:type="array">
-                                <item name="validate-digits" xsi:type="boolean">true</item>
+                                <item name="validate-image-size-range" xsi:type="boolean">true</item>
                             </item>
                             <item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
                         </item>

app/code/Magento/Catalog/view/adminhtml/web/component/image-size-field.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'Magento_Ui/js/lib/validation/utils',
+    'Magento_Ui/js/form/element/abstract',
+    'Magento_Ui/js/lib/validation/validator'
+], function ($, _, utils, Abstract, validator) {
+    'use strict';
+
+    validator.addRule(
+        'validate-image-size-range',
+        function (value) {
+            var numValue,
+                dataAttrRange = /^(\d+)x(\d+)?$/,
+                result = false,
+                m;
+
+            if (utils.isEmptyNoTrim(value)) {
+                return true;
+            }
+            numValue = utils.parseNumber(value);
+
+            if (isNaN(numValue)) {
+                return false;
+            }
+
+            m = dataAttrRange.exec(value);
+
+            if (m) {
+                if (m.length === 3) {
+                    result = m[1] && m[2];
+                }
+            }
+
+            return result;
+        },
+        $.mage.__('The value is not within the specified format eg: 200x300')
+    );
+
+    return Abstract.extend({
+
+        /**
+         * Checks for relevant value
+         *
+         * @param {*} value
+         * @returns {Boolean}
+         */
+        isRangeCorrect: function (value) {
+            return validator('validate-image-size-range', value);
+        }
+    });
+});