apostrophe.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /**
  2. * apostrophe.js
  3. *
  4. * Handles the basic JS functionality for our theme.
  5. */
  6. ( function($) {
  7. /*
  8. * Count the number of images in each row in order to create the proper clearings.
  9. * For the most part, this isn't necessary, but there are certain instances where
  10. * the grid breaks at the wrong spot, making the whole layout look funky.
  11. * To fix that, we're counting where we are in the grid layout based on the space
  12. * each article uses, and adding a clearing class each time we drop to a new row.
  13. */
  14. function countGrid() {
  15. var $body = $( 'body' );
  16. var $container = $( '#main #posts-wrapper' );
  17. var $button = $( '.menu-toggle' );
  18. // Only initiate script if the mobile menu toggle isn't showing and we're on a page that uses the grid.
  19. // Return otherwise.
  20. if ( ( 0 !== $button.offsetWidth && 0 !== $button.offsetHeight ) &&
  21. ! ( $body.hasClass( 'archive' ) || $body.hasClass( 'blog' ) || $body.hasClass( 'search' ) ) ) {
  22. return;
  23. }
  24. var $articles = $container.find( '.hentry' );
  25. // This variable is used to count how far across the grid we are.
  26. var gridcount = 0;
  27. var gridcount_increment;
  28. $articles.each( function() {
  29. // If the article is featured, it takes up two blocks. If not, it takes up one.
  30. if ( $( this ).hasClass( 'apostrophe-featured' ) ) {
  31. gridcount_increment = 2;
  32. } else {
  33. gridcount_increment = 1;
  34. }
  35. // If we're at a newline in the grid, add a class to clear the previous line, and reset the grid count.
  36. if ( 3 < gridcount + gridcount_increment ) {
  37. gridcount = 0;
  38. $( this ).addClass( 'clear' );
  39. }
  40. gridcount = gridcount + gridcount_increment;
  41. } );
  42. } // countGrid
  43. // Set width of h2 elements inside the grid to make sure post titles don't overflow the container, and we're breaking long, one-word titles correctly.
  44. function blockWidth() {
  45. var $body = $( 'body' );
  46. if ( $body.hasClass( 'archive' ) || $body.hasClass( 'blog' ) || $body.hasClass( 'search' ) ) {
  47. if ( $( window ).innerWidth() > 767 ) {
  48. $( '.hentry' ).each( function() {
  49. $( this ).find( '.entry-title' ).width( $( this ).width() );
  50. } );
  51. } else {
  52. $( '.hentry' ).each( function() {
  53. $( this ).find( '.entry-title' ).attr( 'style', '' );
  54. } );
  55. }
  56. }
  57. }
  58. // Count grid blocks on page load
  59. $( document ).on( 'ready', function() {
  60. countGrid();
  61. blockWidth();
  62. });
  63. // ...and on each subsequent Infinite Scroll load, as well.
  64. $( document ).on( 'post-load', function() {
  65. countGrid();
  66. blockWidth();
  67. });
  68. $( window ).resize( function() {
  69. blockWidth();
  70. });
  71. } )(jQuery);