on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
84 lines (83 loc) • 2.96 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var h = Object.defineProperty;
var a = (i, e, t) => e in i ? h(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var r = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
const o = {
mobile: 320,
tablet: 768,
desktop: 1024,
largeDesktop: 1440,
ultraWide: 1920,
responsive: "100%"
};
class l {
constructor() {
r(this, "currentViewport");
r(this, "container", null);
r(this, "resizeObserver", null);
r(this, "changeHandlers", []);
let e = "responsive";
const t = localStorage.getItem("responsive-viewport");
t && t !== "desktop" && o[t] && (e = t), this.currentViewport = e;
}
setViewport(e, t) {
this.container = e, this.currentViewport = t, localStorage.setItem("responsive-viewport", t);
const s = o[t];
if (e.style.transition = "width 0.3s ease-in-out, margin 0.3s ease-in-out", t === "responsive")
e.style.width = "100%", e.style.margin = "0", e.style.maxWidth = "none";
else {
const n = typeof s == "number" ? `${s}px` : s;
e.style.width = n, e.style.margin = "0 auto", e.style.maxWidth = n;
}
this.notifyChange(t, typeof s == "number" ? s : window.innerWidth), this.setupResizeObserver();
}
getCurrentViewport() {
return this.currentViewport;
}
getCurrentWidth() {
return this.container ? this.container.offsetWidth : window.innerWidth;
}
onViewportChange(e) {
this.changeHandlers.push(e);
}
notifyChange(e, t) {
this.changeHandlers.forEach((s) => s(e, t));
}
setupResizeObserver() {
this.resizeObserver && this.resizeObserver.disconnect(), this.currentViewport === "responsive" && this.container && (this.resizeObserver = new ResizeObserver((e) => {
for (const t of e) {
const s = t.contentRect.width;
this.notifyChange("responsive", s);
}
}), this.resizeObserver.observe(this.container));
}
destroy() {
this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.changeHandlers = [], this.container = null;
}
// Методы для быстрого переключения
nextViewport() {
const e = [
"mobile",
"tablet",
"desktop",
"largeDesktop",
"ultraWide",
"responsive"
], s = (e.indexOf(this.currentViewport) + 1) % e.length;
this.container && this.setViewport(this.container, e[s]);
}
previousViewport() {
const e = [
"mobile",
"tablet",
"desktop",
"largeDesktop",
"ultraWide",
"responsive"
], t = e.indexOf(this.currentViewport), s = t === 0 ? e.length - 1 : t - 1;
this.container && this.setViewport(this.container, e[s]);
}
}
export {
l as ViewportManager
};