pages_core 3.4.3 → 3.7.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.jsx

@@ -0,0 +1,300 @@
+/*
+   Based on react-ui-tree
+   https://github.com/pqx/react-ui-tree
+
+   The MIT License (MIT)
+
+   Copyright (c) 2015 pqx Limited
+
+   Permission is hereby granted, free of charge, to any person obtaining a copy
+   of this software and associated documentation files (the "Software"), to deal
+   in the Software without restriction, including without limitation the rights
+   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+   copies of the Software, and to permit persons to whom the Software is
+   furnished to do so, subject to the following conditions:
+
+   The above copyright notice and this permission notice shall be included in all
+   copies or substantial portions of the Software.
+
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+   SOFTWARE.
+ */
+
+class PageTree extends Reflux.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() {
+    return {
+      id: null,
+      x: null,
+      y: null,
+      w: null,
+      h: null,
+      scrollTop: null,
+      scrollLeft: null
+    };
+  }
+
+  getDraggingDom() {
+    var tree = this.state.tree;
+    var dragging = this.state.dragging;
+    if (dragging && dragging.id) {
+      var draggingIndex = tree.getIndex(dragging.id);
+      var draggingStyles = {
+        top: dragging.y,
+        left: dragging.x,
+        width: dragging.w
+      };
+
+      return (
+        <div className="draggable" style={draggingStyles}>
+          <PageTreeNode
+              tree={tree}
+              index={draggingIndex}
+              paddingLeft={this.props.paddingLeft}
+          />
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  render() {
+    var tree = this.state.tree;
+    var dragging = this.state.dragging;
+
+    if (!tree) {
+      return (
+        <div className="page-tree">
+          {this.getDraggingDom()}
+        </div>
+      );
+    } else {
+      var root = tree.getIndex(1);
+      return (
+        <div className="page-tree">
+          {this.getDraggingDom()}
+          <PageTreeNode
+              tree={tree}
+              index={root}
+              key={root.id}
+              paddingLeft={this.props.paddingLeft}
+              addChild={id => this.addChild(id)}
+              onDragStart={(id, dom, e) => this.dragStart(id, dom, e)}
+              onCollapse={nodeId => this.toggleCollapse(nodeId)}
+              updatePage={(idx, attrs) => this.updatePage(idx, attrs)}
+              dragging={dragging && dragging.id}
+          />
+        </div>
+      );
+    }
+  }
+
+  addChild(parent) {
+    let newNode = {
+      name: "",
+      status: 0,
+      editing: true,
+      children: [],
+      published_at: new Date(),
+      pinned: false,
+      locale: parent.node.locale,
+      parent_page_id: parent.node.id
+    };
+    PageTreeActions.addChild(parent.id, newNode);
+  }
+
+  prevAddButtonCount(tree, index) {
+    var pointer = index;
+    var parentNodes = [];
+    while (pointer = tree.getIndex(pointer.parent)) {
+      parentNodes.push(pointer);
+    }
+
+    var pointer = index;
+    var count = 0;
+    while (pointer = tree.getNodeByTop(pointer.top - 1)) {
+      if (
+        parentNodes.indexOf(pointer) == -1 &&
+        !pointer.node.collapsed &&
+        pointer.node.children.filter(p => p.status != 4).length > 0
+      ) {
+        count += 1;
+      }
+    }
+
+    return count;
+  }
+
+  scrollOffset() {
+    let dragging = this.state.dragging;
+    return {
+      top: document.body.scrollTop - dragging.scrollTop,
+      left: document.body.scrollLeft - dragging.scrollLeft
+    };
+  }
+
+  drag(e) {
+    if (this._start) {
+      var distance = Math.abs(e.clientX - this._offsetX) +
+                     Math.abs(e.clientY - this._offsetY);
+      if (distance >= 15) {
+        this.setState({
+          dragging: this.dragging
+        });
+        this._start = false;
+      } else {
+        return null;
+      }
+    }
+
+    var tree = this.state.tree;
+    var dragging = this.state.dragging;
+    var paddingLeft = this.props.paddingLeft;
+    var newIndex = null;
+    var index = tree.getIndex(dragging.id);
+    var collapsed = index.node.collapsed;
+
+    var _startX = this._startX;
+    var _startY = this._startY;
+    var _offsetX = this._offsetX;
+    var _offsetY = this._offsetY;
+
+    var pos = {
+      x: _startX + e.clientX - _offsetX + this.scrollOffset().left,
+      y: _startY + e.clientY - _offsetY + this.scrollOffset().top
+    };
+    dragging.x = pos.x;
+    dragging.y = pos.y;
+
+    var diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
+    var diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
+
+    if (diffX < 0) {
+      // left
+      if (index.parent && !index.next) {
+        newIndex = tree.move(index.id, index.parent, "after");
+      }
+    } else if (diffX > paddingLeft) {
+      // right
+      if (index.prev) {
+        var prev = tree.getIndex(index.prev);
+
+        if (!prev.node.leaf && !prev.node.collapsed) {
+          newIndex = tree.move(index.id, index.prev, "append");
+        }
+      }
+    }
+
+    if (newIndex) {
+      index = newIndex;
+      newIndex.node.collapsed = collapsed;
+      dragging.id = newIndex.id;
+    }
+
+    if (diffY < (0 - dragging.h * 0.5)) {
+      // up
+      var above = tree.getNodeByTop(index.top-1);
+      newIndex = tree.move(index.id, above.id, "before");
+    } else if (diffY > dragging.h * 1.5) {
+      // down
+      let below = index.next ?
+                  tree.getIndex(index.next) :
+                  tree.getNodeByTop(index.top + index.height);
+
+      if (below && below.parent !== index.id) {
+        if (below.children && below.children.length && !below.node.collapsed) {
+          newIndex = tree.move(index.id, below.id, "prepend");
+        } else {
+          newIndex = tree.move(index.id, below.id, "after");
+        }
+      }
+    }
+
+    if (newIndex) {
+      newIndex.node.collapsed = collapsed;
+      dragging.id = newIndex.id;
+    }
+
+    this.setState({
+      dragging: dragging,
+      tree: tree
+    });
+  }
+
+  dragStart(id, dom, e) {
+    // Only drag on left click
+    if (e.button !== 0) {
+      return;
+    }
+
+    this.dragging = {
+      id: id,
+      w: dom.offsetWidth,
+      h: dom.offsetHeight,
+      x: dom.offsetLeft,
+      y: dom.offsetTop,
+      scrollTop: document.body.scrollTop,
+      scrollLeft: document.body.scrollLeft
+    };
+
+    this._startX = dom.offsetLeft;
+    this._startY = dom.offsetTop;
+    this._offsetX = e.clientX;
+    this._offsetY = e.clientY;
+    this._start = true;
+
+    var self = this;
+    this._dragListener = (e) => self.drag(e);
+    this._dragEndListener = () => self.dragEnd();
+
+    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.setState({
+      dragging: this.initDragging()
+    });
+
+    window.removeEventListener("mousemove", this._dragListener);
+    window.removeEventListener("mouseup", this._dragEndListener);
+  }
+
+  toggleCollapse(nodeId) {
+    PageTreeActions.toggleCollapsed(nodeId);
+  }
+
+  updatePage(index, attributes) {
+    PageTreeActions.updatePage(
+      index.id,
+      attributes
+    );
+  }
+}
+
+PageTree.defaultProps = {
+  paddingLeft: 15
+};