|
|
@@ -0,0 +1,105 @@
|
|
|
+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 (newValue !== value && typeof this.onchange === "function")
|
|
|
+ this.onchange(newValue);
|
|
|
+
|
|
|
+ value = newValue;
|
|
|
+ img.style.transform = `rotate(${getAngle()}deg)`;
|
|
|
+ }
|
|
|
+ this.setValue(value);
|
|
|
+ this.getValue = () => value;
|
|
|
+ img.onmousewheel = event => {
|
|
|
+ const {deltaY} = event
|
|
|
+ event.preventDefault()
|
|
|
+ this.setValue(value + deltaY * wheelSpeed);
|
|
|
+ }
|
|
|
+
|
|
|
+ const rad2deg = rad => (rad * 360) / (2 * Math.PI)
|
|
|
+ const event2Angle = event => {
|
|
|
+ const {layerX,layerY} = event
|
|
|
+ const rad2deg = rad => (rad * 360) / (2 * Math.PI)
|
|
|
+ const x = layerX - img.width/2
|
|
|
+ const y = -(layerY - img.height/2)
|
|
|
+
|
|
|
+ /* console.log(x,y, rad2deg(Math.atan2(y,x))); */
|
|
|
+ return rad2deg(Math.atan2(y,x));
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onclick = event => {
|
|
|
+ const {layerX,layerY} = event
|
|
|
+ /* console.log(event); */
|
|
|
+ if(layerX < img.width/2){
|
|
|
+ this.setValue(value - step)
|
|
|
+ } else {
|
|
|
+ this.setValue(value + step)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ let startAngle = null;
|
|
|
+ img.onmousedown = event => {
|
|
|
+ startAngle = event2Angle(event)
|
|
|
+ event.preventDefault();
|
|
|
+ }
|
|
|
+ img.onmousemove = event => {
|
|
|
+ if(startAngle === null) return
|
|
|
+
|
|
|
+ const newAngle = event2Angle(event)
|
|
|
+ const angleDiff = newAngle - startAngle;
|
|
|
+ const valueDiff = angleDiff/ratio;
|
|
|
+ this.setValue(value-valueDiff);
|
|
|
+ startAngle = newAngle
|
|
|
+ event.preventDefault()
|
|
|
+ }
|
|
|
+ img.onmouseup = event => {
|
|
|
+ startAngle = null;
|
|
|
+ event.preventDefault();
|
|
|
+ }
|
|
|
+}
|
|
|
+/* let container1 = document.getElementById('container1'); */
|
|
|
+const volumeControl = new Control(container1, {value:25,min:0,max:100,minAngle: -90, maxAngle:90});
|
|
|
+
|
|
|
+//пришейте к нему тэг audio для громкости
|
|
|
+
|
|
|
+function setRGB(){
|
|
|
+ document.body.style.backgroundColor = `rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`;
|
|
|
+ //какой то блок, которому меняем цвет через rgba и цвета крутилок
|
|
|
+}
|
|
|
+const red = new Control(container1, {min: 0, max: 255})
|
|
|
+red.onchange = setRGB
|
|
|
+const blue = new Control(container1, {min: 0, max: 255})
|
|
|
+blue.onchange = setRGB
|
|
|
+const green = new Control(container1, {min:0, max: 255})
|
|
|
+green.onchange = setRGB
|
|
|
+//const red = new Control(container1, {min: 0, max: 255})
|
|
|
+//volumeControl.onchange = setRGB
|
|
|
+//const green = new Control(container1, {min: 0, max: 255})
|
|
|
+//volumeControl.onchange = setRGB
|
|
|
+//const blue = new Control(container1, {min: 0, max: 255})
|
|
|
+//volumeControl.onchange = setRGB
|
|
|
+
|
|
|
+////сделать три крутилки для RGB
|
|
|
+////и обновлять цвет блока/фона блока при вращении любой из трех
|
|
|
+
|
|
|
+//setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
+
|
