gatsby-background-image/StyleUtils.js

Lazy-loading React background-image component with optional support for the blur-up effect.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.kebabifyBackgroundStyles = exports.vendorPrefixBackgroundStyles = exports.createPseudoElement = exports.createPseudoStyles = exports.presetBackgroundStyles = exports.fixOpacity = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _HelperUtils = require("./HelperUtils");

var _BackgroundUtils = require("./BackgroundUtils");

/**
 * Prevent possible stacking order mismatch with opacity "hack".
 *
 * @param props
 * @return {Object}
 */
var fixOpacity = function fixOpacity(props) {
  var styledProps = (0, _extends2.default)({}, props);

  try {
    if (styledProps.style && styledProps.style.opacity) {
      if (isNaN(styledProps.style.opacity) || styledProps.style.opacity > 0.99) {
        styledProps.style.opacity = 0.99;
      }
    }
  } catch (e) {}

  return styledProps;
};
/**
 * Set some needed backgroundStyles.
 *
 * @param backgroundStyles
 * @return {Object}
 */


exports.fixOpacity = fixOpacity;

var presetBackgroundStyles = function presetBackgroundStyles(backgroundStyles) {
  var defaultBackgroundStyles = {
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  };
  return (0, _extends2.default)({}, defaultBackgroundStyles, backgroundStyles);
};
/**
 * Creates styles for the changing pseudo-elements' backgrounds.
 *
 * @param classId           string    Pre 0.3.0 way to create pseudo-elements
 * @param className         string    One or more className(s)
 * @param transitionDelay   string
 * @param bgImage           string
 * @param lastImage         string
 * @param nextImage         string
 * @param afterOpacity      number
 * @param bgColor           string
 * @param fadeIn            boolean
 * @param backgroundStyles  object
 * @param style             object
 * @return {string}
 */


exports.presetBackgroundStyles = presetBackgroundStyles;

var createPseudoStyles = function createPseudoStyles(_ref) {
  var classId = _ref.classId,
      className = _ref.className,
      transitionDelay = _ref.transitionDelay,
      bgImage = _ref.bgImage,
      lastImage = _ref.lastImage,
      nextImage = _ref.nextImage,
      afterOpacity = _ref.afterOpacity,
      bgColor = _ref.bgColor,
      fadeIn = _ref.fadeIn,
      backgroundStyles = _ref.backgroundStyles,
      style = _ref.style;
  var pseudoBefore = createPseudoElement(className, classId);
  var pseudoAfter = createPseudoElement(className, classId, ":after");
  return "\n          " + pseudoBefore + ",\n          " + pseudoAfter + " {\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            top: 0;\n            left: 0;\n            " + vendorPrefixBackgroundStyles(transitionDelay, fadeIn) + "\n            " + kebabifyBackgroundStyles((0, _extends2.default)({}, backgroundStyles, style)) + "\n          }\n          " + pseudoBefore + " {\n            z-index: -100;\n            " + (!afterOpacity && lastImage !== "" ? "background-image: url(" + lastImage + ");" : "") + "\n            " + (afterOpacity && (nextImage || bgImage) ? "background-image: url(" + (nextImage || bgImage) + ");" : "") + "\n            " + (bgColor && "background-color: " + bgColor + ";") + "\n            opacity: " + afterOpacity + "; \n          }\n          " + pseudoAfter + " {\n            z-index: -101;\n            " + (afterOpacity && lastImage !== "" ? "background-image: url(" + lastImage + ");" : "") + "\n            " + (!afterOpacity && (bgImage || nextImage) ? "background-image: url(" + (bgImage || nextImage) + ");" : "") + "\n            " + (bgColor && "background-color: " + bgColor + ";") + "\n          }\n        ";
};
/**
 * Creates pseudo-element(s) for className(s).
 *
 * @param className string  className given by props
 * @param classId   string  Deprecated classId
 * @param appendix  string  Pseudo-element to create, defaults to `:before`
 * @return {string}
 */


exports.createPseudoStyles = createPseudoStyles;

var createPseudoElement = function createPseudoElement(className, classId, appendix) {
  if (classId === void 0) {
    classId = "";
  }

  if (appendix === void 0) {
    appendix = ":before";
  }

  var classes = (0, _HelperUtils.stringToArray)(className);
  var pseudoClasses = "";

  if (classes instanceof Array) {
    pseudoClasses = "." + classes.join('.') + appendix;
  }

  if (classId !== "") {
    pseudoClasses += (pseudoClasses && ",\n") + ".gatsby-background-image-" + classId + appendix;
  }

  return pseudoClasses;
};
/**
 * Creates vendor prefixed background styles.
 *
 * @param transitionDelay
 * @param fadeIn
 * @return {string}
 */


exports.createPseudoElement = createPseudoElement;

var vendorPrefixBackgroundStyles = function vendorPrefixBackgroundStyles( // backgroundSize = `cover`,
transitionDelay, fadeIn) {
  if (transitionDelay === void 0) {
    transitionDelay = "0.25s";
  }

  if (fadeIn === void 0) {
    fadeIn = true;
  }

  // TODO: Look into vendor-prefixes through autoprefix in Gatsby!
  // const vendorPrefixes = ['-webkit-', '-moz-', '-o-', '-ms-', '']
  // let prefixed = ``
  // if (fadeIn) {
  //   prefixed +=
  //     vendorPrefixes
  //       .join(`transition-delay: ${transitionDelay};\n`)
  //       .concat(`transition-delay: ${transitionDelay};\n`) +
  //     vendorPrefixes
  //       .join(`transition: opacity 0.5s;\n`)
  //       .concat(`transition: opacity 0.5s;\n`)
  // } else {
  //   prefixed += vendorPrefixes
  //     .join(`transition: none;\n`)
  //     .concat(`transition: none;\n`)
  // }
  var prefixed = fadeIn ? "transition-delay: " + transitionDelay + ";\n            transition: opacity 0.5s;" : "transition: none;";
  return prefixed;
};
/**
 * Converts a style object into CSS kebab-cased style rules.
 *
 * @param styles
 * @return {*}
 */


exports.vendorPrefixBackgroundStyles = vendorPrefixBackgroundStyles;

var kebabifyBackgroundStyles = function kebabifyBackgroundStyles(styles) {
  if ((0, _HelperUtils.isString)(styles)) {
    return styles;
  } else if (styles instanceof Object) {
    return Object.keys(styles).filter(function (key) {
      return key.indexOf('background') === 0 && styles[key] !== '';
    }).reduce(function (resultingStyles, key) {
      return "" + resultingStyles + (0, _HelperUtils.toKebabCase)(key) + ": " + styles[key] + ";\n";
    }, "");
  }

  return "";
};

exports.kebabifyBackgroundStyles = kebabifyBackgroundStyles;