POC jQuery Summarize list

In this example below you will see how to do a POC jQuery Summarize list with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>POC jQuery Summarize list</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="test test1">
  <span class="no-result hidden">No results</span>
  <a class="result hidden">and <span class="result__number"></span> more.</a>
</div>

<div class="test test2">
  <span class="no-result hidden">No results</span>
  <a class="result hidden">and <span class="result__number"></span> more.</a>
</div>

<div class="test test3">
  <span class="no-result hidden">No results</span>
  <a class="result hidden">and <span class="result__number"></span> more.</a>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/poc-jquery-summarize-list-reMKgr */
ul {
  display: inline;
}
ul li {
  display: inline;
}

.hidden {
  display: none;
}

body {
  padding: 50px;
}

.test {
  margin-bottom: 30px;
}


/*Downloaded from https://www.codeseek.co/tibomahe/poc-jquery-summarize-list-reMKgr */
//summarizeList function
function summarizeList(list, max, selector) {
  var listLen = list.length;

  if (listLen === 0) {
    $(selector + ' .no-result').removeClass('hidden');
  } 
  else if (listLen > max) {
    var listSummarized = list.slice(0, max),
        len = listSummarized.length,
        itemsList = '';
    //display array
    for (var i = 0; i < len; i++) {
      itemsList += '<span> ' + listSummarized[i] + ', </span>';
    }
    var missingItemsLen = listLen - len;
    $(selector).prepend(itemsList);
    
    //display "more"
    $(selector + ' .result').removeClass('hidden').children('.result__number').html(missingItemsLen);
   
    //add event
    $(selector + ' .result').on('click', function(event) {
      var $element = $(event.target),
          missingItemsList = '',
          missingItems = list.slice(max, listLen);
      $element.addClass('hidden');
      for (var i = 0; i < missingItemsLen; i++) {
        if (i != missingItemsLen - 1) {
            missingItemsList += '<span>' + missingItems[i] + ', </span>';
        }
        else {
          missingItemsList += '<span>' + missingItems[i] + '.</span>';
        }
      }
      $(selector).append(missingItemsList);
    });
  };
 };
  
//Tests
// Sample env
var arrayTest = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'],
    arrayTestNull= [],
    $ul1 = '.test1',
    $ul2 = '.test2',
    $ul3 = '.test3';
summarizeList(arrayTest, 3, $ul1);
summarizeList(arrayTest, 5, $ul2);
summarizeList(arrayTestNull, 3, $ul3);

Comments