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

package/packages/menu/src/MenuAndContentContainer/MenuAndContentContainer.tsx

@@ -0,0 +1,166 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { device } from '@24i/bigscreen-sdk/device';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { service } from './service';
+import {
+    Props,
+    Menu as IMenu,
+    SceneWithMenuAvailability,
+    MenuAndContentContainer as IMenuAndContentContainer,
+    MenuItem,
+} from './interface';
+
+/**
+ * **$MenuAndContentContainer**
+ */
+export class MenuAndContentContainer<T extends string = string>
+    extends Component<Props<T>> implements IMenuAndContentContainer<T> {
+    /**
+     * Reference to {@link Menu}.
+     */
+    menu = createRef<IMenu<T>>();
+
+    /**
+     * Flag whether we need to listen to the mouse events.
+     */
+    listensToMouse = false;
+
+    /**
+     * Adds event listeners:
+     * - keydown to {@link Props.elementForEvents elementForEvents}
+     * - mousemove to {@link Props.elementForEvents elementForEvents} if applicable
+     * - mouseactive to {@link device}
+     */
+    componentDidMount() {
+        const { elementForEvents } = this.props;
+        elementForEvents.current!.addEventListener('keydown', this.onKeyDown);
+        if (device.isMouseUsed()) {
+            this.addMouseListener();
+        }
+        device.addEventListener('mouseactive', this.onMouseActive);
+    }
+
+    /**
+     * Clears event listeners.
+     */
+    componentWillUnmount() {
+        const { elementForEvents } = this.props;
+        const element = elementForEvents.current!;
+        element.removeEventListener('keydown', this.onKeyDown);
+        this.removeMouseListener();
+        device.removeEventListener('mouseactive', this.onMouseActive);
+    }
+
+    /**
+     * Callback for changing the menu visibility (opening/closing).
+     * @param visible flag whether the menu is visible (true) or hidden (false)
+     */
+    onVisibilityChange = (visible: boolean) => {
+        if (visible) {
+            this.menu.current!.focus();
+            service.triggerEvent('visibilitychange', true);
+        } else {
+            const { router: { current: router } } = this.props;
+            router!.focus();
+            service.triggerEvent('visibilitychange', false);
+        }
+    };
+
+    /**
+     * Handles opening/closing with keyboard.
+     * @param event keyboard event
+     */
+    onKeyDown = (event: KeyboardEvent) => {
+        if (!this.isMenuAvailable()) return;
+        const { Menu } = this.props;
+        const menu = this.menu.current!;
+        if (menu.isOpen() && Menu.shouldCloseMenu(event)) {
+            menu.close();
+            stopEvent(event);
+        } else if (!menu.isOpen() && Menu.shouldOpenMenu(event)) {
+            menu.open();
+            stopEvent(event);
+        }
+    };
+
+    /**
+     * Handles opening with mouse.
+     * @param event mouse event
+     */
+    onMouseMove = (event: MouseEvent) => {
+        const { Menu } = this.props;
+        const menu = this.menu.current!;
+        if (this.isMenuAvailable() && !menu.isOpen()) {
+            const { clientX, clientY } = event;
+            if (Menu.shouldOpenMenuWithMouse({ clientX, clientY })) {
+                menu.open();
+                stopEvent(event);
+            }
+        }
+    };
+
+    /**
+     * Handles adding/removing mouse listeners based on whether the mouse is used or not.
+     * @param event mouse active event
+     */
+    onMouseActive = ({ isMouseActive }: { isMouseActive: boolean }) => {
+        if (isMouseActive) this.addMouseListener();
+        else this.removeMouseListener();
+    };
+
+    /**
+     * Determines whether the menu is available for the current scene using.
+     * {@link Props.router router} and {@link SceneWithMenuAvailability} interface.
+     * @returns true if the menu is available, false otherwise
+     */
+    isMenuAvailable() {
+        const { router: { current: router } } = this.props;
+        const scene = router?.getActiveRoute()?.component.current as SceneWithMenuAvailability;
+        return !!scene.constructor.isMenuEnabled;
+    }
+
+    /**
+     * Attaches mousemove listener.
+     */
+    addMouseListener() {
+        if (!this.listensToMouse) {
+            this.listensToMouse = true;
+            const { elementForEvents } = this.props;
+            elementForEvents.current!.addEventListener('mousemove', this.onMouseMove);
+        }
+    }
+
+    /**
+     * Removes mousemove listener.
+     */
+    removeMouseListener() {
+        if (this.listensToMouse) {
+            this.listensToMouse = false;
+            const { elementForEvents } = this.props;
+            elementForEvents.current!.removeEventListener('mousemove', this.onMouseMove);
+        }
+    }
+
+    /**
+     * Passes new items to render to {@link MenuAndContentContainer.menu Menu}.
+     * @param items new items to render
+     */
+    updateItems(items: MenuItem<T>[]) {
+        this.menu.current!.updateItems(items);
+    }
+
+    render() {
+        const { children, items, Menu } = this.props;
+        return (
+            <>
+                <Menu
+                    ref={this.menu}
+                    items={items}
+                    onVisibilityChange={this.onVisibilityChange}
+                    contentContainer={this}
+                />
+                {children}
+            </>
+        );
+    }
+}

