pages_core 3.7.0 → 3.8.0

data/app/javascript/components/ImageGrid.jsx

@@ -0,0 +1,257 @@
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import FileUploadButton from "./FileUploadButton";
+import DragElement from "./ImageGrid/DragElement";
+import FilePlaceholder from "./ImageGrid/FilePlaceholder";
+import GridImage from "./ImageGrid/GridImage";
+import ToastStore from "./ToastStore";
+import { post } from "../lib/request";
+
+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));
+}
+
+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) {
+      images = [dragState.dragging, ...images];
+    } else {
+      images.push(dragState.dragging);
+    }
+  }
+
+  return [primary, images];
+}
+
+function initRecords(props) {
+  const primary = props.enablePrimary ?
+        props.records.filter(r => r.primary).slice(0, 1) :
+        [];
+
+  return [primary, props.records.filter(r => primary.indexOf(r) === -1)];
+}
+
+export default function ImageGrid(props) {
+  const [initPrimary, initImages] = initRecords(props);
+  const primary = useDragCollection(initPrimary);
+  const images = useDragCollection(initImages);
+  const [deleted, setDeleted] = useState([]);
+
+  const containerRef = useRef();
+
+  const dispatchAll = (action) => {
+    primary.dispatch(action);
+    images.dispatch(action);
+  };
+
+  const dragEnd = (dragState, files) => {
+    const [draggedPrimary,
+           draggedImages] = draggedImageOrder(primary, images, dragState);
+
+    primary.dispatch({
+      type: "reorder",
+      payload: draggedPrimary ? [draggedPrimary] : []
+    });
+    images.dispatch({ type: "reorder", payload: draggedImages });
+
+    if (files) {
+      const uploads = filterFiles(files).map(f => uploadImage(f));
+      dispatchAll({ type: "insertFiles", payload: uploads });
+    }
+  };
+
+  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;
+  };
+
+  const attrName = (record) => {
+    return `${props.attribute}[${position(record)}]`;
+  };
+
+  const uploadImage = (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") {
+          ToastStore.dispatch({
+            type: "ERROR", message: "Error uploading image: " + json.error
+          });
+          dispatchAll({ type: "remove", payload: draggable });
+        } else {
+          dispatchAll({
+            type: "update",
+            payload: { ...draggable, record: { image: json } }
+          });
+        }
+      });
+
+    return draggable;
+  };
+
+  const update = (draggable) => (image) => {
+    const { record } = draggable;
+    const updated = {
+      ...draggable,
+      record: {
+        ...record,
+        image: { ...record.image, ...image }
+      }
+    };
+    dispatchAll({ type: "update", payload: updated });
+  };
+
+  const remove = (draggable) => () => {
+    dispatchAll({ type: "remove", payload: draggable });
+    if (draggable.record.id) {
+      setDeleted([...deleted, draggable.record]);
+    }
+  };
+
+  const renderImage = (draggable, isPrimary) => {
+    const { dragging } = dragState;
+
+    if (draggable === "Files") {
+      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} />
+    );
+  };
+
+  const uploadPrimary = (files) => {
+    const [first, ...rest] = filterFiles(files).map(f => uploadImage(f));
+    if (first) {
+      images.dispatch({
+        type: "prepend",
+        payload: [...primary.draggables, ...rest]
+      });
+      primary.dispatch({ type: "replace", payload: [first] });
+    }
+  };
+
+  const uploadAdditional = (files) => {
+    images.dispatch({
+      type: "append",
+      payload: filterFiles(files).map(f => uploadImage(f))
+    });
+  };
+
+  let classNames = ["image-grid"];
+  if (props.enablePrimary) {
+    classNames.push("with-primary-image");
+  }
+
+  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} />}
+      {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) || ""} />
+             )}
+           </>}
+          {!draggedPrimary && (
+            <div className="drop-target">
+              <FileUploadButton multiple={true}
+                                type="image"
+                                multiline={true}
+                                callback={uploadPrimary} />
+            </div>)}
+        </div>
+      )}
+      <div className="grid" ref={images.ref}>
+        <h3>
+          {props.enablePrimary ? "More images" : "Images"}
+        </h3>
+        <div className="drop-target">
+          <FileUploadButton multiple={true}
+                            type="image"
+                            callback={uploadAdditional} />
+        </div>
+        <div className="images">
+          {draggedImages.map(r => renderImage(r, false))}
+        </div>
+      </div>
+      <div className="deleted">
+        {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>)}
+      </div>
+    </div>
+  );
+}
+
+ImageGrid.propTypes = {
+  attribute: PropTypes.string,
+  locale: PropTypes.string,
+  locales: PropTypes.array,
+  records: PropTypes.array,
+  enablePrimary: PropTypes.bool,
+  primaryAttribute: PropTypes.string,
+  showEmbed: PropTypes.bool
+};

