Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-08 06:04:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

BDEVEXP-1723 - Jump scroll issue fix

Browse Source 
* Added utility function to generate a composite key out of selector to select dom contents accurately.
* Fixed getItemById by creating another function getItemByIdAndIndex so as to have more accurate selection.
This commit is contained in:
akumarsingh 2020-06-02 11:19:11 -04:00
parent e896c5c7b1
commit 5109876f99
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/services/MenuStore.ts
View File

@ -154,13 +154,28 @@ export class MenuStore {
} }
}; };
/**
* simple utility to build the correct selector query using parent's
* id to identify the right element in the case of repeating id's
* @param item item to inspect
*/
selectorStringBuilder(item: IMenuItem): string {
let selectorString = `[${SECTION_ATTR}="${item.id}"]`;
const parentItemId = item.parent?.id || null;
if (parentItemId) {
selectorString = `[${SECTION_ATTR}="${parentItemId}"] ~ ${selectorString}`;
}
return selectorString;
}
/** /**
* get section/operation DOM Node related to the item or null if it doesn't exist * get section/operation DOM Node related to the item or null if it doesn't exist
* @param idx item absolute index * @param idx item absolute index
*/ */
getElementAt(idx: number): Element | null { getElementAt(idx: number): Element | null {
const item = this.flatItems[idx]; const item = this.flatItems[idx];
return (item && querySelector(`[${SECTION_ATTR}="${item.id}"]`)) || null; const selectorString = this.selectorStringBuilder(item);
return (item && querySelector(selectorString)) || null;
} }
/** /**
@ -172,7 +187,8 @@ export class MenuStore {
if (item && item.type === 'group') { if (item && item.type === 'group') {
item = item.items[0]; item = item.items[0];
} }
return (item && querySelector(`[${SECTION_ATTR}="${item.id}"]`)) || null; const selectorString = this.selectorStringBuilder(item);
return (item && querySelector(selectorString)) || null;
} }
/** /**
@ -186,6 +202,10 @@ export class MenuStore {
return this.flatItems.find(item => item.id === id); return this.flatItems.find(item => item.id === id);
}; };
getItemByIndexAndId = (id: string, itemIndex: number) => {
return this.flatItems.find(item => item.id === id && item.absoluteIdx === itemIndex);
};
/** /**
* activate menu item * activate menu item
* @param item item to activate * @param item item to activate
@ -253,7 +273,8 @@ export class MenuStore {
rewriteHistory?: boolean, rewriteHistory?: boolean,
) { ) {
// item here can be a copy from search results so find corresponding item from menu // item here can be a copy from search results so find corresponding item from menu
const menuItem = (item && this.getItemById(item.id)) || item; // @ts-ignore
const menuItem = (item && this.getItemByIndexAndId(item.id, item.absoluteIdx)) || item;
this.activate(menuItem, updateLocation, rewriteHistory); this.activate(menuItem, updateLocation, rewriteHistory);
this.scrollToActive(); this.scrollToActive();
if (!menuItem || !menuItem.items.length) { if (!menuItem || !menuItem.items.length) {