@mindful-web/image 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mindful-web/image",
+  "version": "1.0.0",
+  "description": "Common image utilities for Mindful Web projects.",
+  "main": "src/index.js",
+  "author": "Jacob Bare <jacob@parameter1.com>",
+  "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/image",
+  "license": "MIT",
+  "scripts": {
+    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --ext .js --max-warnings 5 ./",
+    "test": "yarn lint"
+  },
+  "dependencies": {
+    "@mindful-web/html": "^1.0.0",
+    "@mindful-web/inflector": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0b77cab713eb5841202bb86c7119949866bc68b5"
+}

package/src/build-imgix-url.js

@@ -0,0 +1,183 @@
+const { camelize } = require('@mindful-web/inflector');
+const { URL, URLSearchParams } = require('url');
+
+const params = [
+  // Adjustment
+  'bri', // Brightness
+  'con', // Contrast
+  'exp', // Exposure
+  'gam', // Gamma
+  'high', // Highlight
+  'hue', // Hue
+  'invert', // Invert
+  'sat', // Saturation
+  'shad', // Shadow
+  'sharp', // Sharpen
+  'usm', // Unsharp Mask
+  'usmrad', // Unsharp Mask Radius
+  'vib', // Vibrance
+
+  // Automatic
+  'auto', // Automatic
+
+  // Blending
+  'ba', // Blend Align
+  'balph', // Blend Alpha
+  'bc', // Blend Crop
+  'bf', // Blend Fit
+  'bh', // Blend Height
+  'blend', // Blend
+  'bm', // Blend Mode
+  'bp', // Blend Padding
+  'bs', // Blend Size
+  'bw', // Blend Width
+  'bx', // Blend X Position
+  'by', // Blend Y Position
+
+  // Border & Padding
+  'border-radius-inner', // Inner Border Radius
+  'border-radius', // Outer Border Radius
+  'border', // Border Size Color
+  'pad', // Padding
+
+  // Color Palette
+  'colors', // Palette Color Count
+  'palette', // Color Palette Extraction
+  'prefix', // CSS Prefix
+
+  // Face Detection
+  'facebindex', // Face Index
+  'facepad', // Face Padding
+  'faces', // JSON Face Data
+
+  // Fill
+  'bg', // Background Color
+  'fill-color', // Fill Color
+  'fill-mode', // Fill Mode
+  'fill', // Fill
+
+  // Focal Point Crop
+  'fp-debug', // Focal Point Debug
+  'fp-x', // Focal Point X Position
+  'fp-y', // Focal Point Y Position
+  'fp-z', // Focal Point Zoom
+
+  // Format
+  'ch', // Client Hints
+  'chromasub', // Chroma Subsampling
+  'colorquant', // Color Quantization
+  'cs', // Color Space
+  'dl', // Download
+  'dpi', // Dots Per Inch
+  'fm', // Output Format
+  'lossless', // Lossless Compression
+  'q', // Output Quality
+
+  // Mask Image
+  'corner-radius', // Mask Corner Radius
+  'mask', // Mask Type
+  'maskbg', // Mask Background Color
+
+  // Noise Reduction
+  'nr', // Noise Reduction Bound
+  'nrs', // Noise Reduction Sharpen
+
+  // PDF
+  'page', // PDF Page Number
+
+  // Pixel Density
+  'dpr', // Device Pixel Ratio
+
+  // Rotation
+  'flip', // Flip Axis
+  'or', // Orientation
+  'rot', // Rotation
+
+  // Size
+  'ar', // Aspect Ratio
+  'crop', // Crop Mode
+  'fit', // Resize Fit Mode
+  'h', // Image Height
+  'max-h', // Maximum Height
+  'max-w', // Maximum Width
+  'min-h', // Minimum Height
+  'min-w', // Minimum Width
+  'rect', // Source Rectangle Region
+  'w', // Image Width
+
+  // Stylize
+  'blur', // Gaussian Blur
+  'duotone-alpha', // Duotone Alpha
+  'duotone', // Duotone
+  'htn', // Halftone
+  'mono', // Monochrome
+  'px', // Pixellate
+  'sepia', // Sepia Tone
+
+  // Text
+  'txt', // Text String
+  'txtalign', // Text Align
+  'txtclip', // Text Clipping Mode
+  'txtclr', // Text Color
+  'txtfit', // Text Fit Mode
+  'txtfont', // Text Font
+  'txtlig', // Text Ligatures
+  'txtline', // Text Outline
+  'txtlineclr', // Text Outline Color
+  'txtpad', // Text Padding
+  'txtshad', // Text Shadow
+  'txtsize', // Text Font Size
+  'txtwidth', // Text Width
+
+  // Trim
+  'trim', // Trim Image
+  'trimcolor', // Trim Color
+  'trimmd', // Trim Mean Difference
+  'trimsd', // Trim Standard Deviation
+  'trimtol', // Trim Tolerance
+
+  // Watermark
+  'mark', // Watermark Image URL
+  'markalign', // Watermark Alignment Mode
+  'markalpha', // Watermark Alpha
+  'markbase', // Watermark Base URL
+  'markfit', // Watermark Fit Mode
+  'markh', // Watermark Height
+  'markpad', // Watermark Padding
+  'markscale', // Watermark Scale
+  'markw', // Watermark Width
+  'markx', // Watermark X Position
+  'marky', // Watermark Y Position
+];
+
+const coreDefaults = {
+  auto: 'format,compress',
+  h: 320,
+  w: 320,
+};
+
+module.exports = (src, selected, defaults, isLogo) => {
+  const options = { ...(selected || defaults || coreDefaults) };
+  if (isLogo) {
+    options.fit = 'fill';
+    options.fillColor = options.fillColor || 'fff';
+    options.bg = options.bg || 'fff';
+    options.pad = options.pad || '5';
+  }
+  try {
+    const url = new URL(src);
+    const searchParams = params.sort().reduce((sp, key) => {
+      const optVal = options[camelize(key)];
+      const searchVal = url.searchParams.get(key);
+      const value = optVal || searchVal;
+      if (value) sp.append(key, value);
+      return sp;
+    }, new URLSearchParams());
+    if (!searchParams.get('auto')) searchParams.set('auto', 'format,compress');
+    if (!searchParams.get('q')) searchParams.set('q', '70');
+    url.search = searchParams;
+    return url.toString();
+  } catch (e) {
+    return src;
+  }
+};

