https://straz.to/assets/js/beautifuljekyll.js

1// Dean Attali / Beautiful Jekyll 2020
2
3var 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
32  initNavbar : function() {
33    // Set the navbar-dark/light class based on its background color
34    const rgb = $('.navbar').css("background-color").replace(/[^\d,]/g,'').split(",");
35    const brightness = Math.round(( // http://www.w3.org/TR/AERT#color-contrast
36      parseInt(rgb[0]) * 299 +
37      parseInt(rgb[1]) * 587 +
38      parseInt(rgb[2]) * 114
39    ) / 1000);
40    if (brightness <= 125) {
41      $(".navbar").removeClass("navbar-light").addClass("navbar-dark");
42    } else {
43      $(".navbar").removeClass("navbar-dark").addClass("navbar-light");
44    }
45  },
46
47  initImgs : function() {
48    // If the page was large images to randomly select from, choose an image
49    if ($("#header-big-imgs").length > 0) {
50      BeautifulJekyllJS.bigImgEl = $("#header-big-imgs");
51      BeautifulJekyllJS.numImgs = BeautifulJekyllJS.bigImgEl.attr("data-num-img");
52
53      // 2fc73a3a967e97599c9763d05e564189
54      // set an initial image
55      var imgInfo = BeautifulJekyllJS.getImgInfo();
56      var src = imgInfo.src;
57      var desc = imgInfo.desc;
58      BeautifulJekyllJS.setImg(src, desc);
59
60      // For better UX, prefetch the next image so that it will already be loaded when we want to show it
61      var getNextImg = function() {
62        var imgInfo = BeautifulJekyllJS.getImgInfo();
63        var src = imgInfo.src;
64        var desc = imgInfo.desc;
65
66        var prefetchImg = new Image();
67        prefetchImg.src = src;
68        // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
69
70        setTimeout(function(){
71          var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
72          $(".intro-header.big-img").prepend(img);
73          setTimeout(function(){ img.css("opacity", "1"); }, 50);
74
75          // after the animation of fading in the new image is done, prefetch the next one
76          //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
77          setTimeout(function() {
78            BeautifulJekyllJS.setImg(src, desc);
79            img.remove();
80            getNextImg();
81          }, 1000);
82          //});
83        }, 6000);
84      };
85
86      // If there are multiple images, cycle through them
87      if (BeautifulJekyllJS.numImgs > 1) {
88        getNextImg();
89      }
90    }
91  },
92
93  getImgInfo : function() {
94    var randNum = Math.floor((Math.random() * BeautifulJekyllJS.numImgs) + 1);
95    var src = BeautifulJekyllJS.bigImgEl.attr("data-img-src-" + randNum);
96    var desc = BeautifulJekyllJS.bigImgEl.attr("data-img-desc-" + randNum);
97
98    return {
99      src : src,
100      desc : desc
101    }
102  },
103
104  setImg : function(src, desc) {
105    $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
106    if (typeof desc !== typeof undefined && desc !== false) {
107      $(".img-desc").text(desc).show();
108    } else {
109      $(".img-desc").hide();
110    }
111  }
112};
113
114// 2fc73a3a967e97599c9763d05e564189
115
116document.addEventListener('DOMContentLoaded', BeautifulJekyllJS.init);