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
53 lines (52 loc) • 1.97 kB
JavaScript
var n = Object.defineProperty;
var s = (i, t, o) => t in i ? n(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
var r = (i, t, o) => s(i, typeof t != "symbol" ? t + "" : t, o);
/* empty css */
/* empty css */
import { ResponsiveMenu as l } from "./components/ResponsiveMenu.mjs";
import { ViewportManager as u } from "./services/ViewportManager.mjs";
import { createToolbarButton as a } from "../ToolbarPlugin/utils.mjs";
import h from "../../icons/responsive.svg.mjs";
class B {
constructor() {
r(this, "name", "responsive");
r(this, "editor", null);
r(this, "menu", null);
r(this, "viewportManager");
r(this, "toolbarButton", null);
this.viewportManager = new u();
}
initialize(t) {
this.menu = new l(t), this.editor = t, this.addToolbarButton(), this.setupViewportControls(), this.editor.on("responsive", () => {
var o, e;
(o = this.editor) == null || o.ensureEditorFocus(), (e = this.menu) == null || e.show();
});
}
addToolbarButton() {
var o;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = a({
icon: h,
title: (o = this.editor) == null ? void 0 : o.t("Responsive View"),
onClick: () => {
var e;
return (e = this.menu) == null ? void 0 : e.show();
}
}), t.appendChild(this.toolbarButton));
}
setupViewportControls() {
var o;
if (!this.editor) return;
const t = this.editor.getContainer();
(o = this.menu) == null || o.onViewportChange((e) => {
this.viewportManager.setViewport(t, e);
});
}
destroy() {
var t;
this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.menu && (this.menu.destroy(), this.menu = null), (t = this.editor) == null || t.off("responsive"), this.editor = null, this.toolbarButton = null;
}
}
export {
B as ResponsivePlugin
};