spc-site/data/magprog/assets/js/main.js

206 lines
5.4 KiB
JavaScript
Raw Normal View History

2022-04-23 10:48:53 +03:00
/*
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
2022-05-03 13:33:43 +03:00
(function ($) {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
var $window = $(window),
$body = $('body'),
$sidebar = $('#sidebar');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Breakpoints.
breakpoints({
xlarge: ['1281px', '1680px'],
large: ['981px', '1280px'],
medium: ['737px', '980px'],
small: ['481px', '736px'],
xsmall: [null, '480px']
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Hack: Enable IE flexbox workarounds.
if (browser.name === 'ie')
2022-05-03 13:33:43 +03:00
$body.addClass('is-ie');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Play initial animations on page load.
$window.on('load', function () {
window.setTimeout(function () {
$body.removeClass('is-preload');
}, 100);
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Forms.
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Hack: Activate non-input submits.
$('form').on('click', '.submit', function (event) {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Stop propagation, default.
event.stopPropagation();
event.preventDefault();
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Submit form.
$(this).parents('form').submit();
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Sidebar.
if ($sidebar.length > 0) {
2022-04-23 10:48:53 +03:00
//adding exclusion for home link
var $sidebar_a = $sidebar.find('a').not('.spc-home');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
$sidebar_a
.addClass('scrolly')
.on('click', function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
var $this = $(this);
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// External link? Bail.
if ($this.attr('href').charAt(0) !== '#')
2022-05-03 13:33:43 +03:00
return;
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Deactivate all links.
$sidebar_a.removeClass('active');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section).
$this
.addClass('active')
.addClass('active-locked');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
})
.each(function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// No section for this link? Bail.
if ($section.length < 1)
return;
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Scrollex.
$section.scrollex({
mode: 'middle',
top: '-20vh',
bottom: '-20vh',
initialize: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Deactivate section.
$section.addClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
},
enter: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Activate section.
$section.removeClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// No locked links? Deactivate all links and activate this section's one.
if ($sidebar_a.filter('.active-locked').length === 0) {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
$sidebar_a.removeClass('active');
$this.addClass('active');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Otherwise, if this section's link is the one that's locked, unlock it.
else if ($this.hasClass('active-locked'))
$this.removeClass('active-locked');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Scrolly.
$('.scrolly').scrolly({
speed: 1000,
offset: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// If <=large, >small, and sidebar is present, use its height as the offset.
if (breakpoints.active('<=large')
&& !breakpoints.active('<=small')
&& $sidebar.length > 0)
return $sidebar.height();
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
return 0;
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Spotlights.
$('.spotlights > section')
.scrollex({
mode: 'middle',
top: '-10vh',
bottom: '-10vh',
initialize: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Deactivate section.
$(this).addClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
},
enter: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Activate section.
$(this).removeClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
})
.each(function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
var $this = $(this),
$image = $this.find('.image'),
$img = $image.find('img'),
x;
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Assign image.
$image.css('background-image', 'url(' + $img.attr('src') + ')');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Set background position.
if (x === $img.data('position'))
2022-05-03 13:33:43 +03:00
$image.css('background-position', x);
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Hide <img>.
$img.hide();
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
});
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Features.
$('.features')
.scrollex({
mode: 'middle',
top: '-20vh',
bottom: '-20vh',
initialize: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Deactivate section.
$(this).addClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
},
enter: function () {
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
// Activate section.
$(this).removeClass('inactive');
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
}
});
})(jQuery);
2022-04-23 10:48:53 +03:00
2022-05-03 13:33:43 +03:00
//From https://www.w3schools.com/howto/howto_js_collapsible.asp
2023-03-27 13:39:19 +03:00
const coll = document.getElementsByClassName("collapsible");
let i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
const content = this.nextElementSibling;
if (content.style.maxHeight){
2022-05-03 13:33:43 +03:00
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
2023-03-27 13:39:19 +03:00
}