pages_core 3.7.0 → 3.8.0

data/app/javascript/components/Attachments/Attachment.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import PropTypes from "prop-types";
+import copyToClipboard from "../../lib/copyToClipboard";
+import AttachmentEditor from "./AttachmentEditor";
+import ModalStore from "../ModalStore";
+import ToastStore from "../ToastStore";
+
+import { useDraggable } from "../drag";
+
+export default function Attachment(props) {
+  const { attributeName, draggable } = props;
+  const { record } = draggable;
+  const { attachment, uploading } = record;
+
+  const listeners = useDraggable(draggable, props.startDrag);
+
+  const copyEmbed = (evt) => {
+    evt.preventDefault();
+    copyToClipboard(`[attachment:${attachment.id}]`);
+    ToastStore.dispatch({
+      type: "NOTICE", message: "Embed code copied to clipboard"
+    });
+  };
+
+  const deleteRecord = (evt) => {
+    evt.preventDefault();
+    if (props.deleteRecord) {
+      props.deleteRecord();
+    }
+  };
+
+  const description = () => {
+    if (attachment.description && attachment.description[props.locale]) {
+      return attachment.description[props.locale];
+    }
+    return null;
+  };
+
+  const name = () => {
+    if (attachment.name && attachment.name[props.locale]) {
+      return attachment.name[props.locale];
+    }
+    return null;
+  };
+
+  const editAttachment = (evt) => {
+    evt.preventDefault();
+    ModalStore.dispatch({
+      type: "OPEN",
+      payload: <AttachmentEditor attachment={attachment}
+                                 locale={props.locale}
+                                 locales={props.locales}
+                                 onUpdate={props.onUpdate} />
+    });
+  };
+
+  const classes = ["attachment"];
+  if (props.placeholder) {
+    classes.push("placeholder");
+  }
+  if (record.uploading) {
+    classes.push("uploading");
+  }
+
+  const icon = uploading ? "cloud-upload" : "paperclip";
+
+  return (
+    <div className={classes.join(" ")}
+         {...listeners}>
+      <input name={`${attributeName}[id]`}
+             type="hidden" value={record.id || ""} />
+      <input name={`${attributeName}[attachment_id]`}
+             type="hidden" value={(attachment && attachment.id) || ""} />
+      <input name={`${attributeName}[position]`}
+             type="hidden" value={props.position} />
+      {!uploading &&
+       <div className="actions">
+         <button onClick={editAttachment}>
+           Edit
+         </button>
+         {props.showEmbed && (
+           <button onClick={copyEmbed}>
+             Embed
+           </button>
+         )}
+         {props.deleteRecord && (
+           <button onClick={deleteRecord}>
+             Remove
+           </button>
+         )}
+       </div>
+      }
+    {attachment &&
+     <div className="attachment-info">
+       <h3>
+         <i className={`fa fa-${icon} icon`} />
+         {name() || <em>Untitled</em>}<br />
+       </h3>
+       {!uploading &&
+        <a href={attachment.url}
+           rel="noreferrer"
+           target="_blank">{attachment.filename}</a>}
+       {!uploading && description() && <p>{description()}</p>}
+     </div>}
+    </div>
+  );
+}
+
+Attachment.propTypes = {
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  draggable: PropTypes.object,
+  deleteRecord: PropTypes.func,
+  startDrag: PropTypes.func,
+  showEmbed: PropTypes.bool,
+  onUpdate: PropTypes.func,
+  attributeName: PropTypes.string,
+  placeholder: PropTypes.bool,
+  position: PropTypes.number,
+  ref: PropTypes.object
+};

