Code Sample: jQuery for UI elements

jquery-for-ui.js

$(document).ready( function() {

  // Only run this code on the Pays d'Oc page template
  if( $('body').hasClass('page-template-template-paysdoc') ) {

    // Get the exisitng DOM items
    var $ITEMS = $('.pd-item'),
        $CARDS = $('.pd-card'),
        $MODAL = $('.pd-modal'),
        modalOpen = false;

    // Apply the functionality
    handleModal($MODAL, 'full-article');
    toggleSection($CARDS, 6);
    toggleSection($ITEMS, 5);



    // Function to handle "Show More" buttons on sections
    function toggleSection($list, slice) {

      // Get trigger in each section
      var $trigger = $list.parents('section').children('footer').find('.section__showmore');

      // Hide list items above slice index
      $list.slice(slice).toggleClass('visually-hidden');

      // Show list items on click and remove trigger from DOM
      $trigger.on('click', function(e) {
        $list.slice(slice).toggleClass('visually-hidden');
        $(this).remove();
      });

    }



    // Function to handle "Read Article" modal
    function handleModal($m, id) {

      var X_SVG = '<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g stroke="#343438" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M17.19.764L.8 17.15M.538.49l16.924 16.925"/></g></svg>';

      // Get the modal trigger
      var $trigger = $('a[href=#'+id+']');

      // Create a close button to apply based on screen width
      var $closeBtn = $('<button>', {
        type: 'button',
        class: 'modal__close'
      });

      // Add X close button to modal
      var $closeBtn_Icon = $closeBtn.clone()
                                    .addClass('modal__close--icon')
                                    .html(X_SVG);

      $m.find('.inner').prepend($closeBtn_Icon);

      // Append a "Close" text button on small screens
      if ( $(window).width() <= 600 ) {
        var $closeBtn_Text = $closeBtn.clone().html('Close')
        $closeBtn.html('Close');
        $m.find('.inner').append($closeBtn_Text);
      }

      // Hide the modal and add overlay styles
      $m.addClass('visually-hidden overlay-modal');

      // Show the modal on click
      $trigger.on('click', function(e) {
        openModal($m);
      });

      // Hide the modal on click and escape keypress
      $('.modal__close').on('click', function() {
        closeModal($m);
      });

      $(document).on('keyup', function(e) {
        if (modalOpen && e.keyCode == 27) {
          closeModal($m);
        }
      });

    } // END handleModal

    function openModal($m) {
      modalOpen = true;
      $m.removeClass('visually-hidden');
    }

    function closeModal($m) {
      modalOpen = !modalOpen;
      $m.addClass('visually-hidden');
    }

  } // END conditional
}); // END document.ready