1997

pending completion

Build # 1997

Build Type

Pull #1553

travis-ci-com

Committed by

web-flow

Commit Message

<a href="https://github.com/Redocly/redoc/commit/<a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/4a4f95a1398d194ee2f851e8a8b022bf26027479">4a4f95a13">&lt;a href=&quot;https://github.com/Redocly/redoc/commit/</a><a class="double-link" href="https://github.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/4a4f95a1398d194ee2f851e8a8b022bf26027479">4a4f95a13</a><a href="https://github.com/Redocly/redoc/commit/4a4f95a1398d194ee2f851e8a8b022bf26027479">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/Redocly/redoc/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/4a4f95a1398d194ee2f851e8a8b022bf26027479&quot;&gt;4a4f95a13&lt;/a&gt;&lt;a href=&quot;https://github.com/Redocly/redoc/commit/4a4f95a1398d194ee2f851e8a8b022bf26027479&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot... (continued)

Pull Request Pull Request #1553: Fix issue with navigation when operationId contains backslash

Run Details

1610 of 2369 branches covered (67.96%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 2 files covered. (100.0%)

3246 of 4028 relevant lines covered (80.59%)

128.66 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

26.86

/src/services/MenuStore.ts

import { action, observable, makeObservable } from 'mobx';
import { escapeSelectorValue, querySelector } from '../utils/dom';
import { SpecStore } from './models';

import { history as historyInst, HistoryService } from './HistoryService';
import { ScrollService } from './ScrollService';

import { flattenByProp, SECURITY_SCHEMES_SECTION_PREFIX } from '../utils';
import { GROUP_DEPTH } from './MenuBuilder';

export type MenuItemGroupType = 'group' | 'tag' | 'section';
export type MenuItemType = MenuItemGroupType | 'operation';

/** Generic interface for MenuItems */
export interface IMenuItem {
  id: string;
  absoluteIdx?: number;
  name: string;
  description?: string;
  depth: number;
  active: boolean;
  expanded: boolean;
  items: IMenuItem[];
  parent?: IMenuItem;
  deprecated?: boolean;
  type: MenuItemType;

  deactivate(): void;
  activate(): void;

  collapse(): void;
  expand(): void;
}

export const SECTION_ATTR = 'data-section-id';

/**
 * Stores all side-menu related information
 */
export class MenuStore {
  /**
   * Statically try update scroll position
   * Used before hydrating from server-side rendered html to scroll page faster
   */
  static updateOnHistory(id: string = historyInst.currentId, scroll: ScrollService) {
    if (!id) {
      return;
    }
    scroll.scrollIntoViewBySelector(`[${SECTION_ATTR}="${id}"]`);
  }

  /**
   * active item absolute index (when flattened). -1 means nothing is selected
   */
  @observable
  activeItemIdx: number = -1;

  /**
   * whether sidebar with menu is opened or not
   */
  @observable
  sideBarOpened: boolean = false;

  items: IMenuItem[];
  flatItems: IMenuItem[];

  /**
   * cached flattened menu items to support absolute indexing
   */
  private _unsubscribe: () => void;
  private _hashUnsubscribe: () => void;

  /**
   *
   * @param spec [SpecStore](#SpecStore) which contains page content structure
   * @param scroll scroll service instance used by this menu
   */
  constructor(spec: SpecStore, public scroll: ScrollService, public history: HistoryService) {
    makeObservable(this);

    this.items = spec.contentItems;

    this.flatItems = flattenByProp(this.items || [], 'items');
    this.flatItems.forEach((item, idx) => (item.absoluteIdx = idx));

    this.subscribe();
  }

  subscribe() {
    this._unsubscribe = this.scroll.subscribe(this.updateOnScroll);
    this._hashUnsubscribe = this.history.subscribe(this.updateOnHistory);
  }

  @action
  toggleSidebar() {
    this.sideBarOpened = this.sideBarOpened ? false : true;
  }

  @action
  closeSidebar() {
    this.sideBarOpened = false;
  }

  /**
   * update active items on scroll
   * @param isScrolledDown whether last scroll was downside
   */
  updateOnScroll = (isScrolledDown: boolean): void => {
    const step = isScrolledDown ? 1 : -1;
    let itemIdx = this.activeItemIdx;
    while (true) {
      if (itemIdx === -1 && !isScrolledDown) {
        break;
      }

      if (itemIdx >= this.flatItems.length - 1 && isScrolledDown) {
        break;
      }

      if (isScrolledDown) {
        const el = this.getElementAtOrFirstChild(itemIdx + 1);
        if (this.scroll.isElementBellow(el)) {
          break;
        }
      } else {
        const el = this.getElementAt(itemIdx);
        if (this.scroll.isElementAbove(el)) {
          break;
        }
      }
      itemIdx += step;
    }

    this.activate(this.flatItems[itemIdx], true, true);
  };

  /**
   * update active items on hash change
   * @param id current hash
   */
  updateOnHistory = (id: string = this.history.currentId) => {
    if (!id) {
      return;
    }
    let item: IMenuItem | undefined;

    item = this.flatItems.find(i => i.id === id);
    if (item) {
      this.activateAndScroll(item, false);
    } else {
      if (id.startsWith(SECURITY_SCHEMES_SECTION_PREFIX)) {
        item = this.flatItems.find(i => SECURITY_SCHEMES_SECTION_PREFIX.startsWith(i.id));
        this.activate(item);
      }
      this.scroll.scrollIntoViewBySelector(`[${SECTION_ATTR}="${id}"]`);
    }
  };

  /**
   * get section/operation DOM Node related to the item or null if it doesn't exist
   * @param idx item absolute index
   */
  getElementAt(idx: number): Element | null {
    const item = this.flatItems[idx];
    return (item && querySelector(`[${SECTION_ATTR}="${escapeSelectorValue(item.id)}"]`)) || null;
  }

  /**
   * get section/operation DOM Node related to the item or if it is group item, returns first item of the group
   * @param idx item absolute index
   */
  getElementAtOrFirstChild(idx: number): Element | null {
    let item = this.flatItems[idx];
    if (item && item.type === 'group') {
      item = item.items[0];
    }
    return (item && querySelector(`[${SECTION_ATTR}="${escapeSelectorValue(item.id)}"]`)) || null;
  }

  /**
   * current active item
   */
  get activeItem(): IMenuItem {
    return this.flatItems[this.activeItemIdx] || undefined;
  }

  getItemById = (id: string) => {
    return this.flatItems.find(item => item.id === id);
  };

  /**
   * activate menu item
   * @param item item to activate
   * @param updateLocation [true] whether to update location
   * @param rewriteHistory [false] whether to rewrite browser history (do not create new entry)
   */
  @action
  activate(
    item: IMenuItem | undefined,
    updateLocation: boolean = true,
    rewriteHistory: boolean = false,
  ) {
    if ((this.activeItem && this.activeItem.id) === (item && item.id)) {
      return;
    }

    if (item && item.type === 'group') {
      return;
    }

    this.deactivate(this.activeItem);
    if (!item) {
      this.history.replace('', rewriteHistory);
      return;
    }

    // do not allow activating group items
    // TODO: control over options
    if (item.depth <= GROUP_DEPTH) {
      return;
    }

    this.activeItemIdx = item.absoluteIdx!;
    if (updateLocation) {
      this.history.replace(encodeURI(item.id), rewriteHistory);
    }

    item.activate();
    item.expand();
  }

  /**
   * makes item and all the parents not active
   * @param item item to deactivate
   */
  deactivate(item: IMenuItem | undefined) {
    if (item === undefined) {
      return;
    }
    item.deactivate();
    while (item !== undefined) {
      item.collapse();
      item = item.parent;
    }
  }

  /**
   * activate menu item and scroll to it
   * @see MenuStore.activate
   */
  @action.bound
  activateAndScroll(
    item: IMenuItem | undefined,
    updateLocation?: boolean,
    rewriteHistory?: boolean,
  ) {
    // item here can be a copy from search results so find corresponding item from menu
    const menuItem = (item && this.getItemById(item.id)) || item;
    this.activate(menuItem, updateLocation, rewriteHistory);
    this.scrollToActive();
    if (!menuItem || !menuItem.items.length) {
      this.closeSidebar();
    }
  }

  /**
   * scrolls to active section
   */
  scrollToActive(): void {
    this.scroll.scrollIntoView(this.getElementAt(this.activeItemIdx));
  }

  dispose() {
    this._unsubscribe();
    this._hashUnsubscribe();
  }
}

1	import { action, observable, makeObservable } from 'mobx';	7✔
2	import { escapeSelectorValue, querySelector } from '../utils/dom';	7✔
3	import { SpecStore } from './models';
4
5	import { history as historyInst, HistoryService } from './HistoryService';	7✔
6	import { ScrollService } from './ScrollService';
7
8	import { flattenByProp, SECURITY_SCHEMES_SECTION_PREFIX } from '../utils';	7✔
9	import { GROUP_DEPTH } from './MenuBuilder';	7✔
10
11	export type MenuItemGroupType = 'group' \| 'tag' \| 'section';
12	export type MenuItemType = MenuItemGroupType \| 'operation';
13
14	/** Generic interface for MenuItems */
15	export interface IMenuItem {
16	id: string;
17	absoluteIdx?: number;
18	name: string;
19	description?: string;
20	depth: number;
21	active: boolean;
22	expanded: boolean;
23	items: IMenuItem[];
24	parent?: IMenuItem;
25	deprecated?: boolean;
26	type: MenuItemType;
27
28	deactivate(): void;
29	activate(): void;
30
31	collapse(): void;
32	expand(): void;
33	}
34
35	export const SECTION_ATTR = 'data-section-id';	7✔
36
37	/**
38	* Stores all side-menu related information
39	*/
40	export class MenuStore {	7✔
41	/**
42	* Statically try update scroll position
43	* Used before hydrating from server-side rendered html to scroll page faster
44	*/
45	static updateOnHistory(id: string = historyInst.currentId, scroll: ScrollService) {	7!
46	if (!id) {	2!
47	return;	2✔
48	}
49	scroll.scrollIntoViewBySelector(`[${SECTION_ATTR}="${id}"]`);	×
50	}
51
52	/**
53	* active item absolute index (when flattened). -1 means nothing is selected
54	*/
55	@observable
56	activeItemIdx: number = -1;	7✔
57
58	/**
59	* whether sidebar with menu is opened or not
60	*/
61	@observable
62	sideBarOpened: boolean = false;	7✔
63
64	items: IMenuItem[];
65	flatItems: IMenuItem[];
66
67	/**
68	* cached flattened menu items to support absolute indexing
69	*/
70	private _unsubscribe: () => void;
71	private _hashUnsubscribe: () => void;
72
73	/**
74	*
75	* @param spec [SpecStore](#SpecStore) which contains page content structure
76	* @param scroll scroll service instance used by this menu
77	*/
78	constructor(spec: SpecStore, public scroll: ScrollService, public history: HistoryService) {	2✔
79	makeObservable(this);	2✔
80
81	this.items = spec.contentItems;	2✔
82
83	this.flatItems = flattenByProp(this.items \|\| [], 'items');	2!
84	this.flatItems.forEach((item, idx) => (item.absoluteIdx = idx));	68✔
85
86	this.subscribe();	2✔
87	}
88
89	subscribe() {	7✔
90	this._unsubscribe = this.scroll.subscribe(this.updateOnScroll);	2✔
91	this._hashUnsubscribe = this.history.subscribe(this.updateOnHistory);	2✔
92	}
93
94	@action
95	toggleSidebar() {	14✔
96	this.sideBarOpened = this.sideBarOpened ? false : true;	×
97	}
98
99	@action
100	closeSidebar() {	14✔
101	this.sideBarOpened = false;	×
102	}
103
104	/**
105	* update active items on scroll
106	* @param isScrolledDown whether last scroll was downside
107	*/
108	updateOnScroll = (isScrolledDown: boolean): void => {	2✔
109	const step = isScrolledDown ? 1 : -1;	×
110	let itemIdx = this.activeItemIdx;	×
111	while (true) {	×
112	if (itemIdx === -1 && !isScrolledDown) {	×
113	break;	×
114	}
115
116	if (itemIdx >= this.flatItems.length - 1 && isScrolledDown) {	×
117	break;	×
118	}
119
120	if (isScrolledDown) {	×
121	const el = this.getElementAtOrFirstChild(itemIdx + 1);	×
122	if (this.scroll.isElementBellow(el)) {	×
123	break;	×
124	}
125	} else {
126	const el = this.getElementAt(itemIdx);	×
127	if (this.scroll.isElementAbove(el)) {	×
128	break;	×
129	}
130	}
131	itemIdx += step;	×
132	}
133
134	this.activate(this.flatItems[itemIdx], true, true);	×
135	};
136
137	/**
138	* update active items on hash change
139	* @param id current hash
140	*/
141	updateOnHistory = (id: string = this.history.currentId) => {	2!
142	if (!id) {	1!
143	return;	1✔
144	}
145	let item: IMenuItem \| undefined;
146
147	item = this.flatItems.find(i => i.id === id);	×
148	if (item) {	×
149	this.activateAndScroll(item, false);	×
150	} else {
151	if (id.startsWith(SECURITY_SCHEMES_SECTION_PREFIX)) {	×
152	item = this.flatItems.find(i => SECURITY_SCHEMES_SECTION_PREFIX.startsWith(i.id));	×
153	this.activate(item);	×
154	}
155	this.scroll.scrollIntoViewBySelector(`[${SECTION_ATTR}="${id}"]`);	×
156	}
157	};
158
159	/**
160	* get section/operation DOM Node related to the item or null if it doesn't exist
161	* @param idx item absolute index
162	*/
163	getElementAt(idx: number): Element \| null {	7✔
164	const item = this.flatItems[idx];	5✔
165	return (item && querySelector(`[${SECTION_ATTR}="${escapeSelectorValue(item.id)}"]`)) \|\| null;	5✔
166	}
167
168	/**
169	* get section/operation DOM Node related to the item or if it is group item, returns first item of the group
170	* @param idx item absolute index
171	*/
172	getElementAtOrFirstChild(idx: number): Element \| null {	7✔
173	let item = this.flatItems[idx];	×
174	if (item && item.type === 'group') {	×
175	item = item.items[0];	×
176	}
177	return (item && querySelector(`[${SECTION_ATTR}="${escapeSelectorValue(item.id)}"]`)) \|\| null;	×
178	}
179
180	/**
181	* current active item
182	*/
183	get activeItem(): IMenuItem {	7✔
184	return this.flatItems[this.activeItemIdx] \|\| undefined;	×
185	}
186
187	getItemById = (id: string) => {	2✔
188	return this.flatItems.find(item => item.id === id);	×
189	};
190
191	/**
192	* activate menu item
193	* @param item item to activate
194	* @param updateLocation [true] whether to update location
195	* @param rewriteHistory [false] whether to rewrite browser history (do not create new entry)
196	*/
197	@action
198	activate(	14✔
199	item: IMenuItem \| undefined,
200	updateLocation: boolean = true,	×
201	rewriteHistory: boolean = false,	×
202	) {
203	if ((this.activeItem && this.activeItem.id) === (item && item.id)) {	×
204	return;	×
205	}
206
207	if (item && item.type === 'group') {	×
208	return;	×
209	}
210
211	this.deactivate(this.activeItem);	×
212	if (!item) {	×
213	this.history.replace('', rewriteHistory);	×
214	return;	×
215	}
216
217	// do not allow activating group items
218	// TODO: control over options
219	if (item.depth <= GROUP_DEPTH) {	×
220	return;	×
221	}
222
223	this.activeItemIdx = item.absoluteIdx!;	×
224	if (updateLocation) {	×
225	this.history.replace(encodeURI(item.id), rewriteHistory);	×
226	}
227
228	item.activate();	×
229	item.expand();	×
230	}
231
232	/**
233	* makes item and all the parents not active
234	* @param item item to deactivate
235	*/
236	deactivate(item: IMenuItem \| undefined) {	7✔
237	if (item === undefined) {	×
238	return;	×
239	}
240	item.deactivate();	×
241	while (item !== undefined) {	×
242	item.collapse();	×
243	item = item.parent;	×
244	}
245	}
246
247	/**
248	* activate menu item and scroll to it
249	* @see MenuStore.activate
250	*/
251	@action.bound
252	activateAndScroll(	14✔
253	item: IMenuItem \| undefined,
254	updateLocation?: boolean,
255	rewriteHistory?: boolean,
256	) {
257	// item here can be a copy from search results so find corresponding item from menu
258	const menuItem = (item && this.getItemById(item.id)) \|\| item;	×
259	this.activate(menuItem, updateLocation, rewriteHistory);	×
260	this.scrollToActive();	×
261	if (!menuItem \|\| !menuItem.items.length) {	×
262	this.closeSidebar();	×
263	}
264	}
265
266	/**
267	* scrolls to active section
268	*/
269	scrollToActive(): void {	7✔
270	this.scroll.scrollIntoView(this.getElementAt(this.activeItemIdx));	×
271	}
272
273	dispose() {	7✔
274	this._unsubscribe();	×
275	this._hashUnsubscribe();	×
276	}
277	}	7✔

Redocly / redoc / 1997

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous