{ "file": "addon/components/fountainhead-class/items-container.js", "content": "
import Component from 'ember-component';\nimport hbs from 'htmlbars-inline-precompile';\nimport inject from 'ember-service/inject';\n\n/**\n * Tab container for the class' documentation items. Component handles running\n * a controlled instance of `fountainhead-tabs` by tracking `activeTab`\n * internally and passing `tabChanged` to the `fountainhead-tabs` instance.\n *\n * The active tab is reset to the index panel anytime that the `name` (of the\n * class) changes.\n *\n * @class FountainheadClass.ItemsContainer\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n  fountainhead: inject(),\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Array of *ALL* items for this class. Used to find the type when an item is\n   * specified in a query param.\n   * @property classitems\n   * @type {Array}\n   * @default []\n   */\n  classitems: [],\n  /**\n   * This class' array of event documentation items.\n   * @property event\n   * @type {Array}\n   * @default []\n   * @passed\n   */\n  event: [],\n  /**\n   * Route scroll target passed in to allow automatic scrolling in\n   * {{c-l 'didReceiveAttrs'}} hook.\n   * @property fragmentId\n   * @passed\n   * @type {?string}\n   * @default null\n   */\n  fragmentId: null,\n  /**\n   * This class' array of method documentation items.\n   * @property method\n   * @type {Array}\n   * @default []\n   * @passed\n   */\n  method: [],\n  /**\n   * Name of the class. Is checked in `didReceiveAttrs` to know if the tabs\n   * should be reset to the index panel\n   * @property name\n   * @type {string}\n   * @passed\n   */\n  name: '',\n  /**\n   * This class' array of property documentation items.\n   * @property property\n   * @type {Array}\n   * @default []\n   * @passed\n   */\n  property: [],\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * The currently active tab. This is controlled by this component to allow\n   * us to change the tab whenever a documentation item is clicked in the index\n   * panel.\n   * @property activeTab\n   * @type {string}\n   * @protected\n   * @default indexPanel\n   */\n  activeTab: 'indexPanel',\n  /**\n   * @property classNames\n   * @type {Array}\n   * @default ['fh-tabs-container']\n   */\n  classNames: ['fh-tabs-container'],\n  /**\n   * The panel that that the tabs should render on creation. The tabs component\n   * tracks this separately and it needs to be updated separately when a class\n   * page is loaded with an item query parameter.\n   * @property defaultTab\n   * @type {string}\n   * @default 'indexPanel'\n   */\n  defaultTab: 'indexPanel',\n\n  // Methods\n  // ---------------------------------------------------------------------------\n  /**\n   * Handles finding the classitem model using the `item` query param value.\n   * If a classitem is found, initiate a scroll.\n   * @method _selectTabForProperty\n   * @protected\n   * @param {!string} id The id identifying which property to scroll to\n   */\n  _selectTabForProperty(id) {\n    // Find specific classitem data in complete classitems array\n    let targetItem = this.get('classitems').filter(classitem => classitem.name === id);\n\n    // Only attempt to scroll to item if we found it\n    if (targetItem.length) {\n      targetItem = targetItem[0];\n      /*\n       * This is only required on the first load of the tabs, but there isn't\n       * an easy way to track that and it's ok to set it every time b/c the tabs\n       * only uses it in the `init` hook. Setting this ensures that the first\n       * time the tabs renders the passed `defaultTab` matches the passed\n       * `activeTab`. If these don't match the first render of the tabs is blank.\n       */\n      this.set('defaultTab', `${targetItem.itemtype}Panel`);\n      // Change to the selected tab using the itemtype\n      this.set('activeTab', `${targetItem.itemtype}Panel`);\n    }\n  },\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * When component attributes change, either the backing data or the scroll target\n   * has changed. Use {{c-l 'fragmentId'}} to reset tabs to index panel if there\n   * is no scroll target, or select the correct tab for a scroll target.\n   * @event didReceiveAttrs\n   */\n  didReceiveAttrs() {\n    const fragmentId = this.get('fragmentId');\n\n    if (!fragmentId) {\n      this.set('defaultTab', 'indexPanel');\n      this.set('activeTab', 'indexPanel');\n    } else {\n      this._selectTabForProperty(fragmentId);\n    }\n  },\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  actions: {\n    /**\n     * Closure action passed to {{c-l class='FountainheadClass.PropertyLink'}} instances\n     * so that the tab for the property can be selected when a property is clicked\n     * before the selection bubbles up and the browser attempts to find the matching\n     * id for the property.\n     * @method selectTabForProperty\n     * @param {string} id Id of the property matches the name of the property\n     */\n    selectTabForProperty(id) {\n      this._selectTabForProperty(id);\n    },\n    /**\n     * Closure action passed into the tab component. This action is called\n     * whenever a tab is clicked with the id of the tab. Use this to update the\n     * controlling `activeTab` property for the tabs DDAU style.\n     * @method tabChanged\n     * @action\n     * @param {Object} tab           Backing object for a given tab\n     * @param {string} tab.elementId The id of the tab, controls current tab displayed\n     */\n    tabChanged({ elementId }) {\n      this.set('activeTab', elementId);\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    {{#fountainhead-tabs\n      defaultTab=defaultTab\n      activeId=activeTab\n      onChange=(action 'tabChanged')\n      as |components|}}\n      {{! --------------------------------------------------------------------- }}\n      {{! Index Tab - Links to Items\n      {{! --------------------------------------------------------------------- }}\n      {{#components.content label='Index' elementId='indexPanel'}}\n        {{! TODO: Refactor this to a loop over method, props and events to cut out duplicated template code }}\n        {{#if method.length}}\n          <h4 class='fh-docs-category uppercase'>Methods</h4>\n          <ul class='fh-index-list'>\n            {{#each method as |method|}}\n              <li class='fh-index-item'>\n                {{fountainhead-class/property-link\n                  fragmentId=method.name\n                  selectTabForProperty=(action 'selectTabForProperty')}}\n              </li>\n            {{/each}}\n          </ul>\n        {{/if}}\n\n        {{#if property.length}}\n          <h4 class='fh-docs-category uppercase'>Properties</h4>\n          <ul class='fh-index-list'>\n            {{#each property as |property|}}\n              <li class='fh-index-item'>\n                {{fountainhead-class/property-link\n                  fragmentId=property.name\n                  selectTabForProperty=(action 'selectTabForProperty')}}\n              </li>\n            {{/each}}\n          </ul>\n        {{/if}}\n\n        {{#if event.length}}\n          <h4 class='fh-docs-category uppercase'>Events</h4>\n          <ul class='fh-index-list'>\n            {{#each event as |event|}}\n              <li class='fh-index-item'>\n                {{fountainhead-class/property-link\n                  fragmentId=event.name\n                  selectTabForProperty=(action 'selectTabForProperty')}}\n              </li>\n            {{/each}}\n          </ul>\n        {{/if}}\n      {{/components.content}}\n\n      {{! --------------------------------------------------------------------- }}\n      {{! Method/Property/Event Panels\n      {{! --------------------------------------------------------------------- }}\n      {{#components.content label='Methods' hidden=(eq method.length 0) elementId='methodPanel'}}\n        {{#each method as |method|}}\n          {{fountainhead-class/item\n            classItem=method}}\n        {{/each}}\n      {{/components.content}}\n      {{#components.content label='Properties' hidden=(eq property.length 0) elementId='propertyPanel'}}\n        {{#each property as |property|}}\n          {{fountainhead-class/item\n            classItem=property}}\n        {{/each}}\n      {{/components.content}}\n      {{#components.content label='Events' hidden=(eq event.length 0) elementId='eventPanel'}}\n        {{#each event as |event|}}\n          {{fountainhead-class/item\n            classItem=event}}\n        {{/each}}\n      {{/components.content}}\n    {{/fountainhead-tabs}}\n  `\n});\n
" }