katalyst-content 0.1.0

data/app/assets/javascripts/utils/content/editor/item.js

@@ -0,0 +1,245 @@
+export default class Item {
+  /**
+   * Sort items by their index.
+   *
+   * @param a {Item}
+   * @param b {Item}
+   * @returns {number}
+   */
+  static comparator(a, b) {
+    return a.index - b.index;
+  }
+
+  /**
+   * @param node {Element} li[data-content-index]
+   */
+  constructor(node) {
+    this.node = node;
+  }
+
+  /**
+   * @returns {String} id of the node's item (from data attributes)
+   */
+  get itemId() {
+    return this.node.dataset[`contentItemId`];
+  }
+
+  get #itemIdInput() {
+    return this.node.querySelector(`input[name$="[id]"]`);
+  }
+
+  /**
+   * @param itemId {String} id
+   */
+  set itemId(id) {
+    if (this.itemId === id) return;
+
+    this.node.dataset[`contentItemId`] = `${id}`;
+    this.#itemIdInput.value = `${id}`;
+  }
+
+  /**
+   * @returns {number} logical nesting depth of node in container
+   */
+  get depth() {
+    return parseInt(this.node.dataset[`contentDepth`]);
+  }
+
+  get #depthInput() {
+    return this.node.querySelector(`input[name$="[depth]"]`);
+  }
+
+  /**
+   * @param depth {number} depth >= 0
+   */
+  set depth(depth) {
+    if (this.depth === depth) return;
+
+    this.node.dataset[`contentDepth`] = `${depth}`;
+    this.#depthInput.value = `${depth}`;
+  }
+
+  /**
+   * @returns {number} logical index of node in container (pre-order traversal)
+   */
+  get index() {
+    return parseInt(this.node.dataset[`contentIndex`]);
+  }
+
+  get #indexInput() {
+    return this.node.querySelector(`input[name$="[index]"]`);
+  }
+
+  /**
+   * @param index {number} index >= 0
+   */
+  set index(index) {
+    if (this.index === index) return;
+
+    this.node.dataset[`contentIndex`] = `${index}`;
+    this.#indexInput.value = `${index}`;
+  }
+
+  /**
+   * @returns {Item} nearest neighbour (index - 1)
+   */
+  get previousItem() {
+    let sibling = this.node.previousElementSibling;
+    if (sibling) return new Item(sibling);
+  }
+
+  /**
+   * @returns {Item} nearest neighbour (index + 1)
+   */
+  get nextItem() {
+    let sibling = this.node.nextElementSibling;
+    if (sibling) return new Item(sibling);
+  }
+
+  /**
+   * @returns {boolean} true if this item has any collapsed children
+   */
+  hasCollapsedDescendants() {
+    let childrenList = this.#childrenListElement;
+    return !!childrenList && childrenList.children.length > 0;
+  }
+
+  /**
+   * @returns {boolean} true if this item has any expanded children
+   */
+  hasExpandedDescendants() {
+    let sibling = this.nextItem;
+    return !!sibling && sibling.depth > this.depth;
+  }
+
+  /**
+   * Recursively traverse the node and its descendants.
+   *
+   * @callback {Item}
+   */
+  traverse(callback) {
+    // capture descendants before traversal in case of side-effects
+    // specifically, setting depth affects calculation
+    const collapsed = this.#collapsedChildren;
+    const expanded = this.#expandedDescendants;
+
+    callback(this);
+    collapsed.forEach((item) => item.traverse(callback));
+    expanded.forEach((item) => item.traverse(callback));
+  }
+
+  /**
+   * Collapses visible (logical) children into this element's hidden children
+   * list, creating it if it doesn't already exist.
+   */
+  collapse() {
+    let listElement = this.#childrenListElement;
+
+    if (!listElement) listElement = createChildrenList(this.node);
+
+    this.#expandedDescendants.forEach((child) =>
+      listElement.appendChild(child.node)
+    );
+  }
+
+  /**
+   * Moves any collapsed children back into the parent container.
+   */
+  expand() {
+    if (!this.hasCollapsedDescendants()) return;
+
+    Array.from(this.#childrenListElement.children)
+      .reverse()
+      .forEach((node) => {
+        this.node.insertAdjacentElement("afterend", node);
+      });
+  }
+
+  /**
+   * Sets the state of a given rule on the target node.
+   *
+   * @param rule {String}
+   * @param deny {boolean}
+   */
+  toggleRule(rule, deny = false) {
+    if (this.node.dataset.hasOwnProperty(rule) && !deny)
+      delete this.node.dataset[rule];
+    if (!this.node.dataset.hasOwnProperty(rule) && deny)
+      this.node.dataset[rule] = "";
+
+    if (rule === "denyDrag") {
+      if (!this.node.hasAttribute("draggable") && !deny) {
+        this.node.setAttribute("draggable", "true");
+      }
+      if (this.node.hasAttribute("draggable") && deny) {
+        this.node.removeAttribute("draggable");
+      }
+    }
+  }
+
+  /**
+   * Detects turbo item changes by comparing the dataset id with the input
+   */
+  hasItemIdChanged() {
+    return !(this.#itemIdInput.value === this.itemId);
+  }
+
+  /**
+   * Updates inputs, in case they don't match the data values, e.g., when the
+   * nested inputs have been hot-swapped by turbo with data from the server.
+   *
+   * Updates itemId from input as that is the canonical source.
+   */
+  updateAfterChange() {
+    this.itemId = this.#itemIdInput.value;
+    this.#indexInput.value = this.index;
+    this.#depthInput.value = this.depth;
+  }
+
+  /**
+   * Finds the dom container for storing collapsed (hidden) children, if present.
+   *
+   * @returns {Element} ol[data-content-children]
+   */
+  get #childrenListElement() {
+    return this.node.querySelector(`:scope > [data-content-children]`);
+  }
+
+  get #expandedDescendants() {
+    const descendants = [];
+
+    let sibling = this.nextItem;
+    while (sibling && sibling.depth > this.depth) {
+      descendants.push(sibling);
+      sibling = sibling.nextItem;
+    }
+
+    return descendants;
+  }
+
+  get #collapsedChildren() {
+    if (!this.hasCollapsedDescendants()) return [];
+
+    return Array.from(this.#childrenListElement.children).map(
+      (node) => new Item(node)
+    );
+  }
+}
+
+/**
+ * Finds or creates a dom container for storing collapsed (hidden) children.
+ *
+ * @param node {Element} li[data-content-index]
+ * @returns {Element} ol[data-content-children]
+ */
+function createChildrenList(node) {
+  const childrenList = document.createElement("ol");
+  childrenList.setAttribute("class", "hidden");
+
+  // if objectType is "rich-content" set richContentChildren as a data attribute
+  childrenList.dataset[`contentChildren`] = "";
+
+  node.appendChild(childrenList);
+
+  return childrenList;
+}

