pages_core 3.6.0 → 3.8.0

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

@@ -0,0 +1,51 @@
+function hovering(dragState, target) {
+  let { x, y } = dragState;
+  var rect;
+  if (target.rect) {
+    rect = target.rect;
+  } else if (target.current) {
+    rect = target.current.getBoundingClientRect();
+  } else {
+    return false;
+  }
+  return (x >= rect.left && x <= rect.right &&
+          y >= rect.top && y <= rect.bottom);
+}
+
+export function collectionOrder(collection, dragState) {
+  const { draggables, ref } = collection;
+  const { dragging } = dragState;
+
+  if (!dragging) {
+    return draggables;
+  }
+
+  let ordered = draggables.filter(d => d.handle !== dragging.handle);
+  if (hovering(dragState, ref)) {
+    const hovered = ordered.filter(d => hovering(dragState, d))[0];
+    if (hovered) {
+      const index = ordered.indexOf(hovered);
+      ordered = [...ordered.slice(0, index),
+                 dragging,
+                 ...ordered.slice(index)];
+    } else {
+      ordered = [...ordered, dragging];
+    }
+  }
+
+  return ordered;
+}
+
+export default function draggedOrder(collection, dragState) {
+  let ordered = collectionOrder(collection, dragState);
+
+  if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {
+    if (dragState.y < collection.ref.current.getBoundingClientRect().top) {
+      ordered = [dragState.dragging, ...ordered];
+    } else {
+      ordered.push(dragState.dragging);
+    }
+  }
+
+  return ordered;
+}

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

@@ -0,0 +1,84 @@
+import React, { useEffect, useReducer, useRef } from "react";
+import uniqueId from "lodash/uniqueId";
+
+function getPosition(draggable) {
+  if (draggable.ref.current) {
+    return draggable.ref.current.getBoundingClientRect();
+  } else {
+    return null;
+  }
+}
+
+function hideDraggable(draggable, callback) {
+  if (draggable && draggable.ref && draggable.ref.current) {
+    const prevDisplay = draggable.ref.current.style.display;
+    draggable.ref.current.style.display = "none";
+    const result = callback();
+    draggable.ref.current.style.display = prevDisplay;
+    return result;
+  }
+  else {
+    return callback();
+  }
+}
+
+function dragCollectionReducer(state, action) {
+  switch (action.type) {
+  case "append":
+    return [...state, ...action.payload];
+  case "prepend":
+    return [...action.payload, ...state];
+  case "insertFiles":
+    var index = state.indexOf("Files");
+
+    if (index === -1 || !action.payload) {
+      return state;
+    } else {
+      return [...state.slice(0, index),
+              ...action.payload,
+              ...state.slice(index + 1)];
+    }
+  case "update":
+    return state.map(d => {
+      return (d.handle === action.payload.handle) ? action.payload : d;
+    });
+  case "updatePositions":
+    return hideDraggable(action.payload, () => {
+      return state.map(d => {
+        return { ...d, rect: getPosition(d) };
+      });
+    });
+  case "remove":
+    return state.filter(d => d.handle !== action.payload.handle);
+  case "replace":
+    return action.payload;
+  case "reorder":
+    return action.payload;
+  default:
+    return state;
+  }
+}
+
+export function createDraggable(record) {
+  return { record: record,
+           rect: null,
+           ref: React.createRef(),
+           handle: uniqueId("draggable") };
+}
+
+export default function useDragCollection(records) {
+  const containerRef = useRef();
+  const [draggables, dispatch] = useReducer(
+    dragCollectionReducer,
+    [],
+    () => records.map(r => createDraggable(r))
+  );
+
+  useEffect(() => {
+    dispatch({ type: "updatePositions" });
+  }, []);
+
+  return { ref: containerRef,
+           draggables: draggables,
+           dispatch: dispatch };
+}

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

