|
|
@@ -0,0 +1,112 @@
|
|
|
+function Control(
|
|
|
+ el,
|
|
|
+ { value = 0, min = 0, max = 100, minAngle = 0, maxAngle = 360, wheelSpeed = 0.05, step = 1 } = {}
|
|
|
+) {
|
|
|
+ const img = document.createElement("img");
|
|
|
+ img.src = "1@3x.png";
|
|
|
+ el.append(img);
|
|
|
+
|
|
|
+ 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;
|
|
|
+
|
|
|
+ if (typeof this.onchange === "function" && newValue !== value) this.onchange(newValue);
|
|
|
+
|
|
|
+ value = newValue;
|
|
|
+
|
|
|
+ img.style.transform = `rotate(${getAngle()}deg)`;
|
|
|
+ };
|
|
|
+
|
|
|
+ img.onmousewheel = (event) => {
|
|
|
+ const { deltaY } = event;
|
|
|
+ //console.log(deltaY)
|
|
|
+ this.setValue(value + deltaY * wheelSpeed);
|
|
|
+ event.preventDefault();
|
|
|
+ };
|
|
|
+
|
|
|
+ img.onclick = (event) => {
|
|
|
+ const { layerX } = event;
|
|
|
+ if (layerX < img.width / 2) this.setValue(value - step);
|
|
|
+ else this.setValue(value + step);
|
|
|
+ event.preventDefault();
|
|
|
+ };
|
|
|
+
|
|
|
+ const event2Deg = (event) => {
|
|
|
+ const { layerX, layerY } = event;
|
|
|
+ const { width, height } = img;
|
|
|
+ const x = layerX - width / 2;
|
|
|
+ const y = height / 2 - layerY;
|
|
|
+
|
|
|
+ //console.log(x, y, width, height)
|
|
|
+
|
|
|
+ return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360;
|
|
|
+ };
|
|
|
+
|
|
|
+ let prevAngle = null;
|
|
|
+
|
|
|
+ img.onmousedown = (event) => {
|
|
|
+ prevAngle = event2Deg(event);
|
|
|
+ };
|
|
|
+
|
|
|
+ img.onmousemove = (event) => {
|
|
|
+ if (prevAngle === null) return;
|
|
|
+
|
|
|
+ const currentAngle = event2Deg(event);
|
|
|
+ const deltaValue = (prevAngle - currentAngle) / ratio;
|
|
|
+ //console.log(prevAngle - currentAngle, deltaValue)
|
|
|
+ this.setValue(value + deltaValue);
|
|
|
+ prevAngle = currentAngle;
|
|
|
+ event.preventDefault();
|
|
|
+ };
|
|
|
+
|
|
|
+ img.onmouseup = (event) => {
|
|
|
+ prevAngle = null;
|
|
|
+ };
|
|
|
+ img.onmouseleave = (event) => {
|
|
|
+ prevAngle = null;
|
|
|
+ };
|
|
|
+
|
|
|
+ this.setValue(value);
|
|
|
+ this.getValue = () => value;
|
|
|
+}
|
|
|
+
|
|
|
+//пришейте к нему тэг audio для громкости
|
|
|
+
|
|
|
+function setRGB() {
|
|
|
+ document.body.style.backgroundColor = `rgba(${red.getValue()},${green.getValue()},${blue.getValue()},1)`;
|
|
|
+}
|
|
|
+
|
|
|
+const red = new Control(container1, { min: 0, max: 255 });
|
|
|
+red.onchange = setRGB;
|
|
|
+const green = new Control(container1, { min: 0, max: 255 });
|
|
|
+green.onchange = setRGB;
|
|
|
+const blue = new Control(container1, { min: 0, max: 255 });
|
|
|
+blue.onchange = setRGB;
|
|
|
+
|
|
|
+////сделать три крутилки для RGB
|
|
|
+////и обновлять цвет блока/фона блока при вращении любой из трех
|
|
|
+
|
|
|
+//setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
+
|
|
|
+const audioTag = document.createElement("audio");
|
|
|
+audioTag.id = "audio1";
|
|
|
+audioTag.src = "./world_of_warcraft_stormwind.mp3";
|
|
|
+audioTag.controls = true;
|
|
|
+container1.append(audioTag);
|
|
|
+
|
|
|
+const volumeControl = new Control(container1, {
|
|
|
+ value: 0.1,
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ step: 0.02,
|
|
|
+ wheelSpeed: 0.0002,
|
|
|
+});
|
|
|
+volumeControl.onchange = () => {
|
|
|
+ audioTag.volume = volumeControl.getValue();
|
|
|
+ console.log(volumeControl.getValue());
|
|
|
+};
|
|
|
+audioTag.volume = volumeControl.getValue();
|
|
|
+console.log(volumeControl.getValue());
|
ilya_shyian
