feat(css-bkg-pos): Added possibility to declare background pos by single numeric value (#7958)

Nicu · vtrifonov · NathanWalker · commit 8588af8fd7c6 · 2020-08-07T12:50:42.000-07:00
* feat(css-bkg-pos): Added possibility to declare background pos by single numeric value

* feat(css-bkg-pos): Implemented numeric bkg pos for iOS

* feat(css-bkg-pos): removed unnecessary code

Co-authored-by: Vasil Trifonov &lt;v.trifonov@gmail.com&gt;
diff --git a/nativescript-core/ui/styling/background.ios.ts b/nativescript-core/ui/styling/background.ios.ts
@@ -204,18 +204,23 @@ function parsePosition(pos: string): { x: CSSValue, y: CSSValue } {
         return { x: values[0], y: values[1] };
     }
 
-    if (values.length === 1 && values[0].type === "ident") {
-        const val = values[0].string.toLocaleLowerCase();
-        const center = { type: "ident", string: "center" };
-
-        // If you only one keyword is specified, the other value is "center"
-        if (val === "left" || val === "right") {
-            return { x: values[0], y: center };
-        } else if (val === "top" || val === "bottom") {
-            return { x: center, y: values[0] };
-        } else if (val === "center") {
-            return { x: center, y: center };
-        }
+    if (values.length === 1) {
+      const center = { type: "ident", string: "center" };
+
+      if (values[0].type === "ident") {
+          const val = values[0].string.toLocaleLowerCase();
+
+          // If you only one keyword is specified, the other value is "center"
+          if (val === "left" || val === "right") {
+              return { x: values[0], y: center };
+          } else if (val === "top" || val === "bottom") {
+              return { x: center, y: values[0] };
+          } else if (val === "center") {
+              return { x: center, y: center };
+          }
+      } else if (values[0].type === "number") {
+        return {x: values[0], y: center};
+      }
     }
 
     return null;
@@ -322,6 +327,18 @@ function getDrawParams(this: void, image: UIImage, background: BackgroundDefinit
                 } else if (v.y.string.toLowerCase() === "bottom") {
                     res.posY = spaceY;
                 }
+            } else if (v.x.type === "number" && v.y.type === "ident") {
+              if (v.x.unit === "%") {
+                res.posX = spaceX * v.x.value / 100;
+              } else if (v.x.unit === "px" || v.x.unit === "") {
+                res.posX = v.x.value;
+              }
+
+              if (v.y.string.toLowerCase() === "center") {
+                  res.posY = spaceY / 2;
+              } else if (v.y.string.toLowerCase() === "bottom") {
+                  res.posY = spaceY;
+              }
             }
         }
     }
diff --git a/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java b/tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
@@ -713,6 +713,18 @@ private BackgroundDrawParams getDrawParams(float width, float height) {
                         res.posX = spaceX;
                     }
 
+                    if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
+                        res.posY = spaceY / 2;
+                    } else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
+                        res.posY = spaceY;
+                    }
+                } else if ("number".equals(vx.getType()) && "ident".equals(vy.getType())) {
+                    if ("%".equals(vx.getUnit())) {
+                        res.posX = spaceX * vx.getValue() / 100;
+                    } else if ("px".equals(vx.getUnit()) || vx.getUnit() == null || vx.getUnit().isEmpty()) {
+                        res.posX = vx.getValue();
+                    }
+
                     if ("center".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
                         res.posY = spaceY / 2;
                     } else if ("bottom".equals(vy.getString().toLowerCase(Locale.ENGLISH))) {
@@ -731,17 +743,22 @@ private static CSSValue[] parsePosition(CSSValue[] values) {
         }
 
         CSSValue[] result = null;
-        if (values.length == 1 && "ident".equals(values[0].getType())) {
-            String val = values[0].getString().toLowerCase(Locale.ENGLISH);
+        if (values.length == 1) {
+            // If you only one keyword is specified, the other value is "center"
             CSSValue center = new CSSValue("ident", "center", null, 0);
 
-            // If you only one keyword is specified, the other value is "center"
-            if ("left".equals(val) || "right".equals(val)) {
+            if ("ident".equals(values[0].getType())) {
+                String val = values[0].getString().toLowerCase(Locale.ENGLISH);
+
+                if ("left".equals(val) || "right".equals(val)) {
+                    result = new CSSValue[]{values[0], center};
+                } else if ("top".equals(val) || "bottom".equals(val)) {
+                    result = new CSSValue[]{center, values[0]};
+                } else if ("center".equals(val)) {
+                    result = new CSSValue[]{center, center};
+                }
+            } else if ("number".equals(values[0].getType())) {
                 result = new CSSValue[]{values[0], center};
-            } else if ("top".equals(val) || "bottom".equals(val)) {
-                result = new CSSValue[]{center, values[0]};
-            } else if ("center".equals(val)) {
-                result = new CSSValue[]{center, center};
             }
         }
 
