pages_core 3.13.0 → 3.15.0

data/app/javascript/components/TagEditor/useTags.ts

@@ -0,0 +1,58 @@
+import { useReducer } from "react";
+
+import * as Tags from "../../types/Tags";
+
+function onlyUnique(value: string, index: number, self: string[]) {
+  return self.indexOf(value) === index;
+}
+
+export function allTags(state: Tags.State) {
+  return [...state.tags, ...state.enabled].filter(onlyUnique);
+}
+
+function normalize(tag: string, state: Tags.State) {
+  return (
+    allTags(state).filter((t) => t.toLowerCase() == tag.toLowerCase())[0] || tag
+  );
+}
+
+export function isEnabled(tag: string, state: Tags.State) {
+  return (
+    state.enabled.map((t) => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1
+  );
+}
+
+function toggle(tag: string, state: Tags.State) {
+  if (isEnabled(tag, state)) {
+    return { ...state, enabled: state.enabled.filter((t) => t !== tag) };
+  } else {
+    return { ...state, enabled: [...state.enabled, tag] };
+  }
+}
+
+function reducer(state: Tags.State, action: Tags.Action) {
+  const { type, payload } = action;
+  const normalized = normalize(payload, state);
+  switch (type) {
+    case "addTag":
+      return {
+        tags: [...state.tags, normalized].filter(onlyUnique),
+        enabled: [...state.enabled, normalized].filter(onlyUnique)
+      };
+    case "toggleTag":
+      return toggle(normalized, state);
+    default:
+      return state;
+  }
+}
+
+export default function useTags(
+  initTags: string[],
+  initEnabled: string[]
+): [Tags.State, (action: Tags.Action) => void] {
+  const [state, dispatch] = useReducer(reducer, {
+    tags: initTags,
+    enabled: initEnabled
+  });
+  return [state, dispatch];
+}

data/app/javascript/components/TagEditor.tsx

@@ -1,65 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
 
-import AddTagForm from "./TagEditor/AddTagForm";
-import Tag from "./TagEditor/Tag";
+import useTags from "./TagEditor/useTags";
+import Editor from "./TagEditor/Editor";
+import * as Tags from "../types/Tags";
 
-interface TagEditorProps {
+interface Props extends Tags.State {
   name: string;
-  enabled: string[];
-  tags: string[];
 }
 
-function onlyUnique(value: string, index: number, self: string[]): number {
-  return self.indexOf(value) === index;
-}
-
-export default function TagEditor(props: TagEditorProps) {
-  const [tags, setTags] = useState(props.tags);
-  const [enabled, setEnabled] = useState(props.enabled);
-
-  const tagList = [...tags, ...enabled].filter(onlyUnique);
-
-  const normalize = (tag: string): string => {
-    return (
-      tagList.filter((t) => t.toLowerCase() == tag.toLowerCase())[0] || tag
-    );
-  };
-
-  const tagEnabled = (tag: string): boolean => {
-    return (
-      enabled.map((t) => t.toLowerCase()).indexOf(tag.toLowerCase()) !== -1
-    );
-  };
-
-  const toggleEnabled = (tag: string) => {
-    const normalized = normalize(tag);
-
-    if (tagEnabled(normalized)) {
-      setEnabled(enabled.filter((t) => t !== normalized));
-    } else {
-      setEnabled([...enabled, normalized]);
-    }
-  };
-
-  const addTag = (tag: string) => {
-    const normalized = normalize(tag);
-
-    setTags([...tags, normalized].filter(onlyUnique));
-    setEnabled([...enabled, normalized].filter(onlyUnique));
-  };
+export default function TagEditor(props: Props) {
+  const [state, dispatch] = useTags(props.tags, props.enabled);
 
-  return (
-    <div className="tag-editor clearfix">
-      <input type="hidden" name={props.name} value={JSON.stringify(enabled)} />
-      {tagList.map((t) => (
-        <Tag
-          key={t}
-          tag={t}
-          enabled={tagEnabled(t)}
-          toggleEnabled={toggleEnabled}
-        />
-      ))}
-      <AddTagForm addTag={addTag} />
-    </div>
-  );
+  return <Editor name={props.name} state={state} dispatch={dispatch} />;
 }

data/app/javascript/components/Toast.tsx

@@ -2,15 +2,15 @@ import React, { useEffect, useRef, useState } from "react";
 
 import useToastStore from "../stores/useToastStore";
 
-interface ToastProps {
+interface Props {
   error: string;
   notice: string;
 }
 
-export default function Toast(props: ToastProps) {
+export default function Toast(props: Props) {
   const [fadeout, setFadeout] = useState(false);
   const { toasts, error, notice, next } = useToastStore((state) => state);
-  const timerRef = useRef<number | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   const toast = toasts[0];
 

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

@@ -1,11 +1,14 @@
-import { Draggable, DragCollection, DragState } from "./types";
+import * as Drag from "../../types/Drag";
 
-function hovering(
-  dragState: DragState,
-  target: Draggable | React.MutableRefObject<HTMLDivElement>
-): boolean {
+function hovering<T>(
+  dragState: Drag.State<T>,
+  target: Drag.Item<T> | React.MutableRefObject<HTMLDivElement>
+) {
   const { x, y } = dragState;
   let rect: DOMRect;
+  if (typeof target === "string") {
+    return false;
+  }
   if ("rect" in target) {
     rect = target.rect;
   } else if ("current" in target && target.current) {
@@ -16,10 +19,10 @@ function hovering(
   return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
 }
 
-export function collectionOrder(
-  collection: DragCollection,
-  dragState: DragState
-): Draggable[] {
+export function collectionOrder<T>(
+  collection: Drag.Collection<T>,
+  dragState: Drag.State<T>
+): Array<Drag.Item<T>> {
   const { draggables, ref } = collection;
   const { dragging } = dragState;
 
@@ -27,7 +30,12 @@ export function collectionOrder(
     return draggables;
   }
 
-  let ordered = draggables.filter((d) => d.handle !== dragging.handle);
+  let ordered: Drag.Item<T>[] = draggables;
+  if (typeof dragging !== "string") {
+    ordered = draggables
+      .filter((d) => typeof d !== "string")
+      .filter((d: Drag.Draggable<T>) => d.handle !== dragging.handle);
+  }
   if (hovering(dragState, ref)) {
     const hovered = ordered.filter((d) => hovering(dragState, d))[0];
     if (hovered) {
@@ -41,10 +49,10 @@ export function collectionOrder(
   return ordered;
 }
 
-export default function draggedOrder(
-  collection: DragCollection,
-  dragState: DragState
-): Draggable[] {
+export default function draggedOrder<T>(
+  collection: Drag.Collection<T>,
+  dragState: Drag.State<T>
+) {
   let ordered = collectionOrder(collection, dragState);
 
   if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {

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

@@ -1,25 +1,21 @@
 import { createRef, useEffect, useReducer, useRef } from "react";
 import { uniqueId } from "lodash";
 
-import {
-  Draggable,
-  DraggableRecord,
-  DragCollectionAction,
-  DragCollection
-} from "./types";
+import * as Drag from "../../types/Drag";
 
-type Draggables = Draggable[];
-
-function getPosition(draggable: Draggable) {
-  if (draggable && draggable.ref && draggable.ref.current) {
+function getPosition<T>(draggable: Drag.Draggable<T>) {
+  if (draggable && "ref" in draggable && draggable.ref.current) {
     return draggable.ref.current.getBoundingClientRect();
   } else {
     return null;
   }
 }
 
-function hideDraggable(draggable: Draggable | null, callback: () => void) {
-  if (draggable && draggable.ref && draggable.ref.current) {
+function hideDraggable<T>(
+  draggable: Drag.Draggable<T> | null,
+  callback: () => Drag.Draggable<T>[]
+) {
+  if (draggable && "ref" in draggable && draggable.ref.current) {
     const prevDisplay = draggable.ref.current.style.display;
     draggable.ref.current.style.display = "none";
     const result = callback();
@@ -30,7 +26,10 @@ function hideDraggable(draggable: Draggable | null, callback: () => void) {
   }
 }
 
-function insertFiles(state: Draggable[], files: Draggable[]): Draggable[] {
+function insertFiles<T>(
+  state: Drag.Item<T>[],
+  files: Drag.Item<T>[]
+): Drag.Item<T>[] {
   const index = state.indexOf("Files");
   if (index === -1 || !files) {
     return state;
@@ -39,29 +38,33 @@ function insertFiles(state: Draggable[], files: Draggable[]): Draggable[] {
   }
 }
 
-function dragCollectionReducer(
-  state: Draggable[],
-  action: DragCollectionAction
-): Draggable[] {
+function dragCollectionReducer<T = Drag.DraggableRecord>(
+  state: Drag.Item<T>[],
+  action: Drag.CollectionAction<T>
+): Drag.Item<T>[] {
   switch (action.type) {
     case "append":
-      return [...state, ...(action.payload as Draggable[])];
+      return [...state, ...action.payload];
     case "prepend":
-      return [...(action.payload as Draggable[]), ...state];
+      return [...action.payload, ...state];
     case "insertFiles":
       return insertFiles(state, action.payload);
     case "update":
-      return state.map((d) => {
-        return d.handle === action.payload.handle ? action.payload : d;
+      return state.map((d: Drag.Draggable<T>) => {
+        return d.handle === (action.payload as Drag.Draggable<T>).handle
+          ? action.payload
+          : d;
       });
     case "updatePositions":
       return hideDraggable(action.payload, () => {
-        return state.map((d) => {
+        return state.map((d: Drag.Draggable<T>) => {
           return { ...d, rect: getPosition(d) };
         });
       });
     case "remove":
-      return state.filter((d) => d.handle !== action.payload.handle);
+      return state.filter(
+        (d: Drag.Draggable<T>) => d.handle !== action.payload.handle
+      );
     case "replace":
       return action.payload;
     case "reorder":
@@ -71,7 +74,9 @@ function dragCollectionReducer(
   }
 }
 
-export function createDraggable(record: Record<string, unknown>): Draggable {
+export function createDraggable<T = Drag.DraggableRecord>(
+  record: T
+): Drag.Draggable<T> {
   return {
     record: record,
     rect: null,
@@ -80,13 +85,13 @@ export function createDraggable(record: Record<string, unknown>): Draggable {
   };
 }
 
-export default function useDragCollection(
-  records: DraggableRecord[]
-): DragCollection {
-  const containerRef = useRef<HTMLElement>(null);
-  const [draggables, dispatch] = useReducer(dragCollectionReducer, [], () =>
+export default function useDragCollection<T = Drag.DraggableRecord>(
+  records: Array<T>
+): Drag.Collection<T> {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [draggables, dispatch] = useReducer(dragCollectionReducer<T>, [], () =>
     records.map((r) => createDraggable(r))
-  ) as [Draggables, (Draggables) => Draggable[]];
+  );
 
   useEffect(() => {
     dispatch({ type: "updatePositions" });

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

@@ -1,16 +1,20 @@
 import { useEffect, useState } from "react";
 
-import { Draggable, DragCollection, DragState, Position } from "./types";
+import * as Drag from "../../types/Drag";
 
-function containsFiles(evt: Event) {
+type AnyTouchEvent =
+  | MouseEvent
+  | TouchEvent
+  | React.MouseEvent
+  | React.TouchEvent;
+
+function containsFiles(evt: AnyTouchEvent) {
   if ("dataTransfer" in evt) {
-    const dataTransfer: DataTransfer = evt.dataTransfer;
-    if ("types" in dataTransfer) {
-      const types = dataTransfer.types;
-      for (let i = 0; i < types.length; i++) {
-        if (types[i] === "Files" || types[i] === "application/x-moz-file") {
-          return true;
-        }
+    const dataTransfer = evt.dataTransfer as DataTransfer;
+    const types = dataTransfer.types;
+    for (let i = 0; i < types.length; i++) {
+      if (types[i] === "Files" || types[i] === "application/x-moz-file") {
+        return true;
       }
     }
   }
@@ -33,7 +37,7 @@ function getFiles(dt: DataTransfer): File[] {
   return files;
 }
 
-function mousePosition(evt: TouchEvent | MouseEvent): Position {
+function mousePosition(evt: AnyTouchEvent): Drag.Position {
   let x: number | null, y: number | null;
   if ("touches" in evt && evt.type == "touchmove") {
     x = evt.touches[0].clientX;
@@ -45,11 +49,18 @@ function mousePosition(evt: TouchEvent | MouseEvent): Position {
   return { x: x, y: y };
 }
 
-export default function useDragUploader(
-  collections: DragCollection[],
-  onDragEnd: (dragState: DragState, files: File[]) => void
-) {
-  const initialState: DragState = {
+export default function useDragUploader<T>(
+  collections: Drag.Collection<T>[],
+  onDragEnd: (dragState: Drag.State<T>, files: File[]) => void
+): [
+  Drag.State<T>,
+  (evt: AnyTouchEvent, draggable: Drag.Item<T>) => void,
+  {
+    onDragOver: (evt: AnyTouchEvent) => void;
+    onDrop: (evt: AnyTouchEvent) => void;
+  }
+] {
+  const initialState: Drag.State<T> = {
     dragging: false,
     x: null,
     y: null
@@ -57,18 +68,18 @@ export default function useDragUploader(
 
   const [dragState, setDragState] = useState(initialState);
 
-  const updatePositions = (dragging: Draggable | null) => {
+  const updatePositions = (dragging?: Drag.Draggable<T> | string) => {
     collections.forEach((c) => {
       c.dispatch({ type: "updatePositions", payload: dragging });
     });
   };
 
-  const startDrag = (evt: Event, draggable: Draggable) => {
+  const startDrag = (evt: AnyTouchEvent, draggable: Drag.Item<T>) => {
     updatePositions(draggable);
     setDragState({ dragging: draggable, ...mousePosition(evt) });
   };
 
-  const drag = (evt: Event) => {
+  const drag = (evt: AnyTouchEvent) => {
     if (dragState.dragging) {
       evt.stopPropagation();
       evt.preventDefault();
@@ -80,14 +91,14 @@ export default function useDragUploader(
     }
   };
 
-  const dragEnd = (evt: Event) => {
+  const dragEnd = (evt: AnyTouchEvent) => {
     if (dragState.dragging) {
       const prevDragState = dragState;
       let files: File[] = [];
       evt.stopPropagation();
       evt.preventDefault();
       if ("dataTransfer" in evt && dragState.dragging == "Files") {
-        files = getFiles(evt.dataTransfer);
+        files = getFiles(evt.dataTransfer as DataTransfer);
       }
       setDragState({ dragging: false, x: null, y: null });
       onDragEnd(prevDragState, files);
@@ -95,7 +106,7 @@ export default function useDragUploader(
     }
   };
 
-  const dragLeave = (evt: Event) => {
+  const dragLeave = (evt: AnyTouchEvent) => {
     if (dragState.dragging === "Files") {
       evt.preventDefault();
       evt.stopPropagation();

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

@@ -1,13 +1,14 @@
-import React, { useEffect, useRef } from "react";
-import { Draggable } from "./types";
+import React, { DragEvent, useEffect, useRef } from "react";
 
-export default function useDraggable(
-  draggable: Draggable,
-  startDrag: (evt: React.MouseEvent, draggable: Draggable) => void
+import * as Drag from "../../types/Drag";
+
+export default function useDraggable<T = Drag.DraggableRecord>(
+  draggable: Drag.Draggable<T>,
+  startDrag: (evt: React.MouseEvent, draggable: Drag.Draggable<T>) => void
 ) {
   const ref = useRef<HTMLDivElement>(null);
 
-  const handleDrag = (evt: Event) => {
+  const handleDrag = (evt: DragEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
     startDrag(evt, draggable);

data/app/javascript/components/drag.ts

@@ -1,4 +1,3 @@
-export { Draggable, DragState } from "./drag/types";
 export {
   default as useDragCollection,
   createDraggable

data/app/javascript/components.ts

@@ -6,9 +6,7 @@ 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 PageForm } from "./components/PageForm";
 export { default as PageTree } from "./components/PageTree";
 export { default as RichTextArea } from "./components/RichTextArea";
 export { default as TagEditor } from "./components/TagEditor";

data/app/javascript/features/RichText.tsx

@@ -6,7 +6,7 @@ import readyHandler from "../lib/readyHandler";
 class RichText {
   apply() {
     const elems = document.querySelectorAll("textarea.rich");
-    elems.forEach((elem) => {
+    elems.forEach((elem: HTMLTextAreaElement) => {
       this.enhance(elem);
     });
   }
@@ -20,8 +20,7 @@ class RichText {
         name={elem.name}
         rows={elem.rows}
         id={elem.id}
-      />,
-      container
+      />
     );
     elem.parentNode.removeChild(elem);
   }

data/app/javascript/features/contentTabs.ts

@@ -0,0 +1,79 @@
+import readyHandler from "../lib/readyHandler";
+
+interface WindowState {
+  tabId: string;
+}
+
+function applyTabs() {
+  const tabLinks: HTMLAnchorElement[] = Array.from(
+    document.querySelectorAll(".content-tabs li a")
+  );
+  const tabs: HTMLDivElement[] = Array.from(
+    document.querySelectorAll(".content-tab")
+  );
+
+  const showTab = (tab: string | null) => {
+    tabLinks.forEach((l) => {
+      const parent = l.parentNode as HTMLUListElement | null;
+      if (parent) {
+        if (l.dataset.tab == tab) {
+          parent.classList.add("current");
+        } else {
+          parent.classList.remove("current");
+        }
+      }
+    });
+
+    tabs.forEach((t) => {
+      if (t.dataset.tab == tab) {
+        t.classList.remove("hidden");
+      } else {
+        t.classList.add("hidden");
+      }
+    });
+  };
+
+  const changeTab = (evt: MouseEvent) => {
+    evt.preventDefault();
+    const link = evt.target as HTMLAnchorElement;
+    if ("tab" in link.dataset) {
+      const tab = link.dataset.tab;
+      showTab(tab);
+      history.pushState(
+        { tabId: tab },
+        "",
+        `${window.location.pathname}#${tab}`
+      );
+    }
+  };
+
+  const stateHandler = (evt: PopStateEvent) => {
+    if (evt.state && "tabId" in evt.state) {
+      const { tabId } = evt.state as WindowState;
+      showTab(tabId);
+    }
+  };
+
+  if (tabLinks.length > 0 && tabs.length > 0) {
+    const tabNames = tabs.map((t) => t.dataset.tab);
+
+    tabLinks.forEach((l) => l.addEventListener("click", changeTab));
+
+    let initTab: string = null;
+    const tabExpression = /#(.*)$/;
+
+    if (document.location.toString().match(tabExpression)) {
+      const id = document.location.toString().match(tabExpression)[1];
+      if (tabNames.indexOf(id) !== -1) {
+        initTab = id;
+      }
+    }
+
+    showTab(initTab || tabs[0].dataset.tab);
+    window.addEventListener("popstate", stateHandler);
+  }
+}
+
+export default function contentTabs() {
+  readyHandler.ready(applyTabs);
+}

data/app/javascript/index.ts

@@ -1,33 +1,24 @@
-import { start as startRails } from "@rails/ujs";
-import { Application } from "@hotwired/stimulus";
+import Rails from "@rails/ujs";
 import "react_ujs";
 import { FC } from "react";
 
 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";
+import contentTabs from "./features/contentTabs";
 
 export function registerComponent(name: string, component: FC) {
   window[name] = component;
 }
 
 export default function startPages() {
-  startRails();
+  Rails.start();
   for (const name in Components) {
     registerComponent(name, Components[name] as FC);
   }
-  RichText.start();
 
-  const application = Application.start();
-  application.register("edit-page", EditPageController);
-  application.register("main", MainController);
-  application.register("login", LoginController);
-  application.register("page-options", PageOptionsController);
+  RichText.start();
+  contentTabs();
 }
 
 export * from "./components";