Untitled

/**
 * @module ds2-electric-range-accessibility
 * @description Electric range component Accessibility Partial
 * @author Martin Dimitrov
 */

define(
    'ds2-electric-range-accessibility',
    [
        'jquery',
        'ds2-accessibility',
        'lazyload'
    ],
    function ($, Accessibility, LazyLoad) {
        'use strict';
        function DS2ElectricRangeAccessibility(element) {
            this.accessibility = new Accessibility(element);

            this.elements = {
                checkboxes: $(element).find('.ds2-electric-range__switch-wrapper input'),
                driverProfileInput: $(element).find('.ds2-electric-range__driving-profile-range input'),
                electricRangeLayer: $('.ds2-electric-range__layer-open'),
                closeBtn: $('.ds2-electric-range__layer-close'),
                layer: $('.ds2-electric-range__layer')
            }

            this.addKeyboardSupportCheckboxes(this.elements.checkboxes);
            this.addKeyboardSupportDrivingProfileInput(this.elements.driverProfileInput);
            this.initLayerMobile()
        }

        DS2ElectricRangeAccessibility.prototype.addKeyboardSupportDrivingProfileInput = function (element) {
            var getLabels = $('.ds2-electric-range__driving-profile-range .electric-range-slider__legend').children().toArray();
            var efficient = $(getLabels[0]).text();
            var moderate = $(getLabels[1]).text();
            var sporty = $(getLabels[2]).text();
            var labels = [efficient, efficient + ' ' + moderate, moderate, moderate + ' ' + sporty, sporty];
            var input = $(element);
            $(input).on('change', function (event) {
                var value = Number(event.target.value);
                $(input).attr('aria-valuetext', labels[value - 1]);
            });
        }

        DS2ElectricRangeAccessibility.prototype.addKeyboardSupportCheckboxes = function (elements) {
            var self = this;
            elements.each(function () {
                var currentCheckBox = $(this)[0];
                self.accessibility.addKeyListener('up', {
                    element: currentCheckBox,
                    keyCodes: [self.accessibility.keyCodes.ENTER],
                    fn: function () {
                        var checked = $(currentCheckBox).is(":checked");
                        $(currentCheckBox).prop('checked', checked = !checked);
                    },
                });
            });
        }

        DS2ElectricRangeAccessibility.prototype.initLayerMobile = function () {
            var self = this;
            var electricRangeOpenLayer = document.querySelector('.ds2-electric-range__layer');
            var electircRangeFirstChild = self.elements.electricRangeLayer.toArray()[0];
            var layerListItems = $('.ds2-electric-range__layer .ds2-electric-range__layer-item').toArray();

            // key listeners

            // make elements active
            self.accessibility.addKeyListener('up', {
                element: electircRangeFirstChild,
                keyCodes: [self.accessibility.keyCodes.ENTER],
                fn: function () {
                    new LazyLoad({container: electricRangeOpenLayer});
                    $(electricRangeOpenLayer).addClass('is-active');
                    self.accessibility.focusElement(layerListItems[0]);
                    var items = $('.ds2-electric-range__layer.is-active').find('.ds2-electric-range__layer-item');
                    items.each(function(){
                        self.accessibility.makeElementActive($(this));
                    });
                    self.accessibility.makeElementActive(self.elements.closeBtn);

                    // set keyboard trap
                    self.accessibility.activateKeyboardTrap({
                        container: $('.ds2-electric-range__layer.is-active'),
                        includeContainer: true,
                    });
                },
            });

            // exit button key listener
            self.accessibility.addKeyListener('up', {
                element: this.elements.closeBtn,
                keyCodes: [self.accessibility.keyCodes.ENTER],
                fn: function () {
                    var items = $('.ds2-electric-range__layer.is-active').find('.ds2-electric-range__layer-item');
                    $(electricRangeOpenLayer).removeClass('is-active');
                    items.each(function(){
                        self.accessibility.makeElementInactive($(this));
                    });
                    self.accessibility.makeElementInactive(self.elements.closeBtn);
                },
            });
        }


        return DS2ElectricRangeAccessibility;
    });