|
|
@@ -0,0 +1,106 @@
|
|
|
+function Control(el, {value=0,
|
|
|
+ min=0,
|
|
|
+ max=100,
|
|
|
+ minAngle=0,
|
|
|
+ maxAngle=360,
|
|
|
+ wheelSpeed=0.1,
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ return ((Math.atan2(y, x)/ (2 * Math.PI)) * 360 + 360) % 360;
|
|
|
+ // console.log(x, y, Math.atan2(y, x));
|
|
|
+};
|
|
|
+
|
|
|
+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;
|
|
|
+};
|
|
|
+
|
|
|
+this.setValue(value);
|
|
|
+this.getValue = () => value;
|
|
|
+}
|
|
|
+
|
|
|
+function setRGB(getValue){
|
|
|
+ document.body.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`;
|
|
|
+}
|
|
|
+
|
|
|
+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;
|
|
|
+
|
|
|
+
|
|
|
+const volumeControl = new Control(volume, {
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ wheelSpeed: 0.0005,
|
|
|
+ step: 0.01
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+volumeControl.onchange = setVolume;
|
|
|
+function setVolume() {
|
|
|
+ music.volume = volumeControl.getValue();
|
|
|
+}
|
