accessibility-comms
Version:
add accessibility to your website
683 lines (680 loc) • 79.9 kB
JavaScript
'use strict';
// Do not delete this as it allows importing the package with other projects
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.Accessibility = void 0;
require("regenerator-runtime/runtime.js");
var _common = require("./common");
var _accessibility = require("./interfaces/accessibility.interface");
var _menuInterface = require("./menu-interface");
var _storage = require("./storage");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Accessibility = /*#__PURE__*/function () {
// SpeechRecognition;
function Accessibility() {
var _this = this;
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Accessibility);
_defineProperty(this, "_isReading", void 0);
_defineProperty(this, "_common", void 0);
_defineProperty(this, "_storage", void 0);
_defineProperty(this, "_options", void 0);
_defineProperty(this, "_sessionState", void 0);
_defineProperty(this, "_htmlInitFS", void 0);
_defineProperty(this, "_body", void 0);
_defineProperty(this, "_html", void 0);
_defineProperty(this, "_icon", void 0);
_defineProperty(this, "_menu", void 0);
_defineProperty(this, "_htmlOrgFontSize", void 0);
_defineProperty(this, "_stateValues", void 0);
_defineProperty(this, "_recognition", void 0);
_defineProperty(this, "_speechToTextTarget", void 0);
_defineProperty(this, "_onKeyDownBind", void 0);
_defineProperty(this, "menuInterface", void 0);
_defineProperty(this, "options", void 0);
this._common = new _common.Common();
this._storage = new _storage.Storage();
this._options = this.defaultOptions;
options = this.deleteOppositesIfDefined(options);
this.options = this._common.extend(this._options, options);
this.addModuleOrderIfNotDefined();
// Consider adding this:
// if (options) {
// if (!options.textToSpeechLang && document.querySelector('html').getAttribute('lang')) {
// this.options.textToSpeechLang = document.querySelector('html').getAttribute('lang')
// }
// }
this.disabledUnsupportedFeatures();
this._onKeyDownBind = this.onKeyDown.bind(this);
this._sessionState = {
textSize: 0,
textSpace: 0,
lineHeight: 0,
invertColors: false,
grayHues: false,
underlineLinks: false,
bigCursor: false,
readingGuide: false
};
if (this.options.icon.useEmojis) {
this.fontFallback();
this.build();
} else {
this._common.injectIconsFont(this.options.icon.fontFaceSrc, function (hasError) {
_this.build();
if (!_this.options.icon.forceFont) {
setTimeout(function () {
_this._common.isFontLoaded(_this.options.icon.fontFamily, function (isLoaded) {
if (!isLoaded || hasError) {
_this._common.warn("".concat(_this.options.icon.fontFamily, " font was not loaded, using emojis instead"));
_this.fontFallback();
_this.destroy();
_this.build();
}
});
});
}
});
}
if (this.options.modules.speechToText) {
window.addEventListener('beforeunload', function () {
if (_this._isReading) {
window.speechSynthesis.cancel();
_this._isReading = false;
}
});
}
}
_createClass(Accessibility, [{
key: "stateValues",
get: function get() {
return this._stateValues;
},
set: function set(value) {
this._stateValues = value;
}
}, {
key: "html",
get: function get() {
return this._html;
}
}, {
key: "body",
get: function get() {
return this._body;
}
}, {
key: "sessionState",
get: function get() {
return this._sessionState;
},
set: function set(value) {
this._sessionState = value;
}
}, {
key: "common",
get: function get() {
return this._common;
}
}, {
key: "recognition",
get: function get() {
return this._recognition;
}
}, {
key: "isReading",
get: function get() {
return this._isReading;
},
set: function set(value) {
this._isReading = value;
}
// Default options
}, {
key: "defaultOptions",
get: function get() {
var res = {
icon: {
position: {
bottom: {
size: 50,
units: 'px'
},
right: {
size: 10,
units: 'px'
},
type: 'fixed'
},
dimensions: {
width: {
size: 50,
units: 'px'
},
height: {
size: 50,
units: 'px'
}
},
zIndex: '9999',
backgroundColor: '#4054b2',
color: '#fff',
img: 'accessibility',
circular: false,
circularBorder: false,
fontFaceSrc: ['https://fonts.googleapis.com/icon?family=Material+Icons'],
fontFamily: this._common.getFixedFont('Material Icons'),
fontClass: 'material-icons',
useEmojis: false
},
hotkeys: {
enabled: false,
helpTitles: true,
keys: {
toggleMenu: ['ctrlKey', 'altKey', 65],
invertColors: ['ctrlKey', 'altKey', 73],
grayHues: ['ctrlKey', 'altKey', 71],
underlineLinks: ['ctrlKey', 'altKey', 85],
bigCursor: ['ctrlKey', 'altKey', 67],
readingGuide: ['ctrlKey', 'altKey', 82],
textToSpeech: ['ctrlKey', 'altKey', 84],
speechToText: ['ctrlKey', 'altKey', 83],
disableAnimations: ['ctrlKey', 'altKey', 81]
}
},
buttons: {
font: {
size: 18,
units: 'px'
}
},
guide: {
cBorder: '#20ff69',
cBackground: '#000000',
height: '12px'
},
menu: {
dimensions: {
width: {
size: 25,
units: 'vw'
},
height: {
size: 'auto',
units: ''
}
},
fontFamily: 'RobotoDraft, Roboto, sans-serif, Arial'
},
suppressCssInjection: false,
labels: {
resetTitle: 'Reset',
closeTitle: 'Close',
menuTitle: 'Accessibility Options',
increaseText: 'increase text size',
decreaseText: 'decrease text size',
increaseTextSpacing: 'increase text spacing',
decreaseTextSpacing: 'decrease text spacing',
invertColors: 'invert colors',
grayHues: 'gray hues',
bigCursor: 'big cursor',
readingGuide: 'reading guide',
underlineLinks: 'underline links',
textToSpeech: 'text to speech',
speechToText: 'speech to text',
disableAnimations: 'disable animations',
increaseLineHeight: 'increase line height',
decreaseLineHeight: 'decrease line height',
hotkeyPrefix: 'Hotkey: '
},
textPixelMode: false,
textEmlMode: true,
animations: {
buttons: true
},
modules: {
increaseText: true,
decreaseText: true,
increaseTextSpacing: true,
decreaseTextSpacing: true,
increaseLineHeight: true,
decreaseLineHeight: true,
invertColors: true,
grayHues: true,
bigCursor: true,
readingGuide: true,
underlineLinks: true,
textToSpeech: true,
speechToText: true,
disableAnimations: true,
iframeModals: true,
customFunctions: true
},
modulesOrder: [],
session: {
persistent: true
},
iframeModals: [],
customFunctions: [],
statement: {
url: ''
},
feedback: {
url: ''
},
language: {
textToSpeechLang: '',
speechToTextLang: ''
}
};
var keys = Object.keys(_accessibility.AccessibilityModulesType);
keys.forEach(function (key, index) {
var keyNum = parseInt(key);
if (!isNaN(keyNum)) {
res.modulesOrder.push({
type: keyNum,
order: keyNum
});
}
});
return res;
}
}, {
key: "initFontSize",
value: function initFontSize() {
// store this values only once.
if (!this._htmlInitFS) {
var htmlInitFS = this._common.getFormattedDim(getComputedStyle(this._html).fontSize);
var bodyInitFS = this._common.getFormattedDim(getComputedStyle(this._body).fontSize);
this._html.style.fontSize = htmlInitFS.size / 16 * 100 + '%';
this._htmlOrgFontSize = this._html.style.fontSize;
this._body.style.fontSize = bodyInitFS.size / htmlInitFS.size + 'em';
}
}
}, {
key: "fontFallback",
value: function fontFallback() {
this.options.icon.useEmojis = true;
this.options.icon.fontFamily = null;
this.options.icon.img = '♿';
this.options.icon.fontClass = '';
}
}, {
key: "deleteOppositesIfDefined",
value: function deleteOppositesIfDefined(options) {
if (options.icon && options.icon.position) {
if (options.icon.position.left) {
delete this._options.icon.position.right;
this._options.icon.position.left = options.icon.position.left;
}
if (options.icon.position.top) {
delete this._options.icon.position.bottom;
this._options.icon.position.top = options.icon.position.top;
}
}
return options;
}
}, {
key: "addModuleOrderIfNotDefined",
value: function addModuleOrderIfNotDefined() {
var _this2 = this;
this.defaultOptions.modulesOrder.forEach(function (mo) {
if (!_this2.options.modulesOrder.find(function (imo) {
return imo.type === mo.type;
})) _this2.options.modulesOrder.push(mo);
});
}
}, {
key: "disabledUnsupportedFeatures",
value: function disabledUnsupportedFeatures() {
if (!('webkitSpeechRecognition' in window) || location.protocol !== 'https:') {
this._common.warn('speech to text isn\'t supported in this browser or in http protocol (https required)');
this.options.modules.speechToText = false;
}
var windowAny = window;
if (!windowAny.SpeechSynthesisUtterance || !windowAny.speechSynthesis) {
this._common.warn('text to speech isn\'t supported in this browser');
this.options.modules.textToSpeech = false;
}
}
}, {
key: "injectCss",
value: function injectCss() {
var iconTop = '7px',
iconLeft = '5px';
var css = "\n ._access-scrollbar::-webkit-scrollbar-track, .mat-autocomplete-panel::-webkit-scrollbar-track, .mat-tab-body-content::-webkit-scrollbar-track, .mat-select-panel:not([class*='mat-elevation-z'])::-webkit-scrollbar-track, .mat-menu-panel::-webkit-scrollbar-track {\n -webkit-box-shadow: var(--_access-scrollbar-track-box-shadow, inset 0 0 6px rgba(0,0,0,0.3));\n background-color: var(--_access-scrollbar-track-background-color, #F5F5F5);\n }\n ._access-scrollbar::-webkit-scrollbar, .mat-autocomplete-panel::-webkit-scrollbar, .mat-tab-body-content::-webkit-scrollbar, .mat-select-panel:not([class*='mat-elevation-z'])::-webkit-scrollbar, .mat-menu-panel::-webkit-scrollbar {\n width: var(--_access-scrollbar-width, 6px);\n background-color: var(--_access-scrollbar-background-color, #F5F5F5);\n }\n ._access-scrollbar::-webkit-scrollbar-thumb, .mat-autocomplete-panel::-webkit-scrollbar-thumb, .mat-tab-body-content::-webkit-scrollbar-thumb, .mat-select-panel:not([class*='mat-elevation-z'])::-webkit-scrollbar-thumb, .mat-menu-panel::-webkit-scrollbar-thumb {\n background-color: var(--_access-scrollbar-thumb-background-color, #999999);\n }\n ._access-icon {\n position: ".concat(this.options.icon.position.type, ";\n background-repeat: no-repeat;\n background-size: contain;\n cursor: pointer;\n opacity: 0;\n transition-duration: .35s;\n -moz-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n ").concat(!this.options.icon.useEmojis ? 'box-shadow: 1px 1px 5px rgba(0,0,0,.5);' : '', "\n transform: ").concat(!this.options.icon.useEmojis ? 'scale(1)' : 'skewX(14deg)', ";\n }\n ._access-icon:hover {\n ") + (this.options.animations.buttons && !this.options.icon.useEmojis ? "\n box-shadow: 1px 1px 10px rgba(0,0,0,.9);\n transform: scale(1.1);\n " : '') + "\n }\n .circular._access-icon {\n border-radius: 50%;\n border: .5px solid white;\n }\n " + (this.options.animations.buttons && this.options.icon.circularBorder ? "\n .circular._access-icon:hover {\n border: 5px solid white;\n border-style: double;\n font-size: 35px!important;\n vertical-align: middle;\n padding-top: 2px;\n text-align: center;\n }\n " : '') + "\n .access_read_guide_bar {\n box-sizing: border-box;\n background: ".concat(this.options.guide.cBackground, ";\n width: 100%!important;\n min-width: 100%!important;\n position: fixed!important;\n height: ").concat(this.options.guide.height, " !important;\n border: solid 3px ").concat(this.options.guide.cBorder, ";\n border-radius: 5px;\n top: 15px;\n z-index: 2147483647;\n }\n .access-high-contrast * {\n background-color: #000 !important;\n background-image: none !important;\n border-color: #fff !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n color: #fff !important;\n text-indent: 0 !important;\n text-shadow: none !important;\n }\n ._access-menu {\n -moz-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n position: fixed;\n width: ").concat(this.options.menu.dimensions.width.size + this.options.menu.dimensions.width.units, ";\n height: ").concat(this.options.menu.dimensions.height.size + this.options.menu.dimensions.height.units, ";\n transition-duration: var(--_access-menu-transition-duration, .35s);\n z-index: ").concat(this.options.icon.zIndex + 1, ";\n opacity: 1;\n background-color: var(--_access-menu-background-color, #fff);\n color: var(--_access-menu-color, #000);\n border-radius: var(--_access-menu-border-radius, 3px);\n border: var(--_access-menu-border, solid 1px #f1f0f1);\n font-family: ").concat(this.options.menu.fontFamily, ";\n min-width: var(--_access-menu-min-width, 300px);\n box-shadow: var(--_access-menu-box-shadow, 0px 0px 1px #aaa);\n max-height: calc(100vh - 80px);\n ").concat(getComputedStyle(this._body).direction === 'rtl' ? 'text-indent: -5px' : '', "\n }\n ._access-menu.close {\n z-index: -1;\n width: 0;\n opacity: 0;\n background-color: transparent;\n }\n ._access-menu.bottom {\n bottom: 0;\n }\n ._access-menu.top {\n top: 0;\n }\n ._access-menu.left {\n left: 0;\n }\n ._access-menu.close.left {\n left: -").concat(this.options.menu.dimensions.width.size + this.options.menu.dimensions.width.units, ";\n }\n ._access-menu.right {\n right: 0;\n }\n ._access-menu.close.right {\n right: -").concat(this.options.menu.dimensions.width.size + this.options.menu.dimensions.width.units, ";\n }\n ._access-menu ._text-center {\n font-size: var(--_access-menu-header-font-size, 22px);\n font-weight: var(--_access-menu-header-font-weight, nornal);\n margin: var(--_access-menu-header-margin, 20px 0 10px);\n padding: 0;\n color: var(--_access-menu-header-color, rgba(0,0,0,.87));\n letter-spacing: var(--_access-menu-header-letter-spacing, initial);\n word-spacing: var(--_access-menu-header-word-spacing, initial);\n text-align: var(--_access-menu-header-text-align, center);\n }\n ._access-menu ._menu-close-btn {\n left: 5px;\n color: #d63c3c;\n transition: .3s ease;\n transform: rotate(0deg);\n font-style: normal !important;\n }\n ._access-menu ._menu-reset-btn:hover,._access-menu ._menu-close-btn:hover {\n ").concat(this.options.animations.buttons ? 'transform: rotate(180deg);' : '', "\n }\n ._access-menu ._menu-reset-btn {\n right: 5px;\n color: #4054b2;\n transition: .3s ease;\n transform: rotate(0deg);\n font-style: normal !important;\n }\n ._access-menu ._menu-btn {\n position: absolute;\n top: 5px;\n cursor: pointer;\n font-size: 24px !important;\n font-weight: bold;\n background: transparent;\n border: none;\n }\n ._access-menu ul {\n padding: 0 0 5px;\n position: relative;\n font-size: var(--_access-menu-font-size, 18px);\n margin: 0;\n overflow: auto;\n max-height: var(--_access-menu-max-height, calc(100vh - 145px));\n display: flex;\n flex-flow: column;\n gap: 5px;\n }\n html._access_cursor * {\n cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyOS4xODhweCIgaGVpZ2h0PSI0My42MjVweCIgdmlld0JveD0iMCAwIDI5LjE4OCA0My42MjUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5LjE4OCA0My42MjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0Q5REFEOSIgc3Ryb2tlLXdpZHRoPSIxLjE0MDYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyLjgsNC41NDkgMjYuODQ3LDE5LjkwMiAxNi45NjQsMjIuNzAxIDI0LjIzOSwzNy43NDkgMTguMjc4LDQyLjAxNyA5Ljc0MSwzMC43MjQgMS4xMzgsMzUuODA5ICIvPjxnPjxnPjxnPjxwYXRoIGZpbGw9IiMyMTI2MjciIGQ9Ik0yOS4xNzUsMjEuMTU1YzAuMDcxLTAuNjEzLTAuMTY1LTEuMjUzLTAuNjM1LTEuNTczTDIuMTY1LDAuMjU4Yy0wLjQyNC0wLjMyLTAuOTg4LTAuMzQ2LTEuNDM1LTAuMDUzQzAuMjgyLDAuNDk3LDAsMS4wMywwLDEuNjE3djM0LjE3MWMwLDAuNjEzLDAuMzA2LDEuMTQ2LDAuNzc2LDEuNDM5YzAuNDcxLDAuMjY3LDEuMDU5LDAuMjEzLDEuNDgyLTAuMTZsNy40ODItNi4zNDRsNi44NDcsMTIuMTU1YzAuMjU5LDAuNDgsMC43MjksMC43NDYsMS4yLDAuNzQ2YzAuMjM1LDAsMC40OTQtMC4wOCwwLjcwNi0wLjIxM2w2Ljk4OC00LjU4NWMwLjMyOS0wLjIxMywwLjU2NS0wLjU4NiwwLjY1OS0xLjAxM2MwLjA5NC0wLjQyNiwwLjAyNC0wLjg4LTAuMTg4LTEuMjI2bC02LjM3Ni0xMS4zODJsOC42MTEtMi43NDVDMjguNzA1LDIyLjI3NCwyOS4xMDUsMjEuNzY4LDI5LjE3NSwyMS4xNTV6IE0xNi45NjQsMjIuNzAxYy0wLjQyNCwwLjEzMy0wLjc3NiwwLjUwNi0wLjk0MSwwLjk2Yy0wLjE2NSwwLjQ4LTAuMTE4LDEuMDEzLDAuMTE4LDEuNDM5bDYuNTg4LDExLjc4MWwtNC41NDEsMi45ODVsLTYuODk0LTEyLjMxNWMtMC4yMTItMC4zNzMtMC41NDEtMC42NC0wLjk0MS0wLjcyYy0wLjA5NC0wLjAyNy0wLjE2NS0wLjAyNy0wLjI1OS0wLjAyN2MtMC4zMDYsMC0wLjU4OCwwLjEwNy0wLjg0NywwLjMyTDIuOCwzMi41OVY0LjU0OWwyMS41OTksMTUuODA2TDE2Ljk2NCwyMi43MDF6Ii8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==),auto!important;\n }\n .texting {\n height:50px;\n text-align: center;\n border: solid 2.4px #f1f0f1;\n border-radius: 4px;\n width: 100%;\n display: inline-block;\n }\n .screen-reader-wrapper {\n margin: 0;\n position: absolute;\n bottom: -4px;\n width: calc(100% - 2px);\n left: 1px;\n }\n .screen-reader-wrapper-step-1, .screen-reader-wrapper-step-2,.screen-reader-wrapper-step-3 {\n float: left;\n background: var(--_access-menu-background-color, #fff);\n width: 33.33%;\n height: 3px;\n border-radius: 10px;\n }\n .screen-reader-wrapper-step-1.active, .screen-reader-wrapper-step-2.active,.screen-reader-wrapper-step-3.active {\n background: var(--_access-menu-item-button-background, #f9f9f9);\n }\n ._access-menu ul li {\n position: relative;\n list-style-type: none;\n -ms-user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n margin: 0 5px 0 8px;\n font-size: ").concat(this.options.buttons.font.size + this.options.buttons.font.units, " !important;\n line-height: ").concat(this.options.buttons.font.size + this.options.buttons.font.units, " !important;\n color: var(--_access-menu-item-color, rgba(0,0,0,.6));\n letter-spacing: var(--_access-menu-item-letter-spacing, initial);\n word-spacing: var(--_access-menu-item-word-spacing, initial);\n width: calc(100% - 17px);\n }\n ._access-menu ul li button {\n background: var(--_access-menu-item-button-background, #f9f9f9);\n padding: var(--_access-menu-item-button-padding, 10px 0);\n width: 100%;\n text-indent: var(--_access-menu-item-button-text-indent, 35px);\n text-align: start;\n position: relative;\n transition-duration: var(--_access-menu-item-button-transition-duration, .35s);\n transition-timing-function: var(--_access-menu-item-button-transition-timing-function, ease-in-out);\n border: var(--_access-menu-item-button-border, solid 1px #f1f0f1);\n border-radius: var(--_access-menu-item-button-border-radius, 4px);\n cursor: pointer;\n }\n ._access-menu ul li.position {\n display: inline-block;\n width: auto;\n }\n ._access-menu ul.before-collapse li button {\n opacity: 0.05;\n }\n ._access-menu ul li button.active, ._access-menu ul li button.active:hover {\n background-color: var(--_access-menu-item-button-active-background-color, #000);\n }\n ._access-menu div.active {\n color: var(--_access-menu-div-active-color, #fff);\n background-color: var(--_access-menu-div-active-background-color, #000);\n }\n ._access-menu ul li button.active, ._access-menu ul li button.active:hover, ._access-menu ul li button.active:before, ._access-menu ul li button.active:hover:before {\n color: var(--_access-menu-item-button-active-color, #fff);\n }\n ._access-menu ul li button:hover {\n color: var(--_access-menu-item-button-hover-color, rgba(0,0,0,.8));\n background-color: var(--_access-menu-item-button-hover-background-color, #eaeaea);\n }\n ._access-menu ul li.not-supported {\n display: none;\n }\n ._access-menu ul li button:before {\n content: ' ';\n ").concat(!this.options.icon.useEmojis ? 'font-family: ' + this._common.getFixedPseudoFont(this.options.icon.fontFamily) + ';' : '', "\n text-rendering: optimizeLegibility;\n font-feature-settings: \"liga\" 1;\n font-style: normal;\n text-transform: none;\n line-height: ").concat(!this.options.icon.useEmojis ? '1' : '1.1', ";\n font-size: ").concat(!this.options.icon.useEmojis ? '24px' : '20px', " !important;\n width: 30px;\n height: 30px;\n display: inline-block;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n top: 7px;\n left: 5px;\n position: absolute;\n color: var(--_access-menu-item-icon-color, rgba(0,0,0,.6));\n direction: ltr;\n text-indent: 0;\n transition-duration: .35s;\n transition-timing-function: ease-in-out;\n }\n @keyframes _access-dialog-backdrop {\n 0% {\n background: var(--_access-menu-dialog-backdrop-background-start, rgba(0, 0, 0, 0.1))\n }\n 100% {\n background: var(--_access-menu-dialog-backdrop-background-end, rgba(0, 0, 0, 0.5))\n }\n }\n dialog._access::backdrop, dialog._access {\n transition-duration: var(--_access-menu-dialog-backdrop-transition-duration, 0.35s);\n transition-timing-function: var(--_access-menu-dialog-backdrop-transition-timing-function, ease-in-out);\n }\n dialog._access:modal {\n border-color: transparent;\n border-width: 0;\n padding: 0;\n }\n dialog._access[open]::backdrop {\n background: var(--_access-menu-dialog-backdrop-background-end, rgba(0, 0, 0, 0.5))\n animation: _access-dialog-backdrop var(--_access-menu-dialog-backdrop-transition-duration, 0.35s) ease-in-out;\n }\n dialog._access.closing[open]::backdrop {\n background: var(--_access-menu-dialog-backdrop-background-start, rgba(0, 0, 0, 0.1));\n }\n dialog._access.closing[open] {\n opacity: 0;\n }\n ._access-menu ul li button svg path {\n fill: var(--_access-menu-item-icon-color, rgba(0,0,0,.6));\n transition-duration: .35s;\n transition-timing-function: ease-in-out;\n }\n ._access-menu ul li button:hover svg path {\n fill: var(--_access-menu-item-hover-icon-color, rgba(0,0,0,.8));\n }\n ._access-menu ul li button.active svg path {\n fill: var(--_access-menu-item-active-icon-color, #fff);\n }\n ._access-menu ul li:hover button:before {\n color: var(--_access-menu-item-hover-icon-color, rgba(0,0,0,.8));\n }\n ._access-menu ul li button.active button:before {\n color: var(--_access-menu-item-active-icon-color, #fff);\n }\n ._access-menu ul li button[data-access-action=\"increaseText\"]:before {\n content: var(--_access-menu-item-icon-increase-text, ").concat(!this.options.icon.useEmojis ? '"zoom_in"' : '"🔼"', ");\n transform: var(--_access-menu-item-icon-increase-text-transform, unset);\n top: var(--_access-menu-item-icon-increase-text-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-increase-text-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"decreaseText\"]:before {\n content: var(--_access-menu-item-icon-decrease-text, ").concat(!this.options.icon.useEmojis ? '"zoom_out"' : '"🔽"', ");\n transform: var(--_access-menu-item-icon-decrease-text-spacing-transform, unset);\n top: var(--_access-menu-item-icon-decrease-text-spacing-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-decrease-text-spacing-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"increaseTextSpacing\"]:before {\n content: var(--_access-menu-item-icon-increase-text-spacing, ").concat(!this.options.icon.useEmojis ? '"unfold_more"' : '"🔼"', ");\n transform: var(--_access-menu-item-icon-increase-text-spacing-transform, rotate(90deg) translate(-7px, 2px));\n top: var(--_access-menu-item-icon-increase-text-spacing-top, 14px);\n left: var(--_access-menu-item-icon-increase-text-spacing-left, 0);\n }\n ._access-menu ul li button[data-access-action=\"decreaseTextSpacing\"]:before {\n content: var(--_access-menu-item-icon-decrease-text-spacing, ").concat(!this.options.icon.useEmojis ? '"unfold_less"' : '"🔽"', ");\n transform: var(--_access-menu-item-icon-decrease-text-spacing-transform, rotate(90deg) translate(-7px, 2px));\n top: var(--_access-menu-item-icon-decrease-text-spacing-top, 14px);\n left: var(--_access-menu-item-icon-decrease-text-spacing-left, 0);\n }\n ._access-menu ul li button[data-access-action=\"invertColors\"]:before {\n content: var(--_access-menu-item-icon-invert-colors, ").concat(!this.options.icon.useEmojis ? '"invert_colors"' : '"🎆"', ");\n transform: var(--_access-menu-item-icon-invert-colors-transform, unset);\n top: var(--_access-menu-item-icon-invert-colors-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-invert-colors-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"grayHues\"]:before {\n content: var(--_access-menu-item-icon-gray-hues, ").concat(!this.options.icon.useEmojis ? '"format_color_reset"' : '"🌫️"', ");\n transform: var(--_access-menu-item-icon-gray-hues-transform, unset);\n top: var(--_access-menu-item-icon-gray-hues-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-gray-hues-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"underlineLinks\"]:before {\n content: var(--_access-menu-item-icon-underline-links, ").concat(!this.options.icon.useEmojis ? '"format_underlined"' : '"🔗"', ");\n transform: var(--_access-menu-item-icon-underline-links-transform, unset);\n top: var(--_access-menu-item-icon-underline-links-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-underline-links-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"bigCursor\"]:before {\n /*content: 'touch_app';*/\n content: var(--_access-menu-item-icon-big-cursor, inherit);\n transform: var(--_access-menu-item-icon-big-cursor-transform, unset);\n top: var(--_access-menu-item-icon-big-cursor-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-big-cursor-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"readingGuide\"]:before {\n content: var(--_access-menu-item-icon-reading-guide, ").concat(!this.options.icon.useEmojis ? '"border_horizontal"' : '"↔️"', ");\n transform: var(--_access-menu-item-icon-reading-guide-transform, unset);\n top: var(--_access-menu-item-icon-reading-guide-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-reading-guide-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"textToSpeech\"]:before {\n content: var(--_access-menu-item-icon-text-to-speech, ").concat(!this.options.icon.useEmojis ? '"record_voice_over"' : '"⏺️"', ");\n transform: var(--_access-menu-item-icon-text-to-speech-transform, unset);\n top: var(--_access-menu-item-icon-text-to-speech-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-text-to-speech-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"speechToText\"]:before {\n content: var(--_access-menu-item-icon-speech-to-text, ").concat(!this.options.icon.useEmojis ? '"mic"' : '"🎤"', ");\n transform: var(--_access-menu-item-icon-speech-to-text-transform, unset);\n top: var(--_access-menu-item-icon-speech-to-text-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-speech-to-text-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"disableAnimations\"]:before {\n content: var(--_access-menu-item-icon-disable-animations, ").concat(!this.options.icon.useEmojis ? '"animation"' : '"🏃♂️"', ");\n transform: var(--_access-menu-item-icon-disable-animations-transform, unset);\n top: var(--_access-menu-item-icon-disable-animations-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-disable-animations-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"iframeModals\"]:before {\n content: var(--_access-menu-item-icon-iframe-modals, ").concat(!this.options.icon.useEmojis ? '"policy"' : '"⚖️"', ");\n transform: var(--_access-menu-item-icon-iframe-transform, unset);\n top: var(--_access-menu-item-icon-iframe-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-iframe-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"customFunctions\"]:before {\n content: var(--_access-menu-item-icon-custom-functions, ").concat(!this.options.icon.useEmojis ? '"psychology_alt"' : '"❓"', ");\n transform: var(--_access-menu-item-icon-custom-functions-transform, unset);\n top: var(--_access-menu-item-icon-custom-functions-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-custom-functions-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"increaseLineHeight\"]:before {\n content: var(--_access-menu-item-icon-increase-line-height, ").concat(!this.options.icon.useEmojis ? '"unfold_more"' : '"🔼"', ");\n transform: var(--_access-menu-item-icon-increase-line-height-transform, unset);\n top: var(--_access-menu-item-icon-increase-line-height-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-increase-line-height-left, ").concat(iconLeft, ");\n }\n ._access-menu ul li button[data-access-action=\"decreaseLineHeight\"]:before {\n content: var(--_access-menu-item-icon-decrease-line-height, ").concat(!this.options.icon.useEmojis ? '"unfold_less"' : '"🔽"', ");\n transform: var(--_access-menu-item-icon-decrease-line-height-transform, unset);\n top: var(--_access-menu-item-icon-decrease-line-height-top, ").concat(iconTop, ");\n left: var(--_access-menu-item-icon-decrease-line-height-left, ").concat(iconLeft, ");\n }");
var className = Accessibility.CSS_CLASS_NAME;
this._common.injectStyle(css, {
className: className
});
this._common.deployedObjects.set(".".concat(className), false);
}
}, {
key: "removeCSS",
value: function removeCSS() {
var existing = document.querySelector(".".concat(Accessibility.CSS_CLASS_NAME));
if (existing) existing.remove();
}
}, {
key: "injectIcon",
value: function injectIcon() {
var fontSize = this.options.icon.dimensions.width.size * 0.8;
var lineHeight = this.options.icon.dimensions.width.size * 0.9;
var textIndent = this.options.icon.dimensions.width.size * 0.1;
var iStyle = "width: ".concat(this.options.icon.dimensions.width.size + this.options.icon.dimensions.width.units, "\n ;height: ").concat(this.options.icon.dimensions.height.size + this.options.icon.dimensions.height.units, "\n ;font-size: ").concat(fontSize + this.options.icon.dimensions.width.units, "\n ;line-height: ").concat(lineHeight + this.options.icon.dimensions.width.units, "\n ;text-indent: ").concat(textIndent + this.options.icon.dimensions.width.units, "\n ;background-color: ").concat(!this.options.icon.useEmojis ? this.options.icon.backgroundColor : 'transparent', ";color: ").concat(this.options.icon.color);
for (var i in this.options.icon.position) {
var pos = this.options.icon.position;
pos = pos[i];
iStyle += ';' + i + ':' + pos.size + pos.units;
}
iStyle += ";z-index: ".concat(this.options.icon.zIndex);
var className = "_access-icon ".concat(this.options.icon.fontClass, " _access") + (this.options.icon.circular ? ' circular' : '');
var iconElem = this._common.jsonToHtml({
type: 'i',
attrs: {
'class': className,
'style': iStyle,
'title': this.options.hotkeys.enabled ? this.parseKeys(this.options.hotkeys.keys.toggleMenu) : this.options.labels.menuTitle,
'tabIndex': 0
},
children: [{
type: '#text',
text: this.options.icon.img
}]
});
this._body.appendChild(iconElem);
this._common.deployedObjects.set('._access-icon', false);
return iconElem;
}
}, {
key: "parseKeys",
value: function parseKeys(arr) {
return this.options.hotkeys.enabled ? this.options.hotkeys.helpTitles ? this.options.labels.hotkeyPrefix + arr.map(function (val) {
return Number.isInteger(val) ? String.fromCharCode(val).toLowerCase() : val.replace('Key', '');
}).join('+') : '' : '';
}
}, {
key: "injectMenu",
value: function injectMenu() {
var _this3 = this;
var json = {
type: 'div',
attrs: {
'class': '_access-menu close _access'
},
children: [{
type: 'p',
attrs: {
'class': '_text-center',
'role': 'presentation'
},
children: [{
type: 'button',
attrs: {
'class': "_menu-close-btn _menu-btn ".concat(this.options.icon.fontClass),
'title': this.options.hotkeys.enabled ? this.parseKeys(this.options.hotkeys.keys.toggleMenu) : this.options.labels.closeTitle
},
children: [{
type: '#text',
text: "".concat(!this.options.icon.useEmojis ? 'close' : 'X')
}]
}, {
type: '#text',
text: this.options.labels.menuTitle
}, {
type: 'button',
attrs: {
'class': "_menu-reset-btn _menu-btn ".concat(this.options.icon.fontClass),
'title': this.options.labels.resetTitle
},
children: [{
type: '#text',
text: "".concat(!this.options.icon.useEmojis ? 'refresh' : '♲')
}]
}]
}, {
type: 'ul',
attrs: {
'class': this.options.animations.buttons ? 'before-collapse _access-scrollbar' : '_access-scrollbar'
},
children: [{
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'increaseText',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.increaseText
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'decreaseText',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.decreaseText
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'increaseTextSpacing',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.increaseTextSpacing
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'decreaseTextSpacing',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.decreaseTextSpacing
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'increaseLineHeight',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.increaseLineHeight
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'decreaseLineHeight',
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.decreaseLineHeight
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'invertColors',
'title': this.parseKeys(this.options.hotkeys.keys.invertColors),
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.invertColors
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'grayHues',
'title': this.parseKeys(this.options.hotkeys.keys.grayHues),
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.grayHues
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'underlineLinks',
'title': this.parseKeys(this.options.hotkeys.keys.underlineLinks),
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.underlineLinks
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'bigCursor',
'title': this.parseKeys(this.options.hotkeys.keys.bigCursor),
'tabIndex': '-1'
},
children: [{
type: 'div',
attrs: {
'id': 'iconBigCursor'
}
}, {
type: '#text',
text: this.options.labels.bigCursor
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'readingGuide',
'title': this.parseKeys(this.options.hotkeys.keys.readingGuide),
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.readingGuide
}]
}]
}, {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'disableAnimations',
'title': this.parseKeys(this.options.hotkeys.keys.disableAnimations),
'tabIndex': '-1'
},
children: [{
type: '#text',
text: this.options.labels.disableAnimations
}]
}]
}]
}]
};
if (this.options.iframeModals) {
this.options.iframeModals.forEach(function (im, i) {
var btn = {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'iframeModals',
'data-access-url': im.iframeUrl
},
children: [{
type: '#text',
text: im.buttonText
}]
}]
};
var icon = null;
if (im.icon && !_this3.options.icon.useEmojis) icon = im.icon;else if (im.emoji && _this3.options.icon.useEmojis) icon = im.emoji;
if (icon) {
btn.children[0].attrs['data-access-iframe-index'] = i;
var css = "._access-menu ul li button[data-access-action=\"iframeModals\"][data-access-iframe-index=\"".concat(i, "\"]:before {\n content: \"").concat(icon, "\";\n }");
var className = '_data-access-iframe-index-' + i;
_this3._common.injectStyle(css, {
className: className
});
_this3._common.deployedObjects.set('.' + className, false);
}
if (_this3.options.modules.textToSpeech) json.children[1].children.splice(json.children[1].children.length - 2, 0, btn);else json.children[1].children.push(btn);
});
}
if (this.options.customFunctions) {
this.options.customFunctions.forEach(function (cf, i) {
var btn = {
type: 'li',
children: [{
type: 'button',
attrs: {
'data-access-action': 'customFunctions',
'data-access-custom-id': cf.id,
'data-access-custom-index': i
},
children: [{
type: '#text',
text: cf.buttonText
}]
}]
};
var icon = null;
if (cf.icon && !_this3.options.icon.useEmojis) icon = cf.icon;else if (cf.emoji && _this3.options.icon.useEmojis) icon = cf.emoji;
if (icon) {
var css = "._access-menu ul li button[data-access-action=\"customFunctions\"][data-access-custom-id=\"".concat(cf.id, "\"]:before {\n content: \"").concat(icon, "\";\n }");
var className = '_data-access-custom-id-' + cf.id;
_this3._common.injectStyle(css, {
className: className
});
_this3._common.deployedObjects.set('.' + className, false);
}
if (_this3.options.modules.textToSpeech) json.children[1]