Remove JQuery: layout adjustment pagination.js #3723

problem based learning

bug fix

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;

Refactoring Jquery to Vanilla JS

below is my first attempt:

function responsivePagination (w,settings, pager, item){

   var w = window.innerWidth ;
  var settings = { gridBreakpont: { xs:500, s: 768, m:               
   1024, ml: 1200, l: 1280, xl: 1440 },
     }
    var pager = document.getElementById('.pager');
   var item = document.getElementById('.item-list');

     if (w < settings.gridBreakpont.xs + 50 && 
     pager.children.length > 7){ 
    item.classList.add;
   } else {	  
    item.classList.remove;
  }
   	}
     export default responsivePagination;

first school girl error

var pager = document.getElementById('.pager');	

I used getElementById but specified a class. so after converting this in ES6 syntax, this should look like:

const pager = document.getElementsByClassName('pager');

so I didn't need to add the . before pager .

Instead of declaring this:

var settings = { gridBreakpont: { xs:500, s: 768, m: 1024, 
ml: 1200, l: 1280, xl: 1440 },

I should instead import the js module :

 import Settings from './../../settings';

and capitalise settings.gridB... to Settings.gridB... to prevent one error

Then I had to edit the function into ES6 which started off looking like this :

function responsivePagination () {

to this

const  responsivePagination = () => {

then rest

  const w = window.innerWidth ;

  const pager = document.getElementsByClassName('pager');
  const item = document.getElementsByClassName('item- 
  list');

I had to console log the name of the function pager with the class pager, which returned:

pager HTMLCollection [ul.pager]

this means that the elements have been retrieved and are returned in a HTML collection which is an 'array-like' object.

It's necessary to convert them into actual arrays and so I must use a helper function called **nodeList ** to perform this task. so create a new const variable assign nodeList as the value and then pass pager as an argument.

const pagerArray = nodeList (pager);

To check it I ,console.log('array1', pagerArray):

the console returned this

array1 [ul.pager]
0: ul.pagerlength: 
1__proto__: Array(0)

so it worked! Now I must write a for each loop

for it else, check that the truthy statement produces what i want, console log it - keep to triangle