Skip to content

Commit

Permalink
Merge pull request #10 from OlliTietavainenVaadin/feat/no-history
Browse files Browse the repository at this point in the history
Feat/no history
  • Loading branch information
OlliTietavainenVaadin authored Jun 12, 2023
2 parents bc7f84a + 054e29d commit 5ae3823
Show file tree
Hide file tree
Showing 13 changed files with 202 additions and 9 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
/build/
package-lock.json
analysis.json
/.idea/
Empty file added .idea/.gitignore
Empty file.
6 changes: 6 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions .idea/misc.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions .idea/vcf-anchor-nav.iml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

62 changes: 62 additions & 0 deletions .idea/workspace.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions demo/foo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
<title>vcf-anchor-nav demo</title>
</head>
<body>
<p>Foo <a href="./index.html">Go back</a></p>

</body>
10 changes: 6 additions & 4 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,9 @@
</custom-style>
</head>
<body>
<vcf-anchor-nav fullscreen class="main hidden">

<vcf-anchor-nav fullscreen class="main hidden" no-history>
<p>Go to <a href="./foo.html">foo</a></p>
<a id="api" slot="header" href="/api/#/elements/Vaadin.VcfAnchorNav">
<vaadin-button theme="tertiary" class="nav-btn">
<iron-icon icon="lumo:angle-right" slot="suffix"></iron-icon>
Expand Down Expand Up @@ -194,7 +196,7 @@ <h2 slot="header" class="main">Basic</h2>
}
</style>

<vcf-anchor-nav id="basic" theme="expand-last" disable-preserve-on-refresh>
<vcf-anchor-nav id="basic" theme="expand-last" disable-preserve-on-refresh no-history>
<h1 slot="header">Main Header</h1>

<vcf-anchor-nav-section name="Introduction">
Expand Down Expand Up @@ -256,7 +258,7 @@ <h2 slot="header" class="main">Fullscreen</h2>
}
</style>

<vcf-anchor-nav id="fullscreen" theme="expand-last" disable-preserve-on-refresh>
<vcf-anchor-nav id="fullscreen" theme="expand-last" disable-preserve-on-refresh no-history>
<vaadin-button slot="header">Toggle Fullscreen</vaadin-button>
<vcf-anchor-nav-section>Section 1</vcf-anchor-nav-section>
<vcf-anchor-nav-section>Section 2</vcf-anchor-nav-section>
Expand Down Expand Up @@ -313,7 +315,7 @@ <h2 slot="header" class="main">Custom Tabs</h2>
}
</style>

<vcf-anchor-nav id="custom-tabs" theme="expand-last" disable-preserve-on-refresh>
<vcf-anchor-nav id="custom-tabs" theme="expand-last" disable-preserve-on-refresh no-history>
<!-- Add your own <vaadin-tabs> to the "tabs" slot. -->
<vaadin-tabs slot="tabs">
<!-- Create custom <vaadin-tab> with "id" equal to "tab-id" of the linked section. -->
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vaadin-component-factory/vcf-anchor-nav",
"version": "23.3.0",
"version": "23.4.0",
"description": "Component with tabs used as anchor navigation and content sections. Automates the linking of tabs and sections.",
"main": "vcf-anchor-nav.js",
"author": "Vaadin Ltd",
Expand Down
4 changes: 2 additions & 2 deletions src/vcf-anchor-nav-section.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ class AnchorNavSectionElement extends ElementMixin(ThemableMixin(PolymerElement)
}

get navTab() {
return this.nav && this.nav.$.tabs.querySelector(`#${this.tabId || this.defaultTabId}`);
return this.nav && this.nav.$ && this.nav.$.tabs && this.nav.$.tabs.querySelector(`#${this.tabId || this.defaultTabId}`);
}

get url() {
Expand Down Expand Up @@ -175,7 +175,7 @@ class AnchorNavSectionElement extends ElementMixin(ThemableMixin(PolymerElement)

_onTabSlotChange() {
const tab = this.tab;
if (this.nav && tab) {
if (this.nav && this.nav.$ && tab) {
tab.removeAttribute('slot');
this.tabId = tab.id;
this.nav.$.tabs.appendChild(tab);
Expand Down
84 changes: 82 additions & 2 deletions src/vcf-anchor-nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export class AnchorNavElement extends ElementMixin(ThemableMixin(PolymerElement)
}

static get version() {
return '23.3.0';
return '23.4.0';
}

static get properties() {
Expand Down Expand Up @@ -197,6 +197,17 @@ export class AnchorNavElement extends ElementMixin(ThemableMixin(PolymerElement)
smoothScroll: {
type: Boolean,
value: true
},
/**
* Set to true to disable history of internal navigation so that
* pressing back and forward in the browser only move between
* views / pages and not navigation sections
*/
noHistory: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true
}
};
}
Expand Down Expand Up @@ -244,8 +255,10 @@ export class AnchorNavElement extends ElementMixin(ThemableMixin(PolymerElement)
this.$.slot.addEventListener('slotchange', () => this._onSlotChange());
this.$.tabsSlot.addEventListener('slotchange', e => this._onTabsSlotChange(e));
this.$.headerSlot.addEventListener('slotchange', () => this._onHeaderSlotChange());
this._toggleNoHistory(this.noHistory);

// Add popstate listener
window.addEventListener('popstate', () => {
window.addEventListener('popstate', event => {
this._initTabHighlight();
this._scrollToHash();
});
Expand All @@ -255,6 +268,73 @@ export class AnchorNavElement extends ElementMixin(ThemableMixin(PolymerElement)
this.onSectionFocus = () => {
this.sections.forEach(section => section.removeAttribute('tabindex'));
};
this.addEventListener('no-history-changed', event => {
this._toggleNoHistory(this.noHistory);
});
}

_toggleNoHistory(noHistory) {
if (noHistory) {
this._enableNoHistory();
} else {
this._disableNoHistory();
}
}

_disableNoHistory() {
if (!history.elementsWithNoHistory) {
return;
}
const indexOfCurrent = history.elementsWithNoHistory.indexOf(this);
if (indexOfCurrent < 0) {
return;
}
history.elementsWithNoHistory.splice(indexOfCurrent, 1);
if (history.elementsWithNoHistory.length === 0) {
this._clearOldPushState();
}
}

_enableNoHistory() {
if (!history.elementsWithNoHistory || history.elementsWithNoHistory.length === 0) {
history.elementsWithNoHistory = [this];
history.oldPushState = history.pushState;
history.currentPathname = window.location.pathname;
history.pushState = function pushState(state, unused, url) {
let incomingPathname = null;
if (typeof url === 'string' || url instanceof String) {
incomingPathname = url;
} else if (typeof url === 'object' && !Array.isArray(url) && url !== null) {
incomingPathname = url.pathname;
}
if (incomingPathname != history.currentPathname) {
history.currentPathname = incomingPathname;
history.oldPushState(state, unused, url);
} else {
history.replaceState('', '');
}
};
} else if (!history.elementsWithNoHistory.includes(this)) {
history.elementsWithNoHistory.push(this);
}
}

_clearOldPushState() {
if (history.oldPushState) {
history.pushState = history.oldPushState;
history.oldPushState = null;
}
}

disconnectedCallback() {
this._clearOldPushState();
this._disableNoHistory();
super.disconnectedCallback();
}

connectedCallback() {
super.connectedCallback();
this._toggleNoHistory(this.noHistory);
}

_onNavFocus(e) {
Expand Down

0 comments on commit 5ae3823

Please sign in to comment.