main.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. //password
  2. // function Password (parent , open) {
  3. // let passwordInput = document.createElement ('input')
  4. // let passwordCheckbox = document.createElement('input')
  5. // let passwordSpan = document.createElement('span')
  6. // let passwordContent = document.createElement('div')
  7. // parent.append(passwordContent)
  8. // passwordContent.append(passwordInput)
  9. // passwordContent.append(passwordCheckbox)
  10. // passwordContent.append(passwordSpan)
  11. // passwordContent.style.marginTop = "15px"
  12. // passwordContent.style.marginBottom = '20px'
  13. // passwordInput.placeholder = "Enter a password"
  14. // passwordCheckbox.type = 'checkbox'
  15. // passwordCheckbox.style.marginLeft = '10px'
  16. // passwordSpan.innerHTML = "Hide password"
  17. // passwordSpan.style.marginLeft = "10px"
  18. // passwordInput.onchange = () => {
  19. // if(typeof this.onChange === 'function'){
  20. // this.onChange(passwordInput.value)
  21. // }
  22. // }
  23. // function showOrHide() {
  24. // if (passwordCheckbox.checked) {
  25. // passwordInput.setAttribute('type' , 'password')
  26. // } else {
  27. // passwordInput.setAttribute('type','text')
  28. // }
  29. // }
  30. // passwordCheckbox.addEventListener('change' , showOrHide)
  31. // this.setValue = function (text) {
  32. // passwordInput.value = text
  33. // }
  34. // this.getValue = function () {
  35. // return passwordInput.value
  36. // }
  37. // this.setOpen = function (checker) {
  38. // showOrHide.call(this)
  39. // passwordCheckbox.checked = checker
  40. // }
  41. // passwordCheckbox.onclick = () => {
  42. // showOrHide()
  43. // this.onOpenChange("нажали чекбокс")
  44. // }
  45. // this.getOpen = function () {
  46. // return passwordCheckbox.checked
  47. // }
  48. // }
  49. // let p = new Password(document.body, true)
  50. // p.onChange = data => console.log(data)
  51. // p.onOpenChange = open => console.log(open)
  52. // p.setValue('qwerty')
  53. // console.log(p.getValue())
  54. // p.setOpen(false)
  55. // console.log(p.getOpen())
  56. // //loginform
  57. // let loginContent = document.createElement('div')
  58. // let loginH1 = document.createElement('h1')
  59. // loginH1.innerHTML = "LoginForm"
  60. // loginContent.append(loginH1)
  61. // let password = new Password(loginContent,true)
  62. // loginContent.querySelector('span').remove()
  63. // loginContent.querySelector(`input[type="checkbox"]`).remove();
  64. // loginContent.querySelector(`input`).setAttribute("placeholder", "Enter a login")
  65. // document.body.append(loginContent)
  66. // let pass = new Password(loginContent , false)
  67. // loginContent.querySelector('input:nth-child(2)').setAttribute('placeholder' , 'Enter a password')
  68. // let btn = document.createElement('button')
  69. // loginContent.append(btn)
  70. // btn.innerHTML = "Log in"
  71. // btn.style.marginLeft = '20px';
  72. // btn.setAttribute('disabled' , 'disabled')
  73. // pass.onChange = password.onChange = () => {
  74. // if (pass.getValue() && password.getValue()){
  75. // btn.removeAttribute('disabled');
  76. // }else btn.setAttribute('disabled' , 'disabled');
  77. // }
  78. // function LoginFormConstructor (parent , open) {
  79. // let passwordForm = document.createElement('div')
  80. // let loginForm = document.createElement('div')
  81. // let btnForm = document.createElement('div')
  82. // let loginInput = document.createElement('input')
  83. // loginInput.type = 'text'
  84. // loginInput.style.marginBottom = '10px'
  85. // loginInput.placeholder = "Enter a login"
  86. // let passwordInput = document.createElement('input')
  87. // passwordInput.type = 'text'
  88. // passwordInput.placeholder = "Enter a password"
  89. // let checkbox = document.createElement('input')
  90. // checkbox.type = 'checkbox'
  91. // checkbox.style.marginLeft = '7px'
  92. // let btn = document.createElement('button')
  93. // btn.style.marginLeft = '130px'
  94. // btn.style.marginTop = '10px'
  95. // btn.innerHTML = 'Log in'
  96. // // btn.setAttribute('disabled' , 'disabled')
  97. // parent.append(loginForm)
  98. // parent.append(passwordForm)
  99. // parent.append(btnForm)
  100. // loginForm.append(loginInput)
  101. // passwordForm.append(passwordInput)
  102. // passwordForm.append(checkbox)
  103. // btnForm.append(btn)
  104. // function showOrHide() {
  105. // if (checkbox.checked) {
  106. // passwordInput.setAttribute('type' , 'password')
  107. // } else {
  108. // passwordInput.setAttribute('type','text')
  109. // }
  110. // }
  111. // checkbox.addEventListener('change' , showOrHide)
  112. // passwordInput.onchange = () => {
  113. // if(typeof this.onChange === 'function'){
  114. // this.onChange(passwordInput.value)
  115. // }
  116. // }
  117. // checkbox.onclick = () => {
  118. // showOrHide()
  119. // this.onOpenChange("нажали чекбокс")
  120. // }
  121. // this.passwordSetValue = function (text) {
  122. // passwordInput.value = text
  123. // }
  124. // this.passwordGetValue = function () {
  125. // return passwordInput.value
  126. // }
  127. // this.passwordSetOpen = function (checker) {
  128. // checkbox.checked = checker
  129. // showOrHide.call(this)
  130. // }
  131. // this.passwordGetOpen = function () {
  132. // return checkbox.checked
  133. // }
  134. // this.loginSetValue = function (text) {
  135. // loginInput.value = text
  136. // }
  137. // this.loginGetValue = function () {
  138. // return loginInput.value
  139. // }
  140. // // тут не разобрался, как сделать тут прикол с кнопкой
  141. // // loginInput.onChange = passwordInput.onChange = () => {
  142. // // if (passwordInput.passwordGetValue() && loginInput.loginGetValue()){
  143. // // btn.removeAttribute('disabled')
  144. // // } else btn.setAttribute('disabled' , 'disabled')
  145. // // }
  146. // loginInput.onchange = () => {
  147. // if(typeof this.onChange === 'function'){
  148. // this.onLoginChange(loginInput.value)
  149. // }
  150. // }
  151. // }
  152. // let lfc = new LoginFormConstructor(document.body, true)
  153. // lfc.onChange = data => console.log(data)
  154. // lfc.onOpenChange = open => console.log(open)
  155. // lfc.passwordSetValue('qwerty')
  156. // console.log(lfc.passwordGetValue())
  157. // lfc.passwordSetOpen(false)
  158. // console.log(lfc.passwordGetOpen())
  159. // lfc.loginSetValue('admin')
  160. // console.log(lfc.loginGetValue())
  161. // lfc.onLoginChange = something => console.log(something)
  162. //password verify
  163. // function Password (parent , open) {
  164. // let passwordContent = document.createElement('div')
  165. // let passwordContent2 = document.createElement('div')
  166. // let btnContent = document.createElement('div')
  167. // let h = document.createElement('h1')
  168. // h.innerHTML = "Password Verify"
  169. // let passwordInput = document.createElement ('input')
  170. // let passwordInput2 = document.createElement ('input')
  171. // passwordInput2.value = 'qwerty'
  172. // passwordInput2.type = 'password'
  173. // let passwordCheckbox = document.createElement('input')
  174. // let passwordSpan = document.createElement('span')
  175. // let btn = document.createElement('button')
  176. // btn.innerHTML = 'Log in'
  177. // btn.style.marginTop = '10px'
  178. // btn.style.marginLeft = '120px'
  179. // parent.style.zIndex = 1
  180. // parent.append(passwordContent)
  181. // h.style.marginTop = '100px'
  182. // parent.append(passwordContent2)
  183. // parent.append(btnContent)
  184. // passwordContent.append(h)
  185. // passwordContent.append(passwordInput)
  186. // passwordContent.append(passwordCheckbox)
  187. // passwordContent.append(passwordSpan)
  188. // passwordContent2.append(passwordInput2)
  189. // passwordContent.style.marginTop = "15px"
  190. // passwordContent.style.marginBottom = '20px'
  191. // passwordInput.placeholder = "Enter a password"
  192. // btnContent.append(btn)
  193. // passwordCheckbox.type = 'checkbox'
  194. // passwordCheckbox.style.marginLeft = '10px'
  195. // passwordSpan.innerHTML = "Hide password"
  196. // passwordSpan.style.marginLeft = "10px"
  197. // function showOrHide() {
  198. // if (passwordCheckbox.checked) {
  199. // passwordInput.setAttribute('type' , 'password')
  200. // } else {
  201. // passwordInput.setAttribute('type','text')
  202. // }
  203. // }
  204. // passwordCheckbox.addEventListener('change' , showOrHide)
  205. // this.passwordSetOpen = function(bool){
  206. // if(bool === false) {
  207. // passwordInput.type = 'password'
  208. // passwordCheckbox.checked = false
  209. // passwordCheckbox.onchange = function() {
  210. // if (passwordInput.type === "password") {
  211. // passwordInput.type = "text";
  212. // }
  213. // else {
  214. // passwordInput.type = 'password'
  215. // }
  216. // if(passwordInput.type === 'text'){
  217. // passwordInput2.hidden = true
  218. // }
  219. // else if (passwordInput.type === 'password') {
  220. // passwordInput2.hidden = false
  221. // }
  222. // }
  223. // }
  224. // else if (bool === true){
  225. // passwordInput.type = 'text'
  226. // passwordCheckbox.checked = true
  227. // passwordCheckbox.onchange = function() {
  228. // if (passwordInput.type === "password") {
  229. // passwordInput.type = "text";
  230. // }
  231. // else {
  232. // passwordInput.type = 'password'
  233. // }
  234. // }
  235. // }
  236. // }
  237. // this.Verify = function () {
  238. // btn.disabled = true
  239. // passwordInput.oninput = passwordInput2.oninput = () => {
  240. // if (passwordInput.value === passwordInput2.value && passwordInput.value != '') {
  241. // btn.disabled = false
  242. // }
  243. // else {
  244. // btn.disabled = true
  245. // }
  246. // }
  247. // }
  248. // }
  249. // let p = new Password(document.body, true)
  250. // p.passwordSetOpen(false)
  251. // p.Verify()
  252. function Form(el, data, okCallback, cancelCallback){
  253. let formBody = document.createElement('div')
  254. let okButton = document.createElement('button')
  255. okButton.innerHTML = 'OK'
  256. let cancelButton = document.createElement('button')
  257. cancelButton.innerHTML = 'Cancel'
  258. formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
  259. if (typeof okCallback === 'function'){
  260. formBody.appendChild(okButton);
  261. okButton.onclick = (e) => {
  262. console.log(this)
  263. this.okCallback(e)
  264. }
  265. }
  266. if (typeof cancelCallback === 'function'){
  267. formBody.appendChild(cancelButton);
  268. cancelButton.onclick = cancelCallback
  269. }
  270. el.appendChild(formBody)
  271. this.okCallback = okCallback
  272. this.cancelCallback = cancelCallback
  273. this.data = data
  274. let input = document.createElement('input')
  275. for (input in data) {
  276. }
  277. this.validators = {}
  278. }
  279. // let form = new Form(formContainer, {
  280. // name: 'Anakin',
  281. // surname: 'Skywalker',
  282. // married: true,
  283. // birthday: new Date((new Date).getTime() - 86400000 * 30*365)
  284. // }, () => console.log('ok'),() => console.log('cancel') )
  285. // form.okCallback = () => console.log('ok2')
  286. // form.validators.surname = (value, key, data, input) => value.length > 2 &&
  287. // value[0].toUpperCase() == value[0] &&
  288. // !value.includes(' ') ? true : 'Wrong name'
  289. // console.log(form)