newhelper-js 2.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+BSD 2-Clause License
+
+Copyright (c) 2026, MIOBOMB
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README-en.md

@@ -0,0 +1,17 @@
+# newHelper.js
+- [русская версия](README.md)
+- A library for creating ultra-lightweight yet highly functional admin panels, one of the best examples of Object Hub. The total bundle of the entire site is only 280 kb of pure code, and the internal admin panel with all HTML+CSS+JS weighs only 25 kilobytes (with gzip, the size is even smaller). I try to keep the library in a "Modular Monolith" state.
+Current version - 2.1, 13.6kb
+
+# Features
+- The library uses a classic connection with a script tag and requires no bundlers/compilers. But if you really want to, you can configure it, but why? It's the assembly language of the web world.
+- Dependencies? Nope, it's vanilla ES6.
+- The library size mentioned at the beginning is the size of the source code, so minification + gzip will reduce the size even further.
+- Due to the minimalistic code, you can freely override any built-in method to suit your needs. In extreme cases, you can resort to modifying the library's code, but we don't recommend this if you plan to update to the latest versions.
+- All the code is written inside a single "_" and uses only three global event listeners. Because of this, conflicts with other libraries are minimal. If you're willing, you can try running newHelper alongside jQuery, or if you really want reactivity, try it in combination with ultra-light reactive frameworks (the only decent one I know of is alpine.js).
+- If you're a follower of "14-kilobyte sites," you can safely run the library through a minifier. The minified code of the library shouldn't weigh more than 5 kilobytes, and if you discard modules you don't need, even less (for example, the window engine code makes up approximately 50% of the entire library code; if you don't need the window engine, you're left with a 2-kilobyte gzip core).
+- If you learn to use lazy loading properly, your already lightweight sites will become many times lighter (for instance, the initial traffic of Object Hub decreased from 330kb to 180kb at startup due to splitting everything into lazyload modules).
+- A couple of my sites not related to admin panels are based on this library - GDPS Helper (a catalog of private Geometry Dash servers, but it also has an admin panel for demon lists), Object Hub (a wiki-engine-like catalog and HR platform for the OSC community; the wiki engine heavily uses windows instead of MediaWiki crutches). If you want, you can not only assemble an admin panel in 2 hours but also write a mega-site in a couple of weeks.
+- The library was born 3 years ago as an internal tool for the GDPS Helper website. It evolved due to my disdain for the heaviness of React. Later, the GDPS Helper source code became the foundation for Object Hub, during the development of which the window engine, hotkeys, and more powerful lazy loading appeared.
+- As a developer, I try to follow the Unix philosophy. For example, simplicity over complexity - there are only 600 lines of code. Or modularity - even though my modules are slightly interconnected, each module is responsible for its own thing.
+- Continuing the previous point, you can use newHelper.js anywhere and everywhere. Its application is limited only by your imagination. Want to make a cool admin panel? The library is aimed at that. Want to write a full-fledged web forum? If you still remember GDPS Helper or Object Hub, it's entirely possible. Want to write your own frontend for the Yandex API? If you have a lot of time, please go ahead.

package/README.md

@@ -0,0 +1,17 @@
+# newHelper.js
+- [english version](README-en.md)
+- Библиотека для создания сверхлёгких но очень функциональных админ панелей, один из лучших примеров Object hub, Общий бандл всего сайта составляет всего 280 кб чистого кода, внутренная админ панель со всем html+css+js весит всего 25 килобайт (при gzip размер ещё ниже). Я стараюсь придерживать библиотеку в состоянии "Модульного монолита".
+Текущая версия - 2.1, 13.6кб
+
+Особенности
+- Библиотека использует классическое подключение с тегом script и не требует никаких сборщиков/компиляторов. Но если очень хочется вы можете настроить его, но зачем? это же ассемблер из мира веб
+- Зависимости? неа, это ванильный ES6
+- Указанный в начале размер библиотеки является размером исходного кода, так что минификация+gzip уменьшат размер ещё сильнее
+- Из-за минималистичности кода вы можете спокойно переопределить любой встроенный метод под свои нужны. В крайнем случае можно прибегнуть к модификации кода библиотеки, но такое мы не рекомендуем делать в случае если вы собираетесь обновляться до самых последних версий
+- Весь код написан внутри одного "_" и использованием всего трёх глобальных читателей событий. Из-за этого конфликты с остальными библиотеками минимальны, если вы готовы то можете пробовать запустить newHelper вместе с jQuery или если вы капец как хотите реактивность то пробуйте в связке с ультралёгкими реактивными фреймворками (у меня на слуху из адекватных alpine.js)
+- Если вы последователь "14 килобайтных сайтов" то можете смело прогнать библиотеку через минификатор, минифицированный код библиотеки не должен весить больше 5 килобайт, а если отбросить ненужные вам модули и то меньше (например код движка окон составляет приблизительно 50% всего кода библиотеки, если вам не нужен движок окон - оставляйте 2 килобайта gzip-ядра)
+- Если вы научитесь грамотно использовать ленивую загрузку, то ваши и без того лёгкие сайты станут в разы легче (тот же стартовый трафик Object Hub уменьшился 330кб до 180кб при старте из-за разбития всего на lazyload модули)
+- На базе этой библиотеки работает парочка моих сайтов не связанных с админ панелями - GDPS Helper (каталог приватных серверов geometry dash, но там тоже идёт админка для демонлистов), Object hub (каталог с элементами вики движка и hr-платформы для OSC сообщества, вики движок во всю использует окна вместо костылей mediawiki). Если захотеть можно не только админку за 2 часа собрать, но и написать мегасайт за пару недель
+- Библиотека родилась 3 года назад как внутренний инструмент веб сайта GDPS Helper, развивалась она из-за презрения к тяжеловесности react, позже исходный код GDPS Helper стал основоположником Object Hub, в процессе развития которого как раз таки и появились движок окон, горячих клавиш, и более мощная ленивая загрузка
+- Я как разработчик стараюсь следовать философии Unix систем, как пример простота превыше сложности - в коде всего 600 строк кода, или модульность, пусть у меня модули и чуть чуть связаны но каждый модуль отвечает за свою вещь
+- Продолжая прошлый пункт, вы можете использовать newHelper.js везде и всюду, его применение ограничено лишь вашей фантазией, хотите сделать классную админку? либа на это и целится. хотите написать полноценный веб форум? если вы ещё помните GDPS Helper или Object hub это вполне возможно. хотите написать свой фронтенд к Яндекс API? если у вас много времени пожалуйста

