@hilemangroup/bp-frontend/src/js/modules/twbs4.collapsible.js

Common shared frontend utilities for boilerplate projects

import $ from 'jquery';
import uniqueId from './uniqueId';

const defaults = {
  prepend: false,
  copyToggler: true
};

const getId = () => uniqueId('collapsible-collapse-');

/**
 * @param {Object} options
 *   @param {string} options.collapse - A selector for the collapse element.
 *   @param {string} options.collapseToggle - A selector for the collapse toggle button element.
 *   @param {string|Function} options.collapseToggleLocation - A selector for the collapse toggle button's parent element, or a function that returns the parent element.
 *   @param {boolean} [options.prepend] - Whether the toggle button is prepended or appended to the parent element.
 *   @param {boolean} [options.copyToggler] - Whether the toggle button is passed by reference or by copy.
 */
export default function collapsible(options) {

  if (!$.fn.collapse) {
    console.error('collapse.js not loaded');
    return;
  }

  const settings = $.extend({}, defaults, options);

  return $(settings.collapse).each(function () {

    const id = getId();

    const $collapse = $(this);

    const $collapseToggleLocation = (typeof settings.collapseToggleLocation === 'function')
      ? settings.collapseToggleLocation($collapse)
      : $(settings.collapseToggleLocation);

    const $collapseToggle = (settings.copyToggler)
      ? $(settings.collapseToggle).clone()
      : settings.collapseToggle;

    $collapseToggle
      .addClass('collapsed')
      .attr({
        'aria-expanded': 'false',
        'aria-controls': id,
        'data-toggle': 'collapse',
        'data-target': '#' + id
      });

    if (settings.prepend && $collapseToggleLocation.length) {
      $collapseToggleLocation
        .prepend($collapseToggle);
    } else {
      $collapseToggleLocation
        .append($collapseToggle);
    }

    $collapse
      .addClass('collapse')
      .attr({
        id: id
      })
      .collapse('hide');

  });

};