SourceForge: https://sourceforge.net/projects/nativeui/

Демо-страница: https://nativeui.sourceforge.io/

Что нового:

• Реализована кроссбраузерная стилизация полей input[type=number] и input[type=range].
• Реализован polyfill для браузеров, не имеющих нативной поддержки полей input[type=number] и input[type=range]. В отличие от большинства реализаций, этот polyfill не использует дополнительные элементы и обёртки, а работает непосредственно с элементом input, задавая ему несколько фоновых SVG-изображений и меняя их позиционирование и размеры. Также он реализует свойства DOM-элементов, такие, как min, max, step и value. Поддерживает тёмную тему, RTL (режим работы справа-налево), масштабирование через font-size (используется em при указании размеров).
• Цвет и полупрозрачность placeholder у текстовых полей теперь одинаковые во всех браузерах.
• Убран светло-жёлтый фон автоматически заполненных полей в WebKit-based браузерах.
• Добавлена функция isCSSVarsSupported, которая проверяет наличие в браузере поддержки CSS-переменных.
• Добавлена функция triggerHandler.
• Добавлена функция escapeHTML.
• Функция addDragDropHandler теперь передаёт координаты курсора мыши или касания в callback-функции.
• Доработана функция request.
• Доработана функция isDOMReady: улучшена совместимость с IE.
• Доработана функция initMenubars: исправлена проблема с циклическим изменением ширины menubar при наличии у одного из родительских (closest) элементов полосы прокрутки, которая появляется при его переполнении по высоте.
• Доработана функция initTabs: теперь прокрутка вкладок (.tabs.scrollable) колёсиком мыши не срабатывает, если в этот момент зажата одна из клавиш-модификаторов (Ctrl, Alt или Shift).
• Улучшена реализация polyfill для placeholder у текстовых полей (переработана функция initPlaceholders).

SourceForge: https://sourceforge.net/projects/nativeui/

Демо-страница: https://nativeui.sourceforge.io/

Что нового:

• Для элемента .menubar реализован перенос не помещающихся пунктов в дополнительное подменю, раскрывающееся по крайней кнопке справа.
• Для элемента .menubar реализовано раскрытие подменю влево, если нет места для раскрытия вправо.
• Элемент .menubar теперь приобретает компактный вид (кнопка с тремя полосками) при ширине <= 768px и наличии класса .collapsing.
• Посещённые ссылки (a:visited) в меню и breadcrumbs теперь имеют тот же цвет, что и все остальные.
• Элемент breadcrumbs теперь использует обратную логику: по умолчанию находится в развёрнутом состоянии (а не только при наличии класса .expanded), а свёрнуто при наличии класса .collapsed. Это в свою очередь означает, что он теперь может работать без JS.
• Элемент breadcrumbs теперь имеет overflow: hidden только в процессе изменения его размеров.
• Элемент .tabs теперь имеет прокрутку вкладок колёсиком мыши при наличии класса .scrollable.
• Полностью переписана функция initTabs(). Обработчики click и wheel теперь устанавливаются только на контейнер .nav, а не на каждую вкладку. Теперь можно в реальном времени добавлять новые вкладки и их содержимое.
• .grid теперь не использует table, а может использовать любые элементы с классами .row и .col (см. пример на демо-странице). Так же ячейки теперь поддерживают классы .padded, shrinked, .align-left, .align-center, .align-right, .align-justify, .valign-top, .valign-middle, .valign-bottom.
• Исправлен border-radius для input[type=checkbox].
• Добавлена функция onDOMReady(callback), вызывающая callback после инициализации DOM, но до отрисовки страницы (если поддерживается браузером).
• Изменена логика работы функции init(). Теперь она вызывает себя через функцию onDOMReady(), если первым аргументом не передан HTMLElement.

SourceForge: https://sourceforge.net/projects/nativeui/ Демо-страница: https://nativeui.sourceforge.io/

Что нового:

• Добавлен элемент интерфейса «навигационная цепочка» (также известный как «хлебные крошки» или breadcrumbs). Поддерживает сворачивание и разворачивание для длинных путей.
• Мобильное меню теперь не использует position: fixed, что обеспечивает корректную работу внутри модальных окон.
• Изменена анимация в мобильном меню с перелистывания на плавное появление с увеличением. Теперь анимации используют translate, что обеспечивает аппаратное ускорение средствами GPU и предотвращает пересчёт (reflow) позиций и размеров элементов.
• В просмотрщике изображений (modalViewer()) теперь срабатывает перелистывание методом drag’n’drop, если изображение увеличено, но не выходит за пределы окна просмотра.
• modalViewer() теперь поддерживает опцию fullscreen, которая указывает на запуск просмотрщика в полноэкранном режиме. Её можно передать через объект вторым аргументом функции modalViewer(), либо указать в объекте app.modalViewerDefaults.
• Padding теперь задан не для .modal-window, а для .modal-content — корневого элемента, в котором находится содержимое модального окна.
• Функции modalClose() и modalViewer() теперь ожидают завершения анимаций, длительность которых задаётся в CSS. Ранее длительность анимаций была продублирована в CSS и JS, что требовалось учитывать при изменении CSS.
• Левый padding у select теперь такой же, как и у кнопок.
• Ссылки (<a>) на изображения, открываемые в просмотрщике, теперь поддерживают атрибут data-load-url, позволяющий указать альтернативную ссылку для загружаемого в просмотрщике изображения.
• Таблицы с сортировкой table.sortable теперь поддерживают строки, закреплённые сверху или снизу (tr.fixed-top и tr.fixed-bottom соответственно).
• SVG внутри CSS теперь заключен в двойные кавычки (url("data:image/svg+xml,…")) для кроссбраузерной совместимости. При использовании одинарных кавычек в некоторых старых браузерах SVG не отображается.
• Для псевдоэлементов :after с clear: both добавлен font-size: 0. Это гарантирует, что они будут иметь нулевую высоту.
• Функция getClosest() теперь останавливается на элементе, который не является instanceof HTMLElement (обычно на корневом элементе <html>), и не вызывает для него callback.
• Небольшие исправления и косметические улучшения в коде.

Не всегда у нас есть время или желание читать новые посты и сообщения, комментировать и отвечать на них. Особенно в последние годы, когда сильно увеличилось количество информации, проходящей через мозг среднестатистического пользователя мессенджеров и соцсетей. Иногда бывает очень целесообразно отложить это на потом, пометив посты или сообщения как непрочитанные. Но пока что чуть ли не единственное средство онлайн-коммуникации, которое позволяет это сделать — это e-mail. Ни один из известных мне мессенджеров, ни та же Akkoma (web-интерфейс для Fediverse), в которой я пишу этот пост, не имеет данной крайне важной функциональности. Выбрать чат в списке и нажать «Пометить как непрочитанное» — это не то. Это работает не так как в e-mail, а лишь помечает, что в чате есть непрочитанные сообщения, но не помечает, какие именно. Но в Akkoma нет и этого. В случае мессенджеров и соцсетей, таких, как Telegram и VK, дело, как я полагаю, в ограничениях архитектуры серверной части, из-за которых такую функциональность нельзя внедрить без последствий.

Уважаемый разработчик! Если ты читаешь этот пост и являешься разработчиком какого-либо средства коммуникации — пожалуйста, подумай заранее о том, как реализовать функционал пометки сообщений или постов как непрочитанных! Это не чья-то прихоть, это реальная необходимость в нашем информационно перегруженном мире! Не совершай ошибку, которую совершает большинство разработчиков!