Merge pull request #99 from bamdadsabbagh/next/release

src/scripts/constants.js

@@ -14,4 +14,8 @@ export const STEP = {
 
 export const INTERVAL = 500
 
-export const RETRY = 500
+export const RETRY = 500
+
+export const INDICATOR_PERCENTAGE_ID = 'screwmycode-ext__percent'
+
+export const INDICATOR_SEMITONES_ID = 'screwmycode-ext__tone'

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
+
+}

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 })
 
 }

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 })
 
 }

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
+
+}

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<HTMLSpanElement>} 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 })
 
 }

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<HTMLSpanElement>} 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 })
 
 }

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 ())
+
+}

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)
 
 }

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)
 
 }