pages_core 3.7.0 → 3.8.3

data/app/javascript/components/RichTextArea.jsx

@@ -0,0 +1,213 @@
+import React from "react";
+import PropTypes from "prop-types";
+import RichTextToolbarButton from "./RichTextToolbarButton";
+
+export default 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.handleKeyPress = this.handleKeyPress.bind(this);
+    this.getSelection = this.getSelection.bind(this);
+    this.link = this.link.bind(this);
+    this.replaceSelection = this.replaceSelection.bind(this);
+  }
+
+  actions() {
+    const simple = [
+      {
+        name:      "bold",
+        className: "bold",
+        hotkey:    "b",
+        fn:        (str) => ["<b>", str, "</b>"]
+      },
+      { name:      "italic",
+        className: "italic",
+        hotkey:    "i",
+        fn:        (str) => ["<i>", str, "</i>"]
+      },
+    ];
+
+    const advanced = [
+      {
+        name:      "Heading 2",
+        className: "header h2",
+        fn:        (str) => ["h2. ", str, ""]
+      },
+      {
+        name:      "Heading 3",
+        className: "header h3",
+        fn:        (str) => ["h3. ", str, ""]
+      },
+      {
+        name:      "Heading 4",
+        className: "header h4",
+        fn:        (str) => ["h4. ", str, ""]
+      },
+      {
+        name:      "Blockquote",
+        className: "quote-left",
+        fn:        (str) => ["bq. ", str, ""]
+      },
+      {
+        name:      "List",
+        className: "list-ul",
+        fn:        (str) => ["", this.strToList(str, "*"), ""]
+      },
+      {
+        name:      "Ordered list",
+        className: "list-ol",
+        fn:        (str) => ["", this.strToList(str, "#"), ""]
+      },
+      {
+        name:      "Link",
+        className: "link",
+        fn:        this.link
+      },
+      {
+        name:      "Email link",
+        className: "envelope",
+        fn:        this.emailLink
+      },
+    ];
+
+    return this.props.simple ? simple : [...simple, ...advanced];
+  }
+
+  applyAction(fn) {
+    let [prefix, replacement, postfix] = fn(this.getSelection());
+    this.replaceSelection(prefix, replacement, postfix);
+  }
+
+  emailLink(selection) {
+    var address = prompt("Enter email address", "");
+    let name = selection.length > 0 ? selection : address;
+    return ["\"", name, `":mailto:${address}`];
+  }
+
+  getSelection() {
+    let { selectionStart, selectionEnd, value } = this.inputRef.current;
+    return value.substr(selectionStart, (selectionEnd - selectionStart));
+  }
+
+  handleChange(evt) {
+    this.setState({ value: evt.target.value });
+  }
+
+  handleKeyPress(evt) {
+    let key;
+    if (evt.which >= 65 && evt.which <= 90) {
+      key = String.fromCharCode(evt.keyCode).toLowerCase();
+    } else if (evt.keyCode === 13) {
+      key = "enter";
+    }
+
+    let hotkeys = {};
+    this.actions().forEach(a => {
+      if (a.hotkey) {
+        hotkeys[a.hotkey] = a.fn;
+      }
+    });
+
+    if ((evt.metaKey || evt.ctrlKey) && Object.prototype.hasOwnProperty.call(hotkeys, key)) {
+      evt.preventDefault();
+      this.applyAction(hotkeys[key]);
+    }
+  }
+
+  link(selection) {
+    let name = selection.length > 0 ? selection : "Link text";
+    var url = prompt("Enter link URL", "");
+    if (url) {
+      return ["\"", name, `":${this.relativeUrl(url)}`];
+    } else {
+      return ["", name, ""];
+    }
+  }
+
+  relativeUrl(str) {
+    let url = null;
+
+    if (!str.match(/^https:\/\//) || !document || !document.location) {
+      return str;
+    }
+
+    try {
+      url = new URL(str);
+    } catch (error) {
+      console.log("Error parsing URL: ", error);
+    }
+
+    if (url &&
+        url.hostname == document.location.hostname &&
+        (document.location.port || "80") == (url.port || "80")) {
+      return url.pathname;
+    }
+    return str;
+  }
+
+  render() {
+    let { value, rows } = this.state;
+    let { id, name } = this.props;
+
+    const clickHandler = (fn) => (evt) => {
+      evt.preventDefault();
+      this.applyAction(fn);
+    };
+
+    return (
+      <div className="rich-text-area">
+        <div className="rich-text toolbar">
+          {this.actions().map(a =>
+            <RichTextToolbarButton
+              key={a.name}
+              name={a.name}
+              className={a.className}
+              onClick={clickHandler(a.fn)} />)}
+        </div>
+        <textarea
+          className="rich"
+          ref={this.inputRef}
+          id={id}
+          name={name}
+          value={value}
+          rows={rows}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyPress} />
+      </div>
+    );
+  }
+
+  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.setState({ value: textarea.value });
+  }
+
+  strToList(str, prefix) {
+    return str.split("\n").map(l => prefix +  " " + l).join("\n");
+  }
+}
+
+RichTextArea.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  rows: PropTypes.number,
+  simple: PropTypes.bool
+};

