@studiometa/js-toolkit/Base/managers/ResponsiveOptionsManager.js

A set of useful little bits of JavaScript to boost your project! 🚀

import { OptionsManager, __getPropertyName } from "./OptionsManager.js";
import { useResize } from "../../services/index.js";
import { isDev } from "../../utils/index.js";
import { features } from "../features.js";
class ResponsiveOptionsManager extends OptionsManager {
  /**
   * Get an option value.
   *
   * @param  {string} name The option name.
   * @param  {ResponsiveOptionObject} config The option configuration.
   * @return {any}
   */
  get(name, config) {
    if (!config.responsive) {
      return super.get(name, config);
    }
    return super.get(this.__getResponsiveName(name), config);
  }
  /**
   * Set an option value.
   *
   * @param {string} name The option name.
   * @param {any} value The new value.
   * @param {ResponsiveOptionObject} config The option configuration.
   */
  set(name, value, config) {
    if (!config.responsive) {
      super.set(name, value, config);
      return;
    }
    if (isDev) {
      console.warn(`[${this.__base.$id}]`, "Responsive options are read-only.");
    }
  }
  /**
   * Get the currently active responsive name of an option.
   *
   * @param  {ResponsiveOptionsManager} that
   * @param  {string} name The default name of the option.
   * @return {string}      The responsive name if one matches the current breakpoint, the default name otherwise.
   */
  __getResponsiveName(name) {
    const { breakpoint } = useResize().props();
    if (!breakpoint) {
      return name;
    }
    let responsiveName = name;
    const propertyName = __getPropertyName(name).toLowerCase();
    const regex = new RegExp(`${propertyName}:(.+)$`, "i");
    const attributes = features.get("attributes");
    const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
    for (const optionName of this.__element.getAttributeNames()) {
      if (regex.test(optionName)) {
        const [, breakpoints] = optionName.match(regex);
        const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
        if (isInBreakpoint) {
          responsiveName = optionName.replace(dataOptionRegExp, "");
        }
      }
    }
    return responsiveName;
  }
}
export {
  ResponsiveOptionsManager
};
//# sourceMappingURL=ResponsiveOptionsManager.js.map