Table of Contents
Introduction
In my latest installment of the Peasy-UI library series we are going to dive another layer deeper. In this entry, we will cover how you can use both internal CSS and inline CSS bindings with Peasy-UI. We also are going cover the CSS helper classes that are made available using Peasy to assist with animations. We will dig into each of the three classes that are available, and we can cover how they can be used in your template and bind elements to these helper classes.
If you missed the introduction article for Peasy-UI, you can read it here, and it can provide the overview for the library, and even introduces upcoming topics in the series.
Binding CSS Properties
In this section, let's cover different strategies of using Peasy-UI's bindings with CSS.
Internal CSS
When I am binding style properties for a Peasy-UI component or small application, my primary approach is to use the standards <style></style> block above my html that I am using. Let's take a look at a quick example.
In this example I have a toggle button, which when clicked is transitioning the elements position back and forth. The other button functions will be reviewed in their designated sections later.
In my DOM template:
...
<button \${click@=>toggle}>Toggle</button>
...
<test-element></test-element>
...
My CSS for this:
test-element {
position: fixed;
top: 50%;
left: 50%;
width: 50px;
aspect-ratio: 1/1;
background-color: whitesmoke;
border-radius: 50%;
transform: translate(-\${leftPercent}px, 150px);
transition: transform 0.9s ease-in-out, scale 0.9s ease-in-out;
scale: 1;
}
In my data model, our logic:
const model = {
toggleFlag: true,
leftPercent: 0,
toggle: (_element: HTMLElement, model: any) => {
if (model.toggleFlag) model.leftPercent = 100;
else model.leftPercent = 0;
model.toggleFlag = !model.toggleFlag;
},
};
When the toggle method is fired by clicking the button, we use the model.toggleFlag to track our toggle state, and also set the model.leftPercent property to different values. This is the first way I bind CSS properties in Peasy-UI. Another trick I use is I can change the color string of CSS property to transition colors as well. As a general reminder, the first parameter of a Peasy-UI callback is the parent element of the event, and if I'm not using it in the current method, I designate it with the _ prefix. For more details on how Peasy-UI binds event callbacks, a prior article addresses it in a deeper context: Event Binding.
test-element {
...
background-color: \${colorString};
...
}
const model = {
...
colorString: "whitesmoke",
...
};
I can just change the string to other css colorstrings to change the elements color, or you can use a hexstring.
Inline CSS
For more complicated CSS manipulation, sometimes I have added bindings to inline class attributes on elements. That way I can bind a string in the data model, and can control specifically what CSS classes I want active on an element. Let's take a look at a quick example.
In this demonstration you see the test element is toggled on its scale property. Let's take a quick look at how I am accomplishing this.
In my DOM template:
...
<button \${click@=>inlinetoggle}>Inline Toggle</button>
...
<test-element class="\${testClassName}"></test-element>
...
my css for this:
test-element {
position: fixed;
top: 50%;
left: 50%;
width: 50px;
aspect-ratio: 1/1;
background-color: whitesmoke;
border-radius: 50%;
transform: translate(-\${leftPercent}px, 150px);
transition: transform 0.9s ease-in-out, scale 0.9s ease-in-out;
scale: 1;
}
.scaleTestElement {
scale: 1.5;
}
and in my data model:
export const model = {
...
inlinetoggleFlag: false,
testClassName: "",
...
inlinetoggle: (_element: HTMLElement, model: any) => {
if (model.inlinetoggleFlag) model.testClassName = "";
else model.testClassName = "scaleTestElement";
model.inlinetoggleFlag = !model.inlinetoggleFlag;
},
};
Let's breakdown what aspects are highlighted here. Let's start with the toggle button being used to trigger the change, that's a simple button element with a click event binding the inlinetoggle method in the data model to the button. When that method is called, the data model uses a toggle flag, model.inlinetoggleFlag to track a toggle state, and it also changes the model.testClassName string. In the template DOM, the test-element has a class attribute with a string binding in it. When you update the string in the data model, the new class gets added to the element, changing the scale property. The transition property of the element covers the scale property as well.
The Three Helpers
This section will describe the functionality and implementation details of three built-in CSS helper classes that are used in Peasy-UI. This features happen natively regardless if they are taken advantage of or not. These three helpers are: pui-adding, pui-removing, and pui-moving. These are CSS class names added to elements that are being manipulated by Peasy-UI, and are available to be leveraged for managing transitions.
pui adding
The pui-adding CSS class is added to an element when it transitions from not rendered to rendered. This can happen in a couple scenarios. If you are adding an element to a list that's rendered with the <=* binding, then that new element receives the pui-adding class. Another means of adding an element is by using the rendering binding === or !==. To review the available bindings for Peasy-UI, you can reference this article on the bindings here:Bindings and Templates: Part 2 of the Peasy-UI series
The duration of the CSS class being adding is until any transitions tied to pui-adding class is complete. Let's take a deeper look at this.
const model = {
isDivShowing: false,
};
const template = `
<style>
.child{
opacity: 1;
transition: opacity 1.0s;
}
.child.pui-adding{
opacity: 0;
}
</style>
<div class="parent">
<div class="child" \#{===isDivShowing}>
Hello World
</div>
</div>
`;
UI.create(document.body, model, template);
In this example what you will see is that when you set model.isDivShowing to true, Peasy-UI will add the element to the DOM, starting with the pui-addding class. The pui-adding class will automatically be removed from the element upon the completion of the 1 second CSS transition that is set for the opacity property.
pui removing
You will see that the pui-removing class helper is the opposite of pui-adding.
The pui-removing CSS class is added to an element when it transitions from rendered to not rendered. This can happen in a couple scenarios. If you are removing an element from a list that's rendered with the <=* binding, then that element which is being removed receives the pui-removing CSS class. Another means of removing an element is by using the rendering binding === or !==.
The duration of the class removing is until any transitions tied to pui-removing class is complete. Let's take a deeper look at this.
const model = {
isDivShowing: true,
};
const template = `
<style>
.child{
opacity: 1;
transition: opacity 1.0s;
}
.child.pui-removing{
opacity: 0;
}
</style>
<div class="parent">
<div class="child" \#{===isDivShowing}>
Hello World
</div>
</div>
`;
UI.create(document.body, model, template);
In this example, what you will see is that when you set model.isDivShowing to false, Peasy-UI will add the pui-removing class to the element prior to transitioning the element from the DOM. The pui-removing class will remain on the element upon the completion of the 1 second CSS transition that is set for the opacity property, of which the entire element is removed from the DOM completely.
Show Hide Example
In this example we are working with a DOM template that renders this:
<div>
<div class="controls">
<button \${click@=>hide}>Hide</button>
<button \${click@=>show}>Show</button>
<button \${click@=>move}>Move</button>
</div>
<element-container>
<inner-element \${el<=*elements}>
\${el.id}
</inner-element>
</element-container>
</div>
In this example, we have replaced standard
elements with more custom names to assist in clarity. and are just elements in practice.You can see the inner-element div has a list binding that takes the elements array and lists out an inner-element for each item in the list, and places the .id property of each object into the content for the element.
For the sake of this quick demo, we are using a fixed data model: (showing only the elements array)
export const model = {
elements: [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
],
//... click bindings below
What is important here is the CSS styling we added to the rendered template
inner-element {
...
/*other properties that aren't relevant above*/
transition: opacity 0.9s, background-color 1.2s;
opacity: 1;
background-color: whitesmoke;
}
inner-element.pui-adding {
opacity: 0;
}
inner-element.pui-removing {
opacity: 0;
}
In the click handlers for the Hide and Show buttons, we are removing and adding the elements from the array. Nothing fancy, but it exercises how Peasy-UI uses the helper classes to manage the CSS transitions. Either helper CSS classes are added, and then the opacity transition of 0.9 seconds starts, then the class is removed. This is how you can use Peasy-UI to manage element transitions.
pui moving
The pui-moving CSS class is added to an element when the element is a part of a list or array, and moves indexes within that list.
The duration of the class adding is until any transitions tied to pui-moving class is complete. Let's take a quick look at this.
In this example, we will call a function that changes the order in the list of elements. When we change the index positions, the pui-moving class will be added to the element. We are using the .pui-moving class to change the elements red that are moving, and this transition happens over time. After the transition period, the array is rendered with the updated order to the DOM.
Our DOM template:
<button \${click@=>move}>Move</button>
<element-container>
<inner-element \${el<="*elements}"> \${el.id} </inner-element>
</element-container>
Our CSS:
inner-element {
width: 100px;
aspect-ratio: 1/1;
background-color: whitesmoke;
border-radius: 50%;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
transition: opacity 0.9s, background-color 1.2s, left 0.9s;
opacity: 1;
scale: 1;
left: 0px;
}
inner-element.pui-moving {
background-color: red;
}
and our DOM model logic:
const model ={
elements: [...],
move: (_element: HTMLElement, model: any) => {
if (model.elements.length > 0) {
if (model.elements[0].id === 1) {
moveElement(model.elements, 0, 2);
} else {
moveElement(model.elements, 2, 0);
}
}
},
};
function moveElement(array: any[], fromIndex: number, toIndex: number) {
const element = array.splice(fromIndex, 1)[0];
array.splice(toIndex, 0, element); position
}
We have a button element that triggers a toggle of sorts, but only based on the content of the elements array in the data model. If the element in the zero index position has an id of 1, then we move that element to the 3rd position, index 2. Otherwise, we move the element from index 2 into index 0. One observation that can be made, is that moving one element actually forces all the elements in this example to move, therefore, all three elements get the pui-moving class added.
Conclusion
Our focus in this article in the Peasy-UI series is CSS. We took a look into internal and inline CSS binding, with code samples and an example. Next we discussed the three CSS helper classes that are available to use, pui-adding, pui-removing, and pui-moving. Our examples in this article are straightforward, but one can see how they can be applied to provide a sophisticated level of control of the DOM.
In our next entry, we will dig into the most complicated concept of Peasy-UI, and break it down into smaller bites: using Peasy-UI to make re-usable components.
More information
More information can be found in the GitHub repo for Peasy-Lib, you also will find all the other companion packages there too. Also, Peasy has a Discord server where we hang out and discuss Peasy and help each other out.
The author's twitter: Here
The author's itch: Here
Peasy-UI Github Repo: Here
Peasy Discord Server: Here
Top comments (0)