Grid View Planning

[Bortseb]

Please put all ideas for features within the isotope view here.

-Filter by type of thing (The filter list dynamically changes with what is currently shown based on other filters... for example by name)

[Connoropolous]

The following is a portion of the code for implementing the complex filtering I did shown in the picture above for TheNextEdgeReport project

function passFilters(jqObj) {

        var filters = TNER.Filter.posts;

        var passesType = false,
            passesLikes = true,
            passesComments = true,
            passesLinkNoMessage = true,
            passesLikesComments = true,
            passesCombo = true,
            passesUser = false,
            passesKeyword = false;

          // filter by type
          var typeclass = [];
          if (filters.status) typeclass.push(".status");
          if (filters.link) typeclass.push(".link");
          if (filters.video) typeclass.push(".video");
          if (filters.photo) typeclass.push(".photo");
          typeclass = typeclass.join(",");
          passesType = jqObj.is(typeclass);

          // filter out by likes, comments, and spam

          // none are picked
          if (!filters.likes && !filters.comments && !filters.linknomessage) {
            passesCombo = true;
          }
          else {
            if (filters.likes) {
              passesLikes = parseInt(jqObj.find('.likes').text()) > filters.numberlikes;
            }
            if (filters.comments) {
              passesComments = parseInt(jqObj.find('.comments').text()) > filters.numbercomments;
            }
            if (filters.linknomessage) {
              passesLinkNoMessage = jqObj.find('.linknomessage').text() == 'true' ? false : true;
            } 

            if (filters.likes && filters.comments) {
              if (filters.likeCOMBOcomment == "OR") passesLikesComments = passesLikes && passesComments;  // only include if it passes both (exclude if either fails)
              else if (filters.likeCOMBOcomment == "AND") passesLikesComments = passesLikes || passesComments;  // include if it passes either (exclude if it fails both) 
            }
            else {
              passesLikesComments = passesLikes && passesComments; // if only one of the two is picked, and one of them is false, we know the one we care about is false
            }

            if (filters.linknomessage && !filters.likes && !filters.comments) {
              passesCombo = passesLinkNoMessage;
            }
            else if (filters.linknomessage) {
              if (filters.likescommentsCOMBOlinknomessage == "OR") passesCombo = passesLikesComments && passesLinkNoMessage;
              else if (filters.likescommentsCOMBOlinknomessage == "AND") passesCombo = passesLikesComments || passesLinkNoMessage;
            }
            else {
              passesCombo = passesLikesComments;
            }
          }

          // filter by person
          if (filters.personname != '') { // min 2 chars to execute query:
            if (jqObj.find('.person').text().toLowerCase().indexOf(filters.personname) !== -1) { // keyword matches element
              passesUser = true;
            } else {
              passesUser = false;
            }
          } else {
            passesUser = true;
          }

          // filter by keyword in message
          if (filters.keyword != '') { // min 2 chars to execute query:
            if (jqObj.find('.message').text().toLowerCase().indexOf(filters.keyword) !== -1) { // keyword matches element
              passesKeyword = true;
            } else {
              passesKeyword = false;
            }
          } else {
            passesKeyword = true;
          }

          if (passesType && passesCombo && passesUser && passesKeyword) { // keyword matches element
            return true;
          } else {
            return false;
          }

}

isotopeSearch: function () { // reset results arrays var matches = []; var misses = [];

        $('.isotope-item').removeClass('match miss'); // get rid of any existing classes
        $('#noMatches').hide(); // ensure this is always hidden when we start a new query

        $('.isotope-item').each(function () {
          if ( passFilters($(this)) ) { // keyword matches element
            matches.push($(this)[0]);
          } else {
            misses.push($(this)[0]);
          }
        });

        // add appropriate classes and call isotope.filter
        $(matches).addClass('match');
        $(misses).addClass('miss');
        $('#isotope-container').isotope({
            filter: $(matches)
        }); // isotope.filter will take a jQuery object instead of a class name as an argument - sweet!

        if (matches.length == 0) {
            $('#noMatches').show(); // deal with empty results set
        }

}