Isotope Sorting alphabetically with accents - sorting

Question

for a project I've an issue with isotope with sorting items alphabetically which begin with an accented character.
The accented character are at the end of the list.
/* Set isotope */
var $container = $('.wall').isotope({
itemSelector: '.item',
layoutMode: 'masonry',
masonry: {
columnWidth: '.item',
gutter: 30
},
getSortData: {
name: 'h2'
}
})
$('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() });
}
.item{
font-size: .8em;
font-weight: normal;
font-family: verdana,sans-serif;
border-bottom: 1px solid #ccc;
line-height: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<!--
ISOTOPE SORTING
Remove accents for sorting
by http://mi-ca.ch
3rd feb. 2015
-->
<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">
<h2>n</h2>
</div>
</div>
exemple : http://jsfiddle.net/mica/fduz9c3p/

Answer 1

I just find a prototype that remove Accented characters
/**
* 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," ");
}
Here is a working example:
/**
* 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()
});
}
.item {
font-size: .8em;
font-weight: normal;
font-family: verdana, sans-serif;
border-bottom: 1px solid #ccc;
line-height: .8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<!--
ISOTOPE SORTING
Remove accents for sorting
by http://mi-ca.ch
3rd feb. 2015
-->
<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">
<h2>n</h2>
</div>
</div>
http://jsfiddle.net/mica/edfr00aj/1/