Skip to content

fix: 2.0 pfe-jump-links doc updates and fixes #1829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bennypowers merged 7 commits into from
Dec 24, 2021
Merged

fix: 2.0 pfe-jump-links doc updates and fixes #1829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
91338cb
chore: remove old demo sticky nav
heyMP Dec 22, 2021
11a7351
fix: enable offset to be set to zero
heyMP Dec 22, 2021
6e50ed5
chore: remove old demo panel offset
heyMP Dec 22, 2021
5f3833e
fix: accent-bar mixin wasn't setting proper width
heyMP Dec 22, 2021
c5fd74e
feat: support multiple nested scroll containers
heyMP Dec 22, 2021
d68104c
chore: update docs
heyMP Dec 22, 2021
9105d94
remove duplicate background-color property.
heyMP Dec 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 2 additions & 13 deletions elements/pfe-jump-links/demo/pfe-jump-links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,6 @@
<link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.css">
<link rel="stylesheet" href="/elements/pfe-jump-links/demo/demo.css">

<pfe-jump-links-nav id="navbar" horizontal>
<ul>
<li><a class="active" href="#standard">Standard</a></li>
<li><a href="#subsections">Sub-sections</a></li>
<li><a href="#autobuild">Autobuild</a></li>
<li><a href="#horizontal">Horizontal</a></li>
<li><a href="#pfeband">With pfe-band</a></li>
<li><a href="#themable">Custom theming</a></li>
</ul>
</pfe-jump-links-nav>

<div class="content" scrolltarget="navbar">
<div style="margin: 30px auto 60px; max-width:1140px;" class="pfe-l-grid pfe-m-gutters">
<div class="pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
Expand Down Expand Up @@ -631,7 +620,7 @@ <h3 class="pfe-jump-links-panel__section" id="section1000">Section 10</h3>
</div>

<div id="horizontal" nav-label="Horizontal" offset="0">
<pfe-jump-links-nav horizontal id="jumplinks9" color="darker">
<pfe-jump-links-nav horizontal id="jumplinks9" color="darker" offset="0">
<img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--200.png" alt="Corporate logo"
slot="logo">
<ul>
Expand Down Expand Up @@ -865,7 +854,7 @@ <h3 class="pfe-jump-links-panel__section" id="section500">Section 5</h3>

<pfe-band color="lightest" aside-height="full" aside-mobile="top" id="pfeband">
<h2 style="text-align: center;" slot="pfe-band--header">Inside a pfe-band aside</h2>
<pfe-jump-links-nav id="jumplinks-band" sr-text="Page navigation" autobuild slot="pfe-band--aside" style="position:sticky;top:65;">
<pfe-jump-links-nav id="jumplinks-band" sr-text="Page navigation" autobuild slot="pfe-band--aside" style="position:sticky;">
</pfe-jump-links-nav>
<div class="pfe-l-grid__item pfe-m-12-col pfe-m-9-col-on-lg">
<pfe-jump-links-panel class="special" pfe-c-scrolltarget="jumplinks-band">
Expand Down
11 changes: 4 additions & 7 deletions elements/pfe-jump-links/docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,17 @@ tags:
{% endband %}

{% renderSlots for=package %}{% endrenderSlots %}
{% renderSlots for="pfe-jump-links-nav", level=3, header="Slots on `pfe-jump-links-nav`" %}{% endrenderSlots %}
{% renderSlots for="pfe-jump-links-panel", level=3, header="Slots on `pfe-jump-links-panel`" %}{% endrenderSlots %}

{% renderAttributes for=package %}{% endrenderAttributes %}

{% renderProperties for=package %}{% endrenderProperties %}

{% renderMethods for=package %}{% endrenderMethods %}

{% renderEvents for=package %}
This component fires an event when a link is made active.
{% endrenderEvents %}
{% renderEvents for=package %}{% endrenderEvents %}

{% renderCssCustomProperties for=package %}
### style="--pfe-jump-links-panel--offset: {integer};"
You can control offset in your styling layer as well. This value can be set directly on the component inside a style attribute, e.g. `style="--pfe-jump-links-panel--offset: 100;"` or using the appropriate selector in another file. Please note that adding an attribute will take precedence over a css value. At the moment only integer values passed to this key are valid. No other values are supported. This means that passing "300px", "2rem","calc(100% - 12px)" will all result in JavaScript errors. You should pass a number that correlates to pixels. To read about the `offset` attribute, see above.
{% endrenderCssCustomProperties %}
{% renderCssCustomProperties for=package %}{% endrenderCssCustomProperties %}

