Homework/Homework_11/main.js

function Control(element, {value=0, min=0, max=100, minAngle=0, maxAngle=360, wheelSpeed=0.1, step=1}={}) {

    const container = document.createElement('div')
    container.style.padding = '15px'
    const img = document.createElement('img')
    const regulatorValue = document.createElement('div')
    regulatorValue.style.textAlign = 'center'
    img.src = '1@3x.png'
    container.append(img)
    container.append(regulatorValue)
    element.append(container)

    const ratio = (maxAngle - minAngle) / (max - min)
    const getAngle = () => (ratio * (value - min)) + minAngle

    this.setValue = newValue => {
        if (newValue > max) {
            newValue = max
        }
        if (newValue < min) {
            newValue = min
        }
        value = newValue
        img.style.transform = `rotate(${getAngle()}deg)`
        regulatorValue.innerText = value

        if (typeof this.onChange === 'function') {
            this.onChange(value)
        }
    }

    this.getValue = () => {
        return value
    }

    img.onmousewheel = (e) => {
        e.preventDefault()
        let {deltaY} = e
        this.setValue(value + deltaY * wheelSpeed)
    }

    img.onclick = (e) => {
        let {layerX} = e
        if (layerX < img.width / 2) {
            this.setValue(value - step)
        }
        if (layerX > img.width / 2) {
            this.setValue(value + step)
        }
    }

    this.setValue(value)
}

//крутилки цвета
const rControl = new Control(regulators, {value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90})
const gControl = new Control(regulators, {value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90})
const bControl = new Control(regulators, {value: 0, min: 0, max: 255, minAngle: -90, maxAngle: +90})

function changeBackgroundColor() {
    this.style.backgroundColor = `rgb(${rControl.getValue()}, ${gControl.getValue()}, ${bControl.getValue()})`
}

const changeDivBackground = changeBackgroundColor.bind(background)
changeDivBackground()
rControl.onChange = changeDivBackground
gControl.onChange = changeDivBackground
bControl.onChange = changeDivBackground

//крутилка звука
//я прошарила, что тут можно мин макс поменять и скорость колесика, и тогда можно не делить на 100, но если так сделать, то число некрасивое отображается, мне не нравится......
const volumeControl = new Control(regulatorContainer, {value: 50, min: 0, max: 100, minAngle: -90, maxAngle: +90, wheelSpeed: 0.05})

function changeVolume () {
    audio.volume = volumeControl.getValue() / 100
}
volumeControl.onChange = changeVolume

btn.onclick = () => audio.play()

//Password
function Password(parent, open){
    let container = document.createElement('div')
    container.style.display = 'flex'
    container.style.alignItems = 'center'

    let passwordInput = document.createElement('input')
    passwordInput.type = open ? 'text' : 'password'

    let openBtn = document.createElement('span')
    openBtn.style.lineHeight = '0'
    openBtn.innerHTML = '&#128065;'
    openBtn.style.fontSize = '25px'
    openBtn.style.cursor = 'pointer'

    container.append(passwordInput)
    container.append(openBtn)
    parent.appendChild(container)

    let value = passwordInput.value
    this.setValue = (newValue) => {
        value = newValue
        passwordInput.value = value;
        return value
    }
    this.getValue = () => {
        return value
    }

    this.setOpen = (newValue) => {
        if (newValue === true || newValue === false) {
            open = newValue
            passwordInput.type = open ? 'text' : 'password'
        }
        return open
    }
    this.getOpen = () => {
        return open
    }

    passwordInput.oninput = () => {
        this.setValue(passwordInput.value)
        if (typeof this.onChange === 'function') {
            this.onChange(value)
        }
    }

    openBtn.onclick = () => {
        open = !open
        this.setOpen(open)
        if (typeof this.onOpenChange === 'function') {
            this.onOpenChange(open)
        }
    }
}

//LoginForm
// let container = document.createElement('div')
// let loginInput = document.createElement('input')
// container.append(loginInput)
// formContainer.append(container)

// let passwordInput = new Password(formContainer, true)

// let logInBtn = document.createElement('button')
// logInBtn.innerText = 'Log in'
// formContainer.append(logInBtn)

// loginInput.oninput = inputCheck
// passwordInput.onChange = inputCheck
// function inputCheck() {
//     if (loginInput.value !== '' && passwordInput.getValue() !== '') {
//         logInBtn.disabled = false
//     } else {
//         logInBtn.disabled = true
//     }
// }
// inputCheck()

//LoginForm Constructor
function LoginForm (parent) {
    let container = document.createElement('div')
    let loginInput = document.createElement('input')
    container.append(loginInput)
    parent.append(container)

    let passwordInput = new Password(parent, true)

    let logInBtn = document.createElement('button')
    logInBtn.innerText = 'Log in'
    formContainer.append(logInBtn)

    let value = loginInput.value
    this.setValue = (newValue) => {
        value = newValue
        loginInput.value = value;
        return value
    }
    this.getValue = () => {
        return value
    }

    this.getPasswordInput = () => {
        return passwordInput
    }

    this.inputCheck = () => {
        if (value !== '' && passwordInput.getValue() !== '') {
            logInBtn.disabled = false
        } else {
            logInBtn.disabled = true
        }
    }
    this.inputCheck()

    loginInput.oninput = () => {
        this.setValue(loginInput.value)
        this.inputCheck()
        if (typeof this.onChange === 'function') {
            this.onChange(value)
        }
    }
    passwordInput.onChange = this.inputCheck
}

//Password Verify
//надеюсь, у вас не случится сердечный приступ от количества костылей в этом коде
let password = new Password(formContainer, true)
let passwordVerify
let logInBtn = document.createElement('button')
logInBtn.innerText = 'Verify'
formContainer.append(logInBtn)

password.onOpenChange = (open) => {
    password.onChange()
    if (!open) {
        passwordVerify = new Password(formContainer, false)
        passwordVerify.onChange = password.onChange
        passwordVerify.onChange()
        formContainer.append(logInBtn)
    } else if (formContainer.children.length === 3){
        passwordVerify = undefined
        formContainer.removeChild(formContainer.children[formContainer.children.length - 2])
        
    }
}

password.onChange = () => {
    if (passwordVerify !== undefined) {
        if (password.getValue() === passwordVerify.getValue() && password.getValue() !== '') {
            logInBtn.disabled = false
        } else {
            logInBtn.disabled = true
        }
    } else {
        if (password.getValue() !== '') {
            logInBtn.disabled = false
        } else {
            logInBtn.disabled = true
        }
    }
}

password.onOpenChange(password.getOpen())