1  // Dean Attali / Beautiful Jekyll 2020
  2  
  3  var BeautifulJekyllJS = {
  4  
  5    bigImgEl : null,
  6    numImgs : null,
  7  
  8    init : function() {
  9      setTimeout(BeautifulJekyllJS.initNavbar, 10);
 10  
 11      // Shorten the navbar after scrolling a little bit down
 12      $(window).scroll(function() {
 13          if ($(".navbar").offset().top > 50) {
 14              $(".navbar").addClass("top-nav-short");
 15          } else {
 16              $(".navbar").removeClass("top-nav-short");
 17          }
 18      });
 19  
 20      // On mobile, hide the avatar when expanding the navbar menu
 21      $('#main-navbar').on('show.bs.collapse', function () {
 22        $(".navbar").addClass("top-nav-expanded");
 23      });
 24      $('#main-navbar').on('hidden.bs.collapse', function () {
 25        $(".navbar").removeClass("top-nav-expanded");
 26      });
 27  
 28      // show the big header image
 29      BeautifulJekyllJS.initImgs();
 30  
 31      BeautifulJekyllJS.initSearch();
 32    },
 33  
 34    initNavbar : function() {
 35      // Set the navbar-dark/light class based on its background color
 36      const rgb = $('.navbar').css("background-color").replace(/[^\d,]/g,'').split(",");
 37      const brightness = Math.round(( // http://www.w3.org/TR/AERT#color-contrast
 38        parseInt(rgb[0]) * 299 +
 39        parseInt(rgb[1]) * 587 +
 40        parseInt(rgb[2]) * 114
 41      ) / 1000);
 42      if (brightness <= 125) {
 43        $(".navbar").removeClass("navbar-light").addClass("navbar-dark");
 44      } else {
 45        $(".navbar").removeClass("navbar-dark").addClass("navbar-light");
 46      }
 47    },
 48  
 49    initImgs : function() {
 50      // If the page was large images to randomly select from, choose an image
 51      if ($("#header-big-imgs").length > 0) {
 52        BeautifulJekyllJS.bigImgEl = $("#header-big-imgs");
 53        BeautifulJekyllJS.numImgs = BeautifulJekyllJS.bigImgEl.attr("data-num-img");
 54  
 55        // 2fc73a3a967e97599c9763d05e564189
 56        // set an initial image
 57        var imgInfo = BeautifulJekyllJS.getImgInfo();
 58        var src = imgInfo.src;
 59        var desc = imgInfo.desc;
 60        BeautifulJekyllJS.setImg(src, desc);
 61  
 62        // For better UX, prefetch the next image so that it will already be loaded when we want to show it
 63        var getNextImg = function() {
 64          var imgInfo = BeautifulJekyllJS.getImgInfo();
 65          var src = imgInfo.src;
 66          var desc = imgInfo.desc;
 67  
 68          var prefetchImg = new Image();
 69          prefetchImg.src = src;
 70          // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
 71  
 72          setTimeout(function(){
 73            var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
 74            $(".intro-header.big-img").prepend(img);
 75            setTimeout(function(){ img.css("opacity", "1"); }, 50);
 76  
 77            // after the animation of fading in the new image is done, prefetch the next one
 78            //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
 79            setTimeout(function() {
 80              BeautifulJekyllJS.setImg(src, desc);
 81              img.remove();
 82              getNextImg();
 83            }, 1000);
 84            //});
 85          }, 6000);
 86        };
 87  
 88        // If there are multiple images, cycle through them
 89        if (BeautifulJekyllJS.numImgs > 1) {
 90          getNextImg();
 91        }
 92      }
 93    },
 94  
 95    getImgInfo : function() {
 96      var randNum = Math.floor((Math.random() * BeautifulJekyllJS.numImgs) + 1);
 97      var src = BeautifulJekyllJS.bigImgEl.attr("data-img-src-" + randNum);
 98      var desc = BeautifulJekyllJS.bigImgEl.attr("data-img-desc-" + randNum);
 99  
100      return {
101        src : src,
102        desc : desc
103      }
104    },
105  
106    setImg : function(src, desc) {
107      $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
108      if (typeof desc !== typeof undefined && desc !== false) {
109        $(".img-desc").text(desc).show();
110      } else {
111        $(".img-desc").hide();
112      }
113    },
114  
115    initSearch : function() {
116      if (!document.getElementById("beautifuljekyll-search-overlay")) {
117        return;
118      }
119  
120      $("#nav-search-link").click(function(e) {
121        e.preventDefault();
122        $("#beautifuljekyll-search-overlay").show();
123        $("#nav-search-input").focus().select();
124        $("body").addClass("overflow-hidden");
125      });
126      $("#nav-search-exit").click(function(e) {
127        e.preventDefault();
128        $("#beautifuljekyll-search-overlay").hide();
129        $("body").removeClass("overflow-hidden");
130      });
131      $(document).on('keyup', function(e) {
132        if (e.key == "Escape") {
133          $("#beautifuljekyll-search-overlay").hide();
134          $("body").removeClass("overflow-hidden");
135        }
136      });
137    }
138  };
139  
140  // 2fc73a3a967e97599c9763d05e564189
141  
142  document.addEventListener('DOMContentLoaded', BeautifulJekyllJS.init);