pages_core 3.6.0 → 3.8.0

data/app/{assets/javascripts/pages/admin/components/page_tree_store.jsx → javascript/components/PageTree.jsx}

@@ -1,39 +1,82 @@
-var PageTreeActions = Reflux.createActions([
-  "addChild",
-  "init",
-  "movedPage",
-  "setCSRFToken",
-  "toggleCollapsed",
-  "updatePage",
-  "updateTree"
-]);
-
-class PageTreeStore extends Reflux.Store {
-  constructor() {
-    super();
-    this.state = { tree: null };
-    this.listenToMany(PageTreeActions);
+import React from "react";
+import PropTypes from "prop-types";
+import PageTreeDraggable from "./PageTreeDraggable";
+import Tree from "../lib/Tree";
+import { postJson, putJson } from "../lib/request";
+
+export default class PageTree extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { tree: this.buildTree(props.pages) };
+
+    this.addChild = this.addChild.bind(this);
+    this.movedPage = this.movedPage.bind(this);
+    this.toggleCollapsed = this.toggleCollapsed.bind(this);
+    this.updatePage = this.updatePage.bind(this);
+    this.updateTree = this.updateTree.bind(this);
   }
 
-  collapsedState() {
-    if (window && window.localStorage &&
-        typeof(window.localStorage.collapsedPages) != "undefined") {
-      return JSON.parse(window.localStorage.collapsedPages);
-    }
-    return {};
+  addChild(id, attributes) {
+    let tree = this.state.tree;
+    var index = tree.append(attributes, id);
+    this.reorderChildren(id);
+    this.setCollapsed(id, false);
+    this.createPage(index, attributes);
+    this.setState({tree: tree});
+  }
+
+  movedPage(id) {
+    let tree = this.state.tree;
+    let index = tree.getIndex(id);
+    this.reorderChildren(index.parent);
+
+    let parent = tree.getIndex(index.parent);
+    let position = parent.children.indexOf(id) + 1;
+
+    this.movePage(index, parent, position);
+    this.setState({tree: tree});
+  }
+
+  toggleCollapsed(id) {
+    let tree = this.state.tree;
+    var node = tree.getIndex(id).node;
+    this.setCollapsed(id, !node.collapsed);
+    this.setState({tree: tree});
+  }
+
+  updatePage(id, attributes) {
+    let tree = this.state.tree;
+    let index = tree.getIndex(id);
+    let url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
+    this.updateNode(index, attributes);
+    this.performUpdate(index, url, { page: attributes });
+  }
+
+  updateTree(tree) {
+    this.setState({ tree: tree });
   }
 
   applyCollapsed(tree) {
-    let store = this;
+    const depth = (t, index) => {
+      var depth = 0;
+      let pointer = t.getIndex(index.parent);
+      while (pointer) {
+        depth += 1;
+        pointer = t.getIndex(pointer.parent);
+      }
+      return depth;
+    };
+
     let collapsedState = this.collapsedState();
     let walk = function (id) {
       var index = tree.getIndex(id);
       var node = index.node;
-      if (collapsedState.hasOwnProperty(node.id)) {
+      if (Object.prototype.hasOwnProperty.call(collapsedState, node.id)) {
         node.collapsed = collapsedState[node.id];
       } else if (node.news_page) {
         node.collapsed = true;
-      } else if (store.depth(tree, index) > 1) {
+      } else if (depth(tree, index) > 1) {
         node.collapsed = true;
       }
       if (index.children && index.children.length) {
@@ -43,21 +86,37 @@ class PageTreeStore extends Reflux.Store {
     walk(1);
   }
 
-  depth(tree, index) {
-    var depth = 0;
-    var pointer = index;
-    while (pointer = tree.getIndex(pointer.parent)) {
-      depth += 1;
+  collapsedState() {
+    if (window && window.localStorage &&
+        typeof(window.localStorage.collapsedPages) != "undefined") {
+      return JSON.parse(window.localStorage.collapsedPages);
     }
-    return depth;
+    return {};
   }
 
   createPage(index, attributes) {
-    let store = this;
-    let url = `/admin/${index.node.locale}/pages.json`;
-    $.post(url, { page: attributes }, function (response) {
-      store.updateNode(index, response);
-    });
+    postJson(`/admin/${index.node.locale}/pages.json`, { page: attributes })
+      .then(response => this.updateNode(index, response));
+  }
+
+  buildTree(pages) {
+    // Build tree
+    let parentMap = pages.reduce((m, page) => {
+      let id = page.parent_page_id;
+      m[id] = [...(m[id] || []), page];
+      return m;
+    }, {});
+
+    pages.forEach((p) => p.children = parentMap[p.id] || []);
+
+    let tree = new Tree({ name: "All Pages",
+                          locale: this.props.locale,
+                          permissions: this.props.permissions,
+                          root: true,
+                          children: parentMap[null] });
+    this.applyCollapsed(tree);
+    tree.updateNodesPosition();
+    return tree;
   }
 
   movePage(index, parent, position) {
@@ -69,51 +128,19 @@ class PageTreeStore extends Reflux.Store {
     this.performUpdate(index, url, data);
   }
 
-  updatePage(index, attributes) {
-    let url = `/admin/${index.node.locale}/pages/${index.node.id}.json`;
-    this.performUpdate(index, url, { page: attributes });
-  }
-
   performUpdate(index, url, data) {
-    let store = this;
-
-    let xhr = new XMLHttpRequest();
-    xhr.open("PUT", url);
-    xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
-    xhr.setRequestHeader("X-CSRF-Token", this.state.csrf_token);
-    xhr.addEventListener("load", function () {
-      if (xhr.readyState == 4 && xhr.status == "200") {
-        store.updateNode(index, JSON.parse(xhr.responseText));
-      }
-    });
-    xhr.send(JSON.stringify(data));
-  }
-
-  updateNode(index, attributes) {
-    for (var attr in attributes) {
-      if (attributes.hasOwnProperty(attr)) {
-        index.node[attr] = attributes[attr];
-      }
-    }
-    this.setState({tree: tree});
+    putJson(url, data).then(response => this.updateNode(index, response));
   }
 
-  getInitialState() {
-    return this.state.tree;
-  }
-
-  setCollapsed(id, value) {
-    var node = this.state.tree.getIndex(id).node;
-    node.collapsed = value;
-    this.storeCollapsed(id, node.collapsed);
-    this.state.tree.updateNodesPosition();
-  }
-
-  storeCollapsed(id, newState) {
-    let node = this.state.tree.getIndex(id).node;
-    var store = this.collapsedState();
-    store[node.id] = newState;
-    window.localStorage.collapsedPages = JSON.stringify(store);
+  render() {
+    return(
+      <PageTreeDraggable tree={this.state.tree}
+                         addChild={this.addChild}
+                         movedPage={this.movedPage}
+                         toggleCollapsed={this.toggleCollapsed}
+                         updatePage={this.updatePage}
+                         updateTree={this.updateTree} />
+    );
   }
 
   reorderChildren(id) {
@@ -135,69 +162,32 @@ class PageTreeStore extends Reflux.Store {
     tree.updateNodesPosition();
   }
 
-  onInit(props) {
-    let pages = props.pages;
-
-    // Build tree
-    let parentMap = pages.reduce((m, page) => {
-      let id = page.parent_page_id;
-      m[id] = [...(m[id] || []), page];
-      return m;
-    }, {});
-
-    pages.forEach((p) => p.children = parentMap[p.id] || []);
-
-    tree = new Tree({ name: "All Pages",
-                      locale: props.locale,
-                      permissions: props.permissions,
-                      root: true,
-                      children: parentMap[null] });
-    this.applyCollapsed(tree);
-    tree.updateNodesPosition();
-    this.setState({tree: tree});
-  }
-
-  onMovedPage(id) {
-    let tree = this.state.tree;
-    let index = tree.getIndex(id);
-    this.reorderChildren(index.parent);
-
-    parent = tree.getIndex(index.parent);
-    position = parent.children.indexOf(id) + 1;
-
-    this.movePage(index, parent, position);
-    this.setState({tree: tree});
-  }
-
-  onAddChild(id, attributes) {
-    let tree = this.state.tree;
-    var index = tree.append(attributes, id);
-    this.reorderChildren(id);
-    this.setCollapsed(id, false);
-    this.createPage(index, attributes);
-    this.setState({tree: tree});
-  }
-
-  onSetCSRFToken(token) {
-    this.setState({ csrf_token: token });
-  }
-
-  onToggleCollapsed(id) {
-    let tree = this.state.tree;
-    var node = tree.getIndex(id).node;
-    this.setCollapsed(id, !node.collapsed);
-    this.setState({tree: tree});
+  setCollapsed(id, value) {
+    var node = this.state.tree.getIndex(id).node;
+    node.collapsed = value;
+    this.storeCollapsed(id, node.collapsed);
+    this.state.tree.updateNodesPosition();
   }
 
-  onUpdatePage(id, attributes) {
-    let tree = this.state.tree;
-    var index = tree.getIndex(id);
-    this.updateNode(index, attributes);
-    this.updatePage(index, attributes);
+  storeCollapsed(id, newState) {
+    let node = this.state.tree.getIndex(id).node;
+    var store = this.collapsedState();
+    store[node.id] = newState;
+    window.localStorage.collapsedPages = JSON.stringify(store);
   }
 
-  onUpdateTree(newTree) {
-    tree = newTree;
-    this.setState({tree: tree});
+  updateNode(index, attributes) {
+    for (var attr in attributes) {
+      if (Object.prototype.hasOwnProperty.call(attributes, attr)) {
+        index.node[attr] = attributes[attr];
+      }
+    }
+    this.setState({ tree: this.state.tree });
   }
 }
+
+PageTree.propTypes = {
+  pages: PropTypes.array,
+  locale: PropTypes.string,
+  permissions: PropTypes.array
+};

data/app/{assets/javascripts/pages/admin/components/page_tree.jsx → javascript/components/PageTreeDraggable.jsx}

@@ -25,18 +25,16 @@
    SOFTWARE.
  */
 
-class PageTree extends Reflux.Component {
+import React from "react";
+import PropTypes from "prop-types";
+import PageTreeNode from "./PageTreeNode";
+
+export default class PageTreeDraggable extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       dragging: this.initDragging()
     };
-    this.store = PageTreeStore;
-  }
-
-  componentDidMount() {
-    PageTreeActions.setCSRFToken(this.props.csrf_token);
-    PageTreeActions.init(this.props);
   }
 
   initDragging() {
@@ -52,7 +50,7 @@ class PageTree extends Reflux.Component {
   }
 
   getDraggingDom() {
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
     if (dragging && dragging.id) {
       var draggingIndex = tree.getIndex(dragging.id);
@@ -77,7 +75,7 @@ class PageTree extends Reflux.Component {
   }
 
   render() {
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
 
     if (!tree) {
@@ -118,19 +116,22 @@ class PageTree extends Reflux.Component {
       locale: parent.node.locale,
       parent_page_id: parent.node.id
     };
-    PageTreeActions.addChild(parent.id, newNode);
+    this.props.addChild(parent.id, newNode);
   }
 
   prevAddButtonCount(tree, index) {
-    var pointer = index;
-    var parentNodes = [];
-    while (pointer = tree.getIndex(pointer.parent)) {
+    let count = 0;
+    let parentNodes = [];
+    let pointer = tree.getIndex(index.parent);
+    while (pointer) {
       parentNodes.push(pointer);
+      pointer = tree.getIndex(pointer.parent);
     }
 
-    var pointer = index;
-    var count = 0;
-    while (pointer = tree.getNodeByTop(pointer.top - 1)) {
+    pointer = index;
+
+    pointer = tree.getNodeByTop(index.top - 1);
+    while (pointer) {
       if (
         parentNodes.indexOf(pointer) == -1 &&
         !pointer.node.collapsed &&
@@ -138,6 +139,7 @@ class PageTree extends Reflux.Component {
       ) {
         count += 1;
       }
+      pointer = tree.getNodeByTop(pointer.top - 1);
     }
 
     return count;
@@ -165,7 +167,7 @@ class PageTree extends Reflux.Component {
       }
     }
 
-    var tree = this.state.tree;
+    var tree = this.props.tree;
     var dragging = this.state.dragging;
     var paddingLeft = this.props.paddingLeft;
     var newIndex = null;
@@ -190,7 +192,7 @@ class PageTree extends Reflux.Component {
     if (diffX < 0) {
       // left
       if (index.parent && !index.next) {
-        newIndex = tree.move(index.id, index.parent, 'after');
+        newIndex = tree.move(index.id, index.parent, "after");
       }
     } else if (diffX > paddingLeft) {
       // right
@@ -198,7 +200,7 @@ class PageTree extends Reflux.Component {
         var prev = tree.getIndex(index.prev);
 
         if (!prev.node.leaf && !prev.node.collapsed) {
-          newIndex = tree.move(index.id, index.prev, 'append');
+          newIndex = tree.move(index.id, index.prev, "append");
         }
       }
     }
@@ -212,7 +214,7 @@ class PageTree extends Reflux.Component {
     if (diffY < (0 - dragging.h * 0.5)) {
       // up
       var above = tree.getNodeByTop(index.top-1);
-      newIndex = tree.move(index.id, above.id, 'before');
+      newIndex = tree.move(index.id, above.id, "before");
     } else if (diffY > dragging.h * 1.5) {
       // down
       let below = index.next ?
@@ -221,9 +223,9 @@ class PageTree extends Reflux.Component {
 
       if (below && below.parent !== index.id) {
         if (below.children && below.children.length && !below.node.collapsed) {
-          newIndex = tree.move(index.id, below.id, 'prepend');
+          newIndex = tree.move(index.id, below.id, "prepend");
         } else {
-          newIndex = tree.move(index.id, below.id, 'after');
+          newIndex = tree.move(index.id, below.id, "after");
         }
       }
     }
@@ -233,10 +235,7 @@ class PageTree extends Reflux.Component {
       dragging.id = newIndex.id;
     }
 
-    this.setState({
-      dragging: dragging,
-      tree: tree
-    });
+    this.setState({ dragging: dragging });
   }
 
   dragStart(id, dom, e) {
@@ -265,36 +264,43 @@ class PageTree extends Reflux.Component {
     this._dragListener = (e) => self.drag(e);
     this._dragEndListener = () => self.dragEnd();
 
-    window.addEventListener('mousemove', this._dragListener);
-    window.addEventListener('mouseup', this._dragEndListener);
+    window.addEventListener("mousemove", this._dragListener);
+    window.addEventListener("mouseup", this._dragEndListener);
   }
 
   dragEnd() {
     if (!this._start) {
-      PageTreeActions.updateTree(this.state.tree);
-      PageTreeActions.movedPage(this.state.dragging.id);
+      this.props.updateTree(this.props.tree);
+      this.props.movedPage(this.state.dragging.id);
     }
 
     this.setState({
       dragging: this.initDragging()
     });
 
-    window.removeEventListener('mousemove', this._dragListener);
-    window.removeEventListener('mouseup', this._dragEndListener);
+    window.removeEventListener("mousemove", this._dragListener);
+    window.removeEventListener("mouseup", this._dragEndListener);
   }
 
   toggleCollapse(nodeId) {
-    PageTreeActions.toggleCollapsed(nodeId);
+    this.props.toggleCollapsed(nodeId);
   }
 
   updatePage(index, attributes) {
-    PageTreeActions.updatePage(
-      index.id,
-      attributes
-    );
+    this.props.updatePage(index.id, attributes);
   }
 }
 
-PageTree.defaultProps = {
+PageTreeDraggable.defaultProps = {
   paddingLeft: 15
 };
+
+PageTreeDraggable.propTypes = {
+  tree: PropTypes.object,
+  addChild: PropTypes.func,
+  movedPage: PropTypes.func,
+  toggleCollapsed: PropTypes.func,
+  paddingLeft: PropTypes.number,
+  updatePage: PropTypes.func,
+  updateTree: PropTypes.func,
+};