pages_core 3.5.1 → 3.6.0

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

@@ -0,0 +1,174 @@
+class DateRangeSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startsAt: this.parseDate(props.startsAt) || this.defaultDate(),
+      endsAt:   this.parseDate(props.endsAt) || this.defaultDate(60),
+      startTime: "",
+      endTime:   ""
+    };
+    this.state.startTime = this.timeToString(this.state.startsAt);
+    this.state.endTime = this.timeToString(this.state.endsAt);
+
+    this.changeStartsAt = this.changeStartsAt.bind(this);
+    this.changeEndsAt = this.changeEndsAt.bind(this);
+  }
+
+  changeStartsAt(options = {}) {
+    let newDate = this.modifyDate(this.state.startsAt, options);
+    this.setDates(
+      newDate,
+      new Date(this.state.endsAt.getTime() + (newDate - this.state.startsAt))
+    );
+  }
+
+  changeEndsAt(options = {}) {
+    let newDate = this.modifyDate(this.state.endsAt, options);
+    this.setDates(this.state.startsAt, newDate);
+  }
+
+  defaultDate(offset = 0) {
+    let coeff = 1000 * 60 * 60;
+    return new Date(
+      (Math.round((new Date()).getTime() / coeff) * coeff) + coeff +
+             (1000 * 60 * offset)
+    );
+  }
+
+  modifyDate(original, options = {}) {
+    var newDate = new Date(original);
+    if (options.hasOwnProperty("year")) {
+      newDate.setFullYear(options.year);
+    }
+    if (options.hasOwnProperty("month")) {
+      newDate.setMonth(options.month);
+    }
+    if (options.hasOwnProperty("date")) {
+      newDate.setDate(options.date);
+    }
+    if (options.hasOwnProperty("time") &&
+        options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)) {
+      newDate.setHours(options.time.split(":")[0]);
+      newDate.setMinutes(options.time.split(":")[1] || 0);
+    }
+    return newDate;
+  }
+
+  parseDate(str) {
+    if (!str) { return; }
+    return new Date(str);
+  }
+
+  setDates(start, end) {
+    if (end < start) {
+      end = start;
+    }
+    this.setState({
+      startsAt: start,
+      endsAt: end,
+      startTime: this.timeToString(start),
+      endTime: this.timeToString(end)
+    });
+  }
+
+  startsAtToString() {
+    if (this.props.disabled) { return ""; }
+    return this.state.startsAt.toJSON();
+  }
+
+  endsAtToString() {
+    if (this.props.disabled) { return ""; }
+    return this.state.endsAt.toJSON();
+  }
+
+  renderDateSelect(key, date, handleChange) {
+    return (
+      <div className="date-select">
+        <select value={date.getMonth()}
+                onChange={e => handleChange({ month: e.target.value })}
+                disabled={this.props.disabled}>
+          {this.monthOptions().map((m, i) => (
+            <option key={key + "-month-" + i}
+                    value={i}>{m}</option>
+          ))}
+        </select>
+        <select value={date.getDate()}
+                onChange={e => handleChange({ date: e.target.value })}
+                disabled={this.props.disabled}>
+          {this.dayOptions().map(d => (
+            <option key={key + "-date-" + d}
+                    value={d}>{d}</option>
+          ))}
+        </select>
+        <select value={date.getFullYear()}
+                onChange={e => handleChange({ year: e.target.value })}
+                disabled={this.props.disabled}>
+          {this.yearOptions().map(y => (
+            <option key={key + "-year-" + y}
+                    value={y}>{y}</option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className="date-range-select">
+        <input type="hidden"
+               name={this.props.objectName + "[starts_at]"}
+               value={this.startsAtToString()} />
+        <input type="hidden"
+               name={this.props.objectName + "[ends_at]"}
+               value={this.endsAtToString()} />
+        <div className="date">
+          {this.renderDateSelect("starts-at",
+                                 this.state.startsAt,
+                                 this.changeStartsAt)}
+          {!this.props.disableTime && (
+             <input type="text"
+                    size="5"
+                    value={this.state.startTime}
+                    disabled={this.props.disabled}
+                    onChange={e => this.setState({ startTime: e.target.value })}
+                    onBlur={e => this.changeStartsAt({ time: e.target.value })} />
+          )}
+        </div>
+        <span className="to">to</span>
+        <div className="date">
+          {this.renderDateSelect("ends-at",
+                                 this.state.endsAt,
+                                 this.changeEndsAt)}
+          {!this.props.disableTime && (
+             <input type="text"
+                    size="5"
+                    value={this.state.endTime}
+                    disabled={this.props.disabled}
+                    onChange={e => this.setState({ endTime: e.target.value })}
+                    onBlur={e => this.changeEndsAt({ time: e.target.value })} />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  timeToString(time) {
+    return time.toTimeString().slice(0, 5);
+  }
+
+  // Returns an array with years from 2000 to 10 years from now.
+  yearOptions() {
+    let start = 2000;
+    return Array.apply(null, Array((new Date()).getFullYear() - start + 11))
+                .map((_, i) => i + start);
+  }
+
+  monthOptions() {
+    return(["January", "February", "March", "April", "May", "June", "July",
+            "August", "September", "October", "November", "December"]);
+  }
+
+  dayOptions() {
+    return Array.apply(null, Array(31)).map((_, i) => i + 1);
+  }
+}

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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,57 @@
+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/file_upload_button.jsx

@@ -0,0 +1,44 @@
+class FileUploadButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+    this.handleChange = this.handleChange.bind(this);
+    this.triggerDialog = this.triggerDialog.bind(this);
+  }
+
+  handleChange(evt) {
+    let fileList = evt.target.files;
+    let files = [];
+    for (var i = 0; i < fileList.length; i++) {
+      files.push(fileList[i]);
+    }
+    if (files.length > 0) {
+      this.props.callback(files);
+    }
+  }
+
+  render() {
+    return (
+      <div className="upload-button">
+        <span>
+          Drag and drop {this.props.type || "file"}
+          {this.props.multiple && "s"} here, or
+          {this.props.multiline && <br />}
+          <button onClick={this.triggerDialog}>
+            choose a file
+          </button>
+        </span>
+        <input type="file"
+               onChange={this.handleChange}
+               ref={this.inputRef}
+               style={{ display: "none" }}
+               multiple={this.props.multiple || false} />
+      </div>
+    );
+  }
+
+  triggerDialog(evt) {
+    evt.preventDefault();
+    this.inputRef.current.click();
+  }
+}