/* *
 *
 *  (c) 2009-2019 Øystein Moseng
 *
 *  Accessibility component for exporting menu.
 *
 *  License: www.highcharts.com/license
 *
 * */

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _Globals = require('../../../parts/Globals.js');

var _Globals2 = _interopRequireDefault(_Globals);

var _AccessibilityComponent = require('../AccessibilityComponent.js');

var _AccessibilityComponent2 = _interopRequireDefault(_AccessibilityComponent);

var _KeyboardNavigationHandler = require('../KeyboardNavigationHandler.js');

var _KeyboardNavigationHandler2 = _interopRequireDefault(_KeyboardNavigationHandler);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Show the export menu and focus the first item (if exists).
 *
 * @private
 * @function Highcharts.Chart#showExportMenu
 */
_Globals2.default.Chart.prototype.showExportMenu = function () {
    if (this.exportSVGElements && this.exportSVGElements[0]) {
        this.exportSVGElements[0].element.onclick();
        this.highlightExportItem(0);
    }
};

/**
 * Hide export menu.
 *
 * @private
 * @function Highcharts.Chart#hideExportMenu
 */
_Globals2.default.Chart.prototype.hideExportMenu = function () {
    var chart = this,
        exportList = chart.exportDivElements;

    if (exportList && chart.exportContextMenu) {
        // Reset hover states etc.
        exportList.forEach(function (el) {
            if (el.className === 'highcharts-menu-item' && el.onmouseout) {
                el.onmouseout();
            }
        });
        chart.highlightedExportItemIx = 0;
        // Hide the menu div
        chart.exportContextMenu.hideMenu();
        // Make sure the chart has focus and can capture keyboard events
        chart.container.focus();
    }
};

/**
 * Highlight export menu item by index.
 *
 * @private
 * @function Highcharts.Chart#highlightExportItem
 *
 * @param {number} ix
 *
 * @return {true|undefined}
 */
_Globals2.default.Chart.prototype.highlightExportItem = function (ix) {
    var listItem = this.exportDivElements && this.exportDivElements[ix],
        curHighlighted = this.exportDivElements && this.exportDivElements[this.highlightedExportItemIx],
        hasSVGFocusSupport;

    if (listItem && listItem.tagName === 'DIV' && !(listItem.children && listItem.children.length)) {
        // Test if we have focus support for SVG elements
        hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;

        // Only focus if we can set focus back to the elements after
        // destroying the menu (#7422)
        if (listItem.focus && hasSVGFocusSupport) {
            listItem.focus();
        }
        if (curHighlighted && curHighlighted.onmouseout) {
            curHighlighted.onmouseout();
        }
        if (listItem.onmouseover) {
            listItem.onmouseover();
        }
        this.highlightedExportItemIx = ix;
        return true;
    }
};

/**
 * Try to highlight the last valid export menu item.
 *
 * @private
 * @function Highcharts.Chart#highlightLastExportItem
 */
_Globals2.default.Chart.prototype.highlightLastExportItem = function () {
    var chart = this,
        i;

    if (chart.exportDivElements) {
        i = chart.exportDivElements.length;
        while (i--) {
            if (chart.highlightExportItem(i)) {
                return true;
            }
        }
    }
    return false;
};

/**
 * The MenuComponent class
 *
 * @private
 * @class
 * @name Highcharts.MenuComponent
 * @param {Highcharts.Chart} chart
 *        Chart object
 */
