{ "file": "addon/components/cross-link.js", "content": "
import Component from 'ember-component';\nimport inject from 'ember-service/inject';\nimport getOwner from 'ember-owner/get';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * The `{{cross-link}}` component lets you easily reference other classes,\n * modules, properties and methods in your documentation. It handles creating the\n * appropriate link depending on application routing type and presence of a\n * class property. The cross link component is also available using the shorthand\n * syntax: `{{c-l}}`.\n *\n * {{#fountainhead-alert brand='info' dismiss=false}}\n *   {{fountainhead-svg svgId='info'}} The cross link component is also available as\n *   `{{c-l}}` for terseness.\n * {{/fountainhead-alert}}\n *\n * #### Same Class Cross Linking\n * ```glimmer\n * Quickly link to a property in the same class using positional params:\n * Take a look at the {{c-l 'init'}} method to see how the {{c-l '_route'}} property\n * is set.\n * ```\n *\n * #### Other Class Cross Linking\n * ```glimmer\n * Link to any other class, module, property, or method by passing a `class` or\n * `module` property:\n * Take a look at the {{c-l 'setFragmentId' class='Fountainhead'}} method to see\n * how the URL hash is set.\n * ```\n *\n * #### Block Form\n * When used as an inline component, the rendered link-to's text will be the\n * ID of the module or class along with any passed query params. If you want\n * different link text you can use the component in block form.\n *\n * Property | Description\n * --- | ---\n * `class` | Documentation class to link to\n * `module` | Documentation module to link to\n * `item` | Specific documentation item to link to, appended as a query param\n *\n * {{! --------------------------------------------------------------------- }}\n * {{! TEST CASES: B/c Ember Integration Tests + link-to === 💣              }}\n * {{! Uncomment cases below and check in browser                            }}\n * {{! --------------------------------------------------------------------- }}\n * {{! Postional Params }}\n * {{! ## Testing }}\n * {{!-- {{c-l 'init'}}<br> --}}\n * {{!-- {{#c-l 'init'}}BLOCK TEXT{{/c-l}}<br> --}}\n * {{! Passed Item }}\n * {{!-- {{c-l item='init'}}<br> --}}\n * {{!-- {{#c-l item='init'}}BLOCK TEXT{{/c-l}}<br> --}}\n * {{! Passed Module }}\n * {{!-- {{c-l module='Addon'}}<br> --}}\n * {{!-- {{#c-l module='Addon'}}ADDON MODULE{{/c-l}}<br> --}}\n * {{! Passed Class }}\n * {{!-- {{c-l class='CrossLink' item='init'}} <br> --}}\n * {{!-- {{#c-l class='CrossLink' item='init'}}BLOCK TEXT{{/c-l}}<br> --}}\n * {{!-- {{c-l class='Fountainhead'}}<br> --}}\n * {{!-- {{c-l class='Fountainhead' item='meta'}}<br> --}}\n * {{!-- {{#c-l class='Fountainhead' item='meta'}}BLOCK TEXT{{/c-l}}<br> --}}\n *\n * @class CrossLink\n * @public\n * @constructor\n * @extends Ember.Component\n */\nconst CrossLink = Component.extend({\n  fountainhead: inject(),\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Documentation Class to crosslink to.\n   * @property class\n   * @type {?string}\n   * @passed\n   */\n  class: null,\n  /**\n   * Optionally specify an item (property/method) to cross link to on a class.\n   * @property item\n   * @type {?string}\n   * @passed\n   */\n  item: null,\n  /**\n   * Documentation module to crosslink to.\n   * @property module\n   * @type {?string}\n   * @passed\n   */\n  module: null,\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Computed route passed to rendered `link-to` defined in {{c-l 'init'}}\n   * @property _route\n   * @type {?string}\n   * @private\n   */\n  _route: null,\n  /**\n   * Computed model ID passed to rendered `link-to` defined in {{c-l 'init'}}\n   * @property _modelID\n   * @type {?string}\n   * @private\n   */\n  _modelID: null,\n  /**\n   * @property tagName\n   * @type {string}\n   * @default ''\n   */\n  tagName: '',\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * Handle setting a route and model for the template when appropriate + set text\n   * for cross link for when component is used in inline form.\n   * @method init\n   */\n  init() {\n    this._super(...arguments);\n    let text;\n    const { item, module, class: _class } = this.getProperties('item', 'module', 'class');\n\n    const currentRoute = getOwner(this).lookup('router:main').get('currentRouteName');\n    const currentModel = getOwner(this).lookup(`route:${currentRoute}`).get('currentModel.name');\n\n    // Set a single route and model to reference when a module or class is passed\n    // in to pass to linking components in template.\n    if (module || _class) {\n      if (!(this.get('fountainhead.meta.hashRouting'))\n          && (module === currentModel || _class === currentModel)) {\n        // In this case the consumer is using History location, and cross linking to\n        // a property on the same page. In this case, we need to NOT use a link-to\n        // and instead use a <a> with a fragment href. The link-to recognizes that\n        // the route + model are the same and does not recognize the hash, so it\n        // does nothing on click. Using an <a> with a href fragment fires a hash\n        // change and the new fragmentId is passed down from Fountainhead service 👍\n      } else {\n        this.setProperties({\n          _route: `api.${module ? 'modules' : 'classes'}`,\n          _model: module || _class\n        });\n      }\n    }\n\n    // Handle creating text for when cross-link is used in inline form\n    if (module || _class) {\n      text = `${module || _class}${item ? `:${item}`:''}`;\n    } else {\n      text = item;\n    }\n\n    this.set('text', text);\n  },\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  actions: {\n    /**\n     * Ember strips out hash fragments from link-tos, which means that when consumers\n     * with History location click a cross-link pointing to a different route, Ember\n     * will strip the hash.\n     *\n     * 'Fix' this by setting `crossLinkFragmentOverride` on the route. When the\n     * route `didTransition` fires, it will see the override and update the history +\n     * scroll to the cross link target.\n     * @method setFragmentOverride\n     */\n    setFragmentOverride() {\n      if (!this.get('item')) { return true; }\n\n      const currentRouteName = getOwner(this)\n        .lookup('router:main')\n        .get('currentRouteName');\n\n      getOwner(this).lookup(`route:${currentRouteName}`)\n        .set('crossLinkFragmentOverride', this.get('item')); // empty for no item\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    {{#if _route}}\n      {{#if fountainhead.meta.hashRouting}}\n        {{#link-to _route _model (query-params id=item)}}\n          {{#if hasBlock}}{{yield}}{{else}}{{text}}{{/if}}\n        {{/link-to}}\n      {{else}}\n        {{#fh-href _route _model fragmentId=item click=(action 'setFragmentOverride')}}\n          {{#if hasBlock}}{{yield}}{{else}}{{text}}{{/if}}\n        {{/fh-href}}\n      {{/if}}\n    {{else}}\n      {{#if fountainhead.meta.hashRouting}}\n        {{#link-to (query-params id=item)}}\n          {{#if hasBlock}}{{yield}}{{else}}{{text}}{{/if}}\n        {{/link-to}}\n      {{else}}\n        <a href={{concat '#' item}}>\n          {{#if hasBlock}}{{yield}}{{else}}{{text}}{{/if}}\n        </a>\n      {{/if}}\n    {{/if}}\n  `\n});\n\n// SOME SWEET MAGIC TO ALLOW US TO USE POSITIONAL PARAMS WITH COMPONENT\nCrossLink.reopenClass({\n  positionalParams: ['item']\n});\n\nexport default CrossLink;\n
" }