@ilo-org/twig 0.0.1

package/src/patterns/components/table/table.js

@@ -0,0 +1,279 @@
+import { EVENTS, ARIA, MISC } from '@ilo-org/utils';
+
+/**
+ * The Table module which handles rendering field labels inline on a form.
+ *
+ *
+ * @class Table
+ */
+export default class Table {
+  /**
+   * Table constructor which assigns the element passed into the constructor
+   * to the `this.element` property for later reference
+   *
+   * @param {HTMLElement} element - REQUIRED - the module's container
+   */
+  constructor(element) {
+    /**
+     * Reference to the DOM element that is the root of the component
+     * @property {Object}
+     */
+    this.element = element;
+
+    // get the theme prefix
+    this.prefix = this.element.dataset.prefix;
+
+    this.sortlist = [];
+
+    // Initialize the view
+    this.init();
+  }
+
+  /**
+   * Initializes the view by calling the functions to
+   * create DOM references, setup event handlers and
+   * then create the event listeners
+   *
+   * @return {Object} Table A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.cacheDomReferences().setupHandlers().setUpSorting().enable();
+
+    return this;
+  }
+
+  /**
+   * Find all necessary DOM elements used in the view and cache them
+   *
+   * @return {Object} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The button for toggling Read More state
+     * @type {Object}
+     */
+    this.thCells = this.element.querySelectorAll(`.${this.prefix}--table--head--cell`);
+    this.tdCells = this.element.querySelectorAll(`.${this.prefix}--table--body--cell`);
+    this.rows = this.element.querySelectorAll(`[class~="--row"]`);
+    this.thRows = this.element.querySelectorAll(`.${this.prefix}--table--head--row`);
+    this.tdRows = this.element.querySelectorAll(`.${this.prefix}--table--body--row`);
+    this.tBody = this.element.querySelector(`.${this.prefix}--table--body`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Table A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.ClickThHandler = this.onClickTh.bind(this);
+    this.ClickTdHandler = this.onClickTd.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Evaluates which columns are sortable and adds class to th of sortable columns
+   *
+   * @return {Object} Table A reference to the current instance of the class
+   * @chainable
+   */
+  setUpSorting() {
+    Array.from(this.tdRows).forEach((tdrow) => {
+      Array.from(tdrow.querySelectorAll(`.${this.prefix}--table--body--cell`)).forEach(
+        (cell, index) => {
+          const sortablecontent = cell.textContent.toLowerCase();
+          if (typeof this.sortlist[index] === 'undefined') {
+            this.sortlist[index] = [];
+          }
+          if (cell.classList.contains('numeric')) {
+            if (this.isDate(sortablecontent)) {
+              this.sortlist[index].push({ value: sortablecontent, node: tdrow, type: 'date' });
+            } else {
+              this.sortlist[index].push({ value: sortablecontent, node: tdrow, type: 'numeric' });
+            }
+          } else if (cell.innerHTML.match(/^([^0-9]*)$/)) {
+            this.sortlist[index].push({ value: sortablecontent, node: tdrow, type: 'string' });
+          }
+        }
+      );
+    });
+    this.sortlist.forEach((column, index) => {
+      if (this.sortlist[index].length === this.tdRows.length) {
+        this.thCells[index].classList.add('sortable');
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Table A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.element.classList.add('table--js');
+
+    Array.from(this.thCells).forEach((thcell) => {
+      thcell.addEventListener(EVENTS.CLICK, (e) => this.ClickThHandler(e));
+    });
+
+    Array.from(this.tdCells).forEach((tdcell) => {
+      tdcell.addEventListener(EVENTS.CLICK, (e) => this.ClickTdHandler(e));
+    });
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of a tab
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  onClickTh(e) {
+    e.preventDefault();
+    Array.from(this.thCells).forEach((thcell, index) => {
+      // set/remove aria-sort attribute
+      if (thcell === e.target) {
+        if (
+          typeof thcell.getAttribute(ARIA.SORT) === 'undefined' ||
+          thcell.getAttribute(ARIA.SORT) === MISC.DESCENDING
+        ) {
+          thcell.setAttribute(ARIA.SORT, MISC.ASCENDING);
+          this.sortColumn(index, MISC.ASCENDING);
+        } else {
+          thcell.setAttribute(ARIA.SORT, MISC.DESCENDING);
+          this.sortColumn(index, MISC.DESCENDING);
+        }
+      } else {
+        thcell.removeAttribute(ARIA.SORT);
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of a tab
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  onClickTd(e) {
+    e.preventDefault();
+    let currentindex = null;
+
+    Array.from(this.tdRows).forEach((tdrow) => {
+      tdrow.classList.remove('selected');
+    });
+
+    e.target.parentElement.classList.add('selected');
+
+    Array.from(this.tdCells).forEach((tdcell) => {
+      tdcell.classList.remove('selected');
+      tdcell.classList.remove('column--selected');
+    });
+
+    Array.from(
+      e.target.parentElement.querySelectorAll(`.${this.prefix}--table--body--cell`)
+    ).forEach((tdcell, index) => {
+      if (tdcell === e.target) {
+        tdcell.classList.add('selected');
+        currentindex = index;
+      }
+    });
+
+    Array.from(this.tdRows).forEach((tdrow) => {
+      Array.from(tdrow.querySelectorAll(`.${this.prefix}--table--body--cell`)).forEach(
+        (tdcell, index) => {
+          if (index === currentindex && tdcell !== e.target) {
+            tdcell.classList.add('column--selected');
+          }
+        }
+      );
+    });
+
+    return this;
+  }
+
+  /**
+   * Sort a column
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  sortColumn(column, sortdirection) {
+    const sorted = this.sortlist[column].sort(this.compare(sortdirection));
+
+    while (this.tBody.firstChild) {
+      this.tBody.removeChild(this.tBody.lastChild);
+    }
+
+    sorted.forEach((row) => {
+      this.tBody.appendChild(row.node);
+    });
+
+    return this;
+  }
+
+  /**
+   * compare
+   *
+   * @return {Function} a compare function
+   */
+  compare(sortdirection) {
+    return function (a, b) {
+      if (sortdirection === MISC.ASCENDING) {
+        if (a.value === b.value) {
+          return 0;
+        } else {
+          if (a.type === 'numeric') {
+            return a.value - b.value;
+          } else if (a.type === 'date') {
+            return new Date(a.value) - new Date(b.value);
+          } else {
+            return a.value < b.value ? -1 : 1;
+          }
+        }
+      } else {
+        if (a.value === b.value) {
+          return 0;
+        } else {
+          if (a.type === 'numeric') {
+            return b.value - a.value;
+          } else if (a.type === 'date') {
+            return new Date(b.value) - new Date(a.value);
+          } else {
+            return a.value > b.value ? -1 : 1;
+          }
+        }
+      }
+    };
+  }
+
+  /**
+   * isDate
+   * tests is the passed string is a date
+   *
+   * @return {Boolean} is it a date?
+   */
+  isDate = function (date) {
+    let isdate = false;
+    if (date.match(/^[0-3]?[0-9]\/[0-3]?[0-9]\/(?:[0-9]{2})?[0-9]{2}$/)) {
+      isdate = true;
+    }
+    if (date.match(/^[0-3]?[0-9]\-[0-3]?[0-9]\-(?:[0-9]{2})?[0-9]{2}$/)) {
+      isdate = true;
+    }
+
+    return isdate;
+  };
+}

package/src/patterns/components/table/table.stories.jsx

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./table.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/table/table.twig

@@ -0,0 +1,36 @@
+{#
+  TABLE COMPONENT
+#}
+<div class="{{prefix}}--table{% if zebra is defined and zebra == 'true' %} {{prefix}}--table--zebra{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Table">
+  <header class="{{prefix}}--table--header">
+    <h3 class="{{prefix}}--table--headline">
+      {{headline}}
+    </h3>
+    {% if description is defined %}
+    <p class="{{prefix}}--table--description">
+      {{description|raw}}
+    </p>
+    {% endif %}
+  </header>
+  <div class="{{prefix}}--table--wrapper">
+    <table class="{{prefix}}--table--content">
+      <thead class="{{prefix}}--table--head">
+        <tr class="{{prefix}}--table--head--row">
+        {% for column in tableheadings %}
+          <th class="{{prefix}}--table--head--cell">{{column}}</th>
+        {% endfor %}
+        </tr>
+      </thead>
+      <tbody class="{{prefix}}--table--body">
+        {% for row in tabledata %}
+          <tr class="{{prefix}}--table--body--row">
+            {% for cell in row %}
+              {% set evaluate = cell|striptags|replace({'/': '', '-':'','_':'','.':'',}) %}
+              <td class="{{prefix}}--table--body--cell{% if evaluate matches '/^[0-9]+$/' %} numeric{% endif %}">{{cell|raw}}</td>
+            {% endfor %}
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/patterns/components/table/table.wingsuit.yml

@@ -0,0 +1,112 @@
+table:
+  use: '@components/table/table.twig'
+  label: Table
+  description: A component for displaying data in a table
+  fields:
+    headline:
+      type: string
+      label: Headline
+      description: The table's headline
+      preview: "Headline"
+      required: true
+    toolip:
+      type: object
+      label: Tooltip
+      description: If there is a tooltip next to the headline, the tooltip's data
+      preview:
+        label: "tooltip"
+        icon: true
+        theme: "dark"
+      required: false
+    description:
+      type: string
+      label: Description
+      description: Descriptive copy to augment the table's headline
+      preview: "This is my descriptive copy.<br />It can contain some html: br, a, strong, em tags."
+      required: false
+    tableheadings:
+      type: object
+      label: Table Headings
+      description: The heading labels for the table's columns
+      preview:
+        - "Plain Text One"
+        - "Plain Text Two"
+        - "Plain Text With Links"
+        - "Numbers & Number Ranges"
+        - "Dates"
+    tabledata:
+      type: object
+      label: Table Data
+      description: The data of the table proper. Cells can include plain text or plain text with anchor tags.
+      preview:
+        -
+          - "table cell text one"
+          - "table cell text 1"
+          - "table cell <a href='http://www.ilo.org'>text one</a>"
+          - "1-20"
+          - "11/05/2022"
+        -
+          - "table cell text two"
+          - "table cell text 2"
+          - "table cell <a href='http://www.ilo.org'>text two<a>"
+          - "3"
+          - "7/19/2022"
+        -
+          - "table cell text three"
+          - "table cell text 3"
+          - "table cell <a href='http://www.ilo.org'>text three</a>"
+          - "75"
+          - "01/01/1975"
+        -
+          - "table cell text four"
+          - "table cell text 4"
+          - "table cell <a href='http://www.ilo.org'>text four</a>"
+          - "10-15"
+          - "01/01/2022"
+        -
+          - "table cell text five"
+          - "table cell text 5"
+          - "table cell <a href='http://www.ilo.org'>text five</a>"
+          - "5"
+          - "10/31/2022"
+        -
+          - "table cell text six"
+          - "table cell text 6"
+          - "table cell <a href='http://www.ilo.org'>text six</a>"
+          - "6"
+          - "08/13/2016"
+        -
+          - "table cell text seven"
+          - "table cell text 7"
+          - "table cell <a href='http://www.ilo.org'>text seven</a>"
+          - "7"
+          - "11/18/2013"
+        -
+          - "table cell text eight"
+          - "table cell text 8"
+          - "table cell <a href='http://www.ilo.org'>text eight</a>"
+          - "8"
+          - "12/31/1"
+        -
+          - "table cell text nine"
+          - "table cell text 9"
+          - "table cell <a href='http://www.ilo.org'>text nine</a>"
+          - "9"
+          - "01/01/1970"
+        -
+          - "table cell text ten"
+          - "table cell text 10"
+          - "table cell <a href='http://www.ilo.org'>text ten</a>"
+          - "10"
+          - "01/01/2023"
+  settings:
+    zebra:
+      type: select
+      label: Zebra Striping
+      description: Should the table display zebra striping?
+      options:
+        true: True
+        false: False
+      preview: false
+      required: false
+  visibility: storybook

package/src/patterns/components/tableofcontents/index.js

@@ -0,0 +1,6 @@
+/**
+ * table of contents
+ */
+// Module template
+import './tableofcontents.twig';
+import './tableofcontents.wingsuit.yml';

package/src/patterns/components/tableofcontents/tableofcontents.stories.jsx

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./tableofcontents.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/tableofcontents/tableofcontents.twig

@@ -0,0 +1,14 @@
+{#
+  TABLE OF CONTENTS COMPONENT
+#}
+{% if items %}
+  <nav class="{{prefix}}--table-of-contents">
+    <ul class="{{prefix}}--table-of-contents--list">
+      {% for item in items %}
+        <li class="{{prefix}}--table-of-contents--list--item">
+          <a class="{{prefix}}--table-of-contents--link" href="{{item.href}}">{{item.label}}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+{% endif %}

package/src/patterns/components/tableofcontents/tableofcontents.wingsuit.yml

@@ -0,0 +1,22 @@
+tableofcontents:
+  use: '@components/tableofcontents/tableofcontents.twig'
+  label: Table Of Contents
+  description: A component for displaying links internal to a page
+  fields:
+    items:
+      type: object
+      label: Items
+      description: The items in the table of contents.
+      required: true
+      preview:
+        - label: "Item One"
+          href: '#example'
+        - label: "Item Two"
+          href: '#example'
+        - label: "Item Three"
+          href: '#example'
+        - label: "Item Four"
+          href: '#example'
+        - label: "Item Five"
+          href: '#example'
+  visibility: storybook

package/src/patterns/components/tabs/index.js

@@ -0,0 +1,7 @@
+/**
+ * Tabs
+ */
+// Module template
+import './tabs.twig';
+import './tabs.wingsuit.yml';
+import './tabs.behavior.js';

package/src/patterns/components/tabs/tabs.behavior.js

@@ -0,0 +1,23 @@
+import Tabs from './tabs';
+import Tooltip from '../tooltip/tooltip';
+
+Drupal.behaviors.tabs = {
+  attach() {
+    Array.prototype.forEach.call(
+      document.querySelectorAll(`[data-loadcomponent="Tabs"]`),
+      (element) => {
+        // eslint-disable-next-line no-console
+        console.log('loading Tabs component....');
+        new Tabs(element);
+      }
+    );
+    Array.prototype.forEach.call(
+      document.querySelectorAll(`[data-loadcomponent="Tooltip"]`),
+      (element) => {
+        // eslint-disable-next-line no-console
+        console.log('loading Tooltip component....');
+        new Tooltip(element);
+      }
+    );
+  },
+};