package/docs.md

@@ -0,0 +1,283 @@
+Базовая документация (если поможет)
+- Внимание! документация предоставлена к внутренней версии 2.0.9, возможны расхождения с версией 2.1, рекомендуем сверяться с исходным кодом
+
+# Роутер (_.link)
+Роутер здесь завязан на особенном от популярных решений поведении. Берётся query строка, разбивается по "&", и из полученного массива дальше с этой строкой роутер работает обособленно. Сначала идёт элемент 0 который отвечает за страницы и вложенность, последующие элементы являются командами, на них вы можете навешать открытие окон, модалки, или просто всякие дебаг штучки (например отключение проверки наличия капчи при логине или смену языка)
+## API:
+### Конфиг:
+- basePage() - fallback страница на случай если страницы не существует, рекомендую ставить клиентскую страницу "404"
+- defTitle - отображаемое названия вкладки при открытии страницы
+- actions - словарь функций с ссылками
+- commands - словарь функций команд
+### Базовые методы:
+- set(page, title) - устанавливает страницу
+- add(cmd) - добавляет команду в ссылку (если есть повторка добавления не будет)
+- remove(cmd) - удаляет команду из ссылки, если она есть
+### Внутренние методы/свойства:
+- get() - обработать ссылку и вызвать нужные страницы и команды (допустим открыть ту или иную страницу, и вызвать  модалки если их нет). Рекомендуется вызывать при старте приложения, автоматически срабатывает при событии popstate
+- _i - флаг запрещающий функции set() ставить новую страницу, по умолчанию true, но после каждого вызова set() становится false
+- _cmd - прослойка для сохранения команд между popstate событиями
+- compileLink() - возвращает скомпилированную ссылку в формате ["ключ=значение","ключ=значение"]. Не рекомендуется к использованию вообще
+### Пример конфигурации (Object Hub):
+```
+_.link.defTitle = 'Object Hub';
+_.link.basePage = ()=>{innerMain(pageMain())};
+_.lang.vars = {
+	'helperStrVer':helperStrVer,
+	'helperBuildNum':helperBuildNum,
+	'helperUrl':helperUrl
+};
+_.link.commands = {
+	en: ()=>        {_.lang.replace('EN',1)},
+	ru: ()=>        {_.lang.replace('RU',1)},
+	ua: ()=>        {_.lang.replace('UA',1)},
+	de: ()=>        {_.lang.replace('DE',1)},
+	dev: ()=>       {debugWindow()},
+	ignoreCap: ()=> {ignoreCap = true}
+};
+_.link.actions = {
+	'': ()=>                 {innerMain(pageMain())},
+	find: ()=>               {pageFind()},
+
+	camp: (campId)=>         {getCamp(campId)},
+	show: (showId)=>         {getShow(showId)},
+	pere: (pereId)=>         {getPere(pereId)},
+	news: ()=>               {globalNews()},
+	'news/': {
+		'': ()=>             {globalNews()},
+		comms: (postId)=>    {let d = postId.split('|');getNewsWithComments(d[0], d[1], d[2])},
+		list: (gdpsId)=>     {let d = gdpsId.split('|');helperNews(d[0], d[1])},
+	},
+	about: ()=>              {innerMain(helperAbout())},
+
+	profiles: (userId)=>     {otherProfile(userId,'pageFind(0)')},
+	'profiles/': {
+		'': (userId)=>       {otherProfile(userId,'pageFind(0)')},
+		camps: (userId)=>    {otherProfile(userId,'pageFind(0)',otherCampsWindow)},
+		shows: (userId)=>    {otherProfile(userId,'pageFind(1)',otherShowsWindow)},
+		peres: (userId)=>    {otherProfile(userId,'pageFind(2)',otherPeresWindow)},
+		wikis: (userId)=>    {otherProfile(userId,'pageFind(0)',otherWikisWindow)},
+	},
+};
+```
+
+# Ленивый загрузчик (_.lazy)
+Ленивый загрузчик скриптов позволяет подгружать ненужные прямо сейчас части кода потом (как пример, панель управления вики в object hub подгружается только когда пользователь открывает её). Также позволяет грузить любые newHelper.js-совместимые библиотеки, но об этом позже
+## API:
+### Базовые методы:
+- load(url, ...args) - функция немедленной загрузки скрипта, как пример подгрузка капчи на object hub работает напрямую через неё. Возвращает промис, резолв которого происходит сразу после загрузки скрипта
+- register(scr, funcs) - регистрация lazy функций в конфиге, где первым аргументом идёт ссылка на ленивый скрипт, а вторым массив функций-точек входа (названия функций должны идти как строки). При регистрации функций пишет в консоль какие функции были зарегистрированы. Вешайта функции-точки входа на window, иначе функцмя объявится не глобально и у вас будет ошибка!
+### Внутренние свойства/методы:
+- _(scr, fn) - надстройка для register() которая является прокси для загрузки.
+- loaded- объект с загруженными скриптами, каждая загруженная ссылка может быть промисом, что означает что она ещё загружается, или true
+### Пример конфигурации (и запуска сайта, Object Hub):
+```
+_.lazy.register('./static/devpanel.js',[
+	'debugWindow'
+]);
+_.lazy.register('./static/publicWiki.js',[
+	'pageGuides',
+	'getGuide',
+]);
+_.lazy.load('./static/ojhub.js')
+	.then(e=>{
+		reStart();
+	});
+```
+
+# Локализация (_.lang)
+Локализация в newHelper.js реализована довольно просто но мощно
+## API:
+### Конфиг:
+- addr - строка с адресом на папку где хранятся все языковые пакеты, обязательно перезаписывать в конфиге
+- vars - Объект подменяемых переменных, где в качестве ключа вы указываете нужную для подстановки переменную
+- main - Словарь с языковым пакетом
+### Базовые методы:
+- load(name) - скачивает языковой пакет
+- parse(packet) - подменяет переменные из vars на их значения в пакете. Учтите что ваши ключи из vars должны быть обёрнуты знаками плюса (+переменная+)
+- replace(name) - немедленно скачать языковой пакет и распарсив его перевести сайт
+- win(i) - получить значение ключа пакета для окон
+### Методы получения значений пакета:
+ВНИМАНИЕ! для краткости кода все методы ниже кроме from() самостоятельно формируют кусок html, принято такое решение было для краткости кода.
+- from(i) - получить голое значение ключа или сам ключ если его нет
+- text(i) - получить значение ключа пакета для обычных текстовых элементов
+- submit(i) - получить значение ключа пакета для <input type=submit>
+- input(i) - получить значение ключа пакета для обычного инпута
+- textarea(i) - получить значение ключа пакета для обычной textarea
+- img(i) - получить значение ключа пакета для картинки, где значением является адрес на картинку (будет полезно для создания меню языков, где языки будут флагами)
+### Пример конфига и использования:
+```
+_.lang.addr = `./languages/`;
+await _.lang.replace('RU'); // скачает `./languages/RU.json`
+console.log(_.lang.main) // Object {hi:'Привет мир!', langImage:'./static/ru.png'}
+
+console.log(`<h1${_.lang.text('hi')}/h1>`) // <h1 data-trans="hi">Привет мир!</h1>
+console.log(`<img${_.lang.img('langImage')}>`) // <img data-trans="langImage" src="./static/ru.png">
+
+await _.lang.replace('EN');
+
+console.log(`<h1${_.lang.text('hi')}/h1>`) // <h1 data-trans="hi">Hello world!</h1>
+console.log(`<img${_.lang.img('langImage')}>`) // <img data-trans="langImage" src="./static/en.png">
+```
+
+# Кастомные горячие клавишы (_.hotkeys)
+Горячие клавишы реализованы через систему "зажал отпустил", каждое действие вызывает колбек, но вы можете сделать и обычные хоткеи оставив дейсвтие "отпустил" пустым
+## API:
+### Конфиг:
+- keys - Объект ключей, в теории его можно перезаписывать и устанавливать значение из localStorage, но на практике пока никто так не делал
+- on(combo, press, release) - Зарегистрировать горячую клавишу на сочетание, принимает в качестве имени клавишы KeyboardEvent.code, комбинируется разделителем + ('ShiftLeft+KeyZ' для зажатия шифта и клавишы "я"), вторым аргументом идёт колбек на нажатие или зажатие, третьим аргументом идёт колбек на отжатие
+- off(combo) - Удалить все хоткеи повешанные на комбинацию
+Если вы хотите сделать хоткей который будет работать на простое нажатие, просто оставьте третий аргумент в on() пустым
+### Внутренние методы:
+- _parse - распарсить комбинацию в массив клавиш
+- _match - проверить зажаты ли нужные клавишы
+- _init - запустить движок путём навешивания чтения событий для keyDown и keyUp, плюсом идёт событие 'blur' которое отключает все запущенные хоткеи
+- _i - внутренная переменная для _init которая не даёт запустить движок дважды
+### Пример конфига (Object hub):
+```
+_.hotkeys.on('ShiftLeft + F1', debugWindow);
+_.hotkeys.on(
+	'ShiftLeft+KeyZ',
+	()=>keyBindsList(),
+	()=>_.$.qa('[keybindslist]').forEach(e=>_.win.close(e.id))
+);
+```
+
+
+# Движок окон (_.win)
+Вот она главная фишка библиотеки! Учтите что мы НЕ советуем вам переопределять встроенные методы, т.к. у движка окон ещё большой задел под оптимизацию кода или расширение функционала, никто же ведь не хочет словить краш на старте вашего сайта из-за появления возможности переименовывать окна?
+## API:
+### Конфиг:
+- manager - DOM элемент с открытыми окнами
+- hider - DOM элемент с открытыми окнами
+- winAttrs - Атрибуты открытых окон, рекомендуем указывать класс с анимацией окна и стилии
+- dragAttrs - Атрибуты элемента драга
+- titleAttrs - Атрибуты назнвания окна
+- renameAttrs - Атрибуты инпута при переименовании окна
+- btnAttrs - Атрибуты кнопок окон, рекомендую отключать задний фон, желательно через классы
+- defBtns - Кастомные кнопки, по умолчанию уже имеет кнопки скрытия, разворота на весь экран и закрытия
+- hiderAttrs - Атрибуты кнопок для раскрытия свёрнутых окон
+- animOpen - Название класса с анимацией открытия
+- animClose - Название класса с анимацией закрытия
+- animHide - Название класса с анимацией сворачивания окна
+- animShow - Название класса с анимацией разворачивания окна
+- animFullOn - Название класса с входом в режим полного окна
+- animFullOff - Название класса с выходом из режима полного окна
+### Базовые методы:
+- open(name, content, customAttrs) - Открыть окно
+- toggleFull(winId) - развернуть окно на весь экран, если уже развернуто вернуть в исходное состояние
+- setTitle(winId, newTitle) - Переименовать окно. Осторожно, при переименовании окна смена языка не сможет изменить название окна
+- close(winId) - закрыть окно
+- hide(winId) - скрыть окно и создать "хайдер"
+- show(winId) - развернуть окно и удалить "хайдер"
+### Внутренние методы на this:
+- _winBtn(winIdtext, func) - кнопка окна, в будущем функционал кнопок будет расширен для создания кастомных кнопок
+- _hiderBtn(text) - кнопка для разворота окна
+- _initWin() - запустить драггер окна
+- _ID() - сгенерировать уникальный айди окна
+Внешние свойства:
+- _.wins - коллекция открытых окон
+
+# Ошибки (_.err)
+Ошибки обрабатываются всегда и глобально несмотря ни на что, только если они были пойманы обработчиками. Рекомендую загружать другие библиотеки через ленивую загрузку (обычным load() прямо в конфиге()) чтобы потом модуль ошибок не упадал в саморекурсию из-за отсутствия в стеке разделителя "&helper:" 
+## API:
+### Базовые свойства/методы:
+- errors - объект со всеми ошибками случившимися за сессию
+- _c - счётчик ошибок
+- log(err, addr) - сохраняет ошибку и добавляет к счётчику единичку
+### Методы отлова (по умолчанию глобальные, имеют возможность находить точную строку ошибки):
+- handleGlobal(message, source, line, column, error) - словить обычную ошибку и сохранить её
+- handleRejection(e) - словить отклонение промиса если не было поймано
+### Конфиг:
+- print(errID, err, addr) - ваш кастомный обработчик ошибок. Мы вам очень рекомендуем для дев среды назначить вот такой обработчик:
+```js
+let windowBtns = [
+	['COPY ERROR',   `navigator.clipboard.writeText(_.$.id('errText{errID}').innerText)`],
+	['FULL RESTART', `location.reload()`],
+	// ваши прочие нужные методы, например перезапуск приложения без перезагрузки страницы, или сброс storage и перезапуск приложения
+];
+_.err.print = (errID, errText, addr = '')=>{
+	let buttonErr = (i, clck)=>`<button style=background-color:#333 onclick="${clck}">${i}</button> `,
+		buttons = '',
+		html = _.html`<div id=debug${errID}>
+				<p align=center>DEBUG INFO</p>
+				ERROR<br>
+					<pre style=width:100%;white-space:pre-line id=debugMega${errID}></pre>
+				<br><br>
+				<center id=windows${errID}>
+				</center>
+			</div>`;
+	console.log(html);
+	_.$.q('#debugMega'+errID, html).textContent = `LOCATION: ${location}\n`+errText+`\n`+
+	(addr === '' ? '' : `\n${addr}`);
+	
+	windowBtns.forEach(btn=>{
+		buttons += buttonErr(btn[0], btn[1].replaceAll('{errID}', errID));
+	});
+	_.$.q('#windows'+errID, html).innerHTML = buttons;
+
+	let winId = _.win.open('debug'+errID,
+		html
+	, `iserror style=width:300px;height:350px`);
+```
+
+# Прочие утилиты, которым не особо нужно описание:
+## http-клиент на базе xhr
+- defaultHeaders - Хедеры которые всегда будут назначаться при запросах, вы можете назначить туда токен пользователя
+- req(method, url, data, headers, fileProgressElement) - сделать запрос с различным методом, fileProgressElement требуется указывать лишь в случае если нужно отслеживать прогресс загрузки файла, не рекомендуется задавать свойства min и max
+## DOM утилиты:
+- _.$.q(i,p=document), алиас к document.querySelector(i,p), где p может быть любым DOM пространством
+- _.$.qa, алиас к document.querySelectorAll(i,p), где p может быть любым DOM пространством
+- _.$.id(i) - алиас к document.getElementById(i), у неё нет аргумента p так как он не работает в других пространствах имён
+- _.html - превратить шаблонную строку в DOM элемент(ы)
+- _.storage - обычная изолирующая обёртка над классом Storage, имеет почти идентичные методы, разве что прямое обращение и перезапись недоступны
+
+# Плагины?..
+Да! и ещё как! поскольку newHelper.js является обычным набором javascript инструментов, помещённых в объект "_" вы можете спокойно загрузить вообще любой скрипт через _.lazy, даже не просто загрузить а повешать на лень если они вам не нужны прямо сейчас!
+
+# Чеклист конфигов
+_.link
+- basePage() - fallback страница на случай если страницы не существует
+- defTitle - отображаемое названия вкладки при открытии страницы
+- actions - словарь функций с ссылками
+- commands - словарь функций команд
+
+_.lazy
+- load(url, ...args) - функция немедленной загрузки скрипта
+- register(scr, funcs) - регистрация lazy функций в конфиге
+
+_.lang
+- addr - строка с адресом на папку где хранятся все языковые пакеты
+- vars - Объект подменяемых переменных
+- main - Словарь с языковым пакетом
+
+_.hotkeys
+- keys - Объект ключей
+- on(combo, press, release) - Зарегистрировать горячую клавишу на сочетание
+- off(combo) - Удалить все хоткеи повешанные на комбинацию
+
+_.err
+- print(errID, err, addr) - ваш кастомный обработчик ошибок
+
+_.http
+- defaultHeaders
+
+_.storage
+сам себе конфиг
+
+_.win
+- manager - DOM элемент с открытыми окнами
+- hider - DOM элемент с открытыми окнами
+- winAttrs - Атрибуты открытых окон
+- dragAttrs - Атрибуты элемента драга
+- titleAttrs - Атрибуты назнвания окна
+- renameAttrs - Атрибуты инпута при переименовании окна
+- btnAttrs - Атрибуты кнопок окон
+- defBtns - Кастомные кнопки, по умолчанию уже имеет кнопки
+- hiderAttrs - Атрибуты кнопок для раскрытия свёрнутых окон
+- animOpen - Название класса с анимацией открытия
+- animClose - Название класса с анимацией закрытия
+- animHide - Название класса с анимацией сворачивания окна
+- animShow - Название класса с анимацией разворачивания окна
+- animFullOn - Название класса с входом в режим полного окна
+- animFullOff - Название класса с выходом из режима полного окна

package/history.md

@@ -0,0 +1,31 @@
+История newHelper.js
+# 1.7
+### 01:06:2024 как часть GDPS Helper
+Всё берётся с GDPS Helper 1.6. Само по себе обновление 1.6 дало мне базу работы с javascript чтобы я потом выпустил 1.7, которая уже реально использует наработки ставшие первой весией newHelper.js:
+- helperRequest (нынеший _.http)
+- примитивная интерационализация, с сохранением всех пакетов в глобальном объекте (нынешний _.lang)
+
+# 1.8
+### 24:08:2024 как часть GDPS Helper
+Эта версия привнесла обновленную систему локализации, она стала походить на нынешний _.lang из-за скачивания json с сервера
+
+# 1.9
+### 17:11:2024 как часть GDPS Helper
+- Появилася helperStorage, класс-обёртка над localStorage (нынешний _.storage, но тогда принимал только localStorage)
+- Добавлена функция loadScript, которая позже станет частью _.lazy.load
+
+# 2.0
+### 20:05:2025 как часть Object hub
+- Инкапсуляция всего в $ (ранее было 30+ глобальных переменных в коде)
+- Движок окон в почти полном его виде
+- глобальный error handler который указывает точную строку с ошибкой (иногда может работать не совсем правильно)
+- самописная и лёгкая система lazy load
+- Создание конфиг скрипта в котором можно изменять некоторые базовые значения newHelper.js без прямой перезаписи функций
+
+# 2.1
+### 23:02:2026 как самостоятельная библиотека
+- Перенос $ в _
+- Дополнение движка окон возможностью переименовать окно
+- Движок горячих клавиш
+- DOM хелперы (_.$, _.http)
+- Минимизация размера кода (2.0.1 29.4 кб => 2.1 13.6 кб)

package/newHelper.js

@@ -0,0 +1,603 @@
+_={};
+_.ver='2.1';
+_.link={
+	basePage:()=>{},
+	defTitle:'',
+	actions:{},
+	commands:{},
+	_cmd:[],
+
+	_i: true,
+	compile:()=>location.search.replace('?','').split('&'),
+	set(page,title=_.link.defTitle){
+		if (title) _.$.D.title=title;
+		if (!this._i){
+			let link=this.compile();
+			link[0]=page;
+			history.pushState(null,null,'?'+link.join('&'));
+		}
+		this._i=false;
+	},
+	add(cmd){
+		let link=this.compile();
+		if (!link.includes(cmd)){
+			link.push(cmd);
+			this._cmd.push(cmd);
+			history.replaceState(null,null,'?'+link.join('&'));
+		}
+	},
+	remove(cmd){
+		let link=this.compile();
+		if (link.includes(cmd)){
+			let c=this._cmd;
+			link.splice(link.indexOf(cmd),1);
+			c.splice(c.indexOf(cmd),1);
+			history.replaceState(null,null,'?'+link.join('&'));
+		}
+	},
+	get(){
+		let cfg=_.link,
+			links=this.compile(),
+			[fKey,fVal]=links[0].split('='),
+			cmds=links.slice(1);
+		try {
+			let dirs=fKey.split('/'),
+				dir=cfg.actions,
+				main=dir[fKey];
+			if (!fKey.includes('/')){
+				main(fVal);
+			} else {
+				for (let p of dirs){
+					let kDir=dir[p+'/'];
+					if (kDir)
+						dir=kDir;
+					else{
+						dir[p](fVal);
+						break;
+					}
+				}
+			}
+		}catch(e){
+			_.link.basePage();
+			throw e;
+		}
+		_.link._cmd=cmds;
+		cmds.forEach(kPre=>{
+			let [key,val]=kPre.split('=');
+			let cmd=cfg.commands[key];
+			if (cmd)
+				cmd(val);
+		});
+	},
+};
+_.lazy={
+	loaded:{},
+	load(url,...args){
+		let key=url.split('?')[0],
+			state=this.loaded,
+			c=state[key];
+
+		if (c=== true) return Promise.resolve(args);
+		if (c instanceof Promise) return c.then(()=>args);
+
+		let pr=new Promise((resolve,reject)=>{
+			let scr=_.$.D.createElement('script');
+			scr.src=url;
+			scr.onload=()=>{
+				state[key]=true;
+				resolve(args);
+			};
+			scr.onerror=()=>{
+				delete state[key];
+				reject(new Error('Failed to load '+url));
+			};
+			_.$.D.head.append(scr);
+		});
+		state[key]=pr;
+		return pr;
+	},
+	register(scr,funcs){
+		if (!Array.isArray(funcs)) return new Error('Array required for register');
+
+		for (let fn of funcs)
+			window[fn]=(...a)=>_.lazy._(scr,fn).then(f=>f(...a));
+
+		console.info('_.lazy> Applied lazy '+scr+' with this functions:',funcs);
+	},
+	async _(scr,fn){
+		let w=window,
+			wrpr=w[fn];
+		try{await _.lazy.load(scr)}
+		catch(e){throw e}
+		if (wrpr!== w[fn]) return w[fn];
+		throw new Error(`Function ${fn} not loaded from ${scr}`);
+	},
+};
+_.lang={
+	addr:'',
+	vars:{},
+	main:{},
+
+	_:(i)=>` data-trans="${i}"`,
+	load(name){
+		return new Promise((resolve,reject)=>{
+			_.http.req('GET',_.lang.addr+name+'.json',false,{'Cache-Control':'no-cache,no-store,max-age=0'})
+				.then(data=>resolve(data));
+		})
+	},
+	parse:(packet,vars=_.lang.vars)=>
+		packet.replace(/\+([^+]+)\+/g,(match,key)=>{
+			let v=vars[key];
+			return v!== undefined ? v : match;
+		}),
+	async replace(name){
+		const p=await this.load(name);
+		_.lang.main=JSON.parse(this.parse(p));
+		for (let e of _.$.qa('[data-trans]')){
+			let key=e.dataset.trans,
+				text=_.lang.main[key] || `<code>_.lang.get('${key}')</code>`,
+				tag=e.tagName;
+
+			if (tag=== 'IMG') e.src=text;
+			else if (['INPUT','TEXTAREA'].includes(tag))
+				e[e.type=== 'submit' ? 'value' :'placeholder']=text;
+			else e.innerHTML=text;
+		}
+		return p;
+	},
+	from:i=>_.lang.main[i] || console.warn(`_.lang> ${i} is undefined`) || i,
+
+	text:		i=>_.lang._(i)+`>${_.lang.from(i)}<`,
+	submit:		i=>_.lang._(i)+`value="${_.lang.from(i)}">`,
+	input:		i=>_.lang._(i)+`placeholder="${_.lang.from(i)}">`,
+	textarea:	i=>_.lang._(i)+`placeholder="${_.lang.from(i)}"><`,
+	img:		i=>_.lang._(i)+`src="${_.lang.from(i)}"`,
+	win(i){
+		let text=_.lang.from(i),
+			dT=_.lang._(i);
+		if (text== null || text== ''){
+			text=i;
+			dT='';
+		}
+		return `${dT}>${text}<`;
+	},
+};
+_.http={
+	defaultHeaders:{},
+	req(method,url,data='',headers={},fileProgressElement=false){
+		return new Promise((resolve,reject)=>{
+			let xhr=new XMLHttpRequest();
+
+			xhr.open(method,url);
+
+			let allHeaders={..._.http.defaultHeaders,...headers};
+			for (let header in allHeaders)
+				xhr.setRequestHeader(header,allHeaders[header]);
+
+			if (fileProgressElement)
+				xhr.upload.onprogress=(e)=>{
+					if (e.lengthComputable){
+						let percentage=(e.loaded / e.total);
+						fileProgressElement.setAttribute('value',percentage);
+					}
+				};
+
+			xhr.onreadystatechange=()=>{
+				if (xhr.readyState=== 4)
+					if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);
+					else reject(new Error(`${xhr.status} - ${xhr.statusText}`),xhr);
+			};
+			xhr.onerror=()=>reject(new Error('Network error'),xhr);
+
+			xhr.send(data);
+		});
+	},
+};
+_.$={
+	D: document,
+
+	id:(i)=>_.$.D.getElementById(i),
+	q:(i,p=_.$.D)=>p.querySelector(i),
+	qa:(i,p=_.$.D)=>p.querySelectorAll(i),
+
+	on:(el,ev,fn,opts)=>el.addEventListener(ev,fn,opts),
+	off:(el,ev,fn,opts)=>el.removeEventListener(ev,fn,opts),
+};
+_.html=(strs,...args)=>{
+	let strF=[];
+	for (let i=0; i < args.length; i++)
+		strF.push(strs[i],args[i]);
+	strF.push(strs[strs.length - 1]);
+	strF=strF.join('').trim().replace(/\s+/g,' ');
+
+	const template=_.$.D.createElement('template');
+	template.innerHTML=strF;
+
+	const content=template.content;
+	if (content.children.length=== 1)
+		return content.firstChild;
+	return content;
+};
+_.storage=class{
+	constructor(strg,name){
+		this._=strg;
+		this.n=name;
+	}
+	get=(key)=>this._.getItem(this.n+key);
+	set=(key,value)=>this._.setItem(this.n+key,value);
+	remove=(key)=>this._.removeItem(this.n+key);
+	clear=()=>Object.keys(this._)
+		.filter(k=>k.startsWith(this.n))
+		.forEach(k=>this._.removeItem(k));
+};
+_.err={
+	print:()=>{},
+
+	errors:{},
+	_c: 0,
+	log(err){
+		_.err.print(_.err._c,err);
+		_.err._c++;
+		_.err.errors[_.err._c]=err;
+	},
+	handleGlobal(message,source,line,column,error){
+		console.error(message,source+':'+line+':'+column,error)
+		_.err.log(message+`\n IN ${source} ON LINE ${line} IN COLUMN ${column}`);
+	},
+	handleRejection(e){
+		const err=e.reason || e;
+		console.error(err);
+		_.err.log(
+			`PROMISE ERROR\n`+
+			`${e.stack || e}`
+		);
+	},
+};
+_.hotkeys={
+	keys:{},
+	_holds:new Set(),
+	_:false,
+
+	_parse:combo=>combo.split('+').map(k=>k.trim()),
+	_match(keys) {
+		for (let k of keys) if (!this._holds.has(k)) return false;
+		return true;
+	},
+	_init() {
+		if (this._) return;
+		_.$.on(_.$.D,'keydown',e=>{
+			this._holds.add(e.code);
+
+			for (let combo in this.keys) {
+				let h=this.keys[combo];
+				if (!this._match(h.keys)) continue;
+
+				if (h.press && !h.active) {
+					h.active=true;
+					h.press(e);
+				}
+			}
+		});
+		_.$.on(_.$.D,'keyup',e=>{
+			this._holds.delete(e.code);
+
+			for (let combo in this.keys) {
+				let h=this.keys[combo];
+				if (h.active && !this._match(h.keys)) {
+					h.active=false;
+					h.release(e);
+				}
+			}
+		});
+		_.$.on(window,'blur',()=>{
+			for (let combo in this.keys) {
+				let h=this.keys[combo];
+				if (h.active) {
+					h.active=false;
+					h.release();
+				}
+			}
+			this._holds.clear();
+		});
+		this._=true;
+	},
+	on(combo,press,release) {
+		this._init();
+		let keys=this._parse(combo);
+
+		this.keys[combo]={
+			keys,
+			press: press || (()=>{}),
+			release: release || (()=>{}),
+			active: false
+		};
+
+		return this;
+	},
+	off(combo) {
+		delete this.keys[combo];
+		return this;
+	}
+};
+_.win={
+	manager:false,
+	hider:false,
+
+	winAttrs:'',
+	dragAttrs:'',
+	titleAttrs:'',
+	renameAttrs:'',
+	btnAttrs:'',
+	hiderAttrs:'',
+	
+	defBtns:[
+		['–',w=>_.win.hide(w)],
+		['=',w=>_.win.toggleFull(w)],
+		['X',w=>_.win.close(w)],
+	],
+
+	animOpen:'',
+	animClose:'',
+	animHide:'',
+	animShow:'',
+	animFullOn:'',
+	animFullOff:'',
+
+	_ID(){
+		let id;
+		do id=Math.random().toString(36).substring(2,8);
+		while (_.wins[id]);
+		return id;
+	},
+	_winBtn(win,text,func){
+		let b=_.html`<button ${_.win.btnAttrs}>${text}</button>`;
+		_.$.on(b,'click',()=>func(win));
+		return b;
+	},
+	_hiderBtn(win){
+		let title=win.langs!== false ? _.lang.win('WINDOW-'+win.langs) : `>${win.name}<`,
+			b=_.html`<button id=hider${win.id} ${_.win.hiderAttrs}${title}/button>`;
+		_.$.on(b,'click',()=>_.win.show(win));
+		return b;
+	},
+	_initWin(win){
+		let wEl=win.elem,
+			x1=0,y1=0,x2=0,y2=0,
+		startW=e=>{
+			let targ=e.target;
+			if (['BUTTON','INPUT'].includes(targ.tagName) || targ.closest('button,input')){
+				return;
+			}
+			_.win.manager.appendChild(wEl);
+
+			e.preventDefault();
+			x2=e.clientX || e.touches[0].clientX;
+			y2=e.clientY || e.touches[0].clientY;
+
+			_.$.D.onmouseup=_.$.D.ontouchend=stopW;
+
+			_.$.D.onmousemove=_.$.D.ontouchmove=moveW;
+		},
+		moveW=e=>{
+			e.preventDefault();
+			let cX=e.clientX || e.touches[0].clientX,
+				cY=e.clientY || e.touches[0].clientY;
+
+			x1=x2 - cX;
+			y1=y2 - cY;
+			x2=cX;
+			y2=cY;
+
+			wEl.style.top=(wEl.offsetTop - y1) + "px";
+			wEl.style.left=(wEl.offsetLeft - x1) + "px";
+		},
+		stopW=()=>{
+			['mouseup','touchend','mousemove','touchmove']
+			.forEach(e=>_.$.D['on'+e]=null)
+		},
+		drag=win.drag;
+		drag.onmousedown=drag.ontouchstart=startW;
+	},
+	open(name,content='',customAttrs=''){
+		if (!_.win.manager || !_.win.hider)
+			throw new Error('Window managers not inited');
+		let winId=_.win._ID();
+		_.wins[winId]={};
+		let s=_.wins[winId];
+		s.id=winId;
+		s.name=name;
+		s.langs=name;
+		s.state='opened';
+		s.full=false;
+		s.inRename=false;
+		s.onUnfull={top:0,left:0,width:0,height:0,};
+		
+		s.setTitle = newTitle=>_.win.setTitle(s,newTitle);
+		s.toggleFull = e=>_.win.toggleFull(s);
+		s.close = e=>_.win.close(s);
+		s.hide = e=>_.win.hide(s);
+		s.show = e=>_.win.show(s);
+
+		let html =
+			_.html`<div id=${winId} ${_.win.winAttrs} ${customAttrs}>
+				<div style="display:flex;justify-content:space-between;align-items:center"
+				${_.win.dragAttrs} id=DRAGGER${winId}>
+					<span ${_.win.titleAttrs} id=title${winId}${_.lang.win('WINDOW-'+name)}/span>
+					<div id=btns${winId}></div>
+				</div>
+				<div id=content${winId} style=overflow:auto;width:100%;height:100%>
+					${content.replace(/\{winId\}/g,winId)}
+				</div>
+			</div>`,
+			btns=_.$.q(`#btns${winId}`,html);
+		for(let b of _.win.defBtns) btns.append(_.win._winBtn(s,...b));
+
+		html.style.overflow='hidden';
+		html.style.resize='both';
+
+		let anim=_.win.animOpen;
+		if (anim)
+			_.$.on(html,'animationend',()=>html.classList.remove(anim),{ once: true })
+		_.win.manager.append(html);
+
+		let win=s.elem=_.$.id(winId),
+			c=_.$.id('content'+winId).getBoundingClientRect(), r=win.getBoundingClientRect(),
+			padX=r.width - c.width, padY=r.height - c.height;
+		s.drag=_.$.id('DRAGGER'+winId);
+		s.content=_.$.id('content'+winId);
+
+		if (!customAttrs.includes('top')) {
+			win.style.top=win.offsetTop - (win.offsetHeight / 2) + 'px';
+			win.style.left=win.offsetLeft - (win.offsetWidth / 2) + 'px';
+		}
+		if (!customAttrs.includes('width')) win.style.height=(win.offsetHeight - padX) + 'px';
+		if (!customAttrs.includes('height')) win.style.width=(win.offsetWidth - padY) + 'px';
+
+		_.$.on(s.drag,'dblclick',(e)=>{
+			if(e.target.closest('button')) return;
+			let wT=_.$.id('title'+winId);
+			if (!s.inRename){
+				wT.innerHTML=`<input ${_.win.renameAttrs} id=rename${winId} value="${wT.textContent}">`;
+				s.inRename=true;
+			}else{
+				_.win.setTitle(s,_.$.id('rename'+winId).value);
+				s.inRename=false;
+			}
+		});
+
+		_.win._initWin(s);
+
+		return s;
+	},
+	setTitle(win,newT){
+		win.langs=false;
+		win.name=newT;
+		let t=_.$.id('title'+win.id),
+			h=_.$.id('hider'+win.id);
+		t.innerHTML=newT;
+		t.removeAttribute('data-trans');
+		if (h){
+			h.innerHTML=newT;
+			h.removeAttribute('data-trans');
+		}
+	},
+	toggleFull(win){
+		let wEl=win.elem,
+			ws=wEl.style,
+			wc=wEl.classList,
+			cont=_.$.id('content'+win.id).getBoundingClientRect(),
+			rect=wEl.getBoundingClientRect(),
+			padX=rect.width - cont.width,
+			padY=rect.height - cont.height,
+			aOn=_.win.animFullOn,
+			aOff=_.win.animFullOff,
+			fd={
+				top: rect.top,	left: rect.left,
+				width: cont.width,	height: cont.height,
+			},
+			unful=()=>{
+				ws.top=old.top + 'px';
+				ws.left=old.left + 'px';
+				ws.width=old.width + 'px';
+				ws.height=old.height + 'px';
+			},
+			doFul=()=>{
+				if (aOn) wc.remove(aOn);
+				win.full=true;
+				win.onUnfull=fd;
+				ws.top=0;
+				ws.left=0;
+				ws.width=`calc(100% - ${padX}px)`;
+				ws.height=`calc(100% - ${padY}px)`;
+				win.drag.onmousedown=null;
+				win.drag.ontouchstart=null;
+			},
+			doUnful=()=>{
+				if (aOff) wc.remove(aOff);
+				unful();
+				win.full=false;
+				_.win._initWin(win);
+			},
+			old=win.onUnfull;
+		if (!win.full) {
+			if (aOn) {
+				wc.add(aOn);
+				_.$.on(wEl,'animationend',doFul,{ once: true });
+			}else doFul();
+		} else {
+			if (aOff) {
+				wc.add(aOff);
+				unful();
+				_.$.on(wEl,'animationend',doUnful,{ once: true });
+			}else doUnful();
+		}
+	},
+	close(win){
+		let w=win.elem,
+			remover=()=>{
+				let drag=win.drag;
+				drag.onmousedown=null;
+				drag.ontouchstart=null;
+				w.remove();
+				delete _.wins[win.id];
+			};
+		if (w.style.display== 'none'){
+			_.$.id('hider'+win.id).remove();
+			remover();
+		}else{
+			let anim=_.win.animClose;
+			if(anim){
+				w.classList.add(anim);
+				_.$.on(w,'animationend',remover,{ once: true });
+			}else
+				remover();
+		}
+	},
+	hide(win){
+		let wEl = win.elem,
+			wc=wEl.classList,
+			anim=_.win.animHide,
+			hider=()=>{
+				wEl.style.display='none';
+				if(anim)wc.remove(anim);
+				win.state='hidened';
+				_.win.hider.append(_.win._hiderBtn(win));
+			}
+		if(anim){
+			wc.add(anim);
+			_.$.on(wEl,'animationend',hider,{ once: true });
+		}else
+			hider();
+	},
+	show(win){
+		let wEl = win.elem,
+			wc=wEl.classList,
+			anim=_.win.animShow,
+			hider=_.$.id('hider'+win.id),
+			shower=()=>{
+				if(anim)wc.remove(anim);
+				win.state='opened';
+			}
+		wEl.style.display='';
+		hider.remove();
+		if(anim){
+			wc.add(anim);
+			_.$.on(wEl,'animationend',shower,{ once: true });
+		}else
+			shower()
+	},
+};
+_.wins={};
+
+_.$.on(window,'error',_.err.handleGlobal);
+_.$.on(window,'unhandledrejection',_.err.handleRejection);
+_.$.on(window,'popstate',()=>{
+	let l=_.link
+	if (!l._i) {
+		let nUrl='?' + [l.compile()[0],...l._cmd].join('&');
+		history.replaceState(null,null,nUrl);
+		l._i=true;
+		l.get();
+	} else
+		l._i=false;
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "newhelper-js",
+  "version": "2.1.0",
+  "description": "сверх лёгкая библиотека для построения админок",
+  "keywords": [
+    "admin",
+    "ui",
+    "jquery",
+    "modal",
+    "dialog",
+    "router",
+    "window-manager",
+    "i18n",
+    "internationalization",
+    "lazy-loading",
+    "hotkeys",
+    "lightweight",
+    "vanilla-js",
+    "frontend",
+    "zero-dependencies"
+  ],
+  "homepage": "https://github.com/MIOBOMB/newHelper-js#readme",
+  "bugs": {
+    "url": "https://github.com/MIOBOMB/newHelper-js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MIOBOMB/newHelper-js.git"
+  },
+  "license": "BSD-2-Clause",
+  "author": "MIOBOMB",
+  "type": "commonjs",
+  "main": "newHelper.js",
+  "files": [
+    "newHelper.js",
+    "README.md",
+    "README-en.md",
+    "docs.md",
+    "history.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "unpkg": "newHelper.js"
+}