Remove JQuery: layout adjustment pagination.js #3723

problem based learning

task

• work out how it works and then work out removing or reducing it
• look into media queries css, check with jason and work out if its necessary
• possibly the pager is necessary - could add 60 pixels
• check _include-pager.scss, find out if we can do it without javascript - theres a rule
• maybe can check if it can be done in the drupal template

This worked in the linting testing

`function responsivePagination (settings, item){

if (window.innerWidth < settings.gridBreakpont.xs + 50 && '.pager'.children.length > 7) { item.classList.add('.item-list'); } else { item.classList.remove('.item-list'); } } responsivePagination(); `

• must re write in vanilla javascript

// template.php - you can you see how the function // must finish javascript // must import utils which is a node selector helper function - look into array es6 functions must rsearch // re write it in vanilla js and not in jquery - focus on add and removing the classes

suggested 3rd line import { nodeSelector, addClass, removeClass } from '../../utils/utils.js'

const responsivePagination = () => {
  console.log($('.pager').children().length > 7);
  console.log(nodeSelector('.pager'))
  if (window.innerWidth < (Settings.gridBreakpoint.xs + 50) && $('.pager').children().length > 7) {
    $('.item-list').addClass('responsive-pagination');
  } else {
    $('.item-list').removeClass('responsive-pagination');
  }
};
export default responsivePagination;