data/app/javascript/components/ImageUploader.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import EditableImage from "./EditableImage";
+import FileUploadButton from "./FileUploadButton";
+import ToastStore from "./ToastStore";
+import { post } from "../lib/request";
+
+function getFiles(dt) {
+  var files = [];
+  if (dt.items) {
+    for (let i = 0; i < dt.items.length; i++) {
+      if (dt.items[i].kind == "file") {
+        files.push(dt.items[i].getAsFile());
+      }
+    }
+  } else {
+    for (let i = 0; i < dt.files.length; i++) {
+      files.push(dt.files[i]);
+    }
+  }
+  return files;
+}
+
+export default function ImageUploader(props) {
+  const [uploading, setUploading] = useState(false);
+  const [dragover, setDragover] = useState(false);
+  const [image, setImage] = useState(props.image);
+  const [src, setSrc] = useState(props.src);
+
+  const handleDragOver = (evt) => {
+    evt.preventDefault();
+    setDragover(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragover(false);
+  };
+
+  const handleDragEnd = (evt) => {
+    if (evt.dataTransfer.items) {
+      for (var i = 0; i < evt.dataTransfer.items.length; i++) {
+        evt.dataTransfer.items.remove(i);
+      }
+    } else {
+      evt.dataTransfer.clearData();
+    }
+    setDragover(false);
+  };
+
+  const handleDrop = (evt) => {
+    let files = getFiles(evt.dataTransfer);
+    evt.preventDefault();
+    if (files.length > 0) {
+      uploadImage(files[0]);
+    }
+  };
+
+  const handleRemove = (evt) => {
+    evt.preventDefault();
+    setImage(null);
+    setSrc(null);
+  };
+
+  const receiveFiles = (files) => {
+    if (files.length > 0) {
+      uploadImage(files[0]);
+    }
+  };
+
+  const uploadImage = (file) => {
+    let 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");
+      return;
+    }
+
+    let locale = props.locale;
+    let locales = props.locales ? Object.keys(props.locales) : [locale];
+
+    let data = new FormData();
+
+    setImage(null);
+    setSrc(null);
+    setDragover(false);
+    setUploading(true);
+
+    data.append("image[file]", file);
+    locales.forEach((l) => {
+      data.append(`image[alternative][${l}]`, (props.alternative || ""));
+    });
+
+    post("/admin/images.json", data)
+      .then(response => {
+        setUploading(false);
+        if (response.status === "error") {
+          ToastStore.dispatch({
+            type: "ERROR",
+            message: "Error uploading image: " + response.error
+          });
+        } else {
+          setSrc(response.thumbnail_url);
+          setImage(response);
+        }
+      });
+  };
+
+  let classes = ["image-uploader"];
+  if (uploading) {
+    classes.push("uploading");
+  } else if (dragover) {
+    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="ui-wrapper">
+        {uploading && (
+          <div className="ui">
+            Uploading image...
+          </div>
+        )}
+        {!uploading && (
+          <div className="ui">
+            <FileUploadButton type="image"
+                              multiline={true}
+                              callback={receiveFiles} />
+            {image && (
+              <a className="delete remove-image"
+                 href="#"
+                 onClick={handleRemove}>
+                Remove image
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ImageUploader.propTypes = {
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  image: PropTypes.object,
+  src: PropTypes.string,
+  width: PropTypes.number,
+  caption: PropTypes.bool,
+  attr: PropTypes.string,
+  alternative: PropTypes.string
+};

data/app/{assets/javascripts/pages/admin/components/modal.jsx → javascript/components/Modal.jsx}

@@ -1,23 +1,34 @@
-class Modal extends Reflux.Component {
+import React from "react";
+import ModalStore from "./ModalStore";
+
+export default class Modal extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { component: null };
     this.store = ModalStore;
     this.closeModal = this.closeModal.bind(this);
+    this.handleChange = this.handleChange.bind(this);
     this.handleKeypress = this.handleKeypress.bind(this);
   }
 
   componentDidMount() {
+    this.unsubscribe = this.store.subscribe(this.handleChange);
     window.addEventListener("keypress", this.handleKeypress);
   }
 
   componentWillUnmount() {
+    this.unsubscribe();
     window.removeEventListener("keypress", this.handleKeypress);
   }
 
   closeModal(evt) {
     evt.stopPropagation();
     evt.preventDefault();
-    ModalActions.close();
+    ModalStore.dispatch({ type: "CLOSE" });
+  }
+
+  handleChange() {
+    this.setState({ ...this.store.getState() });
   }
 
   handleKeypress(evt) {

data/app/javascript/components/ModalStore.jsx

@@ -0,0 +1,12 @@
+import { createStore } from "redux";
+
+export default createStore((state = {}, action) => {
+  switch(action.type) {
+  case "OPEN":
+    return {...state, component: action.payload };
+  case "CLOSE":
+    return {...state, component: null };
+  default:
+    return state;
+  }
+});

data/app/{assets/javascripts/pages/admin/components/page_dates.jsx → javascript/components/PageDates.jsx}

@@ -1,4 +1,8 @@
-class PageDates extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+import DateRangeSelect from "./DateRangeSelect";
+
+export default class PageDates extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -56,3 +60,9 @@ class PageDates extends React.Component {
     );
   }
 }
+
+PageDates.propTypes = {
+  starts_at: PropTypes.string,
+  ends_at: PropTypes.string,
+  all_day: PropTypes.bool
+};

data/app/{assets/javascripts/pages/admin/components/page_files.jsx → javascript/components/PageFiles.jsx}

@@ -1,4 +1,8 @@
-class PageFiles extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+import Attachments from "./Attachments";
+
+export default class PageFiles extends React.Component {
   render() {
     return (
       <div className="page-files">
@@ -6,9 +10,14 @@ class PageFiles extends React.Component {
                      showEmbed={true}
                      locale={this.props.locale}
                      locales={this.props.locales}
-                     csrf_token={this.props.csrf_token}
                      records={this.props.records} />
       </div>
     );
   }
 }
+
+PageFiles.propTypes = {
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  records: PropTypes.array
+};

data/app/{assets/javascripts/pages/admin/components/page_images.jsx → javascript/components/PageImages.jsx}

@@ -1,4 +1,8 @@
-class PageImages extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+import ImageGrid from "./ImageGrid";
+
+export default class PageImages extends React.Component {
   render() {
     return (
       <div className="page-images">
@@ -8,9 +12,14 @@ class PageImages extends React.Component {
                    showEmbed={true}
                    locale={this.props.locale}
                    locales={this.props.locales}
-                   csrf_token={this.props.csrf_token}
                    records={this.props.records} />
       </div>
     );
   }
 }
+
+PageImages.propTypes = {
+  locale: PropTypes.string,
+  locales: PropTypes.object,
+  records: PropTypes.array
+};