{ "file": "addon/components/fountainhead-header.js", "content": "
import Component from 'ember-component';\nimport inject from 'ember-service/inject';\nimport { next } from 'ember-runloop';\nimport hbs from 'htmlbars-inline-precompile';\n\n/**\n * This component is used for any header that should include a click-to-copy scroll target.\n * For any header in a Fountainhead Guide or Docblock, the\n * {{c-l class='parseMarkdown'}} method automatically handles creating instances\n *  by adding new render\n * rules for the `heading_open` and `heading_close` tokens generated by `markdown-it`.\n *\n * This automatically creates headers with fragment ids and\n * click to copy targets for grabbing the anchor for any header in your documentation!\n *\n * The `heading_open` token contains the HTML tag element for each header, it is\n * passed in as the `tagName` property, which creates the correct header element.\n *\n * The {{c-l class='FountainheadCopyableLinkTo'}} component returns a text value\n * matching the href to copy, and is invoked differently depending on if the consuming\n * app is using hash routing or not. If not, we use hash fragment ids like a normal\n * web page. If they are, a query param `id` is used. The\n * {{c-l class='Fountainhead'}} service handles checking which target to use when\n * scrolling to ids on page 'load' _(which is actually any page component's\n * `didInsertElement` hook)_.\n * @class FounatianheadHeader\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n  fountainhead: inject(),\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Specific element id is passed to click-to-copy elements in the template.\n   * @property elementId\n   * @type {string}\n   */\n  elementId: '',\n  /**\n   * The `tagName` is passed to specify header size.\n   * @property tagName\n   * @type {string}\n   */\n  tagName: '',\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * @property classNames\n   * @type {string}\n   * @default 'fh-header'\n   */\n  classNames: 'fh-header',\n\n  // Method\n  // ---------------------------------------------------------------------------\n  /**\n   * Copies the current url to the clipboard by updating the value of the off-screen\n   * input to the url, selecting it and then calling exec copy.\n   * @method _copyToClipboard\n   */\n  _copyToClipboard() {\n    const copyInput = this.$(`#${this.get('elementId')}-input`);\n    copyInput.val(location.href);\n    copyInput.select();\n\n    document.execCommand('copy');\n\n    // Show the copied message and hide after 1.5s\n    this.set('_active', true);\n    setTimeout(() => {\n      if (!(this.get('isDestroyed'))) { this.set('_active', false); }\n    }, 1500);\n  },\n\n  // Actions\n  // ---------------------------------------------------------------------------\n  actions: {\n    /**\n     * Copy to clipboard method must run in next event loop so that the anchor click\n     * can bubble and the browser can update the url before we grab it and copy it.\n     * @method handleCopy\n     * @action\n     */\n    handleCopy() {\n      next(this, '_copyToClipboard');\n    }\n  },\n\n  // Layout\n  // ---------------------------------------------------------------------------\n  layout: hbs`\n    <div class='fh-header-anchor'>\n      {{! Anchor to copy url id }}\n      {{#if fountainhead.meta.hashRouting}}\n        {{! For Hash Location consumers, a link-to with just a query-params creates\n            a link to this page with the correct &id= query param }}\n        {{#link-to (query-params id=elementId) click=(action 'handleCopy')}}\n          {{fountainhead-svg svgId='link'}}\n        {{/link-to}}\n      {{else}}\n        <a href={{concat '#' elementId}} onclick={{action 'handleCopy'}}>\n          {{fountainhead-svg svgId='link'}}\n        </a>\n      {{/if}}\n      {{! 'Copied' message that is shown after clicking anchor copy button }}\n      <div class='fh-header-copied{{if _active ' active'}}'>\n        Copied\n      </div>\n      {{! Off screen input with injected copy value }}\n      <input type='text' class='fh-header-copy-target' value='' id='{{elementId}}-input' />\n    </div>\n    {{! Header Text }}\n    {{yield}}\n  `\n});\n
" }