{ "file": "addon/components/fountainhead-pages/base-page.js", "content": "
import $ from 'jquery';\nimport Component from 'ember-component';\nimport inject from 'ember-service/inject';\nimport { scheduleOnce } from 'ember-runloop';\n\n/**\n * Base component that pages with targeted routing extend. Each page is passed a\n * {{c-l 'fragmentId'}} of the route scroll target. A copy of this property is stored\n * as {{c-l 'previousFragmentID'}} and used in {{c-l 'didReceiveAttrs'}} to check for\n * a change in the route target. When it changes, the page is scrolled to the new\n * target.\n * @class FountainheadPages.BasePage\n * @constructor\n * @extends Ember.Component\n */\nexport default Component.extend({\n  fountainhead: inject(),\n\n  // Passed Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Route target of either the hash fragment id or the id query param. Whenever the\n   * target changes it will trigger a {{c-l 'didReceiveAttrs'}} that handles\n   * scrolling the page to the new target (or back to top if the target changes to\n   * empty).\n   * @property fragmentId\n   * @passed\n   * @type {?string}\n   * @default null\n   */\n  fragmentId: null,\n\n  // Properties\n  // ---------------------------------------------------------------------------\n  /**\n   * Internal tracker for previous {{c-l 'fragmentId'}}. Needed to check if the\n   * scroll target has changed in the {{c-l 'didReceiveAttrs'}} hook.\n   * @property previousFragmentID\n   * @protected\n   * @type {?string}\n   * @default null\n   */\n  previousFragmentID: null,\n  /**\n   * @property tagName\n   * @type {string}\n   * @default ''\n   */\n  tagName: '',\n\n  // Hooks\n  // ---------------------------------------------------------------------------\n  /**\n   * Anytime the model or the fragmentId changes send a scroll event to\n   * {{c-l class='Fountainhead'}} service. This handles auto-scrolling to ids that\n   * are not in DOM when the page loads and handles scrolling to ids when the browser\n   * back button is clicked.\n   * @event didReceiveAttrs\n   */\n  didReceiveAttrs() {\n    const {\n      fragmentId,\n      previousFragmentID\n    } = this.getProperties(['fragmentId', 'previousFragmentID']);\n\n    function scrollTo() {\n      const target = document.getElementById(fragmentId);\n      if (target) { target.scrollIntoView(); }\n    }\n\n    if (fragmentId !== previousFragmentID) {\n      if (!fragmentId) {\n        // If the current fragment id is falsey (''), it means scroll to page top\n        $('.fh-page-in-page-wrapper').scrollTop(0);\n      } else {\n        scheduleOnce('afterRender', this, scrollTo);\n      }\n    }\n\n    this.set('previousFragmentID', fragmentId);\n  }\n});\n
" }