|
|
@@ -0,0 +1,78 @@
|
|
|
+function Control(el, {value=50,
|
|
|
+ min=0,
|
|
|
+ max=100,
|
|
|
+ minAngle=-90,
|
|
|
+ maxAngle=90,
|
|
|
+ wheelSpeed=0.1,
|
|
|
+ step=1}={}){
|
|
|
+
|
|
|
+ const img = document.createElement('img')
|
|
|
+ img.src = '13x.png'
|
|
|
+ el.append(img)
|
|
|
+
|
|
|
+ const ratio = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
|
|
|
+ const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу
|
|
|
+
|
|
|
+
|
|
|
+ this.setValue = (newValue) => {
|
|
|
+ if (newValue < min){
|
|
|
+ newValue = min
|
|
|
+ }
|
|
|
+
|
|
|
+ if (newValue > max){
|
|
|
+ newValue = max
|
|
|
+ }
|
|
|
+
|
|
|
+ value = newValue
|
|
|
+
|
|
|
+ if (typeof this.onchange === 'function'){
|
|
|
+ this.onchange(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ img.style.transform = `rotate(${getAngle()}deg)`
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = () => value
|
|
|
+
|
|
|
+ img.onmousewheel = (e) => {
|
|
|
+ const {deltaY} = e
|
|
|
+ //console.log(deltaY)
|
|
|
+ e.preventDefault()
|
|
|
+
|
|
|
+ this.setValue(value + deltaY*wheelSpeed)
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onclick = (e) => {
|
|
|
+ const {layerX} = e
|
|
|
+ console.log(e, layerX)
|
|
|
+ if (layerX > img.width/2)
|
|
|
+ this.setValue(value +step)
|
|
|
+ else
|
|
|
+ this.setValue(value -step)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue(value)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const volumeControl = new Control(container1, {value: 75, minAngle: -180})
|
|
|
+volumeControl.onchange = (value => console.log('ON CHANGE', value)) //на каждый setValue
|
|
|
+//console.log(volumeControl.getValue())
|
|
|
+//пришейте к нему тэг audio для громкости
|
|
|
+
|
|
|
+function setRGB(value, n){
|
|
|
+ let arr = ['rgb', '(', red.getValue(), ', ', green.getValue(), ', ', blue.getValue(), ')']
|
|
|
+ arr[n + n + 2] = value
|
|
|
+ colorBox.style.backgroundColor = arr.join('')
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const red = new Control(container2, {min: 0, max: 255})
|
|
|
+red.onchange = (value) => setRGB(value,0)
|
|
|
+const green = new Control(container2, {min: 0, max: 255})
|
|
|
+green.onchange = (value) => setRGB(value,1)
|
|
|
+const blue = new Control(container2, {min: 0, max: 255})
|
|
|
+blue.onchange = (value) => setRGB(value,2)
|
|
|
+
|
|
|
+//setTimeout(() => volumeControl.setValue(80), 2000)
|
