feat: recursively iterate through children to find correct colors and handle text node

Author: peterpeterparker

studio/src/app/components/editor/app-slide-contrast/app-slide-contrast.tsx

@@ -1,8 +1,10 @@
 import {Component, h, Host, Listen, State} from '@stencil/core';
 
-import {ContrastUtils, ParentsColors} from '../../../utils/editor/contrast.utils';
 import {popoverController} from '@ionic/core';
 
+import {ContrastUtils} from '../../../utils/editor/contrast.utils';
+import {NodeUtils} from '../../../utils/editor/node.utils';
+
 @Component({
   tag: 'app-slide-contrast',
   styleUrl: 'app-slide-contrast.scss',
@@ -65,26 +67,26 @@ export class AppSlideContrast {
       return false;
     }
 
-    const slotsChildren = Array.from(slots).reduce((acc: HTMLElement[], slot: HTMLElement) => {
-      const children: NodeListOf<HTMLElement> = slot.querySelectorAll('*');
-
-      if (children && children.length > 0) {
-        acc.push(...Array.from(children));
-      }
+    // Slots with direct text children
+    const slotsWithText: HTMLElement[] = await NodeUtils.childrenTextNode(slots);
 
-      return acc;
-    }, []);
+    // All children (<span/>) of the slots
+    const children: HTMLElement[] = await NodeUtils.children(slots);
 
-    const elements: HTMLElement[] = slotsChildren && slotsChildren.length > 0 ? [...Array.from(slots), ...slotsChildren] : Array.from(slots);
+    const elements: HTMLElement[] =
+      children && children.length > 0
+        ? slotsWithText && slotsWithText.length > 0
+          ? [...Array.from(slotsWithText), ...children]
+          : [...children]
+        : slotsWithText && slotsWithText.length > 0
+        ? [...slotsWithText]
+        : null;
 
-    const parentsColors: ParentsColors = {
-      slideBgColor: slide.style.background,
-      slideColor: slide.style.color,
-      deckBgColor: deck.style.getPropertyValue('--background'),
-      deckColor: deck.style.getPropertyValue('--color'),
-    };
+    if (!elements) {
+      return false;
+    }
 
-    const promises: Promise<number>[] = Array.from(elements).map((slot: HTMLElement) => ContrastUtils.calculateContrastRatio(slot, parentsColors));
+    const promises: Promise<number>[] = Array.from(elements).map((element: HTMLElement) => this.calculateRatio(element, deck, slide));
 
     const contrasts: number[] = await Promise.all(promises);
 
@@ -97,6 +99,13 @@ export class AppSlideContrast {
     return lowContrast !== undefined;
   }
 
+  private async calculateRatio(element: HTMLElement, deck: HTMLElement, slide: HTMLElement) {
+    const bgColor = await NodeUtils.findColors(element, 'background', deck, slide);
+    const color = await NodeUtils.findColors(element, 'color', deck, slide);
+
+    return ContrastUtils.calculateContrastRatio(bgColor, color);
+  }
+
   private async openInformation($event: UIEvent) {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-contrast-info',

studio/src/app/utils/editor/contrast.utils.tsx

@@ -1,42 +1,18 @@
 import {extractRgb, extractRgba} from '@deckdeckgo/utils';
 
-export interface ParentsColors {
-  slideBgColor: string | undefined;
-  slideColor: string | undefined;
-  deckBgColor: string | undefined;
-  deckColor: string | undefined;
-}
-
 export class ContrastUtils {
-  static async calculateContrastRatio(element: HTMLElement, parentsColors: ParentsColors): Promise<number> {
-    const style: CSSStyleDeclaration = window.getComputedStyle(element);
-
-    const bgColor: string =
-      element.style.background !== '' && element.style.background !== 'initial'
-        ? style.backgroundColor
-        : parentsColors.slideBgColor !== ''
-        ? parentsColors.slideBgColor
-        : parentsColors.deckBgColor !== ''
-        ? parentsColors.deckBgColor
-        : style.backgroundColor;
-
-    const color: string =
-      element.style.color !== '' && element.style.color !== 'initial'
-        ? style.color
-        : parentsColors.slideColor !== ''
-        ? parentsColors.slideColor
-        : parentsColors.deckColor !== ''
-        ? parentsColors.deckColor
-        : style.color;
+  static async calculateContrastRatio(bgColor: string | undefined, color: string | undefined): Promise<number> {
+    const bgColorWithDefault: string = bgColor === undefined || bgColor === '' ? `rgb(255, 255, 255)` : bgColor;
+    const colorWithDefault: string = color === undefined || color === '' ? `rgb(0, 0, 0)` : color;
 
     // The text color may or may not be semi-transparent, but that doesn't matter
-    const bgRgba: number[] | undefined = extractRgba(bgColor);
+    const bgRgba: number[] | undefined = extractRgba(bgColorWithDefault);
 
     if (!bgRgba || bgRgba.length < 4 || bgRgba[3] >= 1) {
-      return this.calculateContrastRatioOpaque(bgColor, color);
+      return this.calculateContrastRatioOpaque(bgColorWithDefault, colorWithDefault);
     }
 
-    return this.calculateContrastRatioAlpha(bgColor, color);
+    return this.calculateContrastRatioAlpha(bgColorWithDefault, colorWithDefault);
   }
 
   private static calculateLuminance(rgb: number[]): number {

studio/src/app/utils/editor/node.utils.tsx

@@ -0,0 +1,57 @@
+export interface NodeColors {
+  bgColor: string | undefined;
+  color: string | undefined;
+}
+
+export class NodeUtils {
+  static async childrenTextNode(elements: NodeListOf<HTMLElement>): Promise<HTMLElement[]> {
+    return Array.from(elements).reduce((acc: HTMLElement[], slot: HTMLElement) => {
+      const text = Array.from(slot.childNodes).find((child) => child.nodeType === Node.TEXT_NODE);
+
+      if (text !== null && text !== undefined && text.textContent.replace(/(?:\r\n|\r|\n|\s)/g, '') !== '') {
+        acc.push(slot);
+      }
+
+      return acc;
+    }, []);
+  }
+
+  static async children(elements: NodeListOf<HTMLElement>): Promise<HTMLElement[]> {
+    return Array.from(elements).reduce((acc: HTMLElement[], slot: HTMLElement) => {
+      const children: NodeListOf<HTMLElement> = slot.querySelectorAll('*');
+
+      if (children && children.length > 0) {
+        acc.push(...Array.from(children));
+      }
+
+      return acc;
+    }, []);
+  }
+
+  static async findColors(node: HTMLElement, color: 'color' | 'background', slide: HTMLElement, deck: HTMLElement): Promise<string | undefined> {
+    // Just in case
+    if (node.nodeName.toUpperCase() === 'HTML' || node.nodeName.toUpperCase() === 'BODY') {
+      return undefined;
+    }
+
+    if (!node.parentNode) {
+      return undefined;
+    }
+
+    if (node.isEqualNode(deck)) {
+      return deck.style.getPropertyValue(`--${color}`);
+    }
+
+    if (node.isEqualNode(slide) && slide.style[color] !== '') {
+      return slide.style[color];
+    }
+
+    const styleAttr: string = color === 'background' ? 'background-color' : 'color';
+
+    if (node.style[styleAttr] !== '' && node.style[styleAttr] !== 'initial') {
+      return node.style[color];
+    }
+
+    return await this.findColors(node.parentElement, color, slide, deck);
+  }
+}