pages_core 3.12.0 → 3.12.2

data/app/javascript/components/PageTree.jsx

@@ -1,196 +0,0 @@
-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);
-  }
-
-  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) {
-    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 (Object.prototype.hasOwnProperty.call(collapsedState, node.id)) {
-        node.collapsed = collapsedState[node.id];
-      } else if (node.news_page) {
-        node.collapsed = true;
-      } else if (depth(tree, index) > 1) {
-        node.collapsed = true;
-      }
-      if (index.children && index.children.length) {
-        index.children.forEach(c => walk(c));
-      }
-    };
-    walk(1);
-  }
-
-  collapsedState() {
-    if (window && window.localStorage &&
-        typeof(window.localStorage.collapsedPages) != "undefined") {
-      return JSON.parse(window.localStorage.collapsedPages);
-    }
-    return {};
-  }
-
-  createPage(index, attributes) {
-    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) {
-    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);
-  }
-
-  performUpdate(index, url, data) {
-    putJson(url, data).then(response => this.updateNode(index, response));
-  }
-
-  render() {
-    return(
-      <PageTreeDraggable tree={this.state.tree}
-                         addChild={this.addChild}
-                         movedPage={this.movedPage}
-                         toggleCollapsed={this.toggleCollapsed}
-                         updatePage={this.updatePage}
-                         updateTree={this.updateTree}
-                         locale={this.props.locale}
-                         dir={this.props.dir} />
-    );
-  }
-
-  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();
-  }
-
-  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);
-  }
-
-  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,
-  dir: PropTypes.string,
-  permissions: PropTypes.array
-};

data/app/javascript/components/RichTextToolbarButton.jsx

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

@@ -1,72 +0,0 @@
-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" aria-live="polite">
-        {toast && (
-          <div className={classNames.join(" ")}>
-            {toast.message}
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-Toast.propTypes = {
-  notice: PropTypes.string,
-  error: PropTypes.string
-};

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

@@ -1,17 +0,0 @@
-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 };
-}

data/app/javascript/stores/ModalStore.jsx

@@ -1,12 +0,0 @@
-import { createStore } from "redux";
-
-export default createStore((state = {}, action) => {
-  switch(action.type) {
-  case "OPEN":
-    return {...state, component: action.payload };
-  case "CLOSE":
-    return {...state, component: null };
-  default:
-    return state;
-  }
-});

data/app/javascript/stores/ToastStore.jsx

@@ -1,14 +0,0 @@
-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;
-  }
-});

data/app/javascript/stores.js

@@ -1,2 +0,0 @@
-export { default as ModalStore } from "./stores/ModalStore";
-export { default as ToastStore } from "./stores/ToastStore";

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/GridOverlay.js

@@ -1,66 +0,0 @@
-class GridOverlay {
-  constructor() {
-    this.gridOverlay = null;
-    this.showGrid = false;
-    this.init = this.init.bind(this);
-  }
-
-  bindHotkey() {
-    document.addEventListener("keyup", (evt) => {
-      if (evt.ctrlKey && evt.which == 71) {
-        this.toggle();
-      }
-    });
-  }
-
-  init() {
-    this.gridOverlay = document.querySelector(".grid-overlay");
-    if (this.gridOverlay) {
-      this.restoreState();
-      this.bindHotkey();
-      this.updateDOM();
-    }
-  }
-
-  ready(callback) {
-    if (document.readyState === "complete" ||
-        (document.readyState !== "loading" &&
-         !document.documentElement.doScroll)) {
-      callback();
-    } else {
-      document.addEventListener("DOMContentLoaded", callback);
-    }
-  }
-
-  restoreState() {
-    this.showGrid = window.localStorage.getItem("showGrid");
-  }
-
-  saveState() {
-    if (this.showGrid) {
-      window.localStorage.setItem("showGrid", "true");
-    } else {
-      window.localStorage.removeItem("showGrid");
-    }
-  }
-
-  start() {
-    this.ready(this.init);
-  }
-
-  toggle() {
-    this.showGrid = !this.showGrid;
-    this.saveState();
-    this.updateDOM();
-  }
-
-  updateDOM() {
-    if (this.showGrid) {
-      this.gridOverlay.classList.add("grid-overlay--active");
-    } else {
-      this.gridOverlay.classList.remove("grid-overlay--active");
-    }
-  }
-}
-
-export default new GridOverlay();

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/ResponsiveEmbeds.js

