pages_core 3.7.0 → 3.8.0

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

@@ -0,0 +1,199 @@
+import { useEffect, useReducer, useState } from "react";
+
+function applyAspect(state, aspect) {
+  let crop = cropSize(state);
+  let image = state.image;
+  let imageAspect = image.real_width / image.real_height;
+
+  // Maximize and center crop area
+  if (aspect) {
+    crop.aspect = aspect;
+    crop.width = 100;
+    crop.height = (100 / aspect) * imageAspect;
+
+    if (crop.height > 100) {
+      crop.height = 100;
+      crop.width = (100 * aspect) / imageAspect;
+    }
+
+    crop.x = (100 - crop.width) / 2;
+    crop.y = (100 - crop.height) / 2;
+  } else {
+    delete crop.aspect;
+  }
+
+  return(applyCrop(state, crop));
+}
+
+function applyCrop(state, crop) {
+  const { image } = state;
+
+  // Don't crop if dimensions are below the threshold
+  if (crop.width < 5 || crop.height < 5) {
+    crop = { x: 0, y: 0, width: 100, height: 100 };
+  }
+
+  if (crop.aspect === null) {
+    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) });
+}
+
+function cropReducer(state, action) {
+  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) ||
+        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;
+  }
+}
+
+function croppedImageCanvas(img, crop) {
+  const canvas = document.createElement("canvas");
+  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)),
+    0,
+    0,
+    (img.naturalWidth * (crop.width / 100)),
+    (img.naturalHeight * (crop.height / 100))
+  );
+  return [canvas, ctx];
+}
+
+function imageDataUrl(canvas, ctx) {
+  let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  for (var i = 0; i < (pixels.length / 4); i++) {
+    if (pixels[(i * 4) + 3] !== 255) {
+      return canvas.toDataURL("image/png");
+    }
+  }
+  return canvas.toDataURL("image/jpeg");
+}
+
+export function cropParams(state) {
+  const maybe = (func) => (val) => (val === null) ? val : func(val);
+  const maybeRound = maybe(Math.round);
+  const maybeCeil = maybe(Math.ceil);
+
+  let crop = { 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) };
+
+  if (crop.crop_start_x + crop.crop_width > state.image.real_width) {
+    crop.crop_width = state.image.real_width - crop.crop_start_x;
+  }
+
+  if (crop.crop_start_y + crop.crop_height > state.image.real_height) {
+    crop.crop_height = state.image.real_height - crop.crop_start_y;
+  }
+
+  return(crop);
+}
+
+export function cropSize(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;
+
+  var width = (crop_width / image.real_width) * 100;
+  var height = (crop_height / image.real_height) * 100;
+
+  if (aspect && width) {
+    height = (width / aspect) * imageAspect;
+  } else if (aspect && height) {
+    width = (height * aspect) / imageAspect;
+  }
+
+  if (aspect === null) {
+    return { x: x, y: y, width: width, height: height };
+  } else {
+    return { x: x, y: y, width: width, height: height, aspect: aspect };
+  }
+}
+
+export default function useCrop(image) {
+  const [state, dispatch] = useReducer(
+    cropReducer,
+    { 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 }
+  );
+
+  const [croppedImage, setCroppedImage] = useState(null);
+
+  async function updateCroppedImage() {
+    const img = new Image();
+    img.src = state.image.uncropped_url;
+    await img.decode();
+    const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
+    setCroppedImage(imageDataUrl(canvas, ctx));
+  }
+
+  useEffect(() => {
+    if (!state.cropping) {
+      updateCroppedImage();
+    }
+  }, [state.cropping]);
+
+  return [state, dispatch, croppedImage];
+}

