pages_core 3.6.0 → 3.8.0

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

@@ -1,301 +0,0 @@
-class ImageGrid extends DragUploader {
-  constructor(props) {
-    super(props);
-
-    this.validMimeTypes = ["image/gif",
-                           "image/jpeg",
-                           "image/pjpeg",
-                           "image/png",
-                           "image/tiff"];
-
-    let records = props.records.map(
-      r => ({ ...r, ref: React.createRef(), handle: this.getHandle() })
-    );
-
-    this.state = { ...this.state,
-                   primary: null,
-                   images: records,
-                   deleted: [] };
-
-    if (props.enablePrimary) {
-      this.state = { ...this.state,
-                     primary: records.filter(r => r.primary)[0] || null,
-                     images: records.filter(r => !r.primary) };
-    }
-
-    this.container = React.createRef();
-    this.imagesContainer = React.createRef();
-    this.primaryContainer = React.createRef();
-
-    this.deleteImage = this.deleteImage.bind(this);
-    this.uploadAdditional = this.uploadAdditional.bind(this);
-    this.uploadPrimary = this.uploadPrimary.bind(this);
-  }
-
-  attributeName(record) {
-    return `${this.props.attribute}[${this.index(record) + 1}]`;
-  }
-
-  draggables() {
-    return this.state.images;
-  }
-
-  deleteImage(record) {
-    let { primary, images, deleted } = this.state;
-    if (record == this.state.primary) {
-      primary = null;
-    } else {
-      images = images.filter(i => i != record);
-    }
-    if (record.id) {
-      deleted = [...deleted, record];
-    }
-    this.setState({ primary: primary, images: images, deleted: deleted });
-  }
-
-  injectUploads(files, primary, images) {
-    let queue = files.slice();
-    if (primary === "Files") {
-      primary = queue.shift();
-      images = [...queue, ...images];
-    } else {
-      let source = images;
-      images = [];
-      source.forEach(function (img) {
-        if (img === "Files") {
-          images = [...images, ...queue];
-        } else {
-          images.push(img);
-        }
-      });
-    }
-    return { primary: primary, images: images };
-  }
-
-  receiveFiles(files, newState) {
-    var { primary, images } = this.getDraggedOrder();
-
-    if (files.length > 0) {
-      var { primary, images } = this.injectUploads(
-        files.map(f => this.uploadImage(f)), primary, images
-      );
-    }
-
-    this.setState({...newState, primary: primary, images: images});
-  }
-
-  index(record) {
-    let { primary, images, deleted } = this.state;
-    var ordered = [...images, ...deleted];
-    if (primary) {
-      ordered = [primary, ...ordered];
-    }
-    return ordered.indexOf(record);
-  }
-
-  renderDrag() {
-    let record = this.state.dragging;
-    if (record === "Files") {
-      return "";
-    } else {
-      let containerSize = this.container.current.getBoundingClientRect();
-      let x = this.state.x - (containerSize.x || containerSize.left);
-      let y = this.state.y - (containerSize.y || containerSize.top);
-      let translateStyle = {
-        transform: `translate3d(${x}px, ${y}px, 0)`
-      };
-      return (
-        <div className="drag-image" style={translateStyle}>
-          {record.image && (
-             <img src={record.src || record.image.thumbnail_url} />
-          )}
-        </div>
-      );
-    }
-  }
-
-  getDraggedOrder() {
-    let dragging = this.state.dragging;
-    var primary = this.state.primary;
-    var images = this.state.images;
-    if (dragging) {
-      if (this.hovering(this.primaryContainer)) {
-        images = [primary, ...images].filter(
-          r => r !== null && r !== dragging
-        );
-        primary = dragging;
-      } else if (this.hovering(this.imagesContainer)) {
-        images = [];
-        if (dragging === primary) {
-          primary = null;
-        }
-        this.state.images.filter(r => r !== dragging).forEach(r => {
-          if (this.hovering(r) && images.indexOf(dragging) === -1) {
-            images.push(dragging);
-          }
-          images.push(r);
-        });
-        if (images.indexOf(dragging) === -1) {
-          images.push(dragging);
-        }
-      } else {
-        if (dragging === primary) {
-          primary = null;
-        }
-        images = this.state.images.filter(r => r !== dragging);
-        if (this.state.y < this.imagesContainer.current.getBoundingClientRect().top) {
-          images = [dragging, ...images];
-        } else {
-          images.push(dragging);
-        }
-      }
-    }
-    return { primary: primary, images: images };
-  }
-
-  renderImage(record, primary) {
-    let dragging = this.state.dragging;
-    if (record === "Files") {
-      return (
-        <div className="grid-image" key="file-placeholder">
-          <div className="file-placeholder" />
-        </div>
-      );
-    }
-
-    let onUpdate = (image, src) => {
-      this.updateImage(record, { image: image, src: src });
-    };
-
-    return (
-      <GridImage 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}
-                 primary={primary}
-                 onUpdate={onUpdate}
-                 enablePrimary={this.props.enablePrimary}
-                 deleteImage={this.deleteImage}
-                 attributeName={this.attributeName(record)}
-                 placeholder={dragging && dragging == record} />
-    );
-  }
-
-  render() {
-    let { dragging, deleted } = this.state;
-    let { primary, images } = this.getDraggedOrder();
-    return (
-      <div className="image-grid"
-           ref={this.container}
-           onDragOver={this.drag}
-           onDrop={this.dragEnd}>
-        {dragging && this.renderDrag()}
-        {this.props.enablePrimary && (
-           <div className="primary-image" ref={this.primaryContainer}>
-             <h3>
-               Main image
-             </h3>
-             {primary && this.renderImage(primary, true)}
-             {!primary && (
-               <div className="drop-target">
-                 <FileUploadButton multiple={true}
-                                   type="image"
-                                   multiline={true}
-                                   callback={this.uploadPrimary} />
-                </div>
-             )}
-             {this.props.primaryAttribute && (
-                <input type="hidden" name={this.props.primaryAttribute}
-                       value={(primary && primary.image && primary.image.id) || ""} />
-             )}
-           </div>
-        )}
-        <div className="grid" ref={this.imagesContainer}>
-          <h3>
-            {this.props.enablePrimary ? "More images" : "Images"}
-          </h3>
-          <div className="drop-target">
-            <FileUploadButton multiple={true}
-                              type="image"
-                              callback={this.uploadAdditional} />
-          </div>
-          <div className="images">
-            {images.map(r => this.renderImage(r, false))}
-          </div>
-        </div>
-        <div className="deleted">
-          {deleted.map(r => this.renderDeletedImage(r))}
-        </div>
-      </div>
-    );
-  }
-
-  renderDeletedImage(record) {
-    let image = record.image;
-    let attrName = this.attributeName(record);
-    return (
-      <span className="deleted-image" key={`deleted-${record.id}`}>
-        <input name={`${attrName}[id]`}
-               type="hidden" value={record.id} />
-        <input name={`${attrName}[image_id]`}
-               type="hidden" value={(image && image.id) || ""} />
-        <input name={`${attrName}[_destroy]`}
-               type="hidden" value={true} />
-      </span>
-    );
-  }
-
-  updateImage(record, attrs) {
-    if (this.state.primary === record) {
-      this.setState({ primary: { ...record, ...attrs } });
-    } else {
-      let images = this.state.images.slice();
-      images[images.indexOf(record)] = { ...record, ...attrs };
-      this.setState({ images: images });
-    }
-  }
-
-  uploadImage(file) {
-    let component = this;
-    var obj = { image: null, file: file, ref: React.createRef(),
-                handle: this.getHandle() };
-
-    let data = new FormData();
-
-    data.append("image[file]", file);
-    this.postFile("/admin/images.json", data, function (json) {
-      let preloader = new Image();
-      obj.file = null;
-      obj.image = json;
-      preloader.onload = () => component.setState({});
-      preloader.src = obj.image.thumbnail_url;
-    });
-
-    return obj;
-  }
-
-  uploadAdditional(files) {
-    this.setState({
-      images: [...this.state.images,
-               ...files.map(f => this.uploadImage(f))]
-    });
-  }
-
-  uploadPrimary(files) {
-    let uploadedFiles = files.map(f => this.uploadImage(f));
-    var primary = this.state.primary;
-    var images = this.state.images;
-    if (primary) {
-      images = [primary, ...images];
-    }
-    primary = uploadedFiles[0];
-    if (uploadedFiles.length > 1) {
-      images = [...uploadedFiles.slice(1), ...images];
-    }
-    this.setState({ primary: primary, images: images });
-  }
-}

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

