Bugy

Модуль, добавляющий дополнительную кнопку под основные.

Что это даёт, зависит от вашей фантазии. Например вы можете при клике данной кнопки отправить пользователя в личный диалог или же добавить отчёт в ваш продукт.

Установка

Что бы установить данный модуль, откройте папку с вашим проектом и напишите:

$ npm install bugy

Вызов

После установки надо добавить установленный модуль в код и вызвать его:

import { bug, openDialog, bugIconText } from 'bugy';
 
bug({
  onclick: () => openDialog({ id: 102343170 }),
  text: bugIconText({ text: "Bug" })
});

Поддерживаемые функции

• bug - создаёт дополнительную кнопку

Параметры:

onclick: any - вызывает переданную функцию

text: any - содержимое кнопки, может быть как элементом HTML, так и обычным текстом.

bug({
  onclick: () => bugCreateReport({ id: 76, title: '[Bugy] ' }),
  text: bugIconText({ text: "Bug" })
})

• openDialog - открывает диалог внутри VK

Параметры:

id: Number - id пользователя или группы

openDialog({ id: -1 }) // отрицательное значение обозначают группу

• bugCreateReport - перенаправит пользователя на страницу создания отчёта

Параметры:

id: Number - номер продукта в трекере

title: String - текст заголовка для отчёта

bugCreateReport({ id: 76, title: '[Bugy] Отчёт' })

• openLink - открывает любую ссылку

Параметры:

String - ссылка

openLink('https://vk.com/')

Основные элементы

• secondStyle - HTMLStyleElement, содержит в себе используемые стили. Созданный стиль добавляется в <head/>.
• secondButtonPlace - HTMLDivElement, создающий площадку под кнопку.
• secondButton - HTMLButtonElement, дополнительная кнопка.

Дополнительные элементы

• bugIcon - SVGSVGElement, иконка жука.

• bugIconPath - SVGPathElement, содержимое иконки жука.

• bugIconText - функция, возвращающая HTMLDivElement с иконкой слева и текстом справа.

Параметры:

icon: any

text: any

---

Если в bugIconText надо поменять иконку и текст местами, то можно в icon передать текст, а в text саму иконку.

Занятые стили

Стили ниже нужны для отображения дополнительной кнопки. Данные стили указываются в <style/> в <head/>.

.bugySecondButtonPlace{}; /* Задаёт область для дополнительной кнопки */
.bugySecondButton{}; /* Стиль дополнительной кнопки */
.bugyBugIconText{}; /* Стиль для элемента bugIconText */