Sort
Use cases
How to use it
Paste before </body> tag of the page you're working with.
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list')
// run the sort Library component on your instance
customBlogPosts.sort({
sortTrigger: '.sort-button', // class of the button........
sortReverse: true, // if you want sort first click to be Z>A.......
activeClass: 'active', // class that styles the active state
animation: {
duration: 0,
}
})
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the button that will be used to filter items. Clicking this button triggers the sort on your list.
Option to make the initial sort click reversed.
true = sort Z > A on first click
false = sort A > Z on first click
If your list is already sorted from A > Z and sortReverse is false, nothing will happen on the first click.
The class that will be added to buttons when they are in an active state. This allows you to visibly show the user that a sort is active.
IMPORTANT: You must create a style for this active class inside Webflow. If you set your active state to the class 'button-active' you must create a style in Webflow Designer for button-active.
~activeClass: 'button-active'~
Option to add animations and transitions for items leaving and entering the filtered grid.
~true~ turns on animation on, ~false~ turns animation off (default: ~true~).
Time the animation happens in seconds. ~0.2~ would be 0.2 seconds, or 200 milliseconds (default: ~0.2~).
Easing of the effect. Available options are ~ease~, ~ease-in~, ~ease-out~, and ~ease-in-out~ (default: ~ease~).
Add ~fade~, ~translate~, ~rotate~, and ~scale~ effects (default: ~fade~).
attributes
The data-attribute placed on the sort button.
This tells the Library what to sort by when that button is clicked.
The data-attribute name is always ~sort-by~.
The data-attribute value is the class of the text that button will sort by.
If you are filtering by the year, give a class of ~.year-text~ to the text element.
.png)
Types of html elements we can use to sort
