js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve flavor logic

Browse Source
This commit is contained in:
Cory LaViska
2021-11-05 09:47:43 -04:00
parent de4207940c
commit 3ffbc09630
3 changed files with 67 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/assets/plugins/code-block/code-block.js
View File

@@ -1,8 +1,11 @@
(() => {
const reactVersion = '17.0.2';
let flavor = localStorage.getItem('flavor') || 'html'; // "html" or "react"
let flavor = getFlavor();
let count = 1;
// Sync flavor UI on page load
setFlavor(getFlavor());
if (!window.$docsify) {
throw new Error('Docsify must be loaded before installing this plugin.');
}
@@ -45,6 +48,19 @@
script.parentNode.replaceChild(newScript, script);
}
function getFlavor() {
return localStorage.getItem('flavor') || 'html';
}
function setFlavor(newFlavor) {
flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
localStorage.setItem('flavor', flavor);
// Set the flavor class on the body
document.body.classList.toggle('flavor-html', flavor === 'html');
document.body.classList.toggle('flavor-react', flavor === 'react');
}
function wrap(el, wrapper) {
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
@@ -114,7 +130,7 @@
pre.setAttribute('aria-labelledby', toggleId);
const codeBlock = `
<div class="code-block code-block--show-${flavor} ${hasReact ? 'code-block--has-react' : ''}">
<div class="code-block">
<div class="code-block__preview">
${code.textContent}
<div class="code-block__resizer">
@@ -122,14 +138,14 @@
</div>
</div>
<div class="code-block__source code-block__source--html">
<div class="code-block__source code-block__source--html" ${hasReact ? 'data-flavor="html"' : ''}>
${pre.outerHTML}
</div>
${
hasReact
? `
<div class="code-block__source code-block__source--react">
<div class="code-block__source code-block__source--react" data-flavor="react">
${reactPre.outerHTML}
</div>
`
@@ -220,18 +236,15 @@
const codeBlock = button?.closest('.code-block');
if (button?.classList.contains('code-block__button--html')) {
flavor = 'html';
setFlavor('html');
} else if (button?.classList.contains('code-block__button--react')) {
flavor = 'react';
setFlavor('react');
} else {
return;
}
localStorage.setItem('flavor', flavor);
// Update flavor buttons
[...document.querySelectorAll('.code-block')].map(codeBlock => {
codeBlock.classList.toggle('code-block--show-html', flavor === 'html');
codeBlock.classList.toggle('code-block--show-react', flavor === 'react');
codeBlock
.querySelector('.code-block__button--html')
?.classList.toggle('code-block__button--selected', flavor === 'html');
@@ -306,7 +319,7 @@
convertModuleLinks(reactExample) +
'\n' +
'\n' +
'ReactDOM.render(<App />, document.getElementById("root"));';
`ReactDOM.render(<App />, document.getElementById('root'));`;
}
// CSS templates