var MenuComponent = function MenuComponent(chart) {
    this.initBase(chart);
    this.init();
};
MenuComponent.prototype = new _AccessibilityComponent2.default();
_Globals2.default.extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */{

    /**
     * Init the component
     */
    init: function init() {
        var chart = this.chart;
        // Hide the export menu from screen readers when it is hidden visually
        this.addEvent(chart, 'exportMenuHidden', function () {
            var menu = this.exportContextMenu;
            if (menu) {
                menu.setAttribute('aria-hidden', true);
            }
        });
    },

    /**
     * Called on each render of the chart. We need to update positioning of the
     * proxy overlay.
     */
    onChartRender: function onChartRender() {
        var component = this,
            chart = this.chart,
            a11yOptions = chart.options.accessibility;

        // Always start with a clean slate
        this.removeElement(this.exportProxyGroup);

        // Set screen reader properties on export menu
        if (chart.options.exporting && chart.options.exporting.enabled !== false && chart.options.exporting.accessibility && chart.options.exporting.accessibility.enabled && chart.exportSVGElements && chart.exportSVGElements[0] && chart.exportSVGElements[0].element) {
            // Set event handler on button if not already done
            var button = chart.exportSVGElements[0],
                buttonElement = button.element,
                oldExportCallback = buttonElement.onclick;
            if (this.wrappedButton !== buttonElement) {
                buttonElement.onclick = function () {
                    oldExportCallback.apply(this, Array.prototype.slice.call(arguments));
                    component.addAccessibleContextMenuAttribs();
                    chart.highlightExportItem(0);
                };
                this.wrappedButton = buttonElement;
            }

            // Proxy button and group
            this.exportProxyGroup = this.addProxyGroup(
            // Wrap in a region div if verbosity is high
            a11yOptions.landmarkVerbosity === 'all' ? {
                'aria-label': chart.langFormat('accessibility.exporting.exportRegionLabel', { chart: chart }),
                'role': 'region'
            } : null);

            this.exportButtonProxy = this.createProxyButton(button, this.exportProxyGroup, {
                'aria-label': chart.langFormat('accessibility.exporting.menuButtonLabel', { chart: chart })
            });
        }
    },

    /**
     * Add ARIA to context menu
     * @private
     */
    addAccessibleContextMenuAttribs: function addAccessibleContextMenuAttribs() {
        var chart = this.chart,
            exportList = chart.exportDivElements,
            contextMenu = chart.exportContextMenu;

        if (exportList && exportList.length) {
            // Set tabindex on the menu items to allow focusing by script
            // Set role to give screen readers a chance to pick up the contents
            exportList.forEach(function (item) {
                if (item.tagName === 'DIV' && !(item.children && item.children.length)) {
                    item.setAttribute('role', 'menuitem');
                    item.setAttribute('tabindex', -1);
                }
            });
            // Set accessibility properties on parent div
            exportList[0].parentNode.setAttribute('role', 'menu');
            exportList[0].parentNode.setAttribute('aria-label', chart.langFormat('accessibility.exporting.chartMenuLabel', { chart: chart }));
        }
        if (contextMenu) {
            this.unhideElementFromScreenReaders(contextMenu);
        }
    },

    /**
     * Get keyboard navigation handler for this component.
     * @return {Highcharts.KeyboardNavigationHandler}
     */
    getKeyboardNavigation: function getKeyboardNavigation() {
        var keys = this.keyCodes,
            chart = this.chart,
            a11yOptions = chart.options.accessibility,
            component = this;

        return new _KeyboardNavigationHandler2.default(chart, {
            keyCodeMap: [
            // Arrow prev handler
            [[keys.left, keys.up], function () {
                var i = chart.highlightedExportItemIx || 0;

                // Try to highlight prev item in list. Highlighting e.g.
                // separators will fail.
                while (i--) {
                    if (chart.highlightExportItem(i)) {
                        return this.response.success;
                    }
                }

                // We failed, so wrap around or move to prev module
                if (a11yOptions.keyboardNavigation.wrapAround) {
                    chart.highlightLastExportItem();
                    return this.response.success;
                }
                return this.response.prev;
            }],

            // Arrow next handler
            [[keys.right, keys.down], function () {
                var i = (chart.highlightedExportItemIx || 0) + 1;

                // Try to highlight next item in list. Highlighting e.g.
                // separators will fail.
                for (; i < chart.exportDivElements.length; ++i) {
                    if (chart.highlightExportItem(i)) {
                        return this.response.success;
                    }
                }

                // We failed, so wrap around or move to next module
                if (a11yOptions.keyboardNavigation.wrapAround) {
                    chart.highlightExportItem(0);
                    return this.response.success;
                }
                return this.response.next;
            }],

            // Click handler
            [[keys.enter, keys.space], function () {
                component.fakeClickEvent(chart.exportDivElements[chart.highlightedExportItemIx]);
                return this.response.success;
            }],

            // ESC handler
            [[keys.esc], function () {
                return this.response.prev;
            }]],

            // Only run exporting navigation if exporting support exists and is
            // enabled on chart
            validate: function validate() {
                return chart.exportChart && chart.options.exporting.enabled !== false && chart.options.exporting.accessibility.enabled !== false;
            },

            // Show export menu
            init: function init(direction) {
                chart.showExportMenu();

                // If coming back to export menu from other module, try to
                // highlight last item in menu
                if (direction < 0) {
                    chart.highlightLastExportItem();
                }
            },

            // Hide the menu
            terminate: function terminate() {
                chart.hideExportMenu();
            }
        });
    }

});

exports.default = MenuComponent;