MediaWiki:Chameleon.js: Difference between revisions
From Variscite Wiki
No edit summary |
No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
$('a.ca- | const mq = window.matchMedia("(max-width: 1105px)"); | ||
$('a.ca-history').html('History').addClass('mr-2'); | |||
(function($, mw) { | |||
$('<div>') | |||
.addClass('back-top') | |||
.html('<i class="fas fa-chevron-up"></i>') | |||
.appendTo('.bodyContent') | |||
.bind({ | |||
click: function(e) { | |||
e.preventDefault(); | |||
$('html, body').animate({ | |||
scrollTop: "0" | |||
}); | |||
} | |||
}); | |||
$(window).scroll(function() { | |||
if ($(this).scrollTop()) { | |||
$('.back-top').css('visibility', 'visible'); | |||
} else { | |||
$('.back-top').css('visibility', 'hidden'); | |||
} | |||
}); | |||
})(jQuery, mw); | |||
/** | |||
* Offset the target heading on the height of the fixed elements. | |||
*/ | |||
! function(window) { | |||
'use strict'; | |||
// Update this function so it returns the height of your fixed headers | |||
function fixedHeaderOffset() { | |||
if (mq.matches) { | |||
return 100; | |||
} else { | |||
return 50; | |||
} | |||
} | |||
// Run on first scroll (in case the user loaded a page with a hash in the url) | |||
window.addEventListener('scroll', onScroll); | |||
function onScroll() { | |||
window.removeEventListener('scroll', onScroll); | |||
scrollUpToCompensateForFixedHeader(); | |||
} | |||
// Run on hash change (user clicked on anchor link) | |||
if ('onhashchange' in window) { | |||
window.addEventListener('hashchange', scrollUpToCompensateForFixedHeader); | |||
} | |||
function scrollUpToCompensateForFixedHeader() { | |||
var hash, | |||
target, | |||
offset; | |||
// Get hash, e.g. #mathematics | |||
hash = window.location.hash; | |||
if (hash.length < 2) { | |||
return; | |||
} | |||
// Get :target, e.g. <h2 id="mathematics">...</h2> | |||
target = document.getElementById(hash.slice(1)); | |||
if (target === null) { | |||
return; | |||
} | |||
// Get distance of :target from top of viewport. If it's near zero, we assume | |||
// that the user was just scrolled to the :target. | |||
if (target.getBoundingClientRect().top < 2) { | |||
window.scrollBy(0, -fixedHeaderOffset()); | |||
} | |||
} | |||
}(window); |
Latest revision as of 15:38, 2 November 2021
const mq = window.matchMedia("(max-width: 1105px)");
$('a.ca-history').html('History').addClass('mr-2');
(function($, mw) {
$('<div>')
.addClass('back-top')
.html('<i class="fas fa-chevron-up"></i>')
.appendTo('.bodyContent')
.bind({
click: function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: "0"
});
}
});
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('.back-top').css('visibility', 'visible');
} else {
$('.back-top').css('visibility', 'hidden');
}
});
})(jQuery, mw);
/**
* Offset the target heading on the height of the fixed elements.
*/
! function(window) {
'use strict';
// Update this function so it returns the height of your fixed headers
function fixedHeaderOffset() {
if (mq.matches) {
return 100;
} else {
return 50;
}
}
// Run on first scroll (in case the user loaded a page with a hash in the url)
window.addEventListener('scroll', onScroll);
function onScroll() {
window.removeEventListener('scroll', onScroll);
scrollUpToCompensateForFixedHeader();
}
// Run on hash change (user clicked on anchor link)
if ('onhashchange' in window) {
window.addEventListener('hashchange', scrollUpToCompensateForFixedHeader);
}
function scrollUpToCompensateForFixedHeader() {
var hash,
target,
offset;
// Get hash, e.g. #mathematics
hash = window.location.hash;
if (hash.length < 2) {
return;
}
// Get :target, e.g. <h2 id="mathematics">...</h2>
target = document.getElementById(hash.slice(1));
if (target === null) {
return;
}
// Get distance of :target from top of viewport. If it's near zero, we assume
// that the user was just scrolled to the :target.
if (target.getBoundingClientRect().top < 2) {
window.scrollBy(0, -fixedHeaderOffset());
}
}
}(window);