data/app/assets/javascripts/utils/content/editor/rules-engine.js

@@ -0,0 +1,177 @@
+export default class RulesEngine {
+  static rules = [
+    "denyDeNest",
+    "denyNest",
+    "denyCollapse",
+    "denyExpand",
+    "denyRemove",
+    "denyDrag",
+    "denyEdit",
+  ];
+
+  constructor(maxDepth = null) {
+    this.maxDepth = maxDepth;
+  }
+
+  /**
+   * Apply rules to the given item by computing a ruleset then merging it
+   * with the item's current state.
+   *
+   * @param {Item} item
+   */
+  update(item) {
+    this.rules = {};
+
+    // structural rules enforce a valid tree structure
+    this.firstItemDepthZero(item);
+    this.depthMustBeSet(item);
+    this.itemCannotHaveInvalidDepth(item);
+    this.itemCannotExceedDepthLimit(item);
+
+    // behavioural rules define what the user is allowed to do
+    this.parentsCannotDeNest(item);
+    this.rootsCannotDeNest(item);
+    this.nestingNeedsParent(item);
+    this.nestingCannotExceedMaxDepth(item);
+    this.leavesCannotCollapse(item);
+    this.needHiddenItemsToExpand(item);
+    this.parentsCannotBeDeleted(item);
+    this.parentsCannotBeDragged(item);
+
+    RulesEngine.rules.forEach((rule) => {
+      item.toggleRule(rule, !!this.rules[rule]);
+    });
+  }
+
+  /**
+   * First item can't have a parent, so its depth should always be 0
+   */
+  firstItemDepthZero(item) {
+    if (item.index === 0) {
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * Every item should have a non-negative depth set.
+   *
+   * @param {Item} item
+   */
+  depthMustBeSet(item) {
+    if (isNaN(item.depth) || item.depth < 0) {
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * Depth must increase stepwise.
+   *
+   * @param {Item} item
+   */
+  itemCannotHaveInvalidDepth(item) {
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth - 1) {
+      item.depth = previous.depth + 1;
+    }
+  }
+
+  /**
+   * Depth must not exceed container's depth limit.
+   *
+   * @param {Item} item
+   */
+  itemCannotExceedDepthLimit(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth) {
+      // Note: this change can cause an issue where the previous item is treated
+      // like a parent even though it no longer has children. This is because
+      // items are processed in order. This issue does not seem worth solving
+      // as it only occurs if the max depth is altered. The issue can be worked
+      // around by saving the container.
+      item.depth = this.maxDepth - 1;
+    }
+  }
+
+  /**
+   * De-nesting an item would create a gap of 2 between itself and its children
+   *
+   * @param {Item} item
+   */
+  parentsCannotDeNest(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDeNest");
+  }
+
+  /**
+   * Item depth can't go below 0.
+   *
+   * @param {Item} item
+   */
+  rootsCannotDeNest(item) {
+    if (item.depth === 0) this.#deny("denyDeNest");
+  }
+
+  /**
+   * If an item doesn't have children it can't be collapsed.
+   *
+   * @param {Item} item
+   */
+  leavesCannotCollapse(item) {
+    if (!item.hasExpandedDescendants()) this.#deny("denyCollapse");
+  }
+
+  /**
+   * If an item doesn't have any hidden descendants then it can't be expanded.
+   *
+   * @param {Item} item
+   */
+  needHiddenItemsToExpand(item) {
+    if (!item.hasCollapsedDescendants()) this.#deny("denyExpand");
+  }
+
+  /**
+   * An item can't be nested (indented) if it doesn't have a valid parent.
+   *
+   * @param {Item} item
+   */
+  nestingNeedsParent(item) {
+    const previous = item.previousItem;
+    if (!previous || previous.depth < item.depth) this.#deny("denyNest");
+  }
+
+  /**
+   * An item can't be nested (indented) if doing so would exceed the max depth.
+   *
+   * @param {Item} item
+   */
+  nestingCannotExceedMaxDepth(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth + 1) {
+      this.#deny("denyNest");
+    }
+  }
+
+  /**
+   * An item can't be deleted if it has visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDeleted(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
+  }
+
+  /**
+   * Items cannot be dragged if they have visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDragged(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDrag");
+  }
+
+  /**
+   * Record a deny.
+   *
+   * @param rule {String}
+   */
+  #deny(rule) {
+    this.rules[rule] = true;
+  }
+}

