on-codemerge/dist/src/plugins/ResponsivePlugin/components/ResponsiveMenu.cjs

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

"use strict";var d=Object.defineProperty;var u=(s,e,t)=>e in s?d(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var a=(s,e,t)=>u(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../core/ui/PopupManager.cjs"),l=require("../../../icons/desktop.svg.cjs"),b=require("../../../icons/mobile.svg.cjs"),w=require("../../../icons/responsive.svg.cjs"),m=require("../../../icons/tablet.svg.cjs"),i=require("../../../utils/helpers.cjs");class v{constructor(e){a(this,"editor");a(this,"popup");a(this,"viewportChangeHandlers",[]);a(this,"viewports",[]);this.editor=e,this.viewports=[{name:"mobile",icon:b.default,label:e.t("Mobile View"),size:"320px"},{name:"tablet",icon:m.default,label:e.t("Tablet View"),size:"768px"},{name:"desktop",icon:l.default,label:e.t("Desktop View"),size:"1024px"},{name:"largeDesktop",icon:l.default,label:e.t("Large Desktop View"),size:"1440px"},{name:"ultraWide",icon:l.default,label:e.t("Ultra Wide View"),size:"1920px"},{name:"responsive",icon:w.default,label:e.t("Responsive"),size:"Fluid width"}],this.popup=new h.PopupManager(e,{title:e.t("Responsive View"),className:"responsive-menu",closeOnClickOutside:!0,items:[{type:"custom",id:"responsive-content",content:()=>this.createContent()}]})}createContent(){const e=i.createContainer("p-4"),t=i.createContainer("grid grid-cols-3 gap-4");this.viewports.forEach(r=>{const p=this.createViewportButton(r);t.appendChild(p)});const n=i.createContainer("mt-4 pt-4 border-t"),o=i.createP("text-sm text-gray-600");return o.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."),n.appendChild(o),e.appendChild(t),e.appendChild(n),this.setupEventListeners(t),e}createViewportButton(e){const t=i.createButton("",()=>{document.querySelectorAll(".viewport-btn").forEach(c=>c.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 n=i.createContainer("flex flex-col items-center gap-2 p-4 border rounded-lg hover:border-blue-500 transition-colors text-center"),o=i.createContainer();o.innerHTML=e.icon;const r=i.createSpan("text-sm font-medium",e.label),p=i.createSpan("text-xs text-gray-500",e.size);return n.appendChild(o),n.appendChild(r),n.appendChild(p),t.appendChild(n),t}setupEventListeners(e){e.querySelectorAll(".viewport-btn").forEach(t=>{t.addEventListener("click",()=>{const n=t.dataset.viewport;this.notifyViewportChange(n),e.querySelectorAll(".viewport-btn").forEach(o=>{var r;(r=o.querySelector("div"))==null||r.classList.toggle("border-blue-500",o===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}}exports.ResponsiveMenu=v;