pages_core 3.12.4 → 3.12.5

data/app/javascript/components/ImageGrid/DragElement.tsx

@@ -4,9 +4,9 @@ import { ImageResource } from "../../types";
 import { DragState } from "../drag";
 
 interface DragElementProps {
-  container: RefObject<HTMLDivElement>,
-  draggable: string | { record: { image: ImageResource, src?: string } },
-  dragState: DragState
+  container: RefObject<HTMLDivElement>;
+  draggable: string | { record: { image: ImageResource; src?: string } };
+  dragState: DragState;
 }
 
 export default function DragElement(props: DragElementProps) {
@@ -24,7 +24,9 @@ export default function DragElement(props: DragElementProps) {
     return (
       <div className="drag-image" style={translateStyle}>
         {"record" in draggable && draggable.record.image && (
-          <img src={draggable.record.src || draggable.record.image.thumbnail_url} />
+          <img
+            src={draggable.record.src || draggable.record.image.thumbnail_url}
+          />
         )}
       </div>
     );

data/app/javascript/components/ImageGrid/GridImage.tsx

@@ -8,25 +8,25 @@ import Placeholder from "./Placeholder";
 import { useDraggable } from "../drag";
 
 interface Record {
-  id: number | null,
-  image: ImageResource,
-  src: string | null,
-  file: File | null
+  id: number | null;
+  image: ImageResource;
+  src: string | null;
+  file: File | null;
 }
 
 interface GridImageProps {
-  draggable: { handle: string, record: Record }
-  attributeName: string,
-  locale: string,
-  locales: { [index: string]: Locale },
-  placeholder: boolean,
-  enablePrimary: boolean,
-  showEmbed: boolean,
-  primary: boolean,
-  position: number,
-  deleteImage: () => void,
-  startDrag: (evt: Event, draggable: Draggable) => void,
-  onUpdate: (newImage: ImageResource, src: string) => void
+  draggable: { handle: string; record: Record };
+  attributeName: string;
+  locale: string;
+  locales: { [index: string]: Locale };
+  placeholder: boolean;
+  enablePrimary: boolean;
+  showEmbed: boolean;
+  primary: boolean;
+  position: number;
+  deleteImage: () => void;
+  startDrag: (evt: Event, draggable: Draggable) => void;
+  onUpdate: (newImage: ImageResource, src: string) => void;
 }
 
 export default function GridImage(props: GridImageProps) {
@@ -70,44 +70,48 @@ export default function GridImage(props: GridImageProps) {
   }
 
   return (
-    <div className={classes.join(" ")}
-         {...dragAttrs}>
-      <input name={`${attributeName}[id]`}
-             type="hidden" value={record.id || ""} />
-      <input name={`${attributeName}[image_id]`}
-             type="hidden" value={(image && image.id) || ""} />
-      <input name={`${attributeName}[position]`}
-             type="hidden" value={props.position} />
+    <div className={classes.join(" ")} {...dragAttrs}>
+      <input
+        name={`${attributeName}[id]`}
+        type="hidden"
+        value={record.id || ""}
+      />
+      <input
+        name={`${attributeName}[image_id]`}
+        type="hidden"
+        value={(image && image.id) || ""}
+      />
+      <input
+        name={`${attributeName}[position]`}
+        type="hidden"
+        value={props.position}
+      />
       {props.enablePrimary && (
-        <input name={`${attributeName}[primary]`}
-               type="hidden" value={props.primary} />
+        <input
+          name={`${attributeName}[primary]`}
+          type="hidden"
+          value={props.primary}
+        />
+      )}
+      {!image && <Placeholder src={src} />}
+      {image && (
+        <>
+          <EditableImage
+            image={image}
+            key={props.placeholder ? "placeholder" : draggable.handle}
+            src={src || image.thumbnail_url}
+            width={250}
+            caption={true}
+            locale={props.locale}
+            locales={props.locales}
+            onUpdate={props.onUpdate}
+          />
+          <div className="actions">
+            {props.showEmbed && <button onClick={copyEmbed}>Embed</button>}
+            {props.deleteImage && <button onClick={deleteImage}>Remove</button>}
+          </div>
+        </>
       )}
-      {!image &&
-       <Placeholder src={src} />}
-      {image &&
-       <>
-         <EditableImage
-           image={image}
-           key={props.placeholder ? "placeholder" : draggable.handle}
-           src={src || image.thumbnail_url}
-           width={250}
-           caption={true}
-           locale={props.locale}
-           locales={props.locales}
-           onUpdate={props.onUpdate} />
-         <div className="actions">
-           {props.showEmbed && (
-             <button onClick={copyEmbed}>
-               Embed
-             </button>
-           )}
-           {props.deleteImage && (
-             <button onClick={deleteImage}>
-               Remove
-             </button>
-           )}
-         </div>
-       </>}
     </div>
   );
 }

data/app/javascript/components/ImageGrid/Placeholder.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface PlaceholderProps {
-  src: string
+  src: string;
 }
 
 export default function Placeholder(props: PlaceholderProps) {

data/app/javascript/components/ImageGrid.jsx

@@ -7,26 +7,35 @@ import GridImage from "./ImageGrid/GridImage";
 import useToastStore from "../stores/useToastStore";
 import { post } from "../lib/request";
 
-import { createDraggable,
-         collectionOrder,
-         useDragCollection,
-         useDragUploader } from "./drag";
+import {
+  createDraggable,
+  collectionOrder,
+  useDragCollection,
+  useDragUploader
+} from "./drag";
 
 function filterFiles(files) {
-  const validMimeTypes = ["image/gif",
-                          "image/jpeg",
-                          "image/pjpeg",
-                          "image/png",
-                          "image/tiff"];
-  return files.filter(f => (validMimeTypes.indexOf(f.type) !== -1));
+  const validMimeTypes = [
+    "image/gif",
+    "image/jpeg",
+    "image/pjpeg",
+    "image/png",
+    "image/tiff"
+  ];
+  return files.filter((f) => validMimeTypes.indexOf(f.type) !== -1);
 }
 
 function draggedImageOrder(primaryCollection, imagesCollection, dragState) {
   const [primary, ...rest] = collectionOrder(primaryCollection, dragState);
   let images = [...rest, ...collectionOrder(imagesCollection, dragState)];
 
-  if (dragState.dragging && [primary, ...images].indexOf(dragState.dragging) === -1) {
-    if (dragState.y < imagesCollection.ref.current.getBoundingClientRect().top) {
+  if (
+    dragState.dragging &&
+    [primary, ...images].indexOf(dragState.dragging) === -1
+  ) {
+    if (
+      dragState.y < imagesCollection.ref.current.getBoundingClientRect().top
+    ) {
       images = [dragState.dragging, ...images];
     } else {
       images.push(dragState.dragging);
@@ -37,11 +46,11 @@ function draggedImageOrder(primaryCollection, imagesCollection, dragState) {
 }
 
 function initRecords(props) {
-  const primary = props.enablePrimary ?
-        props.records.filter(r => r.primary).slice(0, 1) :
-        [];
+  const primary = props.enablePrimary
+    ? props.records.filter((r) => r.primary).slice(0, 1)
+    : [];
 
-  return [primary, props.records.filter(r => primary.indexOf(r) === -1)];
+  return [primary, props.records.filter((r) => primary.indexOf(r) === -1)];
 }
 
 export default function ImageGrid(props) {
@@ -59,8 +68,11 @@ export default function ImageGrid(props) {
   };
 
   const dragEnd = (dragState, files) => {
-    const [draggedPrimary,
-           draggedImages] = draggedImageOrder(primary, images, dragState);
+    const [draggedPrimary, draggedImages] = draggedImageOrder(
+      primary,
+      images,
+      dragState
+    );
 
     primary.dispatch({
       type: "reorder",
@@ -69,19 +81,24 @@ export default function ImageGrid(props) {
     images.dispatch({ type: "reorder", payload: draggedImages });
 
     if (files) {
-      const uploads = filterFiles(files).map(f => uploadImage(f));
+      const uploads = filterFiles(files).map((f) => uploadImage(f));
       dispatchAll({ type: "insertFiles", payload: uploads });
     }
   };
 
-  const [dragState,
-         dragStart,
-         listeners] = useDragUploader([primary, images], dragEnd);
+  const [dragState, dragStart, listeners] = useDragUploader(
+    [primary, images],
+    dragEnd
+  );
 
   const position = (record) => {
-    return [...primary.draggables.map(d => d.record),
-            ...images.draggables.map(d => d.record),
-            ...deleted].indexOf(record) + 1;
+    return (
+      [
+        ...primary.draggables.map((d) => d.record),
+        ...images.draggables.map((d) => d.record),
+        ...deleted
+      ].indexOf(record) + 1
+    );
   };
 
   const attrName = (record) => {
@@ -89,26 +106,23 @@ export default function ImageGrid(props) {
   };
 
   const uploadImage = (file) => {
-    const draggable = createDraggable(
-      { image: null, file: file }
-    );
+    const draggable = createDraggable({ image: null, file: file });
 
     let data = new FormData();
 
     data.append("image[file]", file);
 
-    post("/admin/images.json", data)
-      .then(json => {
-        if (json.status === "error") {
-          error("Error uploading image: " + json.error);
-          dispatchAll({ type: "remove", payload: draggable });
-        } else {
-          dispatchAll({
-            type: "update",
-            payload: { ...draggable, record: { image: json } }
-          });
-        }
-      });
+    post("/admin/images.json", data).then((json) => {
+      if (json.status === "error") {
+        error("Error uploading image: " + json.error);
+        dispatchAll({ type: "remove", payload: draggable });
+      } else {
+        dispatchAll({
+          type: "update",
+          payload: { ...draggable, record: { image: json } }
+        });
+      }
+    });
 
     return draggable;
   };
@@ -136,28 +150,30 @@ export default function ImageGrid(props) {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
-      return (<FilePlaceholder key="placeholder" />);
+      return <FilePlaceholder key="placeholder" />;
     }
 
     return (
-      <GridImage key={draggable.handle}
-                 draggable={draggable}
-                 locale={props.locale}
-                 locales={props.locales}
-                 showEmbed={props.showEmbed}
-                 startDrag={dragStart}
-                 position={position(draggable.record)}
-                 primary={isPrimary}
-                 onUpdate={update(draggable)}
-                 enablePrimary={props.enablePrimary}
-                 deleteImage={remove(draggable)}
-                 attributeName={attrName(draggable.record)}
-                 placeholder={dragging && dragging == draggable} />
+      <GridImage
+        key={draggable.handle}
+        draggable={draggable}
+        locale={props.locale}
+        locales={props.locales}
+        showEmbed={props.showEmbed}
+        startDrag={dragStart}
+        position={position(draggable.record)}
+        primary={isPrimary}
+        onUpdate={update(draggable)}
+        enablePrimary={props.enablePrimary}
+        deleteImage={remove(draggable)}
+        attributeName={attrName(draggable.record)}
+        placeholder={dragging && dragging == draggable}
+      />
     );
   };
 
   const uploadPrimary = (files) => {
-    const [first, ...rest] = filterFiles(files).map(f => uploadImage(f));
+    const [first, ...rest] = filterFiles(files).map((f) => uploadImage(f));
     if (first) {
       images.dispatch({
         type: "prepend",
@@ -170,7 +186,7 @@ export default function ImageGrid(props) {
   const uploadAdditional = (files) => {
     images.dispatch({
       type: "append",
-      payload: filterFiles(files).map(f => uploadImage(f))
+      payload: filterFiles(files).map((f) => uploadImage(f))
     });
   };
 
@@ -179,67 +195,82 @@ export default function ImageGrid(props) {
     classNames.push("with-primary-image");
   }
 
-  const [draggedPrimary,
-         draggedImages] = draggedImageOrder(primary, images, dragState);
+  const [draggedPrimary, draggedImages] = draggedImageOrder(
+    primary,
+    images,
+    dragState
+  );
 
   return (
-    <div className={classNames.join(" ")}
-         ref={containerRef}
-         {...listeners}>
-      {dragState.dragging &&
-       <DragElement draggable={dragState.dragging}
-                    dragState={dragState}
-                    container={containerRef} />}
+    <div className={classNames.join(" ")} ref={containerRef} {...listeners}>
+      {dragState.dragging && (
+        <DragElement
+          draggable={dragState.dragging}
+          dragState={dragState}
+          container={containerRef}
+        />
+      )}
       {props.enablePrimary && (
         <div className="primary-image" ref={primary.ref}>
-          <h3>
-            Main image
-          </h3>
-          {draggedPrimary &&
-           <>
-             {renderImage(draggedPrimary, true)}
-             {props.primaryAttribute && (
-               <input type="hidden" name={props.primaryAttribute}
-                      value={(draggedPrimary.record &&
-                              draggedPrimary.record.image &&
-                              draggedPrimary.record.image.id) || ""} />
-             )}
-           </>}
+          <h3>Main image</h3>
+          {draggedPrimary && (
+            <>
+              {renderImage(draggedPrimary, true)}
+              {props.primaryAttribute && (
+                <input
+                  type="hidden"
+                  name={props.primaryAttribute}
+                  value={
+                    (draggedPrimary.record &&
+                      draggedPrimary.record.image &&
+                      draggedPrimary.record.image.id) ||
+                    ""
+                  }
+                />
+              )}
+            </>
+          )}
           {!draggedPrimary && (
             <div className="drop-target">
-              <FileUploadButton multiple={true}
-                                type="image"
-                                multiline={true}
-                                callback={uploadPrimary} />
-            </div>)}
+              <FileUploadButton
+                multiple={true}
+                type="image"
+                multiline={true}
+                callback={uploadPrimary}
+              />
+            </div>
+          )}
         </div>
       )}
       <div className="grid" ref={images.ref}>
-        <h3>
-          {props.enablePrimary ? "More images" : "Images"}
-        </h3>
+        <h3>{props.enablePrimary ? "More images" : "Images"}</h3>
         <div className="drop-target">
-          <FileUploadButton multiple={true}
-                            type="image"
-                            callback={uploadAdditional} />
+          <FileUploadButton
+            multiple={true}
+            type="image"
+            callback={uploadAdditional}
+          />
         </div>
         <div className="images">
-          {draggedImages.map(r => renderImage(r, false))}
+          {draggedImages.map((r) => renderImage(r, false))}
         </div>
       </div>
       <div className="deleted">
-        {deleted.map(r =>
+        {deleted.map((r) => (
           <span className="deleted-image" key={r.id}>
-            <input name={`${attrName(r)}[id]`}
-                   type="hidden"
-                   value={r.id} />
-            <input name={`${attrName(r)}[attachment_id]`}
-                   type="hidden"
-                   value={(r.image && r.image.id) || ""} />
-            <input name={`${attrName(r)}[_destroy]`}
-                   type="hidden"
-                   value={true} />
-          </span>)}
+            <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
+            <input
+              name={`${attrName(r)}[attachment_id]`}
+              type="hidden"
+              value={(r.image && r.image.id) || ""}
+            />
+            <input
+              name={`${attrName(r)}[_destroy]`}
+              type="hidden"
+              value={true}
+            />
+          </span>
+        ))}
       </div>
     </div>
   );

data/app/javascript/components/ImageUploader.tsx

@@ -5,17 +5,17 @@ import useToastStore from "../stores/useToastStore";
 import { ImageResource, Locale } from "../types";
 import { post } from "../lib/request";
 
-type ImageResponse = ImageResource | { status: "error", error: string }
+type ImageResponse = ImageResource | { status: "error"; error: string };
 
 interface ImageUploaderProps {
-  locale: string,
-  locales: { [index: string]: Locale },
-  image: ImageResource,
-  src: string,
-  width: number,
-  caption: boolean,
-  attr: string,
-  alternative: string
+  locale: string;
+  locales: { [index: string]: Locale };
+  image: ImageResource;
+  src: string;
+  width: number;
+  caption: boolean;
+  attr: string;
+  alternative: string;
 }
 
 function getFiles(dt: DataTransfer): File[] {
@@ -87,15 +87,19 @@ export default function ImageUploader(props: ImageUploaderProps) {
   };
 
   const uploadImage = (file: File) => {
-    const validTypes = ["image/gif",
-                      "image/jpeg",
-                      "image/pjpeg",
-                      "image/png",
-                      "image/tiff"];
+    const validTypes = [
+      "image/gif",
+      "image/jpeg",
+      "image/pjpeg",
+      "image/png",
+      "image/tiff"
+    ];
 
     if (validTypes.indexOf(file.type) == -1) {
-      alert("Invalid file type, only images in JPEG, PNG or GIF " +
-            "formats are supported");
+      alert(
+        "Invalid file type, only images in JPEG, PNG or GIF " +
+          "formats are supported"
+      );
       return;
     }
 
@@ -111,19 +115,18 @@ export default function ImageUploader(props: ImageUploaderProps) {
 
     data.append("image[file]", file);
     locales.forEach((l) => {
-      data.append(`image[alternative][${l}]`, (props.alternative || ""));
+      data.append(`image[alternative][${l}]`, props.alternative || "");
     });
 
-    void post("/admin/images.json", data)
-      .then((response: ImageResponse) => {
-        setUploading(false);
-        if ("status" in response && response.status === "error") {
-          error(`Error uploading image: ${response.error}`);
-        } else if ("thumbnail_url" in response) {
-          setSrc(response.thumbnail_url);
-          setImage(response);
-        }
-      });
+    void post("/admin/images.json", data).then((response: ImageResponse) => {
+      setUploading(false);
+      if ("status" in response && response.status === "error") {
+        error(`Error uploading image: ${response.error}`);
+      } else if ("thumbnail_url" in response) {
+        setSrc(response.thumbnail_url);
+        setImage(response);
+      }
+    });
   };
 
   const classes = ["image-uploader"];
@@ -133,38 +136,39 @@ export default function ImageUploader(props: ImageUploaderProps) {
     classes.push("dragover");
   }
   return (
-    <div className={classes.join(" ")}
-         onDragOver={handleDragOver}
-         onDragLeave={handleDragLeave}
-         onDragEnd={handleDragEnd}
-         onDrop={handleDrop}>
-      <input type="hidden"
-             name={props.attr}
-             value={image ? image.id : ""} />
-      {image &&
-       <div className="image">
-         <EditableImage image={image}
-                        src={src}
-                        width={props.width}
-                        caption={props.caption}
-                        locale={props.locale}
-                        locales={props.locales} />
-       </div>}
+    <div
+      className={classes.join(" ")}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDragEnd={handleDragEnd}
+      onDrop={handleDrop}>
+      <input type="hidden" name={props.attr} value={image ? image.id : ""} />
+      {image && (
+        <div className="image">
+          <EditableImage
+            image={image}
+            src={src}
+            width={props.width}
+            caption={props.caption}
+            locale={props.locale}
+            locales={props.locales}
+          />
+        </div>
+      )}
       <div className="ui-wrapper">
-        {uploading && (
-          <div className="ui">
-            Uploading image...
-          </div>
-        )}
+        {uploading && <div className="ui">Uploading image...</div>}
         {!uploading && (
           <div className="ui">
-            <FileUploadButton type="image"
-                              multiline={true}
-                              callback={receiveFiles} />
+            <FileUploadButton
+              type="image"
+              multiline={true}
+              callback={receiveFiles}
+            />
             {image && (
-              <a className="delete remove-image"
-                 href="#"
-                 onClick={handleRemove}>
+              <a
+                className="delete remove-image"
+                href="#"
+                onClick={handleRemove}>
                 Remove image
               </a>
             )}

data/app/javascript/components/Modal.tsx

@@ -37,12 +37,10 @@ export default function Modal() {
     return (
       <div className="modal-wrapper open">
         <div className="background" onClick={handleClose} />
-        <div className="modal">
-          {component}
-        </div>
+        <div className="modal">{component}</div>
       </div>
     );
   } else {
-    return (<div className="modal-wrapper"></div>);
+    return <div className="modal-wrapper"></div>;
   }
 }