Intersection Observer API

Itersection Observer API - это API браузера, позволяющий наблюдать за пересечениями элементов. Например, карточка оплаты на странице оплаты по мере прокрутки страницы пересекает верхнюю и/или нижнюю часть основного контента страницы. Данное API браузера позволяет отследить эти пересечения. В проекте для упрощения работы с ним используется пакет https://www.npmjs.com/package/@ng-web-apis/intersection-observer

Что требуется знать для работы с этой библиотекой

Использование IntersectionObserverAPI можно конфигурировать. Настраиваемые параметры:

• root - тот элемент, который будет отслеживаться браузером. Если не указан, по дефолту считается viewport’ом браузерного окна.
• rootMargin - смещение прямоугольника root-элемента. С помощью этого параметра можно сжать root-элемент. Дефолтное значение 0px 0px 0px 0px.
• thresholds - массив значений, при которых должны срабатывать callback-пересечения. Указывается в процентах (0.15 - 15%, .5 - 50%: означает, что при пересечении целевого элемента вверх или вниз от root-элемента при 15% или 50% будет срабатывать событие callback’а). Важно: событие происходит при примерном пересечении целевого элемента границ root-элемента.

При использовании провайдеров используются следующие токены

INTERSECTION_THRESHOLD

Использование:

{
    provide: INTERSECTION_THRESHOLD,
    useValue: 0.5 // => В качестве значения можно указать и массив чисел [0, 0.5, 1]
}

INTERSECTION_ROOT_MARGIN

Использование:

{
    provide: INTERSECTION_ROOT_MARGIN,
    useValue: '0px 0px 0px 0px' // значение указывается в любом стиле CSS (all), (horizontal, vertical), (top, left, bottom, right)
}

IntersectionObserverService

Данный сервис унаследован Observable<IntersectionObserverEntry[]> и является основной единицей использования при отслеживании пересечения элементов:

@Component({
selector: 'my-component',
providers: [
    SgmDestroyService,
    IntersectionObserverService,
    {
        provide: INTERSECTION_THRESHOLD,
        useValue: 0.5,
    },
    {
        provide: INTERSECTION_ROOT_MARGIN,
        useValue: '10px',
    },
],
})

export class MyComponent {
    constructor(
        private _destroy$: SgmDestroyService,
        @Inject(IntersectionObserverService)
        entries$: IntersectionObserverService
    ) {
        entries$.pipe(
            takeUntil(this._destroy$)
        ).subscribe(entries => {
            console.log(entries);
        });
    }
}

Важно: если элемент при создании содержит высоту, равную 0px - следует оформлять подписку на entries$ в ngAfterViewInit.

Объект IntersectionObserverEntry поставляется из entries$ и имеет следующие свойства:

• boundingClientRect - Возвращает прямоугольник границ таргет-элемента в виде. Границы вычисляются, как описано в документации для Element.getBoundingClientRect().

• intersectionRatio - Возвращает отношение intersectionRect к boundingClientRect.

• intersectionRect - Возвращает границы, представляющие видимую область таргет-элемента.

• isIntersecting - Булево значение, которое является истинным, если таргет элемент пересекается с root-элементом. Если это значение истинно, то запись IntersectionObserverEntry описывает переход в состояние пересечения; если оно ложно, то переход происходит от пересечения к непересечению.

• rootBounds - Возвращает границы для root - элемента.

• target - Таргет - элемент.

• time - Указывает время, в которое было зарегистрировано пересечение, относительно начала отсчета времени жизни IntersectionObserver.

Provider - это поставщик. То есть, его назначение и сфера применения - это поставка согласно заранее определенному контракту - настроек \ точек данных \ значений - для использования в определенном контексте. Где контекст - это последовательность \ область использования.

То есть Provider - это способ определить специфическое поведение в каком-то конкретном месте, без явного определения внутри каждого потребителя. Например, родительский компонент определяет для себя реализацию \ экземпляр провайдера, предоставляющий особое поведение или особый набор данных для этого компонента и его дочерних, отличный от поведения \ набора данных декларируемого для других модулей или приложения в целом.

Возвращаясь к примеру с сервисом доставки почты до почтового отделения, предположим, что ему нужно учитывать климатические зоны: обычная и крайней север.

Для этого нам понадобиться:

• Для всего приложения (основной зоны работы) опубликовать провайдер, возвращающий экземпляр сервиса, созданный со сроком хранения посылок - 3 дня
• Для компонента, работающего в зоне крайнего севера, опубликовать провайдер, возвращающий экземпляр сервиса, созданный со сроком хранения посылок - 90 дней

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

Постфикс d - это стандартное сокращение от definition, то есть - юнит определений. Он автоматически игнорируется при сборке js, используется только препроцессором и автоматическим публикуется при подключении сборки содержащей его.

Юниты содержащие только типы и контракты, должны именоваться с постфиксом .d.

• TypeScript Declaration File
• Сторонние библиотеки и файлы декларации
• TypeScript - Заголовочные файлы

Команда dd для записи файла ISO на USB-накопитель:

sudo dd if=ubuntu-20.04.1-live-server-amd64.iso of=/dev/sda bs=1M status=progress

Пример парсинга responsa’а в интерсепторе Angular:

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(this.setHeader(request)).pipe(
        map((response: HttpEvent<unknown>) => {
            if (request.url === '/api/v1/sdi/page' && response instanceof HttpResponse) {
                const body = JSON.parse(JSON.stringify(response.body));
                body.layout.blocks[0].components[2].columns[2].type = 'phone';
                body.layout.blocks[0].components[2].filter.static[3].type = 'phone';
                response = response.clone({ body });
                console.log('response >>>', response);
        }
        return response;
    }));
}