pages_core 3.12.4 → 3.12.5

data/app/javascript/components/ImageCropper/Toolbar.tsx

@@ -6,20 +6,26 @@ import { CropState } from "./useCrop";
 type Ratio = number | null;
 
 interface ToolbarProps {
-  cropState: CropState,
-  image: ImageResource,
-  setAspect: (Ratio) => void,
-  toggleCrop: (evt: Event) => void,
-  toggleFocal: (evt: Event) => void
+  cropState: CropState;
+  image: ImageResource;
+  setAspect: (Ratio) => void;
+  toggleCrop: (evt: Event) => void;
+  toggleFocal: (evt: Event) => void;
 }
 
 export default function Toolbar(props: ToolbarProps) {
   const { cropping } = props.cropState;
 
   const aspectRatios = [
-    ["Free", null], ["1:1", 1],    ["3:2", 3/2], ["2:3", 2/3],
-    ["4:3", 4/3],   ["3:4", 3/4],  ["5:4", 5/4], ["4:5", 4/5],
-    ["16:9", 16/9]
+    ["Free", null],
+    ["1:1", 1],
+    ["3:2", 3 / 2],
+    ["2:3", 2 / 3],
+    ["4:3", 4 / 3],
+    ["3:4", 3 / 4],
+    ["5:4", 5 / 4],
+    ["4:5", 4 / 5],
+    ["16:9", 16 / 9]
   ];
 
   const updateAspect = (ratio: Ratio) => (evt: Event) => {
@@ -39,34 +45,36 @@ export default function Toolbar(props: ToolbarProps) {
             {width}x{height} {format}
           </span>
         </div>
-        <button title="Crop image"
-                onClick={props.toggleCrop}
-                className={cropping ? "active" : ""}>
+        <button
+          title="Crop image"
+          onClick={props.toggleCrop}
+          className={cropping ? "active" : ""}>
           <i className="fa-solid fa-crop" />
         </button>
-        <button disabled={cropping}
-                title="Toggle focal point"
-                onClick={props.toggleFocal}>
+        <button
+          disabled={cropping}
+          title="Toggle focal point"
+          onClick={props.toggleFocal}>
           <i className="fa-solid fa-bullseye" />
         </button>
-        <a href={props.image.original_url}
-           className="button"
-           title="Download original image"
-           disabled={cropping}
-           download={props.image.filename}
-           onClick={evt => cropping && evt.preventDefault()}>
+        <a
+          href={props.image.original_url}
+          className="button"
+          title="Download original image"
+          disabled={cropping}
+          download={props.image.filename}
+          onClick={(evt) => cropping && evt.preventDefault()}>
           <i className="fa-solid fa-download" />
         </a>
       </div>
       {cropping && (
         <div className="aspect-ratios toolbar">
-          <div className="label">
-            Lock aspect ratio:
-          </div>
-          {aspectRatios.map(ratio => (
-            <button key={ratio[0]}
-                    className={(ratio[1] == props.cropState.aspect) ? "active" : ""}
-                    onClick={updateAspect(ratio[1])}>
+          <div className="label">Lock aspect ratio:</div>
+          {aspectRatios.map((ratio) => (
+            <button
+              key={ratio[0]}
+              className={ratio[1] == props.cropState.aspect ? "active" : ""}
+              onClick={updateAspect(ratio[1])}>
               {ratio[0]}
             </button>
           ))}

data/app/javascript/components/ImageCropper/useCrop.ts

@@ -3,41 +3,41 @@ import { useEffect, useReducer, useState } from "react";
 import { ImageResource } from "../../types";
 
 export interface Position {
-  x: number,
-  y: number,
+  x: number;
+  y: number;
 }
 
 export interface Size {
-  width: number,
-  height: number
+  width: number;
+  height: number;
 }
 
 interface CropParams {
-  crop_start_x: number,
-  crop_start_y: number,
-  crop_width: number,
-  crop_height: number,
-  crop_gravity_x: number,
-  crop_gravity_y: number,
+  crop_start_x: number;
+  crop_start_y: number;
+  crop_width: number;
+  crop_height: number;
+  crop_gravity_x: number;
+  crop_gravity_y: number;
 }
 
 export interface CropState extends CropParams {
-  aspect: number | null,
-  cropping: boolean,
-  image: ImageResource
+  aspect: number | null;
+  cropping: boolean;
+  image: ImageResource;
 }
 
 export interface CropSize {
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  aspect?: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  aspect?: number;
 }
 
 export interface CropAction {
-  type: string,
-  payload?: CropSize | Position
+  type: string;
+  payload?: CropSize | Position;
 }
 
 function applyAspect(state: CropState, aspect: number | null) {
@@ -62,7 +62,7 @@ function applyAspect(state: CropState, aspect: number | null) {
     delete crop.aspect;
   }
 
-  return(applyCrop(state, crop));
+  return applyCrop(state, crop);
 }
 
 function applyCrop(state: CropState, crop: CropSize) {
@@ -77,78 +77,95 @@ function applyCrop(state: CropState, crop: CropSize) {
     delete crop.aspect;
   }
 
-  return({ aspect:       crop.aspect,
-           crop_start_x: image.real_width * (crop.x / 100),
-           crop_start_y: image.real_height * (crop.y / 100),
-           crop_width:   image.real_width * (crop.width / 100),
-           crop_height:  image.real_height * (crop.height / 100) });
+  return {
+    aspect: crop.aspect,
+    crop_start_x: image.real_width * (crop.x / 100),
+    crop_start_y: image.real_height * (crop.y / 100),
+    crop_width: image.real_width * (crop.width / 100),
+    crop_height: image.real_height * (crop.height / 100)
+  };
 }
 
 function cropReducer(state: CropState, action: CropAction): CropState {
-  const { crop_start_x,
-          crop_start_y,
-          crop_width,
-          crop_height,
-          crop_gravity_x,
-          crop_gravity_y } = state;
+  const {
+    crop_start_x,
+    crop_start_y,
+    crop_width,
+    crop_height,
+    crop_gravity_x,
+    crop_gravity_y
+  } = state;
 
   switch (action.type) {
-  case "completeCrop":
-    // Disable focal point if it's out of bounds.
-    if (crop_gravity_x < crop_start_x ||
-        crop_gravity_x > (crop_start_x + crop_width) ||
+    case "completeCrop":
+      // Disable focal point if it's out of bounds.
+      if (
+        crop_gravity_x < crop_start_x ||
+        crop_gravity_x > crop_start_x + crop_width ||
         crop_gravity_y < crop_start_y ||
-        crop_gravity_y > (crop_start_y + crop_height)) {
-      return { ...state, cropping: false, crop_gravity_x: null, crop_gravity_y: null };
-    } else {
-      return { ...state, cropping: false };
-    }
-  case "setCrop":
-    return { ...state, ...applyCrop(state, action.payload) };
-  case "setAspect":
-    return { ...state, ...applyAspect(state, action.payload) };
-  case "setFocal":
-    return {
-      ...state,
-      crop_gravity_x: (crop_width * (action.payload.x / 100)) + crop_start_x,
-      crop_gravity_y: (crop_height * (action.payload.y / 100)) + crop_start_y
-    };
-  case "startCrop":
-    return { ...state, cropping: true };
-  case "toggleFocal":
-    if (crop_gravity_x === null) {
-      return cropReducer(state, { type: "setFocal", payload: { x: 50, y: 50 } });
-    } else {
-      return { ...state, crop_gravity_x: null, crop_gravity_y: null };
-    }
-  default:
-    return state;
+        crop_gravity_y > crop_start_y + crop_height
+      ) {
+        return {
+          ...state,
+          cropping: false,
+          crop_gravity_x: null,
+          crop_gravity_y: null
+        };
+      } else {
+        return { ...state, cropping: false };
+      }
+    case "setCrop":
+      return { ...state, ...applyCrop(state, action.payload) };
+    case "setAspect":
+      return { ...state, ...applyAspect(state, action.payload) };
+    case "setFocal":
+      return {
+        ...state,
+        crop_gravity_x: crop_width * (action.payload.x / 100) + crop_start_x,
+        crop_gravity_y: crop_height * (action.payload.y / 100) + crop_start_y
+      };
+    case "startCrop":
+      return { ...state, cropping: true };
+    case "toggleFocal":
+      if (crop_gravity_x === null) {
+        return cropReducer(state, {
+          type: "setFocal",
+          payload: { x: 50, y: 50 }
+        });
+      } else {
+        return { ...state, crop_gravity_x: null, crop_gravity_y: null };
+      }
+    default:
+      return state;
   }
 }
 
 function croppedImageCanvas(img: HTMLImageElement, crop: CropSize) {
   const canvas = document.createElement("canvas");
-  canvas.width = (img.naturalWidth * (crop.width / 100));
-  canvas.height = (img.naturalHeight * (crop.height / 100));
+  canvas.width = img.naturalWidth * (crop.width / 100);
+  canvas.height = img.naturalHeight * (crop.height / 100);
   const ctx = canvas.getContext("2d");
   ctx.drawImage(
     img,
-    (img.naturalWidth * (crop.x / 100)),
-    (img.naturalHeight * (crop.y / 100)),
-    (img.naturalWidth * (crop.width / 100)),
-    (img.naturalHeight * (crop.height / 100)),
+    img.naturalWidth * (crop.x / 100),
+    img.naturalHeight * (crop.y / 100),
+    img.naturalWidth * (crop.width / 100),
+    img.naturalHeight * (crop.height / 100),
     0,
     0,
-    (img.naturalWidth * (crop.width / 100)),
-    (img.naturalHeight * (crop.height / 100))
+    img.naturalWidth * (crop.width / 100),
+    img.naturalHeight * (crop.height / 100)
   );
   return [canvas, ctx];
 }
 
-function imageDataUrl(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): string {
+function imageDataUrl(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D
+): string {
   const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-  for (let i = 0; i < (pixels.length / 4); i++) {
-    if (pixels[(i * 4) + 3] !== 255) {
+  for (let i = 0; i < pixels.length / 4; i++) {
+    if (pixels[i * 4 + 3] !== 255) {
       return canvas.toDataURL("image/png");
     }
   }
@@ -156,15 +173,16 @@ function imageDataUrl(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D):
 }
 
 export function cropParams(state: CropState): CropParams {
-  const maybe = (func: (number) => number) => (val: number | null) => (val === null) ? val : func(val);
+  const maybe = (func: (number) => number) => (val: number | null) =>
+    val === null ? val : func(val);
   const maybeRound = maybe(Math.round);
   const maybeCeil = maybe(Math.ceil);
 
   const crop: CropParams = {
-    crop_start_x:   maybeRound(state.crop_start_x),
-    crop_start_y:   maybeRound(state.crop_start_y),
-    crop_width:     maybeCeil(state.crop_width),
-    crop_height:    maybeCeil(state.crop_height),
+    crop_start_x: maybeRound(state.crop_start_x),
+    crop_start_y: maybeRound(state.crop_start_y),
+    crop_width: maybeCeil(state.crop_width),
+    crop_height: maybeCeil(state.crop_height),
     crop_gravity_x: maybeRound(state.crop_gravity_x),
     crop_gravity_y: maybeRound(state.crop_gravity_y)
   };
@@ -177,16 +195,12 @@ export function cropParams(state: CropState): CropParams {
     crop.crop_height = state.image.real_height - crop.crop_start_y;
   }
 
-  return(crop);
+  return crop;
 }
 
 export function cropSize(state: CropState): CropSize {
-  const { image,
-          aspect,
-          crop_start_x,
-          crop_start_y,
-          crop_width,
-          crop_height } = state;
+  const { image, aspect, crop_start_x, crop_start_y, crop_width, crop_height } =
+    state;
   const imageAspect = image.real_width / image.real_height;
   const x = (crop_start_x / image.real_width) * 100;
   const y = (crop_start_y / image.real_height) * 100;
@@ -209,15 +223,15 @@ export function cropSize(state: CropState): CropSize {
 
 export default function useCrop(image: ImageResource) {
   const initialState: CropState = {
-    aspect:         null,
-    cropping:       false,
-    crop_start_x:   image.crop_start_x || 0,
-    crop_start_y:   image.crop_start_y || 0,
-    crop_width:     image.crop_width || image.real_width,
-    crop_height:    image.crop_height || image.real_height,
+    aspect: null,
+    cropping: false,
+    crop_start_x: image.crop_start_x || 0,
+    crop_start_y: image.crop_start_y || 0,
+    crop_width: image.crop_width || image.real_width,
+    crop_height: image.crop_height || image.real_height,
     crop_gravity_x: image.crop_gravity_x,
     crop_gravity_y: image.crop_gravity_y,
-    image:          image
+    image: image
   };
 
   const [state, dispatch] = useReducer(cropReducer, initialState);

data/app/javascript/components/ImageCropper.tsx

@@ -3,16 +3,19 @@ import React, { useEffect, useRef, useState } from "react";
 import Image from "./ImageCropper/Image";
 import Toolbar from "./ImageCropper/Toolbar";
 
-import { CropAction, CropSize, CropState,
-         Position } from "./ImageCropper/useCrop";
+import {
+  CropAction,
+  CropSize,
+  CropState,
+  Position
+} from "./ImageCropper/useCrop";
 
-export { default as useCrop,
-         cropParams } from "./ImageCropper/useCrop";
+export { default as useCrop, cropParams } from "./ImageCropper/useCrop";
 
 interface ImageCropperProps {
-  croppedImage: string,
-  cropState: CropState,
-  dispatch: (action: CropAction) => void
+  croppedImage: string;
+  cropState: CropState;
+  dispatch: (action: CropAction) => void;
 }
 
 function focalPoint(state: CropState): Position {
@@ -33,8 +36,10 @@ export default function ImageCropper(props: ImageCropperProps) {
   const handleResize = () => {
     const elem = containerRef.current;
     if (elem) {
-      setContainerSize({ width: elem.offsetWidth - 2,
-                         height: elem.offsetHeight - 2 });
+      setContainerSize({
+        width: elem.offsetWidth - 2,
+        height: elem.offsetHeight - 2
+      });
     }
   };
 
@@ -69,23 +74,27 @@ export default function ImageCropper(props: ImageCropperProps) {
 
   return (
     <div className="visual">
-      <Toolbar cropState={props.cropState}
-               image={props.cropState.image}
-               setAspect={setAspect}
-               toggleCrop={toggleCrop}
-               toggleFocal={() => props.dispatch({ type: "toggleFocal" })} />
+      <Toolbar
+        cropState={props.cropState}
+        image={props.cropState.image}
+        setAspect={setAspect}
+        toggleCrop={toggleCrop}
+        toggleFocal={() => props.dispatch({ type: "toggleFocal" })}
+      />
       <div className="image-container" ref={containerRef}>
-        {!props.croppedImage &&
-         <div className="loading">
-           Loading image&hellip;
-         </div>}
-        {props.croppedImage && containerSize &&
-         <Image cropState={props.cropState}
-                containerSize={containerSize}
-                croppedImage={props.croppedImage}
-                focalPoint={focalPoint(props.cropState)}
-                setCrop={setCrop}
-                setFocal={setFocal} />}
+        {!props.croppedImage && (
+          <div className="loading">Loading image&hellip;</div>
+        )}
+        {props.croppedImage && containerSize && (
+          <Image
+            cropState={props.cropState}
+            containerSize={containerSize}
+            croppedImage={props.croppedImage}
+            focalPoint={focalPoint(props.cropState)}
+            setCrop={setCrop}
+            setFocal={setFocal}
+          />
+        )}
       </div>
     </div>
   );

data/app/javascript/components/ImageEditor/Form.tsx

@@ -5,15 +5,15 @@ import { Locale, ImageResource } from "../../types";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
 
 interface FormProps {
-  alternative: Record<string, string>,
-  caption: Record<string, string>,
-  image: ImageResource,
-  locale: string,
-  locales: Record<string, Locale>,
-  setLocale: (locale: string) => void,
-  save: (evt: Event) => void,
-  showCaption: boolean,
-  updateLocalization: (name: "alternative" | "caption", value: string) => void
+  alternative: Record<string, string>;
+  caption: Record<string, string>;
+  image: ImageResource;
+  locale: string;
+  locales: Record<string, Locale>;
+  setLocale: (locale: string) => void;
+  save: (evt: Event) => void;
+  showCaption: boolean;
+  updateLocalization: (name: "alternative" | "caption", value: string) => void;
 }
 
 export default function Form(props: FormProps) {
@@ -37,27 +37,15 @@ export default function Form(props: FormProps) {
   return (
     <form>
       <div className="field embed-code">
-        <label>
-          Embed code
-        </label>
-        <input type="text"
-               value={`[image:${image.id}]`}
-               disabled={true} />
-        {copySupported() && (
-          <button onClick={copyEmbedCode}>
-            Copy
-          </button>
-        )}
+        <label>Embed code</label>
+        <input type="text" value={`[image:${image.id}]`} disabled={true} />
+        {copySupported() && <button onClick={copyEmbedCode}>Copy</button>}
       </div>
       {locales && Object.keys(locales).length > 1 && (
         <div className="field">
-          <label>
-            Locale
-          </label>
-          <select name="locale"
-                  value={locale}
-                  onChange={handleChangeLocale}>
-            {Object.keys(locales).map(key => (
+          <label>Locale</label>
+          <select name="locale" value={locale} onChange={handleChangeLocale}>
+            {Object.keys(locales).map((key) => (
               <option key={`locale-${key}`} value={key}>
                 {locales[key].name}
               </option>
@@ -65,10 +53,11 @@ export default function Form(props: FormProps) {
           </select>
         </div>
       )}
-      <div className={"field " + (alternative[locale] ? "" : "field-with-warning")}>
-        <label>
-          Alternative text
-        </label>
+      <div
+        className={
+          "field " + (alternative[locale] ? "" : "field-with-warning")
+        }>
+        <label>Alternative text</label>
         <span className="description">
           For visually impaired users and search engines.
         </span>
@@ -77,28 +66,28 @@ export default function Form(props: FormProps) {
           lang={locale}
           dir={inputDir}
           value={alternative[locale] || ""}
-          onChange={e => props.updateLocalization("alternative", e.target.value)} />
+          onChange={(e) =>
+            props.updateLocalization("alternative", e.target.value)
+          }
+        />
       </div>
       {props.showCaption && (
         <div className="field">
-          <label>
-            Caption
-          </label>
+          <label>Caption</label>
           <textarea
             lang={locale}
             dir={inputDir}
-            onChange={e => props.updateLocalization("caption", e.target.value)}
+            onChange={(e) =>
+              props.updateLocalization("caption", e.target.value)
+            }
             value={caption[locale] || ""}
-            className="caption" />
+            className="caption"
+          />
         </div>
       )}
       <div className="buttons">
-        <button onClick={props.save}>
-          Save
-        </button>
-        <button onClick={closeModal}>
-          Cancel
-        </button>
+        <button onClick={props.save}>Save</button>
+        <button onClick={closeModal}>Cancel</button>
       </div>
     </form>
   );

data/app/javascript/components/ImageEditor.tsx

@@ -7,24 +7,27 @@ import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
 
 interface ImageEditorProps {
-  image: ImageResource,
-  caption: boolean,
-  locale: string,
-  locales: Record<string, Locale>,
-  onUpdate?: (data: ImageResource, croppedImage: string | null) => void
+  image: ImageResource;
+  caption: boolean;
+  locale: string;
+  locales: Record<string, Locale>;
+  onUpdate?: (data: ImageResource, croppedImage: string | null) => void;
 }
 
 export default function ImageEditor(props: ImageEditorProps) {
   const [cropState, dispatch, croppedImage] = useCrop(props.image);
   const [locale, setLocale] = useState(props.locale);
   const [localizations, setLocalizations] = useState({
-    caption:     props.image.caption || {},
-    alternative: props.image.alternative || {},
+    caption: props.image.caption || {},
+    alternative: props.image.alternative || {}
   });
 
   const closeModal = useModalStore((state) => state.close);
 
-  const updateLocalization = (name: "alternative" | "caption", value: string) => {
+  const updateLocalization = (
+    name: "alternative" | "caption",
+    value: string
+  ) => {
     setLocalizations({
       ...localizations,
       [name]: { ...localizations[name], [locale]: value }
@@ -46,19 +49,24 @@ export default function ImageEditor(props: ImageEditorProps) {
 
   return (
     <div className="image-editor">
-      <ImageCropper croppedImage={croppedImage}
-                    cropState={cropState}
-                    dispatch={dispatch} />
-      {!cropState.cropping &&
-       <Form alternative={localizations.alternative}
-             caption={localizations.caption}
-             image={props.image}
-             locale={locale}
-             locales={props.locales}
-             setLocale={setLocale}
-             save={save}
-             showCaption={props.caption}
-             updateLocalization={updateLocalization} />}
+      <ImageCropper
+        croppedImage={croppedImage}
+        cropState={cropState}
+        dispatch={dispatch}
+      />
+      {!cropState.cropping && (
+        <Form
+          alternative={localizations.alternative}
+          caption={localizations.caption}
+          image={props.image}
+          locale={locale}
+          locales={props.locales}
+          setLocale={setLocale}
+          save={save}
+          showCaption={props.caption}
+          updateLocalization={updateLocalization}
+        />
+      )}
     </div>
   );
 }