data/app/javascript/components/ImageCropper.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+
+import Image from "./ImageCropper/Image";
+import Toolbar from "./ImageCropper/Toolbar";
+
+export { default as useCrop,
+         cropParams } from "./ImageCropper/useCrop";
+
+function focalPoint(state) {
+  if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
+    return null;
+  } else {
+    return {
+      x: ((state.crop_gravity_x - state.crop_start_x) / state.crop_width) * 100,
+      y: ((state.crop_gravity_y - state.crop_start_y) / state.crop_height) * 100
+    };
+  }
+}
+
+export default function ImageCropper(props) {
+  const containerRef = useRef();
+  const [containerSize, setContainerSize] = useState(null);
+
+  const handleResize = () => {
+    let elem = containerRef.current;
+    if (elem) {
+      setContainerSize({ width: elem.offsetWidth - 2,
+                         height: elem.offsetHeight - 2 });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return function cleanup() {
+      window.removeEventListener("resize", handleResize);
+    };
+  });
+
+  useEffect(handleResize, []);
+
+  const setAspect = (aspect) => {
+    props.dispatch({ type: "setAspect", payload: aspect });
+  };
+
+  const setCrop = (crop) => {
+    props.dispatch({ type: "setCrop", payload: crop });
+  };
+
+  const setFocal = (focal) => {
+    props.dispatch({ type: "setFocal", payload: focal });
+  };
+
+  const toggleCrop = () => {
+    if (props.cropState.cropping) {
+      props.dispatch({ type: "completeCrop" });
+    } else {
+      props.dispatch({ type: "startCrop" });
+    }
+  };
+
+  return (
+    <div className="visual">
+      <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} />}
+      </div>
+    </div>
+  );
+}
+
+ImageCropper.propTypes = {
+  croppedImage: PropTypes.string,
+  cropState: PropTypes.object,
+  dispatch: PropTypes.func
+};

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

@@ -0,0 +1,98 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ModalStore from "../ModalStore";
+import ToastStore from "../ToastStore";
+import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
+
+export default function Form(props) {
+  const { alternative, caption, image, locale, locales } = props;
+
+  const copyEmbedCode = (evt) => {
+    evt.preventDefault();
+    copyToClipboard(`[image:${image.id}]`);
+    ToastStore.dispatch({
+      type: "NOTICE", message: "Embed code copied to clipboard"
+    });
+  };
+
+  const handleChangeLocale = (evt) => {
+    props.setLocale(evt.target.value);
+  };
+
+  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>
+        )}
+      </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 => (
+              <option key={`locale-${key}`} value={key}>
+                {locales[key]}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      <div className={"field " + (alternative[locale] ? "" : "field-with-warning")}>
+        <label>
+          Alternative text
+        </label>
+        <span className="description">
+          For visually impaired users and search engines.
+        </span>
+        <textarea
+          className="alternative"
+          value={alternative[locale] || ""}
+          onChange={e => props.updateLocalization("alternative", e.target.value)} />
+      </div>
+      {props.showCaption && (
+        <div className="field">
+          <label>
+            Caption
+          </label>
+          <textarea
+            onChange={e => props.updateLocalization("caption", e.target.value)}
+            value={caption[locale] || ""}
+            className="caption" />
+        </div>
+      )}
+      <div className="buttons">
+        <button onClick={props.save}>
+          Save
+        </button>
+        <button onClick={() => ModalStore.dispatch({ type: "CLOSE" })}>
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}
+
+Form.propTypes = {
+  alternative: PropTypes.object,
+  caption: PropTypes.object,
+  image: PropTypes.object,
+  locale: PropTypes.string,
+  locales: PropTypes.array,
+  setLocale: PropTypes.func,
+  save: PropTypes.func,
+  showCaption: PropTypes.bool,
+  updateLocalization: PropTypes.func
+};

