Загрузить файлы 'Pavlov_hm11/script'

Pavlov_hm11/script/script.js

@@ -0,0 +1,89 @@
+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');
+control1.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #fe3f44;background:#fe3f44`;
+control2.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #80ea69;background:#80ea69`;
+control3.style = `width:362px;height:362px;border-radius: 50%;border: solid 10px #3e94d1; background:#3e94d1`;
+body.onmousemove = () => {            //я хз
+	control4.style = `background:rgba(${controlRed.getValue()},${controlGreen.getValue()},${controlBlue.getValue()},1);height: 362px;width: 362px;border-radius: 50%; border:solid 10px pink;`;
+};