diff --git a/packages/plugin/assets/js/HierarchyManager.ts b/packages/plugin/assets/js/HierarchyManager.ts index 42dc002..ca97e49 100644 --- a/packages/plugin/assets/js/HierarchyManager.ts +++ b/packages/plugin/assets/js/HierarchyManager.ts @@ -1,190 +1,171 @@ import { StateManager } from './StateManager'; export class HierarchyManager { - private readonly stateManager = new StateManager(); + private readonly stateManager = new StateManager(); - private readonly titleSelector = '.js-category-title'; + private readonly titleSelector = `.js-category-title`; - private readonly listSelector = '.js-category-list'; + private readonly listSelector = `.js-category-list`; - /** - * Инициализирует иерархию. - */ - public init(): void { - this.addListeners(); - this.initSaved(); - this.openCurrentPath(); - } + public init(): void { + this.addListeners(); + this.initSaved(); + this.openCurrentPath(); + } - private openPathAndSave(id: string): void { - this.openPath(id); + private openPathAndSave(id: string): void { + this.openPath(id); - this.stateManager.addOpenedPath(id); - } + this.stateManager.addOpenedPath(id); + } - private openPath(id: string): void { - const list = document.querySelector( - `${this.listSelector}[data-id="${id}"]`, - ); + private openPath(id: string): void { + const list = document.querySelector(`${this.listSelector}[data-id="${id}"]`); - if (!list) { - return; - } + if (!list) { + return; + } - list.classList.add('_open'); - list.parentNode?.querySelector(this.titleSelector)?.classList.add('_open'); - } + list.classList.add(`_open`); + list.parentNode?.querySelector(this.titleSelector)?.classList.add(`_open`); + } - private closePath(id: string): void { - const list = document.querySelector( - `${this.listSelector}[data-id="${id}"]`, - ); + private closePath(id: string): void { + const list = document.querySelector(`${this.listSelector}[data-id="${id}"]`); - if (!list) { - return; - } + if (!list) { + return; + } - list.classList.remove('_open'); - list.parentNode - ?.querySelector(this.titleSelector) - ?.classList.remove('_open'); + list.classList.remove(`_open`); + list.parentNode?.querySelector(this.titleSelector)?.classList.remove(`_open`); - this.stateManager.removeOpenedPath(id); - } + this.stateManager.removeOpenedPath(id); + } - private closePathWithChildren(id: string): void { - this.closePath(id); + private closePathWithChildren(id: string): void { + this.closePath(id); - const list = document.querySelector( - `${this.listSelector}[data-id="${id}"]`, - ); + const list = document.querySelector(`${this.listSelector}[data-id="${id}"]`); - if (!list) { - return; - } + if (!list) { + return; + } - const childLists = list.querySelectorAll(this.listSelector); + const childLists = list.querySelectorAll(this.listSelector); - for (const item of childLists) { - this.closePath(item.dataset.id || ''); - } - } + for (const item of childLists) { + this.closePath(item.dataset.id || ``); + } + } - private togglePath(id: string): void { - const list = document.querySelector( - `${this.listSelector}[data-id="${id}"]`, - ); + private togglePath(id: string): void { + const list = document.querySelector(`${this.listSelector}[data-id="${id}"]`); - if (!list) { - return; - } + if (!list) { + return; + } - if (list.classList.contains('_open')) { - this.closePathWithChildren(id); + if (list.classList.contains(`_open`)) { + this.closePathWithChildren(id); - return; - } + return; + } - this.openPathAndSave(id); - } + this.openPathAndSave(id); + } - private addListeners(): void { - const items = document.querySelectorAll( - '.js-category-title:not([data-id="root"])', - ); + private addListeners(): void { + const items = document.querySelectorAll(`.js-category-title:not([data-id="root"])`); - for (const item of items) { - item.addEventListener('click', () => { - const id = item.dataset.id || ''; + for (const item of items) { + item.addEventListener(`click`, () => { + const id = item.dataset.id || ``; - this.togglePath(id); - }); - } + this.togglePath(id); + }); + } - this.addExpandListener(); - this.addCollapseListener(); - this.addTargetListener(); - } + this.addExpandListener(); + this.addCollapseListener(); + this.addTargetListener(); + } - private addExpandListener(): void { - const expandButton = document.querySelector('.js-tree-expand'); + private addExpandListener(): void { + const expandButton = document.querySelector(`.js-tree-expand`); - expandButton?.addEventListener('click', () => { - const items = document.querySelectorAll(this.listSelector); + expandButton?.addEventListener(`click`, () => { + const items = document.querySelectorAll(this.listSelector); - for (const item of items) { - const id = item.dataset.id || ''; + for (const item of items) { + const id = item.dataset.id || ``; - this.openPathAndSave(id); - } - }); - } + this.openPathAndSave(id); + } + }); + } - private addCollapseListener(): void { - const collapseButton = document.querySelector('.js-tree-collapse'); + private addCollapseListener(): void { + const collapseButton = document.querySelector(`.js-tree-collapse`); - collapseButton?.addEventListener('click', () => { - const items = document.querySelectorAll(this.listSelector); + collapseButton?.addEventListener(`click`, () => { + const items = document.querySelectorAll(this.listSelector); - for (const item of items) { - const id = item.dataset.id || ''; + for (const item of items) { + const id = item.dataset.id || ``; - this.closePath(id); - } - }); - } + this.closePath(id); + } + }); + } - private addTargetListener(): void { - const targetButton = document.querySelector('.js-tree-target'); + private addTargetListener(): void { + const targetButton = document.querySelector(`.js-tree-target`); - targetButton?.addEventListener('click', () => { - const targetElement = this.openCurrentPath(); + targetButton?.addEventListener(`click`, () => { + const targetElement = this.openCurrentPath(); - targetElement?.scrollIntoView(); - }); - } + targetElement?.scrollIntoView(); + }); + } - private initSaved(): void { - const savedPaths = this.stateManager.getOpenedPaths(); + private initSaved(): void { + const savedPaths = this.stateManager.getOpenedPaths(); - for (const id of savedPaths) { - this.openPath(id); - } - } + for (const id of savedPaths) { + this.openPath(id); + } + } - private openCurrentPath(): Element | null { - const pathnameSplit = window.location.pathname.split('/'); - const pathname = `/${pathnameSplit[pathnameSplit.length - 2] || ''}/${ - pathnameSplit[pathnameSplit.length - 1] || '' - }`; + private openCurrentPath(): Element | null { + const pathnameSplit = window.location.pathname.split(`/`); + const pathname = `/${pathnameSplit[pathnameSplit.length - 2] || ``}/${ + pathnameSplit[pathnameSplit.length - 1] || `` + }`; - const activeElement = document.querySelector( - `.js-category-link[data-id="${pathname}"]`, - ); + const activeElement = document.querySelector(`.js-category-link[data-id="${pathname}"]`); - if (!activeElement) { - return null; - } + if (!activeElement) { + return null; + } - activeElement.classList.add('_active'); + activeElement.classList.add(`_active`); - let parent = activeElement.closest(this.listSelector); + let parent = activeElement.closest(this.listSelector); - // eslint-disable-next-line no-constant-condition,@typescript-eslint/no-unnecessary-condition - while (true) { - if (!parent) { - break; - } + // eslint-disable-next-line no-constant-condition,@typescript-eslint/no-unnecessary-condition + while (true) { + if (!parent) { + break; + } - const id = parent.dataset.id || ''; + const id = parent.dataset.id || ``; - this.openPath(id); + this.openPath(id); - parent = (parent.parentNode as HTMLElement).closest( - this.listSelector, - ); - } + parent = (parent.parentNode as HTMLElement).closest(this.listSelector); + } - return activeElement; - } + return activeElement; + } } diff --git a/packages/plugin/assets/js/StateManager.ts b/packages/plugin/assets/js/StateManager.ts index 29e1baa..21169ae 100644 --- a/packages/plugin/assets/js/StateManager.ts +++ b/packages/plugin/assets/js/StateManager.ts @@ -1,45 +1,38 @@ export class StateManager { - private readonly openedPathLsKey = 'opened-path-state'; + private readonly openedPathLsKey = `opened-path-state`; - private openedPaths: string[] = []; + private openedPaths: string[] = []; - public constructor() { - const lsOpenedPathState = localStorage.getItem('opened-path-state'); + public constructor() { + const lsOpenedPathState = localStorage.getItem(`opened-path-state`); - this.openedPaths = lsOpenedPathState - ? (JSON.parse(lsOpenedPathState) as string[]) - : []; - } + this.openedPaths = lsOpenedPathState ? (JSON.parse(lsOpenedPathState) as string[]) : []; + } - /** - * Добавляет path в стейт. - */ - public addOpenedPath(path: string): void { - this.openedPaths.push(path); - this.updateState(); - } + /** + * Добавляет path в стейт. + */ + public addOpenedPath(path: string): void { + this.openedPaths.push(path); + this.updateState(); + } - /** - * Удаляет path из стейта. - */ - public removeOpenedPath(path: string): void { - this.openedPaths = this.openedPaths.filter( - (savedPath) => savedPath !== path, - ); - this.updateState(); - } + /** + * Удаляет path из стейта. + */ + public removeOpenedPath(path: string): void { + this.openedPaths = this.openedPaths.filter(savedPath => savedPath !== path); + this.updateState(); + } - /** - * Получает все открытые paths. - */ - public getOpenedPaths(): string[] { - return this.openedPaths; - } + /** + * Получает все открытые paths. + */ + public getOpenedPaths(): string[] { + return this.openedPaths; + } - private updateState(): void { - localStorage.setItem( - this.openedPathLsKey, - JSON.stringify(this.openedPaths), - ); - } + private updateState(): void { + localStorage.setItem(this.openedPathLsKey, JSON.stringify(this.openedPaths)); + } } diff --git a/packages/plugin/assets/js/custom.ts b/packages/plugin/assets/js/custom.ts index 8af991a..0c4a430 100644 --- a/packages/plugin/assets/js/custom.ts +++ b/packages/plugin/assets/js/custom.ts @@ -1,6 +1,7 @@ -import '../css/custom.css'; import { HierarchyManager } from './HierarchyManager'; +import '../css/custom.css'; + const hierarchyManager = new HierarchyManager(); hierarchyManager.init(); diff --git a/packages/plugin/src/partials/navigation.tsx b/packages/plugin/src/partials/navigation.tsx index c2052d9..b1217f4 100644 --- a/packages/plugin/src/partials/navigation.tsx +++ b/packages/plugin/src/partials/navigation.tsx @@ -223,6 +223,7 @@ const addToCategory = (category: ICategory, item: DeclarationReflection, titleSp const categoryToAdd = category.categories[title]; + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (!categoryToAdd) { return; } diff --git a/packages/plugin/webpack.config.js b/packages/plugin/webpack.config.js index 3f13df8..d5081a7 100644 --- a/packages/plugin/webpack.config.js +++ b/packages/plugin/webpack.config.js @@ -1,9 +1,9 @@ -const path = require('node:path'); +const path = require(`node:path`); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { CleanWebpackPlugin } = require(`clean-webpack-plugin`); +const CssMinimizerPlugin = require(`css-minimizer-webpack-plugin`); +const TerserPlugin = require(`terser-webpack-plugin`); +const MiniCssExtractPlugin = require(`mini-css-extract-plugin`); /** * @typedef {import('webpack').Configuration} Configuration */ @@ -12,40 +12,40 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); * @type {Configuration} */ const config = { - mode: 'production', - entry: './assets/js/custom.ts', - output: { - filename: 'hierarchy.js', - path: path.resolve(process.cwd(), 'dist/assets'), - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: 'hierarchy.css', - }), - new CleanWebpackPlugin(), - ], - optimization: { - minimize: true, - minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], - }, - module: { - rules: [ - { - test: /\.tsx?$/, - use: { - loader: 'ts-loader', - }, - exclude: /node_modules/, - }, - { - test: /\.css$/i, - use: [MiniCssExtractPlugin.loader, 'css-loader'], - }, - ], - }, - resolve: { - extensions: ['.tsx', '.ts', '.js'], - }, + mode: `production`, + entry: `./assets/js/custom.ts`, + output: { + filename: `hierarchy.js`, + path: path.resolve(process.cwd(), `dist/assets`), + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: `hierarchy.css`, + }), + new CleanWebpackPlugin(), + ], + optimization: { + minimize: true, + minimizer: [new TerserPlugin(), new CssMinimizerPlugin()], + }, + module: { + rules: [ + { + test: /\.tsx?$/, + use: { + loader: `ts-loader`, + }, + exclude: /node_modules/, + }, + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, `css-loader`], + }, + ], + }, + resolve: { + extensions: [`.tsx`, `.ts`, `.js`], + }, }; /**