Isotope: write a Function to getSortData from array? (optimization, fiddle provided)

Question

I'm working with isotope.js to display a lot of boxes containing text in different languages. (fiddle) The items can be sorted by language - after clicking a link, items with the selected language will be sorted on top of the list, using getSortData and this code:

var $container = $('#container');
    $container.isotope({
        itemSelector: '.tipp',        
        getSortData : {

        fr : function( $elem ) {
        var isFr = $elem.hasClass('fr');
        return (!isFr?' ':'');
        },
        en : function( $elem ) {
            var isEn = $elem.hasClass('en');
            return (!isEn?' ':'');
        },
        de : function( $elem ) {
            var isDe = $elem.hasClass('de');
            return (!isDe?' ':'');
        }
            // + 20 more languages!!!
    }
});

This works fine, but the list of languages will be a lot longer (24 languages).

I'm asking if it's possible to get the sort data from an array, or to write a function to get all used (language)classes as sortData.

I found an article with a tutorial about such a function but this code did not work for me:

function createSort(){
    var sorts = {};
    var $source = jQuery('source'); //from where I will read data
    $source.each(function() {
        var $element = jQuery(this),
        findBy = $element.children('a').data('sort-type'), //element, numerical data, data attribute or a property
    key = $element.children('a').data('option-value'); //the name of the element, numerical data, data attribute or a property
    //if the sort is based on a css class (an element)
        if(findBy === "class"){
            sortData[key] = function($elem){return $elem.find('.'+ key).text();};
        }
    //if the sort is based on a data attribute (in my scenario is a numerical attribute)
    if(findBy === "attr"){
        sortData[key] = function($elem){return parseInt($elem.attr('data-category-' + key), 10);};
        }
    });
    return sortData;
}

//then I call the function and pass the result to getSortData
var sort_data = createSort(),
$container.isotope({
    //more code.
    getSortData:sort_data
});

Later I don't want to work with a link navigation, I'll use BBQ Hash history to sort the items from an external link (i.e. www.someurl.com/index.htm#sortBy=fr) So there should not be any nav or link list, I want to get the classes directly from the items or at least specify an array of language classes on top of my isotope code ['fr', 'de', 'en']

Basically this is a question of optimization, because it seems inefficent writing down the same snippet 24 times, right?

Again linking to my at least colorful jsfiddle.

Thanks a lot for any help!

Will you be sorting on additional information? The reason I ask is that if you aren't, you could do something like this [jsFiddle](http://jsfiddle.net/davidcl64/2CgXv/2/). It is basically just ensuring the last selected language appears at the front of the list. Changes made to the hashchange handler - no sorting. — dc5, Sep 23 '13 at 21:14

score 0 · Accepted Answer · 2013-09-23T21:02:40.520

0

I'm not really sure if I understood you correctly. But, won't something simple like this accomplish what you want?

var getSortData = {};
['fr', 'en', 'de'].forEach(
    function (language) {
        getSortData[language] = function (language) {
            return function (element) {
                return element.hasClass(language) ? '' : ' ';
            };
        }(language);
    });

var $container = $('#container'), 
isotopeArguments = { itemSelector: '.tipp',
                     filter: '*',
                     layoutMode: 'masonry',
                     getSortData: { } };

['fr', 'en', 'de'].forEach(
    function (language) {
        isotopeArguments.getSortData[language] = function (language) {
            return function (element) {
                return element.hasClass(language) ? '' : ' ';
            };
        }(language);
    });
$container.isotope(isotopeArguments);

edited Sep 23 '13 at 21:02

answered Sep 23 '13 at 20:17

thanks for your answer. I'm not sure how to implement your idea into my code. I just want to optimize my code, at the moment I have to write a function for each of the 24 languages, (like "fr : function( $elem ) {...}"). Your function looks right, but I can't get it working. Could you maybe have a look at my [fiddle](http://jsfiddle.net/alani/2CgXv/1/)? – Alani Sep 23 '13 at 20:49
@Alani I've tried to take your code and add it to where I think you wanted it to be added. Well, as far as I could understand. – Sep 23 '13 at 21:03
thank you, it works! I tested it in my final project and everything's fine. U made my day :) Answer accepted. – Alani Sep 23 '13 at 21:40

Isotope: write a Function to getSortData from array? (optimization, fiddle provided)

1 Answers1