Link module

Purpose

The link module is used to display a collection of links, ordered by category.

Demo

Markup

• The markup for the link module will be a simple nested unordered linked list.

    <ul class="link-mod-container">
      <li class="link-mod-category link-mod-active">
           <h4><a href="#most-popular">Most Popular</a></h4>
           <ul class="link-mod-items searchable">
                <li><a href="http://link.com/">Careers</a></li>
                <li><a href="http://link.com/">Calendar</a></li>
                <li><a href="http://link.com/">Tuition and Fees</a></li>
                <li><a href="http://link.com/">Alberta Facts</a></li>
                <li><a href="http://link.com/">Class Size</a></li>
                <li><a href="http://link.com/">Student Experiences</a></li>
                <li><a href="http://link.com/">International Students</a></li>
                <li><a href="http://link.com/">About Edmonton</a></li>
                <li><a href="http://link.com/">History</a></li>
                <li><a href="http://link.com/">Go Abroad</a></li>
           </ul>
      </li>
      <li class="link-mod-category">
        <h4><a href="#">About UAlberta</a></h4>
        <ul class="link-mod-items searchable">
          <li><a href="http://link.com/">Link</a></li>
        </ul>
      </li>
      <li class="link-mod-category">
        <h4><a href="#">Top Employer</a></h4>
        <ul class="link-mod-items searchable">
          <li><a href="http://link.com/">Link</a></li>
        </ul>
      </li>
      <li class="link-mod-category link-mod-filter">
           <span class="link-mod-label">Filtered Links</span>
           <i class="icon-filter"></i>
           <input type="text" placeholder="filter links" id="link-mod-filter-field" name="link-mod-filter-field" />
           <ul class="link-mod-results link-mod-items">
             <li class="link-mod-result-title">
               <h4></h4>
             </li>
             <li class="link-mod-result-none">
               <p>There are no links on this page that match your filter.  Try a different query, or give us <a href="#">feedback</a> to help us improve our website.</p>
             </li>
           </ul>
      </li>
    </ul>
  

Styling

• The list of categories should appear on the left side of the module, and the links associated with the category should appear on the right.
• All links of inactive categories should be hidden.
• The height of the module should not exceed 10 links on desktop / tablet. If there are more than 10 links, the right pane should allow the user to scroll to view the rest of the links.

Functionality / Javascript

• The user will click the category of links they would like to see (located on the left) and the links will display on the right side of the module.
• Add a visible class to the parent linked list when it is clicked, remove the class from all other link module categories. Most popular will have the visible class on page load.
• This module will use Live Search

DO NOT USE THIS URL TO LIVESEARCH IN PRODUCTION <script src="https://raw.github.com/ualberta/institutional-framework/master/js/ualberta/jquery.livesearch.js"></script>

    (function($) {
      $(document).ready(function() {

      // add active class to link category when clicked.
      $('.link-mod-category > h4, .link-mod-category input').click(function() {
        $('.link-mod-category').removeClass('link-mod-active');
        $(this).parent().addClass('link-mod-active');
        return false;
      });

      // populate results with all links by default
      $('.link-mod-result-title h4').html('Displaying all '+$('.searchable a').size()+' links. <small>Begin typing to filter...');
      $('.searchable a').each(function() {
        $('.link-mod-results').append('<li class="link-mod-result-item">'+$(this).parent().html()+'</li>');
      });
      $('.link-mod-result-none').hide();
    
      // live search plugin initialization        
      $('#link-mod-filter-field').search('.searchable a', function(on) {
      
        // this happens on any keydown, keyup, keypress, or blur event
        on.all(function(results) {
          var size = results ? results.size() : 0
          $('.link-mod-result-title h4').html(
            'Displaying '+size+
            ' matches for &quot;'+$('#link-mod-filter-field').val()+
            '&quot'
          );
        });

        // this happens when the filter field has nothing entered
        on.reset(function() {
          $('.link-mod-result-title h4').html('Displaying all '+$('.searchable a').size()+' links. <small>Begin typing to filter...');
          $('.link-mod-result-item').remove();
          $('.searchable a').each(function() {
            $('.link-mod-results').append('<li class="link-mod-result-item">'+$(this).parent().html()+'</li>');
          });
          $('.link-mod-result-none').hide();
        });

        // this happens when there are no results base on the query
        on.empty(function() {
          $('.link-mod-result-none').show();
          $('.link-mod-result-item').remove();
        });

        // this happens when there are results
        on.results(function(results) {
          $('.link-mod-result-none').hide();
          $('.link-mod-result-item').remove();
          results.each(function() {
            $('.link-mod-results').append('<li class="link-mod-result-item">'+$(this).parent().html()+'</li>');
          });
        });
      });
    });
    })(jQuery);

(View the campus life wireframe for an example)