Tus favoritos

Cargando tu lista guardada…

Hecho

'; } } } function readIds(){ for(const key of ID_KEY_CANDIDATES){ try{ const raw = localStorage.getItem(key); if(!raw) continue; let ids=[]; if(raw.trim().startsWith("[")){ ids = JSON.parse(raw); }else{ ids = raw.split(/[\s,;\n]+/g).filter(Boolean); } ids = ids.map(x=>String(x)).filter((x,i,a)=>a.indexOf(x)===i); if(ids.length){ return {key,ids}; } }catch(e){} } return {key:ID_KEY_CANDIDATES[0],ids:[]}; } function writeIds(ids, keyHint){ const key = keyHint || detectKey(); localStorage.setItem(key, JSON.stringify(ids)); } function detectKey(){ for(const k of ID_KEY_CANDIDATES){ if(localStorage.getItem(k)) return k; } return ID_KEY_CANDIDATES[0]; } async function loadCatalog(){ try{ const res = await fetch("./catalog.json",{cache:"no-store",credentials:"same-origin"}); if(!res.ok) throw new Error("HTTP "+res.status); const data = await res.json(); if(Array.isArray(data)) return data; if(Array.isArray(data?.items)) return data.items; return []; }catch(e){ showToast("No se pudo cargar el catálogo"); return []; } } function itemTitle(it){ return it.title || it.name || it.titulo || ("Item #"+(it.id ?? "?")); } function itemDesc(it){ return it.description || it.descripcion || ""; } function itemPrice(it){ const p = it.price ?? it.precio ?? it.cost ?? it.costo ?? null; if(p==null) return null; const num = Number(p); if(!isFinite(num)) return null; return num; } function itemImage(it){ if(it.image) return it.image; if(it.imagen) return it.imagen; if(Array.isArray(it.images) && it.images[0]) return it.images[0]; if(Array.isArray(it.imagenes) && it.imagenes[0]) return it.imagenes[0]; return DEFAULT_IMAGE; } function currency(n){ try{return new Intl.NumberFormat("es-ES",{style:"currency",currency:"EUR",maximumFractionDigits:0}).format(n);}catch(_){return n+" €"} } function buildCard(it){ const li = document.createElement("li"); li.className = "c1q8o"; li.setAttribute("data-id", String(it.id)); const img = document.createElement("img"); img.className = "f6r3y"; img.loading = "lazy"; img.src = itemImage(it); img.alt = "Imagen de "+itemTitle(it); const box = document.createElement("div"); box.className = "n9t4u"; const top = document.createElement("div"); top.className="a3v7b"; const ttl = document.createElement("div"); ttl.className="u2j6m"; ttl.textContent=itemTitle(it); const price = itemPrice(it); const pr = document.createElement("div"); pr.className="m2e7d"; pr.textContent = price!=null ? currency(price) : "—"; pr.setAttribute("title", price!=null ? "Precio estimado" : "Sin precio"); const rm = document.createElement("button"); rm.className = "q8d1x h7c2l t0k5h"; rm.type="button"; rm.innerHTML = ''; rm.addEventListener("click",()=>removeId(String(it.id))); const desc = document.createElement("div"); desc.className="m5q9u"; desc.textContent = itemDesc(it); const actions = document.createElement("div"); actions.className="d9s3p"; const btnOpen = document.createElement("button"); btnOpen.className="q8d1x"; btnOpen.type="button"; btnOpen.innerHTML='Vista rápida'; btnOpen.addEventListener("click",()=>openQuickView(it)); const btnCopy = document.createElement("button"); btnCopy.className="q8d1x"; btnCopy.type="button"; btnCopy.innerHTML='Copiar ID'; btnCopy.addEventListener("click",()=>{navigator.clipboard?.writeText(String(it.id)).then(()=>showToast("ID copiado")).catch(()=>showToast("No se pudo copiar"));}); top.appendChild(ttl); top.appendChild(pr); top.appendChild(rm); actions.appendChild(btnOpen); actions.appendChild(btnCopy); box.appendChild(top); if(desc.textContent.trim()) box.appendChild(desc); box.appendChild(actions); li.appendChild(img); li.appendChild(box); return li; } function render(){ $list.innerHTML = ""; if(!state.ids.length){ $empty.style.display = ""; $sub.textContent = "No tienes elementos guardados todavía."; return; } $empty.style.display = "none"; const items = state.ids.map(id=>{ const it = state.catalog.find(x=>String(x.id)===String(id)); if(it) return it; return {id,title:"Elemento desconocido",description:"No se encontró en el catálogo actual.",image:DEFAULT_IMAGE}; }); state.items = items; const frag = document.createDocumentFragment(); items.forEach(it=>frag.appendChild(buildCard(it))); $list.appendChild(frag); const cnt = items.length; $sub.innerHTML = ''+cnt+' elemento'+(cnt===1?'':'s')+' guardado'+(cnt===1?'':'s')+''; } function removeId(id){ const i = state.ids.indexOf(String(id)); if(i>-1){ state.ids.splice(i,1); writeIds(state.ids); const el = qs('[data-id="'+CSS.escape(String(id))+'"]'); if(el){ el.style.opacity=".6"; el.style.transform="scale(.98)"; setTimeout(()=>{el.remove(); if(!state.ids.length) render();},160); } showToast("Eliminado de favoritos"); } } function clearAll(){ state.ids = []; writeIds(state.ids); render(); showToast("Lista vaciada"); } function openModal(id){ const m = qs("#"+id); if(!m) return; m.classList.add("vp1o0"); m.setAttribute("aria-hidden","false"); const btnClose = qs('[data-close="'+id+'"]', m); if(btnClose) btnClose.focus({preventScroll:true}); function onKey(e){ if(e.key==="Escape"){ closeModal(id); } } m._esc = onKey; document.addEventListener("keydown", onKey); m.addEventListener("click", (e)=>{ if(e.target===m) closeModal(id); }, {once:true}); } function closeModal(id){ const m = qs("#"+id); if(!m) return; m.classList.remove("vp1o0"); m.setAttribute("aria-hidden","true"); if(m._esc){ document.removeEventListener("keydown", m._esc); delete m._esc; } } qsa("[data-close]").forEach(b=>b.addEventListener("click", e=>closeModal(e.currentTarget.getAttribute("data-close")))); function openQuickView(it){ const id="modal-qv"; let m = qs("#"+id); if(!m){ m = document.createElement("div"); m.id = id; m.className="y8w4z"; m.setAttribute("role","dialog"); m.setAttribute("aria-hidden","true"); m.innerHTML = '

