Skip to content

Simplifying back button text and removing unused functions #1832

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

Closed
wesruv wants to merge 1 commit into from
Closed

Simplifying back button text and removing unused functions #1832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions elements/pfe-primary-detail/demo/pfe-primary-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h3 slot="details-nav--header" style="font-size: inherit; margin: 0 0 0.5em; pad
</h3>
<h3 slot="details-nav">Infrastructure and Management</h3>
<div slot="details">
<p>Infrastructure and Management:</p>
<p>This is Infrastructure and Management.</p>
<ul>
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
Expand All @@ -26,7 +26,7 @@ <h3 slot="details-nav">Infrastructure and Management</h3>

<h3 slot="details-nav">Cloud Computing</h3>
<div slot="details">
<p>Cloud Computing:</p>
<p>This is Cloud Computing.</p>
<ul>
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
Expand All @@ -46,7 +46,7 @@ <h3 slot="details-nav">Cloud Computing</h3>

<h3 slot="details-nav">Storage</h3>
<div slot="details">
<p>Storage:</p>
<p>This is Storage.</p>
<ul>
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
Expand All @@ -56,7 +56,7 @@ <h3 slot="details-nav">Storage</h3>

<h3 slot="details-nav">Runtimes</h3>
<div slot="details">
<p>Runtimes:</p>
<p>This is Runtimes.</p>
<ul>
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
Expand Down
58 changes: 7 additions & 51 deletions elements/pfe-primary-detail/pfe-primary-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,9 @@ export class PfePrimaryDetail extends LitElement {
/** Read only: Displays what breakpoint is currently being used */
@property({ type: String, reflect: true }) breakpoint?: 'compact'|'desktop';

/** Used to set text of back button **/
@property({ type: String }) expandedSectionTitle?: string;

@state() private pristine = true;
@state() private controlsId?: string;
@state() private nextToggle: HTMLElement|null = null;
Expand Down Expand Up @@ -159,7 +162,7 @@ export class PfePrimaryDetail extends LitElement {
aria-controls="${ifDefined(this.controlsId)}"
aria-expanded="${ifDefined(detailsBackButtonExpanded)}"
@click="${this.closeAll}">
${this._renderDetailsWrapperHeading()}
${this.expandedSectionTitle}
</button>
</div>
<slot name="details"></slot>
Expand Down Expand Up @@ -422,28 +425,6 @@ export class PfePrimaryDetail extends LitElement {
}
}

private _renderDetailsWrapperHeading(): TemplateResult {
const desktop = (this.breakpoint === 'desktop') || undefined;
const notDesktop = (this.breakpoint !== 'desktop') || undefined;

if (!this.nextToggle) {
return html`
<div id="details-wrapper__heading"
aria-selected="${ifDefined(desktop && 'true')}"
aria-expanded="${ifDefined(notDesktop && 'true')}"
></div> `;
} else {
const { wasTag } = this.nextToggle.dataset;
const tag = unsafeStatic(wasTag?.match(/^H/i) ? wasTag : 'strong');
return statichtml`
<${tag} id="details-wrapper__heading"
aria-selected="${ifDefined(desktop && 'true')}"
aria-expanded="${ifDefined(notDesktop && 'true')}"
>${this.nextToggle.innerText}</${tag}>
`;
}
}

/**
* Handles changes in state
*/
Expand Down Expand Up @@ -486,6 +467,9 @@ export class PfePrimaryDetail extends LitElement {
// Make sure the aria-controls attribute is set to the details wrapper
this.controlsId = nextDetails?.id;

// Set the back button text
this.expandedSectionTitle = this.nextToggle.innerText;

// Shut previously active detail
if (currentToggle) {
this.dispatchEvent(pfeEvent('pfe-primary-detail:hidden-tab', {
Expand Down Expand Up @@ -544,26 +528,6 @@ export class PfePrimaryDetail extends LitElement {
return element instanceof HTMLElement && element.getAttribute('slot') === 'details-nav';
}

/**
* Check if active element is a tab panel
*/
private _isPanel(element: EventTarget|null): element is HTMLElement {
return element instanceof HTMLElement && element.getAttribute('slot') === 'details';
}

/**
* Get the corresponding active tab panel for the active tab toggle
*/
private _getFocusedPanel(): HTMLElement|null {
const toggles = this.slots.getSlotted('nav', 'details-nav');
const newIndex = toggles?.findIndex(toggle => toggle === document.activeElement);

if (newIndex == null) {
return null;
}
return toggles[newIndex % toggles.length].nextElementSibling as HTMLElement;
}

/**
* Get previous toggle in relation to the active toggle
* @return DOM Element for toggle before the active one
Expand All @@ -575,14 +539,6 @@ export class PfePrimaryDetail extends LitElement {
return toggles?.[(newIndex + toggles.length) % toggles.length] ?? null;
}

/**
* Get currently active toggle
* @return {object} DOM Element for active toggle
*/
private _getFocusedToggle(): HTMLElement|null {
return this.root?.getElementById(this.active ?? '') ?? null;
}

/**
* Get next toggle in list order from currently focused
* @return {object} DOM Element for element after active toggle
Expand Down