renderPanels(panels, plData, iframePassback, switchText) {
    // set-up defaults
    const patternData = plData; // prevents params from getting re-assigned

    let templateRendered;
    let annotation, count, els, item;
    const patternPartial = patternData.patternPartial;
    patternData.panels = panels;

    // set a default pattern description for modal pop-up
    if (!iframePassback && patternData.patternDesc.length === 0) {
      patternData.patternDesc = '';
    }

    // capitilize the pattern name
    patternData.patternNameCaps = patternData.patternName.toUpperCase();

    // check for annotations in the given mark-up
    const markup = document.createElement('div');
    markup.innerHTML = patternData.patternMarkup;

    count = 1;
    patternData.annotations = [];
    delete patternData.patternMarkup;

    for (let i = 0; i < window.comments.comments.length; ++i) {
      item = window.comments.comments[i];
      els = markup.querySelectorAll(item.el);

      if (els.length > 0) {
        annotation = {
          displayNumber: count,
          el: item.el,
          title: item.title,
          comment: item.comment,
        };
        patternData.annotations.push(annotation);
        count++;
      }
    }

    // alert the pattern that annotations should be highlighted
    if (patternData.annotations.length > 0) {
      const obj = JSON.stringify({
        event: 'patternLab.annotationsHighlightShow',
        annotations: patternData.annotations,
      });
      document
        .querySelector('.pl-js-iframe')
        .contentWindow.postMessage(obj, panelsViewer.targetOrigin);
    }

    // add hasComma property to lineage
    if (patternData.lineage.length > 0) {
      for (let i = 0; i < patternData.lineage.length; ++i) {
        if (i < patternData.lineage.length - 1) {
          patternData.lineage[i].hasComma = true;
        }
      }
    }

    // add hasComma property to lineageR
    if (patternData.lineageR.length > 0) {
      for (let i = 0; i < patternData.lineageR.length; ++i) {
        if (i < patternData.lineageR.length - 1) {
          patternData.lineageR[i].hasComma = true;
        }
      }
    }

    // add *Exists attributes for Hogan templates
    // figure out if the description exists
    patternData.patternDescExists =
      patternData.patternDesc.length > 0 ||
      (patternData.patternDescAdditions !== undefined &&
        patternData.patternDescAdditions.length > 0);

    // figure out if lineage should be drawn
    patternData.lineageExists = patternData.lineage.length !== 0;

    // figure out if reverse lineage should be drawn
    patternData.lineageRExists = patternData.lineageR.length !== 0;

    // figure out if pattern state should be drawn
    patternData.patternStateExists = patternData.patternState.length > 0;

    // figure if annotations should be drawn
    patternData.annotationExists = patternData.annotations.length > 0;

    // figure if the entire desc block should be drawn
    patternData.descBlockExists =
      patternData.patternDescExists ||
      patternData.lineageExists ||
      patternData.lineageRExists ||
      patternData.patternStateExists ||
      patternData.annotationExists;

    // set isPatternView based on if we have to pass it back to the styleguide level
    patternData.isPatternView = iframePassback === false;

    // render all of the panels in the base panel template
    const template = document.querySelector('.pl-js-panel-template-base');
    const templateCompiled = Hogan.compile(template.innerHTML);
    templateRendered = templateCompiled.render(patternData);

    // make sure templateRendered is modified to be an HTML element
    const div = document.createElement('div');
    div.className = 'pl-c-pattern-info';
    div.innerHTML = templateRendered;
    templateRendered = div;

    // add click events
    templateRendered = panelsUtil.addClickEvents(
      templateRendered,
      patternPartial
    );

    // add onclick events to the tabs in the rendered content
    for (let i = 0; i < panels.length; ++i) {
      const panel = panels[i];

      // default IDs
      const panelTab = '#pl-' + patternPartial + '-' + panel.id + '-tab';
      const panelBlock = '#pl-' + patternPartial + '-' + panel.id + '-panel';

      // show default options
      if (templateRendered.querySelector(panelTab) !== null && panel.default) {
        templateRendered
          .querySelector(panelTab)
          .classList.add('pl-is-active-tab');
        templateRendered
          .querySelector(panelBlock)
          .classList.add('pl-is-active-tab');
      }
    }

    // gather panels from plugins
    Dispatcher.trigger('insertPanels', [
      templateRendered,
      patternPartial,
      iframePassback,
      switchText,
    ]);
  }
