create-codepen
Version:
Create CodePen with API
3 lines (2 loc) • 4 kB
JavaScript
;const b=(e,n)=>{if(typeof e.user=="string")return e.user;for(let t=0;t<n.children.length;t++){const s=(n.children[t].href||"").match(/codepen\.(io|dev)\/(\w+)\/pen\//i);if(s)return s[2]}return"anon"},x=e=>{const{attributes:n}=e,t={};for(let s=0;s<n.length;s++){const r=n[s].name;r.startsWith("data-")&&(t[r.replace("data-","")]=n[s].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"],C=["css","less","scss","sass","stylus","postcss","text/css","text/x-sass","text/x-scss","text/x-less","text/x-styl"],j=["js","javascript","coffeescript","livescript","typescript","babel","text/javascript","text/x-coffeescript","text/x-livescript","text/typescript"],d={vue:"js",flutter:"js"},_=(e="")=>v.includes(e)?"html":C.includes(e)?"css":j.includes(e)?"js":d[e]?d[e]:"unknown",i=(e,n)=>{const t=document.createElement(e);for(const s in n)Object.prototype.hasOwnProperty.call(n,s)&&t.setAttribute(s,n[s].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 s in t)O.includes(s)&&(n[s]=t[s]);return Array.from(e.querySelectorAll("[data-lang]")).forEach(s=>{const{lang:r,langVersion:o,optionsAutoprefixer:y}=s.dataset;y&&(n.css_prefix="autoprefixer");const l=_(r);n[l]=s.innerText,r!==l&&(n[l+"_pre_processor"]=r),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:s="CodePen Embed"}=e,r={class:`cp_embed_iframe ${t}`,src:a(e),allowfullscreen:"",allowpaymentrequest:"",allowTransparency:"",frameborder:0,width:"100%",height:n,name:s,scrolling:"no",style:"width: 100%; overflow: hidden; display: block;",title:e["pen-title"]||s};return"prefill"in e||(r.loading="lazy"),e["slug-hash"]&&(r.id=`code-pen-embed-${e["slug-hash"].replace("/","_")}`),i("iframe",r)},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},P=(e,n)=>{const t=document.createDocumentFragment();let s=null;if(e.open==="true"){if("prefill"in e){const r=u(n);r&&(e.data=r),s=c(e),n.appendChild(s),s.submit()}else window.open(a(e),"_blank");return}if("prefill"in e){const r=u(n);r&&(e.data=r),s=c(e),t.append(s)}t.append(m(e)),f(n,t),s&&s.submit()};let S=1;const h=(e,n)=>{const t=document.querySelectorAll(e);for(let s=0;s<t.length;s++){const r=t[s],o={...n,...x(r)};o&&(o.name=`code-pen-embed-${S++}`,P(o,r))}},g=(e=".codepen",n={})=>{document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{h(e,n)}):h(e,n)},k=(e=".codepen")=>g(e,{open:"true"});let E=1;const $=(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-${E++}`:"_blank");const s=document.createDocumentFragment();let r=null;"prefill"in e&&(e.data=JSON.stringify(e.prefill||"{}"),r=c(e),s.append(r)),t?(s.append(m(e)),f(t,s)):document.body.appendChild(s),r&&r.submit()};exports.loadCodePens=g,exports.openCodePens=k,exports.renderCodePen=$;
//# sourceMappingURL=index.cjs.map