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
- htmlUnescape
- prepChild
- getCookie
- anim
  - fade
  - flip
- timer
- beta

### 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 файла.

## 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'} и т.д.В итоге, это стилевое правило применяется.