/**
   * Render the panels that have been collected
   * @param  {String}      the collected panels
   * @param  {String}      the data from the pattern
   * @param  {Boolean}     if this is going to be passed back to the styleguide
   */
Render the panels that have been collected
@param  {String}      the collected panels
@param  {String}      the data from the pattern
@param  {Boolean}     if this is going to be passed back to the styleguide
Render the panels that have been collected @param { String } the collected panels @param { String } the data from the pattern @param { Boolean } if this is going to be passed back to the styleguide
renderPanels(panels, plData, iframePassback, switchText) {
    const patternData = plData; 
    let templateRendered;
    let annotation, count, els, item;
    const patternPartial = patternData.patternPartial;
    patternData.panels = panels;
    if (!iframePassback && patternData.patternDesc.length === 0) {
      patternData.patternDesc = '';
    }
    patternData.patternNameCaps = patternData.patternName.toUpperCase();
    const markup = document.createElement('div');
    markup.innerHTML = patternData.patternMarkup;
    count = 1;
    patternData.annotations = [];
    delete patternData.patternMarkup;
    for (let i = 0; i < window.comments.comments.length; ++i) {
      item = window.comments.comments[i];
      els = markup.querySelectorAll(item.el);
      if (els.length > 0) {
        annotation = {
          displayNumber: count,
          el: item.el,
          title: item.title,
          comment: item.comment,
        };
        patternData.annotations.push(annotation);
        count++;
      }
    }
    if (patternData.annotations.length > 0) {
      const obj = JSON.stringify({
        event: 'patternLab.annotationsHighlightShow',
        annotations: patternData.annotations,
      });
      document
        .querySelector('.pl-js-iframe')
        .contentWindow.postMessage(obj, panelsViewer.targetOrigin);
    }
    if (patternData.lineage.length > 0) {
      for (let i = 0; i < patternData.lineage.length; ++i) {
        if (i < patternData.lineage.length - 1) {
          patternData.lineage[i].hasComma = true;
        }
      }
    }
    R
    if (patternData.lineageR.length > 0) {
      for (let i = 0; i < patternData.lineageR.length; ++i) {
        if (i < patternData.lineageR.length - 1) {
          patternData.lineageR[i].hasComma = true;
        }
      }
    }
    patternData.patternDescExists =
      patternData.patternDesc.length > 0 ||
      (patternData.patternDescAdditions !== undefined &&
        patternData.patternDescAdditions.length > 0);
    patternData.lineageExists = patternData.lineage.length !== 0;
    patternData.lineageRExists = patternData.lineageR.length !== 0;
    patternData.patternStateExists = patternData.patternState.length > 0;
    patternData.annotationExists = patternData.annotations.length > 0;
    patternData.descBlockExists =
      patternData.patternDescExists ||
      patternData.lineageExists ||
      patternData.lineageRExists ||
      patternData.patternStateExists ||
      patternData.annotationExists;
    patternData.isPatternView = iframePassback === false;
    const template = document.querySelector('.pl-js-panel-template-base');
    const templateCompiled = Hogan.compile(template.innerHTML);
    templateRendered = templateCompiled.render(patternData);
    const div = document.createElement('div');
    div.className = 'pl-c-pattern-info';
    div.innerHTML = templateRendered;
    templateRendered = div;
    templateRendered = panelsUtil.addClickEvents(
      templateRendered,
      patternPartial
    );
    for (let i = 0; i < panels.length; ++i) {
      const panel = panels[i];
      const panelTab = '#pl-' + patternPartial + '-' + panel.id + '-tab';
      const panelBlock = '#pl-' + patternPartial + '-' + panel.id + '-panel';
      if (templateRendered.querySelector(panelTab) !== null && panel.default) {
        templateRendered
          .querySelector(panelTab)
          .classList.add('pl-is-active-tab');
        templateRendered
          .querySelector(panelBlock)
          .classList.add('pl-is-active-tab');
      }
    }
    Dispatcher.trigger('insertPanels', [
      templateRendered,
      patternPartial,
      iframePassback,
      switchText,
    ]);
  }
