resizer.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. // TODO: This file was created by bulk-decaffeinate.
  2. // Sanity-check the conversion and remove this comment.
  3. /*
  4. * decaffeinate suggestions:
  5. * DS102: Remove unnecessary code created because of implicit returns
  6. * DS206: Consider reworking classes to avoid initClass
  7. * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
  8. */
  9. (function () {
  10. let MIN = undefined;
  11. let MAX = undefined;
  12. app.views.Resizer = class Resizer extends app.View {
  13. static initClass() {
  14. this.className = "_resizer";
  15. this.events = {
  16. dragstart: "onDragStart",
  17. dragend: "onDragEnd",
  18. };
  19. MIN = 260;
  20. MAX = 600;
  21. }
  22. static isSupported() {
  23. return "ondragstart" in document.createElement("div") && !app.isMobile();
  24. }
  25. init() {
  26. this.el.setAttribute("draggable", "true");
  27. this.appendTo($("._app"));
  28. }
  29. resize(value, save) {
  30. value -= app.el.offsetLeft;
  31. if (!(value > 0)) {
  32. return;
  33. }
  34. value = Math.min(Math.max(Math.round(value), MIN), MAX);
  35. const newSize = `${value}px`;
  36. document.documentElement.style.setProperty("--sidebarWidth", newSize);
  37. if (save) {
  38. app.settings.setSize(value);
  39. }
  40. }
  41. onDragStart(event) {
  42. event.dataTransfer.effectAllowed = "link";
  43. event.dataTransfer.setData("Text", "");
  44. $.on(window, "dragover", this.onDrag);
  45. }
  46. onDrag(event) {
  47. const value = event.pageX;
  48. if (!(value > 0)) {
  49. return;
  50. }
  51. this.lastDragValue = value;
  52. if (this.lastDrag && this.lastDrag > Date.now() - 50) {
  53. return;
  54. }
  55. this.lastDrag = Date.now();
  56. this.resize(value, false);
  57. }
  58. onDragEnd(event) {
  59. $.off(window, "dragover", this.onDrag);
  60. let value = event.pageX || event.screenX - window.screenX;
  61. if (
  62. this.lastDragValue &&
  63. !(this.lastDragValue - 5 < value && value < this.lastDragValue + 5)
  64. ) {
  65. // https://github.com/freeCodeCamp/devdocs/issues/265
  66. value = this.lastDragValue;
  67. }
  68. this.resize(value, true);
  69. }
  70. };
  71. app.views.Resizer.initClass();
  72. return app.views.Resizer;
  73. })();