wg5 0.0.1-security → 8.462.0

package/src/modules/organisms/header/header.js

@@ -0,0 +1,193 @@
+import { Menubar } from './scripts/a11y-navigation/Menubar';
+import throttle from 'lodash.throttle';
+import { TrialForm } from '../../molecules/trial-form/trial-form';
+
+class Header {
+    constructor() {
+        this.nodes = {
+            navMenuTrigger: document.querySelectorAll('.js-nav-menu-trigger'),
+            header: document.querySelector('.header'),
+            headerShadow: document.querySelector('.header__shadow'),
+            widgetIntro: document.querySelector('.widget-intro'),
+            body: document.body,
+            subMenuTriggerMobile: document.querySelectorAll('.js-sub-menu-trigger-mobile'),
+            formGroup: document.querySelector('.header-form-group'),
+            formTrigger: document.querySelector('.header-trial-form-trigger'),
+            contactSales: document.querySelector('.header__nav-group-item--contact-sales'),
+        };
+
+        this.headerHeight = this.nodes.header.clientHeight;
+        this.opacityScrollRate = 500;
+        this.stickPoint = 0;
+        this.activeMenuItem = null;
+        this.activeSubMenu = null;
+        this.isWithTheme = true;
+        this.isNavOpen = false;
+        this.isTrialOpen = false;
+        this.theme = this.nodes.widgetIntro ? this.nodes.widgetIntro.getAttribute('data-theme') : 'default';
+        this.nodes.header.classList.add('header--theme-' + this.theme);
+        this.headerStickyTheme = this.nodes.header.getAttribute('data-sticky-theme')
+            ? this.nodes.header.getAttribute('data-sticky-theme')
+            : 'default';
+
+        this.initNavMenu();
+        this.initTrialForm();
+
+        window.addEventListener(
+            'scroll',
+            throttle(() => {
+                this.onScroll();
+            }, 50)
+        );
+    }
+
+    initTrialForm() {
+        const formsCollection = this.nodes.header.querySelectorAll('.trial-form');
+
+        [].forEach.call(formsCollection, (formNode) => {
+            const trialForm = new TrialForm(formNode);
+
+            trialForm.init();
+
+            if (!formNode.classList.contains('header-trial-form-mobile')) {
+                document.addEventListener('click', (event) => {
+                    const isFormTriggerEnable =
+                        event.target === this.nodes.formTrigger || event.target.parentNode === this.nodes.formTrigger;
+
+                    const isFormTriggerDisable =
+                        event.target !== trialForm.fields.email.control &&
+                        trialForm.fields.button.node !== event.target.parentNode &&
+                        !trialForm.fields.email.dirty &&
+                        this.isTrialOpen;
+
+                    if (isFormTriggerEnable) {
+                        this.nodes.formGroup.classList.add('header-form-group--opened');
+                        trialForm.fields.email.control.focus();
+                        this.isTrialOpen = true;
+                        this.nodes.contactSales.hidden = true;
+                    }
+
+                    if (isFormTriggerDisable) {
+                        this.nodes.formGroup.classList.remove('header-form-group--opened');
+                        trialForm.resetFormStatuses();
+                        this.isTrialOpen = false;
+                        this.nodes.contactSales.hidden = false;
+                    }
+                });
+            }
+        });
+    }
+
+    initNavMenu() {
+        const navMenuTrigger = [].slice.call(this.nodes.navMenuTrigger);
+        const subMenuTriggerMobile = [].slice.call(this.nodes.subMenuTriggerMobile);
+
+        navMenuTrigger.forEach((item) => {
+            item.addEventListener('click', () => {
+                this.nodes.body.classList.toggle('page--nav-opened');
+                this.isNavOpen = !this.isNavOpen;
+            });
+        });
+
+        subMenuTriggerMobile.forEach((item) => {
+            item.addEventListener('click', (event) => {
+                event.preventDefault();
+                const targetElement = event.target;
+                const subMenu = targetElement.nextElementSibling;
+
+                if (subMenu.style.maxHeight) {
+                    targetElement.classList.remove('header-menu-mobile__link--opened');
+                    subMenu.style.maxHeight = null;
+                    this.activeMenuItem = null;
+                    this.activeSubMenu = null;
+                } else {
+                    subMenu.style.maxHeight = subMenu.scrollHeight + 'px';
+                    targetElement.classList.add('header-menu-mobile__link--opened');
+
+                    if (this.activeSubMenu && this.activeMenuItem) {
+                        this.activeSubMenu.style.maxHeight = null;
+                        this.activeMenuItem.classList.remove('header-menu-mobile__link--opened');
+                    }
+
+                    this.activeMenuItem = targetElement;
+                    this.activeSubMenu = subMenu;
+                }
+            });
+        });
+    }
+
+    onScroll() {
+        const clientScrollOffset = window.pageYOffset;
+        const isReadyToStuck = clientScrollOffset > this.stickPoint && !this.stuck;
+        const isReadyToUnstuck = clientScrollOffset <= this.stickPoint && this.stuck;
+
+        this.initShadow(clientScrollOffset);
+
+        if (this.nodes.widgetIntro && this.theme !== this.headerStickyTheme) {
+            this.changeStickyTheme();
+        }
+
+        if (isReadyToStuck) {
+            this.stuck = true;
+            this.nodes.header.classList.add('header--sticky');
+            if (this.nodes.contactSales) {
+                this.nodes.contactSales.hidden = true;
+            }
+        }
+        if (isReadyToUnstuck) {
+            this.stuck = false;
+            this.nodes.header.classList.remove('header--sticky');
+            if (this.nodes.contactSales) {
+                this.nodes.contactSales.hidden = false;
+            }
+        }
+    }
+
+    initShadow(pageScrollOffset) {
+        let opacityValue = '1';
+
+        if (pageScrollOffset < this.opacityScrollRate) {
+            opacityValue = pageScrollOffset / this.opacityScrollRate;
+        }
+
+        this.nodes.headerShadow.style.opacity = opacityValue;
+    }
+
+    changeStickyTheme() {
+        const introScrollOffset = this.nodes.widgetIntro.getBoundingClientRect();
+        const isHeaderOverIntro =
+            introScrollOffset.top <= this.headerHeight && introScrollOffset.bottom > this.headerHeight;
+        const isHeaderUnderIntro = introScrollOffset.bottom <= this.headerHeight;
+
+        if (isHeaderOverIntro && !this.isWithTheme) {
+            this.isWithTheme = true;
+            this.nodes.header.classList.add('header--theme-' + this.theme);
+            this.nodes.header.classList.remove('header--theme-' + this.headerStickyTheme);
+        }
+
+        if (isHeaderUnderIntro && this.isWithTheme) {
+            this.isWithTheme = false;
+            this.nodes.header.classList.remove('header--theme-' + this.theme);
+            this.nodes.header.classList.add('header--theme-' + this.headerStickyTheme);
+        }
+    }
+}
+
+const isLightHeader = document.querySelector('.header--light');
+
+if (!isLightHeader) {
+    const menubar = new Menubar(document.querySelector('.header-menu__list'));
+
+    menubar.init();
+
+    const languageSelector = new Menubar(document.querySelector('.header-language-selector'));
+
+    languageSelector.init();
+}
+
+const header = new Header();
+
+
+
+// WEBPACK FOOTER //
+// ./node_modules/wg5/src/modules/organisms/header/header.js

