pages_core 3.14.0 → 3.15.1

data/app/helpers/pages_core/images_helper.rb

@@ -28,7 +28,8 @@ module PagesCore
     # * <tt>:ratio</tt>: Ratio to constrain image by.
     # * <tt>:size</tt>: Max size for image.
     def image_figure(image, opts = {})
-      class_name = ["image", image_class_name(image), opts[:class_name]].compact
+      class_name = ["image", image_class_name(image, ratio: opts[:ratio]),
+                    opts[:class_name]].compact
       image_tag = image_figure_image_tag(image,
                                          size: opts[:size],
                                          ratio: opts[:ratio])
@@ -47,7 +48,8 @@ module PagesCore
     # * <tt>:ratio</tt>: Ratio to constrain image by.
     # * <tt>:sizes</tt>: Sizes attribute for image tag, default: "100vw".
     def picture(image, opts = {})
-      class_name = ["image", image_class_name(image), opts[:class_name]].compact
+      class_name = ["image", image_class_name(image, ratio: opts[:ratio]),
+                    opts[:class_name]].compact
       pict = picture_tag(image, ratio: opts[:ratio], sizes: opts[:sizes])
       content = opts[:link] ? image_link_to(pict, opts[:link]) : pict
       tag.figure(content + image_caption(image, caption: opts[:caption]),
@@ -95,9 +97,11 @@ module PagesCore
       Vector2d.new(v.y * ratio, v.y).fit(v)
     end
 
-    def image_class_name(image)
-      return "square" if image.size.x == image.size.y
-      return "landscape" if image.size.x > image.size.y
+    def image_class_name(image, ratio: nil)
+      size = ratio ? fit_ratio(image.size, ratio) : image.size
+
+      return "square" if size.x == size.y
+      return "landscape" if size.x > size.y
 
       "portrait"
     end
@@ -120,9 +124,7 @@ module PagesCore
     end
 
     def image_widths(image)
-      [233, 350, 700, 1050, 1400, 2100, 2800].select do |w|
-        image.size.x >= w
-      end
+      [233, 350, 700, 1050, 1400, 2100, 2800].select { |w| image.size.x >= w }
     end
 
     def srcset(image, ratio: nil, format: nil)

data/app/helpers/pages_core/labelled_form_builder.rb

@@ -30,15 +30,10 @@ module PagesCore
     end
 
     def labelled_country_select(
-      attr, label = nil, priority = {}, opts = {}, html_opts = {}
+      attr, label = nil, opts = {}, html_opts = {}
     )
-      if priority.is_a?(Hash)
-        return labelled_field(attr, label, priority) do |options|
-          country_select(attr, options, opts, html_opts)
-        end
-      end
       labelled_field(attr, label, opts) do |options|
-        country_select(attr, priority, options, html_opts)
+        country_select(attr, options, html_opts)
       end
     end
 

data/app/helpers/pages_core/page_path_helper.rb

@@ -31,7 +31,7 @@ module PagesCore
 
     def page_redirect_url(locale, page)
       redirect = page.redirect_path(locale:)
-      return redirect if redirect =~ %r{^https?://}
+      return redirect if %r{^https?://}.match?(redirect)
 
       base_page_url + redirect
     end

data/app/javascript/components/Attachments/Attachment.tsx

@@ -1,32 +1,31 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import copyToClipboard from "../../lib/copyToClipboard";
 import AttachmentEditor from "./AttachmentEditor";
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";
-import { AttachmentResource, Locale } from "../../types";
+import * as Attachments from "../../types/Attachments";
+import * as Drag from "../../types/Drag";
+import { Locale } from "../../types";
 
-import { useDraggable, Draggable } from "../drag";
+import { useDraggable } from "../drag";
 
-interface Record {
-  id: number | null;
-  attachment: AttachmentResource;
-  uploading: boolean;
-}
-
-interface AttachmentProps {
+interface Props {
   attributeName: string;
   placeholder: boolean;
-  draggable: { record: Record };
+  draggable: Drag.Draggable<Attachments.Record>;
   locale: string;
   locales: { [index: string]: Locale };
   deleteRecord: () => void;
   showEmbed: boolean;
   position: number;
-  onUpdate: (localizations: Record<string, Record<string, string>>) => void;
-  startDrag: (evt: Event, draggable: Draggable) => void;
+  onUpdate: (attachment: Partial<Attachments.Resource>) => void;
+  startDrag: (
+    evt: MouseEvent,
+    draggable: Drag.Draggable<Attachments.Record>
+  ) => void;
 }
 
-export default function Attachment(props: AttachmentProps) {
+export default function Attachment(props: Props) {
   const { attributeName, draggable, locales, locale } = props;
   const { record } = draggable;
   const { attachment, uploading } = record;
@@ -34,15 +33,18 @@ export default function Attachment(props: AttachmentProps) {
   const openModal = useModalStore((state) => state.open);
   const notice = useToastStore((state) => state.notice);
 
-  const listeners = useDraggable(draggable, props.startDrag);
+  const listeners = useDraggable<Attachments.Record>(
+    draggable,
+    props.startDrag
+  );
 
-  const copyEmbed = (evt: Event) => {
+  const copyEmbed = (evt: MouseEvent) => {
     evt.preventDefault();
     copyToClipboard(`[attachment:${attachment.id}]`);
     notice("Embed code copied to clipboard");
   };
 
-  const deleteRecord = (evt: Event) => {
+  const deleteRecord = (evt: MouseEvent) => {
     evt.preventDefault();
     if (props.deleteRecord) {
       props.deleteRecord();
@@ -63,7 +65,7 @@ export default function Attachment(props: AttachmentProps) {
     return null;
   };
 
-  const editAttachment = (evt: Event) => {
+  const editAttachment = (evt: MouseEvent) => {
     evt.preventDefault();
     openModal(
       <AttachmentEditor

data/app/javascript/components/Attachments/AttachmentEditor.tsx

@@ -1,18 +1,19 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, MouseEvent, useState } from "react";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";
-import { AttachmentResource, Locale } from "../../types";
 import { putJson } from "../../lib/request";
+import * as Attachments from "../../types/Attachments";
+import { Locale } from "../../types";
 
-interface AttachmentEditorProps {
-  attachment: AttachmentResource;
+interface Props {
+  attachment: Attachments.Resource;
   locale: string;
   locales: { [index: string]: Locale };
-  onUpdate: (localizations: Record<string, Record<string, string>>) => void;
+  onUpdate: (attachment: Partial<Attachments.Resource>) => void;
 }
 
-export default function AttachmentEditor(props: AttachmentEditorProps) {
+export default function AttachmentEditor(props: Props) {
   const { attachment, locales } = props;
 
   const [locale, setLocale] = useState(props.locale);
@@ -25,20 +26,21 @@ export default function AttachmentEditor(props: AttachmentEditorProps) {
   const closeModal = useModalStore((state) => state.close);
 
   const updateLocalization =
-    (name: "name" | "description") => (evt: ChangeEvent<HTMLInputElement>) => {
+    (name: "name" | "description") =>
+    (evt: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
       setLocalizations({
         ...localizations,
         [name]: { ...localizations[name], [locale]: evt.target.value }
       });
     };
 
-  const copyEmbedCode = (evt: Event) => {
+  const copyEmbedCode = (evt: MouseEvent) => {
     evt.preventDefault();
     copyToClipboard(`[attachment:${attachment.id}]`);
     notice("Embed code copied to clipboard");
   };
 
-  const save = (evt: Event) => {
+  const save = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 

data/app/javascript/components/{Attachments.jsx → Attachments/List.tsx}

@@ -1,31 +1,27 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Attachment from "./Attachments/Attachment";
-import Placeholder from "./Attachments/Placeholder";
-import FileUploadButton from "./FileUploadButton";
-import { post } from "../lib/request";
-
-import {
-  createDraggable,
-  draggedOrder,
-  useDragCollection,
-  useDragUploader
-} from "./drag";
-
-function filenameToName(str) {
+import React from "react";
+import Attachment from "./Attachment";
+import Placeholder from "./Placeholder";
+import FileUploadButton from "../FileUploadButton";
+import { post } from "../../lib/request";
+import * as Attachments from "../../types/Attachments";
+import * as Drag from "../../types/Drag";
+
+import { createDraggable, draggedOrder, useDragUploader } from "../drag";
+
+interface Props extends Attachments.Options {
+  state: Attachments.State;
+}
+
+function filenameToName(str: string): string {
   return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
 }
 
-export default function Attachments(props) {
-  const collection = useDragCollection(props.records);
-  const locales =
-    props.locales && props.locales.length > 0
-      ? Object.keys(props.locales)
-      : [props.locale];
-  const [deleted, setDeleted] = useState([]);
+export default function List(props: Props) {
+  const { collection, deleted, setDeleted } = props.state;
+  const locales = props.locales ? Object.keys(props.locales) : [props.locale];
 
-  const uploadAttachment = (file) => {
-    let name = {};
+  const uploadAttachment = (file: File) => {
+    const name = {};
     locales.forEach((l) => (name[l] = file.name));
 
     const draggable = createDraggable({
@@ -33,34 +29,36 @@ export default function Attachments(props) {
       uploading: true
     });
 
-    let data = new FormData();
+    const data = new FormData();
 
     data.append("attachment[file]", file);
     locales.forEach((l) => {
       data.append(`attachment[name][${l}]`, filenameToName(file.name));
     });
 
-    post("/admin/attachments.json", data).then((json) => {
-      collection.dispatch({
-        type: "update",
-        payload: {
-          ...draggable,
-          record: { attachment: json, uploading: false }
-        }
-      });
-    });
+    void post("/admin/attachments.json", data).then(
+      (json: Attachments.Resource) => {
+        collection.dispatch({
+          type: "update",
+          payload: {
+            ...draggable,
+            record: { attachment: json, uploading: false }
+          }
+        });
+      }
+    );
 
     return draggable;
   };
 
-  const receiveFiles = (files) => {
+  const receiveFiles = (files: File[]) => {
     collection.dispatch({
       type: "append",
       payload: files.map((f) => uploadAttachment(f))
     });
   };
 
-  const dragEnd = (dragState, files) => {
+  const dragEnd = (dragState: Drag.State, files: File[]) => {
     collection.dispatch({
       type: "reorder",
       payload: draggedOrder(collection, dragState)
@@ -71,43 +69,48 @@ export default function Attachments(props) {
     });
   };
 
-  const [dragState, dragStart, listeners] = useDragUploader(
+  const [dragState, dragStart, listeners] = useDragUploader<Attachments.Record>(
     [collection],
     dragEnd
   );
 
-  const position = (record) => {
+  const position = (record: Attachments.Record) => {
     return (
-      [...collection.draggables.map((d) => d.record), ...deleted].indexOf(
-        record
-      ) + 1
+      [
+        ...collection.draggables.map(
+          (d: Drag.Draggable<Attachments.Record>) => d.record
+        ),
+        ...deleted
+      ].indexOf(record) + 1
     );
   };
 
-  const attrName = (record) => {
+  const attrName = (record: Attachments.Record) => {
     return `${props.attribute}[${position(record)}]`;
   };
 
-  const update = (draggable) => (attachment) => {
-    const { record } = draggable;
-    const updated = {
-      ...draggable,
-      record: {
-        ...record,
-        attachment: { ...record.attachment, ...attachment }
-      }
+  const update =
+    (draggable: Drag.Draggable<Attachments.Record>) =>
+    (attachment: Partial<Attachments.Resource>) => {
+      const { record } = draggable;
+      const updated = {
+        ...draggable,
+        record: {
+          ...record,
+          attachment: { ...record.attachment, ...attachment }
+        }
+      };
+      collection.dispatch({ type: "update", payload: updated });
     };
-    collection.dispatch({ type: "update", payload: updated });
-  };
 
-  const remove = (draggable) => () => {
+  const remove = (draggable: Drag.Draggable<Attachments.Record>) => () => {
     collection.dispatch({ type: "remove", payload: draggable });
     if (draggable.record.id) {
       setDeleted([...deleted, draggable.record]);
     }
   };
 
-  const attachment = (draggable) => {
+  const attachment = (draggable: Drag.Item<Attachments.Record>) => {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
@@ -153,7 +156,7 @@ export default function Attachments(props) {
             <input
               name={`${attrName(r)}[_destroy]`}
               type="hidden"
-              value={true}
+              value="true"
             />
           </span>
         ))}
@@ -168,11 +171,3 @@ export default function Attachments(props) {
     </div>
   );
 }
-
-Attachments.propTypes = {
-  attribute: PropTypes.string,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  records: PropTypes.array,
-  showEmbed: PropTypes.bool
-};

data/app/javascript/components/Attachments/useAttachments.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import { useDragCollection } from "../drag";
+import * as Attachments from "../../types/Attachments";
+
+export default function useAttachments(
+  records: Attachments.Record[]
+): Attachments.State {
+  const [deleted, setDeleted] = useState<Attachments.Record[]>([]);
+
+  return {
+    collection: useDragCollection(records),
+    deleted: deleted,
+    setDeleted: setDeleted
+  };
+}

data/app/javascript/components/Attachments.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import useAttachments from "./Attachments/useAttachments";
+import List from "./Attachments/List";
+import * as Attachment from "../types/Attachments";
+
+interface Props extends Attachment.Options {
+  records: Attachment.Record[];
+}
+
+export default function Attachments(props: Props) {
+  const state = useAttachments(props.records);
+
+  return <List state={state} {...props} />;
+}

data/app/javascript/components/DateRangeSelect.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+
+import DateTimeSelect from "./DateTimeSelect";
+
+interface Props {
+  objectName: string;
+  startsAt: Date | string;
+  endsAt: Date | string;
+  setStartsAt?: (date: Date) => void;
+  setEndsAt?: (date: Date) => void;
+  disabled?: boolean;
+  disableTime?: boolean;
+}
+
+function defaultDate(offset = 0): Date {
+  const coeff = 1000 * 60 * 60;
+  return new Date(
+    Math.round(new Date().getTime() / coeff) * coeff +
+      coeff +
+      1000 * 60 * offset
+  );
+}
+
+function parseDate(str: Date | string): Date {
+  if (!str) {
+    return null;
+  } else if (typeof str === "string") {
+    return new Date(str);
+  } else {
+    return str;
+  }
+}
+
+export default function DateRangeSelect(props: Props) {
+  const { disabled, disableTime, objectName } = props;
+
+  const [uncontrolledStartsAt, setUncontrolledStartsAt] = useState(
+    parseDate(props.startsAt)
+  );
+
+  const [uncontrolledEndsAt, setUncontrolledEndsAt] = useState(
+    parseDate(props.endsAt) || defaultDate(60)
+  );
+
+  const startsAt = parseDate(
+    props.setStartsAt ? props.startsAt : uncontrolledStartsAt
+  );
+  const setStartsAt = props.setStartsAt || setUncontrolledStartsAt;
+
+  const endsAt = parseDate(props.setEndsAt ? props.endsAt : uncontrolledEndsAt);
+  const setEndsAt = props.setEndsAt || setUncontrolledEndsAt;
+
+  const setDates = (start: Date, end: Date) => {
+    if (end < start) {
+      end = start;
+    }
+    setStartsAt(start);
+    setEndsAt(end);
+  };
+
+  const changeStartsAt = (newDate: Date) => {
+    setDates(
+      newDate,
+      new Date(endsAt.getTime() + (newDate.getTime() - startsAt.getTime()))
+    );
+  };
+
+  const changeEndsAt = (newDate: Date) => {
+    setDates(startsAt, newDate);
+  };
+
+  useEffect(() => {
+    if (!startsAt || !endsAt) {
+      setDates(startsAt || defaultDate(), endsAt || defaultDate(60));
+    }
+  }, [startsAt, endsAt]);
+
+  return (
+    <div className="date-range-select">
+      {startsAt && (
+        <div className="date">
+          <DateTimeSelect
+            name={objectName + "[starts_at]"}
+            disabled={disabled}
+            disableTime={disableTime}
+            onChange={changeStartsAt}
+            value={startsAt}
+          />
+        </div>
+      )}
+      <span className="to">to</span>
+      {endsAt && (
+        <div className="date">
+          <DateTimeSelect
+            name={objectName + "[ends_at]"}
+            disabled={disabled}
+            disableTime={disableTime}
+            onChange={changeEndsAt}
+            value={endsAt}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/components/DateTimeSelect.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+
+interface DateTimeSelectProps {
+  name: string;
+  onChange: (date: Date) => void;
+  value: Date;
+  disabled?: boolean;
+  disableTime?: boolean;
+}
+
+interface ModifyOptions {
+  year?: number;
+  month?: number;
+  date?: number;
+  time?: string;
+}
+
+function modifyDate(original: Date, options: ModifyOptions = {}): Date {
+  const newDate = new Date(original);
+  if ("year" in options) {
+    newDate.setFullYear(options.year);
+  }
+  if ("month" in options) {
+    newDate.setMonth(options.month);
+  }
+  if ("date" in options) {
+    newDate.setDate(options.date);
+  }
+  if ("time" in options && options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)) {
+    newDate.setHours(parseInt(options.time.split(":")[0], 10));
+    newDate.setMinutes(parseInt(options.time.split(":")[1], 10) || 0);
+  }
+  return newDate;
+}
+
+function timeToString(time: Date): string {
+  return time.toTimeString().slice(0, 5);
+}
+
+// Returns an array with years from 2000 to 10 years from now.
+function yearOptions(): number[] {
+  const start = 2000;
+  const years: number[] = [];
+  for (let i = start; i <= new Date().getFullYear() + 11; i++) {
+    years.push(i);
+  }
+  return years;
+}
+
+function monthOptions(): string[] {
+  return [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+}
+
+function dayOptions(): number[] {
+  const numbers: number[] = [];
+  for (let i = 1; i <= 31; i++) {
+    numbers.push(i);
+  }
+  return numbers;
+}
+
+export default function DateTimeSelect(props: DateTimeSelectProps) {
+  const { name, disabled, disableTime, onChange, value } = props;
+
+  const [timeString, setTimeString] = useState(timeToString(value));
+
+  useEffect(() => {
+    setTimeString(timeToString(value));
+  }, [value]);
+
+  const handleChange = (options = {}) => {
+    onChange(modifyDate(value, options));
+  };
+
+  return (
+    <div className="date-select">
+      {name && (
+        <input type="hidden" name={name} value={!disabled && value.toJSON()} />
+      )}
+      <select
+        value={value.getMonth()}
+        onChange={(e) => handleChange({ month: e.target.value })}
+        disabled={disabled}>
+        {monthOptions().map((m, i) => (
+          <option key={i} value={i}>
+            {m}
+          </option>
+        ))}
+      </select>
+      <select
+        value={value.getDate()}
+        onChange={(e) => handleChange({ date: e.target.value })}
+        disabled={disabled}>
+        {dayOptions().map((d) => (
+          <option key={d} value={d}>
+            {d}
+          </option>
+        ))}
+      </select>
+      <select
+        value={value.getFullYear()}
+        onChange={(e) => handleChange({ year: e.target.value })}
+        disabled={disabled}>
+        {yearOptions().map((y) => (
+          <option key={y} value={y}>
+            {y}
+          </option>
+        ))}
+      </select>
+      {!disableTime && (
+        <input
+          className="time"
+          type="text"
+          size={5}
+          disabled={disabled}
+          value={timeString}
+          onChange={(e) => setTimeString(e.target.value)}
+          onBlur={(e) => handleChange({ time: e.target.value })}
+        />
+      )}
+    </div>
+  );
+}