Repository navigation
Expand file tree
/
Copy pathscript.js
More file actions
1 lines (1 loc) · 13.4 KB
/
Copy pathscript.js
File metadata and controls
1 lines (1 loc) · 13.4 KB
1
const select=document.getElementById("langSelect"),display=document.getElementById("selectDisplay"),codeInput=document.getElementById("codeInput"),vsCodeOutput=document.getElementById("vsCodeOutput"),highlighted=document.getElementById("highlighted"),lineNumbers=document.getElementById("lineNumbers"),fontSlider=document.getElementById("fontSlider"),fontSizeLabel=document.getElementById("fontSizeLabel"),titleInput=document.getElementById("titleInput"),titleIcon=document.getElementById("titleIcon"),titleText=document.getElementById("titleText"),panel=document.getElementById("vscodePanel"),handleRight=document.getElementById("handleRight"),handleBottom=document.getElementById("handleBottom"),statusLang=document.getElementById("statusLang"),macHighlighted=document.getElementById("mac-highlighted"),macTitle=document.getElementById("mac-title"),macTitleIcon=document.getElementById("mac-title-icon"),vscodeCopyBtn=document.getElementById("vscodeCopyBtn"),macCopyBtn=document.getElementById("macCopyBtn"),vscodeEmbedBtn=document.getElementById("vscodeEmbedBtn"),macEmbedBtn=document.getElementById("macEmbedBtn"),vscodeDownloadBtn=document.getElementById("vscodeDownloadBtn"),macDownloadBtn=document.getElementById("macDownloadBtn");let currentLang="htmlcss";const langMap={htmlcss:"html",jstsx:"javascript",shell:"bash",cplussharp:"cpp",python:"python",java:"java"},extMap={htmlcss:"html",jstsx:"js",shell:"sh",cplussharp:"cpp",python:"py",java:"java"},statusLabelMap={htmlcss:"HTML",jstsx:"JavaScript",shell:"Shell",cplussharp:"C++",python:"Python",java:"Java"};function updateOutput(){const e=codeInput.value;if(""===e.trim())return highlighted.innerHTML="",lineNumbers.innerHTML="<span>1</span>",void(macHighlighted.innerHTML="");highlighted.removeAttribute("data-highlighted"),highlighted.className="language-"+(langMap[currentLang]||"html"),highlighted.textContent=e,hljs.highlightElement(highlighted),macHighlighted.removeAttribute("data-highlighted"),macHighlighted.className="language-"+(langMap[currentLang]||"html"),macHighlighted.textContent=e,hljs.highlightElement(macHighlighted);const t=e.split("\n").length;lineNumbers.innerHTML=Array.from({length:t},(e,t)=>`<span>${t+1}</span>`).join("")}function updateTitle(){const e=titleInput.value.trim()||"title",t=extMap[currentLang]||"html";titleText.textContent=e+"."+t,macTitle.textContent=e+"."+t}function triggerCopy(e){const t=codeInput.value;t.trim()&&navigator.clipboard.writeText(t).then(()=>{e.classList.add("copied"),e.querySelector("svg").innerHTML='<polyline points="20 6 9 17 4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>',setTimeout(()=>{e.classList.remove("copied"),e.querySelector("svg").innerHTML='<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>'},1800)})}const EMBED_CSS='*{margin:0;padding:0;box-sizing:border-box}body{background:transparent;overflow:hidden;font-family:"Google Sans Code","Consolas",monospace}.vscode{width:100%;height:100vh;background-color:#1f2428;display:flex;flex-direction:column;overflow:hidden}.vscode-head{width:100%;height:25px;background-color:#1f2428;display:flex;align-items:center;flex-shrink:0}.vscode-logo{width:15px;height:15px;margin-left:10px}.vscode-headbar{width:150px;height:10px;background-color:#262b2f;border-radius:2px;border:1px solid #2c3135;font-size:8px;color:#3c3d3e;line-height:10px;text-align:center;margin-left:auto;margin-right:auto}.vscode-codetitlename{width:100%;height:25px;background-color:#222323;display:flex;align-items:center;border-top:1.5px solid #262728;border-bottom:1.5px solid #262728;flex-shrink:0}.vscode-codetitle{height:100%;min-width:80px;max-width:40%;background-color:#262728;border-radius:2px;font-size:10px;color:#eaebec;border-top:2px solid #0078d4;display:flex;align-items:center;padding:0 10px;white-space:nowrap;font-family:"Stack Sans Text",sans-serif}.vscode-codetitle img{margin-right:4px}.vscode-codebody{display:flex;flex:1;min-height:0;margin-bottom:8px;overflow:hidden}.vscode-linenumbers{background-color:#1f2428;color:#4a5568;font-family:"Google Sans Code",monospace;font-size:var(--fs,12px);padding:10px 10px 10px 6px;text-align:right;user-select:none;line-height:1.6;min-width:36px;overflow:hidden;flex-shrink:0;display:block}.vscode-linenumbers span{display:block;line-height:1.6}.vscode-codeinput{flex:1;background-color:#1f2428;overflow:auto;padding:10px}.vscode-codeinput::-webkit-scrollbar{width:6px;height:6px}.vscode-codeinput::-webkit-scrollbar-track{background:transparent}.vscode-codeinput::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:99px}.vscode-codeinput pre{margin:0;padding:0;background:transparent!important}.vscode-codeinput pre code.hljs{background:transparent!important;padding:0!important;font-family:"Google Sans Code",monospace!important;font-size:var(--fs,12px);line-height:1.6!important;display:block;white-space:pre;text-align:left}.vscode-statusbar{width:100%;height:20px;background-color:#0078d4;display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 8px;flex-shrink:0}.vscode-statusbar-item{font-family:"Stack Sans Text",sans-serif;font-size:10px;color:rgba(255,255,255,0.9);padding:0 6px;height:100%;display:flex;align-items:center;border-radius:2px;white-space:nowrap}.mac{width:100%;height:100vh;background-color:#282c34;display:flex;flex-direction:column;overflow:hidden}.mac-titlebar{width:100%;height:38px;background-color:#21252b;display:flex;align-items:center;padding:0 14px;flex-shrink:0}.mac-dots{display:flex;align-items:center;gap:6px;flex-shrink:0}.mac-dot{width:12px;height:12px;border-radius:50%}.mac-dot-red{background-color:#ff5f57}.mac-dot-yellow{background-color:#febc2e}.mac-dot-green{background-color:#28c840}.mac-title-file{display:flex;align-items:center;margin-left:auto;margin-right:auto;font-family:"Stack Sans Text",sans-serif;font-size:12px;color:rgba(255,255,255,0.55);white-space:nowrap}.mac-codebody{flex:1;overflow:auto;padding:20px;min-height:0}.mac-codebody pre{margin:0;padding:0;background:transparent!important}.mac-codebody pre code.hljs{background:transparent!important;padding:0!important;font-family:"Google Sans Code",monospace!important;font-size:var(--fs,13px);line-height:1.7!important;display:block;white-space:pre;text-align:left}.mac-codebody::-webkit-scrollbar{width:6px;height:6px}.mac-codebody::-webkit-scrollbar-track{background:transparent}.mac-codebody::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:99px}',EMBED_JS='var _={htmlcss:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg",jstsx:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",shell:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bash/bash-original.svg",cplussharp:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg",python:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",java:"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg"},d={htmlcss:"html",jstsx:"javascript",shell:"bash",cplussharp:"cpp",python:"python",java:"java"},m=window.__EMBED_DATA__||{},p=m.panel||"vscode",l=m.lang||"htmlcss",t=m.title||"untitled.html",c=m.code||"",i=_[l]||_.htmlcss,h=d[l]||"html",e=c.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),n=c?c.split("\\n").length:1,o=Array.from({length:n},(_,j)=>"<span>"+(j+1)+"</span>").join(""),r=document.getElementById("embed-root");if(p==="mac"){r.style.setProperty("--fs",m.fontSize||"12px");r.innerHTML=\'<div class="mac"><div class="mac-titlebar"><div class="mac-dots"><div class="mac-dot mac-dot-red"></div><div class="mac-dot mac-dot-yellow"></div><div class="mac-dot mac-dot-green"></div></div><div class="mac-title-file"><img src="\'+i+\'" width="13" height="13" alt=""><span>\'+t+"</span></div></div><div class=\\"mac-codebody\\"><pre><code class=\\"language-"+h+\'">\'+e+"</code></pre></div></div>"}else{r.style.setProperty("--fs",m.fontSize||"12px");r.innerHTML=\'<div class="vscode"><div class="vscode-head"><img class="vscode-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/500px-Visual_Studio_Code_1.35_icon.svg.png" alt=""><div class="vscode-headbar">codesplay vscode snippet</div></div><div class="vscode-codetitlename"><div class="vscode-codetitle"><img src="\'+i+\'" width="10" height="10" alt=""><span>\'+t+\'</span></div></div><div class="vscode-codebody"><div class="vscode-linenumbers">\'+o+\'</div><div class="vscode-codeinput"><pre><code class="language-\'+h+\'">\'+e+\'</code></pre></div></div><div class="vscode-statusbar"><span class="vscode-statusbar-item"> main</span><span class="vscode-statusbar-item">\'+l.toUpperCase()+\'</span><span class="vscode-statusbar-item">UTF-8</span></div></div>\'}document.querySelectorAll(\'code[class*="language-"]\').forEach(function(el){hljs.highlightElement(el)})';function buildEmbedCode(e){const t=codeInput.value;if(!t.trim())return"";const n=langMap[currentLang]||"htmlcss",o=(titleInput.value.trim()||"untitled")+"."+(extMap[currentLang]||"html"),i=(t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),`<!DOCTYPE html><html><head><meta charset="utf-8"><style>${EMBED_CSS}</style><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"><\/script></head><body><div id="embed-root"></div><script>window.__EMBED_DATA__={panel:"${e}",lang:"${n}",title:${JSON.stringify(o)},code:${JSON.stringify(t)},fontSize:"${fontSlider.value}px"};${EMBED_JS}<\/script></body></html>`);return`<iframe src="data:text/html;base64,${btoa(unescape(encodeURIComponent(i)))}" width="600" height="400" frameborder="0" style="border-radius:8px;overflow:hidden;" loading="lazy"></iframe>`}function triggerEmbed(e,t){const n=buildEmbedCode(t);n&&navigator.clipboard.writeText(n).then(()=>{e.classList.add("copied"),e.querySelector("svg").innerHTML='<polyline points="20 6 9 17 4 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>',setTimeout(()=>{e.classList.remove("copied"),e.querySelector("svg").innerHTML='<polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline>'},1800)})}function triggerDownload(e,t,n){codeInput.value.trim()&&(e.classList.add("copied"),html2canvas(t,{backgroundColor:null,useCORS:!0,allowTaint:!0,scale:2}).then(t=>{const o=document.createElement("a");o.download=n+".png",o.href=t.toDataURL("image/png"),o.click(),setTimeout(()=>{e.classList.remove("copied")},1800)}).catch(()=>{e.classList.remove("copied")}))}vscodeCopyBtn.addEventListener("click",e=>{e.stopPropagation(),triggerCopy(vscodeCopyBtn)}),macCopyBtn.addEventListener("click",e=>{e.stopPropagation(),triggerCopy(macCopyBtn)}),vscodeEmbedBtn.addEventListener("click",e=>{e.stopPropagation(),triggerEmbed(vscodeEmbedBtn,"vscode")}),macEmbedBtn.addEventListener("click",e=>{e.stopPropagation(),triggerEmbed(macEmbedBtn,"mac")}),vscodeDownloadBtn.addEventListener("click",e=>{e.stopPropagation();const t=(titleInput.value.trim()||"snippet")+"-vscode";triggerDownload(vscodeDownloadBtn,document.getElementById("vscodePanel"),t)}),macDownloadBtn.addEventListener("click",e=>{e.stopPropagation();const t=(titleInput.value.trim()||"snippet")+"-mac";triggerDownload(macDownloadBtn,document.getElementById("macPanel"),t)}),select.addEventListener("click",e=>{select.classList.toggle("open"),e.stopPropagation()}),document.querySelectorAll(".select-option").forEach(e=>{e.addEventListener("click",t=>{document.querySelectorAll(".select-option").forEach(e=>e.classList.remove("active")),e.classList.add("active");const n=e.dataset.icon,o=e.dataset.label;currentLang=e.dataset.value,display.innerHTML=`\n <img class="lang-icon" src="${n}" alt="">\n <span>${o}</span>\n <span class="select-arrow">▼</span>\n `,titleIcon.src=n,macTitleIcon.src=n,statusLang.textContent=statusLabelMap[currentLang]||"HTML",updateOutput(),updateTitle(),select.classList.remove("open"),t.stopPropagation()})}),document.addEventListener("click",()=>select.classList.remove("open")),fontSlider.addEventListener("input",()=>{const e=fontSlider.value+"px";fontSizeLabel.textContent=e,highlighted.style.fontSize=e,macHighlighted.style.fontSize=e,lineNumbers.style.fontSize=e}),codeInput.addEventListener("input",updateOutput),titleInput.addEventListener("input",updateTitle),vsCodeOutput.addEventListener("scroll",()=>{lineNumbers.scrollTop=vsCodeOutput.scrollTop});let startX,startY,startW,startH,resizeType=null;function onMouseDown(e,t){resizeType=t,startX=e.clientX,startY=e.clientY,startW=panel.getBoundingClientRect().width,startH=panel.getBoundingClientRect().height,document.body.style.cursor="bottom"===t?"ns-resize":"ew-resize",document.body.style.userSelect="none",e.preventDefault()}handleRight.addEventListener("mousedown",e=>onMouseDown(e,"right")),handleBottom.addEventListener("mousedown",e=>onMouseDown(e,"bottom")),document.addEventListener("mousemove",e=>{if(resizeType){if("right"===resizeType){const t=Math.max(200,Math.min(.75*window.innerWidth,startW+(e.clientX-startX)));panel.style.width=t+"px"}if("bottom"===resizeType){const t=Math.max(120,Math.min(window.innerHeight-80,startH+(e.clientY-startY)));panel.style.height=t+"px"}}}),document.addEventListener("mouseup",()=>{resizeType&&(resizeType=null,handleRight.classList.remove("active"),handleBottom.classList.remove("active"),document.body.style.cursor="",document.body.style.userSelect="")});