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
98 lines (97 loc) • 3.72 kB
JavaScript
var d = Object.defineProperty;
var u = (i, e, t) => e in i ? d(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var r = (i, e, t) => u(i, typeof e != "symbol" ? e + "" : e, t);
import { PopupManager as m } from "../../../core/ui/PopupManager.mjs";
import l from "../../../icons/desktop.svg.mjs";
import w from "../../../icons/mobile.svg.mjs";
import b from "../../../icons/responsive.svg.mjs";
import v from "../../../icons/tablet.svg.mjs";
import { createContainer as p, createP as C, createButton as g, createSpan as c } from "../../../utils/helpers.mjs";
class k {
constructor(e) {
r(this, "editor");
r(this, "popup");
r(this, "viewportChangeHandlers", []);
r(this, "viewports", []);
this.editor = e, this.viewports = [
{ name: "mobile", icon: w, label: e.t("Mobile View"), size: "320px" },
{ name: "tablet", icon: v, label: e.t("Tablet View"), size: "768px" },
{ name: "desktop", icon: l, label: e.t("Desktop View"), size: "1024px" },
{
name: "largeDesktop",
icon: l,
label: e.t("Large Desktop View"),
size: "1440px"
},
// Новый вьюпорт
{ name: "ultraWide", icon: l, label: e.t("Ultra Wide View"), size: "1920px" },
// Новый
{
name: "responsive",
icon: b,
label: e.t("Responsive"),
size: "Fluid width"
}
], this.popup = new m(e, {
title: e.t("Responsive View"),
className: "responsive-menu",
closeOnClickOutside: !0,
items: [
{
type: "custom",
id: "responsive-content",
content: () => this.createContent()
}
]
});
}
createContent() {
const e = p("p-4"), t = p("grid grid-cols-3 gap-4");
this.viewports.forEach((s) => {
const a = this.createViewportButton(s);
t.appendChild(a);
});
const o = p("mt-4 pt-4 border-t"), n = C("text-sm text-gray-600");
return n.innerHTML = this.editor.t(
"Select a viewport size to preview your content at different screen widths.<br>Use the resize handles in responsive mode to adjust the width manually."
), o.appendChild(n), e.appendChild(t), e.appendChild(o), this.setupEventListeners(t), e;
}
createViewportButton(e) {
const t = g("", () => {
document.querySelectorAll(".viewport-btn").forEach((h) => h.classList.remove("border-blue-500")), t.classList.add("border-blue-500"), this.notifyViewportChange(e.name), this.popup.hide();
});
t.className = "viewport-btn", t.dataset.viewport = e.name;
const o = p(
"flex flex-col items-center gap-2 p-4 border rounded-lg hover:border-blue-500 transition-colors text-center"
), n = p();
n.innerHTML = e.icon;
const s = c("text-sm font-medium", e.label), a = c("text-xs text-gray-500", e.size);
return o.appendChild(n), o.appendChild(s), o.appendChild(a), t.appendChild(o), t;
}
setupEventListeners(e) {
e.querySelectorAll(".viewport-btn").forEach((t) => {
t.addEventListener("click", () => {
const o = t.dataset.viewport;
this.notifyViewportChange(o), e.querySelectorAll(".viewport-btn").forEach((n) => {
var s;
(s = n.querySelector("div")) == null || s.classList.toggle("border-blue-500", n === t);
}), this.popup.hide();
});
});
}
show() {
this.popup.show();
}
onViewportChange(e) {
this.viewportChangeHandlers.push(e);
}
notifyViewportChange(e) {
this.viewportChangeHandlers.forEach((t) => t(e));
}
destroy() {
this.popup.destroy(), this.viewportChangeHandlers = [], this.viewports = [], this.editor = null, this.popup = null;
}
}
export {
k as ResponsiveMenu
};