13.1. utils module - functions working with assets

components/Key.js

@@ -1,26 +1,4 @@
-const getKeyLabels = keyContent => {
-	/*
-	Code line below is called `destructuring`, 
-	because we destructure an object `this.keyContent` 
-	into 3 separate constants.
-	*/
-	const { main = '', shifted = '', label, code } = keyContent
-	const isUpperCaseLang = main.toUpperCase() === shifted
-	const mainOutput = isUpperCaseLang ? shifted : main
-	const shiftedOutput = isUpperCaseLang ? '' : shifted
-
-	return {
-		/*
-		|| is a logical `or` operator. 
-		The line below is `or chain`. 
-		If `label` exists, it will be returned. 
-		If `label` doesn't exist, but `main` exists -- will be returned `main`. 
-		If `label` and main don't exist, will be returned `code`.
-		*/
-		main: label || mainOutput || code,
-		shifted: shiftedOutput
-	}
-}
+import { getKeyLabels } from '../utils.js'
 
 const Key = {
 	template: `

components/Keyboard.js

@@ -1,20 +1,5 @@
 import Key from './Key.js'
-
-const getAudioFileName = (keyContent, shiftKey) => {
-	const { main, mainName, shifted, shiftedName, code } = keyContent
-
-	let fileName
-
-	if (shiftKey) {
-		// will be returned 1 of 3 values (if it exist). priority to the first one
-		fileName = shiftedName || shifted || code
-	} else {
-		fileName = mainName || main || code
-	}
-
-	// to have a guarantee, that everything is written in the same (lower) case
-	return fileName.toLowerCase()
-}
+import { getAudioFileName, loadKeyboardData, playKeyAudio } from '../utils.js'
 
 const Keyboard = {
 	template: `
@@ -52,11 +37,11 @@ const Keyboard = {
 	},
 	watch: {
 		currentLang: function (currentLang) {
-			this.getKeyboardData(currentLang)
+			this.setKeyboardData(currentLang)
 		}
 	},
 	mounted() {
-		this.getKeyboardData(this.currentLang)
+		this.setKeyboardData(this.currentLang)
 
 		window.addEventListener('keydown', event => {
 			event.preventDefault()
@@ -82,11 +67,8 @@ const Keyboard = {
 	},
 
 	methods: {
-		async getKeyboardData(lang) {
-			const { default: keyboardData } = await import(
-				`../keyboardData/${lang}.js`
-			)
-			this.keyboardData[lang] = keyboardData
+		async setKeyboardData(lang) {
+			this.keyboardData[lang] = await loadKeyboardData(lang)
 		},
 		getKeyContent(lang, code) {
 			return this.keyboardData[lang].flat().find(elem => elem.code === code)
@@ -100,17 +82,11 @@ const Keyboard = {
 			const { code } = keyContent
 			const { shiftKey, currentLang } = this
 
-			const playKeyAudio = (lang, code, shiftKey) => {
-				const keyContent = this.getKeyContent(lang, code)
-				const fileName = getAudioFileName(keyContent, shiftKey)
-				const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
-				return audio.play()
-			}
-
-			playKeyAudio(currentLang, code, shiftKey).catch(() => {
+			playKeyAudio(currentLang, keyContent, shiftKey).catch(() => {
 				// fallback
 				if (this.currentLang !== 'en') {
-					playKeyAudio('en', code, shiftKey)
+					const keyContent = this.getKeyContent('en', code)
+					playKeyAudio('en', keyContent, shiftKey)
 				}
 			})
 		},

utils.js

@@ -0,0 +1,50 @@
+export const getAudioFileName = (keyContent, shiftKey) => {
+	const { main, mainName, shifted, shiftedName, code } = keyContent
+
+	let fileName
+
+	if (shiftKey) {
+		// will be returned 1 of 3 values (if it exist). priority to the first one
+		fileName = shiftedName || shifted || code
+	} else {
+		fileName = mainName || main || code
+	}
+
+	// to have a guarantee, that everything is written in the same (lower) case
+	return fileName.toLowerCase()
+}
+
+export const getKeyLabels = keyContent => {
+	/*
+	Code line below is called `destructuring`, 
+	because we destructure an object `this.keyContent` 
+	into 3 separate constants.
+	*/
+	const { main = '', shifted = '', label, code } = keyContent
+	const isUpperCaseLang = main.toUpperCase() === shifted
+	const mainOutput = isUpperCaseLang ? shifted : main
+	const shiftedOutput = isUpperCaseLang ? '' : shifted
+
+	return {
+		/*
+		|| is a logical `or` operator. 
+		The line below is `or chain`. 
+		If `label` exists, it will be returned. 
+		If `label` doesn't exist, but `main` exists -- will be returned `main`. 
+		If `label` and main don't exist, will be returned `code`.
+		*/
+		main: label || mainOutput || code,
+		shifted: shiftedOutput
+	}
+}
+
+export const loadKeyboardData = async lang => {
+	const { default: keyboardData } = await import(`../keyboardData/${lang}.js`)
+	return keyboardData
+}
+
+export const playKeyAudio = (lang, keyContent, shiftKey) => {
+	const fileName = getAudioFileName(keyContent, shiftKey)
+	const audio = new Audio(`../keyboardData/${lang}/${fileName}.mp3`)
+	return audio.play()
+}