11 lines
11 KiB
JavaScript
11 lines
11 KiB
JavaScript
var j=(e,c)=>{let l;return(...o)=>{l&&clearTimeout(l),l=setTimeout(()=>e.apply(null,o),typeof c=="function"?c():c)}};var U=()=>{let e=navigator.userAgent.toLowerCase();return e.includes("firefox")||e.includes("fxios")};var F=e=>{let c=()=>{e.style.display="none",t(),window.watchingEscape=!1},l=n=>{!e.contains(n.target)&&i(e)&&c()},o=n=>{n.key==="Escape"&&(c(),n.preventDefault())},i=n=>!!n&&!!(n.offsetWidth||n.offsetHeight||n.getClientRects().length),t=()=>{document.removeEventListener("click",l),document.removeEventListener("keydown",o)};return document.addEventListener("click",l),document.addEventListener("keydown",o),window.watchingEscape=!0,{clear:()=>t()}};var N={APP_VERSION:"46",SDK_VERSION:"0.11.1",COMMIT_SHA:"328cc81",REPO_URL:"https://github.com/live-codes/livecodes",DOCS_BASE_URL:"/docs/"};var D=`<div id="resources-container" class="modal-container"><div class="modal-title" data-i18n="resources.heading">External Resources</div><div id="resources-screen-container" class="modal-screen-container"><div class="modal-screen"><label for="resources-search-input" data-i18n="resources.search.heading" data-i18n-prop="innerHTML">Search Packages <span class="nowrap label-description">(powered by jsDelivr)</span></label> <input type="text" id="resources-search-input" placeholder="e.g. jquery, lodash@4, bootstrap@5.2.3, ..." data-i18n="resources.search.placeholder" data-i18n-prop="placeholder" onfocus='this.value=""'><div id="resources-result-container"><ul id="resources-search-results"></ul></div><div id="resources-textarea-container"><div class="description help center" data-i18n="resources.urlDesc">Add stylesheet/script URLs. Each URL should be in a separate line.</div><label for="external-stylesheets" data-i18n="resources.stylesheets">External Stylesheets</label> <textarea dir="ltr" id="external-stylesheets" placeholder="https://" data-resource="stylesheets"></textarea> <label for="external-scripts" data-i18n="resources.scripts">External Scripts</label> <textarea dir="ltr" id="external-scripts" placeholder="https://" data-resource="scripts"></textarea></div><label data-i18n="resources.fonts.heading" data-i18n-prop="innerHTML">Fonts <span class="nowrap label-description">(powered by Google Fonts)</span></label><div id="fonts-container"><select><option value="" data-i18n="generic.loading">Loading...</option></select> <button class="btn" data-i18n="resources.fonts.add">Add</button></div><label data-i18n="resources.cssPresets.heading">CSS Presets</label><div class="input-container"><span><input type="radio" id="resources-css-preset-none" name="css-preset" value="" checked> <label class="radio-label" for="resources-css-preset-none" data-i18n="resources.cssPresets.none">None</label> </span><span><input type="radio" id="resources-css-preset-normalize-css" name="css-preset" value="normalize.css"> <label class="radio-label" for="resources-css-preset-normalize-css" data-i18n="resources.cssPresets.normalizeCss">Normalize.css</label> </span><span><input type="radio" id="resources-css-preset-reset-css" name="css-preset" value="reset-css"> <label class="radio-label" for="resources-css-preset-reset-css" data-i18n="resources.cssPresets.resetCss">Reset CSS</label></span></div></div></div></div>`;var Y=e=>Object.entries(N).reduce((c,[l,o])=>c.replace(new RegExp(`{{${l}}}`,"g"),o),e);var O=Y(D);var W=e=>{if(!e.startsWith("https://"))return e;let c=["https://esm.sh/","https://cdn.skypack.dev/","https://cdn.jsdelivr.net/npm/","https://fastly.jsdelivr.net/npm/","https://gcore.jsdelivr.net/npm/","https://testingcf.jsdelivr.net/npm/","https://jsdelivr.b-cdn.net/npm/","https://esm.run/","https://esbuild.vercel.app/","https://bundle.run/","https://unpkg.com/","https://npmcdn.com/","https://deno.bundlejs.com/?file&q=","https://jspm.dev/"];for(let l of c)if(e.startsWith(l))return e.replace(l,"");return e},$=e=>e.includes(":")&&!e.startsWith("data:")&&!e.startsWith("http")?e.split(":")[1]:e;var V=e=>`https://ofcncog2cu-dsn.algolia.net/1/indexes/npm-search/${encodeURIComponent(e)}?x-algolia-agent=Browser`,_={"X-Algolia-Application-Id":"OFCNCOG2CU","X-Algolia-API-Key":"f54e21fa3a2a0160595bb058179bfb1e"},z=["name","description","homepage","repository.url","version"],C="https://data.jsdelivr.com/v1",R={...U()?{}:{"User-Agent":"https://livecodes.io"}},M=e=>{let c=e.startsWith("@"),l=c?e.slice(1):e,[o,i]=l.split("@");return[(c?"@":"")+o,i]},ee=async(e,c=10)=>{let l={page:0,hitsPerPage:c,attributesToHighlight:[],attributesToRetrieve:z,analyticsTags:["jsdelivr"]},[o,i]=M(e),t;if(i){let a=await h(e);typeof a=="string"&&(t=M(a)[1])}let n=await fetch(V("query"),{method:"POST",headers:{"Content-Type":"application/json; charset=UTF-8",..._},body:JSON.stringify({query:o,...l})}).then(a=>{if(!a.ok)throw new Error("failed to fetch");return a}).then(a=>a.json()).catch(a=>({error:!0,message:a.message||String(a)}));if("error"in n)return n;let T=n.hits.map(a=>(a.name===o&&t&&(a.version=t),a.repository?.url&&(a.repo=a.repository?.url),a));return T.sort((a,E)=>a.name===o?-1:E.name===o?1:0),T},h=async e=>{let c=`${C}/package/resolve/npm/${e}`,l=await fetch(c,{headers:R}).then(t=>{if(!t.ok)throw new Error("failed to fetch");return t}).then(t=>t.json()).catch(t=>({error:!0,message:t.message||String(t)}));if("error"in l)return l;let o=M(e)[0],i=l.version;return i?`${o}@${i}`:o},te=async e=>{let[c,l]=M($(W(e))),o;if(l){let n=await h(e);typeof n=="string"&&(o=M(n)[1])}let i=V(c)+"&attributesToRetrieve="+z.join(","),t=await fetch(i,{method:"GET",headers:_}).then(n=>{if(!n.ok)throw new Error("failed to fetch");return n}).then(n=>n.json()).catch(n=>({error:!0,message:n.message||String(n)}));return"error"in t||(o&&(t.version=o),t.repository?.url&&(t.repo=t.repository?.url)),t},oe=async e=>{let c=await h(e),l=`${C}/package/npm/${c}/flat`,o=await fetch(l,{headers:R}).then(t=>{if(!t.ok)throw new Error("failed to fetch");return t}).then(t=>t.json()).catch(t=>({error:!0,message:t.message||String(t)}));if("error"in o)return o;let i=`https://cdn.jsdelivr.net/npm/${c}`;return{...o.default?{default:i+o.default}:{},files:o.files.map(t=>i+t.name)}},ne=async e=>{let c=await h(e),l=`${C}/package/npm/${c}/entrypoints`,o=await fetch(l,{headers:R}).then(t=>{if(!t.ok)throw new Error("failed to fetch");return t}).then(t=>t.json()).catch(t=>({error:!0,message:t.message||String(t)}));if("error"in o)return o;let i=`https://cdn.jsdelivr.net/npm/${c}`;return{...o.js?.file?{js:i+o.js?.file}:{},...o.css?.file?{css:i+o.css?.file}:{}}},P={search:ee,getPkgInfo:te,getPkgFiles:oe,getPkgDefaultFiles:ne};var K=()=>document.querySelectorAll("#resources-container textarea"),J=()=>document.querySelectorAll('#resources-container input[type="radio"]');var Se=({baseUrl:e,modal:c,eventsManager:l,deps:o})=>{let i=document.createElement("div");i.innerHTML=O;let t=i.firstChild;c.show(t,{onClose:()=>Q(),autoFocus:!1});let n=K();n.forEach(r=>{let u=o.getConfig()[r.dataset.resource];r.value=u.length!==0?u.join(`
|
|
`)+`
|
|
`:""});let T=J();T.forEach(r=>{o.getConfig().cssPreset===r.value&&(r.checked=!0)});let a=document.querySelector("#resources-container #resources-search-input"),E=document.querySelector("#resources-container #resources-result-container"),d=document.querySelector("#resources-container #resources-search-results"),L=document.querySelector("#resources-container #fonts-container select"),H=document.querySelector("#resources-container #fonts-container button"),b=(r,u)=>{if(!r||v(r,u))return;let m=u==="stylesheets"?n[0]:n[1];m.value=m.value.trim()===""?r.trim()+`
|
|
`:m.value.split(`
|
|
`).map(s=>s.trim()).filter(s=>s!=="").join(`
|
|
`)+`
|
|
`+r.trim()+`
|
|
`,document.querySelector(`#resources-search-results a.add-resource[data-resource-url="${r}"]`)?.classList.add("resource-added")},v=(r,u)=>r?!!(u==="stylesheets"?n[0]:n[1]).value.split(`
|
|
`).map(s=>s.trim()).find(s=>s===r.trim()):!1,G=({name:r,version:u,description:m,files:s})=>{let y=document.createElement("li"),g=document.createElement("div");g.classList.add("search-result-item-title"),g.textContent=r,y.appendChild(g);let q=document.createElement("span");q.classList.add("label-description"),q.textContent="v"+u,g.appendChild(q);let k=document.createElement("div");k.classList.add("search-result-item-description"),k.textContent=m||"",y.appendChild(k);let S=document.createElement("div");S.classList.add("search-result-item-files"),y.appendChild(S);let w=document.createElement("span");if(w.classList.add("search-result-item-script"),S.appendChild(w),s?.js){let f=v(s.js,"scripts"),p=document.createElement("a");p.classList.add("add-resource"),p.classList.toggle("resource-added",f),p.href="#",p.onclick=f?null:()=>b(s.js||"","scripts"),p.title=s.js,p.dataset.resourceUrl=s.js,p.innerHTML=`<img src="${e}assets/images/javascript.svg" /> JS`,w.appendChild(p)}let I=document.createElement("span");if(I.classList.add("search-result-item-stylesheet"),S.appendChild(I),s?.css){let f=v(s.css,"stylesheets"),p=document.createElement("a");p.classList.add("add-resource"),p.classList.toggle("resource-added",f),p.href="#",p.onclick=f?null:()=>b(s.css||"","stylesheets"),p.title=s.css,p.dataset.resourceUrl=s.css,p.innerHTML=`<img src="${e}assets/images/css.svg" /> CSS`,I.appendChild(p)}let A=document.createElement("span");A.classList.add("search-result-item-Browse"),S.appendChild(A);let x=document.createElement("a");return x.href=`https://cdn.jsdelivr.net/npm/${r}/`,x.target="_blank",x.title=window.deps.translateString("resources.browseOnJsDelivr","Browse package files on jsDelivr"),x.textContent="Browse",A.appendChild(x),y},Z=async()=>{let r=a.value,u=await P.search(a.value,5);if(r!==a.value){d.innerHTML=`<li><div class="search-result-item-description">${window.deps.translateString("generic.loading","Loading...")}</div></li>`;return}if("error"in u){d.innerHTML=`<li><div class="search-result-item-error">${window.deps.translateString("resources.error.failedToLoadResults","Failed to load results!")}</div></li>`;return}if(u.length===0){d.innerHTML=`<li><div class="search-result-item-description">${window.deps.translateString("resources.error.noResultsFound","No results found for: ")}<strong>${r}</strong></div></li>`;return}let m=(await Promise.all(u.map(async s=>{let y=s.version!=null?`${s.name}@${s.version}`:s.name,g=await P.getPkgDefaultFiles(y);if(!("error"in g))return{...s,files:g}}))).filter(Boolean);if(r===a.value){if(m.length===0){d.innerHTML=`<li><div class="search-result-item-error">${window.deps.translateString("resources.error.failedToLoadResults","Failed to load results!")}</div></li>`;return}d.innerHTML="",m.forEach(s=>d.appendChild(G(s)))}},B;a?.focus(),a.addEventListener("input",async()=>{if(d.innerHTML=`<li><div class="search-result-item-description">${window.deps.translateString("generic.loading","Loading...")}</div></li>`,B?.clear(),a.value.length>0)E.style.display="unset",B=F(E);else{E.style.display="none";return}j(Z,300)()}),import(e+"google-fonts.0d0bc37857dba82d020f93ca95511304.js").then(r=>{L.innerHTML=`<option value="">${window.deps.translateString("resources.fonts.select","Select font ...")}</option>`,r.googleFonts.getFonts().forEach(m=>{let s=document.createElement("option");s.innerText=m,L.appendChild(s)}),l.addEventListener(H,"click",()=>{L.value!==""&&(b(r.googleFonts.getStylesheetUrl(L.value),"stylesheets"),L.value="",H.innerText="\u2714",setTimeout(()=>{H.innerText=window.deps.translateString("resources.fonts.add","Add")},1e3))})});let Q=async()=>{n.forEach(r=>{let u=r.dataset.resource;o.setConfig({...o.getConfig(),[u]:r.value?.split(`
|
|
`).map(m=>m.trim()).filter(m=>m!=="")||[]})}),T.forEach(r=>{r.checked&&o.setConfig({...o.getConfig(),cssPreset:r.value})}),o.loadResources()}};export{Se as createExternalResourcesUI};
|