package/packages/menu/src/MenuAndContentContainer/index.ts

@@ -0,0 +1 @@
+export { MenuAndContentContainer } from './MenuAndContentContainer';

package/packages/menu/src/MenuAndContentContainer/interface.ts

@@ -0,0 +1,164 @@
+import { Children, Reference, Component } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { IRoute, Router } from '@24i/bigscreen-sdk/router';
+
+/**
+ * **MenuItem Data**
+ */
+export type MenuItem<T extends string = string> = {
+    /**
+     * Action to do after pressing the menu item.
+     */
+    go(): void,
+    /**
+     * Action to get the path that the menu item leads to.
+     */
+    getPath(): string,
+    /**
+     * Name of the icon displayed by the menu item.
+     */
+    icon?: T,
+    /**
+     * URL of the icon displayed by the menu item.
+     */
+    iconUrl?: string,
+    /**
+     * Label displayed by the menu item.
+     */
+    label: string,
+};
+
+/**
+ * **Menu Props**
+ */
+export type MenuProps<T extends string = string> = {
+    /**
+     * Array of {@link MenuItem MenuItems}.
+     */
+    items: MenuItem<T>[],
+    /**
+     * Callback for changing the menu visibility (opening/closing).
+     * @param visible flag whether the menu is visible (true) or not (false)
+     */
+    onVisibilityChange(visible: boolean): void,
+    /**
+     * Reference to the parent container to allow to inform about the items change.
+     * {@link MenuAndContentContainer MenuAndContentContainer}.
+     */
+    contentContainer?: MenuAndContentContainer<T>,
+};
+
+/**
+ * **{@link MenuAndContentContainer} Props**
+ */
+export type Props<T extends string = string, P extends MenuProps<T> = MenuProps<T>> = {
+    /**
+     * Content of the App to render.
+     */
+    children: Children,
+    /**
+     * Element that the component binds event listeners to.
+     */
+    elementForEvents: Reference<HTMLElement>,
+    /**
+     * Reference to a {@link Router Router from BIGscreen SDK}.
+     */
+    router: Reference<Router>,
+    /**
+     * Array of {@link MenuItem MenuItems}.
+     */
+    items: MenuItem<T>[],
+
+    /**
+     * Component of the actual menu implementation (side menu, top menu, Whitelabel menu ect.).
+     */
+    Menu: MenuComponent<T, P>,
+};
+
+/**
+ * Interface of the scenes important for Menu.
+ */
+export type SceneWithMenuAvailability = IRoute & {
+    constructor: {
+        /**
+         * static flag - true for menu is enabled, undefined (missing) or false for disabled.
+         */
+        isMenuEnabled?: boolean,
+    }
+};
+
+/**
+ * **Menu interface**
+ *
+ * Menu extends normal {@link Component} and {@link IFocusable} and adds:
+ * - {@link Menu.isOpen isOpen} - function that returns true for opened menu, false otherwise
+ * - {@link Menu.open open} - function to open the menu
+ * - {@link Menu.close close} - function to close the menu
+ */
+export interface Menu<
+    T extends string = string,
+    P extends MenuProps<T> = MenuProps<T>,
+> extends Component<P>, IFocusable {
+    /**
+     * Function to determine the open state of the menu.
+     * @returns true for open, false otherwise
+     */
+    isOpen(): boolean,
+    /**
+     * Function to open the menu.
+     */
+    open(): void,
+    /**
+     * Function to close the menu.
+     */
+    close(): void,
+    /**
+     * Renders new menu items.
+     * @param items new items to render
+     */
+    updateItems(items: MenuItem<T>[]): void,
+}
+
+/**
+ * Function for deciding whether to open menu based on mouse position.
+ */
+type MouseMenuOpenResolver = (
+    ({ clientX, clientY }: { clientX: number, clientY: number }) => boolean
+);
+
+/**
+ * Function for deciding whether to open menu based on pressed key.
+ */
+type KeyboardMenuOpenResolver = (
+    (event: KeyboardEvent) => boolean
+);
+
+/**
+ * Function for deciding whether to close menu based on pressed key.
+ */
+type KeyboardMenuCloseResolver = (
+    (event: KeyboardEvent) => boolean
+);
+
+/**
+ * Class constructor returning an instance of the {@link Menu} interface.
+ */
+export interface MenuComponent<T extends string = string, P extends MenuProps<T> = MenuProps<T>> {
+    new (props: P): Menu<T, P>,
+    shouldOpenMenuWithMouse: MouseMenuOpenResolver,
+    shouldOpenMenu: KeyboardMenuOpenResolver,
+    shouldCloseMenu: KeyboardMenuCloseResolver,
+}
+
+/**
+ * **MenuAndContentContainer interface**
+ *
+ * MenuAndContentContainer is a regular {@link Component} without any other interface.
+ */
+export interface MenuAndContentContainer<T extends string = string> extends Component<Props<T>> {
+    /**
+     * Passes new items to render to {@link Menu}.
+     * @param items new menu items to render
+     */
+    updateItems(items: MenuItem<T>[]): void;
+}