data/app/assets/stylesheets/katalyst/content/_index.scss

@@ -0,0 +1,31 @@
+@use "editor";
+@use "trix";
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content
+  .attachment-gallery.attachment-gallery--2
+  > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+.trix-content
+  .attachment-gallery.attachment-gallery--4
+  > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}

data/app/assets/stylesheets/katalyst/content/editor/_icon.scss

@@ -0,0 +1,17 @@
+%icon-block {
+  display: block;
+  cursor: pointer;
+  position: relative;
+  padding: 0.65rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+}
+
+%icon {
+  position: absolute;
+  content: "";
+  width: 1.2rem;
+  height: 1.2rem;
+  background-repeat: no-repeat;
+  background-position: center;
+}

data/app/assets/stylesheets/katalyst/content/editor/_index.scss

@@ -0,0 +1,145 @@
+@use "icon";
+
+@use "item-actions";
+@use "item-rules";
+@use "new-items";
+@use "status-bar";
+
+$grey-light: #f4f4f4 !default;
+$grey: #ececec !default;
+$grey-dark: #999 !default;
+$table-hover-background: #fff0eb !default;
+$primary-color: #ff521f !default;
+
+$row-inset: 2rem !default;
+$row-height: 3rem !default;
+
+$table-header-color: $grey !default;
+$row-background-color: $grey-light !default;
+$row-hover-color: $table-hover-background !default;
+$icon-active-color: $primary-color !default;
+$icon-passive-color: $grey-dark !default;
+
+$status-published-background-color: #ebf9eb !default;
+$status-published-border-color: #4dd45c !default;
+$status-published-color: #4dd45c !default;
+
+$status-draft-background-color: #fefaf3 !default;
+$status-draft-border-color: #ffa800 !default;
+$status-draft-color: #ffa800 !default;
+
+$status-dirty-background-color: #eee !default;
+$status-dirty-border-color: #888 !default;
+$status-dirty-color: #aaa !default;
+
+[data-controller="content--editor--container"] {
+  --row-height: #{$row-height};
+  --row-inset: #{$row-inset};
+  --table-header-color: #{$table-header-color};
+  --row-background-color: #{$row-background-color};
+  --row-hover-color: #{$row-hover-color};
+  --icon-active-color: #{$icon-active-color};
+  --icon-passive-color: #{$icon-passive-color};
+
+  ol,
+  li {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+}
+
+[data-controller="content--editor--list"] {
+  min-height: var(--row-height);
+
+  // tree items
+  & > li {
+    display: block;
+    min-height: var(--row-height);
+
+    // https://github.com/react-dnd/react-dnd/issues/832
+    transform: translate3d(0, 0, 0);
+
+    // Pinstripe effect
+    &:nth-of-type(even) {
+      background: var(--row-background-color);
+    }
+
+    &:hover {
+      background: var(--row-hover-color);
+    }
+
+    &[draggable] {
+      cursor: grab;
+    }
+
+    // Dragged visuals
+    &[data-dragging] {
+      box-shadow: inset 0 0 0 2px var(--icon-passive-color);
+
+      > * {
+        visibility: hidden;
+      }
+    }
+
+    // Depth spacing
+    @for $i from 1 through 6 {
+      &[data-content-depth="#{$i}"] .tree {
+        padding-left: calc(var(--row-inset) * #{$i});
+      }
+    }
+
+    .tree {
+      display: flex;
+      align-items: center;
+    }
+
+    .title,
+    .url {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
+
+[data-controller="content--editor--container"] [role="rowheader"],
+[data-controller="content--editor--item"] {
+  display: grid;
+  grid-template-columns: 40% 2fr auto;
+  padding: 0.25rem 0.5rem;
+  gap: 1rem;
+  align-items: center;
+}
+
+// Ensures vertical alignment of header with rows
+[data-controller="content--editor-container"] {
+  [role="rowheader"] {
+    min-height: var(--row-height);
+    background: var(--table-header-color);
+    padding-inline: 1.25rem 1rem;
+  }
+}
+
+[data-controller="content--editor--status-bar"] {
+  --background: #{$status-published-background-color};
+  --color: #{$status-published-border-color};
+  --border: #{$status-published-color};
+
+  &[data-state="draft"] {
+    --background: #{$status-draft-background-color};
+    --color: #{$status-draft-border-color};
+    --border: #{$status-draft-color};
+  }
+
+  &[data-state="dirty"] {
+    --background: #{$status-dirty-background-color};
+    --color: #{$status-dirty-border-color};
+    --border: #{$status-dirty-color};
+  }
+}