PatternFly accordion component - pf-accordion

Closes patternfly-webcomponents#25
recrsn · Apr 29, 2017 · bc9a032 · bc9a032
1 parent 462c7a2
commit bc9a032
Show file tree

Hide file tree

Showing 16 changed files with 1,265 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # Ignore Project files
 *.idea
+*.vscode
 
 # Ignore local nodejs packages
 node_modules/

diff --git a/index.html b/index.html
@@ -22,6 +22,9 @@ <h1>PatternFly Web Components</h1>
       <div class="col-sm-6">
         <h2>Widgets</h2>
         <ul>
+          <li>
+            <a href="app/app.html?dir=pf-accordion&file=index.html">Accordion</a>
+          </li>
           <li>
             <a href="app/app.html?dir=pf-alert&file=index.html">Alerts</a>
           </li>

diff --git a/src/patternfly.js b/src/patternfly.js
@@ -1,6 +1,9 @@
 /* Require the HTML Element Shim */
 require('./customElementShim.js');
 
+/** PF Accordion Component **/
+require('pf-accordion.component.js');
+
 /** PF Alert Component **/
 require('pf-alert.component.js');
 

diff --git a/src/pf-accordion/index.html b/src/pf-accordion/index.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html>
+<head>
+  <title>pf-accordion example</title>
+  <link rel="stylesheet" href="../../dist/css/patternfly.css">
+  <link rel="stylesheet" href="../../dist/css/patternfly-additions.css">
+  <link rel="stylesheet" href="../../dist/css/patternfly-webcomponents.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.js"></script>
+  <script src="../../dist/js/patternfly.js"></script>
+</head>
+<body>
+  <div class="container">
+    <div class="page-header">
+      <h1>Accordion</h1>
+    </div>
+    <pf-accordion id="myAccordion">
+      <pf-accordion-panel>
+        <pf-accordion-heading id="headingOne">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" aria-controls="collapseOne">
+              Collapsible Group Item #1
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseOne" open aria-labelledby="headingOne">
+          <pf-accordion-body>
+            Collapse CONTENT 1
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-primary">
+        <pf-accordion-heading id="headingTwo">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" aria-controls="collapseTwo">
+              Collapsible Group Item #2
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseTwo" aria-labelledby="headingTwo">
+          <pf-accordion-body>
+            Collapse CONTENT 2
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel-warning">
+        <pf-accordion-heading id="headingThree">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseThree" aria-controls="collapseThree">
+              Collapsible Group Item #3
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseThree" aria-labelledby="headingThree">
+          <pf-accordion-body>
+            Collapse CONTENT 3
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-success">
+        <pf-accordion-heading id="headingFour">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseFour" aria-controls="collapseFour">
+              Collapsible Group Item #4
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseFour" aria-labelledby="headingFour">
+          <pf-accordion-body>
+            Collapse CONTENT 4
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-danger">
+        <pf-accordion-heading id="headingFive">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseFive" aria-controls="collapseFive">
+              Collapsible Group Item #5
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseFive" aria-labelledby="headingFive">
+          <pf-accordion-body>
+            Collapse CONTENT 5
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+    </pf-accordion>
+
+    <h2>Fixed Height</h2>
+    <pf-accordion fixedheight style="height: 200px" id="myAccordion2">
+      <pf-accordion-panel>
+        <pf-accordion-heading id="headingOne2">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion2" href="#collapseOne2" aria-controls="collapseOne2">
+              Collapsible Group Item #1
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseOne2" open aria-labelledby="headingOne2">
+          <pf-accordion-body>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+      <pf-accordion-panel class="panel panel-primary">
+        <pf-accordion-heading id="headingTwo2">
+          <h4 class="panel-title">
+            <a role="button" data-toggle="collapse" data-parent="#myAccordion2" href="#collapseTwo2" aria-controls="collapseTwo2">
+              Collapsible Group Item #2
+            </a>
+          </h4>
+        </pf-accordion-heading>
+        <pf-accordion-template id="collapseTwo2" aria-labelledby="headingTwo2">
+          <pf-accordion-body>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+            <p>
+              "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              ulpa qui officia deserunt mollit anim id est laborum."
+            </p>
+          </pf-accordion-body>
+        </pf-accordion-template>
+      </pf-accordion-panel>
+    </pf-accordion>
+  </div>
+</body>
+</html>
diff --git a/src/pf-accordion/index.js b/src/pf-accordion/index.js
@@ -0,0 +1,2 @@
+/** PF Accordion Component **/
+require('pf-accordion.component');
diff --git a/src/pf-accordion/package.json b/src/pf-accordion/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "pf-accordion",
+  "version": "1.0.0",
+  "description": "the pf-accordion webcomponent",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/pf-accordion/pf-accordion-body.component.js b/src/pf-accordion/pf-accordion-body.component.js
@@ -0,0 +1,15 @@
+/**
+ * <b>&lt;pf-accordion-body&gt;</b> element for Patternfly Web Components
+ *
+ */
+export class PfAccordionBody extends HTMLElement {
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-body');
+  }
+}
+(function () {
+  document.registerElement('pf-accordion-body', PfAccordionBody);
+}());
diff --git a/src/pf-accordion/pf-accordion-heading.component.js b/src/pf-accordion/pf-accordion-heading.component.js
@@ -0,0 +1,133 @@
+/**
+ * <b>&lt;pf-accordion-heading&gt;</b> element for Patternfly Web Components
+ *
+ */
+export class PfAccordionHeading extends HTMLElement {
+  /**
+   * Called when an instance was inserted into the document
+   */
+  attachedCallback() {
+    this.classList.add('panel-heading');
+    this.setAttribute('role', 'tab');
+
+    this._findTarget();
+
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach((record) => {
+        // detach handlers on toggle removal, try to get another toggle
+        if (this._toggle || this._target) {
+          for (let i = 0, length = record.removedNodes.length; i < length; i++) {
+            if (record.removedNodes[i] === this._toggle) {
+              this._toggle.removeEventListener('click', this._toggleClickHandler);
+              this._toggle.removeEventListener('keyup', this._toggleKeyUpHandler);
+              this._initializeToggle();
+            }
+
+            if (record.removedNodes[i] === this._target) {
+              this._findTarget();
+            }
+          }
+        }
+
+        // if there is no toggle or target initialized
+        if (record.addedNodes.length > 0) {
+          if (!this._target) {
+            this._findTarget();
+          } else if (!this._toggle) {
+            this._initializeToggle();
+          }
+        }
+      });
+    });
+
+    this._observer.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  _findTarget() {
+    this._target = this.parentElement.querySelector('pf-accordion-template');
+    if (this._target) {
+      if (this._target._initialized) {
+        this._initializeToggle();
+      } else {
+        this._target.addEventListener('pf-accordion.initialized', () => {
+          this._initializeToggle();
+        });
+      }
+    }
+  }
+  /**
+   * Finds the toggle element and adds appropriate listeners to it.
+   * @private
+   */
+  _initializeToggle() {
+    this._toggle = this.querySelector('*[data-toggle="collapse"]');
+
+    if (this._toggle) {
+      this._toggleClickHandler = this._handleToggleClick.bind(this);
+      this._toggleKeyUpHandler = this._handleToggleKeyUp.bind(this);
+      this._toggle.addEventListener('click', this._toggleClickHandler);
+      this._toggle.addEventListener('keyup', this._toggleKeyUpHandler);
+
+      if (this._target !== null) {
+        if (this._target.open) {
+          this._toggle.classList.remove('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'true');
+        } else {
+          this._toggle.classList.add('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'false');
+        }
+        this._target.addEventListener('pf-accordion.expanding', () => {
+          this._toggle.classList.remove('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'true');
+        });
+        this._target.addEventListener('pf-accordion.collapsing', () => {
+          this._toggle.classList.add('collapsed');
+          this._toggle.setAttribute('aria-expanded', 'false');
+        });
+      }
+    }
+  }
+
+  /**
+   * Toggle the target
+   * @private
+   */
+  _doToggle() {
+    if (this._target) {
+      this._target.toggle();
+    }
+  }
+
+  /**
+   * Handle keyUp on the toggle element
+   * @private
+   */
+  _handleToggleKeyUp(event) {
+    event.preventDefault();
+    if (32 === event.keyCode) {
+      this._doToggle();
+    }
+  }
+
+  /**
+   * Handle keyUp on the toggle element
+   * @private
+   */
+  _handleToggleClick(event) {
+    event.preventDefault();
+    this._doToggle();
+  }
+
+  /**
+   * Called when the element is removed from the DOM
+   */
+  detachedCallback() {
+    this._observer.disconnect();
+  }
+}
+(function () {
+  document.registerElement('pf-accordion-heading', PfAccordionHeading);
+}());