Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #126 from hennevogel/feature_newsite
Merge https://software.opensuse.org/newsite/ and make it translateable
- Loading branch information
Showing
23 changed files
with
1,998 additions
and
2 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
// 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"); | ||
} | ||
}); | ||
}); | ||
|
||
// 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; | ||
main.setImg(src, desc); | ||
|
||
// 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 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 + ')'); | ||
$(".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); | ||
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); | ||
|
||
return { | ||
src : src, | ||
desc : desc | ||
} | ||
}, | ||
|
||
setImg : function(src, desc) { | ||
$(".intro-header.big-img").css("background-image", 'url(' + src + ')'); | ||
if (typeof desc !== typeof undefined && desc !== false) { | ||
$(".img-desc").text(desc).show(); | ||
} else { | ||
$(".img-desc").hide(); | ||
} | ||
} | ||
}; | ||
|
||
// 2fc73a3a967e97599c9763d05e564189 | ||
|
||
document.addEventListener('DOMContentLoaded', main.init); |
Oops, something went wrong.