pages_core 3.7.0 → 3.8.0

data/app/assets/javascripts/pages/admin/components/attachments.jsx

@@ -1,211 +0,0 @@
-class Attachments extends DragUploader {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...this.state,
-      records: props.records.map(
-        r => ({ ...r, ref: React.createRef(), handle: this.getHandle() })),
-      deleted: []
-    };
-
-    this.container = React.createRef();
-
-    this.deleteRecord = this.deleteRecord.bind(this);
-    this.receiveFiles = this.receiveFiles.bind(this);
-  }
-
-  attributeName(record) {
-    return `${this.props.attribute}[${this.index(record) + 1}]`;
-  }
-
-  deleteRecord(record) {
-    let { records, deleted } = this.state;
-    records = records.filter(i => i != record);
-    if (record.id) {
-      deleted = [...deleted, record];
-    }
-    this.setState({ records: records, deleted: deleted });
-  }
-
-  draggables() {
-    return this.state.records;
-  }
-
-  getDraggedOrder() {
-    let dragging = this.state.dragging;
-    var records = this.state.records;
-    if (dragging) {
-      if (this.hovering(this.container)) {
-        records = [];
-        this.state.records.filter(r => r !== dragging).forEach(r => {
-          if (this.hovering(r) && records.indexOf(dragging) === -1) {
-            records.push(dragging);
-          }
-          records.push(r);
-        });
-        if (records.indexOf(dragging) === -1) {
-          records.push(dragging);
-        }
-      } else {
-        records = this.state.records.filter(r => r !== dragging);
-        if (this.state.y < this.container.current.getBoundingClientRect().top) {
-          records = [dragging, ...records];
-        } else {
-          records.push(dragging);
-        }
-      }
-    }
-    return records;
-  }
-
-  index(record) {
-    let { records, deleted } = this.state;
-    let ordered = [...records, ...deleted];
-    return ordered.indexOf(record);
-  }
-
-  injectUploads(files, records) {
-    let queue = files.slice();
-    let source = records;
-
-    if (source.indexOf("Files") === -1) {
-      return [...source, ...queue];
-    } else {
-      records = [];
-      source.forEach(function (record) {
-        if (record === "Files") {
-          records = [...records, ...queue];
-        } else {
-          records.push(record);
-        }
-      });
-    }
-
-    return records;
-  }
-
-  receiveFiles(files, newState) {
-    this.setState({
-      ...newState,
-      records: this.injectUploads(files.map(f => this.uploadAttachment(f)),
-                                  this.getDraggedOrder())
-    });
-  }
-
-  render() {
-    let { dragging, deleted } = this.state;
-    let records = this.getDraggedOrder();
-    let classes = ["attachments"];
-    if (dragging) {
-      classes.push("dragover");
-    }
-    return (
-      <div className={classes.join(" ")}
-           ref={this.container}
-           onDragOver={this.drag}
-           onDrop={this.dragEnd}>
-        <div className="files">
-          {records.map(r => this.renderAttachment(r))}
-        </div>
-        <div className="deleted">
-          {deleted.map(r => this.renderDeletedRecord(r))}
-        </div>
-        <div className="drop-target">
-          <FileUploadButton multiple={true}
-                            multiline={true}
-                            callback={this.receiveFiles} />
-        </div>
-      </div>
-    );
-  }
-
-  renderAttachment(record) {
-    let dragging = this.state.dragging;
-
-    if (record === "Files") {
-      return (
-        <div className="attachment drop-placeholder"
-             key="file-placeholder">
-          Upload files here
-        </div>
-      );
-    }
-
-    let onUpdate = (attachment) => {
-      this.updateAttachment(record, attachment);
-    };
-
-    return (
-      <Attachment key={record.handle}
-                  record={record}
-                  locale={this.props.locale}
-                  locales={this.props.locales}
-                  csrf_token={this.props.csrf_token}
-                  showEmbed={this.props.showEmbed}
-                  startDrag={this.startDrag}
-                  position={this.index(record) + 1}
-                  onUpdate={onUpdate}
-                  deleteRecord={this.deleteRecord}
-                  attributeName={this.attributeName(record)}
-                  placeholder={dragging && dragging == record} />
-    );
-  }
-
-  renderDeletedRecord(record) {
-    let attachment = record.attachment;
-    let attrName = this.attributeName(record);
-    return (
-      <span className="deleted-attachment" key={`deleted-${record.id}`}>
-        <input name={`${attrName}[id]`}
-               type="hidden" value={record.id} />
-        <input name={`${attrName}[attachment_id]`}
-               type="hidden" value={(attachment && attachment.id) || ""} />
-        <input name={`${attrName}[_destroy]`}
-               type="hidden" value={true} />
-      </span>
-    );
-  }
-
-  updateAttachment(record, attachment) {
-    let records = this.state.records.slice();
-
-    records[records.indexOf(record)] = {
-      ...record,
-      attachment: { ...record.attachment, ...attachment }
-    };
-
-    this.setState({ records: records });
-  }
-
-  filenameToName(str) {
-    return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
-  }
-
-  uploadAttachment(file) {
-    let component = this;
-    let locale = this.props.locale;
-    let locales = this.props.locales ? Object.keys(this.props.locales) : [locale];
-
-    let name = {};
-    locales.forEach((l) => name[l] = file.name);
-
-    let obj = { attachment: { filename: file.name, name: name },
-                uploading: true,
-                ref: React.createRef(),
-                handle: this.getHandle() };
-    let data = new FormData();
-
-    data.append("attachment[file]", file);
-    locales.forEach((l) => {
-      data.append(`attachment[name][${l}]`, this.filenameToName(file.name));
-    });
-    this.postFile("/admin/attachments.json", data, function (json) {
-      obj.attachment = json;
-      obj.uploading = false;
-      component.setState({ });
-    });
-
-    return obj;
-  }
-}

