Sticky the crawl config progress indicator position (#445)

* fix tabs on scroll

* adjust for smaller creen size

* scroll to top of section on change

* only scroll if needed
This commit is contained in:
sua yoo 2023-01-09 19:58:33 -08:00 committed by GitHub
parent 2dcf5cb36b
commit 303df2869c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 13 deletions

View File

@ -140,6 +140,14 @@ export class TabList extends LitElement {
.navWrapper {
grid-area: menu;
overflow-y: hidden;
overflow-x: auto;
}
@media only screen and (min-width: ${SCREEN_LG}px) {
.navWrapper {
overflow: initial;
}
}
.header {
@ -155,6 +163,9 @@ export class TabList extends LitElement {
.nav {
position: relative;
position: -webkit-sticky;
position: sticky;
top: var(--sl-spacing-medium);
}
ul {
@ -331,8 +342,10 @@ export class TabList extends LitElement {
panel.active = panel.name === this.activePanel;
if (panel.active) {
panel.style.display = "flex";
panel.setAttribute("aria-hidden", "false");
} else {
panel.style.display = "none";
panel.setAttribute("aria-hidden", "true");
}
});
}

View File

@ -8,7 +8,7 @@ import type {
SlSelect,
SlTextarea,
} from "@shoelace-style/shoelace";
import { state, property, query } from "lit/decorators.js";
import { state, property, query, queryAsync } from "lit/decorators.js";
import { when } from "lit/directives/when.js";
import { msg, localized, str } from "@lit/localize";
import { ifDefined } from "lit/directives/if-defined.js";
@ -257,6 +257,9 @@ export class CrawlConfigEditor extends LiteElement {
@query('form[name="newJobConfig"]')
formElem!: HTMLFormElement;
@queryAsync("btrix-tab-panel[aria-hidden=false]")
activeTabPanel!: Promise<HTMLElement | null>;
connectedCallback(): void {
this.initializeEditor();
super.connectedCallback();
@ -269,14 +272,17 @@ export class CrawlConfigEditor extends LiteElement {
) {
this.initializeEditor();
}
if (changedProperties.get("formState") && this.formState) {
this.handleFormStateChange();
}
}
updated(changedProperties: Map<string, any>) {
if (changedProperties.get("progressState") && this.progressState) {
this.handleProgressStateChange(
changedProperties.get("progressState") as ProgressState
);
}
if (changedProperties.get("formState") && this.formState) {
this.handleFormStateChange();
}
}
private initializeEditor() {
@ -396,7 +402,7 @@ export class CrawlConfigEditor extends LiteElement {
this.renderNavItem(tabName, tabLabels[tabName])
)}
<btrix-tab-panel name="newJobConfig-crawlSetup">
<btrix-tab-panel name="newJobConfig-crawlSetup" class="scroll-m-3">
${this.renderPanelContent(
html`
${when(this.jobType === "url-list", this.renderUrlListSetup)}
@ -411,16 +417,28 @@ export class CrawlConfigEditor extends LiteElement {
{ isFirst: true }
)}
</btrix-tab-panel>
<btrix-tab-panel name="newJobConfig-browserSettings">
<btrix-tab-panel
name="newJobConfig-browserSettings"
class="scroll-m-3"
>
${this.renderPanelContent(this.renderCrawlBehaviors())}
</btrix-tab-panel>
<btrix-tab-panel name="newJobConfig-crawlScheduling">
<btrix-tab-panel
name="newJobConfig-crawlScheduling"
class="scroll-m-3"
>
${this.renderPanelContent(this.renderJobScheduling())}
</btrix-tab-panel>
<btrix-tab-panel name="newJobConfig-crawlInformation">
<btrix-tab-panel
name="newJobConfig-crawlInformation"
class="scroll-m-3"
>
${this.renderPanelContent(this.renderJobInformation())}
</btrix-tab-panel>
<btrix-tab-panel name="newJobConfig-confirmSettings">
<btrix-tab-panel
name="newJobConfig-confirmSettings"
class="scroll-m-3"
>
${this.renderPanelContent(this.renderConfirmSettings(), {
isLast: true,
})}
@ -1275,10 +1293,15 @@ https://example.net`}
}
}
private handleProgressStateChange(oldState: ProgressState) {
const { currentStep } = this.progressState;
if (oldState.currentStep !== currentStep) {
this.formElem?.scrollIntoView({ behavior: "smooth" });
private async handleProgressStateChange(oldState: ProgressState) {
const { activeTab } = this.progressState;
if (oldState.activeTab !== activeTab) {
const activeTabPanel = (await this.activeTabPanel) as HTMLElement;
if (activeTabPanel && activeTabPanel.getBoundingClientRect().top < 0) {
activeTabPanel.scrollIntoView({
behavior: "smooth",
});
}
}
}