@@ -1,171 +0,0 @@
-class ImageUploader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { dragover: false,
-                   uploading: false,
-                   image: props.image,
-                   src: props.src };
-    this.receiveFiles = this.receiveFiles.bind(this);
-    this.removeImage = this.removeImage.bind(this);
-    this.dragOver = this.dragOver.bind(this);
-    this.dragLeave = this.dragLeave.bind(this);
-    this.dragEnd = this.dragEnd.bind(this);
-    this.drop = this.drop.bind(this);
-  }
-
-  receiveFiles(files) {
-    if (files.length > 0) {
-      this.uploadImage(files[0]);
-    }
-  }
-
-  clearItems(dt) {
-    if (dt.items) {
-      for (var i = 0; i < dt.items.length; i++) {
-        dt.items.remove(i);
-      }
-    } else {
-      dt.clearData();
-    }
-  }
-
-  dragOver(evt) {
-    evt.preventDefault();
-    this.setState({ dragover: true });
-  }
-
-  dragLeave() {
-    this.setState({ dragover: false });
-  }
-
-  dragEnd(evt) {
-    clearItems(evt.dataTransfer);
-    this.setState({ dragover: false });
-  }
-
-  drop(evt) {
-    let files = this.getFiles(evt.dataTransfer);
-    evt.preventDefault();
-    if (files.length > 0) {
-      this.uploadImage(files[0]);
-    }
-  }
-
-  editableImage() {
-    let image = this.state.image;
-    if (!image) { return; }
-    return (
-      <div className="image">
-        <EditableImage image={image}
-                       src={this.state.src}
-                       width={this.props.width}
-                       caption={this.props.caption}
-                       locale={this.props.locale}
-                       locales={this.props.locales}
-                       csrf_token={this.props.csrf_token} />
-      </div>
-    );
-  }
-
-  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;
-  }
-
-  render() {
-    let image = this.state.image;
-    let id = image ? image.id : "";
-    let classes = ["image-uploader"];
-    if (this.state.uploading) {
-      classes.push("uploading");
-    } else if (this.state.dragover) {
-      classes.push("dragover");
-    }
-    return (
-      <div className={classes.join(" ")}
-           onDragOver={this.dragOver}
-           onDragLeave={this.dragLeave}
-           onDragEnd={this.dragEnd}
-           onDrop={this.drop}>
-        <input type="hidden"
-               name={this.props.attr}
-               value={id} />
-        {this.editableImage()}
-        <div className="ui-wrapper">
-          {this.state.uploading && (
-            <div className="ui">
-              Uploading image...
-            </div>
-          )}
-          {!this.state.uploading && (
-            <div className="ui">
-              <FileUploadButton type="image"
-                                multiline={true}
-                                callback={this.receiveFiles} />
-              {image && (
-                <a className="delete remove-image"
-                   href="#"
-                   onClick={this.removeImage}>
-                  Remove image
-                </a>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  removeImage(evt) {
-    evt.preventDefault();
-    this.setState({image: null, src: null});
-  }
-
-  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 = this.props.locale;
-    let locales = this.props.locales ? Object.keys(this.props.locales) : [locale];
-
-    let component = this;
-    let xhr = new XMLHttpRequest();
-    let data = new FormData();
-    this.setState({ image: null, src: null, dragover: false, uploading: true });
-    data.append("image[file]", file);
-    locales.forEach((l) => {
-      data.append(`image[alternative][${l}]`, this.props.alternative);
-    });
-    xhr.open("POST", "/admin/images.json");
-    xhr.setRequestHeader("X-CSRF-Token", this.props.csrf_token);
-    xhr.addEventListener("load", function (evt) {
-      if (xhr.readyState == 4 && xhr.status == "200") {
-        let image = JSON.parse(xhr.responseText);
-        component.setState({ uploading: false,
-                             image: image,
-                             src: image.thumbnail_url });
-      }
-    });
-    xhr.send(data);
-  }
-}

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

@@ -1,20 +0,0 @@
-var ModalActions = Reflux.createActions([
-  "open",
-  "close"
-]);
-
-class ModalStore extends Reflux.Store {
-  constructor() {
-    super();
-    this.state = { component: null };
-    this.listenToMany(ModalActions);
-  }
-
-  onOpen(component) {
-    this.setState({component: component});
-  }
-
-  onClose() {
-    this.setState({component: null});
-  }
-}

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

@@ -1,63 +0,0 @@
-class RichTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value,
-      rows: props.rows || 5
-    };
-    this.inputRef = React.createRef();
-    this.handleChange = this.handleChange.bind(this);
-    this.getSelection = this.getSelection.bind(this);
-    this.replaceSelection = this.replaceSelection.bind(this);
-  }
-
-  getSelection() {
-    let { selectionStart,
-          selectionEnd,
-          value } = this.inputRef.current;
-    return value.substr(selectionStart, (selectionEnd - selectionStart));
-  }
-
-  replaceSelection(prefix, replacement, postfix) {
-    let textarea = this.inputRef.current;
-    let { selectionStart, selectionEnd, value } = textarea;
-
-    textarea.value =
-      value.substr(0, selectionStart) +
-      prefix + replacement + postfix +
-      value.substr(selectionEnd, value.length);
-
-    textarea.focus({ preventScroll: true });
-    textarea.setSelectionRange(
-      selectionStart + prefix.length,
-      selectionStart + prefix.length + replacement.length
-    );
-    this.setValue(textarea.value);
-  };
-
-  handleChange(evt) {
-    this.setValue(evt.target.value);
-  }
-
-  render() {
-    let { value, rows } = this.state;
-    let { id, name } = this.props;
-    return (
-      <div className="rich-text-area">
-        <RichTextToolbar getSelection={this.getSelection}
-                         replaceSelection={this.replaceSelection} />
-        <textarea className="rich"
-                  ref={this.inputRef}
-                  id={id}
-                  name={name}
-                  value={value}
-                  rows={rows}
-                  onChange={this.handleChange} />
-      </div>
-    );
-  }
-
-  setValue(value) {
-    this.setState({ value: value });
-  }
-}

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

@@ -1,58 +0,0 @@
-class RichTextToolbar extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  link(selection) {
-    let name = selection.length > 0 ? selection : "Link text";
-    var url = prompt("Enter link URL", "");
-    url = url.length > 0 ? url : "http://example.com/";
-    url = url.replace(/^(?!(f|ht)tps?:\/\/)/, 'http://');
-    return ["\"", name, `\":${url}`];
-  }
-
-  emailLink(selection) {
-    var address = prompt("Enter email address", "");
-    let name = selection.length > 0 ? selection : address;
-    return ["\"", name, `\":mailto:${address}`];
-  }
-
-  strToList(str, prefix) {
-    return str.split("\n").map(l => prefix +  " " + l).join("\n");
-  }
-
-  button(name, className, handler) {
-    let clickHandler = (evt) => {
-      evt.preventDefault();
-      let [prefix, replacement, postfix] = handler(this.props.getSelection());
-      this.props.replaceSelection(prefix, replacement, postfix);
-    };
-
-    return (
-      <a title={name}
-         className={"button " + className}
-         onClick={clickHandler}>
-        <i className={"fa fa-" + className} />
-      </a>
-    );
-  };
-
-  render() {
-    return (
-      <div className="rich-text toolbar">
-        {this.button("Bold", "bold", (str) => ["<b>", str, "</b>"])}
-        {this.button("Italics", "italic", (str) => ["<i>", str, "</i>"])}
-        {this.button("Heading 2", "header h2", (str) => ["h2. ", str, ""])}
-        {this.button("Heading 3", "header h3", (str) => ["h3. ", str, ""])}
-        {this.button("Heading 4", "header h4", (str) => ["h4. ", str, ""])}
-        {this.button("Blockquote", "quote-left", (str) => ["bq. ", str, ""])}
-        {this.button("List", "list-ul",
-                     (str) => ["", this.strToList(str, "*"), ""])}
-        {this.button("Ordered list", "list-ol",
-                     (str) => ["", this.strToList(str, "#"), ""])}
-        {this.button("Link", "link", this.link)}
-        {this.button("Email link", "envelope", this.emailLink)}
-      </div>
-    );
-  }
-}

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

