on-codemerge/dist/src/plugins/ResponsivePlugin/services/ViewportManager.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

/*! 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 */
"use strict";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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={mobile:320,tablet:768,desktop:1024,largeDesktop:1440,ultraWide:1920,responsive:"100%"};class c{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])}}exports.ViewportManager=c;