package/src/create-alt-for.js

@@ -0,0 +1,40 @@
+const { titleize } = require('@mindful-web/inflector');
+const { htmlEntities, stripHtml } = require('@mindful-web/html');
+
+const altFrom = (value = '') => {
+  if (!value) return '';
+  const v = String(value);
+  const pos = v.lastIndexOf('.');
+  if (pos === -1) return v;
+  const offset = v.length - pos;
+  if (offset < 6) {
+    const replaced = v.replace(v.substring(pos), '');
+    const titleized = titleize(replaced);
+    return titleized.replace(/\./g, ' ');
+  }
+  return v;
+};
+
+const strip = (v) => htmlEntities.encode(stripHtml(v));
+
+const clean = (v, { prepend, append }) => {
+  const values = [];
+  if (prepend) values.push(strip(prepend));
+  values.push((strip(v)));
+  if (append) values.push(strip(append));
+  return values.join(' ');
+};
+
+module.exports = ({
+  displayName,
+  caption,
+  name,
+  fileName,
+  prepend,
+  append,
+} = {}) => {
+  if (displayName) return clean(displayName, { prepend, append });
+  if (caption) return clean(caption, { prepend, append });
+  if (name) return clean(altFrom(name), { prepend, append });
+  return clean(altFrom(fileName), { prepend, append });
+};

package/src/create-caption-for.js

@@ -0,0 +1,5 @@
+module.exports = (caption) => {
+  if (!caption) return '';
+  // Replace new lines with <br> elements.
+  return `${caption}`.replace('\n', '<br>');
+};

package/src/create-src-for.js

