Определение размера экрана

Driver.js — это библиотека для создания интерактивных пошаговых подсказок и туров по веб-интерфейсу. Одним из ключевых аспектов корректного отображения шагов является правильное определение размера экрана и области видимости элементов, на которые указывают подсказки. В Driver.js размер экрана влияет на позиционирование тултипов, подсветку элементов и адаптивность интерфейса.

Основные параметры, связанные с размером экрана

  1. window.innerWidth и window.innerHeight Эти свойства позволяют получить текущую ширину и высоту окна браузера в пикселях. Они учитывают только видимую область окна без полос прокрутки. Driver.js использует эти значения для расчета позиции тултипов относительно элементов интерфейса.

    console.log(window.innerWidth); // ширина окна
console.log(window.innerHeight); // высота окна

  2. document.documentElement.clientWidth и clientHeight Альтернативный способ получения размеров видимой области документа. В отличие от window.innerWidth, эти свойства могут учитывать различия в отображении полос прокрутки в разных браузерах.

    const width = document.documentElement.clientWidth;
const height = document.documentElement.clientHeight;

  3. window.scrollX и window.scrollY Положение прокрутки по горизонтали и вертикали необходимо для корректного вычисления позиции элемента относительно видимой области. Driver.js учитывает эти значения при расчете смещения тултипов, чтобы подсказки оставались на экране при скролле страницы.

    const scrollLeft = window.scrollX;
const scrollTop = window.scrollY;

Вычисление позиции элементов

Driver.js строит подсказку на основе координат элемента:

const element = document.querySelector('.target');
const rect = element.getBoundingClientRect();

const elementPosition = {
    top: rect.top + window.scrollY,
    left: rect.left + window.scrollX,
    width: rect.width,
    height: rect.height
};
  • rect.top и rect.left — координаты элемента относительно видимой области окна.
  • Добавление window.scrollY и window.scrollX переводит координаты в абсолютные значения страницы, что необходимо для позиционирования подсветки.

Адаптивное поведение на разных экранах

Driver.js поддерживает автоматическую адаптацию тултипов при изменении размеров окна. Для этого используется слушатель события resize:

window.addEventListener('resize', () => {
    driver.reset(); // пересчитывает позиции всех шагов
    driver.start(); // запускает тур заново с обновленными координатами
});

Это позволяет корректно отображать подсказки при смене ориентации устройства или изменении размера окна браузера.

Параметры конфигурации, влияющие на размеры

  • padding — расстояние между подсветкой и элементом. Влияет на видимую область подсказки.
  • stageBackground — задает фон вокруг элемента; если размер экрана меньше ожидаемого, фон автоматически масштабируется под доступное пространство.
  • top, left, right, bottom — настройки позиции тултипа относительно элемента; Driver.js проверяет доступное место и автоматически корректирует смещение, чтобы подсказка не выходила за границы экрана.

Работа с мобильными устройствами

На мобильных экранах важно учитывать динамическую высоту адресной строки браузера и возможные панели инструментов. Для корректного позиционирования используется комбинация:

const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

Driver.js адаптирует подсказки, чтобы они оставались видимыми при вращении экрана и появлении клавиатуры.

Проверка видимости элемента на экране

Перед отображением подсказки Driver.js вычисляет, помещается ли элемент целиком в видимой области:

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

Если элемент не полностью виден, библиотека автоматически скроллит страницу к элементу, используя плавную анимацию:

element.scrollIntoView({ beh * avior: 'smooth', block: 'center' });

Оптимизация отображения подсказок

Для больших экранов или масштабируемых интерфейсов Driver.js позволяет задавать максимальную ширину и высоту тултипа, чтобы не нарушать читаемость. Используются параметры:

  • maxWidth — максимальная ширина подсказки в пикселях.
  • maxHeight — максимальная высота подсказки.

Эти значения позволяют предотвратить выход подсказки за пределы экрана, особенно на устройствах с высокой плотностью пикселей или при масштабировании интерфейса.

Размер экрана в Driver.js напрямую влияет на позиционирование подсказок, видимость элементов и адаптивность интерфейса. Использование встроенных методов JavaScript для определения ширины, высоты и позиции прокрутки обеспечивает точное отображение интерактивного тура на любых устройствах.

Оглавление