|
|
@@ -0,0 +1,244 @@
|
|
|
+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 = '👁'
|
|
|
+ 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())
|
