You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
devdocs/assets/javascripts/views/layout/resizer.js

83 lines
2.2 KiB

// TODO: This file was created by bulk-decaffeinate.
// Sanity-check the conversion and remove this comment.
/*
* decaffeinate suggestions:
* DS002: Fix invalid constructor
* DS102: Remove unnecessary code created because of implicit returns
* DS206: Consider reworking classes to avoid initClass
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
*/
(function () {
let MIN = undefined;
let MAX = undefined;
app.views.Resizer = class Resizer extends app.View {
static initClass() {
this.className = "_resizer";
this.events = {
dragstart: "onDragStart",
dragend: "onDragEnd",
};
MIN = 260;
MAX = 600;
}
static isSupported() {
return "ondragstart" in document.createElement("div") && !app.isMobile();
}
init() {
this.el.setAttribute("draggable", "true");
this.appendTo($("._app"));
}
resize(value, save) {
value -= app.el.offsetLeft;
if (!(value > 0)) {
return;
}
value = Math.min(Math.max(Math.round(value), MIN), MAX);
const newSize = `${value}px`;
document.documentElement.style.setProperty("--sidebarWidth", newSize);
if (save) {
app.settings.setSize(value);
}
}
onDragStart(event) {
event.dataTransfer.effectAllowed = "link";
event.dataTransfer.setData("Text", "");
$.on(window, "dragover", this.onDrag);
}
onDrag(event) {
const value = event.pageX;
if (!(value > 0)) {
return;
}
this.lastDragValue = value;
if (this.lastDrag && this.lastDrag > Date.now() - 50) {
return;
}
this.lastDrag = Date.now();
this.resize(value, false);
}
onDragEnd(event) {
$.off(window, "dragover", this.onDrag);
let value = event.pageX || event.screenX - window.screenX;
if (
this.lastDragValue &&
!(this.lastDragValue - 5 < value && value < this.lastDragValue + 5)
) {
// https://github.com/freeCodeCamp/devdocs/issues/265
value = this.lastDragValue;
}
this.resize(value, true);
}
};
app.views.Resizer.initClass();
return app.views.Resizer;
})();