📦 hrenpack_js

Версия: 3.0.0

Автор: Маг Ильяс DOMA (MagIlyasDOMA)

Лицензия: MIT

Универсальная frontend библиотека JavaScript/TypeScript для большинства задач. Подключается через тег <script> и не требует использования модулей ES6.

🔧 Установка

Через npm (для разработки)

npm install hrenpack_js

Через CDN (для использования в браузере)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/"></script>

Локальное подключение

<script src="путь/к/hrenpack_js.js"></script>

📚 Назначение

Библиотека предоставляет набор готовых решений для:

• Работы с DOM-элементами
• Управления cookie
• Обработки форм и вводов
• Создания кастомных HTML-элементов
• Уведомлений
• Работы с URL-параметрами
• Утилитарных функций для работы с массивами, строками и стилями

🎯 Основные возможности

1. Кастомные HTML-элементы

Автоматически регистрируются при подключении библиотеки:

<ab-num> — Аббревиатура чисел

<ab-num>1500000</ab-num> <!-- Отображает: 1.5 млн. -->

Атрибуты:

• lang — язык локализации (ru/en)
• use_comma — использовать запятую как разделитель

<click-to-copy> — Копирование по клику

<click-to-copy notified text="Скопировано">Текст для копирования</click-to-copy>

Атрибуты:

• notified — Показывать HTML-уведомление при копировании текста
• text - Текст уведомления (если атрибута нет, то выбирается текст по умолчанию). Уведомление есть только с атрибутом notified

<include-html> — Динамическая загрузка HTML

<include-html src="path/to/html.html"></include-html>

Атрибуты:

• src — Путь или URL к HTML-файлу

<step-bar> и <sb-element> — Степбар

<step-bar current="2">
    <sb-element>Шаг 1</sb-element>
    <sb-element>Шаг 2</sb-element>
    <sb-element label="Шаг 3"></sb-element>
</step-bar>

Атрибуты:

• <step-bar>
  • current — Конкретный шаг степбара
• <sb-element>
  • label — Label шага степбара

2. Классы

ClickableLinksFactory — Преобразует URL в тексте в кликабельные ссылки.

const factory = new ClickableLinksFactory();
factory.clickableLinks(document.body); // Ссылки открываются в новой вкладке
factory.clickToCopyLinks(document.body); // Ссылки копируются в буфер

GETParamsManager — Управление GET-параметрами URL.

const params = new GETParamsManager();
params.get('page', 1); // Получить параметр с дефолтным значением
params.set('sort', 'name'); // Установить параметр
params.delete('filter'); // Удалить параметр

HyperTextNotification — стилизованные уведомления

const notifier = new HyperTextNotification({
  timeout: 5,
  backgroundColor: '#121212'
});
notifier.show('Привет, мир!');

3. Функции для работы с DOM

Элементы и HTML

elementToHyperlink(divElement, '/page'); // Превращает элемент в ссылку
togglePassword(passwordInput); // Переключить видимость пароля
isTextWrapped(element); // Проверить, переносится ли текст

Формы и вводы

input_form_control(form); // Добавить класс .form-control всем элементам формы
getInputLabel(input); // Найти label для input
copyInputToClipboard(input); // Скопировать значение input

Стили

intToPixel(15); // → "15px"
intToPixel('2em'); // → "2em"

4. Работа с данными

Cookie

setCookie('theme', 'dark', 30); // Установить на 30 дней
getCookie('theme'); // Получить значение
hasCookie('theme'); // Проверить наличие

Массивы

arrayIsEmpty([]); // true
arraysIsEqual([1, 2], [1, 2]); // true

Строки

strFormat('Привет, {name}!', { name: 'Илья' }); // → "Привет, Илья!"
escapeHTML('<div>'); // → "&lt;div&gt;"

5. Системные функции

getSystemTheme(); // 'dark' или 'light'
copyTextToClipboard('Текст');
redirectBackOrClose(); // Назад или закрыть вкладку
getHost(); // Получить текущий хост

6. Утилиты

pushNotification('Заголовок', 'Текст уведомления');
loadCSS('/styles.css'); // Динамическая загрузка CSS
downloadTextAsFile('file.txt', 'Содержимое'); // Скачать текст как файл

📁 Структура файлов

hrenpack_js/
├── exceptions.ts      # Классы ошибок
├── tags.ts           # Кастомные элементы
├── classes.ts        # Основные классы
├── html.ts          # Функции для работы с HTML
├── input.ts         # Функции для работы с input
├── styles.ts        # Стили и CSS-утилиты
├── notifications.ts # Система уведомлений
├── system.ts        # Системные функции
├── cookie.ts        # Работа с cookie
├── arraywork.ts     # Работа с массивами
├── link.ts          # Динамическая загрузка ресурсов
├── compiler.ts      # Компиляция и скачивание
├── types.d.ts       # TypeScript типы
└── tsconfig.json    # Конфигурация TypeScript

🔧 Типы данных (TypeScript)

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

npm install @types/hrenpack_js

Библиотека включает следующие типы:

type NullStr = string | null;
type NullNum = number | null;
type Dict = { [key: string]: any };
type StringDict = { [key: string]: string };
type NumStr = number | string;

🚀 Быстрый старт

1. Подключите библиотеку:

<script src="hrenpack_js.js"></script>

2. Используйте функции глобально:

// Кастомные элементы уже доступны
document.body.innerHTML = '<ab-num>1000000</ab-num>';

// Классы доступны через глобальную область видимости
const params = new GETParamsManager();
console.log(params.get('id'));

// Функции доступны глобально
setCookie('session', 'abc123', 7);

⚠️ Совместимость

Браузеры: Современные версии Chrome, Firefox, Safari, Edge

TypeScript: Версия 5.9.3+

Поддержка ES: ES2020+

📄 Лицензия

MIT © Маг Ильяс DOMA

🔗 Ссылки

• Репозиторий на GitHub
• Отчеты об ошибках
• npm-пакет

🆘 Поддержка

При возникновении проблем:

1. Проверьте консоль браузера на наличие ошибок

2. Убедитесь, что библиотека загружена до её использования

3. Для кастомных элементов убедитесь, что DOM готов (DOMContentLoaded)

Библиотека не поддерживает импорты ES6 — используйте глобальные объекты или подключение через <script>.