html/src/plugins/accessibility.ts

import {CloudinaryImage} from "@cloudinary/url-gen/assets/CloudinaryImage";
import {Plugin, AccessibilityMode, HtmlPluginState, PluginResponse} from "../types";
import {ACCESSIBILITY_MODES} from '../utils/internalConstants';
import {isBrowser} from "../utils/isBrowser";
import {isImage} from "../utils/isImage";

/**
 * @namespace
 * @description Appends accessibility transformations to the original image.
 * @return {Plugin}
 * @example <caption>NOTE: The following is in React. For further examples, see the Packages tab.</caption>
 * <AdvancedImage cldImg={img} plugins={[accessibility()]}/>
 */
export function accessibility({mode = 'darkmode'}: { mode?: string; }={}): Plugin{
  return accessibilityPlugin.bind(null, mode);
}

/**
 * @description Accessibility plugin
 * @param mode {AccessibilityMode} The accessibility mode to use. Possible modes: 'darkmode' | 'brightmode' | 'monochrome' | 'colorblind'. Default: 'darkmode'.
 * @param element {HTMLImageElement} The image element.
 * @param pluginCloudinaryImage {CloudinaryImage}
 * @param htmlPluginState {htmlPluginState} Holds cleanup callbacks and event subscriptions.
 */
export function accessibilityPlugin(mode: AccessibilityMode, element: HTMLImageElement, pluginCloudinaryImage: CloudinaryImage, htmlPluginState: HtmlPluginState): Promise<PluginResponse> | boolean {
  if(isBrowser()){

    if(!isImage(element)) return;

    return new Promise((resolve) => {
      // resolved promise when canceled
      htmlPluginState.cleanupCallbacks.push(()=>{
        resolve('canceled');
      });

      if(!ACCESSIBILITY_MODES[mode]){
        mode = 'darkmode';
      }
      pluginCloudinaryImage.effect(ACCESSIBILITY_MODES[mode]);
      resolve({accessibility: true});
    });
  }else{
    pluginCloudinaryImage.effect(ACCESSIBILITY_MODES[mode]);
    return true;
  }
}
Copy