data/app/javascript/components/RichTextToolbarButton.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class RichTextToolbarButton extends React.Component {
+  render() {
+    return (
+      <a title={this.props.name}
+         className={"button " + this.props.className}
+         onClick={this.props.onClick}>
+        <i className={"fa fa-" + this.props.className} />
+      </a>
+    );
+  }
+}
+
+RichTextToolbarButton.propTypes = {
+  className: PropTypes.string,
+  name: PropTypes.string,
+  onClick: PropTypes.func
+};

data/app/javascript/components/TagEditor/AddTagForm.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+export default function AddTagForm(props) {
+  const [tag, setTag] = useState("");
+
+  const submit = (evt) => {
+    evt.preventDefault();
+    props.addTag(tag);
+    setTag("");
+  };
+
+  const handleKeyDown = (evt) => {
+    if (evt.which === 13) {
+      submit(evt);
+    }
+  };
+
+  const handleChange = (evt) => {
+    setTag(evt.target.value);
+  };
+
+  return (
+    <div className="add-tag-form">
+      <input name="add-tag"
+             type="text"
+             className="add-tag"
+             value={tag}
+             onKeyDown={handleKeyDown}
+             onChange={handleChange}
+             placeholder="Add tag..." />
+      <button onClick={submit}
+              disabled={!tag}>
+        Add
+      </button>
+    </div>
+  );
+}
+
+AddTagForm.propTypes = {
+  addTag: PropTypes.func
+};

data/app/javascript/components/TagEditor/Tag.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function Tag(props) {
+  const handleChange = () => {
+    props.toggleEnabled(props.tag);
+  };
+
+  let classes = ["tag"];
+  if (props.enabled) {
+    classes.push("enabled");
+  }
+
+  return (
+    <span className={classes.join(" ")}>
+      <label className="check-box">
+        <input type="checkbox"
+               name={"tag-" + props.tag}
+               value="1"
+               checked={props.enabled}
+               onChange={handleChange} />
+        <span className="name">{props.tag}</span>
+      </label>
+    </span>
+  );
+}
+
+Tag.propTypes = {
+  enabled: PropTypes.bool,
+  tag: PropTypes.string,
+  toggleEnabled: PropTypes.func
+};

