https://intelligent-speaker.com/blog/js/main.js

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