@ptcwebops/ptcw-design 6.4.4-beta → 6.4.4

package/dist/collection/components/buying-option-card/buying-option-card.js

@@ -0,0 +1,227 @@
+import { h, Host } from "@stencil/core";
+export class BuyingOptionCardComponent {
+  constructor() {
+    /** Cache for processed images to avoid reprocessing */
+    this.imageCache = new Map();
+    /** Color schemes for different card positions */
+    this.colorSchemes = {
+      1: { primary: "#33A13C", secondary: "#006E09", tertiary: "#003805" },
+      2: { primary: "#4795CD", secondary: "#14629A", tertiary: "#0A324E" },
+      3: { primary: "#819099", secondary: "#4E5D66", tertiary: "#282F35" },
+      4: { primary: "#CF9254", secondary: "#9C5F21", tertiary: "#9C5F21" },
+    };
+    this.backgroundImage = undefined;
+    this.grayscaleImage = undefined;
+    this.processedImage = undefined;
+  }
+  componentWillLoad() {
+    this.processBackgroundImage();
+  }
+  componentWillUpdate() {
+    this.processBackgroundImage();
+  }
+  /**
+   * Process the background image using hybrid approach
+   * Priority: 1. Pre-processed grayscale 2. Auto-detect color and convert 3. Original image
+   */
+  processBackgroundImage() {
+    if (!this.backgroundImage)
+      return;
+    // Priority 1: Use pre-processed grayscale image if available
+    if (this.grayscaleImage) {
+      this.processedImage = this.grayscaleImage;
+      return;
+    }
+    // Priority 2: Auto-detect if image is color and convert to grayscale
+    const cacheKey = `${this.backgroundImage}-auto-grayscale`;
+    if (this.imageCache.has(cacheKey)) {
+      this.processedImage = this.imageCache.get(cacheKey);
+      return;
+    }
+    // Check if image is too large for processing
+    if (!this.shouldProcessImage()) {
+      console.warn("Image too large for processing, using original");
+      this.processedImage = this.backgroundImage;
+      return;
+    }
+    this.detectAndConvertImage(this.backgroundImage)
+      .then((processedImg) => {
+      this.processedImage = processedImg;
+      this.imageCache.set(cacheKey, processedImg);
+    })
+      .catch((error) => {
+      console.warn("Failed to process image:", error);
+      this.processedImage = this.backgroundImage;
+    });
+  }
+  /**
+   * Check if image should be processed based on size constraints
+   */
+  shouldProcessImage() {
+    // Skip processing for very large images to prevent UI blocking
+    // This is a rough estimate - actual size will be checked when image loads
+    return true; // We'll add size check in the conversion method
+  }
+  /**
+   * Detect if image is color and convert to grayscale if needed
+   */
+  detectAndConvertImage(imagePath) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = imagePath;
+      img.onload = () => {
+        try {
+          // Performance check: Skip processing for very large images
+          const pixelCount = img.width * img.height;
+          const MAX_PIXELS = 1000000; // 1MP limit to prevent UI blocking
+          if (pixelCount > MAX_PIXELS) {
+            console.warn(`Image too large (${pixelCount} pixels), skipping processing`);
+            resolve(imagePath); // Return original image
+            return;
+          }
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Canvas not supported"));
+            return;
+          }
+          canvas.width = img.width;
+          canvas.height = img.height;
+          // Draw original image
+          ctx.drawImage(img, 0, 0);
+          // Get pixel data
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+          // Check if image is already grayscale
+          if (this.isImageGrayscale(data)) {
+            console.log("Image is already grayscale, using original");
+            resolve(imagePath);
+            return;
+          }
+          // Convert to grayscale using luminance formula
+          for (let i = 0; i < data.length; i += 4) {
+            const luminance = 0.299 * data[i] +
+              0.587 * data[i + 1] +
+              0.114 * data[i + 2];
+            data[i] = luminance; // R
+            data[i + 1] = luminance; // G
+            data[i + 2] = luminance; // B
+            // Alpha channel (data[i + 3]) remains unchanged
+          }
+          ctx.putImageData(imageData, 0, 0);
+          resolve(canvas.toDataURL("image/jpeg", 0.8)); // Use JPEG with compression for smaller size
+        }
+        catch (error) {
+          reject(error);
+        }
+      };
+      img.onerror = () => reject(new Error("Failed to load image"));
+    });
+  }
+  /**
+   * Check if an image is already grayscale by sampling pixels
+   */
+  isImageGrayscale(data) {
+    const sampleSize = Math.min(1000, data.length / 4); // Sample up to 1000 pixels
+    const step = Math.floor(data.length / 4 / sampleSize);
+    for (let i = 0; i < data.length; i += step * 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      // Check if RGB values are significantly different
+      const maxDiff = Math.max(Math.abs(r - g), Math.abs(g - b), Math.abs(r - b));
+      // If any pixel has significant color difference, image is not grayscale
+      if (maxDiff > 10) {
+        // Threshold for color detection
+        return false;
+      }
+    }
+    return true; // Image appears to be grayscale
+  }
+  /**
+   * Get the card index based on its position in the swiper
+   */
+  getCardIndex() {
+    var _a;
+    const swiperSlide = this.el.parentElement;
+    return (Array.from(((_a = swiperSlide === null || swiperSlide === void 0 ? void 0 : swiperSlide.parentElement) === null || _a === void 0 ? void 0 : _a.children) || []).indexOf(swiperSlide) + 1);
+  }
+  /**
+   * Get the color scheme for the current card position
+   */
+  getColorScheme() {
+    const cardIndex = this.getCardIndex();
+    return this.colorSchemes[cardIndex] || this.colorSchemes[1];
+  }
+  /**
+   * Generate the background style string
+   */
+  getBackgroundStyle() {
+    const colors = this.getColorScheme();
+    const backgroundImage = this.processedImage
+      ? `url(${this.processedImage})`
+      : "lightgray";
+    return `linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), linear-gradient(326deg, ${colors.primary} 20.08%, ${colors.secondary} 100%), linear-gradient(326deg, ${colors.primary} 20.08%, ${colors.tertiary} 100%), ${backgroundImage} 50% / cover no-repeat`;
+  }
+  render() {
+    return (h(Host, { style: {
+        background: this.getBackgroundStyle(),
+      } }, h("div", { class: "card-header" }, h("slot", { name: "icon" }), h("slot", { name: "title" }), h("slot", { name: "subtitle" })), h("div", { class: "card-details" }, h("slot", null))));
+  }
+  static get is() { return "buying-option-card"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["buying-option-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["buying-option-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-image",
+        "reflect": false
+      },
+      "grayscaleImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Pre-processed grayscale image (preferred method)"
+        },
+        "attribute": "grayscale-image",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "processedImage": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}