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