isotope sorting accents

Fix issues with accents with isotope sorting Tags : sort | accents | utf8 | isotope | remove accents | accent | alpha | alphanumeric

by abubelinha

HTML

<script src="https://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<!--
ISOTOPE SORTING
Remove accents for sorting 

by http://mi-ca.ch
3rd feb. 2015
ORIGINAL: http://jsfiddle.net/mica/edfr00aj/1/
https://stackoverflow.com/questions/28303137/isotope-sorting-alphabetically-with-accents

require : isotope plugin -> http://isotope.metafizzy.co/isotope.pkgd.min.js
-->
<button class="alpha">alpha</button>
<button class="original-order">original order</button>
<button class="orderby asc">ASC</button>
<div class="wall">
    <div class="item">
        <h2>ï</h2>
    </div>
    <div class="item">
        <h2>z</h2>
    </div>
    <div class="item">
        <h2>a</h2>
    </div>
    <div class="item">
        <h2>b</h2>
    </div>
    <div class="item">
        <h2>y</h2>
    </div>
    <div class="item">
        <h2>c</h2>
    </div>
    <div class="item">
        <h2>x</h2>
    </div>
    <div class="item">
        <h2>d</h2>
    </div>
    <div class="item">
        <h2>w</h2>
    </div>
    <div class="item">
        <h2>e</h2>
    </div>
    <div class="item">
        <h2>v</h2>
    </div>
    <div class="item">
        <h2>f</h2>
    </div>
    <div class="item">
        <h2>u</h2>
    </div>
    <div class="item">
        <h2>g</h2>
    </div>
    <div class="item">
        <h2>t</h2>
    </div>
    <div class="item">
        <h2>i</h2>
    </div>
    <div class="item">
        <h2>j</h2>
    </div>
    <div class="item">
        <h2>s</h2>
    </div>
    <div class="item">
        <h2>r</h2>
    </div>
    <div class="item">
        <h2>k</h2>
    </div>
    <div class="item">
        <h2>é</h2>
    </div>
    <div class="item">
        <h2>è</h2>
    </div>
    <div class="item">
        <h2>q</h2>
    </div>
    <div class="item">
        <h2>p</h2>
    </div>
    <div class="item">
        <h2>l</h2>
    </div>
    <div class="item">
        <h2>o</h2>
    </div>
    <div class="item">
        <h2>m</h2>
    </div>
    <div class="item">
       ...

CSS

.item{
    font-size: .8em;
    font-weight: normal;
    font-family: verdana,sans-serif;
    border-bottom: 1px solid #ccc;
    line-height: .8;

}

JavaScript

/** 
 * Remove Accents to a string 
 */
String.prototype.removeAccents = function(){
  return this
  .toLowerCase()
  .replace(/[áàãâä]/gi,"a")
  .replace(/[éèëê]/gi,"e")
  .replace(/[íìïî]/gi,"i")
  .replace(/[óòöôõø]/gi,"o")
  .replace(/[úùüû]/gi, "u")
  .replace(/[ç]/gi, "c")
  .replace(/[ñ]/gi, "n")
  .replace(/[^a-zA-Z0-9]/g," ");
}

/* Set isotope */
var $container = $('.wall').isotope({
  itemSelector: '.item',
  layoutMode: 'masonry',
  masonry: {
      columnWidth: '.item',
      gutter: 30
   },
   // prepare sorting data
   getSortData: {
       // this function find h2 and remove accents 
      name: function( itemElem ) { // function
              return String($( itemElem ).find('h2').text()).removeAccents();
      }
   }
    
})
$('button.alpha').on('click',function(){
  $container.isotope({ sortBy: 'name',sortAscending:getOrderBy() });
})
$('button.original-order').on('click',function(){
  $container.isotope({ sortBy: 'original-order',sortAscending:getOrderBy() });
})
$('button.orderby').on('click',switchOrderBy);
function getOrderBy(){
  return $('.orderby').hasClass('asc');
}
function switchOrderBy(){
  $('.orderby').toggleClass('asc');
    $('.orderby').text(($('.orderby').hasClass('asc'))?'ASC':'DESC');
   $container.isotope({ sortBy: 'name',sortAscending:getOrderBy() });
 
}