app.views.Resizer = class Resizer extends app.View { static className = "_resizer"; static events = { dragstart: "onDragStart", dragend: "onDragEnd", }; static MIN = 260; static 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), Resizer.MIN), Resizer.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", ""); this.onDrag = this.onDrag.bind(this); $.on(window, "dragover", this.onDrag); } onDrag(event) { const value = event.pageX; if (!(value > 0)) { return; } this.lastDragValue = value; if (this.rafPending) { return; } this.rafPending = requestAnimationFrame(() => { this.rafPending = null; this.resize(this.lastDragValue, false); }); } onDragEnd(event) { if (this.rafPending) { cancelAnimationFrame(this.rafPending); this.rafPending = null; } $.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 = class Resizer extends app.View {
static className = "_resizer";
static events = {
dragstart: "onDragStart",
dragend: "onDragEnd",
};
static MIN = 260;
static 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), Resizer.MIN), Resizer.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", "");
this.onDrag = this.onDrag.bind(this);
$.on(window, "dragover", this.onDrag);
}
onDrag(event) {
const value = event.pageX;
if (!(value > 0)) {
return;
}
this.lastDragValue = value;
if (this.rafPending) {
return;
}
this.rafPending = requestAnimationFrame(() => {
this.rafPending = null;
this.resize(this.lastDragValue, false);
});
}
onDragEnd(event) {
if (this.rafPending) {
cancelAnimationFrame(this.rafPending);
this.rafPending = null;
}
$.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);
}
};