new icons
This commit is contained in:
Asad
parent
9abb62dd3b
commit
7e7452a016
@ -65,8 +65,16 @@ createApp({
|
||||
},
|
||||
{
|
||||
console: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>`
|
||||
}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>`,
|
||||
},
|
||||
{
|
||||
console_hiddne: `
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18ZM7.5 17L6.1 15.6L8.675 13L6.075 10.4L7.5 9L11.5 13L7.5 17ZM12 17V15H18V17H12Z" fill="#5F6368"/>
|
||||
<rect x="3.43359" y="2" width="26.3532" height="2" transform="rotate(45.8073 3.43359 2)" fill="#5F6368"/>
|
||||
</svg>
|
||||
`,
|
||||
},
|
||||
],
|
||||
highlightedCode: {
|
||||
html: "",
|
||||
@ -167,44 +175,47 @@ createApp({
|
||||
|
||||
methods: {
|
||||
loadPrismTheme() {
|
||||
const existingTheme = document.querySelector('link[data-prism-theme]');
|
||||
const existingTheme = document.querySelector("link[data-prism-theme]");
|
||||
if (existingTheme) {
|
||||
existingTheme.remove();
|
||||
}
|
||||
|
||||
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.setAttribute('data-prism-theme', '');
|
||||
|
||||
|
||||
const isDarkMode = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.setAttribute("data-prism-theme", "");
|
||||
|
||||
if (isDarkMode) {
|
||||
link.href = './libraries/prism/theme/prism-vsc-dark-plus.min.css';
|
||||
link.href = "./libraries/prism/theme/prism-vsc-dark-plus.min.css";
|
||||
} else {
|
||||
link.href = './libraries/prism/theme/prism.min.css';
|
||||
link.href = "./libraries/prism/theme/prism.min.css";
|
||||
}
|
||||
|
||||
|
||||
document.head.appendChild(link);
|
||||
this.rehighlightCode();
|
||||
},
|
||||
|
||||
rehighlightCode() {
|
||||
this.highlightCode(this.html, 'html');
|
||||
this.highlightCode(this.css, 'css');
|
||||
this.highlightCode(this.js, 'js');
|
||||
},
|
||||
rehighlightCode() {
|
||||
this.highlightCode(this.html, "html");
|
||||
this.highlightCode(this.css, "css");
|
||||
this.highlightCode(this.js, "js");
|
||||
},
|
||||
initThemeListener() {
|
||||
window.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', () => {
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", () => {
|
||||
this.loadPrismTheme();
|
||||
});
|
||||
},
|
||||
},
|
||||
handleScroll(event) {
|
||||
const textarea = event.target;
|
||||
const pre = textarea.nextElementSibling;
|
||||
if (pre) {
|
||||
pre.scrollTop = textarea.scrollTop;
|
||||
pre.scrollLeft = textarea.scrollLeft
|
||||
pre.scrollLeft = textarea.scrollLeft;
|
||||
}
|
||||
},
|
||||
toggleConsole() {
|
||||
@ -343,21 +354,21 @@ createApp({
|
||||
|
||||
updatePreview() {
|
||||
if (this.isExecutionPaused) return;
|
||||
|
||||
|
||||
const preview = document.getElementById("preview-frame");
|
||||
if (!preview) return;
|
||||
|
||||
|
||||
// create a new iframe to replace the existing one
|
||||
const newFrame = document.createElement("iframe");
|
||||
newFrame.id = "preview-frame";
|
||||
|
||||
|
||||
// replace the old frame with the new one
|
||||
preview.parentNode.replaceChild(newFrame, preview);
|
||||
|
||||
|
||||
// write content to the new frame
|
||||
const doc = newFrame.contentDocument;
|
||||
doc.open();
|
||||
|
||||
|
||||
const content = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
@ -368,7 +379,9 @@ createApp({
|
||||
</head>
|
||||
<body>
|
||||
${this.html || ""}
|
||||
${this.showConsole ? `<script>window.eruda && eruda.init({
|
||||
${
|
||||
this.showConsole
|
||||
? `<script>window.eruda && eruda.init({
|
||||
useShadowDom: true,
|
||||
autoScale: true,
|
||||
defaults: {
|
||||
@ -379,13 +392,15 @@ createApp({
|
||||
|
||||
});
|
||||
eruda.show();
|
||||
</script>` : ''}
|
||||
</script>`
|
||||
: ""
|
||||
}
|
||||
<script>
|
||||
${this.js || ""}
|
||||
</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
|
||||
try {
|
||||
doc.write(content);
|
||||
doc.close();
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</button>
|
||||
|
||||
<button class="toggle-icon" @click="toggleConsole">
|
||||
<span v-html="showConsole ? extraIcons[2].console : extraIcons[2].console"></span>
|
||||
<span v-html="showConsole ? extraIcons[2].console : extraIcons[3].console_hiddne"></span>
|
||||
<span>console</span>
|
||||
</button>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
:class="{ 'toggle-active': isExecutionPaused }"
|
||||
>
|
||||
<span v-html="isExecutionPaused ? playIcon : pauseIcon"></span>
|
||||
<span>{{ isExecutionPaused ? 'Resume' : 'Pause' }}</span>
|
||||
<span>{{ isExecutionPaused ? 'live' : 'pause' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user