@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+
+function containsFiles(evt) {
+  if (!evt.dataTransfer || !evt.dataTransfer.types) {
+    return false;
+  }
+  const types = evt.dataTransfer.types;
+  for (var i = 0; i < types.length; i++) {
+    if (types[i] === "Files" || types[i] === "application/x-moz-file") {
+      return true;
+    }
+  }
+  return false;
+}
+
+function getFiles(dt) {
+  var files = [];
+  if (dt.items) {
+    for (let i = 0; i < dt.items.length; i++) {
+      if (dt.items[i].kind == "file") {
+        files.push(dt.items[i].getAsFile());
+      }
+    }
+  } else {
+    for (let i = 0; i < dt.files.length; i++) {
+      files.push(dt.files[i]);
+    }
+  }
+  return files;
+}
+
+function mousePosition(evt) {
+  var x, y;
+  if (evt.type == "touchmove") {
+    x = evt.touches[0].clientX;
+    y = evt.touches[0].clientY;
+  } else {
+    x = evt.clientX;
+    y = evt.clientY;
+  }
+  return { x: x, y: y };
+}
+
+export default function useDragUploader(collections, onDragEnd) {
+  const [dragState, setDragState] = useState({
+    dragging: false,
+    x: null, y: null
+  });
+
+  const updatePositions = (dragging) => {
+    collections.forEach(c => {
+      c.dispatch({ type: "updatePositions", payload: dragging });
+    });
+  };
+
+  const startDrag = (evt, draggable) => {
+    updatePositions(draggable);
+    setDragState({ dragging: draggable, ...mousePosition(evt) });
+  };
+
+  const drag = (evt) => {
+    if (dragState.dragging) {
+      evt.stopPropagation();
+      evt.preventDefault();
+      setDragState({ ...dragState, ...mousePosition(evt) });
+    } else {
+      if (containsFiles(evt)) {
+        startDrag(evt, "Files");
+      }
+    }
+  };
+
+  const dragEnd = (evt) => {
+    if (dragState.dragging) {
+      const prevDragState = dragState;
+      var files = [];
+      evt.preventDefault();
+      evt.stopPropagation();
+      if (dragState.dragging == "Files") {
+        files = getFiles(evt.dataTransfer);
+      }
+      setDragState({ dragging: false, x: null, y: null });
+      onDragEnd(prevDragState, files);
+      updatePositions();
+    }
+  };
+
+  const dragLeave = (evt) => {
+    if (dragState.dragging === "Files") {
+      evt.preventDefault();
+      evt.stopPropagation();
+      setDragState({ dragging: false, x: null, y: null });
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("mousemove", drag);
+    window.addEventListener("touchmove", drag);
+    window.addEventListener("mouseup", dragEnd);
+    window.addEventListener("touchend", dragEnd);
+    window.addEventListener("mouseout", dragLeave);
+    return function cleanup() {
+      window.removeEventListener("mousemove", drag);
+      window.removeEventListener("touchmove", drag);
+      window.removeEventListener("mouseup", dragEnd);
+      window.removeEventListener("touchend", dragEnd);
+      window.removeEventListener("mouseout", dragLeave);
+    };
+  });
+
+  return [dragState, startDrag, { onDragOver: drag, onDrop: dragEnd }];
+}

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

@@ -0,0 +1,17 @@
+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/components/drag.js

@@ -0,0 +1,6 @@
+export { default as useDragCollection,
+         createDraggable } from "./drag/useDragCollection";
+export { default as useDragUploader } from "./drag/useDragUploader";
+export { default as useDraggable } from "./drag/useDraggable";
+export { default as draggedOrder,
+         collectionOrder } from "./drag/draggedOrder";

data/app/javascript/components.js

@@ -0,0 +1,14 @@
+export { default as Attachments } from "./components/Attachments";
+export { default as DateRangeSelect } from "./components/DateRangeSelect";
+export { default as EditableImage } from "./components/EditableImage";
+export { default as ImageCropper } from "./components/ImageCropper";
+export { default as ImageGrid } from "./components/ImageGrid";
+export { default as ImageUploader } from "./components/ImageUploader";
+export { default as Modal } from "./components/Modal";
+export { default as PageDates } from "./components/PageDates";
+export { default as PageFiles } from "./components/PageFiles";
+export { default as PageImages } from "./components/PageImages";
+export { default as PageTree } from "./components/PageTree";
+export { default as RichTextArea } from "./components/RichTextArea";
+export { default as TagEditor } from "./components/TagEditor";
+export { default as Toast } from "./components/Toast";

data/app/javascript/controllers/EditPageController.js

@@ -0,0 +1,20 @@
+import { Controller } from "stimulus";
+
+export default class EditPageController extends Controller {
+  static get targets() {
+    return ["form"];
+  }
+
+  preview() {
+    const form = this.formTarget;
+    const prevAction = form.action;
+    const prevTarget = form.target;
+
+    form.target = "_blank";
+    form.action = form.dataset.previewUrl;
+    form.submit();
+
+    form.action = prevAction;
+    form.target = prevTarget;
+  }
+}

data/app/javascript/controllers/LoginController.js

@@ -0,0 +1,29 @@
+import { Controller } from "stimulus";
+
+export default class LoginController extends Controller {
+  static get targets() {
+    return ["tab"];
+  }
+
+  connect() {
+    if (this.tabTargets.length > 0) {
+      this.showTab(this.tabTargets[0].dataset.tab);
+    }
+  }
+
+
+  changeTab(evt) {
+    evt.preventDefault();
+    this.showTab(evt.target.dataset.tab);
+  }
+
+  showTab(tab) {
+    this.tabTargets.forEach((t) => {
+      if (t.dataset.tab == tab) {
+        t.classList.remove("hidden");
+      } else {
+        t.classList.add("hidden");
+      }
+    });
+  }
+}

data/app/javascript/controllers/MainController.js