data/app/javascript/components/Attachments/AttachmentEditor.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
+import ModalStore from "../ModalStore";
+import ToastStore from "../ToastStore";
+import { putJson } from "../../lib/request";
+
+export default function AttachmentEditor(props) {
+  const { attachment } = props;
+
+  const [locale, setLocale] = useState(props.locale);
+  const [localizations, setLocalizations] = useState({
+    name: attachment.name || {},
+    description: attachment.description || {},
+  });
+
+  const updateLocalization = (name) => (evt) => {
+    setLocalizations({
+      ...localizations,
+      [name]: { ...localizations[name],
+                [locale]: evt.target.value }
+    });
+  };
+
+  const copyEmbedCode = (evt) => {
+    evt.preventDefault();
+    copyToClipboard(`[attachment:${attachment.id}]`);
+    ToastStore.dispatch({
+      type: "NOTICE", message: "Embed code copied to clipboard"
+    });
+  };
+
+  const save = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    let data = { ...localizations };
+
+    putJson(`/admin/attachments/${attachment.id}`,
+            { attachment: data });
+
+    if (props.onUpdate) {
+      props.onUpdate(data);
+    }
+    ModalStore.dispatch({ type: "CLOSE" });
+  };
+
+  return (
+    <div className="attachment-editor">
+      <form>
+        {props.locales && Object.keys(props.locales).length > 1 && (
+          <div className="field">
+            <label>
+              Locale
+            </label>
+            <select name="locale"
+                    onChange={e => setLocale(e.target.value)}>
+              {Object.keys(props.locales).map(key => (
+                <option key={`locale-${key}`} value={key}>
+                  {props.locales[key]}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        <div className="field">
+          <label>Name</label>
+          <input type="text"
+                 className="name"
+                 value={localizations.name[locale] || ""}
+                 onChange={updateLocalization("name")} />
+        </div>
+        <div className="field">
+          <label>Description</label>
+          <textarea className="description"
+                    value={localizations.description[locale] || ""}
+                    onChange={updateLocalization("description")} />
+        </div>
+        <div className="field embed-code">
+          <label>
+            Embed code
+          </label>
+          <input type="text"
+                 value={`[attachment:${attachment.id}]`}
+                 disabled={true} />
+          {copySupported() && (
+            <button onClick={copyEmbedCode}>
+              Copy
+            </button>
+          )}
+        </div>
+        <div className="field">
+          <label>File</label>
+          <a href={attachment.url}
+             rel="noreferrer"
+             target="_blank">{attachment.filename}</a>
+        </div>
+        <div className="buttons">
+          <button onClick={save}>
+            Save
+          </button>
+          <button onClick={() => ModalStore.dispatch({ type: "CLOSE" })}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+AttachmentEditor.propTypes = {
+  attachment: PropTypes.object,
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  onUpdate: PropTypes.func
+};

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

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Placeholder() {
+  return (
+    <div className="attachment drop-placeholder"
+         key="file-placeholder">
+      Upload files here
+    </div>
+  );
+}

data/app/javascript/components/Attachments.jsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Attachment from "./Attachments/Attachment";
+import Placeholder from "./Attachments/Placeholder";
+import FileUploadButton from "./FileUploadButton";
+import { post } from "../lib/request";
+
+import { createDraggable,
+         draggedOrder,
+         useDragCollection,
+         useDragUploader } from "./drag";
+
+function filenameToName(str) {
+  return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
+}
+
+export default function Attachments(props) {
+  const collection = useDragCollection(props.records);
+  const locales = props.locales ? Object.keys(props.locales) : [props.locale];
+  const [deleted, setDeleted] = useState([]);
+
+  const uploadAttachment = (file) => {
+    let name = {};
+    locales.forEach((l) => name[l] = file.name);
+
+    const draggable = createDraggable(
+      { attachment: { filename: file.name, name: name },
+        uploading: true }
+    );
+
+    let data = new FormData();
+
+    data.append("attachment[file]", file);
+    locales.forEach((l) => {
+      data.append(`attachment[name][${l}]`, filenameToName(file.name));
+    });
+
+    post("/admin/attachments.json", data)
+      .then(json => {
+        collection.dispatch({
+          type: "update",
+          payload: { ...draggable,
+                     record: { attachment: json, uploading: false } }
+        });
+      });
+
+    return draggable;
+  };
+
+  const receiveFiles = (files) => {
+    collection.dispatch({
+      type: "append",
+      payload: files.map(f => uploadAttachment(f))
+    });
+  };
+
+  const dragEnd = (dragState, files) => {
+    collection.dispatch({
+      type: "reorder",
+      payload: draggedOrder(collection, dragState)
+    });
+    collection.dispatch({
+      type: "insertFiles",
+      payload: files.map(f => uploadAttachment(f))
+    });
+  };
+
+  const [dragState,
+         dragStart,
+         listeners] = useDragUploader([collection], dragEnd);
+
+  const position = (record) => {
+    return [...collection.draggables.map(d => d.record),
+            ...deleted].indexOf(record) + 1;
+  };
+
+  const attrName = (record) => {
+    return `${props.attribute}[${position(record)}]`;
+  };
+
+  const update = (draggable) => (attachment) => {
+    const { record } = draggable;
+    const updated = {
+      ...draggable,
+      record: {
+        ...record,
+        attachment: { ...record.attachment, ...attachment }
+      }
+    };
+    collection.dispatch({ type: "update", payload: updated });
+  };
+
+  const remove = (draggable) => () => {
+    collection.dispatch({ type: "remove", payload: draggable });
+    if (draggable.record.id) {
+      setDeleted([...deleted, draggable.record]);
+    }
+  };
+
+  const attachment = (draggable) => {
+    const { dragging } = dragState;
+
+    if (draggable === "Files") {
+      return (<Placeholder key="placeholder" />);
+    }
+
+    return (
+      <Attachment key={draggable.handle}
+                  draggable={draggable}
+                  locale={props.locale}
+                  locales={props.locales}
+                  showEmbed={props.showEmbed}
+                  startDrag={dragStart}
+                  position={position(draggable.record)}
+                  onUpdate={update(draggable)}
+                  deleteRecord={remove(draggable)}
+                  attributeName={attrName(draggable.record)}
+                  placeholder={dragging && dragging == draggable} />
+    );
+  };
+
+  const dragOrder = draggedOrder(collection, dragState);
+
+  const classes = ["attachments"];
+  if (dragState.dragging) {
+    classes.push("dragover");
+  }
+
+  return (
+    <div className={classes.join(" ")}
+         ref={collection.ref}
+         {...listeners}>
+      <div className="files">
+        {dragOrder.map(d => attachment(d))}
+      </div>
+      <div className="deleted">
+        {deleted.map(r =>
+          <span className="deleted-attachment" key={r.id}>
+            <input name={`${attrName(r)}[id]`}
+                   type="hidden"
+                   value={r.id} />
+            <input name={`${attrName(r)}[attachment_id]`}
+                   type="hidden"
+                   value={(r.attachment && r.attachment.id) || ""} />
+            <input name={`${attrName(r)}[_destroy]`}
+                   type="hidden"
+                   value={true} />
+          </span>)}
+      </div>
+      <div className="drop-target">
+        <FileUploadButton multiple={true}
+                          multiline={true}
+                          callback={receiveFiles} />
+      </div>
+    </div>
+  );
+}
+
+Attachments.propTypes = {
+  attribute: PropTypes.string,
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  records: PropTypes.array,
+  showEmbed: PropTypes.bool
+};

data/app/{assets/javascripts/pages/admin/components/date_range_select.jsx → javascript/components/DateRangeSelect.jsx}

@@ -1,4 +1,7 @@
-class DateRangeSelect extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class DateRangeSelect extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -37,16 +40,16 @@ class DateRangeSelect extends React.Component {
 
   modifyDate(original, options = {}) {
     var newDate = new Date(original);
-    if (options.hasOwnProperty("year")) {
+    if (Object.prototype.hasOwnProperty.call(options, "year")) {
       newDate.setFullYear(options.year);
     }
-    if (options.hasOwnProperty("month")) {
+    if (Object.prototype.hasOwnProperty.call(options, "month")) {
       newDate.setMonth(options.month);
     }
-    if (options.hasOwnProperty("date")) {
+    if (Object.prototype.hasOwnProperty.call(options, "date")) {
       newDate.setDate(options.date);
     }
-    if (options.hasOwnProperty("time") &&
+    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);
@@ -172,3 +175,11 @@ class DateRangeSelect extends React.Component {
     return Array.apply(null, Array(31)).map((_, i) => i + 1);
   }
 }
+
+DateRangeSelect.propTypes = {
+  startsAt: PropTypes.string,
+  endsAt: PropTypes.string,
+  disabled: PropTypes.bool,
+  disableTime: PropTypes.bool,
+  objectName: PropTypes.string
+};

data/app/javascript/components/EditableImage.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import ImageEditor from "./ImageEditor";
+import ModalStore from "./ModalStore";
+
+export default function EditableImage(props) {
+  const [image, setImage] = useState(props.image);
+  const [src, setSrc] = useState(props.src);
+
+  const height = () => {
+    const width = image.crop_width || image.real_width;
+    const height = image.crop_height || image.real_height;
+    return Math.round((height / width) * props.width);
+  };
+
+  const updateImage = (updatedImage, src) => {
+    let newImage = { ...image, ...updatedImage };
+    setSrc(src);
+    setImage(newImage);
+    if (props.onUpdate) {
+      props.onUpdate(newImage, src);
+    }
+  };
+
+  const handleClick = (evt) => {
+    evt.preventDefault();
+    ModalStore.dispatch({
+      type: "OPEN",
+      payload: <ImageEditor image={image}
+                            caption={props.caption}
+                            locale={props.locale}
+                            locales={props.locales}
+                            onUpdate={updateImage} />
+    });
+  };
+
+  const altWarning = !image.alternative[props.locale];
+
+  return (
+    <div className="editable-image">
+      {altWarning &&
+       <span className="alt-warning" title="Alternative text is missing">
+         <i className="fa fa-exclamation-triangle icon" />
+       </span>}
+      <img src={src}
+           width={props.width}
+           height={height()}
+           onClick={handleClick} />
+    </div>
+  );
+}
+
+EditableImage.propTypes = {
+  image: PropTypes.object,
+  src: PropTypes.string,
+  caption: PropTypes.bool,
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  width: PropTypes.number,
+  onUpdate: PropTypes.func
+};

data/app/{assets/javascripts/pages/admin/components/file_upload_button.jsx → javascript/components/FileUploadButton.jsx}

@@ -1,4 +1,7 @@
-class FileUploadButton extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class FileUploadButton extends React.Component {
   constructor(props) {
     super(props);
     this.inputRef = React.createRef();
@@ -42,3 +45,10 @@ class FileUploadButton extends React.Component {
     this.inputRef.current.click();
   }
 }
+
+FileUploadButton.propTypes = {
+  callback: PropTypes.func,
+  type: PropTypes.string,
+  multiple: PropTypes.bool,
+  multiline: PropTypes.bool
+};

data/app/{assets/javascripts/pages/admin/components/focal_point.jsx → javascript/components/ImageCropper/FocalPoint.jsx}

@@ -1,4 +1,7 @@
-class FocalPoint extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class FocalPoint extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -80,3 +83,11 @@ class FocalPoint extends React.Component {
     );
   }
 }
+
+FocalPoint.propTypes = {
+  x: PropTypes.number,
+  y: PropTypes.number,
+  onChange: PropTypes.func,
+  width: PropTypes.number,
+  height: PropTypes.number
+};

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

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ReactCrop from "react-image-crop";
+
+import { cropSize } from "./useCrop";
+import FocalPoint from "./FocalPoint";
+
+export default function Image(props) {
+  const imageSize = () => {
+    const { image, cropping, crop_width, crop_height } = props.cropState;
+    if (cropping) {
+      return { width: image.real_width, height: image.real_height };
+    } else {
+      return { width: crop_width, height: crop_height };
+    }
+  };
+
+  const maxWidth = props.containerSize.width;
+  const maxHeight = props.containerSize.height;
+  const aspect = imageSize().width / imageSize().height;
+
+  var width = maxWidth;
+  var height = maxWidth / aspect;
+
+  if (height > maxHeight) {
+    height = maxHeight;
+    width = maxHeight * aspect;
+  }
+
+  const style = { width: `${width}px`, height: `${height}px` };
+
+  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} />
+      </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} />
+        )}
+        <img src={props.croppedImage} />
+      </div>
+    );
+  }
+
+}
+
+Image.propTypes = {
+  containerSize: PropTypes.object,
+  croppedImage: PropTypes.string,
+  cropState: PropTypes.object,
+  focalPoint: PropTypes.object,
+  setCrop: PropTypes.func,
+  setFocal: PropTypes.func
+};

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

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function Toolbar(props) {
+  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]
+  ];
+
+  const updateAspect = (ratio) => (evt) => {
+    evt.preventDefault();
+    props.setAspect(ratio);
+  };
+
+  const width = Math.ceil(props.cropState.crop_width);
+  const height = Math.ceil(props.cropState.crop_height);
+  const format = props.image.content_type.split("/")[1].toUpperCase();
+
+  return (
+    <div className="toolbars">
+      <div className="toolbar">
+        <div className="info">
+          <span className="format">
+            {width}x{height} {format}
+          </span>
+        </div>
+        <button title="Crop image"
+                onClick={props.toggleCrop}
+                className={cropping ? "active" : ""}>
+          <i className="fa fa-crop" />
+        </button>
+        <button disabled={cropping}
+                title="Toggle focal point"
+                onClick={props.toggleFocal}>
+          <i className="fa 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()}>
+          <i className="fa fa-download" />
+        </a>
+      </div>
+      {cropping && (
+        <div className="aspect-ratios toolbar">
+          <div className="label">
+            Lock aspect ratio:
+          </div>
+          {aspectRatios.map(ratio => (
+            <button key={"ratio-" + ratio[1]}
+                    className={(ratio[1] == props.cropState.aspect) ? "active" : ""}
+                    onClick={updateAspect(ratio[1])}>
+              {ratio[0]}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+Toolbar.propTypes = {
+  cropState: PropTypes.object,
+  image: PropTypes.object,
+  setAspect: PropTypes.func,
+  toggleCrop: PropTypes.func,
+  toggleFocal: PropTypes.func
+};