@wordpress/components/build/custom-gradient-picker/utils.js

UI components for WordPress.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getLinearGradientRepresentationOfARadial = getLinearGradientRepresentationOfARadial;
exports.getGradientAstWithDefault = getGradientAstWithDefault;
exports.getGradientAstWithControlPoints = getGradientAstWithControlPoints;
exports.getStopCssColor = getStopCssColor;

var _gradientParser = _interopRequireDefault(require("gradient-parser"));

var _tinycolor = _interopRequireDefault(require("tinycolor2"));

var _constants = require("./constants");

var _serializer = require("./serializer");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
function getLinearGradientRepresentationOfARadial(gradientAST) {
  return (0, _serializer.serializeGradient)({
    type: 'linear-gradient',
    orientation: _constants.HORIZONTAL_GRADIENT_ORIENTATION,
    colorStops: gradientAST.colorStops
  });
}

function hasUnsupportedLength(item) {
  return item.length === undefined || item.length.type !== '%';
}

function getGradientAstWithDefault(value) {
  var _gradientAST$orientat;

  // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
  // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
  let gradientAST;

  try {
    gradientAST = _gradientParser.default.parse(value)[0];
    gradientAST.value = value;
  } catch (error) {
    gradientAST = _gradientParser.default.parse(_constants.DEFAULT_GRADIENT)[0];
    gradientAST.value = _constants.DEFAULT_GRADIENT;
  }

  if (((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') {
    gradientAST.orientation.type = 'angular';
    gradientAST.orientation.value = _constants.DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString();
  }

  if (gradientAST.colorStops.some(hasUnsupportedLength)) {
    const {
      colorStops
    } = gradientAST;
    const step = 100 / (colorStops.length - 1);
    colorStops.forEach((stop, index) => {
      stop.length = {
        value: step * index,
        type: '%'
      };
    });
    gradientAST.value = (0, _serializer.serializeGradient)(gradientAST);
  }

  return gradientAST;
}

function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
  return { ...gradientAST,
    colorStops: newControlPoints.map(({
      position,
      color
    }) => {
      const {
        r,
        g,
        b,
        a
      } = (0, _tinycolor.default)(color).toRgb();
      return {
        length: {
          type: '%',
          value: position.toString()
        },
        type: a < 1 ? 'rgba' : 'rgb',
        value: a < 1 ? [r, g, b, a] : [r, g, b]
      };
    })
  };
}

function getStopCssColor(colorStop) {
  switch (colorStop.type) {
    case 'hex':
      return `#${colorStop.value}`;

    case 'literal':
      return colorStop.value;

    case 'rgb':
    case 'rgba':
      return `${colorStop.type}(${colorStop.value.join(',')})`;

    default:
      // Should be unreachable if passing an AST from gradient-parser.
      // See https://github.com/rafaelcaricio/gradient-parser#ast.
      return 'transparent';
  }
}
//# sourceMappingURL=utils.js.map