@@ -1,72 +0,0 @@
-class ResponsiveEmbeds {
-  readyHandler(fn) {
-    if (document.readyState === "complete" || document.readyState === "interactive") {
-      setTimeout(fn, 1);
-    } else {
-      document.addEventListener("DOMContentLoaded", fn);
-    }
-  }
-
-  wrapEmbeds() {
-    let selectors = [ "iframe[src*=\"bandcamp.com\"]",
-                      "iframe[src*=\"player.vimeo.com\"]",
-                      "iframe[src*=\"youtube.com\"]",
-                      "iframe[src*=\"youtube-nocookie.com\"]",
-                      "iframe[src*=\"spotify.com\"]",
-                      "iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]" ];
-
-    let embeds = Array.prototype.slice.call(
-      document.querySelectorAll(selectors.join(","))
-    );
-
-    function wrapEmbed(embed) {
-      const parent = embed.parentNode;
-
-      // Recycle the existing container if the embed is already responsive.
-      if (parent.tagName === "DIV" &&
-          parent.childNodes.length === 1 &&
-          parent.style.position === "relative") {
-        return parent;
-      }
-
-      let wrapper = document.createElement("div");
-      if (parent.tagName === "P") {
-        parent.parentNode.replaceChild(wrapper, parent);
-      } else {
-        parent.replaceChild(wrapper, embed);
-      }
-      wrapper.appendChild(embed);
-      return wrapper;
-    }
-
-    embeds.forEach(function (embed) {
-      if (embed.parentNode &&
-          embed.parentNode.classList.contains("responsive-embed")) {
-        return;
-      }
-
-      let width = embed.offsetWidth;
-      let height = embed.offsetHeight;
-      let ratio = height / width;
-      let wrapper = wrapEmbed(embed);
-
-      wrapper.classList.add("responsive-embed");
-      wrapper.style.position = "relative";
-      wrapper.style.width = "100%";
-      wrapper.style.paddingTop = 0;
-      wrapper.style.paddingBottom = (ratio * 100) + "%";
-
-      embed.style.position = "absolute";
-      embed.style.width = "100%";
-      embed.style.height = "100%";
-      embed.style.top = "0";
-      embed.style.left = "0";
-    });
-  }
-
-  start() {
-    this.readyHandler(() => this.wrapEmbeds());
-  }
-}
-
-export default new ResponsiveEmbeds();

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.sass.scss

@@ -1,15 +0,0 @@
-// Entry point for your Sass build
-@import
-'vendor/normalize',
-'config',
-
-'framework/breakpoints',
-'framework/clearfix',
-'framework/grid',
-'framework/grid_overlay',
-'framework/fonts',
-
-'global/colors',
-'global/typography',
-
-'components/base';

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.scss

@@ -1,12 +0,0 @@
-*, *:before, *:after {
-  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
-}
-
-figure {
-  padding: 0px;
-  margin: 0px;
-}
-
-img {
-  display: block;
-}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.scss

@@ -1,26 +0,0 @@
-$breakpoints: (mobile: 900px,
-               large: 1400px);
-
-$grids : (default: (column-count: 12,
-                    column: 94px,
-                    gutter: 24px,
-                    padding: 24px),
-          mobile: (column-count: 4,
-                   column: 60px,
-                   gutter: 16px,
-                   padding: 16px));
-
-$spacings: (1: 8px,
-            2: 16px,
-            3: 24px,
-            4: 32px,
-            5: 40px,
-            6: 48px,
-            8: 64px,
-            9: 72px,
-            10: 80px,
-            16: 128px,
-            20: 160px);
-
-// Uncomment to limit full width
-// $limit-width: 1600px;

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/breakpoints.scss

@@ -1,42 +0,0 @@
-// ---- Defaults --------------------------------------------------------------
-
-$breakpoints: (mobile: 900px,
-               large: 1400px) !default;
-
-
-// ---- Mixins ----------------------------------------------------------------
-
-@function breakpoint-value($value) {
-  @if type-of($value) == "string" {
-    @return map-get($breakpoints, $value);
-  }
-  @else {
-    @return $value;
-  }
-}
-
-@mixin breakpoint($min: "", $max: "", $orientation: "") {
-  $query: "screen";
-
-  @if $min != "" {
-    $query: $query + ' and (min-width: #{breakpoint-value($min)})';
-  }
-
-  @if $max != "" {
-    $query: $query + ' and (max-width: #{breakpoint-value($max)})';
-  }
-
-  @if $orientation != "" {
-    $query: $query + ' and (orientation: #{$orientation})';
-  }
-
-  @media #{$query} {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @include breakpoint($max: mobile) {
-    @content
-  }
-}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/clearfix.scss

@@ -1,7 +0,0 @@
-%clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/framework/fonts.scss

@@ -1,32 +0,0 @@
-@use "sass:list";
-
-@function font-extension($format) {
-  $font-extensions: (opentype: "otf", truetype: "ttf");
-  $value: map-get($font-extensions, $format);
-  @if $value {
-    @return $value;
-  }
-  @else {
-    @return $format;
-  }
-}
-
-@function font-sources($filename, $formats: ()) {
-  $urls: ();
-  @each $f in list.join((woff2 woff), $formats) {
-    $urls: list.append(
-      $urls,
-      url("#{$filename}.#{font-extension($f)}") format("#{$f}")
-    );
-  }
-  @return list.join($urls, (), comma);
-}
-
-@mixin font-face($name, $filename, $weight: 400, $style: normal, $formats: ()) {
-  @font-face {
-    font-family: $name;
-    font-style: $style;
-    font-weight: $weight;
-    src: font-sources($filename, $formats);
-  }
-}