fix(builder): limpiar preview, quitar precarga y menu con modos
This commit is contained in:
komkida91
@@ -133,6 +133,7 @@
|
||||
.menu-empty{font-size:12px;color:var(--site-muted)}
|
||||
.menu-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
|
||||
.menu-accordion{display:none;border:1px solid #e5e7eb;border-radius:var(--radius-md);padding:8px 10px;background:var(--site-card);width:100%}
|
||||
.menu-accordion-force{display:block}
|
||||
.menu-accordion summary{list-style:none;cursor:pointer;font-weight:600}
|
||||
.menu-accordion summary::-webkit-details-marker{display:none}
|
||||
.menu-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
|
||||
@@ -446,6 +447,7 @@ const state = {
|
||||
let resizeRaf = 0;
|
||||
let pendingMove = null;
|
||||
let pendingResize = null;
|
||||
let previewStateBefore = null;
|
||||
|
||||
function makeId(){ return "block_" + Date.now() + "_" + Math.floor(Math.random()*1000); }
|
||||
function getDefaultPos(){
|
||||
@@ -456,7 +458,7 @@ const state = {
|
||||
}
|
||||
function defaultData(type){
|
||||
switch(type){
|
||||
case "menu": return { title:"Menu", items:[] };
|
||||
case "menu": return { title:"Menu", items:[], menu_mode:"both" };
|
||||
case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
|
||||
case "text": return { text:"Describe tu negocio aqui." };
|
||||
case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
|
||||
@@ -669,11 +671,14 @@ const state = {
|
||||
const links = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
|
||||
const mobileLinks = items.map(it=>`<a class="site-nav-link" href="#${it.id}">${escapeHtml(it.label)}</a>`).join("");
|
||||
const logo = state.settings.logo_url ? `<img src="${escapeHtml(state.settings.logo_url)}" alt="Logo" />` : "";
|
||||
const mode = (block.data?.menu_mode || "both").toLowerCase();
|
||||
const showInline = mode === "both" || mode === "inline";
|
||||
const showAccordion = mode === "both" || mode === "accordion";
|
||||
return `<div class="site-nav">
|
||||
<div class="site-brand">${logo}<span>${escapeHtml(state.settings.site_name||"GKACHELE")}</span></div>
|
||||
<div class="menu-inline site-nav-links">${links}</div>
|
||||
<div class="menu-inline site-nav-links" style="${showInline ? "" : "display:none"}">${links}</div>
|
||||
<a href="#contacto" class="site-nav-cta">Contactar</a>
|
||||
<details class="menu-accordion">
|
||||
<details class="menu-accordion${showAccordion ? " menu-accordion-force" : ""}" style="${showAccordion ? "" : "display:none"}">
|
||||
<summary>Menu</summary>
|
||||
<div class="menu-links">${mobileLinks}</div>
|
||||
</details>
|
||||
@@ -1087,6 +1092,8 @@ const state = {
|
||||
html += `<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" value="${widthVal}"><div id="blockWidthValue" style="margin-top:4px;color:var(--muted);font-size:12px">${widthVal}%</div></div>`;
|
||||
if (block.type==="menu"){
|
||||
html+=input("Titulo","menuTitle",data.title);
|
||||
const mm = escapeHtml(data.menu_mode || "both");
|
||||
html+=`<div class="row"><label>Modo menu</label><select id="menuMode"><option value="both" ${mm==="both"?"selected":""}>Ambos</option><option value="inline" ${mm==="inline"?"selected":""}>Horizontal</option><option value="accordion" ${mm==="accordion"?"selected":""}>Acordeon</option></select></div>`;
|
||||
} else if (block.type==="hero"){
|
||||
html+=input("Titulo","heroTitle",data.title);
|
||||
html+=input("Subtitulo","heroSubtitle",data.subtitle);
|
||||
@@ -1207,7 +1214,11 @@ const state = {
|
||||
if (widthEl){
|
||||
block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100)));
|
||||
}
|
||||
if (block.type==="menu"){ block.data.title=document.getElementById("menuTitle").value; }
|
||||
if (block.type==="menu"){
|
||||
block.data.title=document.getElementById("menuTitle").value;
|
||||
const mm = document.getElementById("menuMode");
|
||||
if (mm){ block.data.menu_mode = mm.value || "both"; }
|
||||
}
|
||||
else if (block.type==="hero"){
|
||||
block.data.title=document.getElementById("heroTitle").value;
|
||||
block.data.subtitle=document.getElementById("heroSubtitle").value;
|
||||
@@ -1660,7 +1671,7 @@ const state = {
|
||||
if (BUILDER_MODE === "ub24"){
|
||||
state.settings.free_drag = false;
|
||||
}
|
||||
if (!state.blocks.length){ state.blocks=[ {id:makeId(),type:"hero",data:defaultData("hero")},{id:makeId(),type:"features",data:defaultData("features")},{id:makeId(),type:"gallery",data:defaultData("gallery")},{id:makeId(),type:"contact",data:defaultData("contact")} ]; }
|
||||
if (!Array.isArray(state.blocks)){ state.blocks = []; }
|
||||
wireSidebar(); wirePreviewDrop(); wireInlineEditing(); wireSettings(); wireFreeDragToggle(); wireJumpSelect(); wirePreviewSize(); wireThemeToggle();
|
||||
const backBtn = document.getElementById("btnBack");
|
||||
if (backBtn){ backBtn.addEventListener("click",()=>{ window.history.back(); }); }
|
||||
@@ -1672,13 +1683,40 @@ const state = {
|
||||
const sidebar = document.querySelector(".sidebar");
|
||||
const inspector = document.querySelector(".inspector");
|
||||
const main = document.querySelector(".main");
|
||||
const shell = document.querySelector(".preview-shell");
|
||||
const activeSizeBtn = document.querySelector("#btnSizePhone.active, #btnSizeTablet.active, #btnSizeDesktop.active");
|
||||
const activeSizeId = activeSizeBtn ? activeSizeBtn.id : "btnSizeDesktop";
|
||||
if (isPreview && shell){
|
||||
previewStateBefore = {
|
||||
maxWidth: shell.style.maxWidth || "",
|
||||
margin: shell.style.margin || "",
|
||||
activeSizeId
|
||||
};
|
||||
}
|
||||
if (sidebar) sidebar.style.display = isPreview ? "none" : "";
|
||||
if (inspector) inspector.style.display = isPreview ? "none" : "";
|
||||
if (main) main.style.padding = isPreview ? "8px" : "";
|
||||
const shell = document.querySelector(".preview-shell");
|
||||
if (shell){
|
||||
shell.style.maxWidth = isPreview ? "100%" : "";
|
||||
shell.style.margin = isPreview ? "8px auto" : "";
|
||||
if (isPreview){
|
||||
shell.style.maxWidth = "100%";
|
||||
shell.style.margin = "8px auto";
|
||||
shell.classList.remove("size-phone","size-tablet","size-desktop");
|
||||
shell.classList.add("size-desktop");
|
||||
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
|
||||
const b=document.getElementById(id);
|
||||
if (b) b.classList.toggle("active", id==="btnSizeDesktop");
|
||||
});
|
||||
} else if (previewStateBefore){
|
||||
shell.style.maxWidth = previewStateBefore.maxWidth;
|
||||
shell.style.margin = previewStateBefore.margin;
|
||||
shell.classList.remove("size-phone","size-tablet","size-desktop");
|
||||
const map = { btnSizePhone: "size-phone", btnSizeTablet: "size-tablet", btnSizeDesktop: "size-desktop" };
|
||||
shell.classList.add(map[previewStateBefore.activeSizeId] || "size-desktop");
|
||||
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
|
||||
const b=document.getElementById(id);
|
||||
if (b) b.classList.toggle("active", id===previewStateBefore.activeSizeId);
|
||||
});
|
||||
}
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user