Sheva77
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Другой тайтл ПРИВЕТ 17й</title>
        <style></style>
    </head>
    <body>
        <h1 id="title"></h1>
        <span>asdfg</span>
        <span id="container1"></span>
        <div id="container2"></div>
        <script>
            function Control(
                el,
                { value = 0, step = 1, max = 100, min = 0, maxAngle = 360, minAngle = 0 } = {}
            ) {
                const img = document.createElement("img");
                img.src = "1@3xNew.png";
                img.width = "250";
                el.append(img);

                const ratio = (maxAngle - minAngle) / (max - min);

                const value2Deg = () => ratio * (value - min) + minAngle;

                const changeValue = (delta, fireEvent = false) => {
                    let newValue = value + delta;
                    if (newValue >= max) newValue = max;
                    if (newValue <= min) newValue = min;

                    value = newValue;

                    //console.log(value)

                    if (fireEvent && this.onChange && typeof this.onChange === "function") {
                        this.onChange(value);
                    }

                    img.style.transform = `rotate(${value2Deg()}deg)`;
                };

                const { top, left } = img.getBoundingClientRect();

                changeValue(0);


                console.log(img.width, top, left);

                // img.onclick = (e) => {
                //     changeValue(e.clientX - left > img.width / 2 ? step : -step, true);
                // };

                img.onmousewheel = (e) => {
                    changeValue((e.deltaY * step) / 25, true);
                    e.preventDefault();
                };

                let startDragAngle;

                const calcAngle = ({ layerX, layerY }) => {
                    const deltaX = layerX - img.width / 2;
                    const deltaY = layerY - img.height / 2;
                    return (Math.atan2(deltaY, deltaX) / Math.PI) * 180;
                };

                img.onmousedown = (e) => {
                    startDragAngle = calcAngle(e);
                    e.preventDefault();
                };

                img.onmousemove = (e) => {
                    if (startDragAngle !== undefined) {
                        const currentAngle = calcAngle(e);
                        let deltaAngle = currentAngle - startDragAngle;

                        // дальше идет коррекция перехода через +-180 градусов
                        // но из-за функции onclick осталось иногда подергивание
                        // при выкручивании в крайние положения
                        // onclick пришлось отключить
                        if (Math.abs(deltaAngle) >= 180) {
                            deltaAngle += deltaAngle < 0 ? 360 : -360;
                        } else {
                            deltaAngle += deltaAngle < 0 ? -360 : 360;
                        }
                        deltaAngle = deltaAngle % 360;

                        changeValue(deltaAngle / ratio, true);
                        startDragAngle = currentAngle;
                        e.preventDefault();
                    }
                };

                img.onmouseup = img.onmouseout = (e) => {
                    if (startDragAngle) {
                        startDragAngle = undefined;
                        e.preventDefault();
                    }
                };

                this.setValue = (v) => changeValue(v - value);
                this.changeValue = changeValue;

                this.getValue = () => value;
            }

            const volumeControl = new Control(container1, { value: 50 });

            volumeControl.onChange = (x) => console.log("VOLUME", value);

            const balanceControl = new Control(container2, {
                maxAngle: 90,
                minAngle: -90,
                min: -50,
                max: 50,
                value: 0,
            });
            balanceControl.onChange = (value) => console.log("BALANCE", value);

            //

            //
        </script>
    </body>
</html>