pages_core 3.5.1 → 3.6.0

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

@@ -0,0 +1,48 @@
+class Modal extends Reflux.Component {
+  constructor(props) {
+    super(props);
+    this.store = ModalStore;
+    this.closeModal = this.closeModal.bind(this);
+    this.handleKeypress = this.handleKeypress.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("keypress", this.handleKeypress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keypress", this.handleKeypress);
+  }
+
+  closeModal(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    ModalActions.close();
+  }
+
+  handleKeypress(evt) {
+    if (this.state.component && (evt.key == "Escape" || evt.keyCode === 27)) {
+      this.closeModal(evt);
+    }
+  }
+
+  render() {
+    let component = this.state.component;
+
+    if (component) {
+      document.body.classList.add("modal");
+    } else {
+      document.body.classList.remove("modal");
+      return (<div className="modal-wrapper"></div>);
+    }
+
+    return (
+      <div className="modal-wrapper open">
+        <div className="background" onClick={this.closeModal} />
+        <div className="modal">
+          {component}
+        </div>
+      </div>
+    );
+  }
+}

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

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

@@ -0,0 +1,58 @@
+class PageDates extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      has_dates: (props.starts_at ? true : false),
+      all_day:   !!props.all_day
+    };
+
+    this.toggleAllDay = this.toggleAllDay.bind(this);
+    this.toggleHasDates = this.toggleHasDates.bind(this);
+  }
+
+  toggleHasDates() {
+    this.setState({ has_dates: !this.state.has_dates });
+  }
+
+  toggleAllDay() {
+    this.setState({ all_day: !this.state.all_day });
+  }
+
+  timeToString(time) {
+    return time.toTimeString().slice(0, 5);
+  }
+
+  render() {
+    return (
+      <div className="page-dates field">
+        <input type="hidden"
+               name="page[all_day]"
+               value={(this.state.has_dates && this.state.all_day) ? "1" : "0"} />
+        <label>
+          Dates
+        </label>
+        <div className="toggles">
+          <label className="has-dates-toggle">
+            <input type="checkbox"
+                   checked={this.state.has_dates}
+                   onChange={this.toggleHasDates} />
+            Enabled
+          </label>
+          <label className={!this.state.has_dates && "disabled"}>
+            <input type="checkbox"
+                   disabled={!this.state.has_dates}
+                   checked={this.state.all_day}
+                   onChange={this.toggleAllDay} />
+            All day event
+          </label>
+        </div>
+        <DateRangeSelect objectName="page"
+                         startsAt={this.props.starts_at}
+                         endsAt={this.props.ends_at}
+                         disabled={!this.state.has_dates}
+                         disableTime={this.state.all_day}
+        />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+class PageFiles extends React.Component {
+  render() {
+    return (
+      <div className="page-files">
+        <Attachments attribute="page[page_files_attributes]"
+                     showEmbed={true}
+                     locale={this.props.locale}
+                     locales={this.props.locales}
+                     csrf_token={this.props.csrf_token}
+                     records={this.props.records} />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,16 @@
+class PageImages extends React.Component {
+  render() {
+    return (
+      <div className="page-images">
+        <ImageGrid attribute="page[page_images_attributes]"
+                   primaryAttribute="page[image_id]"
+                   enablePrimary={true}
+                   showEmbed={true}
+                   locale={this.props.locale}
+                   locales={this.props.locales}
+                   csrf_token={this.props.csrf_token}
+                   records={this.props.records} />
+      </div>
+    );
+  }
+}

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

@@ -25,42 +25,18 @@
    SOFTWARE.
  */
 
-class PageTree extends React.Component {
+class PageTree extends Reflux.Component {
   constructor(props) {
     super(props);
-    this.state = this.init(this.props);
-
-    if (props.tree) {
-      PageTreeActions.init(this.props.tree);
-    }
+    this.state = {
+      dragging: this.initDragging()
+    };
+    this.store = PageTreeStore;
   }
 
   componentDidMount() {
-    let self = this;
-    this.unsubscribe = PageTreeStore.listen(
-      newTree => self.setState({tree: newTree})
-    );
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (!this._updated) {
-      this.setState(this.init(nextProps));
-      if (nextProps.tree) {
-        PageTreeActions.init(this.props.tree);
-      }
-    } else {
-      this._updated = false;
-    }
-  }
-
-  componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  init(props) {
-    return {
-      dragging: this.initDragging()
-    };
+    PageTreeActions.setCSRFToken(this.props.csrf_token);
+    PageTreeActions.init(this.props);
   }
 
   initDragging() {
@@ -101,7 +77,6 @@ class PageTree extends React.Component {
   }
 
   render() {
-    var self = this;
     var tree = this.state.tree;
     var dragging = this.state.dragging;
 
@@ -320,11 +295,6 @@ class PageTree extends React.Component {
   }
 }
 
-PageTree.propTypes = {
-  tree: React.PropTypes.object.isRequired,
-  paddingLeft: React.PropTypes.number
-};
-
 PageTree.defaultProps = {
   paddingLeft: 15
 };

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

@@ -31,6 +31,11 @@ class PageTreeNode extends React.Component {
     this.state = { newName: props.index.node.name };
   }
 
+  permitted(action) {
+    return this.node().permissions &&
+           this.node().permissions.indexOf(action) != -1;
+  }
+
   actions() {
     let statusLabel = (this.node().status != 2) ? "Publish" : "Hide";
     let statusIcon = (this.node().status != 2) ? "check" : "ban";
@@ -53,25 +58,25 @@ class PageTreeNode extends React.Component {
     } else {
       return (
         <span className="actions">
-          {this.button(statusLabel, {
+          {this.permitted("edit") && this.button(statusLabel, {
              className: "toggle-status",
              icon: statusIcon,
              onClick: e => this.toggleStatus()
            })}
 
-          {this.button("Rename", {
+          {this.permitted("edit") && this.button("Rename", {
              className: "edit",
              icon: "pencil",
              onClick: e => this.edit()
            })}
 
-          {this.button("Delete", {
+          {this.permitted("edit") && this.button("Delete", {
              className: "delete",
              icon: "trash",
              onClick: e => this.deletePage()
            })}
 
-          {this.button("Add child", {
+          {this.permitted("create") && this.button("Add child", {
              className: "add",
              icon: "plus",
              onClick: e => this.props.addChild(this.props.index)
@@ -90,7 +95,9 @@ class PageTreeNode extends React.Component {
       }
     }
 
-    if (!node.collapsed && this.visibleChildren().length > 0) {
+    if (!node.collapsed &&
+        this.permitted("create") &&
+        (node.root || this.visibleChildren().length > 0)) {
       return (
         this.button("Add page here", {
           className: "add add-inline",
@@ -188,7 +195,9 @@ class PageTreeNode extends React.Component {
   }
 
   collapsedLabel() {
-    if (this.node().collapsed && this.node().children.length > 0) {
+    if (this.node().collapsed &&
+        this.node().children &&
+        this.node().children.length > 0) {
       let pluralized = (this.node().children.length == 1) ? "item" : "items";
       return (
         <span className="collapsed-label">
@@ -231,16 +240,17 @@ class PageTreeNode extends React.Component {
     let props = this.props;
     let index = props.index;
     let dragging = props.dragging;
+    let editing = this.node().editing;
     var classnames = "node";
 
-    var node = this.node().editing ? this.renderEditNode() : this.renderNode();
+    var node = editing ? this.renderEditNode() : this.renderNode();
 
     if (index.id === dragging) {
       classnames = "node placeholder";
     }
 
     let handleMouseDown = function (e) {
-      if (props.onDragStart) {
+      if (self.permitted("edit") && !editing && props.onDragStart) {
         props.onDragStart(props.index.id, self.refs.inner, e);
       }
     }
@@ -309,6 +319,7 @@ class PageTreeNode extends React.Component {
     let index = this.props.index;
     let node = index.node;
 
+    var dateLabel = "";
     var pageName = <span className="name">{this.pageName()}</span>;
     var className = "page";
 
@@ -318,12 +329,18 @@ class PageTreeNode extends React.Component {
       className = `page status-${this.node().status}`;
     }
 
-    if (node.id && node.locale) {
+    if (node.id && node.locale && this.permitted("edit")) {
       pageName = <a href={this.editUrl(node)} className="name">
         {this.pageName()}
       </a>;
     }
 
+    if (node.id && node.starts_at) {
+      dateLabel = <span className="date">
+        {node.starts_at}
+      </span>
+    }
+
     if (node.news_page) {
       iconClass = "fa fa-newspaper-o icon";
     } else if (node.pinned) {
@@ -334,6 +351,7 @@ class PageTreeNode extends React.Component {
       <div className={className}>
         <i className={iconClass}></i>
         {pageName}
+        {dateLabel}
         {this.statusLabel()}
         {this.collapsedLabel()}
         {this.actions()}
@@ -369,6 +387,10 @@ class PageTreeNode extends React.Component {
   }
 
   visibleChildren() {
-    return this.node().children.filter(p => p.status != 4);
+    if (this.node().children) {
+      return this.node().children.filter(p => p.status != 4);
+    } else {
+      return [];
+    }
   }
 }

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

@@ -0,0 +1,203 @@
+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);
+  }
+
+  collapsedState() {
+    if (window && window.localStorage &&
+        typeof(window.localStorage.collapsedPages) != "undefined") {
+      return JSON.parse(window.localStorage.collapsedPages);
+    }
+    return {};
+  }
+
+  applyCollapsed(tree) {
+    let store = this;
+    let collapsedState = this.collapsedState();
+    let walk = function (id) {
+      var index = tree.getIndex(id);
+      var node = index.node;
+      if (collapsedState.hasOwnProperty(node.id)) {
+        node.collapsed = collapsedState[node.id];
+      } else if (node.news_page) {
+        node.collapsed = true;
+      } else if (store.depth(tree, index) > 1) {
+        node.collapsed = true;
+      }
+      if (index.children && index.children.length) {
+        index.children.forEach(c => walk(c));
+      }
+    };
+    walk(1);
+  }
+
+  depth(tree, index) {
+    var depth = 0;
+    var pointer = index;
+    while (pointer = tree.getIndex(pointer.parent)) {
+      depth += 1;
+    }
+    return depth;
+  }
+
+  createPage(index, attributes) {
+    let store = this;
+    let url = `/admin/${index.node.locale}/pages.json`;
+    $.post(url, { page: attributes }, function (response) {
+      store.updateNode(index, response);
+    });
+  }
+
+  movePage(index, parent, position) {
+    let data = {
+      parent_id: parent.node.id,
+      position: position
+    };
+    let url = `/admin/${index.node.locale}/pages/${index.node.id}/move.json`;
+    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});
+  }
+
+  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);
+  }
+
+  reorderChildren(id) {
+    let tree = this.state.tree;
+    var index = this.state.tree.getIndex(id);
+    var node = index.node;
+    if (!node.news_page) {
+      return;
+    }
+    index.children = index.children.sort(function (a, b) {
+      var aNode = tree.getIndex(a).node;
+      var bNode = tree.getIndex(b).node;
+      if (aNode.pinned == bNode.pinned) {
+        return new Date(bNode.published_at) - new Date(aNode.published_at);
+      } else {
+        return aNode.pinned ? -1 : 1;
+      }
+    });
+    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});
+  }
+
+  onUpdatePage(id, attributes) {
+    let tree = this.state.tree;
+    var index = tree.getIndex(id);
+    this.updateNode(index, attributes);
+    this.updatePage(index, attributes);
+  }
+
+  onUpdateTree(newTree) {
+    tree = newTree;
+    this.setState({tree: tree});
+  }
+}