package/packages/menu/src/MenuAndContentContainer/service.ts

@@ -0,0 +1,5 @@
+import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
+
+export const service = new EventsManager<{
+    'visibilitychange':(isVisible: boolean) => void,
+}>();

package/packages/menu/src/WhitelabelMenu/SideMenu.scss

@@ -0,0 +1,41 @@
+.menu-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    &.display-none {
+        display: none;
+    }
+
+    .focus {
+        background-color: rgba(255, 255, 255, 0.18);
+    }
+
+    .menu {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: $menu-width;
+        height: $menu-height;
+        background-color: rgb(31, 31, 31);
+    }
+
+    .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: $overlay-width;
+        height: $overlay-height;
+        background-color: rgba(31, 31, 31, 0.6);
+    }
+
+    .shadow {
+        position: absolute;
+        top: 0;
+        left: $menu-width;
+        width: $menu-shadow-width;
+        height: $menu-height;
+        background-image: $menu-shadow-image;
+    }
+}

package/packages/menu/src/WhitelabelMenu/SideMenu.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './SideMenu';

package/packages/menu/src/WhitelabelMenu/SideMenu.styles.animated.1080.scss

@@ -0,0 +1,3 @@
+@import './sizes.1080';
+@import './SideMenu';
+@import './animated';

package/packages/menu/src/WhitelabelMenu/SideMenu.styles.animated.scss

@@ -0,0 +1,3 @@
+@import './sizes';
+@import './SideMenu';
+@import './animated';

package/packages/menu/src/WhitelabelMenu/SideMenu.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './SideMenu';

package/packages/menu/src/WhitelabelMenu/SideMenu.tsx