Estudio Sapafi

'; document.body.appendChild(m); qs('[data-close="modal-qv"]',m).addEventListener("click",()=>closeModal("modal-qv")); m.addEventListener("click",(e)=>{ if(e.target===m) closeModal("modal-qv");}); } const box = qs("#qv-cnt", m); box.innerHTML = ""; const img = document.createElement("img"); img.src = itemImage(it); img.alt = "Imagen de "+itemTitle(it); img.className="f6r3y"; const title = document.createElement("div"); title.className="u2j6m"; title.textContent=itemTitle(it); const meta = document.createElement("div"); meta.className="m5q9u"; meta.textContent=itemDesc(it) || "Sin descripción."; const pr = document.createElement("div"); pr.className="m2e7d"; const p=itemPrice(it); pr.textContent = p!=null? currency(p):"—"; const act = document.createElement("div"); act.className="d9s3p"; const rm = document.createElement("button"); rm.className="q8d1x z9p0a"; rm.type="button"; rm.innerHTML='Eliminar'; rm.addEventListener("click",()=>{ removeId(String(it.id)); closeModal("modal-qv"); }); const cp = document.createElement("button"); cp.className="q8d1x"; cp.type="button"; cp.textContent="Copiar ID"; cp.addEventListener("click",()=>{ navigator.clipboard?.writeText(String(it.id)).then(()=>showToast("ID copiado")); }); act.appendChild(rm); act.appendChild(cp); box.appendChild(img); box.appendChild(title); box.appendChild(pr); box.appendChild(meta); box.appendChild(act); openModal("modal-qv"); } function toExportJson(){ const exportable = state.items.map(it=>({ id: it.id, title: itemTitle(it), price: itemPrice(it), image: itemImage(it), description: itemDesc(it) })); return JSON.stringify({generatedAt:new Date().toISOString(), count: exportable.length, items: exportable}, null, 2); } function suggestFilename(){ const d = new Date(); const f = "sapafi_favoritos_"+[ d.getFullYear(), String(d.getMonth()+1).padStart(2,"0"), String(d.getDate()).padStart(2,"0") ].join("")+"_"+[ String(d.getHours()).padStart(2,"0"), String(d.getMinutes()).padStart(2,"0"), String(d.getSeconds()).padStart(2,"0") ].join("")+".json"; return f; } function validateFilename(name){ if(!name) return "Indica un nombre de archivo."; if(!/^[\w\-. ]+\.json$/i.test(name)) return "Usa solo letras, números, guiones y termina en .json"; if(name.length>80) return "Nombre demasiado largo."; return ""; } function validateEmail(email){ if(!email) return ""; const ok = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email); return ok? "Se guardará solo localmente." : "Correo no válido."; } function openExport(){ if(!state.items.length){ showToast("Nada para exportar"); return; } const mod="modal-export"; qs("#exp-json").value = toExportJson(); const fname = suggestFilename(); const $fn = qs("#exp-fname"); $fn.value = fname; qs("#exp-fname-err").textContent = ""; const em = localStorage.getItem("sapafi:exportEmail") || ""; const $em = qs("#exp-email"); $em.value = em; qs("#exp-email-msg").textContent = validateEmail(em); const st = qs("#exp-status"); st.classList.remove("loading"); qs("#exp-status-text").textContent = "Listo para exportar"; openModal(mod); } function doCopy(){ const ta = qs("#exp-json"); ta.select(); ta.setSelectionRange(0, ta.value.length); const ok = document.execCommand("copy"); if(!ok && navigator.clipboard){ navigator.clipboard.writeText(ta.value).then(()=>showToast("JSON copiado")).catch(()=>showToast("No se pudo copiar")); return; } showToast(ok?"JSON copiado":"No se pudo copiar"); } function doDownload(){ const name = qs("#exp-fname").value.trim(); const email = qs("#exp-email").value.trim(); const err = validateFilename(name); qs("#exp-fname-err").textContent = err; const msg = validateEmail(email); qs("#exp-email-msg").textContent = msg; if(err) return; if(email && msg && msg.startsWith("Correo no válido")) return; if(email){ localStorage.setItem("sapafi:exportEmail", email); } const data = qs("#exp-json").value; const blob = new Blob([data], {type:"application/json;charset=utf-8"}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = name; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); showToast("Descarga iniciada"); } function initExportEvents(){ qs("#btn-export").addEventListener("click", openExport); qs("#btn-top-export").addEventListener("click", openExport); qs("#btn-copy").addEventListener("click", doCopy); qs("#btn-download").addEventListener("click", doDownload); qs("#exp-email").addEventListener("input", (e)=>{ const v = e.currentTarget.value.trim(); qs("#exp-email-msg").textContent = validateEmail(v); }); qs("#exp-fname").addEventListener("input", (e)=>{ const v = e.currentTarget.value.trim(); qs("#exp-fname-err").textContent = validateFilename(v); }); } function initImport(){ qs("#btn-import-open").addEventListener("click", ()=>openModal("modal-import")); qs("#btn-import-apply").addEventListener("click", ()=>{ const raw = qs("#imp-ids").value; const ids = (raw.match(/[\w-]+/g)||[]).map(String); if(!ids.length){ showToast("No se detectaron IDs"); return;} const uniq = Array.from(new Set(ids)); state.ids = uniq; writeIds(state.ids); render(); closeModal("modal-import"); showToast("IDs importados: "+uniq.length); }); } function initShare(){ qs("#btn-share").addEventListener("click", async ()=>{ const payload = toExportJson(); const title = "Mis favoritos — Estudio Sapafi"; const text = "Lista de favoritos en JSON"; if(navigator.share){ try{ await navigator.share({title, text}); showToast("Compartido"); }catch(e){ openExport(); } }else{ try{ await navigator.clipboard.writeText(payload); showToast("JSON copiado para compartir"); }catch(e){ openExport(); } } }); } function initTheme(){ try{ const saved = localStorage.getItem("theme")==="dark"; $themeSwitch.checked = saved; $themeSwitch.setAttribute("aria-checked", saved?"true":"false"); }catch(e){} $themeSwitch.addEventListener("change",()=>{ const dark = $themeSwitch.checked; document.documentElement.classList.toggle("dark", dark); $themeSwitch.setAttribute("aria-checked", dark?"true":"false"); try{ localStorage.setItem("theme", dark?"dark":"light"); }catch(e){} }); } function initCookie(){ try{ const ok = localStorage.getItem("sapafi:cookieConsent"); if(ok==="yes"){ $cookie.classList.remove("vp1o0"); return; } $cookie.classList.add("vp1o0"); }catch(e){} qs("#cookie-accept").addEventListener("click",()=>{ try{ localStorage.setItem("sapafi:cookieConsent","yes"); }catch(e){} $cookie.classList.remove("vp1o0"); showToast("Preferencias guardadas"); }); qs("#cookie-decline").addEventListener("click",()=>{ try{ localStorage.removeItem("sapafi:cookieConsent"); localStorage.removeItem("theme"); }catch(e){} $cookie.classList.remove("vp1o0"); showToast("Cookies deshabilitadas"); }); } function initMisc(){ qs("#btn-clear").addEventListener("click", ()=>openModal("modal-confirm")); qs("#btn-confirm-clear").addEventListener("click", ()=>{ closeModal("modal-confirm"); clearAll(); }); qs("#btn-how").addEventListener("click", ()=>openModal("modal-how")); } async function init(){ await Promise.all([ mountPart("hdr-mount","./header.html"), mountPart("ftr-mount","./footer.html") ]); initTheme(); initCookie(); initMisc(); initExportEvents(); initImport(); initShare(); const r = readIds(); state.ids = r.ids; state.catalog = await loadCatalog(); state.loaded = true; render(); } document.addEventListener("DOMContentLoaded", init); })();

Menú

Crear cuenta

Tus favoritos

Aún no hay favoritos

Menú

Crear cuenta