|
|
@@ -1,24 +1,357 @@
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
-}
|
|
|
+// passwordWrapp()
|
|
|
+function passwordWrapp() {
|
|
|
+
|
|
|
+ function Password(parent=document.body, open=false) {
|
|
|
+
|
|
|
+ const passField = document.createElement('input')
|
|
|
+
|
|
|
+ const checkBox = document.createElement('input')
|
|
|
+ checkBox.type = 'checkbox'
|
|
|
+
|
|
|
+ parent.append(passField)
|
|
|
+ parent.append(checkBox)
|
|
|
+
|
|
|
+ this.setValue = (newValue) => {
|
|
|
+ passField.value = newValue
|
|
|
+ }
|
|
|
+ this.getValue = () => passField.value
|
|
|
+
|
|
|
+ this.setOpen = (newOpen) => {
|
|
|
+ open = newOpen
|
|
|
+
|
|
|
+ if (open === true) {
|
|
|
+ checkBox.checked = true
|
|
|
+ passField.type = 'text'
|
|
|
+ } else if (open === false) {
|
|
|
+ checkBox.checked = false
|
|
|
+ passField.type = 'password'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+
|
|
|
+ this.getOpen = () => checkBox.checked
|
|
|
+
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
+ passField.oninput = () => {
|
|
|
+ if (typeof this.onChange === 'function') {
|
|
|
+ this.onChange(this.getValue())
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ checkBox.oninput = () => {
|
|
|
+ if (this.getOpen() === true) {
|
|
|
+ this.setOpen(true)
|
|
|
+ } else {
|
|
|
+ this.setOpen(false)
|
|
|
+ }
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(this.getOpen())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let p = new Password(document.body, true)
|
|
|
+
|
|
|
+ p.onChange = data => console.log(data)
|
|
|
+ p.onOpenChange = open => console.log(open)
|
|
|
+ // p.setValue('qwerty')
|
|
|
+ // console.log(p.getValue())
|
|
|
+ // p.setOpen(false)
|
|
|
+ // console.log(p.getOpen())
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
+// loginFormWrapp()
|
|
|
+function loginFormWrapp() {
|
|
|
+
|
|
|
+ function LoginForm(parent=document.body, open=false) {
|
|
|
+
|
|
|
+ const loginField = document.createElement('input')
|
|
|
+ loginField.type = 'text'
|
|
|
+
|
|
|
+ const passField = document.createElement('input')
|
|
|
+
|
|
|
+ const checkBox = document.createElement('input')
|
|
|
+ checkBox.type = 'checkbox'
|
|
|
+
|
|
|
+ const button = document.createElement('button')
|
|
|
+ button.innerText = 'Подтвердить'
|
|
|
+ button.disabled = true
|
|
|
+
|
|
|
+ parent.append(loginField)
|
|
|
+ parent.append(passField)
|
|
|
+ parent.append(checkBox)
|
|
|
+ parent.append(button)
|
|
|
+
|
|
|
+ this.setLoginValue = (newValue) => {
|
|
|
+ loginField.value = newValue
|
|
|
+ }
|
|
|
+ this.getLoginValue = () => loginField.value
|
|
|
+
|
|
|
+
|
|
|
+ this.setPassValue = (newValue) => {
|
|
|
+ passField.value = newValue
|
|
|
+ }
|
|
|
+ this.getPassValue = () => passField.value
|
|
|
+
|
|
|
+
|
|
|
+ this.setOpen = (newOpen) => {
|
|
|
+ open = newOpen
|
|
|
+ if (open === true) {
|
|
|
+ checkBox.checked = true
|
|
|
+ passField.type = 'text'
|
|
|
+ } else if (open === false) {
|
|
|
+ checkBox.checked = false
|
|
|
+ passField.type = 'password'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+ this.getOpen = () => checkBox.checked
|
|
|
+
|
|
|
+ loginField.oninput = () => {
|
|
|
+ if (this.getLoginValue() && this.getPassValue()) {
|
|
|
+ button.disabled = false
|
|
|
+ } else {
|
|
|
+ button.disabled = true
|
|
|
+ }
|
|
|
+ if (typeof this.onLoginChange === 'function') {
|
|
|
+ this.onLoginChange(this.getLoginValue())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ passField.oninput = () => {
|
|
|
+ if (this.getLoginValue() && this.getPassValue()) {
|
|
|
+ button.disabled = false
|
|
|
+ } else {
|
|
|
+ button.disabled = true
|
|
|
+ }
|
|
|
+ if (typeof this.onPassChange === 'function') {
|
|
|
+ this.onPassChange(this.getPassValue())
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkBox.oninput = () => {
|
|
|
+ if (this.getOpen() === true) {
|
|
|
+ this.setOpen(true)
|
|
|
+ } else {
|
|
|
+ this.setOpen(false)
|
|
|
+ }
|
|
|
+ if (typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(this.getOpen())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let loginForm = new LoginForm(document.body)
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
+// loginFormConstructorWrapp()
|
|
|
+function loginFormConstructorWrapp() {
|
|
|
+
|
|
|
+ function LoginForm(parent=document.body, open=false) {
|
|
|
+
|
|
|
+ const loginField = document.createElement('input')
|
|
|
+ loginField.type = 'text'
|
|
|
+
|
|
|
+ const passField = document.createElement('input')
|
|
|
+
|
|
|
+ const checkBox = document.createElement('input')
|
|
|
+ checkBox.type = 'checkbox'
|
|
|
+
|
|
|
+ const button = document.createElement('button')
|
|
|
+ button.innerText = 'Подтвердить'
|
|
|
+
|
|
|
+ parent.append(loginField)
|
|
|
+ parent.append(passField)
|
|
|
+ parent.append(checkBox)
|
|
|
+ parent.append(button)
|
|
|
+
|
|
|
+
|
|
|
+ this.setLoginValue = (newValue) => {
|
|
|
+ loginField.value = newValue
|
|
|
+ }
|
|
|
+ this.getLoginValue = () => loginField.value
|
|
|
+
|
|
|
+
|
|
|
+ this.setPassValue = (newValue) => {
|
|
|
+ passField.value = newValue
|
|
|
+ }
|
|
|
+ this.getPassValue = () => passField.value
|
|
|
+
|
|
|
+
|
|
|
+ this.setOpen = (newOpen) => {
|
|
|
+ open = newOpen
|
|
|
+ if (open === true) {
|
|
|
+ checkBox.checked = true
|
|
|
+ passField.type = 'text'
|
|
|
+ } else if (open === false) {
|
|
|
+ checkBox.checked = false
|
|
|
+ passField.type = 'password'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+ this.getOpen = () => checkBox.checked
|
|
|
+
|
|
|
+
|
|
|
+ let btnState = true
|
|
|
+ this.setBtn = (newValue=btnState) => {
|
|
|
+ btnState = newValue
|
|
|
+ button.disabled = btnState
|
|
|
+ if (this.getLoginValue() && this.getPassValue()) {
|
|
|
+ button.disabled = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setBtn()
|
|
|
+ this.getBtn = () => button.disabled
|
|
|
+
|
|
|
+
|
|
|
+ this.makeCallback = (name, content) => {
|
|
|
+ if (typeof name === 'function') {
|
|
|
+ name(content)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ loginField.oninput = () => {
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onLoginChange, this.getLoginValue())
|
|
|
+ }
|
|
|
+
|
|
|
+ passField.oninput = () => {
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onPassChange, this.getPassValue())
|
|
|
+ }
|
|
|
+
|
|
|
+ checkBox.oninput = () => {
|
|
|
+ if (this.getOpen() === true) {
|
|
|
+ this.setOpen(true)
|
|
|
+ } else {
|
|
|
+ this.setOpen(false)
|
|
|
+ }
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onOpenChange, this.getOpen())
|
|
|
+ }
|
|
|
+
|
|
|
+ button.onclick = () => {
|
|
|
+ this.makeCallback(this.onBtnClick, 'click')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let loginForm = new LoginForm(document.body)
|
|
|
+
|
|
|
+ loginForm.onLoginChange = data => console.log(data)
|
|
|
+ loginForm.onPassChange = data => console.log(data)
|
|
|
+ loginForm.onBtnClick = click => console.log(click)
|
|
|
}
|
|
|
|
|
|
-htmlTree()
|
|
|
-function htmlTree() {
|
|
|
|
|
|
+// passwordVerifyWrapp()
|
|
|
+function passwordVerifyWrapp() {
|
|
|
+
|
|
|
+ function LoginForm(parent=document.body, open=false) {
|
|
|
+
|
|
|
+ const loginField = document.createElement('input')
|
|
|
+ loginField.type = 'text'
|
|
|
+
|
|
|
+ const passField = document.createElement('input')
|
|
|
+ const passField2 = document.createElement('input')
|
|
|
+
|
|
|
+ const checkBox = document.createElement('input')
|
|
|
+ checkBox.type = 'checkbox'
|
|
|
+
|
|
|
+ const button = document.createElement('button')
|
|
|
+ button.innerText = 'Подтвердить'
|
|
|
+
|
|
|
+ parent.append(loginField)
|
|
|
+ parent.append(passField)
|
|
|
+ parent.append(passField2)
|
|
|
+ parent.append(checkBox)
|
|
|
+ parent.append(button)
|
|
|
+
|
|
|
+
|
|
|
+ this.setLoginValue = (newValue) => {
|
|
|
+ loginField.value = newValue
|
|
|
+ }
|
|
|
+ this.getLoginValue = () => loginField.value
|
|
|
+
|
|
|
+
|
|
|
+ this.setPassValue = (newValue) => {
|
|
|
+ passField.value = newValue
|
|
|
+ }
|
|
|
+ this.getPassValue = () => passField.value
|
|
|
+
|
|
|
+ this.setPassValue2 = (newValue) => {
|
|
|
+ passField2.value = newValue
|
|
|
+ }
|
|
|
+ this.getPassValue2 = () => passField2.value
|
|
|
+
|
|
|
+ this.setOpen = (newOpen) => {
|
|
|
+ open = newOpen
|
|
|
+ checkBox.checked = open
|
|
|
+ if (open === true) {
|
|
|
+ passField.type = 'text'
|
|
|
+ passField2.style.display = 'none'
|
|
|
+ } else if (open === false) {
|
|
|
+ passField.type = 'password'
|
|
|
+ passField2.style.display = 'inline'
|
|
|
+ passField2.type = 'password'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+ this.getOpen = () => checkBox.checked
|
|
|
+
|
|
|
+ let btnState = true
|
|
|
+ this.setBtn = (newValue=btnState) => {
|
|
|
+ btnState = newValue
|
|
|
+ button.disabled = btnState
|
|
|
+ if (this.getOpen() ? this.getLoginValue() && this.getPassValue() :
|
|
|
+ this.getLoginValue() && this.getPassValue() && this.getPassValue() === this.getPassValue2()) {
|
|
|
+ button.disabled = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setBtn()
|
|
|
+ this.getBtn = () => button.disabled
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.makeCallback = (name, content) => {
|
|
|
+ if (typeof name === 'function') {
|
|
|
+ name(content)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ loginField.oninput = () => {
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onLoginChange, this.getLoginValue())
|
|
|
+ }
|
|
|
+
|
|
|
+ passField.oninput = () => {
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onPassChange, this.getPassValue())
|
|
|
+ }
|
|
|
+
|
|
|
+ passField2.oninput = () => {
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onPass2Change, this.getPassValue2())
|
|
|
+ }
|
|
|
+
|
|
|
+ checkBox.oninput = () => {
|
|
|
+ if (this.getOpen() === true) {
|
|
|
+ this.setOpen(true)
|
|
|
+ } else {
|
|
|
+ this.setOpen(false)
|
|
|
+ }
|
|
|
+ this.setBtn()
|
|
|
+ this.makeCallback(this.onOpenChange, this.getOpen())
|
|
|
+ }
|
|
|
+
|
|
|
+ button.onclick = () => {
|
|
|
+ this.makeCallback(this.onBtnClick, 'click')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let loginForm = new LoginForm()
|
|
|
}
|
Ivar