Использование слайдера для просмотра документов предпочтительнее, чем открывать каждый документ по отдельности, поскольку:
Удобство навигации: Можно быстро переключаться между документами без необходимости закрывать и открывать их отдельно.
Эффективность: Слайдер позволяет сравнивать и анализировать несколько документов одновременно, что полезно при изучении связанных материалов.
Повышение производительности: Можно быстро просмотреть содержание каждого документа и сосредоточиться на наиболее важных аспектах.
Улучшенный пользовательский опыт: Слайдер создает более плавный и удобный поток просмотра документов.
Для реализации слайдера воспользуемся библиотекой bxslider.
Необходимые ссылки:
Сайт библиотеки - https://bxslider.com/
Git - https://github.com/stevenwanderski/bxslider-4
Первое, что мы сделаем это добавим в контекст нашего приложения следующие поле:
Картинки тип - изображение (множественное), имя свойства - imgs.
Далее переходим в форму просмотра если ее нет создаем.
Выносим на форму виджеты код и кнопка и по желанию наши картинки.
Заполняем виджет код.
Код:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
</head>
<body>
<div class="slider">
</div>
<script src="<%= UI.widget.filePath %>/bxslider.min.js"></script>
<script>
function initSlider(json) {
var images = JSON.parse(json);
var slidesMarkup = createSliderSlides(images);
$('.slider').html(slidesMarkup);
setTimeout(function() {
$('.slider').bxSlider({
auto: false,
controls: true,
slideWidth: 500,
maxSlides: 1,
slideMargin: 0
});
}, 1000);
}
function createSliderSlides(images) {
var slides = '';
for (var i = 0; i < images.length; i++) {
slides += '<div><img src="' + images[i] + '" alt="Slide ' + (i + 1) + '"></div>';
}
return slides;
}
</script>
</body>
</html>
Переходим в кнопку и задаем там следующие настройки.
Закончив с кнопкой идем в сценарии и добавляем следующий код.
Код:
declare const console: any;
declare const window: any;
declare const initSlider: any;
async function go_img(): Promise<void> {
let imgs = Context.data.imgs; // Получаем изображения из контекста
let arr_base64: string[] = []; // Массив для хранения base64-кодированных изображений
if (imgs) {
for (let img of imgs) { // Перебираем полученные изображения
let url = await img.getDownloadUrl(); // Получаем URL для скачивания изображения
const res = await fetch(url); // Загружаем изображение по URL
let base64_img = arrayBufferToBase64(await res.arrayBuffer()); // Преобразуем полученные бинарные данные в base64-кодировку
arr_base64.push(base64_img); // Добавляем полученное base64-изображение в массив
}
ViewContext.data.bool = false;
initSlider(JSON.stringify(arr_base64)); // Инициализируем слайдер, передавая ему строку с сериализованным массивом base64-изображений
}
}
function arrayBufferToBase64(arrayBuf: any) {
// Преобразование бинарных данных в base64-кодировку
let binary = '';
let bytes = new Uint8Array(arrayBuf);
let len = bytes.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
let base64 = window.btoa(binary);
return("data:image/jpeg;base64," + base64); // Возвращаем строку с полным форматом base64-изображения (в данном случае, формат JPEG)
}
На этом с основной частью все, осталось проверить работоспособность.
