13_practic_html.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Другой тайтл ПРИВЕТ 17й</title>
  7. <style></style>
  8. </head>
  9. <body>
  10. <h1 id="title"></h1>
  11. <span>asdfg</span>
  12. <span id="container1"></span>
  13. <div id="container2"></div>
  14. <script>
  15. function Control(
  16. el,
  17. { value = 0, step = 1, max = 100, min = 0, maxAngle = 360, minAngle = 0 } = {}
  18. ) {
  19. const img = document.createElement("img");
  20. img.src = "1@3xNew.png";
  21. img.width = "250";
  22. el.append(img);
  23. const ratio = (maxAngle - minAngle) / (max - min);
  24. const value2Deg = () => ratio * (value - min) + minAngle;
  25. const changeValue = (delta, fireEvent = false) => {
  26. let newValue = value + delta;
  27. if (newValue >= max) newValue = max;
  28. if (newValue <= min) newValue = min;
  29. value = newValue;
  30. //console.log(value)
  31. if (fireEvent && this.onChange && typeof this.onChange === "function") {
  32. this.onChange(value);
  33. }
  34. img.style.transform = `rotate(${value2Deg()}deg)`;
  35. };
  36. const { top, left } = img.getBoundingClientRect();
  37. changeValue(0);
  38. console.log(img.width, top, left);
  39. // img.onclick = (e) => {
  40. // changeValue(e.clientX - left > img.width / 2 ? step : -step, true);
  41. // };
  42. img.onmousewheel = (e) => {
  43. changeValue((e.deltaY * step) / 25, true);
  44. e.preventDefault();
  45. };
  46. let startDragAngle;
  47. const calcAngle = ({ layerX, layerY }) => {
  48. const deltaX = layerX - img.width / 2;
  49. const deltaY = layerY - img.height / 2;
  50. return (Math.atan2(deltaY, deltaX) / Math.PI) * 180;
  51. };
  52. img.onmousedown = (e) => {
  53. startDragAngle = calcAngle(e);
  54. e.preventDefault();
  55. };
  56. img.onmousemove = (e) => {
  57. if (startDragAngle !== undefined) {
  58. const currentAngle = calcAngle(e);
  59. let deltaAngle = currentAngle - startDragAngle;
  60. // дальше идет коррекция перехода через +-180 градусов
  61. // но из-за функции onclick осталось иногда подергивание
  62. // при выкручивании в крайние положения
  63. // onclick пришлось отключить
  64. if (Math.abs(deltaAngle) >= 180) {
  65. deltaAngle += deltaAngle < 0 ? 360 : -360;
  66. } else {
  67. deltaAngle += deltaAngle < 0 ? -360 : 360;
  68. }
  69. deltaAngle = deltaAngle % 360;
  70. changeValue(deltaAngle / ratio, true);
  71. startDragAngle = currentAngle;
  72. e.preventDefault();
  73. }
  74. };
  75. img.onmouseup = img.onmouseout = (e) => {
  76. if (startDragAngle) {
  77. startDragAngle = undefined;
  78. e.preventDefault();
  79. }
  80. };
  81. this.setValue = (v) => changeValue(v - value);
  82. this.changeValue = changeValue;
  83. this.getValue = () => value;
  84. }
  85. const volumeControl = new Control(container1, { value: 50 });
  86. volumeControl.onChange = (x) => console.log("VOLUME", value);
  87. const balanceControl = new Control(container2, {
  88. maxAngle: 90,
  89. minAngle: -90,
  90. min: -50,
  91. max: 50,
  92. value: 0,
  93. });
  94. balanceControl.onChange = (value) => console.log("BALANCE", value);
  95. //
  96. //
  97. </script>
  98. </body>
  99. </html>