pages_core 3.12.0 → 3.12.2

data/app/javascript/components/drag/{useDragUploader.js → useDragUploader.ts}

@@ -1,20 +1,24 @@
 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;
+import { Draggable, DragCollection, DragState, Position } from "./types";
+
+function containsFiles(evt: Event) {
+  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;
+        }
+      }
     }
   }
   return false;
 }
 
-function getFiles(dt) {
-  var files = [];
+function getFiles(dt: DataTransfer): File[] {
+  const files: File[] = [];
   if (dt.items) {
     for (let i = 0; i < dt.items.length; i++) {
       if (dt.items[i].kind == "file") {
@@ -29,36 +33,41 @@ function getFiles(dt) {
   return files;
 }
 
-function mousePosition(evt) {
-  var x, y;
-  if (evt.type == "touchmove") {
+function mousePosition(evt: TouchEvent | MouseEvent): Position {
+  let x: number | null, y: number | null;
+  if ("touches" in evt && evt.type == "touchmove") {
     x = evt.touches[0].clientX;
     y = evt.touches[0].clientY;
-  } else {
+  } else if (evt instanceof MouseEvent) {
     x = evt.clientX;
     y = evt.clientY;
   }
   return { x: x, y: y };
 }
 
-export default function useDragUploader(collections, onDragEnd) {
-  const [dragState, setDragState] = useState({
+export default function useDragUploader(
+  collections: DragCollection[],
+  onDragEnd: (dragState: DragState, files: File[]) => void
+) {
+  const initialState: DragState = {
     dragging: false,
     x: null, y: null
-  });
+  };
+
+  const [dragState, setDragState] = useState(initialState);
 
-  const updatePositions = (dragging) => {
+  const updatePositions = (dragging: Draggable | null) => {
     collections.forEach(c => {
       c.dispatch({ type: "updatePositions", payload: dragging });
     });
   };
 
-  const startDrag = (evt, draggable) => {
+  const startDrag = (evt: Event, draggable: Draggable) => {
     updatePositions(draggable);
     setDragState({ dragging: draggable, ...mousePosition(evt) });
   };
 
-  const drag = (evt) => {
+  const drag = (evt: Event) => {
     if (dragState.dragging) {
       evt.stopPropagation();
       evt.preventDefault();
@@ -70,13 +79,13 @@ export default function useDragUploader(collections, onDragEnd) {
     }
   };
 
-  const dragEnd = (evt) => {
+  const dragEnd = (evt: Event) => {
     if (dragState.dragging) {
       const prevDragState = dragState;
-      var files = [];
-      evt.preventDefault();
+      let files: File[] = [];
       evt.stopPropagation();
-      if (dragState.dragging == "Files") {
+      evt.preventDefault();
+      if ("dataTransfer" in evt && dragState.dragging == "Files") {
         files = getFiles(evt.dataTransfer);
       }
       setDragState({ dragging: false, x: null, y: null });
@@ -85,7 +94,7 @@ export default function useDragUploader(collections, onDragEnd) {
     }
   };
 
-  const dragLeave = (evt) => {
+  const dragLeave = (evt: Event) => {
     if (dragState.dragging === "Files") {
       evt.preventDefault();
       evt.stopPropagation();

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

@@ -0,0 +1,21 @@
+import React, { useEffect, useRef } from "react";
+import { Draggable } from "./types";
+
+export default function useDraggable(
+  draggable: Draggable,
+  startDrag: (evt: React.MouseEvent, draggable: Draggable) => void
+) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleDrag = (evt: Event) => {
+    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 → drag.ts}

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

data/app/javascript/controllers/{EditPageController.js → EditPageController.ts}

@@ -1,6 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
 
-export default class EditPageController extends Controller {
+export default class EditPageController extends Controller<HTMLFormElement> {
+  readonly formTarget: HTMLFormElement;
+
   static get targets() {
     return ["form"];
   }

data/app/javascript/controllers/{LoginController.js → LoginController.ts}

@@ -1,6 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class LoginController extends Controller {
+  readonly tabTargets: HTMLDivElement[];
+
   static get targets() {
     return ["tab"];
   }
@@ -12,12 +14,14 @@ export default class LoginController extends Controller {
   }
 
 
-  changeTab(evt) {
+  changeTab(evt: Event) {
     evt.preventDefault();
-    this.showTab(evt.target.dataset.tab);
+    if ("dataset" in evt.target && "tab" in evt.target.dataset) {
+      this.showTab(evt.target.dataset.tab);
+    }
   }
 
-  showTab(tab) {
+  showTab(tab: string) {
     this.tabTargets.forEach((t) => {
       if (t.dataset.tab == tab) {
         t.classList.remove("hidden");

data/app/javascript/controllers/{MainController.js → MainController.ts}

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

data/app/javascript/{index.js → index.ts}

@@ -1,6 +1,7 @@
-import Rails from "@rails/ujs";
+import { start as startRails } from "@rails/ujs";
 import { Application } from "@hotwired/stimulus";
-require("react_ujs");
+import "react_ujs";
+import { FC } from "react";
 
 import * as Components from "./components";
 
@@ -11,14 +12,14 @@ import PageOptionsController from "./controllers/PageOptionsController";
 
 import RichText from "./features/RichText";
 
-export function registerComponent(name, component) {
+export function registerComponent(name: string, component: FC) {
   window[name] = component;
 }
 
 export default function startPages () {
-  Rails.start();
-  for (var name in Components) {
-    registerComponent(name, Components[name]);
+  startRails();
+  for (const name in Components) {
+    registerComponent(name, Components[name] as FC);
   }
   RichText.start();
 
@@ -33,6 +34,6 @@ export * from "./components";
 export * from "./hooks";
 export * from "./stores";
 
-export * from "./lib/request.js";
+export * from "./lib/request";
 export { default as copyToClipboard,
          copySupported } from "./lib/copyToClipboard";

data/app/javascript/lib/{Tree.js → Tree.ts}

@@ -48,43 +48,65 @@
   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.
-*/
+ */
 
-export default class Tree {
-  constructor(obj) {
+export type TreeId = number | string;
+type MovePlacement = "before" | "after" | "prepend" | "append";
+
+export interface TreeNode {
+  children: TreeNode[],
+  collapsed: boolean
+}
+
+export interface TreeIndex<T extends TreeNode = TreeNode> {
+  id: number,
+  node: T,
+  children: TreeIndex<T>[],
+  parent: TreeIndex<T>
+  next: TreeIndex<T> | null,
+  prev: TreeIndex<T> | null,
+  top: number,
+  height: number
+}
+
+function indexName(id: number | string): string {
+  return `${id}`;
+}
+
+export default class Tree<N extends TreeNode = TreeNode> {
+  cnt: number;
+  obj: N;
+  indexes: Record<string, TreeIndex<N>>;
+
+  constructor(obj: N) {
     this.cnt = 1;
     this.obj = obj || { children: [] };
     this.indexes = {};
     this.build(this.obj);
   }
 
-  build(obj) {
-    var indexes = this.indexes;
-    var startId = this.cnt;
-    var self = this;
+  build(obj: N): TreeIndex<N> {
+    const indexes = this.indexes;
+    const startId = this.cnt;
 
-    var index = { id: startId, node: obj };
-    indexes[this.cnt + ""] = index;
+    const index = { id: startId, node: obj };
+    indexes[indexName(this.cnt)] = index;
     this.cnt++;
 
-    if (obj.children && obj.children.length) {
-      walk(obj.children, index);
-    }
-
-    function walk(objs, parent) {
-      var children = [];
-      objs.forEach(function(obj) {
-        var index = {};
-        index.id = self.cnt;
+    const walk = (objs: TreeIndex<N>[], parent: TreeIndex<N>) => {
+      const children: TreeIndex<N>[] = [];
+      objs.forEach((obj) => {
+        const index: TreeIndex<N> = {};
+        index.id = this.cnt;
         index.node = obj;
 
         if (parent) {
           index.parent = parent.id;
         }
 
-        indexes[self.cnt + ""] = index;
-        children.push(self.cnt);
-        self.cnt++;
+        indexes[indexName(this.cnt)] = index;
+        children.push(this.cnt);
+        this.cnt++;
 
         if (obj.children && obj.children.length) {
           walk(obj.children, index);
@@ -93,7 +115,7 @@ export default class Tree {
       parent.children = children;
 
       children.forEach(function(id, i) {
-        var index = indexes[id + ""];
+        const index = indexes[indexName(id)];
         if (i > 0) {
           index.prev = children[i - 1];
         }
@@ -101,56 +123,54 @@ export default class Tree {
           index.next = children[i+1];
         }
       });
+    };
+
+    if (obj.children && obj.children.length) {
+      walk(obj.children, index);
     }
 
     return index;
   }
 
-  getIndex(id) {
-    var index = this.indexes[id + ""];
-    if (index) {
-      return index;
-    }
+  getIndex(id: TreeId): TreeIndex<N> {
+    return this.indexes[indexName(id)];
   }
 
-  removeIndex(index) {
-    var self = this;
-    del(index);
-
-    function del(index) {
-      delete self.indexes[index.id + ""];
+  removeIndex(index: TreeIndex<N>) {
+    const del = (index: TreeIndex<N>) => {
+      delete this.indexes[indexName(index.id)];
       if (index.children && index.children.length) {
-        index.children.forEach(function(child) {
-          del(self.getIndex(child));
+        index.children.forEach((child) => {
+          del(this.getIndex(child));
         });
       }
-    }
+    };
+    del(index);
   }
 
-  get(id) {
-    var index = this.getIndex(id);
-    if (index && index.node) {
-      return index.node;
-    }
-    return null;
+  get(id: TreeId): N {
+    return this.getIndex(id).node;
   }
 
-  remove(id) {
-    var index = this.getIndex(id);
-    var node = this.get(id);
-    var parentIndex = this.getIndex(index.parent);
-    var parentNode = this.get(index.parent);
+  remove(id: TreeId): N {
+    const index = this.getIndex(id);
+    const node = this.get(id);
+
+    const parentIndex = this.getIndex(index.parent);
+    const parentNode = this.get(index.parent);
+
     parentNode.children.splice(parentNode.children.indexOf(node), 1);
     parentIndex.children.splice(parentIndex.children.indexOf(id), 1);
+
     this.removeIndex(index);
     this.updateChildren(parentIndex.children);
 
     return node;
   }
 
-  updateChildren(children) {
-    children.forEach(function(id, i) {
-      var index = this.getIndex(id);
+  updateChildren(children: TreeIndex<N>[]) {
+    children.forEach((id, i) => {
+      const index = this.getIndex(id);
       index.prev = index.next = null;
       if (i > 0) {
         index.prev = children[i-1];
@@ -158,14 +178,14 @@ export default class Tree {
       if (i < children.length-1) {
         index.next = children[i+1];
       }
-    }.bind(this));
+    });
   }
 
-  insert(obj, parentId, i) {
-    var parentIndex = this.getIndex(parentId);
-    var parentNode = this.get(parentId);
+  insert(obj: N, parentId: TreeId, i: number): TreeIndex<N> {
+    const parentIndex = this.getIndex(parentId);
+    const parentNode = this.get(parentId);
 
-    var index = this.build(obj);
+    const index = this.build(obj);
     index.parent = parentId;
 
     parentNode.children = parentNode.children || [];
@@ -182,26 +202,26 @@ export default class Tree {
     return index;
   }
 
-  insertBefore(obj, destId) {
-    var destIndex = this.getIndex(destId);
-    var parentId = destIndex.parent;
-    var i = this.getIndex(parentId).children.indexOf(destId);
+  insertBefore(obj: N, destId: TreeId): TreeIndex<N> {
+    const destIndex = this.getIndex(destId);
+    const parentId = destIndex.parent;
+    const i = this.getIndex(parentId).children.indexOf(destId);
     return this.insert(obj, parentId, i);
   }
 
-  insertAfter(obj, destId) {
-    var destIndex = this.getIndex(destId);
-    var parentId = destIndex.parent;
-    var i = this.getIndex(parentId).children.indexOf(destId);
+  insertAfter(obj: N, destId: TreeId): TreeIndex<N> {
+    const destIndex = this.getIndex(destId);
+    const parentId = destIndex.parent;
+    const i = this.getIndex(parentId).children.indexOf(destId);
     return this.insert(obj, parentId, i+1);
   }
 
-  prepend(obj, destId) {
+  prepend(obj: N, destId: TreeId): TreeIndex<N> {
     return this.insert(obj, destId, 0);
   }
 
-  append(obj, destId) {
-    var destIndex = this.getIndex(destId);
+  append(obj: N, destId: TreeId): TreeIndex<N> {
+    const destIndex = this.getIndex(destId);
     destIndex.children = destIndex.children || [];
     return this.insert(obj, destId, destIndex.children.length);
   }
@@ -209,22 +229,19 @@ export default class Tree {
   // react-ui-tree methods
 
   updateNodesPosition() {
-    var top = 1;
-    var left = 1;
-    var root = this.getIndex(1);
-    var self = this;
+    let top = 1;
+    let left = 1;
+    const root = this.getIndex(1);
 
     root.top = top++;
     root.left = left++;
 
-    if (root.children && root.children.length) {
-      walk(root.children, root, left, root.node.collapsed);
-    }
-
-    function walk(children, parent, left, collapsed) {
-      var height = 1;
-      children.forEach(function(id) {
-        var node = self.getIndex(id);
+    const walk = (
+      children: TreeIndex<N>[], parent: TreeIndex<N>, left: number, collapsed: boolean
+    ) => {
+      let height = 1;
+      children.forEach((id: TreeId) => {
+        const node = this.getIndex(id);
         if (collapsed) {
           node.top = null;
           node.left = null;
@@ -249,16 +266,20 @@ export default class Tree {
       if(parent.node.collapsed) parent.height = 1;
       else parent.height = height;
       return parent.height;
+    };
+
+    if (root.children && root.children.length) {
+      walk(root.children, root, left, root.node.collapsed);
     }
   }
 
-  move(fromId, toId, placement) {
+  move(fromId: TreeId, toId: TreeId, placement: MovePlacement): TreeIndex<N> {
     if (fromId === toId || toId === 1) {
       return;
     }
 
-    var obj = this.remove(fromId);
-    var index = null;
+    const obj = this.remove(fromId);
+    let index: TreeIndex<N>;
 
     if (placement === "before") {
       index = this.insertBefore(obj, toId);
@@ -275,16 +296,16 @@ export default class Tree {
     return index;
   }
 
-  getParent(id) {
-    var indexes = this.indexes;
+  getParent(id: string) {
+    const indexes = this.indexes;
     if (Object.prototype.hasOwnProperty.call(indexes, id)) {
       return this.getIndex(indexes[id].parent);
     }
   }
 
   getNodeByTop(top) {
-    var indexes = this.indexes;
-    for(var id in indexes) {
+    const indexes = this.indexes;
+    for(const id in indexes) {
       if (Object.prototype.hasOwnProperty.call(indexes, id)) {
         if(indexes[id].top === top) {
           return indexes[id];

data/app/javascript/lib/{copyToClipboard.js → copyToClipboard.ts}

@@ -3,7 +3,7 @@ export function copySupported () {
     document.queryCommandSupported("copy");
 }
 
-export default function copyToClipboard (str) {
+export default function copyToClipboard (str: string) {
   const el = document.createElement("textarea");
   el.value = str;
   document.body.appendChild(el);

data/app/javascript/lib/{readyHandler.js → readyHandler.ts}

@@ -1,4 +1,6 @@
-let readyHandlers = [];
+type ReadyHandlerFunc = () => void;
+
+const readyHandlers: ReadyHandlerFunc[] = [];
 
 const handleState = () => {
   if (["interactive", "complete"].indexOf(document.readyState) > -1) {
@@ -13,7 +15,7 @@ class ReadyHandler {
     document.onreadystatechange = handleState;
   }
 
-  ready (handler) {
+  ready (handler: ReadyHandlerFunc) {
     readyHandlers.push(handler);
     handleState();
   }

data/app/javascript/lib/{request.js → request.ts}

@@ -1,5 +1,11 @@
-export function csrfToken() {
-  return document.querySelector("[name=csrf-token]").content;
+export function csrfToken(): string {
+  const elem = document.querySelector("[name=csrf-token]");
+
+  if (!elem) {
+    return "";
+  }
+
+  return elem.getAttribute("content") || "";
 }
 
 function jsonFetchOptions() {
@@ -8,7 +14,7 @@ function jsonFetchOptions() {
                       "X-CSRF-Token": csrfToken() } });
 }
 
-export async function postJson(url, data) {
+export async function postJson(url: string, data: Record<string, unknown>) {
   const options = { ...jsonFetchOptions(), method: "POST" };
   if (data) {
     options.body = JSON.stringify(data);
@@ -17,7 +23,7 @@ export async function postJson(url, data) {
   return response.json();
 }
 
-export async function putJson(url, data) {
+export async function putJson(url: string, data: Record<string, unknown>) {
   const options = { ...jsonFetchOptions(), method: "PUT" };
   if (data) {
     options.body = JSON.stringify(data);
@@ -26,7 +32,7 @@ export async function putJson(url, data) {
   return response.json();
 }
 
-export async function post(url, data) {
+export async function post(url: string, data: Record<string, unknown>) {
   const response = await fetch(url, {
     method: "POST",
     body: data,