pushqrdx
less repetitive if possible?
I wish webstorm could add this
also is there a way I dont have to keep repeating css like here:
doesnt seem to work with ternary's if you put it in the 2nd condition:
whole code:
//stored in /components/nav.js
/**
* IMPORTANT This component assumes a single parent wrapper alongside a main sibling for content so
* that it can change the flex direction of the parent
* @param hostComponent
*
* @example
* in sidebar mode
* <nav data-component="nav" data-header-bar="true"></nav>
*
*/
export default (hostComponent) => {
const render = (isHeaderBarMode = false) => {
// dont display the nav if we are in header bar mode and modify the parent flex direction
let { burgerPx,headerBar} = hostComponent.dataset
if(!headerBar && burgerPx) {
throw new Error("you do not need burgerPx when headerBar isn't true" )
}
if (headerBar === 'true') {
hostComponent.style.display = 'none';
}
// CSS styles for the navigation component
// language=CSS
const navStyles = /* css */`
nav {
animation: 0.5s ease-in-out 0s 1 slideInFromLeft;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 10px 20px;
background-color: var(--sidenav-color);
min-width: 140px;
flex-wrap: wrap;
& button {
width: 100%;
}
&.header-bar-mode {
flex-direction: row;
align-items: center;
justify-content: center;
background-color: transparent;
& a {
color: var(--default-text);
justify-content: center;
align-items: center;
}
}
${burgerPx?/* css */ `
@media (max-width: ${burgerPx}px) {
&.header-bar-mode {
flex-direction: column;
}
}`:/* css */`
@media (max-width: 600px) {
& .text {
display: none;
}
min-width: auto;
}
`}
}`;
// Update the count display and button markup together
hostComponent.innerHTML = `
<style>${navStyles}</style>
<a data-nav href="/" title="Home">
<span class="icon">🏠</span>
<!-- Unicode for a house, similar to a home icon -->
<span class="text">Home</span>
</a>
<a data-nav href="/button-badge" title="Button + Badges Design System">
<span class="icon">🔘</span>
<!-- Unicode for a pencil, similar to an edit or form icon -->
<span class="text">Button + Badges</span>
</a>
<a data-nav href="/form" title="Form Design System">
<span class="icon">✏</span>
<!-- Unicode for a pencil, similar to an edit or form icon -->
<span class="text">Form</span>
</a>
<a data-nav href="/maps" title="Map example">
<span class="icon">🗺</span>
<!-- Unicode for a pencil, similar to an edit or form icon -->
<span class="text">Maps</span>
</a>
<a data-nav href="/users" title="DB retrival example (requires the deno backend to run - see readme (Optional Backend))">
<span class="icon">👥</span>
<span class="text">DB users</span>
</a>
<a data-nav href="/calendar" title="Calendar Example">
<span class="icon"> 📆 </span>
<span class="text"> Calendar</span>
</a>
<a data-nav href="/multiple-instances" title="Multiple instances of vanilla.js comoonets in action with shared state">
<span class="icon">🧬</span>
<span class="text">Multiple instances</span>
</a>
<a data-nav href="/cookies" title="Elementary cookie popup permissions thing">
<span class="icon">🍪</span>
<span class="text">Cookie popup</span>
</a>`;
//add classes button secondary squarify to all nav links
hostComponent.querySelectorAll('a').forEach((navLink) => {
navLink.classList.add('button', 'secondary', 'squarify');
});
if (hostComponent.dataset.headerBar === 'true') {
hostComponent.classList.add('header-bar-mode');
// todo find a better way to do this
hostComponent.parentElement.style.flexDirection = 'column';
//remove the icons to save horizontal space only if the flex container starts to run out of space
hostComponent.querySelectorAll('.icon').forEach((icon) => {
// icon.style.display = 'none';
});
}
// the only thing not in css to make visible after we change the parent
hostComponent.style.display = 'flex';
};
// Display the initial count
render();
};
I am sorry but I didn't get what you mean by repeating css, if you mean repeating the /*css*/ I don't think there's any way around that because this is how you tell inline-html to activate and take over. If otherwise you mean repeating css code you can perhaps extract common code into separate variables and use it like so ${code} whenever it repeats
doesn't seem to work with ternary
By doesn't work you mean it's not formatted properly or doesn't work at all? Because it seems to be highlighted in the screenshot
Firstly notice:
- The red brackets meaning vscode is highlighting them as mismatched.
- min-width has the same coloration for me and shows up as an element selector on hover.
@quantuminformation I noticed you were using & which is scss, not css, and changing it solved the bracket mismatching error. The second thing I solved by moving the min-width declaration to above & .text { child rule line. But there is still something going on with the engine because the burgerPx in the (fixed) `${burgerPx ? /* scss */`` line shows up for me as an element selector on hover
@pushqrdx This might be related to #55 . But by now I think it's probably going to take more than a regex, and diving into bracket-balancing for creating "deadzones" in the css context where it swaps to JS delimited by a ${ and its balancing }. It's apparently got to do with the parser and the specific language's delimiter characters. I did some tests with the html part and the same "something wrong, color red" happens with both angled brackets.
Notice:
- All inner declarations tagged scss seem to ignore the
@mediarule - All inner declarations tagged css seem to ignore the
&child rule and process the immediatly following declaration as a selector rule (min-width in the example, but can be consistently reproed). - Tagging the last inner declaration as css breaks the balancing of its containing
${...}(which greatly leads me to believe this is indeed related to #55) - In all cases, hovering over
burgerPxshows it as an element-selector - In the string tagged html, the inner string also tagged html says there's an issue with the angled bracket, while in the second untagged string it shows fine
- Hovering over the
boolvariable also shows it as an element selector.
Code:
/* scss */`
${ burgerPx ?
/* css */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* scss */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* css */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* scss */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* scss */`
${ burgerPx ?
/* scss */`@media (max-width: ${burgerPx}px) { &.header-bar-mode { flex-direction: column; } }` :
/* css */`@media (max-width: 600px) { & .text { display: none; } min-width: auto; }`
}`
/* html */ `${ bool ? /*html*/`<td>${value2 > value1}</td>` : `${value2 < value1}`}`
