@ilo-org/twig 1.1.5 → 1.2.0

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

@@ -1,305 +0,0 @@
-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");
-        }
-      });
-    });
-
-    if (e.target.hasAttribute("href")) {
-      window.location.href = e.target.getAttribute("href");
-    }
-
-    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(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

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./table.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

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

@@ -1,39 +0,0 @@
-{#
-  TABLE COMPONENT
-#}
-<div class="{{prefix}}--table{% if zebra|boolval %} {{prefix}}--table--zebra{% endif %}{% if smallrows|boolval %} {{prefix}}--table--small{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Table">
-  <header class="{{prefix}}--table--header">
-    <h3 class="{{prefix}}--table--headline">
-      {{headline}}
-      {% if tooltip %}
-        {% include '@components/tooltip/tooltip.twig' with tooltip %}
-      {% endif %}
-    </h3>
-    {% if description is defined %}
-    <p class="{{prefix}}--table--description">
-      {{description}}
-    </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}}</td>
-            {% endfor %}
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</div>

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

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

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

@@ -1,16 +0,0 @@
-import TableOfContents from "./tableofcontents";
-
-Drupal.behaviors.tableofcontents = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="TableOfContents"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new TableOfContents(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

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

@@ -1,172 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The TableOfContents module which handles control and display of a TableOfContents dialog
- *
- *
- * @class TableOfContents
- */
-export default class TableOfContents {
-  /**
-   * TableOfContents 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;
-
-    // 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} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().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.OpenButton = this.element.querySelector(`.toc--modal--open`);
-    this.CloseButton = this.element.querySelector(`.toc--modal--close`);
-    this.trigger = this.element.querySelector(
-      `.${this.prefix}--table-of-contents--trigger`
-    );
-    this.modalUx = this.element.querySelector(
-      `.${this.prefix}--table-of-contents--modal`
-    );
-    this.toc = this.element.querySelector(`.${this.prefix}--table-of-contents`);
-    this.tocItems = this.element.querySelectorAll(
-      `.${this.prefix}--table-of-contents--link`
-    );
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} TableOfContents A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.OpenButtonHandler = this.openButtonClick.bind(this);
-    this.CloseHandler = this.closeButtonClick.bind(this);
-    this.KeyPressHandler = this.keyPress.bind(this);
-    this.linkClickHandler = this.linkClick.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.OpenButton.addEventListener(EVENTS.CLICK, () =>
-      this.OpenButtonHandler()
-    );
-    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.CloseHandler());
-
-    if (this.tocItems.length > 0) {
-      this.tocItems.forEach((link) => {
-        link.addEventListener(EVENTS.CLICK, () => this.linkClickHandler());
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of the open button
-   *
-   * @return {Object} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  openButtonClick() {
-    this.trigger.classList.add("hide");
-    this.element.classList.add("show");
-    this.modalUx.classList.add("show");
-    this.toc.classList.add("show");
-    setTimeout(() => {
-      this.modalUx.classList.add("fadein");
-      this.toc.classList.add("fadein");
-    }, 125);
-    window.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of the close button
-   *
-   * @return {Object} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  closeButtonClick() {
-    this.modalUx.classList.remove("fadein");
-    this.toc.classList.remove("fadein");
-    setTimeout(() => {
-      this.modalUx.classList.remove("show");
-      this.toc.classList.remove("show");
-      this.element.classList.remove("show");
-      this.trigger.classList.remove("hide");
-    }, 125);
-    window.removeEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of any link
-   *
-   * @return {Object} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  linkClick() {
-    this.closeButtonClick();
-
-    return this;
-  }
-
-  /**
-   * Actions performed on key press
-   *
-   * @return {Object} TableOfContents A reference to the instance of the class
-   * @chainable
-   */
-  keyPress(e) {
-    if (e.key === "Escape") {
-      this.closeButtonClick();
-    }
-
-    return this;
-  }
-}

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

@@ -1,10 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./tableofcontents.wingsuit.yml");
-
-/* eslint-disable-next-line */
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-};

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

@@ -1,47 +0,0 @@
-{# tableofcontents.twig #}
-
-{% set openbutton_size = openbutton.size|default("medium") %}
-{% set openbutton_type = openbutton.type|default("secondary") %}
-{% set openbutton_label = openbutton.label|default("Open") %}
-{% set openbutton_label = openbutton.label|default("Open") %}
-{% set closebutton_label = closebutton.label|default("Close") %}
-
-{% if items %}
-	<div class="{{prefix}}--table-of-contents--wrapper" data-loadcomponent="TableOfContents" data-prefix="{{prefix}}">
-		<div class="{{prefix}}--table-of-contents--trigger">
-			{% include '@components/button/button.twig' with {
-				prefix: prefix,
-				size: openbutton_size,
-				type: openbutton_type,
-				label: openbutton_label,
-				opensmodal: true,
-        className: "toc--modal--open"
-			} only %}
-		</div>
-		<div class="{{prefix}}--table-of-contents--modal">
-			<h3 class="{{prefix}}--table-of-contents--headline">{{headline}}</h3>
-			{% include '@components/button/button.twig' with {
-				prefix: prefix,
-        size: "large",
-        type: "tertiary",
-				label: closebutton_label,
-        icon: {
-          name: "close",
-          size: 24,
-        },
-        iconPos: "center",
-        icononly: true,
-        className: "toc--modal--close"
-      } only %}
-		</div>
-		<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>
-	</div>
-{% endif %}

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

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

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

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