@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/epg/src/v2/sizes.1080.ts

@@ -0,0 +1,2 @@
+export const EMPTY_CELL_WIDTH = 23;
+export const ELLIPSIS_ONLY_CELL_WIDTH = 45;

package/packages/epg/src/v2/sizes.ts

@@ -0,0 +1,2 @@
+export const EMPTY_CELL_WIDTH = 15;
+export const ELLIPSIS_ONLY_CELL_WIDTH = 30;

package/packages/epg/src/v2/styles/Basic/Basic.scss

@@ -0,0 +1,116 @@
+.epg {
+    position: absolute;
+
+    .epg-day {
+        position: absolute;
+    }
+
+    .date-picker {
+        position: absolute;
+        z-index: 1;
+    }
+
+    .epg-now-line {
+        position: absolute;
+        z-index: 1;
+    }
+
+    .epg-timeline {
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+
+        .epg-timeline-section {
+            display: inline-block;
+            position: absolute;
+            text-align: center;
+
+            .epg-timeline-marker {
+                position: absolute;
+                bottom: 0;
+            }
+
+            .epg-timeline-time {
+                display: block;
+            }
+        }
+    }
+
+    .epg-headers {
+        position: absolute;
+
+        .epg-channel-header {
+            white-space: nowrap;
+
+            .number,
+            .icon {
+                display: inline-block;
+                vertical-align: middle;
+            }
+
+            .number {
+                text-align: right;
+            }
+
+            .icon {
+                background-position: center center;
+                background-size: contain;
+            }
+        }
+    }
+
+    .epg-rows {
+        position: absolute;
+
+        .epg-row {
+            position: absolute;
+            top: 0;
+            left: 0;
+            white-space: nowrap;
+            overflow: hidden;
+
+            &.display-none {
+                display: none;
+            }
+
+            .epg-cell {
+                position: absolute;
+                display: inline-block;
+                overflow: hidden;
+                outline: none;
+
+                &.display-none {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .mouse-navigation {
+        display: none;
+        position: absolute;
+        pointer-events: none;
+
+        .arrow-navigation {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+
+            .nav-arrow {
+                position: absolute;
+                pointer-events: all;
+
+                &.disabled {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        .mouse-navigation {
+            display: block;
+        }
+    }
+}

package/packages/epg/src/v2/styles/Basic/index.ts

@@ -0,0 +1 @@
+import './Basic.scss';

package/packages/epg/src/v2/styles/Whitelabel/index.ts

@@ -0,0 +1 @@
+// TBA

package/packages/epg/src/v2/utils.ts

@@ -0,0 +1,40 @@
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+import { offsetPosition } from '@24i/bigscreen-sdk/utils/offsetPosition';
+import { OutsideDatePickerProps, DataRange } from './interface';
+
+export const shouldRenderDatePicker = (
+    datePickerProps: OutsideDatePickerProps | undefined,
+): datePickerProps is OutsideDatePickerProps => (
+    typeof datePickerProps !== 'undefined'
+);
+
+export const getXOffsetStyleObject = (x: number) => {
+    const xWithDirection = isRtl() ? -x : x;
+    return offsetPosition.usesTransform()
+        ? { [offsetPosition.getTransformKey()]: `translate3d(${xWithDirection}px, 0, 0)` }
+        : { left: `${xWithDirection}px` };
+};
+
+export const getRowRangeMs = (timestamp: number, timelineWidthMs: number): DataRange => {
+    const start = timestamp - timelineWidthMs / 2;
+    const end = timestamp + timelineWidthMs / 2;
+    return [start, end];
+};
+
+export const isStartVisible = (startTime: number, [start, end]: DataRange) => (
+    startTime >= start && startTime < end
+);
+
+export const isEndVisible = (endTime: number, [start, end]: DataRange) => (
+    endTime > start && endTime <= end
+);
+
+export const isOverFullWidth = (
+    startTime: number, endTime: number, [start, end]: DataRange,
+) => startTime <= start && endTime >= end;
+
+export const clamp = (value: number, min: number, max: number) => {
+    if (value < min) return min;
+    if (value > max) return max;
+    return value;
+};

package/packages/events-manager/src/EventsManager.ts

@@ -0,0 +1,56 @@
+import { forEach, map } from '@24i/bigscreen-sdk/perf-utils/array';
+
+type PayloadOf<T> = T extends (payload: infer Payload) => any ? Payload : never;
+
+export type EventMapType = { [key: string]: (payload: any) => void };
+
+export interface IEvents<EventMap extends EventMapType> {
+    addEventListener: <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ) => void,
+    removeEventListener: <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ) => void,
+    triggerEvent: <K extends keyof EventMap>(
+        eventName: K,
+        payload: PayloadOf<EventMap[K]>,
+    ) => void,
+}
+
+export class EventsManager<EventMap extends EventMapType> implements IEvents<EventMap> {
+    eventListeners: Partial<{
+        [key in keyof EventMap]: EventMap[key][]
+    }> = {};
+
+    addEventListener = <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ): void => {
+        if (!this.eventListeners[eventName]) this.eventListeners[eventName] = [];
+        const listeners = this.eventListeners[eventName] as EventMap[K][];
+        listeners.push(listener);
+    };
+
+    removeEventListener = <K extends keyof EventMap>(
+        eventName: K,
+        listener: EventMap[K],
+    ): void => {
+        const listeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
+        if (!listeners) return;
+        const index = listeners.indexOf(listener);
+        if (index !== -1) listeners.splice(index, 1);
+    };
+
+    triggerEvent = <K extends keyof EventMap>(
+        eventName: K,
+        payload?: PayloadOf<EventMap[K]>,
+    ): void => {
+        const eventListeners = this.eventListeners[eventName] as EventMap[K][] | undefined;
+        if (!eventListeners) return;
+        // In case listener removes itself during listening we need loop on a copy
+        const listeners = map(eventListeners, (l) => l);
+        forEach(listeners, (listener) => listener(payload));
+    };
+}

package/packages/events-manager/src/index.ts

@@ -0,0 +1,2 @@
+export { EventsManager } from './EventsManager';
+export type { EventMapType, IEvents } from './EventsManager';

package/packages/floating-focus/README.md

@@ -0,0 +1,64 @@
+---
+id: README
+title: Floating Focus
+hide_title: true
+sidebar_label: Floating Focus
+---
+
+# Floating Focus
+Floating focus is a package that creates the visual for focus type that flows from one component to the other.
+
+If you use floating focus you usually do not style `:focus`.
+
+## Usage
+Floating focus has 5 exports. The main one is single instance `floatingFocus` used to control it.
+Then two extended components `Vertical` and `Horizontal` from `@24i/bigscreen-sdk/focus`.
+And two setters `css2Setter` and `css3Setter`
+- `floatingFocus` - single instance controller
+- `Horizontal` - extended component
+- `Vertical` - extended component
+- `css2Setter` - use top, left, width, height
+- `css3Setter` - use transform, width, height
+
+`floatingFocus` needs to be configured before it is used with these options:
+- `createDefaultElemenet` - boolean, if true then creates the div and appends it to the body
+- `element` - HTMLElement to be used as a floating focus
+- `positionDimensionGetter` - getter for position and dimensions
+- `positionDimensionSetter` - setter for position and dimensions
+
+All options are optional. The only rule is that you must either set createDefaultElement to true or pass an element.
+If both are provided then element is used.
+
+```js
+import { floatingFocus, css2Setter } from '@24i/bigscreen-sdk/floating-focus'
+
+floatingFocus.config({
+    createDefaultElement: true,
+    positionDimensionSetter: css2Setter,
+});
+```
+
+During the runtime you can change getter and setter with their setters:
+- `setPositionAndDimensionGetter`
+- `setPositionAndDimensionSetter`
+
+The rule of thumb is to set those when you get control in a component that handles some focus (screen, list, grid, etc.)
+
+Use method `setFocus(HTMLElement, optional PositionAndDimensions)` to set floating focus. Beware that it only sets the floating focus. It does not call focus on the element itself.
+
+If no or incomplete position and dimensions are passed then getter is used.
+
+If dimensions (width, height) are missing from getter data then it will attempt to extract them from dataset (data-width and data-height) of focused element.
+
+If no getter is set or after all attempts the data is still incomplete then getBoundingClientRect is used.
+
+### positionDimensionGetter
+Method to get position and dimensions of an element. The only param is an HTMLElement that should be measured.
+It should return object `{ width, height, top, left }`.
+If the object is incomplete then other attempts to get those data will be used (see above).
+
+### positionDimensionSetter
+Method to set styles of floating focus. In most cases you will want to use provided `css2Setter` or `css3Setter`.
+Setter receives two params:
+- `floatingFocusElement` - HTMLElement of floating focus
+- `positionAndDimensions` - complete position and dimensions data (top, left, width, height)

package/packages/floating-focus/src/FloatingFocus.ts

@@ -0,0 +1,106 @@
+import { createDefaultElement } from './utils';
+import {
+    PositionAndDimensions,
+    PositionAndDimensionsGetter,
+    PositionAndDimensionsSetter,
+    Config,
+} from './types';
+
+const hasElement = (element?: HTMLElement): element is HTMLElement => !!element;
+
+const isValidPosition = (
+    positionAndDimensions?: Partial<PositionAndDimensions>,
+): positionAndDimensions is PositionAndDimensions => {
+    if (!positionAndDimensions) return false;
+    const { width, height, top, left } = positionAndDimensions;
+    return (
+        typeof width === 'number'
+        && typeof height === 'number'
+        && typeof top === 'number'
+        && typeof left === 'number'
+    );
+};
+
+class FloatingFocus {
+    isConfigured = false;
+
+    element!: HTMLElement;
+
+    getter?: PositionAndDimensionsGetter;
+
+    setter?: PositionAndDimensionsSetter;
+
+    config(config: Config) {
+        if (!config.createDefaultElement && !config.element) {
+            throw new Error('Either pass element or set createDefaultElement to true');
+        }
+        if (hasElement(config.element)) {
+            this.element = config.element;
+        } else {
+            this.element = createDefaultElement();
+        }
+        if (config.positionDimensionGetter) this.getter = config.positionDimensionGetter;
+        if (config.positionDimensionSetter) this.setter = config.positionDimensionSetter;
+        this.isConfigured = true;
+    }
+
+    setPositionAndDimensionGetter(getter: PositionAndDimensionsGetter) {
+        this.getter = getter;
+    }
+
+    setPositionAndDimensionSetter(setter: PositionAndDimensionsSetter) {
+        this.setter = setter;
+    }
+
+    setFocus(
+        toElement: HTMLElement = (document.activeElement as HTMLElement),
+        givenPosition?: Partial<PositionAndDimensions>,
+    ) {
+        if (!this.isConfigured) {
+            throw new Error('Floating focused needs to be configured before use');
+        }
+        if (this.setter) {
+            if (isValidPosition(givenPosition)) {
+                this.setter(this.element, givenPosition);
+                return;
+            }
+            const positionAndDimensions = this.getPositionAndDimensions(toElement);
+            if (positionAndDimensions) this.setter(this.element, positionAndDimensions);
+        }
+    }
+
+    getPositionAndDimensions(toElement: HTMLElement): PositionAndDimensions | null {
+        if (this.getter) {
+            const { width, height, top, left } = this.getter(toElement);
+            if (typeof top !== 'number' || typeof left !== 'number') {
+                return toElement.getBoundingClientRect();
+            }
+            const finalWidth = width || this.getWidthFromDataset(toElement);
+            const finalHeight = height || this.getHeightFromDataset(toElement);
+            if (typeof finalWidth === 'number' && typeof finalHeight === 'number') {
+                return { width: finalWidth, height: finalHeight, top, left };
+            }
+        } else if (typeof toElement.getBoundingClientRect === 'function') {
+            return toElement.getBoundingClientRect();
+        }
+        return null;
+    }
+
+    getWidthFromDataset(toElement: HTMLElement): number | null {
+        return this.getFromDataset(toElement, 'width');
+    }
+
+    getHeightFromDataset(toElement: HTMLElement): number | null {
+        return this.getFromDataset(toElement, 'height');
+    }
+
+    getFromDataset(toElement: HTMLElement, key: string): number | null {
+        const unparsedValue = toElement.dataset[key];
+        if (!unparsedValue) return null;
+        const value = parseInt(unparsedValue, 10);
+        if (Number.isNaN(value)) return null;
+        return value;
+    }
+}
+
+export const floatingFocus = new FloatingFocus();

package/packages/floating-focus/src/Horizontal.tsx

@@ -0,0 +1,20 @@
+import { Reference, forwardRef } from '@24i/bigscreen-sdk/jsx';
+import { Horizontal as PureHorizontal, HorizontalProps } from '@24i/bigscreen-sdk/focus';
+import { floatingFocus } from './FloatingFocus';
+
+type Props = HorizontalProps;
+
+export const Horizontal = forwardRef(({ onFocusChanged, ...props }: Props, ref: Reference) => {
+    const internalOnFocusChanged = (focusRef: Reference, index: number) => {
+        floatingFocus.setFocus(focusRef.current);
+        if (typeof onFocusChanged === 'function') onFocusChanged(focusRef, index);
+    };
+
+    return (
+        <PureHorizontal
+            ref={ref}
+            onFocusChanged={internalOnFocusChanged}
+            {...props}
+        />
+    );
+});

package/packages/floating-focus/src/Vertical.tsx

@@ -0,0 +1,20 @@
+import { Reference, forwardRef } from '@24i/bigscreen-sdk/jsx';
+import { Vertical as PureVertical, VerticalProps } from '@24i/bigscreen-sdk/focus';
+import { floatingFocus } from './FloatingFocus';
+
+type Props = VerticalProps;
+
+export const Vertical = forwardRef(({ onFocusChanged, ...props }: Props, ref: Reference) => {
+    const internalOnFocusChanged = (focusRef: Reference, index: number) => {
+        floatingFocus.setFocus(focusRef.current);
+        if (typeof onFocusChanged === 'function') onFocusChanged(focusRef, index);
+    };
+
+    return (
+        <PureVertical
+            ref={ref}
+            onFocusChanged={internalOnFocusChanged}
+            {...props}
+        />
+    );
+});

package/packages/floating-focus/src/index.ts

@@ -0,0 +1,4 @@
+export { floatingFocus } from './FloatingFocus';
+export { css2Setter, css3Setter } from './utils';
+export { Horizontal } from './Horizontal';
+export { Vertical } from './Vertical';

package/packages/floating-focus/src/types.ts

@@ -0,0 +1,20 @@
+export type PositionAndDimensions = {
+    width: number,
+    height: number,
+    top: number,
+    left: number,
+};
+
+export type PositionAndDimensionsGetter = (element: HTMLElement) => Partial<PositionAndDimensions>;
+
+export type PositionAndDimensionsSetter = (
+    element: HTMLElement,
+    positionAndDimensions: PositionAndDimensions,
+) => void;
+
+export type Config = {
+    element?: HTMLElement,
+    createDefaultElement?: true,
+    positionDimensionGetter?: PositionAndDimensionsGetter,
+    positionDimensionSetter?: PositionAndDimensionsSetter,
+};

package/packages/floating-focus/src/utils.ts

@@ -0,0 +1,43 @@
+import { PositionAndDimensions } from './types';
+
+let processedPrefix: string;
+
+const hasOwnProperty = (object: Object, property: string) => (
+    Object.prototype.hasOwnProperty.call(object, property)
+);
+
+const getPrefix = () => {
+    if (typeof processedPrefix !== 'undefined') return processedPrefix;
+    const { body: { style } } = document;
+    if (hasOwnProperty(style, 'transform')) processedPrefix = '';
+    else if (hasOwnProperty(style, 'webkitTransform')) processedPrefix = '-webkit-';
+    else if (hasOwnProperty(style, 'mozTransform')) processedPrefix = '-moz-';
+    else if (hasOwnProperty(style, 'msTransform')) processedPrefix = '-ms-';
+    else if (hasOwnProperty(style, 'oTransform')) processedPrefix = '-o-';
+    else processedPrefix = '';
+    return processedPrefix;
+};
+
+export const createDefaultElement = () => {
+    const div = document.createElement('div');
+    div.className = 'floating-focus';
+    document.body.appendChild(div);
+    return div;
+};
+
+export const css2Setter = (
+    element: HTMLElement,
+    { width, height, top, left }: PositionAndDimensions,
+): void => {
+    // eslint-disable-next-line max-len
+    element.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px`;
+};
+
+export const css3Setter = (
+    element: HTMLElement,
+    { width, height, top, left }: PositionAndDimensions,
+): void => {
+    const prefix = getPrefix();
+    // eslint-disable-next-line max-len
+    element.style.cssText = `position: absolute; top: 0px; left: 0px; ${prefix}transform: translate(${left}px, ${top}px); width: ${width}px; height: ${height}px`;
+};