1673

pending completion

Build # 1673

Build Type

Pull #1323

travis-ci

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/b682fb2f7f26c8d922453032b78b5c37ba6f1203">b682fb2f7">&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/b682fb2f7f26c8d922453032b78b5c37ba6f1203">b682fb2f7</a><a href="https://github.com/Redocly/redoc/commit/b682fb2f7f26c8d922453032b78b5c37ba6f1203">&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/b682fb2f7f26c8d922453032b78b5c37ba6f1203&quot;&gt;b682fb2f7&lt;/a&gt;&lt;a href=&quot;https://github.com/Redocly/redoc/commit/b682fb2f7f26c8d922453032b78b5c37ba6f1203&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/Redocly/redoc/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/Redocly/redoc/commit/&amp;amp;lt;a class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;htt... (continued)

Pull Request Pull Request #1323: Feature/sort navigation tags

Run Details

1542 of 2264 branches covered (68.11%)

Branch coverage included in aggregate %.

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

3148 of 3888 relevant lines covered (80.97%)

121.95 hits per line

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

25.67

/src/services/MenuStore.ts

import { action, observable } from 'mobx';
import { 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';

import {RedocNormalizedOptions} from "./RedocNormalizedOptions";

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

Redocly / redoc / 1673

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