146 lines
4.4 KiB
JavaScript
146 lines
4.4 KiB
JavaScript
// Smooth Scroll Init - Register click handler for ID anchors
|
|
$('a[href*="#"]:not(a[modal])').click(function () {
|
|
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
|
var target = $(this.hash);
|
|
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
|
if (target.length) {
|
|
var targetOffset = target.offset().top - $(".nav-bar__header").outerHeight(true);
|
|
// console.log(targetOffset, target.offset().top, $(".nav-bar__header").outerHeight())
|
|
$('html, body').animate({
|
|
scrollTop: targetOffset
|
|
}, 1000);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
// navbar mobile toggle - preload
|
|
(function navbarInit() {
|
|
|
|
function toggleMobileMenu() {
|
|
$('.nav-bar__menu')[0].style.transition = "max-height 0.5s";
|
|
$('.nav-bar__menu')[0].classList.toggle("hide-menu");
|
|
}
|
|
$('.nav-bar__menu-button, .nav-bar__menu-item > a').click(toggleMobileMenu)
|
|
|
|
}());
|
|
|
|
// using an image for phone and toggle hide it
|
|
$('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
|
|
// $('#phone').click(function () { alert('phone clicked'); return false; });
|
|
|
|
function navbarSpacer() {
|
|
$('.nav-bar-spacer').css({
|
|
height: $(".nav-bar__header").outerHeight(true),
|
|
});
|
|
}
|
|
|
|
// hero resizer
|
|
function heroResize(bfr = 15) {
|
|
var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
|
|
w = $(window).width(),
|
|
fr = bfr * h / w
|
|
// console.log('w,h,fr', w, h, fr)
|
|
// minimum base font ratio
|
|
fr = (fr > bfr) ? bfr : fr
|
|
// adjust for short viewport height
|
|
fr = (w / h > 1 && h < 600) ? 15 * w / h : fr
|
|
//console.log('fr after', fr)
|
|
|
|
$('#hero').css({
|
|
width: w + 10,
|
|
height: h / w > 1.5 ? w * 1.5 : h,
|
|
});
|
|
|
|
$('#hero').flowtype({
|
|
maxFont: 50,
|
|
minFont: 18,
|
|
fontRatio: fr
|
|
});
|
|
}
|
|
|
|
// child item resize based on parent container (i.e. flexbox)
|
|
function itemResize(item, maxWidth = 450, widthPadding = 30) {
|
|
let windowWidth = $(window).width()
|
|
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
|
|
// console.log(`passed width ${width}`)
|
|
jQuery(item).fitToParent({
|
|
heightOffset: 0, // (int) Put some space around the element
|
|
// widthOffset: 5, // (int) Put some space around the element
|
|
// boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
|
|
boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
|
|
// callback: function (newWidth, newHeight) {}
|
|
})
|
|
}
|
|
|
|
function typeResize() {
|
|
$('.section').flowtype({
|
|
// maximum: 1000,
|
|
minFont: 12,
|
|
maxFont: 25,
|
|
fontRatio: 20
|
|
})
|
|
}
|
|
|
|
// Lightbox for Gallery
|
|
|
|
function lightgallery(id) {
|
|
// Intialize all the media i.e. photos with "media" id
|
|
// TODO use Hugo params to initialize multiple galleries/albums
|
|
var lg = $(id).lightGallery({
|
|
thumbnail: true,
|
|
thumbWidth: 80,
|
|
controls: true,
|
|
loop: false,
|
|
download: false,
|
|
counter: true,
|
|
// videojs: true
|
|
});
|
|
|
|
lg.on('onBeforeOpen.lg', function (event) {
|
|
$('.nav-bar').css("display", "none")
|
|
});
|
|
|
|
lg.on('onCloseAfter.lg', function (event) {
|
|
$('.nav-bar').css("display", "flex")
|
|
});
|
|
|
|
}
|
|
|
|
// Modal
|
|
// hide all the modals before displaying
|
|
$('.section--modal').each(function () {
|
|
$(this).hide();
|
|
});
|
|
|
|
// all but inside the modal box
|
|
$(document).on('click', function (event) {
|
|
var container = $(".section__container--modal");
|
|
if (!container.is(event.target) && // If the target of the click isn't the container...
|
|
container.has(event.target).length === 0) // ... nor a descendant of the container
|
|
{
|
|
$('.section--modal.current').hide().removeClass("current");
|
|
}
|
|
});
|
|
|
|
$('.section__container--modal').click(function () {
|
|
$('.section--modal.current').hide().removeClass("current");
|
|
$('a[modal-close]').remove();
|
|
});
|
|
|
|
// register click for modal link
|
|
$("a[modal]").click(function () {
|
|
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
|
var target = this.hash;
|
|
$(target).addClass("current").show()
|
|
target = target + " > .section__container > .section__headline"
|
|
var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
|
|
$(target).append(closer);
|
|
} else {
|
|
var target = this;
|
|
}
|
|
// alert(`I clicked on modal link ${target}`);
|
|
return false;
|
|
});
|
|
// end modal
|