Browse Source

Удалить 'Pavlov_hm11/script/script.js'

1 changed files with 0 additions and 89 deletions
  1. 0 89
      Pavlov_hm11/script/script.js

+ 0 - 89
Pavlov_hm11/script/script.js

@@ -1,89 +0,0 @@
-function Control(el, {min=0, 
-                      max=100, 
-                      step=1, 
-                      value=100, 
-                      onChange, 
-                      minAngle=0, 
-                      wheelStepRatio=0.01,
-                      maxAngle=360,
-                      src='img/1@3x.png'} = {}){
-    
-    const img = document.createElement('img');
-    el.appendChild(img);
-    img.src = src;
-    const angleRatio = (maxAngle - minAngle) / (max - min);
-    
-    const getAngle = () => { 
-        const offset = value - min;
-        const angleOffset = offset * angleRatio;
-        const angle = minAngle + angleOffset;
-        return angle
-    };
-    
-    const updateImg = (angle=getAngle()) => img.style.transform = `rotate(${angle}deg)`;
-    updateImg();
-
-    const updateValue = (st=step) => {
-        value >= max ? value -= max : value < 0 ? value += max : value;
-        value += st;
-        updateImg();
-    };
-
-    img.onclick = (e) => {
-        console.log(e);
-        const {x: imgX, width: imgWidth } = img.getBoundingClientRect();
-        const xOnImg = e.clientX - imgX;
-        const st = xOnImg > imgWidth/2 ? step: -step;
-        updateValue(st);
-    };
-
-    img.onmousewheel = e => {
-        const st = e.deltaY*wheelStepRatio;
-        updateValue(st);
-    };
-
-    const toDeg = rad => (360/(2*Math.PI))*rad;
-    let start;
-    
-    const getAngleByCoords = (x, y) => {
-        const {x: imgX, y: imgY, width, height} = img.getBoundingClientRect();
-        const xOnImg = e.clientX - imgX - width/2;
-        const yOnImg = e.clientY - imgY - height/2;
-        return toDeg(Math.atan2(yOnImg, xOnImg));
-    };
-
-    img.onmousedown = e => {
-        start = getAngleByCoords(e);
-        e.preventDefault();
-    };
-    img.onmousemove = e => {
-        if (e.buttons && start){
-        const angleDiff = getAngleByCoords(e)- startAngle;
-        const angle = getAngle();
-        updateImg(angle + angleDiff);
-        };
-    };
-    img.onmouseup = e => {
-        let inValue = endAngle / ((maxAngle - minAngle) / (max - min))%100;
-        value = inValue < 0 ? 75 + (25 + inValue) : inValue;
-        updateImg(endAngle);
-    };
-    this.getValue = function () {
-		return Math.floor(value);
-    }
-}
-let controlRed = new Control(control1, max = 255);
-let controlGreen = new Control(control2, max = 255);
-let controlBlue = new Control(control3, max = 255);
-
-controlRed.setValue;
-controlGreen.setValue;
-controlBlue.setValue;
-
-let body = document.querySelector('body');
-body.onmousemove = () => {            //я запутался и не понял как по другому 
-	control4.style = `background:rgba(${controlRed.getValue()},${controlGreen.getValue()},${controlBlue.getValue()},1);`;
-	control1.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(${controlRed.getValue()},0,0);background:rgb(${controlRed.getValue()},0,0)`;
-	control2.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(0,${controlGreen.getValue()},0);background:rgb(0,${controlGreen.getValue()},0)`;
-	control3.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px rgb(0,0,${controlBlue.getValue()}); background:rgb(0,0,${controlBlue.getValue()});`;
-};