pages_core 3.12.3 → 3.12.5

data/app/javascript/components/DateRangeSelect.jsx

@@ -6,9 +6,9 @@ export default class DateRangeSelect extends React.Component {
     super(props);
     this.state = {
       startsAt: this.parseDate(props.startsAt) || this.defaultDate(),
-      endsAt:   this.parseDate(props.endsAt) || this.defaultDate(60),
+      endsAt: this.parseDate(props.endsAt) || this.defaultDate(60),
       startTime: "",
-      endTime:   ""
+      endTime: ""
     };
     this.state.startTime = this.timeToString(this.state.startsAt);
     this.state.endTime = this.timeToString(this.state.endsAt);
@@ -33,8 +33,9 @@ export default class DateRangeSelect extends React.Component {
   defaultDate(offset = 0) {
     let coeff = 1000 * 60 * 60;
     return new Date(
-      (Math.round((new Date()).getTime() / coeff) * coeff) + coeff +
-             (1000 * 60 * offset)
+      Math.round(new Date().getTime() / coeff) * coeff +
+        coeff +
+        1000 * 60 * offset
     );
   }
 
@@ -49,8 +50,10 @@ export default class DateRangeSelect extends React.Component {
     if (Object.prototype.hasOwnProperty.call(options, "date")) {
       newDate.setDate(options.date);
     }
-    if (Object.prototype.hasOwnProperty.call(options, "time") &&
-        options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)) {
+    if (
+      Object.prototype.hasOwnProperty.call(options, "time") &&
+      options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)
+    ) {
       newDate.setHours(options.time.split(":")[0]);
       newDate.setMinutes(options.time.split(":")[1] || 0);
     }
@@ -58,7 +61,9 @@ export default class DateRangeSelect extends React.Component {
   }
 
   parseDate(str) {
-    if (!str) { return; }
+    if (!str) {
+      return;
+    }
     return new Date(str);
   }
 
@@ -75,40 +80,50 @@ export default class DateRangeSelect extends React.Component {
   }
 
   startsAtToString() {
-    if (this.props.disabled) { return ""; }
+    if (this.props.disabled) {
+      return "";
+    }
     return this.state.startsAt.toJSON();
   }
 
   endsAtToString() {
-    if (this.props.disabled) { return ""; }
+    if (this.props.disabled) {
+      return "";
+    }
     return this.state.endsAt.toJSON();
   }
 
   renderDateSelect(key, date, handleChange) {
     return (
       <div className="date-select">
-        <select value={date.getMonth()}
-                onChange={e => handleChange({ month: e.target.value })}
-                disabled={this.props.disabled}>
+        <select
+          value={date.getMonth()}
+          onChange={(e) => handleChange({ month: e.target.value })}
+          disabled={this.props.disabled}>
           {this.monthOptions().map((m, i) => (
-            <option key={key + "-month-" + i}
-                    value={i}>{m}</option>
+            <option key={key + "-month-" + i} value={i}>
+              {m}
+            </option>
           ))}
         </select>
-        <select value={date.getDate()}
-                onChange={e => handleChange({ date: e.target.value })}
-                disabled={this.props.disabled}>
-          {this.dayOptions().map(d => (
-            <option key={key + "-date-" + d}
-                    value={d}>{d}</option>
+        <select
+          value={date.getDate()}
+          onChange={(e) => handleChange({ date: e.target.value })}
+          disabled={this.props.disabled}>
+          {this.dayOptions().map((d) => (
+            <option key={key + "-date-" + d} value={d}>
+              {d}
+            </option>
           ))}
         </select>
-        <select value={date.getFullYear()}
-                onChange={e => handleChange({ year: e.target.value })}
-                disabled={this.props.disabled}>
-          {this.yearOptions().map(y => (
-            <option key={key + "-year-" + y}
-                    value={y}>{y}</option>
+        <select
+          value={date.getFullYear()}
+          onChange={(e) => handleChange({ year: e.target.value })}
+          disabled={this.props.disabled}>
+          {this.yearOptions().map((y) => (
+            <option key={key + "-year-" + y} value={y}>
+              {y}
+            </option>
           ))}
         </select>
       </div>
@@ -118,37 +133,49 @@ export default class DateRangeSelect extends React.Component {
   render() {
     return (
       <div className="date-range-select">
-        <input type="hidden"
-               name={this.props.objectName + "[starts_at]"}
-               value={this.startsAtToString()} />
-        <input type="hidden"
-               name={this.props.objectName + "[ends_at]"}
-               value={this.endsAtToString()} />
+        <input
+          type="hidden"
+          name={this.props.objectName + "[starts_at]"}
+          value={this.startsAtToString()}
+        />
+        <input
+          type="hidden"
+          name={this.props.objectName + "[ends_at]"}
+          value={this.endsAtToString()}
+        />
         <div className="date">
-          {this.renderDateSelect("starts-at",
-                                 this.state.startsAt,
-                                 this.changeStartsAt)}
+          {this.renderDateSelect(
+            "starts-at",
+            this.state.startsAt,
+            this.changeStartsAt
+          )}
           {!this.props.disableTime && (
-             <input type="text"
-                    size="5"
-                    value={this.state.startTime}
-                    disabled={this.props.disabled}
-                    onChange={e => this.setState({ startTime: e.target.value })}
-                    onBlur={e => this.changeStartsAt({ time: e.target.value })} />
+            <input
+              type="text"
+              size="5"
+              value={this.state.startTime}
+              disabled={this.props.disabled}
+              onChange={(e) => this.setState({ startTime: e.target.value })}
+              onBlur={(e) => this.changeStartsAt({ time: e.target.value })}
+            />
           )}
         </div>
         <span className="to">to</span>
         <div className="date">
-          {this.renderDateSelect("ends-at",
-                                 this.state.endsAt,
-                                 this.changeEndsAt)}
+          {this.renderDateSelect(
+            "ends-at",
+            this.state.endsAt,
+            this.changeEndsAt
+          )}
           {!this.props.disableTime && (
-             <input type="text"
-                    size="5"
-                    value={this.state.endTime}
-                    disabled={this.props.disabled}
-                    onChange={e => this.setState({ endTime: e.target.value })}
-                    onBlur={e => this.changeEndsAt({ time: e.target.value })} />
+            <input
+              type="text"
+              size="5"
+              value={this.state.endTime}
+              disabled={this.props.disabled}
+              onChange={(e) => this.setState({ endTime: e.target.value })}
+              onBlur={(e) => this.changeEndsAt({ time: e.target.value })}
+            />
           )}
         </div>
       </div>
@@ -162,13 +189,26 @@ export default class DateRangeSelect extends React.Component {
   // Returns an array with years from 2000 to 10 years from now.
   yearOptions() {
     let start = 2000;
-    return Array.apply(null, Array((new Date()).getFullYear() - start + 11))
-                .map((_, i) => i + start);
+    return Array.apply(null, Array(new Date().getFullYear() - start + 11)).map(
+      (_, i) => i + start
+    );
   }
 
   monthOptions() {
-    return(["January", "February", "March", "April", "May", "June", "July",
-            "August", "September", "October", "November", "December"]);
+    return [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
   }
 
   dayOptions() {

data/app/javascript/components/EditableImage.tsx

@@ -5,13 +5,13 @@ import useModalStore from "../stores/useModalStore";
 import { Locale, ImageResource } from "../types";
 
 interface EditableImageProps {
-  image: ImageResource,
-  src: string,
-  caption: boolean,
-  locale: string,
-  locales: Record<string, Locale>,
-  width: number,
-  onUpdate?: (newImage: ImageResource, src: string) => void
+  image: ImageResource;
+  src: string;
+  caption: boolean;
+  locale: string;
+  locales: Record<string, Locale>;
+  width: number;
+  onUpdate?: (newImage: ImageResource, src: string) => void;
 }
 
 export default function EditableImage(props: EditableImageProps) {
@@ -43,7 +43,8 @@ export default function EditableImage(props: EditableImageProps) {
         caption={props.caption}
         locale={props.locale}
         locales={props.locales}
-        onUpdate={updateImage} />
+        onUpdate={updateImage}
+      />
     );
   };
 
@@ -51,14 +52,17 @@ export default function EditableImage(props: EditableImageProps) {
 
   return (
     <div className="editable-image">
-      {altWarning &&
-       <span className="alt-warning" title="Alternative text is missing">
-         <i className="fa-solid fa-triangle-exclamation icon" />
-       </span>}
-      <img src={src}
-           width={props.width}
-           height={height()}
-           onClick={handleClick} />
+      {altWarning && (
+        <span className="alt-warning" title="Alternative text is missing">
+          <i className="fa-solid fa-triangle-exclamation icon" />
+        </span>
+      )}
+      <img
+        src={src}
+        width={props.width}
+        height={height()}
+        onClick={handleClick}
+      />
     </div>
   );
 }

data/app/javascript/components/FileUploadButton.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, useRef } from "react";
 
 interface FileUploadButtonProps {
-  callback: (files: File[]) => void,
-  type: string,
-  multiple: boolean,
-  multiline: boolean
+  callback: (files: File[]) => void;
+  type: string;
+  multiple: boolean;
+  multiline: boolean;
 }
 
 export default function FileUploadButton(props: FileUploadButtonProps) {
@@ -32,15 +32,15 @@ export default function FileUploadButton(props: FileUploadButtonProps) {
         Drag and drop {props.type || "file"}
         {props.multiple && "s"} here, or
         {props.multiline && <br />}
-        <button onClick={triggerDialog}>
-          choose a file
-        </button>
+        <button onClick={triggerDialog}>choose a file</button>
       </span>
-      <input type="file"
-             onChange={handleChange}
-             ref={inputRef}
-             style={{ display: "none" }}
-             multiple={props.multiple || false} />
+      <input
+        type="file"
+        onChange={handleChange}
+        ref={inputRef}
+        style={{ display: "none" }}
+        multiple={props.multiple || false}
+      />
     </div>
   );
 }

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

@@ -1,16 +1,16 @@
 import React, { useRef, useState } from "react";
 
 interface Position {
-  x: number,
-  y: number,
+  x: number;
+  y: number;
 }
 
 interface FocalPointProps {
-  x: number,
-  y: number,
-  onChange: (pos: Position) => void,
-  width: number,
-  height: number
+  x: number;
+  y: number;
+  onChange: (pos: Position) => void;
+  width: number;
+  height: number;
 }
 
 function clamp(val: number, min: number, max: number): number {
@@ -27,7 +27,10 @@ export default function FocalPoint(props: FocalPointProps) {
   const { width, height, onChange } = props;
 
   const [dragging, setDragging] = useState(false);
-  const [position, setPosition] = useState<Position>({ x: props.x, y: props.y });
+  const [position, setPosition] = useState<Position>({
+    x: props.x,
+    y: props.y
+  });
 
   const containerRef = useRef<HTMLDivElement>();
   const pointRef = useRef<HTMLDivElement>();
@@ -49,7 +52,7 @@ export default function FocalPoint(props: FocalPointProps) {
 
   const drag = (evt: TouchEvent | MouseEvent) => {
     if (dragging) {
-      let x: number , y: number;
+      let x: number, y: number;
       const containerSize = containerRef.current.getBoundingClientRect();
       evt.preventDefault();
 
@@ -78,17 +81,16 @@ export default function FocalPoint(props: FocalPointProps) {
   };
 
   return (
-    <div className="focal-editor"
-         ref={containerRef}
-         onTouchStart={dragStart}
-         onTouchEnd={dragEnd}
-         onTouchMove={drag}
-         onMouseDown={dragStart}
-         onMouseUp={dragEnd}
-         onMouseMove={drag}>
-      <div className="focal-point"
-           style={pointStyle}
-           ref={pointRef} />
+    <div
+      className="focal-editor"
+      ref={containerRef}
+      onTouchStart={dragStart}
+      onTouchEnd={dragEnd}
+      onTouchMove={drag}
+      onMouseDown={dragStart}
+      onMouseUp={dragEnd}
+      onMouseMove={drag}>
+      <div className="focal-point" style={pointStyle} ref={pointRef} />
     </div>
   );
 }

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

@@ -5,12 +5,12 @@ import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
 interface ImageProps {
-  containerSize: Size,
-  croppedImage: string,
-  cropState: CropState,
-  focalPoint: Position,
-  setCrop: (crop: CropSize) => void,
-  setFocal: (focal: Position) => void
+  containerSize: Size;
+  croppedImage: string;
+  cropState: CropState;
+  focalPoint: Position;
+  setCrop: (crop: CropSize) => void;
+  setFocal: (focal: Position) => void;
 }
 
 export default function Image(props: ImageProps) {
@@ -40,25 +40,29 @@ export default function Image(props: ImageProps) {
   if (props.cropState.cropping) {
     return (
       <div className="image-wrapper" style={style}>
-        <ReactCrop src={props.cropState.image.uncropped_url}
-                   crop={cropSize(props.cropState)}
-                   minWidth={10}
-                   minHeight={10}
-                   onChange={props.setCrop} />
+        <ReactCrop
+          src={props.cropState.image.uncropped_url}
+          crop={cropSize(props.cropState)}
+          minWidth={10}
+          minHeight={10}
+          onChange={props.setCrop}
+        />
       </div>
     );
   } else {
     return (
       <div className="image-wrapper" style={style}>
         {props.focalPoint && (
-          <FocalPoint width={width} height={height}
-                      x={props.focalPoint.x}
-                      y={props.focalPoint.y}
-                      onChange={props.setFocal} />
+          <FocalPoint
+            width={width}
+            height={height}
+            x={props.focalPoint.x}
+            y={props.focalPoint.y}
+            onChange={props.setFocal}
+          />
         )}
         <img src={props.croppedImage} />
       </div>
     );
   }
-
 }

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>
           ))}