Clique no botão para ativar os comandos de voz. Você pode usar os seguintes comandos:
+Além de ditar a conta que deseja calcular, como "4 mais 4".
+ `, + tooltipClass: 'custom-tooltip', + highlightClass: 'custom-highlight' } ] } - loadConfig () { + loadConfig() { this.#intro.setOptions(this.#config) } - start () { + start() { this.#intro.start() } } diff --git a/src/js/main.js b/src/js/main.js index f6477b9..64e1b53 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,52 +1,32 @@ import { Calculator } from './calculator.js' import { ThemeManager } from './themeManager.js' import { Guide } from './guide.js' +import { Speak } from './speak.js' import { themes } from '../constants/index.js' document.addEventListener('DOMContentLoaded', () => { - const display = document.getElementById('display') - const calculator = new Calculator(display) + const calculator = new Calculator() + const themeManager = initializeThemeManager() - const btnTheme = document.getElementById('btnTheme') - const keySelectors = document.querySelectorAll('.key-selector') - const themeManager = new ThemeManager(themes, btnTheme, keySelectors) - - themeManager.setPreferColorSchemeTheme() - themeManager.applyStoredKeys() - - const guide = new Guide() - guide.loadSteps() - guide.loadConfig() - guide.start() - - document.querySelectorAll('.add-input').forEach(button => { - button.addEventListener('click', () => { - const value = button.dataset.operation || button.value - calculator.handleAddInput(value) - }) - }) - - document.querySelector('.reset').addEventListener('click', () => { - calculator.handleResetValue() - }) - - document.querySelector('.remove-last').addEventListener('click', () => { - calculator.handleRemoveLastInput() - }) + addEventListeners(calculator, themeManager) + new Speak(calculator) + initializeGuide() +}) - document.querySelector('.calculate').addEventListener('click', () => { - calculator.calculate() - }) +function initializeThemeManager() { + const themeManager = new ThemeManager(themes) + const btnTheme = themeManager.getBtnTheme() + const keySelectors = themeManager.getKeySelectors() - btnTheme.addEventListener('change', () => { - themeManager.changeThemeById(btnTheme.value) - }) + themeManager.setPreferColorSchemeTheme() + themeManager.applyStoredKeys() + btnTheme.addEventListener('change', () => themeManager.changeThemeById(btnTheme.value)) keySelectors.forEach(selector => { selector.addEventListener('click', () => { alert('Ao clicar em OK, pressione uma tecla para associar a este tema.') - + const hiddenInput = document.getElementById('hiddenInput') hiddenInput.focus() @@ -54,13 +34,40 @@ document.addEventListener('DOMContentLoaded', () => { themeManager.setKeyForTheme(selector, event.key) document.removeEventListener('keydown', captureKey) } - + document.addEventListener('keydown', captureKey) }) }) - + + return themeManager +} + +function initializeGuide() { + const guide = new Guide() + + guide.loadSteps() + guide.loadConfig() + guide.start() + + return guide +} + +function addEventListeners(calculator, themeManager) { + document.querySelector('.reset').addEventListener('click', () => calculator.handleResetValue()) + document.querySelector('.remove-last').addEventListener('click', () => calculator.handleRemoveLastInput()) + document.querySelector('.calculate').addEventListener('click', () => calculator.calculate()) + document.getElementById('reset-theme').addEventListener('click', () => themeManager.resetKeys()) + + document.querySelectorAll('.add-input').forEach(button => { + button.addEventListener('click', () => { + const value = button.dataset.operation || button.value + calculator.handleAddInput(value) + }) + }) + document.addEventListener('keydown', (event) => { const keyActions = calculator.getKeyboardActions() + if (keyActions[event.key]) { keyActions[event.key](event) } else if ('0123456789+-*/.'.includes(event.key)) { @@ -70,8 +77,4 @@ document.addEventListener('DOMContentLoaded', () => { const themeId = themeManager.getThemeIdByKey(event.key) if (themeId) themeManager.changeThemeById(themeId) }) - - document.getElementById('reset-theme').addEventListener('click', function() { - themeManager.resetKeys() - }) -}) +} diff --git a/src/js/speak.js b/src/js/speak.js new file mode 100644 index 0000000..baa3cd1 --- /dev/null +++ b/src/js/speak.js @@ -0,0 +1,93 @@ +export class Speak { + #recognition + #startBtn + #isListening = false + #microphoneIcon + #microphoneTooltip + #calculator + + constructor( + calculator, + startBtn = document.getElementById('startVoice'), + microphoneIcon = document.getElementById('microphoneIcon'), + microphoneTooltip = document.getElementById('microphoneTooltip') + ) { + this.#calculator = calculator + this.#startBtn = startBtn + this.#microphoneIcon = microphoneIcon + this.#microphoneTooltip = microphoneTooltip + this.setup() + } + + setup() { + if (!('webkitSpeechRecognition' in window)) { + this.#startBtn.disabled = true + console.error('Speech recognition not available') + return + } + + this.#recognition = new webkitSpeechRecognition() + this.addListeners() + } + + start() { + this.#calculator.setDisplayValue('') + this.#recognition.continuous = true + this.#recognition.lang = 'pt-BR' + this.#recognition.interimResults = true + + this.#recognition.onresult = (event) => { + for (const result of Object.values(event.results)) { + const { transcript } = result[0] + const { isFinal } = result + + if (isFinal) this.#calculator.executeVoiceCommand(transcript.trim(), this.getVoiceActions()) + } + } + + this.#recognition.onend = () => { + this.updateListeningState(false) + } + + this.#recognition.start() + this.updateListeningState(true) + } + + stop() { + this.#recognition.stop() + this.updateListeningState(false) + } + + toggleListening() { + if (this.#isListening) return this.stop() + + this.start() + } + + updateListeningState(isListening) { + this.#isListening = isListening + + if (isListening) { + this.#microphoneIcon.classList.remove('fa-microphone-slash') + this.#microphoneIcon.classList.add('fa-microphone') + this.#microphoneTooltip.textContent = 'Desativar microfone' + return + } + + this.#microphoneIcon.classList.remove('fa-microphone') + this.#microphoneIcon.classList.add('fa-microphone-slash') + this.#microphoneTooltip.textContent = 'Ativar microfone' + } + + addListeners() { + this.#startBtn.addEventListener('click', () => this.toggleListening()) + } + + getVoiceActions() { + return { + 'calcular': () => this.#calculator.calculate(), + 'apagar': () => this.#calculator.handleRemoveLastInput(), + 'limpar': () => this.#calculator.handleResetValue() + } + } +} diff --git a/src/js/themeManager.js b/src/js/themeManager.js index 3bb8bc8..4d4d1a8 100644 --- a/src/js/themeManager.js +++ b/src/js/themeManager.js @@ -1,19 +1,28 @@ export class ThemeManager { - constructor(themesConfig, btnTheme, keySelectors, root = document.querySelector(':root')) { + #btnTheme + #keySelectors + #root + + constructor( + themesConfig, + btnTheme = document.getElementById('btnTheme'), + keySelectors = document.querySelectorAll('.key-selector'), + root = document.querySelector(':root') + ) { this.themesConfig = themesConfig - this.btnTheme = btnTheme - this.keySelectors = [...keySelectors] - this.root = root + this.#btnTheme = btnTheme + this.#keySelectors = [...keySelectors] + this.#root = root } applyTheme(themeColors) { themeColors.forEach(({ name, value }) => { - this.root.style.setProperty(name, value) + this.#root.style.setProperty(name, value) }) } applyStoredKeys() { - this.keySelectors.forEach(selector => { + this.#keySelectors.forEach(selector => { const key = localStorage.getItem(selector.getAttribute('data-key')) if (key) this.setKeyForTheme(selector, key) }) @@ -23,20 +32,20 @@ export class ThemeManager { const theme = Object.values(this.themesConfig).find(theme => theme.id === themeId) if (!theme) return - this.btnTheme.value = theme.id + this.#btnTheme.value = theme.id this.applyTheme(theme.colors) } setPreferColorSchemeTheme() { - if (!this.btnTheme || !window.matchMedia) return + if (!this.#btnTheme || !window.matchMedia) return Object.keys(this.themesConfig).forEach(themeName => { const matchedPreferredScheme = window.matchMedia(`(prefers-color-scheme: ${themeName})`)?.matches - if (matchedPreferredScheme) this.btnTheme.value = this.themesConfig[themeName].id + if (matchedPreferredScheme) this.#btnTheme.value = this.themesConfig[themeName].id }) - this.changeThemeById(this.btnTheme.value) + this.changeThemeById(this.#btnTheme.value) } setKeyForTheme(selector, key) { @@ -46,7 +55,7 @@ export class ThemeManager { } resetKeys() { - this.keySelectors.forEach(selector => { + this.#keySelectors.forEach(selector => { selector.removeAttribute('data-chosen-key') selector.textContent = selector.getAttribute('data-key') localStorage.removeItem(selector.getAttribute('data-key')) @@ -54,8 +63,16 @@ export class ThemeManager { } getThemeIdByKey(key) { - const themeId = this.keySelectors.find(selector => selector.getAttribute('data-chosen-key') === key)?.getAttribute('data-key') + const themeId = this.#keySelectors.find(selector => selector.getAttribute('data-chosen-key') === key)?.getAttribute('data-key') return themeId } + + getBtnTheme() { + return this.#btnTheme + } + + getKeySelectors() { + return this.#keySelectors + } }