{% renderCssParts for=package %}{% endrenderCssParts %}
7 changes: 6 additions & 1 deletion elements/pfe-jump-links/pfe-jump-links-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,12 @@ li {

// Active state bar; uses pseudo-element, not border, to prevent angled top/bottom
&::before {
@include accent-bar(vertical);
position: absolute;
content: "";
top: 0px;
left: 0px;
height: calc(100% - 0px);
width: calc(var(--pfe-theme--surface--border-width--heavy,4px) - 0px);
background-color: transparent;
}

Expand Down
15 changes: 10 additions & 5 deletions elements/pfe-jump-links/pfe-jump-links-nav.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,16 @@ function isQueryable(x: Node): x is Document|ShadowRoot {

/**
* @fires pfe-jump-links-panel:active-navItem
Copy link
Member

@bennypowers bennypowers Dec 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we deprecate the el:name events and add our own extends Event events?

Copy link
Contributor Author

@heyMP heyMP Dec 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea. Just updated them to our new ComposedEvent

* Active navigation element has changed.
* @fires pfe-jump-links-nav:change
* Panel content has changed.
* @fires pfe-jump-links-nav:stuck
* When the nav panel stucks and unsticks from its container.
*
* @slot heading - The label displayed above the navigation element describing it's function. Defaults to "Jump to section".
* @slot - The component creates a mirror shadowRoot based on the light DOM markup provided in the default slot.
* @slot logo -
* @slot cta -
* @slot heading - The label displayed above the navigation element describing it's function. Defaults to "Jump to section".
* @slot logo - Optionally add a logo that can appear in the horizontal layout mode.
* @slot cta - Optionally add a call-to-action element at the bottom of the nav.
*/
@customElement('pfe-jump-links-nav') @pfelement()
export class PfeJumpLinksNav extends LitElement {
Expand Down Expand Up @@ -333,7 +336,7 @@ export class PfeJumpLinksNav extends LitElement {
// @TODO It seems like the offset is 0 when non-horizontal jumps links are mobile
get offsetValue(): number {
// If the offset attribute has been set, use that (no calculations)
if (this.offset) {
if (typeof this.offset !== 'undefined' && this.offset !== null) {
Copy link
Member

@bennypowers bennypowers Dec 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could also be this.offset != null

return parseInt(this.offset.toString(), 10);
}

Expand Down Expand Up @@ -470,7 +473,9 @@ export class PfeJumpLinksNav extends LitElement {


window.addEventListener('resize', this._resizeHandler);
window.addEventListener('scroll', this._scrollHandler);
// set the `useCapture` to true for scroll events to capture
// scroll events in nested scrollable containers.
window.addEventListener('scroll', this._scrollHandler, true);
// window.addEventListener(events.keyup, this._keyboardHandler);

// If the stickiness changes, update the sticky navigation offset
Expand Down
2 changes: 2 additions & 0 deletions elements/pfe-jump-links/pfe-jump-links-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';

/**
* @fires pfe-jump-links-panel:change
*
* @slot - Panel content
*/
@customElement('pfe-jump-links-panel') @pfelement()
export class PfeJumpLinksPanel extends LitElement {
Expand Down
2 changes: 2 additions & 0 deletions elements/pfe-jump-links/pfe-jump-links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { customElement } from 'lit/decorators.js';
* Jump links act as persistent navigation that consists of a list of anchor links.
* Selecting a link moves a user to content that corresponds with the link selected.
* A link is displayed as active when the content it links to is visible in the browser window.
*
* @cssprop --pfe-jump-links-panel--offset You can control offset in your styling layer as well. This value can be set directly on the component inside a style attribute, e.g. style="--pfe-jump-links-panel--offset: 100;" or using the appropriate selector in another file. Please note that adding an attribute will take precedence over a css value. At the moment only integer values passed to this key are valid. No other values are supported. This means that passing "300px", "2rem","calc(100% - 12px)" will all result in JavaScript errors. You should pass a number that correlates to pixels. To read about the offset attribute, see above.
*/
@customElement('pfe-jump-links') @pfelement()
export class PfeJumpLinks extends PfeJumpLinksNav { }