@@ -1,37 +0,0 @@
-class Toast extends Reflux.Component {
-  constructor(props) {
-    super(props);
-    this.store = ToastStore;
-  }
-
-  componentDidMount() {
-    if (this.props.notice) {
-      ToastActions.notice(this.props.notice);
-    }
-  }
-
-  componentWillUnmount() {
-  }
-
-  render() {
-    let toast = this.state.current;
-    let classNames = ["toast"];
-
-    if (toast) {
-      classNames.push(toast.type);
-      if (this.state.fadeout) {
-        classNames.push("fadeout");
-      }
-    }
-
-    return (
-      <div className="toast-wrapper">
-        {toast && (
-           <div className={classNames.join(" ")}>
-             {toast.message}
-           </div>
-        )}
-      </div>
-    );
-  }
-}

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

@@ -1,52 +0,0 @@
-var ToastActions = Reflux.createActions([
-  "notice",
-  "error"
-]);
-
-class ToastStore extends Reflux.Store {
-  constructor() {
-    super();
-    this.state = {
-      current: null,
-      fadeout: false,
-      queue: []
-    };
-    this.listenToMany(ToastActions);
-  }
-
-  addToQueue(msg, type) {
-    let entry = { message: msg, type: type };
-    if (this.state.current) {
-      this.setState({ queue: [...this.state.queue, entry] });
-    } else {
-      this.showToast(entry, this.state.queue);
-    };
-  }
-
-  showToast(entry, queue) {
-    let store = this;
-    this.setState({ current: entry, queue: queue, fadeout: false });
-    setTimeout(function () {
-      store.setState({ fadeout: true });
-      setTimeout(() => store.next(), 500);
-    }, 4000);
-  }
-
-  next() {
-    let queue = this.state.queue;
-    if (queue.length > 0) {
-      let entry = queue.shift();
-      this.showToast(entry, queue);
-    } else {
-      this.setState({ current: null, fadeout: false });
-    }
-  }
-
-  onNotice(msg) {
-    this.addToQueue(msg, "notice");
-  }
-
-  onError(msg) {
-    this.addToQueue(msg, "error");
-  }
-}

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

@@ -1,2 +0,0 @@
-//= require ./components/drag_uploader
-//= require_tree ./components