data/app/javascript/components/TagEditor.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import AddTagForm from "./TagEditor/AddTagForm";
+import Tag from "./TagEditor/Tag";
+
+function onlyUnique(value, index, self) {
+  return self.indexOf(value) === index;
+}
+
+export default function TagEditor(props) {
+  const [tags, setTags] = useState(props.tags);
+  const [enabled, setEnabled] = useState(props.enabled);
+
+  const tagList = [...tags, ...enabled].filter(onlyUnique);
+
+  const normalize = (tag) => {
+    return (
+      tagList.filter(t => t.toLowerCase() == tag.toLowerCase())[0] || tag
+    );
+  };
+
+  const tagEnabled = (tag) => {
+    return enabled.map(t => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1;
+  };
+
+  const toggleEnabled = (tag) => {
+    const normalized = normalize(tag);
+
+    if (tagEnabled(normalized)) {
+      setEnabled(enabled.filter((t) => t !== normalized));
+    } else {
+      setEnabled([...enabled, normalized]);
+    }
+  };
+
+  const addTag = (tag) => {
+    const normalized = normalize(tag);
+
+    setTags([...tags, normalized].filter(onlyUnique));
+    setEnabled([...enabled, normalized].filter(onlyUnique));
+  };
+
+  return (
+    <div className="tag-editor clearfix">
+      <input type="hidden" name={props.name} value={JSON.stringify(enabled)} />
+      {tagList.map((t) =>
+        <Tag key={t}
+             tag={t}
+             enabled={tagEnabled(t)}
+             toggleEnabled={toggleEnabled} />)}
+      <AddTagForm addTag={addTag} />
+    </div>
+  );
+}
+
+TagEditor.propTypes = {
+  name: PropTypes.string,
+  enabled: PropTypes.array,
+  tags: PropTypes.array
+};

data/app/javascript/components/Toast.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ToastStore from "../stores/ToastStore";
+
+export default class Toast extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { toast: undefined,
+                   fadeout: false };
+    this.store = ToastStore;
+    this.timer = undefined;
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.unsubscribe = this.store.subscribe(this.handleChange);
+    if (this.props.error) {
+      this.store.dispatch({ type: "ERROR", message: this.props.error });
+    }
+    if (this.props.notice) {
+      this.store.dispatch({ type: "NOTICE", message: this.props.notice });
+    }
+  }
+
+  componentWillUnmount() {
+    this.unsubscribe();
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+
+  handleChange() {
+    this.setState({ toast: this.store.getState()[0], fadeout: false });
+    if (!this.timer) {
+      this.timer = setTimeout(() => {
+        this.setState({ fadeout: true });
+        this.timer = setTimeout(() => {
+          this.timer = undefined;
+          this.setState({ fadeout: false });
+          this.store.dispatch({ type: "NEXT" });
+        }, 500);
+      }, 4000);
+    }
+  }
+
+  render() {
+    let toast = this.state.toast;
+    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>
+    );
+  }
+}
+
+Toast.propTypes = {
+  notice: PropTypes.string,
+  error: PropTypes.string
+};

data/app/javascript/components/drag/draggedOrder.js

@@ -0,0 +1,51 @@
+function hovering(dragState, target) {
+  let { x, y } = dragState;
+  var rect;
+  if (target.rect) {
+    rect = target.rect;
+  } else if (target.current) {
+    rect = target.current.getBoundingClientRect();
+  } else {
+    return false;
+  }
+  return (x >= rect.left && x <= rect.right &&
+          y >= rect.top && y <= rect.bottom);
+}
+
+export function collectionOrder(collection, dragState) {
+  const { draggables, ref } = collection;
+  const { dragging } = dragState;
+
+  if (!dragging) {
+    return draggables;
+  }
+
+  let ordered = draggables.filter(d => d.handle !== dragging.handle);
+  if (hovering(dragState, ref)) {
+    const hovered = ordered.filter(d => hovering(dragState, d))[0];
+    if (hovered) {
+      const index = ordered.indexOf(hovered);
+      ordered = [...ordered.slice(0, index),
+                 dragging,
+                 ...ordered.slice(index)];
+    } else {
+      ordered = [...ordered, dragging];
+    }
+  }
+
+  return ordered;
+}
+
+export default function draggedOrder(collection, dragState) {
+  let ordered = collectionOrder(collection, dragState);
+
+  if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {
+    if (dragState.y < collection.ref.current.getBoundingClientRect().top) {
+      ordered = [dragState.dragging, ...ordered];
+    } else {
+      ordered.push(dragState.dragging);
+    }
+  }
+
+  return ordered;
+}

