@ilo-org/twig 0.1.1 → 0.1.3

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

@@ -0,0 +1,164 @@
+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, i) => {
+        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.twig

@@ -2,13 +2,22 @@
   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>
+  <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 openbutton %}
+    </div>
+    <div class="{{prefix}}--table-of-contents--modal">
+      <h3 class="{{prefix}}--table-of-contents--headline">{{headline}}</h3>
+      {% include '@components/button/button.twig' with closebutton %}
+    </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/tableofcontents/tableofcontents.wingsuit.yml

@@ -3,6 +3,35 @@ tableofcontents:
   label: Table Of Contents
   description: A component for displaying links internal to a page
   fields:
+    openbutton:
+      type: object
+      label: Open Button
+      description: The label and settings for the button that will show the table of contents at small breakpoints
+      preview:
+        size: 'medium'
+        type: 'secondary'
+        label: 'Open Button'
+        className: 'toc--modal--open'
+        opensmodal: true
+      required: true
+    closebutton:
+      type: object
+      label: Close Button
+      description: Label and settings for the "close" button
+      preview:
+        size: 'large'
+        type: 'tertiary'
+        label: 'Close Button'
+        icon: close
+        iconPos: center
+        icononly: true
+        className: 'toc--modal--close'
+    headline:
+      type: string
+      label: Headline
+      description: A headline for the small breakpoint view of the table of contents, shown when it is opened. Design recommendation is that this matches the page title as shown in the hero.
+      preview: "Page Title"
+      required: true
     items:
       type: object
       label: Items

package/src/patterns/components/tabs/tabs.twig

@@ -6,7 +6,6 @@
 {% for item in items %}
   {% set tabids = tabids|merge([random(100000)]) %}
 {% endfor %}
-
 <div class="{{prefix}}--tabs" data-prefix="{{prefix}}" id="tabs--{{uid}}" data-loadcomponent="Tabs">
     <ul class="{{prefix}}--tabs--selection" aria-controls="tabs--{{uid}}" role="tablist" style="--tabscount: {{items|length}};">
       {% for item in items %}