Design Dynamic "Panel" component approach?
1. The panel shows one of many "views" depending on it's state.
2. Each view presents information and may interact with user
3. Any of the views can alter the "panel" state, trigger events
4. Panel responds to state change and events to possibly swap the current view with another
5. Implement using using only javascript/html/css - no frameworks
Ways I know of that might accomlish this:
1. js: directly manipulate the DOM
2. CSS, z-order, hidden/visible, etc
An example would be a "login" panel:
1. state:not-logged-in: the usual username/password and login button
2. state:is-logged-in: "you are logged in as USERNAME", logout button
My impression so far is that css is the more elegant way to do this, however, my knowledge of css pales in comparison to javascript. I just need to get this working quickly without watching a thousand, many out-dated, videos and articles about css.
What are you thoughts on this?
7 Replies
sounds like you are trying to shoehorn reactivity without react
if you try hard enough, you will have a vastly inferior version of what you want
but, even then, there are ways you can do this more "easily"
you can have panels with an id, which then you have <template> tags associated to those (by id, for example) and you can redraw the content based on state changes
but, again, you are doing a dogwater version of reactivity
the other option is to render from server-side, which gives you a whole lot more control
the result is a lot easier to reason with as well
despite being dogwater, im willing to test this
Thanks for hint re: template tag. I checked it out.
I'm not looking to use this technique to design my overall app - just need to change the panel without needing to reload the page (ssr: a reload would output the correct panel content).
The code I have below works in principal - here it is swapping two colored boxes.
What do you think of that. Again, it's only point is to avoid a page-load to update a small part of the overall page.
Your review? Thanks
Here is the code I have working:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<h1>Preview</h1>
<button id="z-toggle" style="margin-bottom:2ch ;">Toggle z-order</button>
<div>
<div id="div1" class="box div1"></div>
<div id="div2" class="box div2"></div>
</div>
</body>
</html>
<script>
// window.onload = () => {
const button = document.getElementById("z-toggle");
button.addEventListener("click", (ev) => {
console.log("click");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const tmp1 = window.getComputedStyle(div1).zIndex;
const tmp2 = window.getComputedStyle(div2).zIndex;
// console.log(
tmp1: ${tmp1});
// console.log(tmp2: ${tmp2});
div1.style.zIndex = tmp2;
div2.style.zIndex = tmp1;
// console.log( window.getComputedStyle(div1).zIndex);
// console.log( window.getComputedStyle(div2).zIndex);
})
// }
</script>
style.css
.div1 {
background-color: green;
z-Index: 1;
}
.div2 {
background-color: blue;
z-Index: 2;
}
.box {
position: absolute;
width: 500px;
height: 100px;
}
button {
border-style: solid;
border-color: black;
border-width: 3px;
font-size: 28px;
margin-bottom: 1ch;
}i think it is a very horrible idea
if it doesn't work, it shouldn't exist
just hidding with z-index goes against that
also, messing with x-index can cause weird issues, where stuff shows on top of other stuff
ok, i'll just manipulate the dom. thanks
you're welcome
that is the most sensible way of doing it