feat: List 2.0

package.json

@@ -45,6 +45,6 @@
     "vite-plugin-dts": "^3.9.1"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.2"
+    "@codexteam/icons": "^0.3.2"
   }
 }

src/ListRenderer/checklistRenderer.ts

@@ -0,0 +1,141 @@
+import { IconCheck } from '@codexteam/icons'
+import ItemMeta from "../types/itemMeta";
+import { NestedListConfig } from "../types/listParams";
+import * as Dom from '../utils/dom';
+import { ListRenderer } from './listRenderer';
+
+/**
+ * Class that is responsible for checklist rendering
+ */
+export class CheckListRenderer extends ListRenderer {
+  /**
+   * Tool's configuration
+   */
+  protected config?: NestedListConfig;
+
+  /**
+   * Is NestedList Tool read-only option
+   */
+  readOnly: boolean;
+
+  constructor(readonly: boolean, config?: NestedListConfig) {
+    super();
+    this.config = config;
+    this.readOnly = readonly;
+  }
+
+  /**
+   * Renders ol wrapper for list
+   * @returns - created html ol element
+   */
+  renderWrapper(): HTMLOListElement {
+    const listWrapper = Dom.make('ul', [ListRenderer.CSS.wrapper, ListRenderer.CSS.wrapperChecklist]) as HTMLOListElement;
+
+    listWrapper.addEventListener('click', (event) => {
+      this.toggleCheckbox(event);
+    });
+
+    return listWrapper;
+  }
+
+  /**
+   * Render wrapper of child list
+   * @returns wrapper element of the child list
+   */
+  renderSublistWrapper(): HTMLElement {
+    const divElement = Dom.make('ul', [ListRenderer.CSS.wrapperChecklist, ListRenderer.CSS.itemChildren]) as HTMLElement;
+
+    return divElement;
+  }
+
+  /**
+   * Redners list item element
+   * @param content - content of the list item
+   * @returns - created html list item element
+   */
+  renderItem(content: string, meta: ItemMeta): HTMLLIElement {
+    const itemWrapper = Dom.make('li', [ListRenderer.CSS.item, ListRenderer.CSS.item]);
+    const itemBody = Dom.make('div', ListRenderer.CSS.itemBody);
+    const itemContent = Dom.make('div', ListRenderer.CSS.itemContent, {
+      innerHTML: content,
+      contentEditable: (!this.readOnly).toString(),
+    });
+
+    const checkbox = Dom.make('span', ListRenderer.CSS.checkbox);
+    const checkboxContainer = Dom.make('div', ListRenderer.CSS.checkboxContainer);
+
+    if (meta && meta.checked === true) {
+      checkboxContainer.classList.add(ListRenderer.CSS.itemChecked);
+    }
+
+    checkbox.innerHTML = IconCheck;
+    checkboxContainer.appendChild(checkbox);
+
+    itemBody.appendChild(itemContent);
+    itemWrapper.appendChild(checkboxContainer);
+    itemWrapper.appendChild(itemBody);
+
+    return itemWrapper as HTMLLIElement;
+  }
+
+  /**
+   * Return the item content
+   *
+   * @param {Element} item - item wrapper (<li>)
+   * @returns {string}
+   */
+  getItemContent(item: Element): string {
+    const contentNode = item.querySelector(`.${ListRenderer.CSS.itemContent}`);
+    if (!contentNode) {
+      return '';
+    }
+
+    if (Dom.isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+  /**
+   * Return meta object of certain element
+   * @param {Element} item - item of the list to get meta from
+   * @returns {ItemMeta} Item meta object
+   */
+  getItemMeta(item: Element): ItemMeta {
+    const checkbox = item.querySelector(`.${ListRenderer.CSS.checkboxContainer}`);
+
+    return {
+      checked: checkbox ? checkbox.classList.contains(ListRenderer.CSS.itemChecked) : undefined,
+    }
+  }
+
+  /**
+   * Toggle checklist item state
+   *
+   * @private
+   * @param {MouseEvent} event - click
+   * @returns {void}
+   */
+  private toggleCheckbox(event: any): void {
+    const checkbox = event.target.closest(`.${ListRenderer.CSS.checkboxContainer}`);
+
+    if (checkbox && checkbox.contains(event.target)) {
+      checkbox.classList.toggle(ListRenderer.CSS.itemChecked);
+      checkbox.classList.add(ListRenderer.CSS.noHover);
+      checkbox.addEventListener('mouseleave', () => this.removeSpecialHoverBehavior(checkbox), { once: true });
+    }
+  }
+
+  /**
+   * Removes class responsible for special hover behavior on an item
+   *
+   * @private
+   * @param {Element} el - item wrapper
+   * @returns {Element}
+   */
+  private removeSpecialHoverBehavior(el: HTMLElement) {
+    el.classList.remove(ListRenderer.CSS.noHover);
+  }
+}
+

src/ListRenderer/index.ts

@@ -0,0 +1,6 @@
+import { CheckListRenderer } from "./checklistRenderer";
+import { OrderedListRenderer } from "./orderedListRenderer";
+import { UnorderedListRenderer } from "./unorderedListRenderer";
+import { ListRenderer } from './listRenderer';
+
+export { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer, ListRenderer };

src/ListRenderer/listRenderer.ts

@@ -0,0 +1,48 @@
+/**
+ * CSS classes for the Nested List Tool
+ */
+interface NestedListCssClasses {
+  wrapper: string;
+  wrapperOrdered: string;
+  wrapperUnordered: string;
+  wrapperChecklist: string;
+  item: string;
+  itemBody: string;
+  itemContent: string;
+  itemChildren: string;
+  settingsWrapper: string;
+  itemChecked: string;
+  noHover: string;
+  checkbox: string;
+  checkboxContainer: string;
+}
+
+/**
+ * List renderer class
+ * Used for storing css classes and
+ */
+export abstract class ListRenderer {
+  /**
+   * Styles
+   *
+   * @returns {NestedListCssClasses} - CSS classes names by keys
+   * @private
+   */
+  static get CSS(): NestedListCssClasses {
+    return {
+      wrapper: 'cdx-nested-list',
+      wrapperOrdered: 'cdx-nested-list--ordered',
+      wrapperUnordered: 'cdx-nested-list--unordered',
+      wrapperChecklist: 'cdx-nested-list--checklist',
+      item: 'cdx-nested-list__item',
+      itemBody: 'cdx-nested-list__item-body',
+      itemContent: 'cdx-nested-list__item-content',
+      itemChildren: 'cdx-nested-list__item-children',
+      settingsWrapper: 'cdx-nested-list__settings',
+      itemChecked: 'cdx-nested-list__checkbox--checked',
+      noHover: 'cdx-nested-list__checkbox--no-hover',
+      checkbox: 'cdx-nested-list__checkbox-check',
+      checkboxContainer: 'cdx-nested-list__checkbox'
+    };
+  }
+}

src/ListRenderer/orderedListRenderer.ts

@@ -0,0 +1,91 @@
+import ItemMeta from "../types/itemMeta";
+import { NestedListConfig } from "../types/listParams";
+import * as Dom from '../utils/dom';
+import { ListRenderer } from './listRenderer';
+
+/**
+ * Class that is responsible for ordered list rendering
+ */
+export class OrderedListRenderer extends ListRenderer {
+  /**
+   * Tool's configuration
+   */
+  protected config?: NestedListConfig;
+
+  /**
+   * Is NestedList Tool read-only option
+   */
+  readOnly: boolean;
+
+  constructor(readonly: boolean, config?: NestedListConfig) {
+    super();
+    this.config = config;
+    this.readOnly = readonly;
+  }
+
+  /**
+   * Renders ol wrapper for list
+   * @returns - created html ol element
+   */
+  renderWrapper(): HTMLOListElement {
+    return Dom.make('ol', [ListRenderer.CSS.wrapper, ListRenderer.CSS.wrapperOrdered]) as HTMLOListElement;
+  }
+
+  /**
+   * Render wrapper of child list
+   * @returns wrapper element of the child list
+   */
+  renderSublistWrapper(): HTMLElement {
+    const divElement = Dom.make('ol', [ListRenderer.CSS.wrapperOrdered, ListRenderer.CSS.itemChildren]) as HTMLElement;
+
+    return divElement;
+  }
+
+  /**
+   * Redners list item element
+   * @param content - content of the list item
+   * @returns - created html list item element
+   */
+  renderItem(content: string): HTMLLIElement {
+    const itemWrapper = Dom.make('li', ListRenderer.CSS.item);
+    const itemBody = Dom.make('div', ListRenderer.CSS.itemBody);
+    const itemContent = Dom.make('div', ListRenderer.CSS.itemContent, {
+      innerHTML: content,
+      contentEditable: (!this.readOnly).toString(),
+    });
+
+    itemBody.appendChild(itemContent);
+    itemWrapper.appendChild(itemBody);
+
+    return itemWrapper as HTMLLIElement;
+  }
+
+  /**
+   * Return the item content
+   *
+   * @param {Element} item - item wrapper (<li>)
+   * @returns {string}
+   */
+  getItemContent(item: Element): string {
+    const contentNode = item.querySelector(`.${ListRenderer.CSS.itemContent}`);
+    if (!contentNode) {
+      return '';
+    }
+
+    if (Dom.isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+  /**
+   * Returns item meta, for ordered list checked will be always undefined
+   * @returns Item meta object
+   */
+  getItemMeta(): ItemMeta  {
+    return {
+      checked: undefined,
+    }
+  }
+}

src/ListRenderer/unorderedListRenderer.ts

@@ -0,0 +1,95 @@
+import ItemMeta from "../types/itemMeta";
+import { NestedListConfig } from "../types/listParams";
+import * as Dom from '../utils/dom';
+import { ListRenderer } from './listRenderer';
+
+/**
+ * Class that is responsible for unordered list rendering
+ */
+export class UnorderedListRenderer extends ListRenderer {
+  /**
+   * Tool's configuration
+   */
+  protected config?: NestedListConfig;
+
+  /**
+   * Is NestedList Tool read-only option
+   */
+  readOnly: boolean;
+
+  constructor(readonly: boolean, config?: NestedListConfig) {
+    super();
+    this.config = config;
+    this.readOnly = readonly;
+  }
+
+  /**
+   * Renders ol wrapper for list
+   * @returns - created html ol element
+   */
+  renderWrapper(): HTMLOListElement {
+
+    const ulElement = Dom.make('ul', [ListRenderer.CSS.wrapper, ListRenderer.CSS.wrapperUnordered]) as HTMLOListElement;
+
+    return ulElement;
+  }
+
+  /**
+   * Render wrapper of child list
+   * @returns wrapper element of the child list
+   */
+  renderSublistWrapper(): HTMLElement {
+    const divElement = Dom.make('ul', [ListRenderer.CSS.wrapperUnordered, ListRenderer.CSS.itemChildren]) as HTMLElement;
+
+    return divElement;
+  }
+
+  /**
+   * Redners list item element
+   * @param content - content of the list item
+   * @returns - created html list item element
+   */
+  renderItem(content: string): HTMLLIElement {
+    const itemWrapper = Dom.make('li', ListRenderer.CSS.item);
+    const itemBody = Dom.make('div', ListRenderer.CSS.itemBody);
+    const itemContent = Dom.make('div', ListRenderer.CSS.itemContent, {
+      innerHTML: content,
+      contentEditable: (!this.readOnly).toString(),
+    });
+
+    itemBody.appendChild(itemContent);
+    itemWrapper.appendChild(itemBody);
+
+    return itemWrapper as HTMLLIElement;
+  }
+
+  /**
+   * Return the item content
+   *
+   * @param {Element} item - item wrapper (<li>)
+   * @returns {string}
+   */
+  getItemContent(item: Element): string {
+    const contentNode = item.querySelector(`.${ListRenderer.CSS.itemContent}`);
+    if (!contentNode) {
+      return '';
+    }
+
+    if (Dom.isEmpty(contentNode)) {
+      return '';
+    }
+
+    return contentNode.innerHTML;
+  }
+
+
+  /**
+   * Returns item meta, for undered list checked will be always undefined
+   * @returns Item meta object
+   */
+  getItemMeta(): ItemMeta  {
+    return {
+      checked: undefined,
+    }
+  }
+}