Build a beautiful and simple website in literally minutes. Demo at http://deanattali.com/beautiful-jekyll
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
4.3 KiB

9 years ago
9 years ago
9 years ago
  1. // Dean Attali / Beautiful Jekyll 2016
  2. var main = {
  3. bigImgEl : null,
  4. numImgs : null,
  5. init : function() {
  6. // Shorten the navbar after scrolling a little bit down
  7. $(window).scroll(function() {
  8. if ($(".navbar").offset().top > 50) {
  9. $(".navbar").addClass("top-nav-short");
  10. } else {
  11. $(".navbar").removeClass("top-nav-short");
  12. }
  13. });
  14. // On mobile, hide the avatar when expanding the navbar menu
  15. $('#main-navbar').on('show.bs.collapse', function () {
  16. $(".navbar").addClass("top-nav-expanded");
  17. });
  18. $('#main-navbar').on('hidden.bs.collapse', function () {
  19. $(".navbar").removeClass("top-nav-expanded");
  20. });
  21. // On mobile, when clicking on a multi-level navbar menu, show the child links
  22. $('#main-navbar').on("click", ".navlinks-parent", function(e) {
  23. var target = e.target;
  24. $.each($(".navlinks-parent"), function(key, value) {
  25. if (value == target) {
  26. $(value).parent().toggleClass("show-children");
  27. } else {
  28. $(value).parent().removeClass("show-children");
  29. }
  30. });
  31. });
  32. // Ensure nested navbar menus are not longer than the menu header
  33. var menus = $(".navlinks-container");
  34. if (menus.length > 0) {
  35. var navbar = $("#main-navbar ul");
  36. var fakeMenuHtml = "<li class='fake-menu' style='display:none;'><a></a></li>";
  37. navbar.append(fakeMenuHtml);
  38. var fakeMenu = $(".fake-menu");
  39. $.each(menus, function(i) {
  40. var parent = $(menus[i]).find(".navlinks-parent");
  41. var children = $(menus[i]).find(".navlinks-children a");
  42. var words = [];
  43. $.each(children, function(idx, el) { words = words.concat($(el).text().trim().split(/\s+/)); });
  44. var maxwidth = 0;
  45. $.each(words, function(id, word) {
  46. fakeMenu.html("<a>" + word + "</a>");
  47. var width = fakeMenu.width();
  48. if (width > maxwidth) {
  49. maxwidth = width;
  50. }
  51. });
  52. $(menus[i]).css('min-width', maxwidth + 'px')
  53. });
  54. fakeMenu.remove();
  55. }
  56. // show the big header image
  57. main.initImgs();
  58. },
  59. initImgs : function() {
  60. // If the page was large images to randomly select from, choose an image
  61. if ($("#header-big-imgs").length > 0) {
  62. main.bigImgEl = $("#header-big-imgs");
  63. main.numImgs = main.bigImgEl.attr("data-num-img");
  64. // 2fc73a3a967e97599c9763d05e564189
  65. // set an initial image
  66. var imgInfo = main.getImgInfo();
  67. var src = imgInfo.src;
  68. var desc = imgInfo.desc;
  69. main.setImg(src, desc);
  70. // For better UX, prefetch the next image so that it will already be loaded when we want to show it
  71. var getNextImg = function() {
  72. var imgInfo = main.getImgInfo();
  73. var src = imgInfo.src;
  74. var desc = imgInfo.desc;
  75. var prefetchImg = new Image();
  76. prefetchImg.src = src;
  77. // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
  78. setTimeout(function(){
  79. var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
  80. $(".intro-header.big-img").prepend(img);
  81. setTimeout(function(){ img.css("opacity", "1"); }, 50);
  82. // after the animation of fading in the new image is done, prefetch the next one
  83. //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
  84. setTimeout(function() {
  85. main.setImg(src, desc);
  86. img.remove();
  87. getNextImg();
  88. }, 1000);
  89. //});
  90. }, 6000);
  91. };
  92. // If there are multiple images, cycle through them
  93. if (main.numImgs > 1) {
  94. getNextImg();
  95. }
  96. }
  97. },
  98. getImgInfo : function() {
  99. var randNum = Math.floor((Math.random() * main.numImgs) + 1);
  100. var src = main.bigImgEl.attr("data-img-src-" + randNum);
  101. var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
  102. return {
  103. src : src,
  104. desc : desc
  105. }
  106. },
  107. setImg : function(src, desc) {
  108. $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
  109. if (typeof desc !== typeof undefined && desc !== false) {
  110. $(".img-desc").text(desc).show();
  111. } else {
  112. $(".img-desc").hide();
  113. }
  114. }
  115. };
  116. // 2fc73a3a967e97599c9763d05e564189
  117. document.addEventListener('DOMContentLoaded', main.init);