14 Commits

Author SHA1 Message Date
Georgios Kalpakas
4f37f86433 fix(aio): switch from innerText to textContent to support older browsers
`innerText` is not supported in Firefox prior to v45. In most cases (at least
the ones we are interested in), `innerText` and `textContent` work equally well,
but `textContent` is more performant (as it doesn't require a reflow).

From [MDN][1] on the differences of `innerText` vs `textContent`:

> - [...]
> - `innerText` is aware of style and will not return the text of hidden
>   elements, whereas `textContent` will.
> - As `innerText` is aware of CSS styling, it will trigger a reflow, whereas
>   `textContent` will not.
> - [...]

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText

Fixes #17585
2017-06-19 10:32:36 -07:00
Georgios Kalpakas
f2d810febc fix(aio): fix ToC styling
- Make the left bar gray (instead of blue).
- Show gray dot when hovering over an element.
- Hide left bar and dots in embedded mode.
2017-06-04 15:12:29 +01:00
Pete Bacon Darwin
966eb2fbd0 aio: add h1 title to floating table of contents (#16959)
* refactor(aio): use explicit CSS class for TOC container

This makes the styling less fragile to changes in the HTML

* fix(aio): schedule TocComponent.activeIndex updates via AsapScheduler

We use the `asap` scheduler because updates to `activeItemIndex` are triggered by DOM changes,
which, in turn, are caused by the rendering that happened due to a ChangeDetection.

Without asap, we would be updating the model while still in a ChangeDetection handler,
which is disallowed by Angular.

* refactor(aio): do not instantiate floating ToC if not displayed

* feat(aio): display the h1 at the top of the floating TOC

Closes #16900

* refactor(aio): combine the TOC booleans flags into a "type" state

* refactor(aio): remove unnecessary `hostElement` property

* fix(aio): ensure that transition works on TOC

* fix(aio): use strict equality in ToC template
2017-05-24 14:09:55 -06:00
Georgios Kalpakas
c8b08f3a59 feat(aio): implement ScrollSpy service (to highlight the active section in ToC) 2017-05-20 12:08:38 +01:00
Ward Bell
4ccb2269a5 feat(aio): buttons for TOC "Contents" label
- Use buttons for the TOC “Contents” label when embedded-and-expandable or TOC on the right to satisfy a11y.
- Add aria-pressed setting for the toggles in TOC and NavItem.
- Clicking the right panel TOC “Contents” button scrolls to top.
- When embedded use same rotating caret as sidebar
- When embedded and no secondaries, “Content” is just a label.
- Gray background for focused buttons rather than outline because can’t get carets to work with outline.
2017-05-19 09:42:30 +01:00
Ward Bell
2ee7662737 test(aio): remove compileComponents from all tests
By reflex we began all component tests with an async `beforeEach` that called `compileComponents`.
In at least one case (`live-example.component.spec.ts`) that led to the `it` tests being async as well.
There is no need to call `.compileComponents` because CLI web pack + plugin inlines all templates and styles.
While `.compileComponents` was harmless, it added complexity and distraction which we should not inflict on future readers and testers.
2017-05-16 09:45:04 +01:00
Ward Bell
73505e2ff0 feat(aio): scrolling tweaks per 16619 (#16660) 2017-05-09 15:36:24 -07:00
Ward Bell
215611aa9e refactor(aio): rename auto-scroll -> scroll and refactor
Refactor inspired by @gkalpak feedback on PR #16619
2017-05-09 14:11:23 +01:00
Ward Bell
98d83b2e2d feat(aio): scroll back to top when TOC more-items clicked to close
closes  #16482
Usability feature. When long embedded TOC, collapsing it should scroll user to TOC top, not leave in the middle of the page.
2017-05-09 14:11:23 +01:00
Peter Bacon Darwin
b9ed97c0d9 fix(aio): do not display a Toc initially
Previously the `hasToc` was initialised to true, which caused a flash of
unwanted "Contents" [sic] even if the page was not going to need a ToC.

Closes #16597
2017-05-06 14:32:09 +01:00
Stefanie Fluin
799be9c98a feat(aio): TOC float right + service refactor
TOC appears in right panel when wide and hides embedded TOC
Right TOC panel height adjusts dynamically during scroll
Refactored `TocService` and its tests for clarity.
2017-05-06 07:13:31 +01:00
Stefanie Fluin
77b8a76f2e feat(aio): toc styling
- TOC styling
- TOC container placeholder
2017-05-03 19:32:41 -07:00
Ward Bell
f1f04fa782 feat(aio): implement gkalpak review suggestions 2017-04-28 09:45:09 +01:00
Ward Bell
3f46645f5f feat(aio): add Table of Contents (toc) component. (#16078) 2017-04-27 15:32:46 -07:00