https://www.vzome.com/assets/js/beautifuljekyll.js

1// Dean Attali / Beautiful Jekyll 2023
2
3let 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      const imgInfo = BeautifulJekyllJS.getImgInfo();
58      const src = imgInfo.src;
59      const 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      const getNextImg = function() {
64        const imgInfo = BeautifulJekyllJS.getImgInfo();
65        const src = imgInfo.src;
66        const desc = imgInfo.desc;
67
68        const 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          const 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    const randNum = Math.floor((Math.random() * BeautifulJekyllJS.numImgs) + 1);
97    const src = BeautifulJekyllJS.bigImgEl.attr("data-img-src-" + randNum);
98    const 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
142document.addEventListener('DOMContentLoaded', BeautifulJekyllJS.init);