renderPanels ( panels , plData , iframePassback , switchText ) { const patternData = plData ; let templateRendered ; let annotation , count , els , item ; const patternPartial = patternData . patternPartial ; patternData . panels = panels ; if ( ! iframePassback && patternData . patternDesc . length === 0 ) { patternData . patternDesc = '' ; } patternData . patternNameCaps = patternData . patternName . toUpperCase ( ) ; const markup = document . createElement ( 'div' ) ; markup . innerHTML = patternData . patternMarkup ; count = 1 ; patternData . annotations = [ ] ; delete patternData . patternMarkup ; for ( let i = 0 ; i < window . comments . comments . length ; ++ i ) { item = window . comments . comments [ i ] ; els = markup . querySelectorAll ( item . el ) ; if ( els . length > 0 ) { annotation = { displayNumber : count , el : item . el , title : item . title , comment : item . comment , } ; patternData . annotations . push ( annotation ) ; count ++ ; } } if ( patternData . annotations . length > 0 ) { const obj = JSON . stringify ( { event : 'patternLab.annotationsHighlightShow' , annotations : patternData . annotations , } ) ; document . querySelector ( '.pl-js-iframe' ) . contentWindow . postMessage ( obj , panelsViewer . targetOrigin ) ; } if ( patternData . lineage . length > 0 ) { for ( let i = 0 ; i < patternData . lineage . length ; ++ i ) { if ( i < patternData . lineage . length - 1 ) { patternData . lineage [ i ] . hasComma = true ; } } } if ( patternData . lineageR . length > 0 ) { for ( let i = 0 ; i < patternData . lineageR . length ; ++ i ) { if ( i < patternData . lineageR . length - 1 ) { patternData . lineageR [ i ] . hasComma = true ; } } } patternData . patternDescExists = patternData . patternDesc . length > 0 || ( patternData . patternDescAdditions !== undefined && patternData . patternDescAdditions . length > 0 ) ; patternData . lineageExists = patternData . lineage . length !== 0 ; patternData . lineageRExists = patternData . lineageR . length !== 0 ; patternData . patternStateExists = patternData . patternState . length > 0 ; patternData . annotationExists = patternData . annotations . length > 0 ; patternData . descBlockExists = patternData . patternDescExists || patternData . lineageExists || patternData . lineageRExists || patternData . patternStateExists || patternData . annotationExists ; patternData . isPatternView = iframePassback === false ; const template = document . querySelector ( '.pl-js-panel-template-base' ) ; const templateCompiled = Hogan . compile ( template . innerHTML ) ; templateRendered = templateCompiled . render ( patternData ) ; const div = document . createElement ( 'div' ) ; div . className = 'pl-c-pattern-info' ; div . innerHTML = templateRendered ; templateRendered = div ; templateRendered = panelsUtil . addClickEvents ( templateRendered , patternPartial ) ; for ( let i = 0 ; i < panels . length ; ++ i ) { const panel = panels [ i ] ; const panelTab = '#pl-' + patternPartial + '-' + panel . id + '-tab' ; const panelBlock = '#pl-' + patternPartial + '-' + panel . id + '-panel' ; if ( templateRendered . querySelector ( panelTab ) !== null && panel . default ) { templateRendered . querySelector ( panelTab ) . classList . add ( 'pl-is-active-tab' ) ; templateRendered . querySelector ( panelBlock ) . classList . add ( 'pl-is-active-tab' ) ; } } Dispatcher . trigger ( 'insertPanels' , [ templateRendered , patternPartial , iframePassback , switchText , ] ) ; }
Render the panels that have been collected
 @param  {String}      the collected panels
 @param  {String}      the data from the pattern
 @param  {Boolean}     if this is going to be passed back to the styleguide
Render the panels that have been collected @param { String } the collected panels @param { String } the data from the pattern @param { Boolean } if this is going to be passed back to the styleguide
// set-up defaults // prevents params from getting re-assigned // set a default pattern description for modal pop-up // capitilize the pattern name // check for annotations in the given mark-up // alert the pattern that annotations should be highlighted // add hasComma property to lineage // add hasComma property to lineageR // add *Exists attributes for Hogan templates // figure out if the description exists // figure out if lineage should be drawn // figure out if reverse lineage should be drawn // figure out if pattern state should be drawn // figure if annotations should be drawn // figure if the entire desc block should be drawn // set isPatternView based on if we have to pass it back to the styleguide level // render all of the panels in the base panel template // make sure templateRendered is modified to be an HTML element // add click events // add onclick events to the tabs in the rendered content // default IDs // show default options // gather panels from plugins