Spaces:
Running
Running
| /* Pactsprig app: agreement picker, guided Cover Page form, live preview, PDF / DOCX / print, saved companies, | |
| * presets and backup. Everything stays in this browser. © 2026 CyberMax. All rights reserved. */ | |
| (function () { | |
| "use strict"; | |
| var C = window.PactCore, P = window.PactPDF, D = window.PactDOCX, X = window.CMXPro; | |
| var KEY = "pactsprig:v1", FREE_PDFS = 3; | |
| var AGREEMENTS = [ | |
| { id: "mnda", name: "Mutual NDA", desc: "Protect what both sides share", free: true }, | |
| { id: "psa", name: "Professional Services", desc: "Key Terms + Statement of Work", free: false }, | |
| { id: "design-partner", name: "Design Partner", desc: "Early access for feedback", free: false }, | |
| ]; | |
| var tpls = {}, state, tpl, model, renderTimer; | |
| function $(id) { return document.getElementById(id); } | |
| function pro() { return X.isPro(); } | |
| function toast(m) { X.toast(m); } | |
| function upsell(msg, from) { X.upsell(msg || "That is part of Pactsprig Pro.", from); } | |
| function esc(s) { return String(s == null ? "" : s).replace(/[&<>"]/g, function (c) { return { "&": "&", "<": "<", ">": ">", '"': """ }[c]; }); } | |
| function agreementInfo(id) { return AGREEMENTS.filter(function (a) { return a.id === id; })[0] || AGREEMENTS[0]; } | |
| function partiesEmpty() { return state.parties.every(function (p) { return !((p.company || "") + (p.name || "")).trim(); }); } | |
| function allowed() { return agreementInfo(state.agreement).free || pro(); } | |
| /* ---------- storage ---------- */ | |
| function load() { | |
| var s = null; | |
| try { s = JSON.parse(localStorage.getItem(KEY) || "null"); } catch (e) { s = null; } | |
| if (!s || typeof s !== "object") s = { fresh: true }; | |
| s.agreement = agreementInfo(s.agreement).id; | |
| s.docs = s.docs || {}; | |
| s.parties = Array.isArray(s.parties) && s.parties.length === 2 ? s.parties : [C.emptyParty(), C.emptyParty()]; | |
| s.savedParties = Array.isArray(s.savedParties) ? s.savedParties : []; | |
| s.presets = Array.isArray(s.presets) ? s.presets : []; | |
| s.page = s.page === "A4" ? "A4" : "Letter"; | |
| return s; | |
| } | |
| function save() { | |
| try { var c = Object.assign({}, state); delete c.fresh; localStorage.setItem(KEY, JSON.stringify(c)); } catch (e) { /* private mode */ } | |
| } | |
| function getTpl(id) { | |
| if (tpls[id]) return Promise.resolve(tpls[id]); | |
| return fetch("templates/" + id + ".json").then(function (r) { if (!r.ok) throw new Error("template " + id); return r.json(); }).then(function (t) { tpls[id] = t; return t; }); | |
| } | |
| /* ---------- picker ---------- */ | |
| function renderPicker() { | |
| $("picker").innerHTML = AGREEMENTS.map(function (a) { | |
| return '<button type="button" role="radio" data-agreement="' + a.id + '" aria-checked="' + (a.id === state.agreement) + '"><b>' + esc(a.name) + "</b><span>" + esc(a.desc) + "</span>" + | |
| (a.free ? '<i class="tag free">Free</i>' : '<i class="tag pro">Pro</i>') + "</button>"; | |
| }).join(""); | |
| } | |
| $("picker").addEventListener("click", function (e) { | |
| var b = e.target.closest("button[data-agreement]"); | |
| if (!b) return; | |
| switchTo(b.getAttribute("data-agreement")); | |
| }); | |
| $("picker").addEventListener("keydown", function (e) { | |
| if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].indexOf(e.key) < 0) return; | |
| var i = AGREEMENTS.findIndex(function (a) { return a.id === state.agreement; }), d = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : -1; | |
| var next = AGREEMENTS[(i + d + AGREEMENTS.length) % AGREEMENTS.length].id; | |
| e.preventDefault(); | |
| switchTo(next).then(function () { var b = document.querySelector('[data-agreement="' + next + '"]'); if (b) b.focus(); }); | |
| }); | |
| function switchTo(id, useExample) { | |
| return getTpl(id).then(function (t) { | |
| state.agreement = id; tpl = t; | |
| var doc = state.docs[id], ex = C.example(t, C.isoToday()); | |
| if (useExample === "blank") { state.docs[id] = { values: C.defaults(t, C.isoToday()) }; state.demo = false; } | |
| else if (useExample === true || (!doc && (state.demo || state.fresh || partiesEmpty()))) { | |
| // examples come with their own parties; keep the user's real parties if they typed some | |
| state.docs[id] = { values: ex.values }; | |
| if (useExample === true || state.demo || state.fresh || partiesEmpty()) { state.parties = ex.parties; state.demo = true; } | |
| } else if (!doc) state.docs[id] = { values: C.defaults(t, C.isoToday()) }; | |
| else { | |
| // add any keys a newer template introduced | |
| if (state.demo) state.parties = ex.parties; | |
| var dv = C.defaults(t, C.isoToday()); | |
| Object.keys(dv).forEach(function (k) { if (!(k in doc.values)) doc.values[k] = dv[k]; }); | |
| } | |
| if (!agreementInfo(id).free && !pro()) toast(t.name + " is part of Pro. You can fill it in and preview it; downloads need Pro."); | |
| renderPicker(); renderParties(); renderForm(); renderPreview(); save(); | |
| }).catch(function (err) { if (window.console) console.warn(err); toast("Could not load that agreement. Check your connection and try again."); }); | |
| } | |
| /* ---------- parties ---------- */ | |
| function renderParties() { | |
| var roles = tpl.partyRoles || tpl.parties || ["Party 1", "Party 2"]; | |
| [0, 1].forEach(function (i) { | |
| $("pl-" + i).textContent = roles[i]; | |
| ["company", "name", "title", "address"].forEach(function (f) { var el = $("p" + i + "-" + f); if (el !== document.activeElement) el.value = state.parties[i][f] || ""; }); | |
| }); | |
| var opts = '<option value="">Saved companies…</option>' + state.savedParties.map(function (p, i) { return '<option value="' + i + '">' + esc(p.company || p.name) + "</option>"; }).join(""); | |
| Array.prototype.forEach.call(document.querySelectorAll("select[data-load-party]"), function (s) { s.innerHTML = opts; s.hidden = !state.savedParties.length; }); | |
| } | |
| document.querySelector(".parties").addEventListener("input", function (e) { | |
| var el = e.target, i = el.getAttribute("data-party"), f = el.getAttribute("data-field"); | |
| if (i == null || !f) return; | |
| state.parties[+i][f] = el.value; | |
| state.demo = false; | |
| schedule(); | |
| }); | |
| document.querySelector(".parties").addEventListener("click", function (e) { | |
| var b = e.target.closest("[data-save-party]"); | |
| if (!b) return; | |
| if (!pro()) return upsell("Saved companies are part of Pro: save a company once and fill it into any agreement.", "parties"); | |
| var p = Object.assign({}, state.parties[+b.getAttribute("data-save-party")]); | |
| if (!(p.company || "").trim()) return toast("Type the company name first."); | |
| var at = state.savedParties.findIndex(function (q) { return (q.company || "").toLowerCase() === p.company.toLowerCase(); }); | |
| if (at > -1) state.savedParties[at] = p; else state.savedParties.push(p); | |
| save(); renderParties(); renderPresets(); | |
| toast("Saved " + p.company + "."); | |
| }); | |
| document.querySelector(".parties").addEventListener("change", function (e) { | |
| var s = e.target.closest("select[data-load-party]"); | |
| if (!s || s.value === "") return; | |
| if (!pro()) { s.value = ""; return upsell(null, "parties"); } | |
| var p = state.savedParties[+s.value]; | |
| if (p) { state.parties[+s.getAttribute("data-load-party")] = Object.assign(C.emptyParty(), p); renderParties(); renderPreview(); save(); } | |
| s.value = ""; | |
| }); | |
| /* ---------- cover page form ---------- */ | |
| function inputFor(key, spec, vals, label) { | |
| var v = vals[key] == null ? "" : vals[key], id = "v-" + key.replace(/[^A-Za-z0-9]+/g, "-"); | |
| var aria = ' aria-label="' + esc(label) + '"'; | |
| if (spec.k === "sel") return '<select id="' + id + '" data-key="' + esc(key) + '"' + aria + ">" + spec.o.map(function (o) { return "<option" + (o === v ? " selected" : "") + ">" + esc(o) + "</option>"; }).join("") + "</select>"; | |
| if (spec.k === "date") return '<input type="date" id="' + id + '" data-key="' + esc(key) + '" value="' + esc(v) + '"' + aria + ">"; | |
| if (spec.k === "area") return '<textarea id="' + id + '" class="wide" rows="4" data-key="' + esc(key) + '" placeholder="' + esc(spec.ph || "") + '"' + aria + ">" + esc(v) + "</textarea>"; | |
| var num = spec.k === "num"; | |
| return '<input id="' + id + '" class="inl' + (num ? " num" : "") + '" data-key="' + esc(key) + '" value="' + esc(v) + '"' + (num ? ' inputmode="decimal"' : "") + ' placeholder="' + esc(spec.ph || "") + '" style="--w:' + (spec.w || 12) + 'ch"' + aria + ">"; | |
| } | |
| /** Option text with its inline inputs: "Expires {years} year(s)" -> text + <input>. */ | |
| function inline(t, key, ins, vals, label) { | |
| return String(t).replace(/\{(@?\w+)\}|([^{]+)/g, function (m, name, txt) { | |
| if (txt) return '<span class="ot">' + esc(txt) + "</span>"; | |
| if (name.charAt(0) === "@") return '<span class="ot glob">' + esc(name === "@p1" ? "[Party 1 company]" : name === "@p2" ? "[Party 2 company]" : "[Key Terms Effective Date]") + "</span>"; | |
| return ins && ins[name] ? inputFor(key + "." + name, ins[name], vals, label + " " + name) : esc(m); | |
| }); | |
| } | |
| function optionsHtml(pgId, row, vals) { | |
| var k = pgId + ":" + row.id, name = "r-" + k.replace(/[^A-Za-z0-9]+/g, "-"); | |
| var html = row.lead ? '<p class="lead">' + esc(row.lead) + "</p>" : ""; | |
| function subs(o, ok) { | |
| if (!o.sub) return ""; | |
| return '<div class="subs">' + o.sub.map(function (s) { | |
| var sk = ok + "." + s.id; | |
| return '<div class="opt-row"><label class="optl"><input type="checkbox" data-key="' + esc(sk) + '"' + (vals[sk] ? " checked" : "") + "></label><div class=\"opt-body\">" + inline(s.t, sk, s.in, vals, row.label) + "</div></div>"; | |
| }).join("") + "</div>"; | |
| } | |
| (row.options || []).forEach(function (o) { | |
| var ok = k + "." + o.id, on = row.type === "choice" ? vals[k] === o.id : !!vals[ok]; | |
| var ctl = row.type === "choice" ? '<input type="radio" name="' + name + '" data-key="' + esc(k) + '" value="' + esc(o.id) + '"' + (on ? " checked" : "") + ">" : '<input type="checkbox" data-key="' + esc(ok) + '"' + (on ? " checked" : "") + ">"; | |
| html += '<div class="opt-row' + (on ? " on" : "") + '"><label class="optl">' + ctl + '</label><div class="opt-body">' + inline(o.t, ok, o.in, vals, row.label) + (on ? subs(o, ok) : "") + "</div></div>"; | |
| }); | |
| if (row.type === "choice" && row.optional) { | |
| html += '<div class="opt-row' + (!vals[k] ? " on" : "") + '"><label class="optl"><input type="radio" name="' + name + '" data-key="' + esc(k) + '" value=""' + (!vals[k] ? " checked" : "") + '></label><div class="opt-body"><span class="ot muted">None (leave this out)</span></div></div>'; | |
| } | |
| return html; | |
| } | |
| function rowHtml(pg, row, vals) { | |
| if (row.type === "heading") return '<h3 class="fh">' + esc(row.label) + "</h3>"; | |
| var k = pg.id + ":" + row.id, id = "v-" + k.replace(/[^A-Za-z0-9]+/g, "-"); | |
| var free = row.type === "text" || row.type === "textarea"; | |
| var head = row.omitLabel ? "" : '<div class="fl"><label' + (free ? ' for="' + id + '"' : "") + ">" + esc(row.label) + (row.optional ? ' <span class="opt">optional</span>' : "") + "</label>" + (row.sub ? '<span class="fsub">' + esc(row.sub) + "</span>" : "") + "</div>"; | |
| var body; | |
| if (row.type === "text" || row.type === "textarea") { | |
| body = row.type === "text" ? '<input id="' + id + '" data-key="' + esc(k) + '" value="' + esc(vals[k]) + '" placeholder="' + esc(row.ph || "") + '">' | |
| : '<textarea id="' + id + '" rows="3" data-key="' + esc(k) + '" placeholder="' + esc(row.ph || "") + '">' + esc(vals[k]) + "</textarea>"; | |
| } else if (row.type === "line") body = '<div class="line">' + inline(row.t, k, row.in, vals, row.label) + "</div>"; | |
| else if (row.type === "fixed") body = '<div class="line fixed">' + esc(row.t) + "</div>"; | |
| else body = '<div class="opts" role="group" aria-label="' + esc(row.label || row.lead || "") + '">' + optionsHtml(pg.id, row, vals) + "</div>"; | |
| return '<div class="frow' + (row.omitLabel ? " cont" : "") + '" data-row="' + esc(k) + '">' + head + body + (row.help ? '<p class="help">' + esc(row.help) + "</p>" : "") + "</div>"; | |
| } | |
| function renderForm() { | |
| var vals = state.docs[state.agreement].values; | |
| $("cover-form").innerHTML = tpl.cover.map(function (pg, i) { | |
| var title = pg.kicker ? (pg.kicker === "SOW" ? "Statement of Work (SOW)" : pg.kicker) : "Cover Page"; | |
| return '<details class="card cover-card" open data-page="' + esc(pg.id) + '"><summary><h2>' + esc(title) + '</h2><span class="step">' + esc(tpl.short || tpl.name) + "</span></summary>" + | |
| (i === 0 ? '<p class="hint">' + esc(tpl.blurb || "") + "</p>" : "") + pg.rows.map(function (r) { return rowHtml(pg, r, vals); }).join("") + "</details>"; | |
| }).join(""); | |
| } | |
| function onField(e) { | |
| var el = e.target, key = el.getAttribute && el.getAttribute("data-key"); | |
| if (!key) return; | |
| var vals = state.docs[state.agreement].values; | |
| if (el.type === "checkbox") vals[key] = el.checked; | |
| else vals[key] = el.value; | |
| if (el.type === "checkbox" || el.type === "radio") { | |
| // re-draw this row so nested options appear / disappear | |
| var rowEl = el.closest(".frow"), rk = rowEl && rowEl.getAttribute("data-row"); | |
| var pgId = rk.split(":")[0], rid = rk.split(":")[1]; | |
| var pg = tpl.cover.filter(function (p) { return p.id === pgId; })[0], row = pg.rows.filter(function (r) { return r.id === rid; })[0]; | |
| var tmp = document.createElement("div"); | |
| tmp.innerHTML = rowHtml(pg, row, vals); | |
| rowEl.replaceWith(tmp.firstChild); | |
| var again = document.querySelector('[data-row="' + rk + '"] [data-key="' + key + '"]' + (el.type === "radio" ? '[value="' + el.value + '"]' : "")); | |
| if (again) again.focus(); | |
| } | |
| schedule(); | |
| } | |
| $("cover-form").addEventListener("input", onField); | |
| $("cover-form").addEventListener("change", function (e) { if (e.target.type === "checkbox" || e.target.type === "radio" || e.target.tagName === "SELECT") onField(e); }); | |
| /* ---------- preview ---------- */ | |
| function schedule() { clearTimeout(renderTimer); renderTimer = setTimeout(function () { renderPreview(); save(); }, 120); } | |
| function itemHtml(it) { | |
| var t = esc(it.t).split(esc(C.BLANK)).join('<span class="miss">' + C.BLANK + "</span>"); | |
| return '<div class="d-it' + (it.bullet ? " b" : "") + (it.lead ? " lead" : "") + '" style="--lvl:' + it.lvl + '">' + t + "</div>"; | |
| } | |
| function runsHtml(b) { | |
| var h = ""; | |
| if (b.l === 1 && b.h && b.r) h += "<b>" + esc(b.n + " " + b.h) + ".</b> "; | |
| else if (b.n) h += b.l <= 2 ? "<b>" + esc(b.n) + "</b> " : esc(b.n) + " "; | |
| if (b.h3) h += "<b>" + esc(b.h3) + "</b> "; | |
| (b.r || []).forEach(function (r) { h += typeof r === "string" ? esc(r) : r[0] === "b" ? "<b>" + esc(r[1]) + "</b>" : '<span class="v">' + esc(r[1]) + "</span>"; }); | |
| return h; | |
| } | |
| function renderPreview() { | |
| var d = state.docs[state.agreement]; | |
| model = C.build(tpl, { values: d.values, parties: state.parties }); | |
| var h = ""; | |
| model.pages.forEach(function (pg) { | |
| h += '<section class="d-cover">' + (pg.kicker ? '<div class="d-kicker">' + esc(pg.kicker) + "</div>" : "") + '<h2 class="d-title">' + esc(pg.title) + "</h2>"; | |
| if (pg.intro) h += '<p class="d-intro">' + esc(pg.intro) + "</p>"; | |
| if (pg.lead) h += '<p class="d-lead">' + esc(pg.lead) + "</p>"; | |
| h += '<div class="d-rows">' + pg.rows.map(function (r) { | |
| if (r.heading) return '<div class="d-head">' + esc(r.heading) + "</div>"; | |
| return '<div class="d-row"><div class="d-l"><b>' + esc(r.label) + "</b>" + (r.sub ? "<small>" + esc(r.sub) + "</small>" : "") + '</div><div class="d-r">' + r.items.map(itemHtml).join("") + "</div></div>"; | |
| }).join("") + "</div>"; | |
| if (pg.closing) h += '<p class="d-closing">' + esc(pg.closing) + "</p>"; | |
| h += '<table class="d-sign"><thead><tr><th></th>' + pg.sign.heads.map(function (x) { return "<th>" + esc(x) + "</th>"; }).join("") + "</tr></thead><tbody>" + | |
| pg.sign.rows.map(function (r) { | |
| return '<tr><th scope="row">' + esc(r.label) + (r.note ? "<small>" + esc(r.note) + "</small>" : "") + "</th>" + r.values.map(function (v) { return r.line ? '<td class="sigline"><span></span></td>' : "<td>" + (esc(v) || '<span class="miss">' + C.BLANK + "</span>") + "</td>"; }).join("") + "</tr>"; | |
| }).join("") + "</tbody></table>"; | |
| h += '<p class="d-att">' + esc(model.attribution) + "</p></section>"; | |
| }); | |
| h += '<section class="d-terms"><h2 class="d-tt">' + esc(model.termsTitle) + '</h2><p class="d-tn">' + esc(model.termsNote) + "</p>"; | |
| h += model.terms.map(function (b) { | |
| if (b.l === 1 && b.h && !b.r) return '<h3 class="d-sec">' + esc(b.n + " " + b.h) + "</h3>"; | |
| return '<p class="d-p l' + b.l + '">' + runsHtml(b) + "</p>"; | |
| }).join(""); | |
| h += '<p class="d-att end"><a href="' + esc(model.termsUrl) + '" target="_blank" rel="noopener">' + esc(model.attribution.replace(/ CC BY 4\.0\.$/, "")) + '</a> <a href="' + esc(model.licenceUrl) + '" target="_blank" rel="noopener">CC BY 4.0</a>.</p>' + | |
| '<p class="d-src">Standard Terms: ' + esc(model.termsUrl) + " · Licence: " + esc(model.licenceUrl) + "</p></section>"; | |
| h += '<p class="d-credit">' + esc(C.CREDIT) + "</p>"; | |
| if (!allowed()) h += '<div class="d-lock"><p><b>' + esc(tpl.name) + "</b> is part of Pactsprig Pro. Keep filling it in; downloads and printing unlock with Pro ($29 once).</p><button type=\"button\" class=\"btn\" id=\"btn-unlock\">Unlock all agreements</button></div>"; | |
| var docEl = $("doc"); | |
| docEl.innerHTML = h; | |
| docEl.classList.toggle("locked", !allowed()); | |
| docEl.classList.toggle("a4", state.page === "A4"); | |
| var ul = $("btn-unlock"); if (ul) ul.onclick = function () { upsell(null, "agreement"); }; | |
| $("doc-meta").textContent = tpl.short + " · Version " + tpl.version; | |
| var w = $("warn"); | |
| w.textContent = model.missing.length ? "Still blank: " + model.missing.slice(0, 4).join(", ") + (model.missing.length > 4 ? " and " + (model.missing.length - 4) + " more" : "") + ". Blank lines print as ________ to fill by hand." : ""; | |
| quotaLine(); | |
| } | |
| /* ---------- quota + downloads ---------- */ | |
| function quotaLine() { | |
| var el = $("quota"); | |
| if (pro()) { el.textContent = "Pro: unlimited downloads, Word export, no Pactsprig footer line."; el.className = "quota"; return; } | |
| if (!agreementInfo(state.agreement).free) { el.textContent = "This agreement is part of Pro. The Mutual NDA is free."; el.className = "quota out"; return; } | |
| var q = X.quota("pdf", FREE_PDFS); | |
| el.textContent = q.left > 0 ? q.left + " of " + FREE_PDFS + " free PDFs left this month · printing is free" : "You have used this month's " + FREE_PDFS + " free PDFs. Printing still works, or go Pro for unlimited."; | |
| el.className = "quota" + (q.left > 0 ? "" : " out"); | |
| } | |
| function lockedUpsell() { upsell(tpl.name + " is part of Pactsprig Pro, with Word export and unlimited downloads.", "agreement"); } | |
| function downloadPdf() { | |
| if (!allowed()) return lockedUpsell(); | |
| var q = X.quota("pdf", FREE_PDFS); | |
| if (!pro() && q.left <= 0) { quotaLine(); return upsell("You have used this month's " + FREE_PDFS + " free PDFs. Go Pro for unlimited downloads with no footer line.", "pdf-limit"); } | |
| var bytes; | |
| try { bytes = P.build(model, { credit: !pro(), page: state.page }); } catch (e) { toast("Sorry, the PDF could not be made: " + e.message); return; } | |
| q.take(); | |
| X.download(C.fileName(tpl, state.parties, "pdf"), new Blob([bytes], { type: "application/pdf" })); | |
| quotaLine(); | |
| if (!pro()) { | |
| $("pro-cta").hidden = false; | |
| var left = X.quota("pdf", FREE_PDFS).left; | |
| toast("PDF downloaded. " + (left ? left + " free PDF" + (left === 1 ? "" : "s") + " left this month." : "That was your last free PDF this month.")); | |
| } else toast("PDF downloaded."); | |
| } | |
| function downloadDocx() { | |
| if (!pro()) return upsell("Word (DOCX) export is part of Pro, so you can edit the Cover Page in Word or upload it to your e-signature tool.", "docx"); | |
| var bytes = D.build(model, { page: state.page }); | |
| X.download(C.fileName(tpl, state.parties, "docx"), new Blob([bytes], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" })); | |
| toast("Word file downloaded."); | |
| } | |
| $("btn-pdf").addEventListener("click", downloadPdf); | |
| $("m-pdf").addEventListener("click", downloadPdf); | |
| $("btn-docx").addEventListener("click", downloadDocx); | |
| $("btn-print").addEventListener("click", function () { | |
| if (!allowed()) return lockedUpsell(); | |
| window.print(); | |
| }); | |
| $("f-page").addEventListener("change", function (e) { state.page = e.target.value === "A4" ? "A4" : "Letter"; save(); renderPreview(); }); | |
| /* ---------- presets, saved companies, backup ---------- */ | |
| function renderPresets() { | |
| var box = $("presets"); | |
| if (!pro()) { | |
| box.innerHTML = '<p class="hint">Pro remembers the companies you work with and your usual Cover Page answers (for example “Standard NDA: Delaware, 2 years”), so the next agreement takes seconds.</p><button type="button" class="btn sm" id="btn-presets-pro">Unlock with Pro</button>'; | |
| $("btn-presets-pro").onclick = function () { upsell(null, "presets"); }; | |
| return; | |
| } | |
| var mine = state.presets.filter(function (p) { return p.agreement === state.agreement; }); | |
| box.innerHTML = '<h3 class="mini">Cover Page presets for ' + esc(tpl.short) + '</h3><div class="preset-add"><label class="sr" for="f-preset">Preset name</label><input id="f-preset" placeholder="e.g. Standard NDA, Delaware, 2 years"><button type="button" class="btn sm" id="btn-preset-save">Save preset</button></div>' + | |
| '<div class="chips">' + (mine.length ? mine.map(function (p) { var i = state.presets.indexOf(p); return '<span class="chip"><button type="button" class="chip-load" data-preset="' + i + '">' + esc(p.name) + '</button><button type="button" data-del-preset="' + i + '" aria-label="Delete preset ' + esc(p.name) + '">×</button></span>'; }).join("") : '<span class="hint">No presets yet.</span>') + "</div>" + | |
| '<h3 class="mini">Saved companies</h3><div class="chips">' + (state.savedParties.length ? state.savedParties.map(function (p, i) { return '<span class="chip"><span>' + esc(p.company) + '</span><button type="button" data-del-party="' + i + '" aria-label="Delete ' + esc(p.company) + '">×</button></span>'; }).join("") : '<span class="hint">Use “Save company” on a party to keep it here.</span>') + "</div>"; | |
| } | |
| $("presets").addEventListener("click", function (e) { | |
| var t = e.target; | |
| if (t.id === "btn-preset-save") { | |
| var name = ($("f-preset").value || "").trim() || tpl.short + " preset " + (state.presets.length + 1); | |
| state.presets.push({ name: name, agreement: state.agreement, values: Object.assign({}, state.docs[state.agreement].values) }); | |
| save(); renderPresets(); toast("Preset saved: " + name); | |
| } else if (t.hasAttribute("data-preset")) { | |
| var p = state.presets[+t.getAttribute("data-preset")]; | |
| if (p) { state.docs[state.agreement].values = Object.assign(C.defaults(tpl, C.isoToday()), p.values); renderForm(); renderPreview(); save(); toast("Loaded preset: " + p.name); } | |
| } else if (t.hasAttribute("data-del-preset")) { | |
| state.presets.splice(+t.getAttribute("data-del-preset"), 1); save(); renderPresets(); | |
| } else if (t.hasAttribute("data-del-party")) { | |
| state.savedParties.splice(+t.getAttribute("data-del-party"), 1); save(); renderPresets(); renderParties(); | |
| } | |
| }); | |
| $("btn-backup").addEventListener("click", function () { | |
| if (!pro()) return upsell("JSON backup is part of Pro.", "backup"); | |
| var c = Object.assign({}, state); delete c.fresh; | |
| X.download("pactsprig-backup-" + C.isoToday() + ".json", JSON.stringify({ app: "pactsprig", version: 1, saved: new Date().toISOString(), data: c }, null, 1), "application/json"); | |
| }); | |
| $("f-restore").addEventListener("click", function (e) { if (!pro()) { e.preventDefault(); upsell("JSON backup and restore are part of Pro.", "backup"); } }); | |
| $("f-restore").addEventListener("change", function (e) { | |
| var f = e.target.files && e.target.files[0]; | |
| if (!f) return; | |
| f.text().then(function (txt) { | |
| var j = JSON.parse(txt); | |
| if (!j || j.app !== "pactsprig" || !j.data) throw new Error("not a Pactsprig backup"); | |
| localStorage.setItem(KEY, JSON.stringify(j.data)); | |
| state = load(); | |
| return switchTo(state.agreement).then(function () { renderPresets(); toast("Backup restored."); }); | |
| }).catch(function (err) { toast("Could not restore: " + err.message); }); | |
| e.target.value = ""; | |
| }); | |
| /* ---------- hero buttons ---------- */ | |
| $("btn-example").addEventListener("click", function () { switchTo(state.agreement, true).then(function () { toast("Example loaded. Change anything; the contract updates as you type."); }); }); | |
| $("btn-clear").addEventListener("click", function () { | |
| state.parties = [C.emptyParty(), C.emptyParty()]; | |
| switchTo(state.agreement, "blank").then(function () { toast("Blank Cover Page. Your saved companies and presets are still here."); }); | |
| }); | |
| $("btn-cta").addEventListener("click", function () { upsell(null, "mid-cta"); }); | |
| /* ---------- Pro on/off ---------- */ | |
| function onPro(on) { | |
| $("pro-pill").textContent = on ? "Pro ✓" : "Pro"; | |
| if (on) $("pro-cta").hidden = true; | |
| if (tpl) { renderPreview(); renderPresets(); } | |
| } | |
| /* ---------- PWA ---------- */ | |
| var deferred = null; | |
| window.addEventListener("beforeinstallprompt", function (e) { e.preventDefault(); deferred = e; $("btn-install").hidden = false; }); | |
| $("btn-install").addEventListener("click", function () { | |
| if (!deferred) return; | |
| deferred.prompt(); | |
| deferred.userChoice.finally(function () { deferred = null; $("btn-install").hidden = true; }); | |
| }); | |
| if ("serviceWorker" in navigator && (location.protocol === "https:" || /^(localhost|127\.0\.0\.1)$/.test(location.hostname))) { | |
| window.addEventListener("load", function () { navigator.serviceWorker.register("sw.js").catch(function () { /* offline cache is optional */ }); }); | |
| } | |
| /* ---------- start ---------- */ | |
| state = load(); | |
| $("f-page").value = state.page; | |
| renderPicker(); | |
| switchTo(state.agreement).then(function () { | |
| state.fresh = false; | |
| X.onChange(onPro); | |
| document.documentElement.setAttribute("data-ready", "1"); | |
| }); | |
| })(); | |