|
|
@@ -0,0 +1,108 @@
|
|
|
+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 = 'image/1@3x.png'
|
|
|
+ el.append(img);
|
|
|
+
|
|
|
+ const ratio = (maxAngle - minAngle) / (max - min);
|
|
|
+ const getAngle = () => (value - min) * ratio + minAngle;
|
|
|
+
|
|
|
+ this.getValue = () => value;
|
|
|
+
|
|
|
+ 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);
|
|
|
+ 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
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function setRGB(){
|
|
|
+ document.querySelector('body').style.backgroundColor = `rgb(${red.getValue()},${green.getValue()},${blue.getValue()})`
|
|
|
+}
|
|
|
+
|
|
|
+const red = new Control(container1, {value:0,min:0,max:255});
|
|
|
+red.onchange = setRGB
|
|
|
+// volumeControl.onchange = (value) => console.log(value)
|
|
|
+// console.log(volumeControl.getValue())
|
|
|
+
|
|
|
+const green = new Control(container1, {value:0,min:0,max:255})
|
|
|
+green.onchange = setRGB
|
|
|
+const blue = new Control(container1, {value:0,min:0,max:255})
|
|
|
+blue.onchange = setRGB
|
|
|
+
|
|
|
+setRGB();
|
|
|
+
|
|
|
+/////////////////////////////////////////
|
|
|
+
|
|
|
+
|
|
|
+const audio = document.querySelector('#audio');
|
|
|
+const audioControl = new Control(container1, {value:0.5,min:0,max:1,wheelSpeed:0.0001}) // по дефолту 50% звука ставим
|
|
|
+audio.volume = audioControl.getValue()
|
|
|
+audioControl.onchange = function () {audio.volume = this.getValue()}
|
