_main.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /*! Responsive Menu */
  2. // http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
  3. // The function to change the class
  4. var changeClass = function (r,className1,className2) {
  5. var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
  6. if( regex.test(r.className) ) {
  7. r.className = r.className.replace(regex,' '+className2+' ');
  8. }
  9. else{
  10. r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
  11. }
  12. return r.className;
  13. };
  14. // Creating our button in JS for smaller screens
  15. var menuElements = document.getElementById('site-nav');
  16. menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoggle navicon-lines-button x" aria-hidden="true"><span class="navicon-lines"></span>menu</button>');
  17. // Toggle the class on click to show / hide the menu
  18. document.getElementById('menutoggle').onclick = function() {
  19. changeClass(this, 'navtoggle active', 'navtoggle');
  20. };
  21. // http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
  22. document.onclick = function(e) {
  23. var mobileButton = document.getElementById('menutoggle'),
  24. buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
  25. if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
  26. changeClass(mobileButton, 'navtoggle active', 'navtoggle');
  27. }
  28. };
  29. /*! Plugin options and other jQuery stuff */
  30. // FitVids options
  31. $(function() {
  32. $("article").fitVids();
  33. });
  34. // Table of Contents toggle
  35. $(function() {
  36. $(".toc h3").click(function () {
  37. $("#drawer").toggleClass("js-hidden");
  38. });
  39. });
  40. // Add lightbox class to all image links
  41. $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
  42. // Magnific-Popup options
  43. $(document).ready(function() {
  44. $('.image-popup').magnificPopup({
  45. type: 'image',
  46. tLoading: 'Loading image #%curr%...',
  47. gallery: {
  48. enabled: true,
  49. navigateByImgClick: true,
  50. preload: [0,1] // Will preload 0 - before current, and 1 after the current image
  51. },
  52. image: {
  53. tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
  54. },
  55. removalDelay: 300, // Delay in milliseconds before popup is removed
  56. // Class that is added to body when popup is open.
  57. // make it unique to apply your CSS animations just to this exact popup
  58. mainClass: 'mfp-fade'
  59. });
  60. });