data/app/javascript/components/ImageEditor.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import ModalStore from "./ModalStore";
+import { putJson } from "../lib/request";
+
+import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
+import Form from "./ImageEditor/Form";
+
+export default function ImageEditor(props) {
+  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 || {},
+  });
+
+  const updateLocalization = (name, value) => {
+    setLocalizations({
+      ...localizations,
+      [name]: { ...localizations[name], [locale]: value }
+    });
+  };
+
+  const save = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    const data = { ...localizations, ...cropParams(cropState) };
+    putJson(`/admin/images/${props.image.id}`, { image: data });
+
+    if (props.onUpdate) {
+      props.onUpdate(data, croppedImage);
+    }
+    ModalStore.dispatch({ type: "CLOSE" });
+  };
+
+  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} />}
+    </div>
+  );
+}
+
+ImageEditor.propTypes = {
+  image: PropTypes.object,
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  caption: PropTypes.bool,
+  onUpdate: PropTypes.func
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function DragElement(props) {
+  const { draggable, dragState, container } = props;
+
+  if (draggable === "Files") {
+    return "";
+  } else {
+    const containerSize = container.current.getBoundingClientRect();
+    const x = dragState.x - (containerSize.x || containerSize.left);
+    const y = dragState.y - (containerSize.y || containerSize.top);
+    const translateStyle = {
+      transform: `translate3d(${x}px, ${y}px, 0)`
+    };
+    return (
+      <div className="drag-image" style={translateStyle}>
+        {draggable.record.image && (
+          <img src={draggable.record.src || draggable.record.image.thumbnail_url} />
+        )}
+      </div>
+    );
+  }
+}
+
+DragElement.propTypes = {
+  draggable: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  dragState: PropTypes.object,
+  container: PropTypes.object
+};

data/app/javascript/components/ImageGrid/FilePlaceholder.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FilePlaceholder() {
+  return (
+    <div className="grid-image" key="file-placeholder">
+      <div className="file-placeholder" />
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import copyToClipboard from "../../lib/copyToClipboard";
+import EditableImage from "../EditableImage";
+import ToastStore from "../ToastStore";
+import Placeholder from "./Placeholder";
+
+import { useDraggable } from "../drag";
+
+export default function GridImage(props) {
+  const { attributeName, draggable } = props;
+  const record = draggable.record;
+  const image = record.image;
+
+  const [src, setSrc] = useState(record.src || null);
+
+  const dragAttrs = useDraggable(draggable, props.startDrag);
+
+  useEffect(() => {
+    if (record.file) {
+      const reader = new FileReader();
+      reader.onload = () => setSrc(reader.result);
+      reader.readAsDataURL(record.file);
+    }
+  }, []);
+
+  const copyEmbed = (evt) => {
+    evt.preventDefault();
+    copyToClipboard(`[image:${image.id}]`);
+    ToastStore.dispatch({
+      type: "NOTICE", message: "Embed code copied to clipboard"
+    });
+  };
+
+  const deleteImage = (evt) => {
+    evt.preventDefault();
+    if (props.deleteImage) {
+      props.deleteImage();
+    }
+  };
+
+  let classes = ["grid-image"];
+  if (props.placeholder) {
+    classes.push("placeholder");
+  }
+  if (record.file) {
+    classes.push("uploading");
+  }
+
+  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} />
+      {props.enablePrimary && (
+        <input name={`${attributeName}[primary]`}
+               type="hidden" value={props.primary} />
+      )}
+      {!image &&
+       <Placeholder src={src} />}
+      {image &&
+       <>
+         <EditableImage image={image}
+                        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>
+  );
+}
+GridImage.propTypes = {
+  draggable: PropTypes.object,
+  deleteImage: PropTypes.func,
+  startDrag: PropTypes.func,
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  onUpdate: PropTypes.func,
+  attributeName: PropTypes.string,
+  placeholder: PropTypes.bool,
+  enablePrimary: PropTypes.bool,
+  showEmbed: PropTypes.bool,
+  primary: PropTypes.bool,
+  position: PropTypes.number,
+};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function Placeholder(props) {
+  if (props.src) {
+    return (
+      <div className="temp-image">
+        <img src={props.src} />
+        <span>Uploading...</span>
+      </div>
+    );
+  } else {
+    return (
+      <div className="file-placeholder">
+        <span>Uploading...</span>
+      </div>
+    );
+  }
+}
+
+Placeholder.propTypes = {
+  src: PropTypes.string
+};