|
|
@@ -0,0 +1,111 @@
|
|
|
+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
|
|
|
+ }
|
|
|
+ value = newValue
|
|
|
+ img.style.transform = `rotate(${getAngle()}deg)`
|
|
|
+
|
|
|
+ if (typeof this.onchange === 'function') {
|
|
|
+ this.onchange(value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = () => value
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ img.onmousewheel = e => {
|
|
|
+ const {deltaY} = e
|
|
|
+ const newValue = value + deltaY*wheelSpeed
|
|
|
+ this.setValue(newValue)
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onclick = e => {
|
|
|
+ // console.log(e)
|
|
|
+ const {offsetX, layerX} = e
|
|
|
+ const center = img.width/2
|
|
|
+ if (layerX < center) {
|
|
|
+ this.setValue(value + step)
|
|
|
+ }
|
|
|
+ if (layerX > center) {
|
|
|
+ this.setValue(value - step)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //перевод радианов в градусы и смещение в координаты от 0 до 360 градусов
|
|
|
+ const toDeg = rad => ((rad * 180) / Math.PI + 360 + 90) % 360
|
|
|
+
|
|
|
+ let prevMouseAngle = null
|
|
|
+
|
|
|
+ img.onmousedown = e => {
|
|
|
+ const y = e.layerY - img.height/2
|
|
|
+ const x = e.layerX - img.width/2
|
|
|
+ prevMouseAngle = toDeg(Math.atan2(x,y))
|
|
|
+
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousemove = e => {
|
|
|
+ if (prevMouseAngle === null) return
|
|
|
+ const y = e.layerY - img.height/2
|
|
|
+ const x = e.layerX - img.width/2
|
|
|
+ let currentAngle = toDeg(Math.atan2(x,y))
|
|
|
+ let moveAngleDiff = (currentAngle - prevMouseAngle)
|
|
|
+
|
|
|
+ this.setValue(value - moveAngleDiff/ratio)
|
|
|
+ prevMouseAngle = currentAngle
|
|
|
+
|
|
|
+ console.log()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmouseout = img.onmouseup = e => {
|
|
|
+ prevMouseAngle = null
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.setValue(value)
|
|
|
+}
|
|
|
+
|
|
|
+function setRgb() {
|
|
|
+ color.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
|
|
|
+}
|
|
|
+
|
|
|
+// const volumeControl = new Control(container1, {value: 50})
|
|
|
+// volumeControl.onchange = value => console.log(value)
|
|
|
+
|
|
|
+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
|
|
|
+
|
|
|
+// console.log(volumeControl.getValue())
|
|
|
+// setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
ivar_n
