{ "file": "addon/components/fountainhead-tabs.js", "content": "
/* Source: https://github.com/healthsparq/ember-radical/blob/master/addon/components/rad-tabs/component.js */\n\nimport Ember from 'ember';\nimport Component from 'ember-component';\nimport run from 'ember-runloop';\nimport hbs from 'htmlbars-inline-precompile';\n\nconst { $ } = Ember;\n\n/**\n * A++ Accessible tabs. The `fountainhead-tabs` component is the parent\n * container for a given set of tabs and handles managing the active state of\n * the tabs and tab panels. The `fountainhead-tabs` component yields a `content`\n * contextual component inside of the `components` hash.\n *\n * #### Usage\n *\n * ```handlebars\n * {{#fountainhead-tabs as |components|}}\n *   {{#components.content label=\"Delgrango's\"}}\n *     This is my favorite resaurant at the marinara, name of Delgrango's\n *   {{/components.content}}\n *   {{#components.content label=\"Fresh Water\"}}\n *     Boy I sure did work up a thirst after eating all them shramps. Time to\n *     wash it down with a cool glass of marina water.\n *   {{/components.content}}\n * {{/fountainhead-tabs}}\n * ```\n *\n * You can include any number of `components.content` contextual components.\n * _(However keep in mind that adding too many `content` components may result in\n * the tab labels becoming unreadable depending on the space alotted for\n * displaying them.)_\n *\n * You can also specify a default tab by setting the `defaultTab` parameter to\n * match one of content components' HTML id property:\n *\n * ```handlebars\n * {{#fountainhead-tabs defaultTab=\"shrimpers\" as |components|}}\n *   {{#components.content label=\"Shrimp\" elementId=\"shrimpers\"}}\n *     BRINGO! There's some pretty good lil' shrimpers in here, lets check it out.\n *   {{/components.content}}\n *   {{#components.content label=\"Delgrango's\"}}\n *     This is my favorite resaurant at the marinara, name of Delgrango's\n *   {{/components.content}}\n * {{/fountainhead-tabs}}\n * ```\n *\n * ### Controlled Tabs\n * If you need to programatically open tabs within your application you can\n * create a controlled instance of `fountainhead-tabs` by specifying the\n * `activeId` for the component. This means that you need to track the\n * `activeId` in a parent component or service and pass it down into the\n * controlled tab instance. To do this pass an `onChange` closure into the\n * component. It will be called with the `elementId` of the selected tab any\n * time a user changes tabs.\n *\n * TODO: Template & JS Examples\n *\n * Configuration | Type | Default | Description\n * --- | --- | ---\n * `activeId` | string | null | The `elementId` of the tab that should be opened\n * `buttonStyle` | boolean | true | Set to false for tab buttons without primary background-color\n * `defaultTab` | string | null | Tab to render shown by default\n * `onChange` | function | null | Optional closure that will be called when any tab is opened\n * `scrollOnClick` | boolean | false | Set to true to scroll page to top on tab click\n * `scrollTarget` | jQuery selector | 'body, html' | Specify scroll animation target\n *\n * ### A++ Accessibility\n * - Tabs have `aria-controls` set to the `elementId` of the `tabpanel` they show.\n * - Tabs have `role=tab` for role identification\n * - Tabs are instances of `fountainhead-button` for keyboard access\n * - Show/hide of tabs and panels are managed through `aria-hidden` attr\n *\n * ### Feature Notes:\n * - The tab list is a flexbox container with flex-grow 1 for each tab. This auto\n *   magically grows the tabs to fill the entire width of tab container.\n *\n * @class FountainheadTabs\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * The elementId of the currently opened tab. This determines which tab is active and\n   * which tab's content to display. If this is empty, no tabs are open.\n   * @property activeId\n   * @type {String}\n   * @default ''\n   */\n  activeId: '',\n  /**\n   * Pass false to use tab style without primary color tabs.\n   * @property buttonStyle\n   * @type {Boolean}\n   * @default true\n   */\n  buttonStyle: true,\n  /**\n   * The optional elementId of the tab that should be shown by default. This is\n   * useful for cases where the user has come into a page and is expecting one\n   * of the tabs to be shown by default.\n   * @property defaultTab\n   * @type {String}\n   * @default ''\n   */\n  defaultTab: '',\n  /**\n   * Optional closure action that will be called whenever a tab is opened with\n   * the id of that tab. Use this to create a controlled tabs instance.\n   * @property onChange\n   * @type {function}\n   * @default null\n   */\n  onChange: null,\n  /**\n   * Whether the page should scroll the tab context back to the top when one of\n   * the tabs is clicked. This can be a nice convenience for usabilitee.\n   * @property scrollOnClick\n   * @type {Boolean}\n   * @default false\n   */\n  scrollOnClick: false,\n  /**\n   * What the target of the `scrollOnClick` behavior should be. By default,\n   * the entire page/body scrolls, however if this instance of\n   * `fountainhead-tabs` is contained within a modal or some other scrollable\n   * sub-container, it may be more desirable to execute a scroll against that\n   * instead of the entire page. Simply pass a standard jQuery-like selector in\n   * as a string.\n   * @property scrollTarget\n   * @type {string}\n   * @default 'body, html'\n   */\n  scrollTarget: 'body, html',\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Bound attributes:\n   * - `data-test`: for precise testing identification\n   * @property attributeBindings\n   * @type {Array}\n   */\n  attributeBindings: ['data-test'],\n  /**\n   * Class names: `fountainhead-tabs`\n   * @property classNames\n   * @type {Array}\n   */\n  classNames: ['fountainhead-tabs'],\n  /**\n   * List of tabs to display. This is iterated through in the template to\n   * rendered the buttons that are used to change tabs.\n   * @property tabList\n   * @type {Array.<Object>}\n   * @default null\n   */\n  tabList: null,\n\n  // Methods\n  // ---------------------------------------------------------------------------\n  /**\n   * Internal method that can be used with a `run.once` call to only add new tabs\n   * once per run loop. Simply iterates through `_tabsToCreate` and pushes them\n   * into the `tabList`. This is needed to prevent multiple renders in a single\n   * run loop when all of the `content` subcomponents register themselves with\n   * the container during init.\n   * @method _createTabsList\n   */\n  _createTabsList() {\n    const tabList = this.get('tabList');\n\n    this.get('_tabsToCreate').forEach(tab => tabList.pushObject(tab));\n    this.set('_tabsToCreate', Ember.A());\n  },\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * When the component initializes, we set the `tabList` property to an array.\n   * This prevents multiple instances of `fountainhead-tabs` on a given page\n   * from inheriting the same tabList array through prototype inheritance.\n   * @event init\n   * @return {undefined}\n   */\n  init() {\n    this._super(...arguments);\n\n    // Disabled prototype extensions require Ember.A for a new array:\n    // https://guides.emberjs.com/v2.10.0/configuring-ember/disabling-prototype-extensions/#toc_arrays\n    this.set('tabList', Ember.A());\n    this.set('_tabsToCreate', Ember.A());\n\n    // When default tab is passed, update internal flag\n    if (this.get('defaultTab')) {\n      this.set('activeId', this.get('defaultTab'));\n    }\n  },\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  actions: {\n    /**\n     * Action to show a tab. Set `activeId` to the passed elementId. `activeId`\n     * is passed down to children content components\n     * @method showTab\n     * @param {String} elementId HTML id of the tab to show\n     */\n    showTab(elementId) {\n      if (this.get('scrollOnClick')) {\n        let scrollTarget = this.get('scrollTarget');\n        $(scrollTarget).animate({\n          scrollTop: $('#' + this.get('elementId')).offset().top - 120\n        }, 1000);\n      }\n\n      // If an onChange closure was passed in, call it with change data. This\n      // allows for 'controlled' tabs\n      if (this.get('onChange')) {\n        this.get('onChange')({ elementId: elementId });\n      } else {\n        this.set('activeId', elementId);\n      }\n    },\n    /**\n     * Closure action passed to content subcomponents that is called on init.\n     * Each child tab will register itself with this container. To ensure the\n     * tabList is only updated once per render, we proxy new tabs to the\n     * `_tabsToCreate` array and then push all of them to `tabList` using a\n     * `run.once` call to `_createTabsList`\n     * @method registerTab\n     * @param {Object} tab Object model of tab to be registered\n     */\n    registerTab(tab) {\n      this.get('_tabsToCreate').pushObject(tab);\n      // We only want this to run once\n      run.once(this, '_createTabsList');\n    },\n    /**\n     * Closure action passed to content subcomponents that is called whenever\n     * a tab has updated in a way this container needs to know of. Currently\n     * this is only when a tab's `hidden` status changes.\n     * @method updateTab\n     * @param {Object}  tab\n     * @param {string}  tab.elementId HTML id of tab to update\n     * @param {boolean} tab.hidden    Hidden status of changed tab\n     */\n    updateTab({ elementId, hidden }) {\n      const tabToUpdate = this.get('tabList').filter(tab => tab.elementId === elementId);\n\n      if (tabToUpdate.length) {\n        // TODO: when updating hidden in the tabList a double render is occuring\n        // for some reason. Why???\n        run.once(this, () => Ember.set(tabToUpdate[0], 'hidden', hidden));\n      }\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    {{! A list of buttons that are all automagically added to the tabList based on the number of fountainhead-tabs.content components are nested inside the component. }}\n    <ul class='tab-list button-style' role='tablist' data-test='tab-list'>\n      {{#each tabList as |tab|}}\n        <li class='tab-li'\n          aria-hidden='{{if tab.hidden true false}}'>\n          {{#fountainhead-button\n            ariaRole='tab'\n            aria-controls=tab.elementId\n            class=(concat 'tab' (if (eq tab.elementId activeId) ' active'))\n            link=true\n            click=(action 'showTab' tab.elementId)\n            data-test=tab.tabDataTest\n            tagcategory=tab.tagcategory\n            tagaction=tab.tagaction\n            taglabel=tab.taglabel}}\n            {{tab.label}}\n          {{/fountainhead-button}}\n        </li>\n      {{/each}}\n    </ul>\n    <div class='content-container'>\n      {{! Yield the fountainhead-tabs/content component pre-bound with internal props }}\n      {{yield (hash\n        content=(component 'fountainhead-tabs-content'\n          registerTab=(action 'registerTab')\n          updateTab=(action 'updateTab')\n          activeId=activeId)\n      )}}\n    </div>\n  `\n});\n
" }