Site Builder

Editing: melanie-prompt1s.js

writable 0666

/* melanie-prompts.js
   drop in /js and include on any page            */

(()=>{

/* ---------- 0. grammar helpers ---------------- */
const RX=/\[(?:([A-DI]?)-)?([^~|\-\]]+)(?:-([^~\]]+))?(?:~([^~]+)~)?\]/ig;

/* ---------- 1. boot on DOM ready -------------- */
document.addEventListener('DOMContentLoaded',()=>{

document.querySelectorAll('[data-melanie-prompt]').forEach(card=>{
      const tpl   = card.dataset.melaniePrompt;      // raw template
      const out   = card.querySelector('[data-m-output]');
      const state = {}, meta=[];

/* 1‑A  replace tokens with clickable <span> */
      const html = tpl.replace(RX,(m,cmd='',lab,ops='',def='')=>{
         meta.push({cmd,lab,ops:ops.split('|').filter(Boolean),def});
         state[lab]=def||lab;
         return `<span class="token" data-i="${meta.length-1}">[${state[lab]}]</span>`;
      });
      out.innerHTML = html.replace(/\n/g,'<br>');

/* 1‑B  token click → popup */
      out.addEventListener('click',e=>{
        if(!e.target.matches('.token')) return;
        const p=meta[e.target.dataset.i];
        popup(card,p,state[p.lab],v=>{state[p.lab]=v;e.target.textContent='['+v+']';});
      });

/* 1‑C  AI buttons in this card */
      card.querySelectorAll('[data-m-ai]').forEach(btn=>btn.onclick=()=>{
        const base=btn.dataset.mAi;
        const prompt=tpl.replace(RX,(_,__,lab)=>state[lab]);
        window.open(base+encodeURIComponent(prompt),'_blank');
      });
  });

});

/* ---------- 2. popup factory ------------------- */
const dlg=document.createElement('dialog');
dlg.style.padding='0'; dlg.style.border='none';
document.body.append(dlg);

dlg.addEventListener('click',e=>{ if(e.target===dlg) dlg.close();});
dlg.addEventListener('cancel',e=>{ e.preventDefault(); dlg.close();});

function popup(card,meta,cur,done){
  dlg.innerHTML='<div class="popup-body"></div>';
  const box=dlg.firstChild;
  box.className='popup-body';           // hook for theme css
  const nice=meta.lab.replace(/[-_]/g,' ').replace(/\b\w/g,l=>l.toUpperCase());

const close=v=>{done(v);dlg.close();};

switch(meta.cmd){
    case 'A': box.innerHTML=`<label>${nice}<textarea rows="4">${cur}</textarea></label>`;
              const ta=box.querySelector('textarea');
              ta.onkeydown=e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();close(ta.value);} };
              ta.onblur=()=>dlg.close(); ta.focus(); break;

case 'B': box.innerHTML=`<fieldset><legend>${nice}</legend>${
       meta.ops.map(o=>`<label><input type=radio name=r value="${o}" ${o===cur?'checked':''}>${o}</label>`).join('<br>')}</fieldset>`;
              box.onclick=e=>{if(e.target.name==='r')close(e.target.value);}; break;

case 'C': box.innerHTML=`<fieldset><legend>${nice}</legend>${
       meta.ops.map(o=>`<label><input type=checkbox value="${o}" ${cur.split(', ').includes(o)?'checked':''}>${o}</label>`).join('<br>')}
       </fieldset><button>Done</button>`;
              box.querySelector('button').onclick=()=>close([...box.querySelectorAll('input:checked')].map(c=>c.value).join(', ')||cur); break;

case 'D': {
       let ops=meta.ops.map(s=>s.trim()).filter(Boolean);
       if(ops.length===1&&/^\d+$/.test(ops[0])) ops=Array.from({length:+ops[0]},(_,i)=>''+(i+1));
       box.innerHTML=`<label>${nice}<select>${ops.map(o=>`<option${o==cur?' selected':''}>${o}</option>`).join('')}</select></label>`;
       box.querySelector('select').onchange=e=>close(e.target.value); break;
    }

case 'I': box.innerHTML=`<label>${nice}<select><option disabled selected>${cur}</option>${
       meta.ops.map(u=>`<option>${u}</option>`).join('')}</select></label>
       <iframe hidden style="border:1px solid #ccd;width:100%;min-height:340px;margin-top:.6rem"></iframe>
       <button style="margin-top:.6rem">Use site</button>`;
              const sel=box.querySelector('select'),fr=box.querySelector('iframe');
              sel.onchange=()=>{fr.hidden=false;fr.src=sel.value;};
              box.querySelector('button').onclick=()=>close(sel.value||cur); break;

default:  box.innerHTML=`<label>${nice}<input value="${cur}"></label>`;
              const inp=box.querySelector('input');
              inp.onkeydown=e=>{if(e.key==='Enter')close(inp.value);};
              inp.onblur=()=>dlg.close(); inp.focus();
  }
  dlg.showModal();
}

})();        /* end IIFE */

Site Builder

Editing: melanie-prompt1s.js

Site Builder