Персональный сайт Дмитрия Журавлева

Написал свои собственные версии некоторых компонентов, которые присутствуют в бутстрапе. Мне Bootstrap кажется излишним, хотя многим он нравится.
Важное отличие моих компонентов: они работают в браузерах-динозаврах - Internet Explorer 11 и Opera 12.

Карусель

В бутстраповской карусели нужно вручную дублировать вот такие кнопки-индикаторы переключения:

<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="27" aria-label="Slide 28"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="28" aria-label="Slide 29"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="29" aria-label="Slide 30"></button>

По-моему, это противоречит здравому смыслу, ведь программирование как раз нужно, чтобы избавлять от рутины. У меня заполняется автоматически.

Клавишами вправо-влево можно листать карусель, если есть на ней фокус.

Свайпом вправо-влево можно листать на тачскринах, т.е. смартфонах. Использовал свой ранее написанный универсальный скрипт свайпа. Без подключения swipe.js свайп работать не будет, всё остальное будет.

Автолистание по таймерам не стал делать. Лично мне эта раздрающая возможность не нравится: заходишь на сайт, смотришь на картинку, а она перелистнулась, приходится обратно свайпить.

В карусели у какого-либо одного div с css-классом carousel_item должен быть css-класс active, иначе карусель не покажется. Активной не обязательно должна быть первая картинка.

Модальное окно

Компонент модального окна использует JS-объект modalActions, в котором находятся созданные вебмастером методы. После клика по какому-нибудь элементу из модального окна может запуститься один из этих методов. Для этого у элемента должен быть атрибут data-modal-name с именем соответствующего метода.

Запустить модальное окно

Кнопка "Запустить модальное окно" - это пример работы модального окна, сама кнопка не является частью компонента, она лишь показывает, как запустить окно. Вебмастер в JS-коде должен сам запустить модальное окно.

Кроме вручную добавленных кнопок выхода, закрыть модальное окно можно клавишей Esc.

В моём модальном окне также можно выходить из него с помощью кнопки "Назад" истории вкладки браузера, включая "хардварную" кнопку "Назад" внизу на Андроидном смартфоне. При желании, этот функционал можно легко убрать. Протестируйте, может быть, вам понравится. Минус - создаётся лишний элемент в истории "впереди". Он не мешает работе, не удаляет введённую в инпуты информацию. Браузерный History API не повзоляет удалять из истории нужный элемент, поэтому полный контроль невозможен.

Аккордеон

Тег с классом accordion_button можно было сделать тегом button (как в Bootstrap), но я был вынужден поменять его на div, т.к. в старой Opera 12 button c display: flex глючно отображал внутри себя flex-item-ы.

Текст в css-классе accordion_button_text может быть многострочным.

Классу accordion_button_text можно добавить свойства { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; }, тогда текст будет в одну строку всегда, но вылезает в Opera 12 (глюк), а в IE 11 всё нормально.

Уведомления в левом нижнем углу

Аналог компонента "Toast" из Bootstrap 5.
Уведомление создаётся с помощью функции createNotifcation(params), которая принимает один параметр - объект params. Его свойства:
title - (string) - заголовок сообщения
text - (string) - текст сообщения
closeAfterMs - (number) - количество мс, после которого уведомление закроется само
animation - (boolean) - нужна ли анимация (тряска) при появлении

Все свойства необязательны, хотя без свойств title и text лучше не вызывать, иначе появится undefined вместо текста.
Внимание: текст в заголовок и сообщение вставляется "как есть". Это необходимо, чтобы можно было ссылки, разметку добавлять в напоминания и т.п.
Однако, если текст приходит от пользователя, то настоятельно рекомендую фильтровать текст на наличие тегов, иначе можно будет вставить, например, тег <script> и украсть содержимое куки.

Примеры вызова функции:

createNotifcation({title: 'Ирина', text: 'У меня для вас есть сюрприз.', animation: true, closeAfterMs: 4500});

createNotifcation({title: 'Внимание!', text: 'Вы очень хороший человек. Так держать!'});

Создать случайное уведомление в углу экрана

Понажимайте на кнопку выше, там рандомально выбираются тексты и наличие анимации.

Если вы не разбираетесь в JS, можно обойтись без запуска функции createNotifcation, просто добавив в код сайта HTML в таком виде:

<div class="notification_item">
	<div class="notification_header">
	<button class="close">&#10005;</button>
	Сообщение от сайта
	</div>
	<div class="notification_body">
	Приветствуем вас. Не забудьте посетить раздел "Новинки".
	</div>
</div>

Но тогда сообщение будет выскакивать всякий раз при загрузке страницы.


Чтобы компоненты работали, нужны вот эти файлы:
script.js
swipe.js
components_like_bs.css