Swap language
If you don't want to see the documentation here, you can add SHOW_HELP_TOOLS_DOCS = False to settings.py

HelpTools

Установка

Вариант 1: Django helptools.
Если вы используете Django, то вы можете использовать версию HelpTools для сервера:pip install helptoolsДобавьте его в установленные приложения в settings.py:
INSTALLED_APPS = [
    'django.contrib.admin'
    'django.contrib.auth'
    ...........
    'helptools'
]
 
Затем в urls.py:
urlpatterns = [
    path('admin/' admin.site.urls),
    path('hlptls/' include('helptools.urls'))
]
 
И наконец, в шаблоне:
!DOCTYPE html
{% load helpTags %} Загрузка тегов HelpTools
html lang
head
    meta charset
    meta name content
    titleDocument/title
    {% help_tools_load %} Загрузка самого helpTools.js, работает даже без настройки статических файлов
...........
Готово! Теперь вы можете использовать HelpTools!
Вариант 2: cdn/jsdelivrhttps://cdn.jsdelivr.net/gh/ElouLeol/helpTools@main/helpTools.min.js
Вариант 3: Прямое скачивание.
Вы можете скачать helpTools.js и подключить его через script.

Документация

helpTools.js состоит из двух частей:
VoiceRecorder
helpTools

VoiceRecorder

VoiceRecorder это часть helpTools.js и нужен он для записи голоса.Если у вас установленна версия helpTools для django,
то вы можете использовать тег {% recorder %}.
У него есть обязательный аргумент id - он в итоге станет JavaScript переменной.
Вы можете установить ему своё изображение через аргумент image,
А также установить js функцию которая будет выполнятся по окончанию записи через аргумент onstop.Вот вариант только с JavaScript:
let Rec = new VoiceRecorder; Создаём новый VoiceRecorder
Функция recordOnclick позволит начинать и заканчивать запись одной кнопкой.
Rec.recordOnclick('#identifier' function(blob) {
    Первый аргумент который принимает функция - кнопка которая будет активировать запись.
    Второй аргумент - функция которая будет выполнена по окончанию записи, 
    в неё передаётся результат в формате Blob
});

Также, можно запускать и останавливать запись вручную:
Начать запись:
Rec.startRec()
Завершить запись:
Rec.stopRec()
Сама запись после этого будет в Rec.recBlob
а также в Rec.recForm

helpTools

htmlEscape

Использование:helpTools.htmlEscape(String, Array)Эта функция нужна для экранирования html.
Первый аргумунт - строка, она будет экранирована
(“<” будет превращён в “&lt;”, “"” в “&quot;” и т.д.)Второй аргумент - список разрешённых символов,
например, если туда передать ['<i>', '</i>'],
то строка “<i><a href="/">Italic</a></i>”
будет превращена в <i>&lt;a href=&quot;/&quot;&gt;Italic&lt;/a&gt;</i>. Так это будет выглядеть: <a href="/">Italic</a>

htmlUnescape

Использование: helpTools.htmlUnescape('string')Эта функция противоположна htmlEscape,
“&lt;” будет превращён в “<”, “&quot;” в “"” и т.д.

prepChild

Использование:helpTools.prepChild('selector','html')Эта функция преобразует строку в html элемент и добавляет его в самое начало другого элемента (который был передан первым аргументом)По сути - это сокращение этой записи:
document.querySelector('selector').insertAdjacentHTML('html', 'afterBegin')

getCookie

Использование:helpTools.getCookie('CookieName')Эта функция просто возвращает содержимое Cookie файла.

syncGet

Использование: helpTools.syncGet('url')Эта функция делает синхронный GET запрос и возвращает полученный ответ.

anim

Использование:helpTools.anim('selector',onstop)Первый аргумент принимает селектор элемента, для которого вы хотите запустить анимацию, второй аргумент - функция, которая будет выполняться по завершению анимации.Однако, не обязательно передавать именно функцию, для некоторых действий есть ключевые слова:
По завершению этой анимации элемент будет удалён:
helpTools.anim('selector' 'delete').fade('in' 0.15);
Эквивалентно этой записи: 
helpTools.anim('selector' function() {
    document.querySelector('selector').remove();
}).fade('in' 0.15);
По завершению этой анимации элемент будет скрыт:
helpTools.anim('selector' 'hide').fade('in' 0.15);

fade

Использование:helpTools.anim('selector').fade('direction', duration)Первый аргумент - направление, если 'in', то элемент будет исчезать, если 'out', то появляться.Второй аргумент - длительность анимации, указывается в секундах, по умолчанию - 0.5.Пример работы:
Example Element

flip

Использование:helpTools.anim('selector').flip(duration)В функцию передаётся длительность анимации,
указывается в секундах, по умолчанию - 0.5.Пример работы:
Example Element

timer

Использование/создание:let timer = new helpTools.timer('selector')Если у вас установленна версия helpTools для django,
то вы можете использовать тег {% timer %}.
У него есть обязательный аргумент id - он в итоге станет JavaScript переменной.
Вы можете указать ему тег через аргумент tag (По умолчанию это span),
А также установить свои css классы через аргумент classes.
Если auto_run будет True, то секундомер будет автоматически запускаться при загрузке страницы.После создания, вы можете управлять секундомером:
Запуск:
timer.start()
Приостановка (Возобновить его можно через timer.start()):
timer.pause()
Сброс: 
timer.drop()

Методы "pause" и "drop" возвращают время которое насчитал секундомер в формате '{минуты}:{секунды}'

beta

helpTools.beta - это инструменты которые надо ещё доработать, как в техническом плане, так и в идеином.

changeStyle

changeStyle был создан для изменения существующих классов, но подходит и для добавления новых.Использование:helpTools.beta.changeStyle('selector', {object})Первый аргумент - css селектор, например "div", ".page", "#img, .img" и т.д.
Второй - объект, принимает данные в виде {'paddeing-left': '17px', 'opacity': '0.6'} и т.д.В итоге, это стилевое правило применяется.