diff --git a/src/scripts/constants.js b/src/scripts/constants.js index 4e256d2..dab09b4 100644 --- a/src/scripts/constants.js +++ b/src/scripts/constants.js @@ -14,4 +14,8 @@ export const STEP = { export const INTERVAL = 500 -export const RETRY = 500 \ No newline at end of file +export const RETRY = 500 + +export const INDICATOR_PERCENTAGE_ID = 'screwmycode-ext__percent' + +export const INDICATOR_SEMITONES_ID = 'screwmycode-ext__tone' \ No newline at end of file diff --git a/src/scripts/controls/utils/create-change.js b/src/scripts/controls/utils/create-change.js new file mode 100644 index 0000000..f92f6a0 --- /dev/null +++ b/src/scripts/controls/utils/create-change.js @@ -0,0 +1,41 @@ +import { getState } from '../../state/get-state' +import { setState } from '../../state/set-state' + +/** + * @description blueprint for change buttons increase/decrease + * @param {object} options options + * @param {string} options.text HTML innerText + * @param {boolean} options.increase set to false for decrease + * @returns {HTMLSpanElement} change button + */ +export function createChange ({ + text, + increase, +}) { + + const change = document.createElement ('span') + + change.innerText = text + + change.style.cursor = 'pointer' + + change.addEventListener ('click', async () => { + + const { isActive, speed, step } = await getState () + + if (isActive) { + + await setState ( + 'speed', + increase + ? speed + step + : speed - step, + ) + + } + + }) + + return change + +} \ No newline at end of file diff --git a/src/scripts/controls/utils/create-decrease-button.js b/src/scripts/controls/utils/create-decrease-button.js index e804273..fc8913d 100644 --- a/src/scripts/controls/utils/create-decrease-button.js +++ b/src/scripts/controls/utils/create-decrease-button.js @@ -1,25 +1,12 @@ -import { getState } from '../../state/get-state' -import { setState } from '../../state/set-state' +import { createChange } from './create-change' /** - * @returns {HTMLSpanElement} controls decrease button + * @returns {HTMLSpanElement} decrease button */ export function createDecreaseButton () { - const decrease = document.createElement ('span') + const text = 'down' - decrease.innerText = 'down' - - decrease.style = 'cursor: pointer;' - - decrease.addEventListener ('click', async () => { - - const { isActive, speed, step } = await getState () - - if (isActive) await setState ('speed', speed - step) - - }) - - return decrease + return createChange ({ text, 'increase': false }) } \ No newline at end of file diff --git a/src/scripts/controls/utils/create-increase-button.js b/src/scripts/controls/utils/create-increase-button.js index 40c9628..966e126 100644 --- a/src/scripts/controls/utils/create-increase-button.js +++ b/src/scripts/controls/utils/create-increase-button.js @@ -1,25 +1,12 @@ -import { getState } from '../../state/get-state' -import { setState } from '../../state/set-state' +import { createChange } from './create-change' /** - * @returns {HTMLSpanElement} controls increase button + * @returns {HTMLSpanElement} increase button */ export function createIncreaseButton () { - const increase = document.createElement ('span') + const text = 'up' - increase.innerText = 'up' - - increase.style = 'cursor: pointer;' - - increase.addEventListener ('click', async () => { - - const { isActive, speed, step } = await getState () - - if (isActive) await setState ('speed', speed + step) - - }) - - return increase + return createChange ({ text, 'increase': true }) } \ No newline at end of file diff --git a/src/scripts/controls/utils/create-indicator.js b/src/scripts/controls/utils/create-indicator.js new file mode 100644 index 0000000..ba71bb5 --- /dev/null +++ b/src/scripts/controls/utils/create-indicator.js @@ -0,0 +1,48 @@ +import { setState } from '../../state/set-state' +import { SPEED } from '../../constants' +import { getBrowser } from '../../browser/get-browser' + +/** + * @param {object} options options + * @param {string} options.id HTML id + * @param {function(): void} options.getValue getter for new value + * @description indicator blueprint for semitones and percentage + * @returns {HTMLSpanElement} indicator + */ +export async function createIndicator ({ + id, + getValue, +}) { + + // declaration + const indicator = document.createElement ('span') + + indicator.id = id + + indicator.style.cursor = 'pointer' + + // setter + const setValue = (value) => { + + indicator.innerText = value.toString () + + } + + // on load + setValue (await getValue ()) + + // on click, reset value + indicator.addEventListener ('click', async () => { + + await setState ('speed', SPEED.default) + + }) + + // on change + const browser = await getBrowser () + + browser.storage.onChanged.addListener (async () => setValue (await getValue ())) + + return indicator + +} \ No newline at end of file diff --git a/src/scripts/controls/utils/create-percentage.js b/src/scripts/controls/utils/create-percentage.js index 4870377..2552b50 100644 --- a/src/scripts/controls/utils/create-percentage.js +++ b/src/scripts/controls/utils/create-percentage.js @@ -1,44 +1,25 @@ import speedToPercentage from 'speed-to-percentage' -import { setState } from '../../state/set-state' import { getState } from '../../state/get-state' -import { SPEED } from '../../constants' -import { getBrowser } from '../../browser/get-browser' +import { createIndicator } from './create-indicator' +import { INDICATOR_PERCENTAGE_ID } from '../../constants' /** * @returns {Promise} controls percentage value */ export async function createPercentage () { - const percentage = document.createElement ('span') + const id = INDICATOR_PERCENTAGE_ID - percentage.id = 'screwmycode-ext__percent' - - percentage.style = 'cursor: pointer;' - - const setValue = async () => { + const getValue = async () => { const { isActive, speed } = await getState () - percentage.innerText = isActive + return isActive ? `${speedToPercentage (speed, 1)} %` : '%' } - // on load - await setValue () - - // on click, reset value - percentage.addEventListener ( - 'click', - async () => await setState ('speed', SPEED.default), - ) - - const browser = getBrowser () - - // on change - browser.storage.onChanged.addListener (() => setValue ()) - - return percentage + return createIndicator ({ id, getValue }) } \ No newline at end of file diff --git a/src/scripts/controls/utils/create-semitones.js b/src/scripts/controls/utils/create-semitones.js index 0c8c2cb..1e6b4fd 100644 --- a/src/scripts/controls/utils/create-semitones.js +++ b/src/scripts/controls/utils/create-semitones.js @@ -1,44 +1,25 @@ import speedToSemitones from 'speed-to-semitones' -import { setState } from '../../state/set-state' import { getState } from '../../state/get-state' -import { SPEED } from '../../constants' -import { getBrowser } from '../../browser/get-browser' +import { createIndicator } from './create-indicator' +import { INDICATOR_SEMITONES_ID } from '../../constants' /** * @returns {Promise} controls semitones value */ export async function createSemitones () { - const tone = document.createElement ('span') + const id = INDICATOR_SEMITONES_ID - tone.id = 'screwmycode-ext__tone' - - tone.style = 'cursor: pointer;' - - const setValue = async () => { + const getValue = async () => { const { isActive, speed } = await getState () - tone.innerText = isActive + return isActive ? `${speedToSemitones (speed, 1)} st` : 'st' } - // on load - await setValue () - - // on click, reset value - tone.addEventListener ( - 'click', - async () => await setState ('speed', SPEED.default), - ) - - const browser = getBrowser () - - // on change - browser.storage.onChanged.addListener (() => setValue ()) - - return tone + return createIndicator ({ id, getValue }) } \ No newline at end of file diff --git a/src/scripts/popup/handle-indicator.js b/src/scripts/popup/handle-indicator.js new file mode 100644 index 0000000..e06cc35 --- /dev/null +++ b/src/scripts/popup/handle-indicator.js @@ -0,0 +1,16 @@ +import { getBrowser } from '../browser/get-browser' + +/** + * @param {function(): void} set setter function + */ +export async function handleIndicator (set) { + + // on load + await set () + + // on change + const browser = await getBrowser () + + browser.storage.onChanged.addListener (async () => await set ()) + +} \ No newline at end of file diff --git a/src/scripts/popup/handle-percentage.js b/src/scripts/popup/handle-percentage.js index 766cb3f..74265d6 100644 --- a/src/scripts/popup/handle-percentage.js +++ b/src/scripts/popup/handle-percentage.js @@ -1,17 +1,11 @@ -import { getBrowser } from '../browser/get-browser' import { setPercentage } from './set-percentage' +import { handleIndicator } from './handle-indicator' /** * @description handle the `percentage` element */ export async function handlePercentage () { - // on load - await setPercentage () - - // on change - const browser = await getBrowser () - - browser.storage.onChanged.addListener (async () => await setPercentage ()) + await handleIndicator (setPercentage) } \ No newline at end of file diff --git a/src/scripts/popup/handle-semitones.js b/src/scripts/popup/handle-semitones.js index 2229f08..990f0dd 100644 --- a/src/scripts/popup/handle-semitones.js +++ b/src/scripts/popup/handle-semitones.js @@ -1,17 +1,11 @@ -import { getBrowser } from '../browser/get-browser' import { setSemitones } from './set-semitones' +import { handleIndicator } from './handle-indicator' /** * @description handle the `semitones` element */ export async function handleSemitones () { - // on load - await setSemitones () - - // on change - const browser = await getBrowser () - - browser.storage.onChanged.addListener (async () => await setSemitones ()) + await handleIndicator (setSemitones) } \ No newline at end of file