package/src/modules/organisms/header/scripts/a11y-navigation/MenuItem.js

@@ -0,0 +1,176 @@
+import { PopupMenu } from './PopupMenu';
+import { isPrintableCharacter, keyCode } from './helpers';
+
+export class MenuItem {
+    constructor(domNode, menuObj) {
+        this.domNode = domNode;
+        this.menu = menuObj;
+        this.popupMenu = null;
+        this.isMenubarItem = false;
+        this.navMenuDelay = 300;
+        this.keyCode = keyCode;
+    }
+
+    init() {
+        this.domNode.tabIndex = -1;
+
+        this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+        this.domNode.addEventListener('click', this.handleClick.bind(this));
+        this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+        this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+        this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
+        this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+
+        // Initialize flyout menu
+
+        let nextElement = this.domNode.nextElementSibling;
+
+        if (nextElement && nextElement.tagName === 'UL') {
+            this.popupMenu = new PopupMenu(nextElement, this);
+            this.popupMenu.init();
+        }
+    }
+
+    isExpanded() {
+        return this.domNode.getAttribute('aria-expanded') === 'true';
+    }
+
+    handleKeydown(event) {
+        let currentTarget = event.currentTarget,
+            char = event.key,
+            isMenuOpen = false,
+            clickEvent;
+
+        switch (event.keyCode) {
+            case this.keyCode.SPACE:
+            case this.keyCode.RETURN:
+                if (this.popupMenu) {
+                    this.popupMenu.open();
+                    this.popupMenu.setFocusToFirstItem();
+                } else {
+                    // Create simulated mouse event to mimic the behavior of ATs
+                    // and let the event handler handleClick do the housekeeping.
+                    try {
+                        clickEvent = new MouseEvent('click', {
+                            view: window,
+                            bubbles: true,
+                            cancelable: true,
+                        });
+                    } catch (err) {
+                        if (document.createEvent) {
+                            // DOM Level 3 for IE 9+
+                            clickEvent = document.createEvent('MouseEvents');
+                            clickEvent.initEvent('click', true, true);
+                        }
+                    }
+                    currentTarget.dispatchEvent(clickEvent);
+                }
+
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.UP:
+                this.menu.setFocusToPreviousItem(this);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.DOWN:
+                this.menu.setFocusToNextItem(this);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.LEFT:
+                this.menu.setFocusToController('previous', true);
+                this.menu.close(true);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.RIGHT:
+                if (this.popupMenu) {
+                    this.popupMenu.open();
+                    this.popupMenu.setFocusToFirstItem();
+                } else {
+                    this.menu.setFocusToController('next', true);
+                    this.menu.close(true);
+                }
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.HOME:
+            case this.keyCode.PAGEUP:
+                this.menu.setFocusToFirstItem();
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.END:
+            case this.keyCode.PAGEDOWN:
+                this.menu.setFocusToLastItem();
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.ESC:
+                this.menu.setFocusToController();
+                this.menu.close(true);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.TAB:
+                this.menu.setFocusToController();
+                break;
+
+            default:
+                if (isPrintableCharacter(char)) {
+                    this.menu.setFocusByFirstCharacter(this, char);
+                    isMenuOpen = true;
+                }
+                break;
+        }
+
+        if (isMenuOpen) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+
+    setExpanded(value) {
+        this.domNode.setAttribute('aria-expanded', value ? 'true' : 'false');
+    }
+
+    handleClick() {
+        this.menu.setFocusToController();
+        this.menu.close(true);
+    }
+
+    handleFocus() {
+        this.menu.hasFocus = true;
+    }
+
+    handleBlur() {
+        this.menu.hasFocus = false;
+        setTimeout(this.menu.close.bind(this.menu, false), this.navMenuDelay);
+    }
+
+    handleMouseover() {
+        this.menu.hasHover = true;
+        this.menu.open();
+        if (this.popupMenu) {
+            this.popupMenu.hasHover = true;
+            this.popupMenu.open();
+        }
+    }
+
+    handleMouseout() {
+        if (this.popupMenu) {
+            this.popupMenu.hasHover = false;
+            this.popupMenu.close(true);
+        }
+
+        this.menu.hasHover = false;
+        setTimeout(this.menu.close.bind(this.menu, false), this.navMenuDelay);
+    }
+}
+
+
+
+// WEBPACK FOOTER //
+// ./node_modules/wg5/src/modules/organisms/header/scripts/a11y-navigation/MenuItem.js

package/src/modules/organisms/header/scripts/a11y-navigation/Menubar.js

@@ -0,0 +1,178 @@
+import { MenubarItem } from './MenubarItem';
+
+export class Menubar {
+    constructor(domNode) {
+        const msgPrefix = 'Menubar constructor argument menubarNode ';
+        let element;
+
+        // Check whether menubarNode is a DOM element
+
+        if (!(domNode instanceof Element)) {
+            throw new TypeError(msgPrefix + 'is not a DOM Element.');
+        }
+
+        // Check whether menubarNode has descendant elements
+
+        if (domNode.childElementCount === 0) {
+            throw new Error(msgPrefix + 'has no element children.');
+        }
+
+        // Check whether menubarNode has A elements
+
+        element = domNode.firstElementChild;
+        while (element) {
+            let menubarItem = element.firstElementChild;
+
+            if (element && menubarItem && menubarItem.tagName !== 'A') {
+                throw new Error(msgPrefix + 'has child elements are not A elements.');
+            }
+            element = element.nextElementSibling;
+        }
+
+        this.isMenubar = true;
+
+        this.domNode = domNode;
+
+        this.menubarItems = []; // See Menubar init method
+        this.firstChars = []; // See Menubar init method
+
+        this.firstItem = null; // See Menubar init method
+        this.lastItem = null; // See Menubar init method
+
+        this.hasFocus = false; // See MenubarItem handleFocus, handleBlur
+        this.hasHover = false; // See Menubar handleMouseover, handleMouseout
+    }
+
+    init() {
+        let menubarItem, textContent, numItems, element;
+
+        // Traverse the element children of menubarNode: configure each with
+        // menuitem role behavior and store reference in menuitems array.
+
+        element = this.domNode.firstElementChild;
+
+        while (element) {
+            let menuElement = element.firstElementChild;
+
+            if (element && menuElement && menuElement.tagName === 'A') {
+                menubarItem = new MenubarItem(menuElement, this);
+                menubarItem.init();
+                this.menubarItems.push(menubarItem);
+                textContent = menuElement.textContent.trim();
+                this.firstChars.push(textContent.substring(0, 1).toLowerCase());
+            }
+
+            element = element.nextElementSibling;
+        }
+
+        // Use populated menuitems array to initialize firstItem and lastItem.
+
+        numItems = this.menubarItems.length;
+        if (numItems > 0) {
+            this.firstItem = this.menubarItems[0];
+            this.lastItem = this.menubarItems[numItems - 1];
+        }
+        this.firstItem.domNode.tabIndex = 0;
+    }
+
+    setFocusToItem(newItem) {
+        let flag = false;
+
+        for (let i = 0; i < this.menubarItems.length; i++) {
+            let mbi = this.menubarItems[i];
+
+            if (mbi.domNode.tabIndex === 0) {
+                flag = mbi.domNode.getAttribute('aria-expanded') === 'true';
+            }
+
+            mbi.domNode.tabIndex = -1;
+            if (mbi.popupMenu) {
+                mbi.popupMenu.close();
+            }
+        }
+
+        newItem.domNode.focus();
+        newItem.domNode.tabIndex = 0;
+
+        if (flag && newItem.popupMenu) {
+            newItem.popupMenu.open();
+        }
+    }
+
+    setFocusToFirstItem() {
+        this.setFocusToItem(this.firstItem);
+    }
+
+    setFocusToLastItem() {
+        this.setFocusToItem(this.lastItem);
+    }
+
+    setFocusToPreviousItem(currentItem) {
+        let index, newItem;
+
+        if (currentItem === this.firstItem) {
+            newItem = this.lastItem;
+        } else {
+            index = this.menubarItems.indexOf(currentItem);
+            newItem = this.menubarItems[index - 1];
+        }
+
+        this.setFocusToItem(newItem);
+    }
+
+    setFocusToNextItem(currentItem) {
+        let index, newItem;
+
+        if (currentItem === this.lastItem) {
+            newItem = this.firstItem;
+        } else {
+            index = this.menubarItems.indexOf(currentItem);
+            newItem = this.menubarItems[index + 1];
+        }
+
+        this.setFocusToItem(newItem);
+    }
+
+    setFocusByFirstCharacter(currentItem, char) {
+        let start,
+            index,
+            lowerCasedChar = char.toLowerCase();
+
+        // Get start index for search based on position of currentItem
+
+        start = this.menubarItems.indexOf(currentItem) + 1;
+        if (start === this.menubarItems.length) {
+            start = 0;
+        }
+
+        // Check remaining slots in the menu
+
+        index = this.getIndexFirstChars(start, lowerCasedChar);
+
+        // If not found in remaining slots, check from beginning
+
+        if (index === -1) {
+            index = this.getIndexFirstChars(0, lowerCasedChar);
+        }
+
+        // If match was found...
+
+        if (index > -1) {
+            this.setFocusToItem(this.menubarItems[index]);
+        }
+    }
+
+    getIndexFirstChars(startIndex, char) {
+        for (let i = startIndex; i < this.firstChars.length; i++) {
+            if (char === this.firstChars[i]) {
+                return i;
+            }
+        }
+        return -1;
+    }
+}
+
+
+
+// WEBPACK FOOTER //
+// ./node_modules/wg5/src/modules/organisms/header/scripts/a11y-navigation/Menubar.js

package/src/modules/organisms/header/scripts/a11y-navigation/MenubarItem.js

@@ -0,0 +1,136 @@
+import { PopupMenu } from './PopupMenu';
+import { isPrintableCharacter, keyCode } from './helpers';
+
+export class MenubarItem {
+    constructor(domNode, menuObj) {
+        this.menu = menuObj;
+        this.domNode = domNode;
+        this.popupMenu = false;
+        this.hasFocus = false;
+        this.hasHover = false;
+        this.isMenubarItem = true;
+        this.keyCode = keyCode;
+    }
+
+    init() {
+        this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+        this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+        this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+
+        // Since css hover rule is set for element li, it is necessary to add event handler for element li
+        this.domNode.parentNode.addEventListener('mouseover', this.handleMouseover.bind(this));
+        this.domNode.parentNode.addEventListener('mouseout', this.handleMouseout.bind(this));
+
+        // Initialize pop up menus
+        let nextElement = this.domNode.nextElementSibling;
+        let hasSubMenu = nextElement && nextElement.classList.contains('js-header-sub-menu');
+
+        if (hasSubMenu) {
+            this.popupMenu = new PopupMenu(nextElement, this);
+            this.popupMenu.init();
+        }
+    }
+
+    handleKeydown() {
+        let char = event.key,
+            isMenuOpen = false;
+
+        switch (event.keyCode) {
+            case this.keyCode.SPACE:
+            case this.keyCode.RETURN:
+            case this.keyCode.DOWN:
+                if (this.popupMenu) {
+                    this.popupMenu.open();
+                    this.popupMenu.setFocusToFirstItem();
+                    isMenuOpen = true;
+                }
+                break;
+
+            case this.keyCode.LEFT:
+                this.menu.setFocusToPreviousItem(this);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.RIGHT:
+                this.menu.setFocusToNextItem(this);
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.UP:
+                if (this.popupMenu) {
+                    this.popupMenu.open();
+                    this.popupMenu.setFocusToLastItem();
+                    isMenuOpen = true;
+                }
+                break;
+
+            case this.keyCode.HOME:
+            case this.keyCode.PAGEUP:
+                this.menu.setFocusToFirstItem();
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.END:
+            case this.keyCode.PAGEDOWN:
+                this.menu.setFocusToLastItem();
+                isMenuOpen = true;
+                break;
+
+            case this.keyCode.TAB:
+                if (this.popupMenu) {
+                    this.popupMenu.close(true);
+                }
+
+                break;
+
+            case this.keyCode.ESC:
+                this.popupMenu.close(true);
+                break;
+
+            default:
+                if (isPrintableCharacter(char)) {
+                    this.menu.setFocusByFirstCharacter(this, char);
+                    isMenuOpen = true;
+                }
+                break;
+        }
+
+        if (isMenuOpen) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+
+    setExpanded(value) {
+        this.domNode.setAttribute('aria-expanded', value ? 'true' : 'false');
+    }
+
+    handleFocus() {
+        this.menu.hasFocus = true;
+    }
+
+    handleBlur() {
+        this.menu.hasFocus = false;
+    }
+
+    handleMouseover() {
+        this.hasHover = true;
+
+        if (this.popupMenu) {
+            this.popupMenu.open();
+        }
+    }
+
+    handleMouseout() {
+        this.hasHover = false;
+
+        if (this.popupMenu) {
+            setTimeout(this.popupMenu.close.bind(this.popupMenu, false), 0);
+        }
+    }
+}
+
+
+
+// WEBPACK FOOTER //
+// ./node_modules/wg5/src/modules/organisms/header/scripts/a11y-navigation/MenubarItem.js