data/app/javascript/components/drag/useDragCollection.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useReducer, useRef } from "react";
+import uniqueId from "lodash/uniqueId";
+
+function getPosition(draggable) {
+  if (draggable.ref.current) {
+    return draggable.ref.current.getBoundingClientRect();
+  } else {
+    return null;
+  }
+}
+
+function hideDraggable(draggable, callback) {
+  if (draggable && draggable.ref && draggable.ref.current) {
+    const prevDisplay = draggable.ref.current.style.display;
+    draggable.ref.current.style.display = "none";
+    const result = callback();
+    draggable.ref.current.style.display = prevDisplay;
+    return result;
+  }
+  else {
+    return callback();
+  }
+}
+
+function dragCollectionReducer(state, action) {
+  switch (action.type) {
+  case "append":
+    return [...state, ...action.payload];
+  case "prepend":
+    return [...action.payload, ...state];
+  case "insertFiles":
+    var index = state.indexOf("Files");
+
+    if (index === -1 || !action.payload) {
+      return state;
+    } else {
+      return [...state.slice(0, index),
+              ...action.payload,
+              ...state.slice(index + 1)];
+    }
+  case "update":
+    return state.map(d => {
+      return (d.handle === action.payload.handle) ? action.payload : d;
+    });
+  case "updatePositions":
+    return hideDraggable(action.payload, () => {
+      return state.map(d => {
+        return { ...d, rect: getPosition(d) };
+      });
+    });
+  case "remove":
+    return state.filter(d => d.handle !== action.payload.handle);
+  case "replace":
+    return action.payload;
+  case "reorder":
+    return action.payload;
+  default:
+    return state;
+  }
+}
+
+export function createDraggable(record) {
+  return { record: record,
+           rect: null,
+           ref: React.createRef(),
+           handle: uniqueId("draggable") };
+}
+
+export default function useDragCollection(records) {
+  const containerRef = useRef();
+  const [draggables, dispatch] = useReducer(
+    dragCollectionReducer,
+    [],
+    () => records.map(r => createDraggable(r))
+  );
+
+  useEffect(() => {
+    dispatch({ type: "updatePositions" });
+  }, []);
+
+  return { ref: containerRef,
+           draggables: draggables,
+           dispatch: dispatch };
+}

data/app/javascript/components/drag/useDragUploader.js

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+
+function containsFiles(evt) {
+  if (!evt.dataTransfer || !evt.dataTransfer.types) {
+    return false;
+  }
+  const 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;
+}
+
+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;
+}
+
+function 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 };
+}
+
+export default function useDragUploader(collections, onDragEnd) {
+  const [dragState, setDragState] = useState({
+    dragging: false,
+    x: null, y: null
+  });
+
+  const updatePositions = (dragging) => {
+    collections.forEach(c => {
+      c.dispatch({ type: "updatePositions", payload: dragging });
+    });
+  };
+
+  const startDrag = (evt, draggable) => {
+    updatePositions(draggable);
+    setDragState({ dragging: draggable, ...mousePosition(evt) });
+  };
+
+  const drag = (evt) => {
+    if (dragState.dragging) {
+      evt.stopPropagation();
+      evt.preventDefault();
+      setDragState({ ...dragState, ...mousePosition(evt) });
+    } else {
+      if (containsFiles(evt)) {
+        startDrag(evt, "Files");
+      }
+    }
+  };
+
+  const dragEnd = (evt) => {
+    if (dragState.dragging) {
+      const prevDragState = dragState;
+      var files = [];
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (dragState.dragging == "Files") {
+        files = getFiles(evt.dataTransfer);
+      }
+      setDragState({ dragging: false, x: null, y: null });
+      onDragEnd(prevDragState, files);
+      updatePositions();
+    }
+  };
+
+  const dragLeave = (evt) => {
+    if (dragState.dragging === "Files") {
+      evt.preventDefault();
+      evt.stopPropagation();
+      setDragState({ dragging: false, x: null, y: null });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("mousemove", drag);
+    window.addEventListener("touchmove", drag);
+    window.addEventListener("mouseup", dragEnd);
+    window.addEventListener("touchend", dragEnd);
+    window.addEventListener("mouseout", dragLeave);
+    return function cleanup() {
+      window.removeEventListener("mousemove", drag);
+      window.removeEventListener("touchmove", drag);
+      window.removeEventListener("mouseup", dragEnd);
+      window.removeEventListener("touchend", dragEnd);
+      window.removeEventListener("mouseout", dragLeave);
+    };
+  });
+
+  return [dragState, startDrag, { onDragOver: drag, onDrop: dragEnd }];
+}

data/app/javascript/components/drag/useDraggable.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+export default function useDraggable(draggable, startDrag) {
+  const ref = useRef();
+
+  const handleDrag = (evt) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    startDrag(evt, draggable);
+  };
+
+  useEffect(() => {
+    draggable.ref.current = ref.current;
+  }, []);
+
+  return { ref: ref, onDragStart: handleDrag, draggable: true };
+}