Animated layouts in Liferay using Isotope JS

This article will help you to learn and how we can use isotope javascript library in our project. Isotope javascript library who developed by the David DeSandro. Isotope provides animated sorting and filtering in UI elements. It uses Masonry and packery layouts in addition to other layouts.

I found both of them before some days when i started working in one of my project and it’s so amazing, I whipped up a few demos to see for myself!

Install Isotope

For installation we need to download these isotope library from isotope website.

• isotope.pkgd.js un-minified, or
• isotope.pkgd.min.js minified

Package managers

• Install with Bower: bower install isotope –save
• Install with npm: npm install isotope-layout

Configuring Isotope

Portal_nirmal.vm

Include the Isotope .js file in your Theme.

<script src="${themeDisplay.pathThemeJavaScript}/isotope.pkgd.js"></script>

After create a theme you can create a portlet with the name of isotope-layout for writing your HTML. write initialization code in your theme main.js file.

Initializing isotope with Jquery:

$('.isotope-grid').isotope({
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

Initialize with Vanilla JavaScript:

var elem = document.querySelector('.isotope-grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.isotope-grid', {
  // options
});

Initialize in HTML:

You can initialize Isotope directly in HTML, without writing any JavaScript or Jquery. You have to just add js-isotope to the class of the container element. For adding the options you can add data-isotope-options attribute in your element.

How to use Filtering,Sorting and Layout

Using Isotope you can hide and show item elements with the filter option. Which shows the only matched items according to the filter. Here you can see how we can apply the filters on:

Selectors(Like Class and id)

$grid.isotope({ filter: '.ClassName' });

jQuery selectors(if jQuery is present)

// filter .ClassName items that are NOT .transition class

$grid.isotope({ filter: ‘.ClassName:not(.transition)’ });

With Functions

$grid.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // _this_ is the item element. Get text of element's .number
    var ClassName = $(this).find('.ClassName').text();
    // return true to show, false to hide
    return parseInt( ClassName, 10 ) > 50;
  }
})

UI with Buttons

<button data-filter="numberGreaterThan50">number > 50</button>
<button data-filter="ium">name ends with -ium</button>

// init Isotope

var $grid = $('.grid').isotope({
  // options
});

// filter items on button click

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Sorting

In Sorting we are using two methods getSortData() and SortBy().

For more Information: Sorting

layout

In Layout all sizing and styling of items is handled by your own CSS so when we are developing the responsive layouts then we need to set item sizes with percentages in css and also we need to change the mode of layout with masonry and set the percentage-width columnWidth with element sizing. Setting up the percentPosition option true (percentPosition: true) reduce the adjustment transitions on responsive mode.

For more Information: Layout