Пакетное скачивание изображений со страницы с помощью javascript через консоль.
Понятно, что это какое-то извращение, но пригодилось разок. Сохраню сюда.

// ссылки к картинкам находятся в атрибуте href ссылки
// чтоб при клике открывать в модальном окне
let links = document.querySelectorAll('.objects-list .item a');

for(i = 0; i < links.length; i ++){

    fetch(links[i].href)
        .then(response => response.blob())
        .then(blob => {
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = new Date().getTime();
            link.click();
        }
    )
}

@webtolkru

#разработка #javascript

Joomla Dialog (popup) script.
Документация по окну Joomla Dialog - javascript. Рылся по коду Joomla, наткнулся на примеры в комментариях, а оказалось, что и документация есть даже...
- генерация модального окна из javascript и автогенерация из data-атрибутов.
- 4 источника / типа содержимого модального окна:
- - iframe
- - inline содержимое
- - данные, полученные по ajax
- - картинка
... и много всего другого

А также переопределение стандартных alert() и confirm() в стилизованные.

https://manual.joomla.org/docs/general-concepts/javascript/js-library/joomla-dialog

#javascript #joomla #разработка

Показать фрагмент следующего слайда в Swiper.js
Мне нравится swiper.js - это скрипт карусели, лёгкий, удобный. Клиент попросил, чтобы в карусели выглядывал кусочек следующего слайда, так как "их посетители не догоняют, что тут надо листать". Я такое видел на сайтах, но никогда сам не делал. Профдеформация позволяет видеть элементы управления и пользоваться ими))) Ну тут надо было сделать.

Как оказалось - это очень легко, хотя совершенно не очевидно (в документации об этом не сказано вообще), поэтому напишу сюда.
В swiper.js есть параметр slidesPerView, который указывает количество слайдов для всей карусели или для конкретного диапазона разрешений экрана (можно использовать в объекте breakpoints). Оказалось, что это коэффициент и там можно использовать десятичные числа: 1.1, 1.25, 1.5 и т.д. (с точкой, а не запятой).

document.addEventListener('DOMContentLoaded', () => {
        const swiper = new Swiper('.subcategories-carousel', {
            speed: 400,
            spaceBetween: 0,
            breakpoints: {
                // when window width is >= 320px
                300: {
                    slidesPerView: 1.1,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                982: {
                    slidesPerView: 3.2,
                    spaceBetween: 0
                },
                // when window width is >= 982px
                1200: {
                    slidesPerView: 4,
                    spaceBetween: 0
                }
            }
        });
    });

Быстро и удобно.

- Документация swiper.js
- Swiper.js, оформленный в виде веб-ассета для Joomla 4 / Joomla 5 скачать бесплатно без регистрации и смс

@webtolkru

#разработка #joomla #development #javascript