functions.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /**
  2. * Handles sticky navigation for larger screens
  3. */
  4. ( function( $ ) {
  5. var body, resizeTimer, currentPosition, header, headerImg;
  6. body = $( document.body );
  7. if ( window.navigator.userAgent.indexOf("Edge") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1 ) {
  8. body.addClass( 'is-edge' );
  9. }
  10. // Add 'below-entry-meta' class to elements.
  11. function belowEntryMetaClass( param ) {
  12. if ( body.hasClass( 'search' ) ||
  13. body.hasClass( 'single-attachment' ) ||
  14. body.hasClass( 'error404' ) ) {
  15. return;
  16. }
  17. $( '.entry-content' ).find( param ).each( function() {
  18. var element = $( this ),
  19. elementPos = element.offset(),
  20. elementPosTop = elementPos.top,
  21. entryMeta = element.closest( 'article' ).find( '.entry-meta' ),
  22. entryMetaPos, entryMetaPosBottom;
  23. if ( 0 != entryMeta.length ) { //If entry meta exists
  24. entryMetaPos = entryMeta.offset(),
  25. entryMetaPosBottom = entryMetaPos.top + ( entryMeta.height() + 28 );
  26. }
  27. else {
  28. entryMetaPos = 0,
  29. entryMetaPosBottom = 0;
  30. }
  31. // Add 'below-entry-meta' to elements below the entry meta.
  32. if ( elementPosTop > entryMetaPosBottom ) {
  33. element.addClass( 'below-entry-meta' );
  34. } else {
  35. element.removeClass( 'below-entry-meta' );
  36. }
  37. } );
  38. }
  39. // Add 'below-sidebar' class to elements.
  40. function belowSidebarClass( param ) {
  41. if ( body.hasClass( 'search' ) ||
  42. body.hasClass( 'single-attachment' ) ||
  43. body.hasClass( 'error404' ) ) {
  44. return;
  45. }
  46. $( '.entry-content' ).find( param ).each( function() {
  47. var element = $( this ),
  48. elementPos = element.offset(),
  49. elementPosTop = elementPos.top,
  50. sidebar = $( '#secondary.widget-area' ),
  51. sidebarPos, sidebarPosBottom;
  52. if ( 0 != sidebar.length ) { //If a sidebar exists
  53. sidebarPos = sidebar.offset();
  54. sidebarPosBottom = sidebarPos.top + ( sidebar.height() + 28 );
  55. }
  56. else {
  57. sidebarPos = 0;
  58. sidebarPosBottom = 0;
  59. }
  60. // Add 'below-entry-meta' to elements below the entry meta.
  61. if ( elementPosTop > sidebarPosBottom ) {
  62. element.addClass( 'below-sidebar' );
  63. } else {
  64. element.removeClass( 'below-sidebar' );
  65. }
  66. } );
  67. }
  68. //Adjust width of padding on Jetpack Contact Form labels
  69. function formLabelLength() {
  70. var form = $( '.entry-content .contact-form' );
  71. if ( 0 == form.length ) {
  72. return;
  73. }
  74. form.each( function() {
  75. var labels,
  76. inputs,
  77. widths,
  78. padding;
  79. // Find all form labels and inputs
  80. labels = $( this ).find( 'label.text, label.url, label.name, label.email' );
  81. inputs = $( this ).find( 'input[type="text"], input[type="email"], input[type="url"], input[type="name"]' );
  82. if ( 0 !== labels.length ) {
  83. widths = new Array();
  84. // Get the width of each label
  85. labels.each( function() {
  86. if ( $( this ).parent().width() - $( this ).width() > 100 ) {
  87. widths.push( $( this ).outerWidth() );
  88. $( this ).addClass( 'absolute' );
  89. } else {
  90. $( this ).next( 'input[type="text"], input[type="email"], input[type="url"], input[type="name"]' ).addClass( 'no-padding' );
  91. }
  92. } );
  93. // Get longest value and add extra for padding
  94. padding = Math.max.apply( Math, widths ) + 28;
  95. // Set right/left-hand padding on the fields
  96. if ( $( 'html' ).attr( 'dir' ) == 'rtl') {
  97. inputs.css( { 'padding-right' : padding } );
  98. } else {
  99. inputs.css( { 'padding-left' : padding } );
  100. }
  101. }
  102. } );
  103. }
  104. //Apply classes to aligned left and right elements (blockquotes, captions, images)
  105. function moveAlignedElements() {
  106. var ltr = true;
  107. if ( $( 'html' ).attr( 'dir' ) == 'rtl') {
  108. ltr = false;
  109. }
  110. $( window )
  111. .on( 'resize post-load', function() {
  112. clearTimeout( resizeTimer );
  113. resizeTimer = setTimeout( function() {
  114. if ( true == ltr ) {
  115. belowEntryMetaClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
  116. belowEntryMetaClass( 'blockquote.alignleft' );
  117. belowSidebarClass( 'img.alignright:not( figure > img.alignright ), figure.alignright' );
  118. belowSidebarClass( 'blockquote.alignright' );
  119. }
  120. else {
  121. belowEntryMetaClass( 'img.alignright:not( figure > img.alignright ), figure.alignright' );
  122. belowEntryMetaClass( 'blockquote.alignright' );
  123. belowSidebarClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
  124. belowSidebarClass( 'blockquote.alignleft' );
  125. }
  126. if ( $( window ).width() >= 736 ) {
  127. headerImg.css( 'min-height', header.outerHeight() + 'px' );
  128. }
  129. }, 300 );
  130. } );
  131. if ( true == ltr ) {
  132. belowEntryMetaClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
  133. belowEntryMetaClass( 'blockquote.alignleft' );
  134. belowSidebarClass( 'img.alignright:not( figure > img.alignright ), figure.alignright' );
  135. belowSidebarClass( 'blockquote.alignright' );
  136. }
  137. else {
  138. belowEntryMetaClass( 'img.alignright:not( figure > img.alignright ), figure.alignright' );
  139. belowEntryMetaClass( 'blockquote.alignright' );
  140. belowSidebarClass( 'img.alignleft:not( figure > img.alignleft ), figure.alignleft' );
  141. belowSidebarClass( 'blockquote.alignleft' );
  142. }
  143. }
  144. //Resize the header to fit its contents
  145. function sizeHeader() {
  146. if ( $( window ).width() < 736 ) {
  147. return;
  148. }
  149. currentPosition = window.pageYOffset;
  150. header = $( '.header-wrapper' );
  151. headerImg = $( '.site-header .custom-header' );
  152. if ( currentPosition > ( headerImg.height() + 32 ) ) {
  153. header.addClass( 'without-transparency' );
  154. }
  155. headerImg.css( 'min-height', header.outerHeight() + 'px' );
  156. }
  157. //Give header navigation a background color when scrolling past the header
  158. function headerTransparency() {
  159. currentPosition = window.pageYOffset;
  160. header = $( '.header-wrapper' );
  161. headerImg = $( '.site-header .custom-header' );
  162. if ( currentPosition > ( headerImg.height() - header.height() ) ) {
  163. header.addClass( 'without-transparency' );
  164. } else {
  165. header.removeClass( 'without-transparency' );
  166. }
  167. }
  168. //Masonry for Guestbook template
  169. function guestbookMasonry() {
  170. body = $( document.body );
  171. if ( ! body.hasClass( 'page-template-guestbook' ) ) {
  172. return;
  173. }
  174. var ltr = true;
  175. if ( $( 'html' ).attr( 'dir' ) == 'rtl') {
  176. ltr = false;
  177. }
  178. var $guestbookContainer = $( '.page-template-guestbook .comments-area .comment-list');
  179. $guestbookContainer.imagesLoaded( function() {
  180. $guestbookContainer.masonry( {
  181. itemSelector: '.comment',
  182. isOriginLeft: ltr,
  183. gutter: 30,
  184. } );
  185. } );
  186. }
  187. /* Functions to fire on document ready */
  188. $( document ).ready( function() {
  189. moveAlignedElements();
  190. } );
  191. /* Functions to fire on window load */
  192. $( window ).load( function() {
  193. guestbookMasonry();
  194. formLabelLength();
  195. sizeHeader();
  196. } );
  197. /* Functions to fire on infinite scroll's post-load */
  198. $( window ).on( 'post-load', function() {
  199. formLabelLength();
  200. } );
  201. /* Functions to fire on resize */
  202. $( window ).on( 'resize', function() {
  203. sizeHeader();
  204. } );
  205. /* Functions to fire on document scroll */
  206. $( document ).on( 'scroll', function() {
  207. headerTransparency();
  208. });
  209. } )( jQuery );