@@ -0,0 +1,65 @@
+import { Controller } from "stimulus";
+
+export default class MainController extends Controller {
+  static get targets() {
+    return ["tab", "link"];
+  }
+
+  connect() {
+    let tabs = this.tabNames();
+    if (tabs.length > 0) {
+      let initTab = null;
+      const tabExpression = /#(.*)$/;
+
+      if (document.location.toString().match(tabExpression)) {
+        let id = document.location.toString().match(tabExpression)[1];
+        if (tabs.indexOf(id) !== -1) {
+          initTab = id;
+        }
+      }
+
+      this.showTab(initTab || tabs[0]);
+    }
+
+    window.addEventListener("popstate", this.stateHandler.bind(this));
+  }
+
+  disconnect() {
+    window.removeEventListener("popstate", this.stateHandler.bind(this));
+  }
+
+  stateHandler(evt) {
+    if (evt.state && evt.state.tabId) {
+      this.showTab(evt.state.tabId);
+    }
+  }
+
+  changeTab(evt) {
+    evt.preventDefault();
+    const tab = evt.target.dataset.tab;
+    this.showTab(tab);
+    history.pushState({ tabId: tab }, "", `${window.location.pathname}#${tab}`);
+  }
+
+  showTab(tab) {
+    this.linkTargets.forEach((l) => {
+      if (l.dataset.tab == tab) {
+        l.classList.add("current");
+      } else {
+        l.classList.remove("current");
+      }
+    });
+
+    this.tabTargets.forEach((t) => {
+      if (t.dataset.tab == tab) {
+        t.classList.remove("hidden");
+      } else {
+        t.classList.add("hidden");
+      }
+    });
+  }
+
+  tabNames () {
+    return this.linkTargets.map((l) => l.dataset.tab);
+  }
+}

data/app/javascript/controllers/PageOptionsController.js

@@ -0,0 +1,62 @@
+import { Controller } from "stimulus";
+
+export default class PageOptionsController extends Controller {
+  static get targets() {
+    return ["advancedOptions", "autoPublishNotice", "published", "publishedDate"];
+  }
+
+  connect() {
+    this.checkAutoPublish();
+    this.checkPublishedDate();
+  }
+
+  checkAutoPublish() {
+    if (this.publishedDate() > new Date()) {
+      this.show(this.autoPublishNoticeTarget);
+    } else {
+      this.hide(this.autoPublishNoticeTarget);
+    }
+  }
+
+  checkPublishedDate() {
+    if (this.publishedTarget.value == 2) {
+      this.show(this.publishedDateTarget);
+    } else {
+      this.hide(this.publishedDateTarget);
+    }
+  }
+
+  publishedDate() {
+    const lookup = (name) => {
+      return this.publishedDateTarget.getElementsByClassName(name)[0].value;
+    };
+    return new Date(
+      lookup("year"),
+      (lookup("month") - 1),
+      lookup("day"),
+      lookup("hour"),
+      lookup("minute")
+    );
+  }
+
+  show(elem) {
+    elem.classList.add("show");
+  }
+
+  hide(elem) {
+    elem.classList.remove("show");
+  }
+
+  toggle(elem) {
+    if (elem.classList.contains("show")) {
+      this.hide(elem);
+    } else {
+      this.show(elem);
+    }
+  }
+
+  toggleAdvancedOptions(evt) {
+    evt.preventDefault();
+    this.toggle(this.advancedOptionsTarget);
+  }
+}

data/app/javascript/features/RichText.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import RichTextArea from "../components/RichTextArea";
+import readyHandler from "../lib/readyHandler";
+
+class RichText {
+  apply () {
+    const elems = document.querySelectorAll("textarea.rich");
+    elems.forEach((elem) => {
+      this.enhance(elem);
+    });
+  }
+
+  enhance (elem) {
+    const container = document.createElement("div");
+    elem.parentNode.appendChild(container);
+    ReactDOM.render(
+      <RichTextArea value={elem.value}
+                    name={elem.name}
+                    rows={elem.rows}
+                    id={elem.id} />,
+      container
+    );
+    elem.parentNode.removeChild(elem);
+  }
+
+  start () {
+    readyHandler.ready(() => {
+      this.apply();
+    });
+  }
+}
+
+export default new RichText();

data/app/javascript/hooks.js

@@ -0,0 +1,2 @@
+export { useCrop, cropParams } from "./components/ImageCropper";
+export * from "./components/drag";

data/app/javascript/index.js

@@ -0,0 +1,33 @@
+import Rails from "@rails/ujs";
+import { Application } from "stimulus";
+require("react_ujs");
+
+import * as Components from "./components";
+
+import EditPageController from "./controllers/EditPageController";
+import MainController from "./controllers/MainController";
+import LoginController from "./controllers/LoginController";
+import PageOptionsController from "./controllers/PageOptionsController";
+
+import RichText from "./features/RichText";
+
+export function registerComponent(name, component) {
+  window[name] = component;
+}
+
+export default function startPages () {
+  Rails.start();
+  for (var name in Components) {
+    registerComponent(name, Components[name]);
+  }
+  RichText.start();
+
+  const application = Application.start();
+  application.register("edit-page", EditPageController);
+  application.register("main", MainController);
+  application.register("login", LoginController);
+  application.register("page-options", PageOptionsController);
+}
+
+export * from "./components";
+export * from "./hooks";