@@ -0,0 +1,248 @@
+import { Component, createRef, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { Vertical } from '@24i/bigscreen-sdk/focus';
+import { DISPLAY_NONE } from '@24i/bigscreen-sdk/utils/displayToggler';
+import { findIndex, forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { VisualControllerBase } from './VisualControllerBase';
+import { VisualController } from './VisualController';
+import { shouldOpenMenuWithMouse, shouldOpenMenu, shouldCloseMenu } from './utils';
+import { height } from './sizes';
+import { animated } from './constants';
+import { MenuItem } from '../MenuAndContentContainer/interface';
+import { SideMenuItem } from './SideMenuItem';
+import {
+    Props,
+    SideMenu as ISideMenu,
+} from './interface';
+
+/**
+ * **$SideMenu**
+ */
+export class SideMenu extends Component<Props> implements ISideMenu {
+    /**
+     * Logic for opening SideMenu with mouse.
+     */
+    static shouldOpenMenuWithMouse = shouldOpenMenuWithMouse;
+
+    /**
+     * Logic for opening SideMenu with keyboard.
+     */
+    static shouldOpenMenu = shouldOpenMenu;
+
+    /**
+     * Logic for closing SideMenu with keyboard.
+     */
+    static shouldCloseMenu = shouldCloseMenu;
+
+    /**
+     * Wrapper for the menu items and floating focus.
+     */
+    menuItemsWrap = createRef<HTMLDivElement>();
+
+    /**
+     * Vertical navigation among {@link SideMenuItem items}.
+     */
+    navigation = createRef<InstanceType<typeof Vertical>>();
+
+    /**
+     * Array of rendered menu {@link SideMenuItem items}
+     * for the {@link SideMenu.navigation navigation}.
+     */
+    navigationItems: Reference<SideMenuItem>[] = [];
+
+    /**
+     * Active {@link SideMenuItem item}.
+     */
+    activeItem: Reference<SideMenuItem> | null = null;
+
+    /**
+     * {@link VisualController} used by the menu.
+     */
+    visualController: VisualControllerBase = new VisualController(
+        // eslint-disable-next-line react/destructuring-assignment
+        this.getPaddingTop(this.props.items), SideMenuItem.height, SideMenuItem.margin,
+    );
+
+    /**
+     * isOpen passthrough to {@link SideMenu.visualController controller}.
+     */
+    isOpen = this.visualController.isOpen;
+
+    /**
+     * Sets the initial active item and adds `hashchange` event listener.
+     */
+    componentDidMount() {
+        const activeIndex = this.getActiveItemIndexByPath();
+        const safeActiveIndex = Math.max(0, activeIndex); // Don't want -1 here
+        this.onItemFocus(safeActiveIndex);
+        this.setActiveItem(activeIndex);
+        this.navigation.current!.index = safeActiveIndex;
+        window.addEventListener('hashchange', this.onHashChange);
+    }
+
+    /**
+     * Removes `hashchange` event listener.
+     */
+    componentWillUnmount() {
+        window.removeEventListener('hashchange', this.onHashChange);
+    }
+
+    /**
+     * Handler for the `hashchange` event.
+     */
+    onHashChange = () => {
+        this.close();
+        this.setActiveItem();
+    };
+
+    /**
+     * Passthrough to controller.
+     * @param index of the item in menu {@link Props.items items collection}
+     */
+    onItemFocus(index: number) {
+        this.visualController.onFocusChanged(index);
+    }
+
+    /**
+     * Returns number of pixels needed to vertically center the menu items.
+     * @param items items that are rendered
+     * @returns number of pixels for top padding for vertical centering
+     */
+    getPaddingTop(items: MenuItem[]) {
+        return Math.round(
+            (height - (SideMenuItem.height + (SideMenuItem.margin * 2)) * items.length) / 2,
+        );
+    }
+
+    /**
+     * Returns (and creates if it does not exist) a reference to {@link SideMenuItem}.
+     * @param index of the {@link SideMenu.navigationItems navigatable item}
+     * @returns Reference to {@link SideMenuItem}
+     */
+    getNavigationItemReference(index: number) {
+        if (!this.navigationItems[index]) {
+            this.navigationItems[index] = createRef();
+        }
+        return this.navigationItems[index];
+    }
+
+    /**
+     * Finds and returns the index of the active {@link SideMenuItem}.
+     * @returns index of the active {@link SideMenuItem}
+     */
+    getActiveItemIndexByPath() {
+        const { items } = this.props;
+        const currentPath = window.location.hash.replace('#', '');
+        return findIndex(items, (item) => item.getPath() === currentPath);
+    }
+
+    /**
+     * Finds and returns the reference to the current active {@link SideMenuItem}
+     * or null if none is active.
+     * @param index of the active {@link SideMenuItem}
+     * @returns active {@link SideMenuItem} or null
+     */
+    getActiveItemByPath(index: number = this.getActiveItemIndexByPath()) {
+        if (index === -1) return null;
+        return this.navigationItems[index];
+    }
+
+    /**
+     * Sets a new active {@link SideMenuItem}.
+     * @param index of item that should be made active
+     */
+    setActiveItem(index?: number) {
+        const newActiveItem = this.getActiveItemByPath(index);
+        if (newActiveItem !== this.activeItem) {
+            if (this.activeItem) this.activeItem.current!.deactivate();
+            this.activeItem = newActiveItem;
+            if (this.activeItem) this.activeItem.current!.activate();
+        }
+    }
+
+    /**
+     * Closes the menu.
+     */
+    close = () => {
+        const { onVisibilityChange } = this.props;
+        this.visualController.close();
+        onVisibilityChange(false);
+    };
+
+    /**
+     * Focuses the {@link SideMenu.navigation navigation}.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions) {
+        this.navigation.current!.focus(options);
+    }
+
+    /**
+     * Opens the menu.
+     */
+    open() {
+        const { onVisibilityChange } = this.props;
+        this.visualController.open();
+        onVisibilityChange(true);
+    }
+
+    /**
+     * Renders new items.
+     * @param items new items to render
+     */
+    updateItems(items: MenuItem[]) {
+        forEach(this.navigationItems, (menuItem) => {
+            removeNode(menuItem.current!.div.current!);
+        });
+        this.navigationItems.length = 0;
+        const paddingTop = this.getPaddingTop(items);
+        this.visualController.paddingTop = paddingTop;
+        this.menuItemsWrap.current!.style.paddingTop = `${paddingTop}px`;
+        this.appendMount(this.renderItems(items), this.menuItemsWrap);
+        this.setActiveItem();
+    }
+
+    renderItems(items: MenuItem[]) {
+        return (
+            items.map((item, index) => (
+                <SideMenuItem
+                    ref={this.getNavigationItemReference(index)}
+                    {...item}
+                    go={() => {
+                        item.go();
+                        this.close();
+                    }}
+                    onFocus={() => this.onItemFocus(index)}
+                />
+            ))
+        );
+    }
+
+    render() {
+        const { items } = this.props;
+        return (
+            <div ref={this.visualController.div} className={`menu-container ${DISPLAY_NONE}`}>
+                <div
+                    ref={this.visualController.overlay}
+                    className={`overlay ${animated ? DISPLAY_NONE : ''}`}
+                    onClick={this.close}
+                >
+                    <div className="shadow" />
+                </div>
+                <div
+                    ref={this.menuItemsWrap}
+                    className="menu"
+                    style={{ paddingTop: `${this.getPaddingTop(items)}px` }}
+                >
+                    {animated && <div ref={this.visualController.focus} className="focus" />}
+                    <Vertical
+                        ref={this.navigation}
+                        domRef={this.visualController.div}
+                        focusableChildren={this.navigationItems}
+                    >
+                        {this.renderItems(items)}
+                    </Vertical>
+                </div>
+            </div>
+        );
+    }
+}

package/packages/menu/src/WhitelabelMenu/SideMenuItem/SideMenuItem.scss

@@ -0,0 +1,56 @@
+@import '@24i/bigscreen-sdk/sass-utils/ellipsis';
+
+.menu-item {
+    @include ellipsis;
+    overflow: visible;
+    position: relative;
+    display: inline-block;
+    width: $width;
+    height: $height;
+    margin: $margin;
+    padding-left: $padding-left;
+    padding-top: $padding-top;
+    box-sizing: border-box;
+    border-radius: $border-radius 0 0 $border-radius;
+    background-color: transparent;
+    outline: none;
+
+    .text {
+        opacity: 0.5;
+        color: rgb(255, 255, 255);
+        font-size: $text-font-size;
+        font-style: normal;
+        font-weight: 600;
+        letter-spacing: 0;
+        line-height: $text-line-height;
+        text-transform: none;
+    }
+
+    .icon {
+        position: absolute;
+        top: $icon-top;
+        left: $icon-left;
+        width: $icon-size;
+        height: $icon-size;
+        opacity: 0.5;
+    }
+
+    &:focus {
+        background-color: rgba(255, 255, 255, 0.18);
+
+        .text {
+            opacity: 1;
+        }
+    }
+
+    &.active {
+        .text,
+        .icon {
+            opacity: 1;
+        }
+    }
+}
+
+[dir=rtl] .menu-item {
+    border-radius: 0 $border-radius $border-radius 0;
+}