pages_core 3.6.0 → 3.8.0

data/app/{assets/javascripts/pages/admin/components/page_tree_node.jsx → javascript/components/PageTreeNode.jsx}

@@ -25,10 +25,14 @@
    SOFTWARE.
  */
 
-class PageTreeNode extends React.Component {
+import React from "react";
+import PropTypes from "prop-types";
+
+export default class PageTreeNode extends React.Component {
   constructor(props) {
     super(props);
     this.state = { newName: props.index.node.name };
+    this.innerRef = React.createRef();
   }
 
   permitted(action) {
@@ -49,7 +53,7 @@ class PageTreeNode extends React.Component {
         <span className="actions">
           <button type="button"
                   className="add"
-                  onClick={e => this.props.addChild(this.props.index)}>
+                  onClick={() => this.props.addChild(this.props.index)}>
             <i className="fa fa-plus icon" />
             Add child
           </button>
@@ -59,27 +63,27 @@ class PageTreeNode extends React.Component {
       return (
         <span className="actions">
           {this.permitted("edit") && this.button(statusLabel, {
-             className: "toggle-status",
-             icon: statusIcon,
-             onClick: e => this.toggleStatus()
+            className: "toggle-status",
+            icon: statusIcon,
+            onClick: () => this.toggleStatus()
            })}
 
           {this.permitted("edit") && this.button("Rename", {
-             className: "edit",
-             icon: "pencil",
-             onClick: e => this.edit()
+            className: "edit",
+            icon: "pencil",
+            onClick: () => this.edit()
            })}
 
           {this.permitted("edit") && this.button("Delete", {
-             className: "delete",
-             icon: "trash",
-             onClick: e => this.deletePage()
+            className: "delete",
+            icon: "trash",
+            onClick: () => this.deletePage()
            })}
 
           {this.permitted("create") && this.button("Add child", {
-             className: "add",
-             icon: "plus",
-             onClick: e => this.props.addChild(this.props.index)
+            className: "add",
+            icon: "plus",
+            onClick: () => this.props.addChild(this.props.index)
            })}
         </span>
       );
@@ -89,11 +93,11 @@ class PageTreeNode extends React.Component {
   addButton() {
     let self = this;
     let node = this.node();
-    let handleClick = function (e) {
+    let handleClick = function () {
       if (self.props.addChild) {
         self.props.addChild(self.props.index);
       }
-    }
+    };
 
     if (!node.collapsed &&
         this.permitted("create") &&
@@ -128,9 +132,9 @@ class PageTreeNode extends React.Component {
     if (index.children && index.children.length && !index.node.collapsed) {
       var childrenStyles = {};
       if (index.node.collapsed) {
-        childrenStyles.display = 'none';
+        childrenStyles.display = "none";
       }
-      childrenStyles['paddingLeft'] = this.props.paddingLeft + 'px';
+      childrenStyles["paddingLeft"] = this.props.paddingLeft + "px";
 
       return (
         <div className="children" style={childrenStyles}>
@@ -172,7 +176,7 @@ class PageTreeNode extends React.Component {
       if (self.props.onCollapse) {
         self.props.onCollapse(nodeId);
       }
-    }
+    };
 
     if (this.visibleChildren().length > 0) {
       let collapsed = index.node.collapsed;
@@ -186,7 +190,7 @@ class PageTreeNode extends React.Component {
 
       return (
         <i className={classnames}
-           onMouseDown={function(e) {e.stopPropagation()}}
+           onMouseDown={function(e) {e.stopPropagation();}}
            onClick={handleCollapse} />
       );
     }
@@ -220,7 +224,7 @@ class PageTreeNode extends React.Component {
   }
 
   editUrl(page) {
-    return(`/admin/${page.locale}/pages/${page.param}/edit`)
+    return(`/admin/${page.locale}/pages/${page.param}/edit`);
   }
 
   node() {
@@ -251,14 +255,16 @@ class PageTreeNode extends React.Component {
 
     let handleMouseDown = function (e) {
       if (self.permitted("edit") && !editing && props.onDragStart) {
-        props.onDragStart(props.index.id, self.refs.inner, e);
+        props.onDragStart(props.index.id, self.innerRef.current, e);
       }
-    }
+    };
 
     if (this.node().status != 4) {
       return (
         <div className={classnames}>
-          <div className="inner" ref="inner" onMouseDown={handleMouseDown}>
+          <div className="inner"
+               ref={this.innerRef}
+               onMouseDown={handleMouseDown}>
             {this.collapseArrow()}
             {node}
           </div>
@@ -276,7 +282,7 @@ class PageTreeNode extends React.Component {
 
     let handleNameChange = function(event) {
       self.setState({newName: event.target.value});
-    }
+    };
 
     let performEdit = function(event) {
       event.preventDefault();
@@ -284,12 +290,12 @@ class PageTreeNode extends React.Component {
         name: self.state.newName,
         editing: false
       });
-    }
+    };
 
-    let cancelEdit = function(e) {
+    let cancelEdit = function() {
       self.setState({newName: self.node().name});
       self.updatePage({editing: false});
-    }
+    };
 
     return (
       <div className="page edit">
@@ -298,7 +304,6 @@ class PageTreeNode extends React.Component {
           <input type="text"
                  value={this.state.newName}
                  autoFocus
-                 ref="nameInput"
                  onChange={handleNameChange} />
           <button className="save" type="submit">
             <i className="fa fa-cloud icon"></i>
@@ -315,7 +320,6 @@ class PageTreeNode extends React.Component {
   }
 
   renderNode() {
-    let self = this;
     let index = this.props.index;
     let node = index.node;
 
@@ -338,7 +342,7 @@ class PageTreeNode extends React.Component {
     if (node.id && node.starts_at) {
       dateLabel = <span className="date">
         {node.starts_at}
-      </span>
+      </span>;
     }
 
     if (node.news_page) {
@@ -394,3 +398,14 @@ class PageTreeNode extends React.Component {
     }
   }
 }
+
+PageTreeNode.propTypes = {
+  addChild: PropTypes.func,
+  dragging: PropTypes.number,
+  index: PropTypes.object,
+  onCollapse: PropTypes.func,
+  onDragStart: PropTypes.func,
+  paddingLeft: PropTypes.number,
+  tree: PropTypes.object,
+  updatePage: PropTypes.func
+};

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 "./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/ToastStore.jsx

@@ -0,0 +1,14 @@
+import { createStore } from "redux";
+
+export default createStore((state = [], action) => {
+  switch(action.type) {
+  case "ERROR":
+    return [...state, { message: action.message, type: "error" }];
+  case "NOTICE":
+    return [...state, { message: action.message, type: "notice" }];
+  case "NEXT":
+    return state.slice(1);
+  default:
+    return state;
+  }
+});