QuickAdd + Minimal CSS Helpers

minimal.js

const iframeChoices = [
  { value: "iframe-100", label: "Iframes fill 100% of the pane width" },
  { value: "iframe-max", label: "Iframes fill the max line width" },
  { value: "iframe-wide", label: "Iframes fill the wide line width" },
];
const embedChoices = [
  {
    value: "embed-strict",
    label: "Transclusions appear seamlessly in the flow of text",
  },
  { value: "embed-underline", label: "Transcluded text is underlined" },
];
const imageChoices = [
  {
    value: "img-grid",
    label: "Turns consecutive images into columns.",
  },
  { value: "img-100", label: "Image blocks fill 100% of the pane width" },
  { value: "img-max", label: "Image blocks fill the max line width" },
  { value: "img-wide", label: "Image blocks fill the wide line width" },
];
const cardChoices = [
  { value: "cards", label: "Set all Dataview tables to card layout" },
  {
    value: "cards-align-bottom",
    label: "Align the last element of a card to the bottom",
  },
  {
    value: "cards-cover",
    label: "Images are resized to fill the defined space",
  },
  { value: "cards-16-9", label: "Fit images in cards to 16:9 ratio" },
  { value: "cards-1-1", label: "Fit images in cards to 1:1 ratio (square)" },
  { value: "cards-2-1", label: "Fit images in cards to 2:1 ratio" },
  { value: "cards-2-3", label: "Fit images in cards to 2:3 ratio" },
  {
    value: "cards-cols-1",
    label: "Force a specific number of columns (from 1 to 8)",
  },
];
const widthChoices = [
  { value: "wide", label: "Entire note uses wide line width" },
  { value: "max", label: "Entire note uses max line width" },
  { value: "table-wide", label: "Table uses wide line width" },
  { value: "img-wide", label: "Img uses wide line width" },
  { value: "iframe-max", label: "IFrame uses max line width" },
  { value: "table-100", label: "Table uses 100% of the pane width" },
  { value: "img-100", label: "Img uses 100% of the pane width" },
  { value: "iframe-100", label: "Iframe uses 100% of the pane width" },
];
const tableChoices = [
  { value: "table-100", label: "Table block fills 100% of the pane width" },
  { value: "table-max", label: "Table block fills the max line width" },
  { value: "table-wide", label: "Table block fills the wide line width" },
  { value: "table-nowrap", label: "Disable line wrapping in table cells" },
  { value: "table-wrap", label: "Force line wrapping in table cells" },
  { value: "table-numbers", label: "Add row numbers to tables" },
  { value: "table-tabular", label: "Use tabular figures in tables" },
  { value: "table-small", label: "Use small font size in tables" },
  { value: "table-tiny", label: "Use tiny font size in tables" },
  { value: "table-lines", label: "Add borders around all table cells" },
  { value: "row-lines", label: "Add borders between table rows" },
  { value: "col-lines", label: "Add borders between table columns" },
  {
    value: "row-alt",
    label: "Add striped background to alternating table rows",
  },
  {
    value: "col-alt",
    label: "Add striped background to alternating table columns",
  },
  { value: "row-highlight", label: "Highlight rows on hover" },
];
const rootChoices = [
  { label: "iframes", value: iframeChoices },
  { label: "embeds", value: embedChoices },
  { label: "images", value: imageChoices },
  { label: "cards", value: cardChoices },
  { label: "width", value: widthChoices },
  { label: "table", value: tableChoices },
];

async function getCssClass(suggester, nested) {
  let rootChoice;
  if (nested) {
    rootChoice = await suggester((choice) => choice.label, rootChoices);
  } else {
    const allChoices = rootChoices.reduce((acc, curr) => {
      acc.push(...curr.value);
      return acc;
    }, []);
    rootChoice = {
      value: allChoices,
    };
  }
  if (!rootChoice || !rootChoice.value) {
    return "";
  }
  const childChoice = await suggester(
    (choice) => `${choice.value} - ${choice.label}`,
    rootChoice.value
  );
  if (!childChoice || !childChoice.value) {
    return "";
  }
  return childChoice.value;
}

async function addToFrontmatter(value) {
  const targetFile = window.app.workspace.getActiveFile();
  if (!targetFile || !value) {
    return;
  }
  await window.app.fileManager.processFrontMatter(targetFile, (yaml) => {
    if (!yaml["cssClasses"]) {
      yaml["cssClasses"] = [];
    } else if (typeof yaml["cssClasses"] === "string") {
      yaml["cssClasses"] = [yaml["cssClasses"]];
    }
    yaml["cssClasses"].push(value);
  });
}

async function minimal(params, settings) {
  const {
    quickAddApi: { suggester },
  } = params;
  const choice = await getCssClass(suggester, settings["Nested Menus"]);
  await addToFrontmatter(choice);
}

module.exports = {
  entry: minimal,
  settings: {
    name: "Minimal CSS Helper",
    author: "OfficerHalf",
    options: { "Nested Menus": { type: "checkbox", default: "false" } },
  },
};