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
3 lines (2 loc) • 3.68 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 */
"use strict";var C=Object.defineProperty;var m=(i,e,t)=>e in i?C(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var l=(i,e,t)=>m(i,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../core/ui/PopupManager.cjs"),g=require("../services/TemplateManager.cjs"),a=require("../../../utils/helpers.cjs");class y{constructor(e){l(this,"editor");l(this,"popup");l(this,"templateManager");l(this,"callback",null);l(this,"searchInput",null);l(this,"templatesContainer",null);l(this,"selectedCategory","all");this.editor=e,this.templateManager=new g.TemplateManager(e),this.templateManager.initialize(),this.popup=new u.PopupManager(e,{title:e.t("Form Templates"),className:"templates-modal",closeOnClickOutside:!0,buttons:[{label:e.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"templates-content",content:()=>this.createContent()}]})}createContent(){const e=a.createContainer("templates-modal-content"),t=a.createContainer("search-container"),n=a.createLabel("Search templates:");this.searchInput=a.createInputField("text","Search templates...","",c=>{this.renderTemplates()}),t.appendChild(n),t.appendChild(this.searchInput),e.appendChild(t);const r=a.createContainer("filter-container"),o=a.createLabel("Category:"),s=a.createInputField("select","","all",c=>{this.selectedCategory=c,this.renderTemplates()}),p=this.templateManager.getCategories(),d=this.templateManager.getCategoryNames();return s.innerHTML='<option value="all">All Categories</option>',p.forEach(c=>{const h=document.createElement("option");h.value=c,h.textContent=d[c],s.appendChild(h)}),r.appendChild(o),r.appendChild(s),e.appendChild(r),this.templatesContainer=a.createContainer("templates-grid"),e.appendChild(this.templatesContainer),this.renderTemplates(),e}renderTemplates(){if(!this.templatesContainer)return;this.templatesContainer.innerHTML="";const t=this.templateManager.getTemplates().filter(n=>{var s;const r=this.selectedCategory==="all"||n.category===this.selectedCategory,o=!((s=this.searchInput)!=null&&s.value)||n.name.toLowerCase().includes(this.searchInput.value.toLowerCase())||n.description.toLowerCase().includes(this.searchInput.value.toLowerCase());return r&&o});if(t.length===0){const n=a.createContainer("no-templates");n.textContent=this.editor.t("No templates found"),this.templatesContainer.appendChild(n);return}t.forEach(n=>{const r=this.createTemplateCard(n);this.templatesContainer.appendChild(r)})}createTemplateCard(e){const t=a.createContainer("template-card"),n=a.createContainer("template-card-header"),r=a.createContainer("template-card-title");r.textContent=e.name;const o=a.createContainer("template-card-category");o.textContent=this.templateManager.getCategoryNames()[e.category],n.appendChild(r),n.appendChild(o);const s=a.createContainer("template-card-description");s.textContent=e.description;const p=a.createContainer("template-card-fields");p.textContent=`${e.config.fields.length} fields`;const d=a.createButton(this.editor.t("Use Template"),()=>this.selectTemplate(e),"primary");return t.appendChild(n),t.appendChild(s),t.appendChild(p),t.appendChild(d),t}selectTemplate(e){var t;(t=this.callback)==null||t.call(this,e),this.popup.hide()}show(e){this.callback=e,this.popup.show()}destroy(){this.popup.destroy(),this.callback=null,this.searchInput=null,this.templatesContainer=null}}exports.TemplatesModal=y;