@@ -0,0 +1,15 @@
+const buildImgixUrl = require('./build-imgix-url');
+
+module.exports = (host, image, options, defaultOptions) => {
+  const {
+    filePath,
+    fileName,
+    cropDimensions,
+  } = image;
+  if (!fileName || !filePath) {
+    return buildImgixUrl(`https://${host}/asset-is-missing-file-name-or-path`, options, defaultOptions);
+  }
+  const path = cropDimensions && cropDimensions.aspectRatio ? `${filePath}/${cropDimensions.aspectRatio}` : filePath;
+  const src = `https://${host}/${path}/${fileName}`;
+  return buildImgixUrl(src, options, defaultOptions);
+};

package/src/crop-rectangle.js

@@ -0,0 +1,77 @@
+class CropRectangle {
+  constructor({
+    x,
+    y,
+    width,
+    height,
+    cropped,
+  } = {}) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.cropped = cropped;
+  }
+
+  isCropped() {
+    return this.cropped;
+  }
+
+  notCropped() {
+    return !this.cropped;
+  }
+
+  toString() {
+    return ['x', 'y', 'width', 'height'].map((key) => this[key]).join(',');
+  }
+}
+
+/**
+ * Generates a crop rectangle for the given image width, height
+ * and crop dimensions.
+ *
+ * Uses the same scaling logic as Base Platform to properly calculate
+ * the crop area.
+ */
+module.exports = ({ width, height, cropDimensions }) => {
+  if (!cropDimensions || !width || !height) {
+    return new CropRectangle({
+      x: 0,
+      y: 0,
+      width,
+      height,
+      cropped: false,
+    });
+  }
+
+  const coords = ['x1', 'x2', 'y1', 'y2'];
+  if (coords.some((key) => cropDimensions[key] == null || Number.isNaN(cropDimensions[key]))) {
+    return new CropRectangle({
+      x: 0,
+      y: 0,
+      width,
+      height,
+      cropped: false,
+    });
+  }
+
+  // @see Cygnus\ApplicationBundle\Apps\Management\Controller::cropImageAction
+  const scale = width / 640;
+  const {
+    x1,
+    x2,
+    y1,
+    y2,
+  } = coords.reduce((o, key) => {
+    const v = cropDimensions[key] > 0 ? Math.round(cropDimensions[key] * scale) : 0;
+    return { ...o, [key]: v };
+  }, {});
+
+  return new CropRectangle({
+    x: x1,
+    y: y1,
+    width: x2 - x1,
+    height: y2 - y1,
+    cropped: true,
+  });
+};

package/src/get-relative-aspect-ratio-height.js

@@ -0,0 +1,5 @@
+module.exports = (width, ar, delimiter = ':') => {
+  const [x, y] = ar.split(delimiter);
+  const r = x / y;
+  return Math.round(width / r);
+};

package/src/get-relative-aspect-ratio-width.js

@@ -0,0 +1,5 @@
+module.exports = (height, ar, delimiter = ':') => {
+  const [x, y] = ar.split(delimiter);
+  const r = x / y;
+  return Math.round(height * r);
+};

package/src/get-relative-crop-rectangle-height.js

@@ -0,0 +1,6 @@
+module.exports = ({ width = 350, cropRectangle = {} } = {}) => {
+  if (!cropRectangle) return null;
+  const { width: w, height: h } = cropRectangle;
+  if (!w || !h) return null;
+  return Math.round((width / w) * h);
+};

package/src/index.js

@@ -0,0 +1,19 @@
+const buildImgixUrl = require('./build-imgix-url');
+const createAltFor = require('./create-alt-for');
+const createCaptionFor = require('./create-caption-for');
+const createSrcFor = require('./create-src-for');
+const cropRectangle = require('./crop-rectangle');
+const getRelativeAspectRatioHeight = require('./get-relative-aspect-ratio-height');
+const getRelativeAspectRatioWidth = require('./get-relative-aspect-ratio-width');
+const getRelativeCropRectangleHeight = require('./get-relative-crop-rectangle-height');
+
+module.exports = {
+  buildImgixUrl,
+  createAltFor,
+  createCaptionFor,
+  createSrcFor,
+  cropRectangle,
+  getRelativeAspectRatioHeight,
+  getRelativeAspectRatioWidth,
+  getRelativeCropRectangleHeight,
+};