pages_core 3.7.0 → 3.8.3

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

@@ -1,130 +0,0 @@
-class Attachment extends React.Component {
-  constructor(props) {
-    super(props);
-    this.copyEmbed = this.copyEmbed.bind(this);
-    this.editAttachment = this.editAttachment.bind(this);
-    this.deleteRecord = this.deleteRecord.bind(this);
-    this.dragStart = this.dragStart.bind(this);
-  }
-
-  copyEmbed(evt) {
-    let attachment = this.props.record.attachment;
-    evt.preventDefault();
-    const el = document.createElement("textarea");
-    el.value = `[attachment:${attachment.id}]`;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
-    ToastActions.notice("Embed code copied to clipboard");
-  }
-
-  deleteRecord(evt) {
-    evt.preventDefault();
-    if (this.props.deleteRecord) {
-      this.props.deleteRecord(this.props.record);
-    }
-  }
-
-  dragStart(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    if (this.props.startDrag) {
-      this.props.startDrag(evt, this.props.record);
-    }
-  }
-
-  description() {
-    let attachment = this.props.record.attachment;
-    if (attachment.description && attachment.description[this.props.locale]) {
-      return attachment.description[this.props.locale];
-    }
-    return null;
-  }
-
-  name() {
-    let attachment = this.props.record.attachment;
-    if (attachment.name && attachment.name[this.props.locale]) {
-      return attachment.name[this.props.locale];
-    }
-    return null;
-  }
-
-  editAttachment(evt) {
-    evt.preventDefault();
-    ModalActions.open(
-      <AttachmentEditor attachment={this.props.record.attachment}
-                        locale={this.props.locale}
-                        locales={this.props.locales}
-                        csrf_token={this.props.csrf_token}
-                        onUpdate={this.props.onUpdate} />
-    );
-  }
-
-  renderAttachment() {
-    let { attachment, uploading } = this.props.record;
-
-    let icon = uploading ? "cloud-upload" : "paperclip";
-
-    return(
-      <div className="attachment-info">
-        <h3>
-          <i className={`fa fa-${icon} icon`} />
-          {this.name() || <em>Untitled</em>}<br />
-        </h3>
-        {!uploading &&
-         <a href={attachment.url}
-            target="_blank">{attachment.filename}</a>}
-        {!uploading && this.description() && <p>{this.description()}</p>}
-      </div>
-    );
-  }
-
-  render() {
-    let { attributeName, record } = this.props;
-    let uploading = record.uploading;
-    let attachment = record.attachment;
-    let classes = ["attachment"];
-    if (this.props.placeholder) {
-      classes.push("placeholder");
-    }
-    if (this.props.record.uploading) {
-      classes.push("uploading");
-    }
-    return (
-      <div className={classes.join(" ")}
-           onDragStart={this.dragStart}
-           ref={this.props.record.ref}
-           draggable>
-        <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={this.props.position} />
-        {this.props.enablePrimary && (
-           <input name={`${attributeName}[primary]`}
-                  type="hidden" value={this.props.primary} />
-        )}
-        {!uploading &&
-         <div className="actions">
-           <button onClick={this.editAttachment}>
-             Edit
-           </button>
-           {this.props.showEmbed && (
-             <button onClick={this.copyEmbed}>
-               Embed
-             </button>
-           )}
-           {this.props.deleteRecord && (
-             <button onClick={this.deleteRecord}>
-               Remove
-             </button>
-           )}
-         </div>
-        }
-        {attachment && this.renderAttachment()}
-      </div>
-    );
-  }
-}

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

@@ -1,131 +0,0 @@
-class AttachmentEditor extends React.Component {
-  constructor(props) {
-    let attachment = props.attachment;
-
-    super(props);
-
-    this.state = {
-      locale:      this.props.locale,
-      name:        attachment.name || {},
-      description: attachment.description || {}
-    };
-
-    this.copyEmbedCode = this.copyEmbedCode.bind(this);
-    this.save = this.save.bind(this);
-  }
-
-  copyEmbedCode(evt) {
-    evt.preventDefault();
-    const el = document.createElement("textarea");
-    el.value = `[attachment:${this.props.attachment.id}]`;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
-    ToastActions.notice("Embed code copied to clipboard");
-  }
-
-  copySupported() {
-    return document.queryCommandSupported &&
-      document.queryCommandSupported("copy");
-  }
-
-  render() {
-    let { locale, name, description } = this.state;
-    let locales = this.props.locales;
-    let attachment = this.props.attachment;
-    return (
-      <div className="attachment-editor">
-        <form>
-          {locales && Object.keys(locales).length > 1 && (
-            <div className="field">
-              <label>
-                Locale
-              </label>
-              <select name="locale"
-                      onChange={e => this.setState({locale: e.target.value})}>
-                {Object.keys(locales).map(key => (
-                  <option key={`locale-${key}`} value={key}>
-                    {locales[key]}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-          <div className="field">
-            <label>Name</label>
-            <input type="text"
-                   className="name"
-                   value={name[locale] || ""}
-                   onChange={e => this.updateLocalized("name",
-                                                       e.target.value)} />
-          </div>
-          <div className="field">
-            <label>Description</label>
-            <textarea className="description"
-                      value={description[locale] || ""}
-                      onChange={e => this.updateLocalized("description",
-                                                          e.target.value)} />
-          </div>
-          <div className="field embed-code">
-            <label>
-              Embed code
-            </label>
-            <input type="text"
-                   value={`[attachment:${attachment.id}]`}
-                   disabled={true} />
-            {this.copySupported() && (
-              <button onClick={this.copyEmbedCode}>
-                Copy
-              </button>
-            )}
-          </div>
-          <div className="field">
-            <label>File</label>
-            <a href={attachment.url}
-               target="_blank">{attachment.filename}</a>
-          </div>
-          <div className="buttons">
-            <button onClick={this.save}>
-              Save
-            </button>
-            <button onClick={() => ModalActions.close()}>
-              Cancel
-            </button>
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  save(evt) {
-    evt.preventDefault();
-    evt.stopPropagation();
-
-    let data = { name: this.state.name,
-                 description: this.state.description };
-
-    var xhr = new XMLHttpRequest();
-    xhr.open("PUT", `/admin/attachments/${this.props.attachment.id}`, true);
-    xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
-    xhr.setRequestHeader("X-CSRF-Token", this.props.csrf_token);
-    xhr.onload = function () {
-      if (xhr.readyState == 4 && xhr.status == "200") {
-	// Success
-      }
-    };
-    xhr.send(JSON.stringify({attachment: data}));
-
-    if (this.props.onUpdate) {
-      this.props.onUpdate(data);
-    }
-    ModalActions.close();
-  }
-
-  updateLocalized(name, value) {
-    let locale = this.state.locale;
-    this.setState({
-      [name]: { ...this.state[name], [locale]: value }
-    });
-  }
-}

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>
-    );
-  }
-}