create-codepen/dist/index.mjs

Create CodePen with API

const b=(e,n)=>{if(typeof e.user=="string")return e.user;for(let t=0;t<n.children.length;t++){const r=(n.children[t].href||"").match(/codepen\.(io|dev)\/(\w+)\/pen\//i);if(r)return r[2]}return"anon"},x=e=>{const{attributes:n}=e,t={};for(let r=0;r<n.length;r++){const s=n[r].name;s.startsWith("data-")&&(t[s.replace("data-","")]=n[r].value)}return t.href&&(t["slug-hash"]=t.href),t.type&&(t["default-tab"]=t.type),t.safe&&(t.animations=t.safe==="true"?"run":"stop-after-5"),"prefill"in t||t["slug-hash"]?(t.user=b(t,e),t):null},p="https://codepen.io",w=e=>{let n="";for(const t in e)t!=="prefill"&&t!=="open"&&(n!==""&&(n+="&"),n+=t+"="+encodeURIComponent(e[t]));return n},a=e=>{const n=e.preview==="true"?"embed/preview":"embed";if("prefill"in e)return[p,n,"prefill"].join("/");let t=e["slug-hash"];if(!t)throw new Error("slug-hash is required");return e.token&&(t+="/"+e.token),[p,e.user||"anon",n,t+"?"+w(e)].join("/").replace(/\/\//g,"//")},v=["html","xml","haml","markdown","slim","pug","application/x-slim"],j=["css","less","scss","sass","stylus","postcss","text/css","text/x-sass","text/x-scss","text/x-less","text/x-styl"],_=["js","javascript","coffeescript","livescript","typescript","babel","text/javascript","text/x-coffeescript","text/x-livescript","text/typescript"],d={vue:"js",flutter:"js"},C=(e="")=>v.includes(e)?"html":j.includes(e)?"css":_.includes(e)?"js":d[e]?d[e]:"unknown",i=(e,n)=>{const t=document.createElement(e);for(const r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.setAttribute(r,n[r].toString());return t},O=["title","description","tags","html_classes","head","stylesheets","scripts"],u=e=>{if(Object.hasOwn(e.dataset,"prefill")){const n={},t=JSON.parse(decodeURI(e.dataset.prefill)||"{}");for(const r in t)O.includes(r)&&(n[r]=t[r]);return Array.from(e.querySelectorAll("[data-lang]")).forEach(r=>{const{lang:s,langVersion:o,optionsAutoprefixer:y}=r.dataset;y&&(n.css_prefix="autoprefixer");const l=C(s);n[l]=r.innerText,s!==l&&(n[l+"_pre_processor"]=s),o&&(n[l+"_version"]=o)}),JSON.stringify(n)}},c=e=>{const n=i("form",{class:"code-pen-embed-form",style:"display: none;",method:"post",action:a(e),target:e.name||""});for(const t in e)t!=="prefill"&&n.append(i("input",{type:"hidden",name:t,value:String(e[t])}));return n},m=e=>{const{height:n=300,class:t="",name:r="CodePen Embed"}=e,s={class:`cp_embed_iframe ${t}`,src:a(e),allowfullscreen:"",allowpaymentrequest:"",allowTransparency:"",frameborder:0,width:"100%",height:n,name:r,scrolling:"no",style:"width: 100%; overflow: hidden; display: block;",title:e["pen-title"]||r};return"prefill"in e||(s.loading="lazy"),e["slug-hash"]&&(s.id=`code-pen-embed-${e["slug-hash"].replace("/","_")}`),i("iframe",s)},f=(e,n)=>{if(e.parentNode){const t=document.createElement("div");return t.className="code-pen-embed-wrapper",t.append(n),e.parentNode.replaceChild(t,e),t}return e.append(n),e},S=(e,n)=>{const t=document.createDocumentFragment();let r=null;if(e.open==="true"){if("prefill"in e){const s=u(n);s&&(e.data=s),r=c(e),n.appendChild(r),r.submit()}else window.open(a(e),"_blank");return}if("prefill"in e){const s=u(n);s&&(e.data=s),r=c(e),t.append(r)}t.append(m(e)),f(n,t),r&&r.submit()};let k=1;const h=(e,n)=>{const t=document.querySelectorAll(e);for(let r=0;r<t.length;r++){const s=t[r],o={...n,...x(s)};o&&(o.name=`code-pen-embed-${k++}`,S(o,s))}},g=(e=".codepen",n={})=>{document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{h(e,n)}):h(e,n)},E=(e=".codepen")=>g(e,{open:"true"});let $=1;const N=(e,n)=>{const t=typeof n=="string"?document.querySelector(n):n instanceof HTMLElement?n:null;e.user||(e.user="anon"),e.name||(e.name=t?`code-pen-api-${$++}`:"_blank");const r=document.createDocumentFragment();let s=null;"prefill"in e&&(e.data=JSON.stringify(e.prefill||"{}"),s=c(e),r.append(s)),t?(r.append(m(e)),f(t,r)):document.body.appendChild(r),s&&s.submit()};export{g as loadCodePens,E as openCodePens,N as renderCodePen};
//# sourceMappingURL=index.mjs.map