data/app/assets/javascripts/pages/admin/components/drag_uploader.jsx

@@ -1,174 +0,0 @@
-class DragUploader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { dragging: false,
-                   x: null,
-                   y: null };
-
-    this.cachePositions = this.cachePositions.bind(this);
-    this.drag = this.drag.bind(this);
-    this.dragEnd = this.dragEnd.bind(this);
-    this.dragLeave = this.dragLeave.bind(this);
-    this.startDrag = this.startDrag.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener("mousemove", this.drag);
-    window.addEventListener("touchmove", this.drag);
-    window.addEventListener("mouseup", this.dragEnd);
-    window.addEventListener("touchend", this.dragEnd);
-    window.addEventListener("mouseout", this.dragLeave);
-    window.addEventListener("resize", this.cachePositions);
-    this.cachePositions();
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("mousemove", this.drag);
-    window.removeEventListener("touchmove", this.drag);
-    window.removeEventListener("mouseup", this.dragEnd);
-    window.removeEventListener("touchend", this.dragEnd);
-    window.removeEventListener("mouseout", this.dragLeave);
-    window.removeEventListener("resize", this.cachePositions);
-  }
-
-  draggables() {
-    // TODO: raise error
-    return [];
-  }
-
-  receiveFiles(files, newState) {
-    this.setState(newState);
-  }
-
-  cachePositions() {
-    this.cachedPositions = {};
-    this.draggables().forEach(d => {
-      if (d.handle && d.ref && d.ref.current) {
-        this.cachedPositions[d.handle] = d.ref.current.getBoundingClientRect();
-      }
-    });
-  }
-
-  containsFiles(evt) {
-    if (!evt.dataTransfer || !evt.dataTransfer.types) {
-      return false;
-    }
-    let types = evt.dataTransfer.types;
-    for (var i = 0; i < types.length; i++) {
-      if (types[i] === "Files" || types[i] === "application/x-moz-file") {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  drag(evt) {
-    if (this.state.dragging) {
-      let position = this.mousePosition(evt);
-      evt.stopPropagation();
-      evt.preventDefault();
-      this.setState({ x: position.x, y: position.y });
-    } else {
-      if (this.containsFiles(evt)) {
-        this.cachePositions();
-        this.setState({ dragging: "Files" });
-      }
-    }
-  }
-
-  dragEnd(evt) {
-    if (!this.state.dragging) {
-      return;
-    }
-    evt.preventDefault();
-    evt.stopPropagation();
-
-    var files = [];
-    if (this.state.dragging == "Files") {
-      files = this.getFiles(evt.dataTransfer);
-    }
-
-    this.receiveFiles(files, { dragging: false, x: null, y: null });
-    this.cachePositions();
-  }
-
-  dragLeave(evt) {
-    if (!this.state.dragging || this.state.dragging !== "Files") {
-      return;
-    }
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.setState({ dragging: false, x: null, y: null });
-  }
-
-  getFiles(dt) {
-    var files = [];
-    if (dt.items) {
-      for (var i = 0; i < dt.items.length; i++) {
-        if (dt.items[i].kind == "file") {
-          files.push(dt.items[i].getAsFile());
-        }
-      }
-    } else {
-      for (var i = 0; i < dt.files.length; i++) {
-        files.push(dt.files[i]);
-      }
-    }
-    return files.filter(f => (!this.validMimeTypes ||
-                              this.validMimeTypes.indexOf(f.type) !== -1));
-  }
-
-  getHandle() {
-    if (!this.handle) {
-      this.handle = 0;
-    }
-    this.handle += 1;
-    return this.handle;
-  }
-
-  hovering(target) {
-    let { x, y } = this.state;
-    var rect;
-    if (target.handle && this.cachedPositions[target.handle]) {
-      rect = this.cachedPositions[target.handle];
-    } else if (target.current) {
-      rect = target.current.getBoundingClientRect();
-    } else {
-      return false;
-    }
-    return (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom);
-  }
-
-  mousePosition(evt) {
-    var x, y;
-    if (evt.type == "touchmove") {
-      x = evt.touches[0].clientX;
-      y = evt.touches[0].clientY;
-    } else {
-      x = evt.clientX;
-      y = evt.clientY;
-    }
-    return { x: x, y: y };
-  }
-
-  postFile(url, data, callback) {
-    let xhr = new XMLHttpRequest();
-    xhr.open("POST", url);
-    xhr.setRequestHeader("X-CSRF-Token", this.props.csrf_token);
-    xhr.addEventListener("load", function () {
-      if (xhr.readyState == 4 && xhr.status == "200" && callback) {
-        callback(JSON.parse(xhr.responseText));
-      }
-    });
-    xhr.send(data);
-  }
-
-  startDrag(evt, record) {
-    let position = this.mousePosition(evt);
-    let prevDisplay = record.ref.current.style.display;
-    record.ref.current.style.display = "none";
-    this.cachePositions();
-    record.ref.current.style.display = prevDisplay;
-    this.setState({ dragging: record, x: position.x, y: position.y });
-  }
-}

data/app/assets/javascripts/pages/admin/components/editable_image.jsx

@@ -1,57 +0,0 @@
-class EditableImage extends React.Component {
-  constructor(props) {
-    let image = props.image;
-    super(props);
-    this.state = {
-      image:  image,
-      src:    props.src,
-      width:  image.crop_width || image.real_width,
-      height: image.crop_height || image.real_height
-    };
-    this.openEditor = this.openEditor.bind(this);
-    this.update = this.update.bind(this);
-  }
-
-  openEditor() {
-    ModalActions.open(
-      <ImageEditor image={this.state.image}
-                   caption={this.props.caption}
-                   locale={this.props.locale}
-                   locales={this.props.locales}
-                   csrf_token={this.props.csrf_token}
-                   onUpdate={this.update} />);
-  }
-
-  height() {
-    let image = this.state.image;
-    let width = image.crop_width || image.real_width;
-    let height = image.crop_height || image.real_height;
-    return Math.round((height / width) * this.props.width);
-  }
-
-  update(image, croppedImage) {
-    let newImage = { ...this.state.image, ...image };
-    this.setState({image: newImage,
-                   src: croppedImage});
-    if (this.props.onUpdate) {
-      this.props.onUpdate(newImage, croppedImage);
-    }
-  }
-
-  render() {
-    let altWarning = !this.state.image.alternative[this.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={this.state.src}
-             width={this.props.width}
-             height={this.height()}
-             onClick={this.openEditor} />
-      </div>
-    );
-  }
-}

data/app/assets/javascripts/pages/admin/components/grid_image.jsx

@@ -1,124 +0,0 @@
-class GridImage extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      src: (props.record.src || null)
-    };
-    this.copyEmbed = this.copyEmbed.bind(this);
-    this.deleteImage = this.deleteImage.bind(this);
-    this.dragStart = this.dragStart.bind(this);
-  }
-
-  componentDidMount() {
-    let file = this.props.record.file;
-    if (file) {
-      this.reader = new FileReader();
-      this.reader.onload = () => this.setState({src: this.reader.result });
-      this.reader.readAsDataURL(this.props.record.file);
-    }
-  }
-
-  copyEmbed(evt) {
-    let image = this.props.record.image;
-    evt.preventDefault();
-    const el = document.createElement("textarea");
-    el.value = `[image:${image.id}]`;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
-    ToastActions.notice("Embed code copied to clipboard");
-  }
-
-  deleteImage(evt) {
-    evt.preventDefault();
-    if (this.props.deleteImage) {
-      this.props.deleteImage(this.props.record);
-    }
-  }
-
-  dragStart(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    if (this.props.startDrag) {
-      this.props.startDrag(evt, this.props.record);
-    }
-  }
-
-  renderImage() {
-    let image = this.props.record.image;
-    return(
-      <EditableImage image={image}
-                     src={this.state.src || image.thumbnail_url}
-                     width={250}
-                     caption={true}
-                     locale={this.props.locale}
-                     locales={this.props.locales}
-                     csrf_token={this.props.csrf_token}
-                     onUpdate={this.props.onUpdate} />
-    );
-  }
-
-  renderPlaceholder() {
-    let src = this.state.src;
-    if (src) {
-      return (
-        <div className="temp-image">
-          <img src={src} />
-          <span>Uploading...</span>
-        </div>
-      );
-    } else {
-      return (
-        <div className="file-placeholder">
-          <span>Uploading...</span>
-        </div>
-      );
-    }
-  }
-
-  render() {
-    let attributeName = this.props.attributeName;
-    let record = this.props.record;
-    let image = record.image;
-    let classes = ["grid-image"];
-    if (this.props.placeholder) {
-      classes.push("placeholder");
-    }
-    if (this.props.record.file) {
-      classes.push("uploading");
-    }
-    return (
-      <div className={classes.join(" ")}
-           onDragStart={this.dragStart}
-           ref={this.props.record.ref}>
-        <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={this.props.position} />
-        {this.props.enablePrimary && (
-           <input name={`${attributeName}[primary]`}
-                  type="hidden" value={this.props.primary} />
-        )}
-        {!image && this.renderPlaceholder()}
-        {image && this.renderImage()}
-        {image && (
-           <div className="actions">
-             {this.props.showEmbed && (
-                <button onClick={this.copyEmbed}>
-                  Embed
-                </button>
-             )}
-             {this.props.deleteImage && (
-                <button onClick={this.deleteImage}>
-                  Remove
-                </button>
-             )}
-           </div>
-        )}
-      </div>
-    );
-  }
-}