Site Builder

Editing: promptinator-auto2.js

writable 0666

/* promptinator‑auto v1.1  (c) 2025 • no dependencies + help link + profile tokens */
(function () {

/*──────────────────────────────────────────────────────────
    1.  Shortcode templates  (labelKey  →  snippet string)
  ──────────────────────────────────────────────────────────*/
  const templates = {
    /* profile / business tokens */
    name         : '[name]',
    slogan       : '[slogan]',
    description  : '[description]',
    address      : '[address]',
    city         : '[city]',
    state        : '[state]',
    zip          : '[zip]',
    phone        : '[phone]',
    website      : '[website]',
    email        : '[email]',
    c_service    : '[C-service-]',
    c_location   : '[C-location-]',

/* classic form components */
    plain_input     : '[-labelfield-~Input~]',
    textarea_a      : '[A-labelfield-~Textarea~]',
    radio_b         : '[B-labelfield-|Choice 1|Choice 2|~Choice 2~]',
    checkbox_c      : '[C-labelfield-|Opt A|Opt B|~Opt A~]',
    dropdown_num_d  : '[D-labelfield-10~3~]',
    dropdown_txt_d  : '[D-labelfield-|Opt A|Opt B|Opt C|~Opt B~]',
    url_picker_i    : '[I-labelfield-|https://site1.com|site2.com|~Pick a site~]',
    email_submit_e  : '[E-labelfield-~you@site.com~]',
    form_post_e     : '[E-labelfield-~https://example.com/endpoint~]'
  };

/* Dropdown entries – profile tokens first, then the originals */
  const menuItems = [
    { key:'name',        text:'Name' },
    { key:'slogan',      text:'Slogan' },
    { key:'description', text:'Description' },
    { key:'address',     text:'Street address' },
    { key:'city',        text:'City' },
    { key:'state',       text:'State' },
    { key:'zip',         text:'ZIP code' },
    { key:'phone',       text:'Phone number' },
    { key:'website',     text:'Website URL' },
    { key:'email',       text:'Email address' },
    { key:'c_service',   text:'Services (C)' },
    { key:'c_location',  text:'Locations (C)' },

/* originals */
    { key:'plain_input',    text:'Plain input' },
    { key:'textarea_a',     text:'Textarea (A)' },
    { key:'radio_b',        text:'Radio buttons (B)' },
    { key:'checkbox_c',     text:'Checkbox group (C)' },
    { key:'dropdown_num_d', text:'Dropdown numeric (D)' },
    { key:'dropdown_txt_d', text:'Dropdown text (D)' },
    { key:'url_picker_i',   text:'URL picker + preview (I)' },
    { key:'email_submit_e', text:'Email submit (E)' },
    { key:'form_post_e',    text:'Form‑POST submit (E)' }
  ];

const HELP_URL = 'https://promptinator.ai/shortcode-help.html';

/*──────────────────────────────────────────────────────────
    2.  Utility: insert snippet at caret
  ──────────────────────────────────────────────────────────*/
  function insertAtCaret(el, snippet) {
    el.focus();
    const {selectionStart:s, selectionEnd:e, value:t} = el;
    el.value = t.slice(0, s) + snippet + t.slice(e);
    el.selectionStart = el.selectionEnd = s + snippet.length;
    el.dispatchEvent(new Event('input', { bubbles: true }));
  }

/*──────────────────────────────────────────────────────────
    3.  Build the select + help link bar
  ──────────────────────────────────────────────────────────*/
  function buildBar(forTextarea) {
    const wrap = document.createElement('div');
    wrap.className = 'promptinator-bar';

const select = document.createElement('select');
    select.className = 'promptinator-select';
    select.innerHTML = '<option disabled selected>Insert shortcode…</option>' +
      menuItems.map(mi => `<option value="${mi.key}">${mi.text}</option>`).join('');

select.onchange = () => {
      const tmpl = templates[select.value];
      if (tmpl) insertAtCaret(forTextarea, tmpl);
      select.selectedIndex = 0;
    };

const help = document.createElement('a');
    help.className = 'promptinator-help';
    help.textContent = 'Help';
    help.href = HELP_URL;
    help.title = 'Open shortcode helper';
    help.onclick = e => {
      e.preventDefault();
      window.open(HELP_URL,'promptinatorHelp',
        'popup=yes,width=520,height=720,scrollbars=yes,resizable=yes');
    };

wrap.append(select, help);
    return wrap;
  }

/*──────────────────────────────────────────────────────────
    4.  Enhance one textarea (idempotent)
  ──────────────────────────────────────────────────────────*/
  function enhanceTextarea(ta) {
    if (ta.dataset.promptinatorDone) return;
    ta.dataset.promptinatorDone = 'yes';

const wrapper = document.createElement('div');
    wrapper.className = 'promptinator-wrapper';
    ta.parentNode.insertBefore(wrapper, ta);
    wrapper.appendChild(buildBar(ta));
    wrapper.appendChild(ta);
  }

/*──────────────────────────────────────────────────────────
    5.  Scan + observe
  ──────────────────────────────────────────────────────────*/
  function initAll() {
    document.querySelectorAll('textarea').forEach(enhanceTextarea);
    const mo = new MutationObserver(muts=>{
      muts.forEach(m=>m.addedNodes.forEach(node=>{
        if(node.nodeType!==1)return;
        if(node.tagName && node.tagName.toLowerCase()==='textarea') enhanceTextarea(node);
        node.querySelectorAll && node.querySelectorAll('textarea').forEach(enhanceTextarea);
      }));
    });
    mo.observe(document.body,{childList:true,subtree:true});
  }

/*──────────────────────────────────────────────────────────
    6.  Minimal styling
  ──────────────────────────────────────────────────────────*/
  const css = `
    .promptinator-wrapper{margin-bottom:1em;}
    .promptinator-bar{display:flex;align-items:center;gap:.55em;margin-bottom:.35em;}
    .promptinator-select{flex:1 1 auto;padding:.3em .55em;}
    .promptinator-help{flex:0 0 auto;font-size:.9rem;color:#176edc;text-decoration:underline;cursor:pointer;}
    .promptinator-wrapper textarea{width:100%;box-sizing:border-box;}
  `;
  const style=document.createElement('style');
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);

/*──────────────────────────────────────────────────────────
    7.  Kick off
  ──────────────────────────────────────────────────────────*/
  if(document.readyState==='loading'){
    document.addEventListener('DOMContentLoaded',initAll);
  }else{
    initAll();
  }

})();

Site Builder

Editing: promptinator-auto2.js

Site Builder