add-page-title-segment

helpers.add-page-title-segment\.js

import Helper from '@ember/component/helper';

class TitleSegments {
  constructor(segments = []) {
    this.replace(segments);
  }
  replace(segments) {
    this.segments = [...segments];
  }
  *[Symbol.iterator]() {
    yield* this.segments;
  }
}

function setTitleSegments() {
  const reverseFlatten = (a, i) => [...i, ...a];

  document.title = [...titleSegmentsTracking].reduce(reverseFlatten, []).join(' | ');
}

const titleSegmentsTracking = new Set([new TitleSegments([document.title])]);

export default class AddPageTitleSegment extends Helper {
  constructor() {
    super(...arguments);
    this.titleSegments = new TitleSegments();
    titleSegmentsTracking.add(this.titleSegments);
  }

  willDestroy() {
    titleSegmentsTracking.delete(this.titleSegments);
    setTitleSegments();
    super.willDestroy(...arguments);
  }

  compute(segments) {
    this.titleSegments.replace(segments);
    setTitleSegments();
  }
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('foo');
  this.route('bar', function() {
    this.route('baz');
  });
});

export default Router;

templates.application\.hbs

<header>
  <h1>{{
</header>

<nav>
  <ul>
    <li><LinkTo @route="foo">Foo</LinkTo></li>
    <li>
      <LinkTo @route="bar">Bar</LinkTo>
      <ul>
        <li><LinkTo @route="bar.baz">Baz</LinkTo></li>
      </ul>
    </li>
  </ul>
</nav>
<br>
<br>
{{outlet}}
<br>
<br>

templates.bar.baz\.hbs

{{add-page-title-segment "BAZ"}}

<h2>Baz</h2>

{{outlet}}

templates.bar\.hbs

{{add-page-title-segment "BAR"}}

<h1>Bar</h1>

{{outlet}}

templates.foo\.hbs

{{add-page-title-segment "FOO"}}

<h1>Foo</h1>

{{outlet}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}