123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- function Control(el, {value=50,
- min=40,
- max=100,
- minAngle=90,
- maxAngle=360,
- wheelSpeed=0.1,
- step=1}={}){
- const img = document.createElement('img')
- img.src = '1@3x.png'
- el.append(img)
- this.getValue = () => value;
- const ratio = (maxAngle - minAngle) / (max - min)
- const getAngle = () => (value - min) * ratio + minAngle
- this.setValue = newValue => {
- if (newValue > max){
- newValue = max
- }
- if (newValue < min){
- newValue = min
- }
- value = newValue
- if ("onchange" in this && typeof this.onchange === "function"){
- this.onchange(value);
- }
- img.style.transform = `rotate(${getAngle()}deg)`;
- }
- img.onmousewheel = e => {
- const {deltaY} = e
- const newValue = value + deltaY*wheelSpeed
- this.setValue(newValue)
- e.preventDefault()
- }
- img.onclick = e => {
- console.log(e, img.width)
- const {layerX} = e
- const {width} = img
- if (layerX > width/2){
- this.setValue(value +step)
- }
- else {
- this.setValue(value -step)
- }
- //найти координаты относительно img
- //найти, левее или правее центра происходит клик
- //если правее - сделать setValue(value +step)
- //если левее - сделать setValue(value -step)
- }
- const toDeg = rad => ((rad * 180)/Math.PI + 360 + 90) % 360
- let prevMouseAngle = null
- img.onmousedown = e => {
- const y = e.layerY - img.height/2
- const x = e.layerX - img.width/2
- prevMouseAngle = toDeg(Math.atan2(y, x))
- // console.log(x,y, getAngle(), prevMouseAngle, prevMouseAngle - getAngle())
- e.preventDefault()
- }
- img.onmousemove = e => {
- if (prevMouseAngle === null) return
- const y = e.layerY - img.height/2
- const x = e.layerX - img.width/2
- let currentAngle = toDeg(Math.atan2(y, x))
- let moveAngleDiff = (currentAngle - prevMouseAngle)
- this.setValue(value + moveAngleDiff/ratio)
- prevMouseAngle = currentAngle
- }
- img.onmouseout = img.onmouseup = () => {
- prevMouseAngle = null
- }
- this.setValue(value);
- }
- const volumeControl = new Control(container1, {value: 50})
- volumeControl.onchange = value => console.log(value)
- console.log(volumeControl.getValue());
- // RGB
- let test = document.querySelector('.test');
- function setRGB (){
- test.style.backgroundColor = 'rgb(' + red.getValue() + ',' + green.getValue() + ',' + blue.getValue() + ')';
- }
- const red = new Control(container2, {min: 0, max: 255})
- red.onchange = setRGB;
- const green = new Control(container2, {min: 0, max: 255})
- green.onchange = setRGB;
- const blue = new Control(container2, {min: 0, max: 255})
- blue.onchange = setRGB;
- // Music
- let blockMusic = document.querySelector('#myPlayer');
- const music = new Control(container3, {min: 0, max: 100})
- music.onchange = (value) => {blockMusic.volume = value / 100};
- //Password
- function Password(parent, open){
- let value = '';
- let passWordForm = document.createElement('input');
- let buttonForm = document.createElement('button');
- buttonForm.textContent = 'invisible';
- passWordForm.placeholder = 'password';
- parent.append(passWordForm);
- parent.append(buttonForm);
- buttonForm.onclick = () => {
- if ("onOpenChange" in this && typeof this.onOpenChange === "function"){
- this.onOpenChange(!!open);
- }
- if (open === true) {
- buttonForm.textContent = 'visible';
- open = false;
- let hidden = '';
- for (let i = 0; i < value.length; i++) {
- hidden += '*';
- }
- passWordForm.value = hidden;
- }
- else if (open === false) {
- buttonForm.textContent = 'invisible';
- open = true;
- passWordForm.value = value;
- }
- }
- passWordForm.oninput = () => {
- value = passWordForm.value;
- if ("onChange" in this && typeof this.onChange === "function"){
- this.onChange(value);
- }
- }
- this.setValue = newValue => {
- if (newValue.length > 4 && newValue.length < 20){
- value = newValue;
- passWordForm.value = value;
- }
- }
- this.getValue = () => value;
- this.setOpen = bool => {
- if (typeof bool === 'boolean') {
- open = bool;
- buttonForm.onclick;
- }
- }
- this.getOpen = () => !!open;
- }
- // 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())
- // LoginForm
- function LoginForm () {
- let login = document.createElement('input');
- login.placeholder = 'login';
- login.oninput = () => disable();
- let pass = new Password(containerForm, true);
- pass.setValue = pass.value;
- pass.onChange = () => disable();
- let btn = document.createElement('button');
- btn.disabled = true;
- btn.textContent = 'Submit';
- containerForm.append(login);
- containerForm.append(btn);
- function disable(data) {
- btn.disabled = !(pass.getValue() !== '' && login.value !== '');
- }
- }
- let loginForm = new LoginForm();
- //LoginForm Constructor
- function LoginFormConstructor() {
- let login = document.createElement('input');
- login.placeholder = 'login';
- login.oninput = () => disable();
- let pass = new Password(containerForm, true);
- pass.setValue = pass.value;
- pass.onChange = () => disable();
- let btn = document.createElement('button');
- btn.disabled = true;
- btn.textContent = 'Submit';
- containerForm.append(login);
- containerForm.append(btn);
- function disable(data) {
- btn.disabled = !(pass.getValue() !== '' && login.value !== '');
- }
- this.getValueLogin = () => login.value;
- this.setValueLogin = newValue => {
- if (newValue.length > 4 && newValue.length < 20){
- login.value = newValue;
- }
- };
- this.getValuePassword = () => pass.getValue();
- this.setValuePassword = newValue => pass.setValue(newValue);
- this.getOpenPassword = () => pass.getOpen();
- this.setOpenPassword = bool => pass.setOpen(bool);
- }
- //Password Verify
- let pass1 = new Password(containerForm1, true);
- let pass2 = new Password(containerForm1, true);
- let btn = document.createElement('button');
- btn.textContent = 'Checked';
- btn.disabled = true;
- containerForm1.append(btn);
- let secondPass = document.createElement('input');
- secondPass.type = 'password';
- secondPass.style.visibility = 'hidden';
- containerForm1.append(secondPass);
- function check(){
- btn.disabled = pass1.getValue() !== pass2.getValue();
- }
- btn.onclick = () => {
- if (btn.disabled === false) {
- if (pass1.getOpen() === false && pass2.getOpen() === false) {
- secondPass.value = pass1.getValue();
- secondPass.style.visibility = 'visible';
- }
- else if(pass1.getOpen() === true && pass2.getOpen() === true) {
- secondPass.value = pass1.getValue();
- secondPass.style.visibility = 'hidden';
- }
- }
- }
- pass1.onChange = () => check();
- pass2.onChange = () => check();
|