Skip to content

fix replace history state when using deep path URL #852

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
merged 4 commits into from
Dec 2, 2022
Merged

fix replace history state when using deep path URL #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cdcf02e
fix replace history state when using deep path URL
sroucheray Nov 30, 2022
a12dcef
fix: replace history and auto scroll for each render style with or wi…
sroucheray Dec 1, 2022
7c6a3d2
chore: some typos
sroucheray Dec 1, 2022
0955bf7
fix: make sure an active element is always active when intersection o…
sroucheray Dec 1, 2022
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
18 changes: 9 additions & 9 deletions dist/rapidoc-min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified dist/rapidoc-min.js.gz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion dist/rapidoc-min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified dist/rapidoc-min.js.map.gz
View file
Open in desktop
Binary file not shown.
88 changes: 61 additions & 27 deletions dist/rapidoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15036,12 +15036,12 @@ class ApiRequest extends lit_element_s {
</div>`;
}

// This method is called before navigation change in focusd mode
async beforerNavigationFocusedMode() {
// This method is called before navigation change in focused mode
async beforeNavigationFocusedMode() {
// this.saveExampleState();
}

// This method is called after navigation change in focusd mode
// This method is called after navigation change in focused mode
async afterNavigationFocusedMode() {
this.selectedRequestBodyType = '';
this.selectedRequestBodyExample = '';
Expand Down Expand Up @@ -17195,7 +17195,7 @@ function serverTemplate() {

function expandCollapseNavBarTag(navLinkEl, action = 'toggle') {
const tagAndPathEl = navLinkEl === null || navLinkEl === void 0 ? void 0 : navLinkEl.closest('.nav-bar-tag-and-paths');
const pathsUnderTagEl = tagAndPathEl.querySelector('.nav-bar-paths-under-tag');
const pathsUnderTagEl = tagAndPathEl === null || tagAndPathEl === void 0 ? void 0 : tagAndPathEl.querySelector('.nav-bar-paths-under-tag');
if (tagAndPathEl) {
const isExpanded = tagAndPathEl.classList.contains('expanded');
if (isExpanded && (action === 'toggle' || action === 'collapse')) {
Expand Down Expand Up @@ -17523,14 +17523,14 @@ function toggleExpand(path) {
if (path.expanded) {
path.expanded = false; // collapse
if (this.updateRoute === 'true') {
window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix === '#' ? '' : `${this.routePrefix}`}`);
this.replaceHistoryState('');
}
} else {
path.expanded = true; // Expand
if (this.updateRoute === 'true') {
const newHash = `${this.routePrefix || '#'}${path.elementId}`;
if (window.location.hash !== newHash) {
window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${newHash}`);
this.replaceHistoryState(path.elementId);
}
}
}
Expand Down Expand Up @@ -17773,7 +17773,7 @@ function headerTemplate() {
part="textbox textbox-spec-url"
placeholder="Spec URL"
value="${this.specUrl || ''}"
@change="${this.onSepcUrlChange}"
@change="${this.onSpecUrlChange}"
spellcheck="false"
>
<div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">&#x21a9;</div>
Expand All @@ -17784,7 +17784,7 @@ function headerTemplate() {
type="file"
style="display:none"
value="${this.specFile || ''}"
@change="${this.onSepcFileChange}"
@change="${this.onSpecFileChange}"
spellcheck="false"
>
<button class="m-btn primary only-large-screen" style="margin-left:10px;" part="btn btn-fill" @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>
Expand Down Expand Up @@ -18502,7 +18502,9 @@ class RapiDoc extends lit_element_s {
threshold: 0
};
this.showSummaryWhenCollapsed = true;
this.isIntersectionObserverActive = true;
// Will activate intersection observer only after spec load and hash analyze
// to scroll to the proper element without being reverted by observer behavior
this.isIntersectionObserverActive = false;
this.intersectionObserver = new IntersectionObserver(entries => {
this.onIntersect(entries);
}, intersectionObserverOptions);
Expand Down Expand Up @@ -19244,9 +19246,7 @@ class RapiDoc extends lit_element_s {
}
});
window.addEventListener('hashchange', () => {
const regEx = new RegExp(`^${this.routePrefix}`, 'i');
const elementId = window.location.hash.replace(regEx, '');
this.scrollToPath(elementId);
this.scrollToPath(this.getElementIDFromURL());
}, true);
}

Expand Down Expand Up @@ -19352,10 +19352,10 @@ class RapiDoc extends lit_element_s {
}
super.attributeChangedCallback(name, oldVal, newVal);
}
onSepcUrlChange() {
onSpecUrlChange() {
this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
}
onSepcFileChange(e) {
onSpecFileChange(e) {
this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);
const specFile = e.target.files[0];
const reader = new FileReader();
Expand Down Expand Up @@ -19440,7 +19440,6 @@ class RapiDoc extends lit_element_s {
}

async afterSpecParsedAndValidated(spec) {
var _window$location$hash;
this.resolvedSpec = spec;
this.selectedServer = undefined;
if (this.defaultApiServerUrl) {
Expand Down Expand Up @@ -19474,11 +19473,11 @@ class RapiDoc extends lit_element_s {
this.observeExpandedContent(); // This will auto-highlight the selected nav-item in read-mode
}

this.isIntersectionObserverActive = true;

// On first time Spec load, try to navigate to location hash if provided
const locationHash = (_window$location$hash = window.location.hash) === null || _window$location$hash === void 0 ? void 0 : _window$location$hash.substring(1);
if (locationHash) {
const regEx = new RegExp(`^${this.routePrefix}`, 'i');
const elementId = window.location.hash.replace(regEx, '');
const elementId = this.getElementIDFromURL();
if (elementId) {
if (this.renderStyle === 'view') {
this.expandAndGotoOperation(elementId, true, true);
} else {
Expand All @@ -19493,6 +19492,39 @@ class RapiDoc extends lit_element_s {
}
}
}

/**
* Return the URL from where is served the RapiDoc component, removing any hash and route prefix
*/
getComponentBaseURL() {
const {
href
} = window.location;

// Remove end of string # or /
const cleanRouterPrefix = this.routePrefix.replace(/(#|\/)$/, '');
if (!cleanRouterPrefix) {
return href.split('#')[0];
}
const indexOfRoutePrefix = href.lastIndexOf(cleanRouterPrefix);
if (indexOfRoutePrefix === -1) {
return href;
}
return href.slice(0, indexOfRoutePrefix);
}

/**
* From the URL return the ID of the element whether it is in the hash or if used a router prefix without a hash
*/
getElementIDFromURL() {
const baseURL = this.getComponentBaseURL();
const elementId = window.location.href.replace(baseURL + this.routePrefix, '');
return elementId;
}
replaceHistoryState(hashId) {
const baseURL = this.getComponentBaseURL();
window.history.replaceState(null, null, `${baseURL}${this.routePrefix || '#'}${hashId}`);
}
expandAndGotoOperation(elementId, scrollToElement = true) {
if (!this.resolvedSpec) {
return;
Expand Down Expand Up @@ -19530,7 +19562,7 @@ class RapiDoc extends lit_element_s {
block: 'start'
});
if (this.updateRoute === 'true') {
window.history.replaceState(null, null, `${this.routePrefix || '#'}${tmpElementId}`);
this.replaceHistoryState(tmpElementId);
}
}
}, isExpandingNeeded ? 150 : 0);
Expand Down Expand Up @@ -19568,7 +19600,7 @@ class RapiDoc extends lit_element_s {
// Add active class in the new element
if (newNavEl) {
if (this.updateRoute === 'true') {
window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix || '#'}${entry.target.id}`);
this.replaceHistoryState(entry.target.id);
}
newNavEl.scrollIntoView({
behavior: 'auto',
Expand All @@ -19577,8 +19609,10 @@ class RapiDoc extends lit_element_s {
newNavEl.classList.add('active');
newNavEl.part.add('section-navbar-active-item');
}

// Remove active class from previous element
if (oldNavEl) {
// if it is different from the new one (edge case on loading in read render style)
if (oldNavEl && oldNavEl !== newNavEl) {
oldNavEl.classList.remove('active');
oldNavEl.part.remove('section-navbar-active-item');
}
Expand Down Expand Up @@ -19624,7 +19658,7 @@ class RapiDoc extends lit_element_s {
if (this.renderStyle === 'focused') {
const requestEl = this.shadowRoot.querySelector('api-request');
if (requestEl) {
requestEl.beforerNavigationFocusedMode();
requestEl.beforeNavigationFocusedMode();
}
}
this.scrollToPath(navEl.dataset.contentId, true, scrollNavItemToView);
Expand Down Expand Up @@ -19670,7 +19704,7 @@ class RapiDoc extends lit_element_s {

// Update Location Hash
if (this.updateRoute === 'true') {
window.history.replaceState(null, null, `${this.routePrefix || '#'}${elementId}`);
this.replaceHistoryState(elementId);
}

// Update NavBar View and Styles
Expand Down Expand Up @@ -20093,7 +20127,7 @@ class RapiDocMini extends lit_element_s {
}
super.attributeChangedCallback(name, oldVal, newVal);
}
onSepcUrlChange() {
onSpecUrlChange() {
this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
}

Expand Down Expand Up @@ -20743,7 +20777,7 @@ class JsonSchemaViewer extends lit_element_s {
}
super.attributeChangedCallback(name, oldVal, newVal);
}
onSepcUrlChange() {
onSpecUrlChange() {
this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
}
onSearchChange(e) {
Expand Down Expand Up @@ -26628,7 +26662,7 @@ function getType(str) {
/******/
/******/ /* webpack/runtime/getFullHash */
/******/ (() => {
/******/ __webpack_require__.h = () => ("9cf1ea23f9721efb1ca2")
/******/ __webpack_require__.h = () => ("06e5cc36e5f0fee09200")
/******/ })();
/******/
/******/ /* webpack/runtime/global */
Expand Down
4 changes: 2 additions & 2 deletions dist/report.html
View file
Open in desktop

Large diffs are not rendered by default.

Loading