master - fix issues 67

ranbuch · Jun 15, 2024 · 624434c · 624434c
1 parent ae25891
commit 624434c
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -297,7 +297,10 @@ Another example with font-awesome icons:
 const options = {
     icon: {
         fontFaceSrc: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css'],
-        fontFamily: '"FontAwesome"'
+        fontFamily: '"FontAwesome"',
+        img: '[optional - URL for an image that will replace the menu icon]',
+        closeIcon: '[optional - replacement text for the close menu icon]',
+        resetIcon: '[optional - replacement text for the reset all icon]'
     }
 };
 new Accessibility(options);

diff --git a/dist/interfaces/accessibility.interface.d.ts b/dist/interfaces/accessibility.interface.d.ts
@@ -80,6 +80,8 @@ export interface IAccessibilityIconOptions {
     fontFamily?: string;
     forceFont?: boolean;
     tabIndex?: number;
+    closeIcon?: string;
+    resetIcon?: string;
 }
 export interface IAccessibilityIconPositionOptions {
     top?: IUnitsDim;

diff --git a/dist/main.bundle.js b/dist/main.bundle.js
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/menu-interface.js b/dist/menu-interface.js
@@ -310,7 +310,7 @@ var MenuInterface = /*#__PURE__*/function () {
       }
       this._acc.stateValues.speechToText = !this._acc.stateValues.speechToText;
       if (this._acc.stateValues.speechToText) {
-        var css = "\n                body:after {\n                    content: ".concat(!this._acc.options.icon.useEmojis ? '"mic"' : '"🎤"', ";\n                    ").concat(!this._acc.options.icon.useEmojis ? "font-family: '" + this._acc.options.icon.fontFamily + "';" : '', "\n                    position: fixed;\n                    z-index: 1100;\n                    top: 1vw;\n                    right: 1vw;\n                    width: 36px;\n                    height: 36px;\n                    font-size: 30px;\n                    line-height: 36px;\n                    border-radius: 50%;\n                    background: rgba(255,255,255,0.7);\n                    display: flex;\n                    justify-content: center;\n                    aling-items: center;\n                }\n\n                body._access-listening:after {\n                    animation: _access-listening-animation 2s infinite ease;\n                }\n\n                @keyframes _access-listening-animation {\n                    0%  {background-color: transparent;}\n                    50%  {background-color: #EF9A9A;}\n                }\n            ");
+        var css = "\n                body:after {\n                    content: ".concat(!this._acc.options.icon.useEmojis ? '"mic"' : 'var(--_access-menu-item-icon-mic,"🎤")', ";\n                    ").concat(!this._acc.options.icon.useEmojis ? "font-family: '" + this._acc.options.icon.fontFamily + "';" : '', "\n                    position: fixed;\n                    z-index: 1100;\n                    top: 1vw;\n                    right: 1vw;\n                    width: 36px;\n                    height: 36px;\n                    font-size: 30px;\n                    line-height: 36px;\n                    border-radius: 50%;\n                    background: rgba(255,255,255,0.7);\n                    display: flex;\n                    justify-content: center;\n                    aling-items: center;\n                }\n\n                body._access-listening:after {\n                    animation: _access-listening-animation 2s infinite ease;\n                }\n\n                @keyframes _access-listening-animation {\n                    0%  {background-color: transparent;}\n                    50%  {background-color: #EF9A9A;}\n                }\n            ");
         this._acc.common.injectStyle(css, {
           className: className
         });
@@ -466,7 +466,7 @@ var MenuInterface = /*#__PURE__*/function () {
               type: 'button',
               attrs: {
                 role: 'button',
-                'class': this._acc.options.icon.useEmojis ? '' : 'material-icons',
+                'class': this._acc.options.icon.useEmojis ? '' : this._acc.options.icon.fontClass,
                 style: "position: absolute;\n                                    top: 5px;\n                                    cursor: pointer;\n                                    font-size: 24px !important;\n                                    font-weight: bold;\n                                    background: transparent;\n                                    border: none;\n                                    left: 5px;\n                                    color: #d63c3c;\n                                    padding: 0;"
               },
               children: [{

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "accessibility",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "description": "add accessibility to your website",
   "main": "index.js",
   "exports": {

diff --git a/src/interfaces/accessibility.interface.ts b/src/interfaces/accessibility.interface.ts
@@ -85,6 +85,8 @@ export interface IAccessibilityIconOptions {
     fontFamily?: string;
     forceFont?: boolean;
     tabIndex?: number;
+    closeIcon?: string;
+    resetIcon?: string;
 }
 
 export interface IAccessibilityIconPositionOptions {

diff --git a/src/main.ts b/src/main.ts
@@ -145,7 +145,9 @@ export class Accessibility implements IAccessibility {
                 fontFaceSrc: ['https://fonts.googleapis.com/icon?family=Material+Icons'],
                 fontFamily: this._common.getFixedFont('Material Icons'),
                 fontClass: 'material-icons',
-                useEmojis: false
+                useEmojis: false,
+                closeIcon: 'close',
+                resetIcon: 'refresh'
             },
             hotkeys: {
                 enabled: false,
@@ -512,7 +514,7 @@ export class Accessibility implements IAccessibility {
                 font-style: normal !important;
             }
             ._access-menu ._menu-reset-btn:hover,._access-menu ._menu-close-btn:hover {
-                ${(this.options.animations.buttons ? 'transform: rotate(180deg);' : '')}
+                ${(this.options.animations.buttons ? 'transform: var(--_access-menu-header-btn-hover-rotate, rotate(180deg));' : '')}
             }
             ._access-menu ._menu-reset-btn {
                 right: 5px;
@@ -811,7 +813,7 @@ export class Accessibility implements IAccessibility {
                             children: [
                                 {
                                     type: '#text',
-                                    text: `${!this.options.icon.useEmojis ? 'close' : 'X'}`
+                                    text: `${!this.options.icon.useEmojis ? this.options.icon.closeIcon : 'X'}`
                                 }
                             ]
                         },
@@ -828,7 +830,7 @@ export class Accessibility implements IAccessibility {
                             children: [
                                 {
                                     type: '#text',
-                                    text: `${!this.options.icon.useEmojis ? 'refresh' : '♲'}`
+                                    text: `${!this.options.icon.useEmojis ? this.options.icon.resetIcon : '♲'}`
                                 }
                             ]
                         }

diff --git a/src/menu-interface.ts b/src/menu-interface.ts
@@ -333,7 +333,7 @@ export class MenuInterface implements IMenuInterface {
         if (this._acc.stateValues.speechToText) {
             let css = `
                 body:after {
-                    content: ${!this._acc.options.icon.useEmojis ? '"mic"' : '"🎤"'};
+                    content: ${!this._acc.options.icon.useEmojis ? '"mic"' : 'var(--_access-menu-item-icon-mic,"🎤")'};
                     ${!this._acc.options.icon.useEmojis ? `font-family: '` + this._acc.options.icon.fontFamily + `';` : ''}
                     position: fixed;
                     z-index: 1100;
@@ -482,7 +482,7 @@ export class MenuInterface implements IMenuInterface {
                                 type: 'button',
                                 attrs: {
                                     role: 'button',
-                                    'class': this._acc.options.icon.useEmojis ? '' : 'material-icons',
+                                    'class': this._acc.options.icon.useEmojis ? '' : this._acc.options.icon.fontClass,
                                     style: `position: absolute;
                                     top: 5px;
                                     cursor: pointer;