fdds/js/components/infoSection.js

   1 export class InfoSection extends HTMLElement {
   2     constructor(header, subheaders) {
   3         super();
   4         this.innerHTML = `
   5             <div id='infoSectionContainer'>
   6                 <div id=${this.formatHeader(header)} class='infoSectionHeader'>
   7                     <h3 id='header'>
   8                     ${header}
   9                     <div id='expand-collapse' class='expand-collapse'>
  10                         [+]
  11                     </div>
  12                     </h3>
  13                 </div>
  14                 <div id='subheaders' class='hidden'>
  15                     <div id='generalDescription'></div>
  16                 </div>
  17                 <div class='section-break'></div>
  18             </div>
  19         `;
  20         this.header = header;
  21         this.subheaders = subheaders;
  22         this.sectionDivs = {};
  23         this.expanded = false;
  24     }
  25
  26     connectedCallback() {
  27         this.initializeHeader();
  28         this.createSubHeaders();
  29     }
  30
  31     initializeHeader() {
  32         const header = this.querySelector('#header');
  33         const expandCollapse = this.querySelector('#expand-collapse');
  34
  35         header.onclick = () => {
  36             if (this.expanded) {
  37                 this.contractSection();
  38             } else {
  39                 this.expandSection();
  40             }
  41         }
  42         header.onmouseover = () => {
  43             expandCollapse.classList.add('hover');
  44         }
  45         header.onmouseout = () => {
  46             expandCollapse.classList.remove('hover');
  47         }
  48     }
  49
  50     expandSection() {
  51         const subsections = this.querySelector('#subheaders');
  52         const expandCollapse = this.querySelector('#expand-collapse');
  53
  54         subsections.classList.remove('hidden');
  55         expandCollapse.innerHTML = '[-]';
  56         this.expanded = true;
  57     }
  58
  59     contractSection() {
  60         const subsections = this.querySelector('#subheaders');
  61         const expandCollapse = this.querySelector('#expand-collapse');
  62
  63         subsections.classList.add('hidden');
  64         expandCollapse.innerHTML = '[+]';
  65         this.expanded = false;
  66     }
  67
  68     createSubHeaders() {
  69         const subsections = this.querySelector('#subheaders');
  70         this.sectionDivs[this.header] = this.querySelector('#generalDescription');
  71         for (let subheader of this.subheaders) {
  72             let div = document.createElement('div');
  73             div.id = this.formatHeader(subheader);
  74             let h4 = document.createElement('h4');
  75             h4.innerHTML = subheader;
  76             div.appendChild(h4);
  77             subsections.appendChild(div);
  78             this.sectionDivs[subheader] = div;
  79         }
  80     }
  81
  82     formatHeader(header) {
  83         return header.replace(' ', '-');
  84     }
  85
  86     updateDescription(subheader, description) {
  87         const subSection = this.sectionDivs[subheader];
  88         if (subSection == null) {
  89             return;
  90         }
  91         let p = document.createElement('p');
  92         p.innerHTML = description;
  93         subSection.appendChild(p);
  94     }
  95 }
  96
  97 window.customElements.define('info-section', InfoSection);