Difference between revisions of "MediaWiki:Mobile.js"
Jump to navigation
Jump to search
(Created page with "→All JavaScript here will be loaded for users of the mobile site: function show_only_version(ver, delay) { var versions = ["v5", "v4", "touch"]; for (i in versions) {...") |
|||
Line 70: | Line 70: | ||
/* End Matomo Code */ | /* End Matomo Code */ | ||
+ | |||
+ | |||
+ | /* Minerva 2 */ | ||
+ | function scrollFunction() { | ||
+ | if (window.innerWidth > 768) { | ||
+ | if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { | ||
+ | document.querySelector(".minerva-header .branding-box").style.width = "0px"; | ||
+ | document.querySelector(".minerva-header .branding-box").style.height = "0px"; | ||
+ | document.querySelector(".overlay-header, .minerva-header").style.display = "table"; | ||
+ | document.querySelector(".branding-box img").style.opacity = "0"; | ||
+ | document.querySelector(".minerva-header .branding-box").style.position = "absolute"; | ||
+ | document.querySelector(".header-container").style.width = "auto"; | ||
+ | document.querySelector(".header-container").style.height = "auto"; | ||
+ | document.querySelector(".header-container").style.margin = "10px 0px 0px 0px"; | ||
+ | document.querySelector(".header-container").style.borderRadius = "0px"; | ||
+ | document.querySelector(".header-container").style.borderBottomLeftRadius = "20px"; | ||
+ | document.querySelector(".header-container").style.borderTopLeftRadius = "20px"; | ||
+ | document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.display = "table-row"; | ||
+ | document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.textAlign = "right"; | ||
+ | document.querySelector(".header-container").style.paddingTop = "5px"; | ||
+ | document.querySelector(".header-container").style.paddingRight = "3px"; | ||
+ | document.querySelector(".header-container").style.paddingBottom = "8px"; | ||
+ | document.querySelector(".header-container").style.paddingLeft = "7px"; | ||
+ | document.querySelector(".minerva-user-navigation").style.display = "table-row"; | ||
+ | document.querySelector(".minerva-user-navigation").style.minWidth = "none"; | ||
+ | document.querySelector(".minerva-user-navigation").style.minHeight = "none"; | ||
+ | document.querySelector(".minerva-user-navigation").style.width = "40px"; | ||
+ | document.querySelector(".minerva-user-navigation").style.alignItems = "center"; | ||
+ | document.querySelector(".minerva-user-navigation").style.justifyContent = "flex-end"; | ||
+ | document.querySelector(".minerva-user-navigation").style.paddingBottom = "10px"; | ||
+ | document.querySelector(".minerva-user-navigation .minerva-notifications ul").style.flexDirection = "column"; | ||
+ | document.querySelector(".client-js #searchIcon").style.margin = "initial"; | ||
+ | |||
+ | } else { | ||
+ | document.querySelector(".minerva-header .branding-box").style.width = "128px"; | ||
+ | document.querySelector(".minerva-header .branding-box").style.height = "auto"; | ||
+ | document.querySelector(".overlay-header, .minerva-header").style.display = "flex"; | ||
+ | document.querySelector(".branding-box img").style.opacity = "1"; | ||
+ | document.querySelector(".minerva-header .branding-box").style.position = "static"; | ||
+ | document.querySelector(".header-container").style.width = "410px"; | ||
+ | document.querySelector(".header-container").style.height = "65px"; | ||
+ | document.querySelector(".header-container").style.margin = "30px 30px 0 0"; | ||
+ | document.querySelector(".header-container").style.borderRadius = "20px"; | ||
+ | document.querySelector(".header-container").style.borderBottomLeftRadius = "20px"; | ||
+ | document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.display = "table-cell"; | ||
+ | document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.textAlign = "center"; | ||
+ | document.querySelector(".header-container").style.paddingTop = "5px"; | ||
+ | document.querySelector(".header-container").style.paddingRight = "16px"; | ||
+ | document.querySelector(".header-container").style.paddingBottom = "5px"; | ||
+ | document.querySelector(".header-container").style.paddingLeft = "16px"; | ||
+ | document.querySelector(".minerva-user-navigation").style.display = "flex"; | ||
+ | document.querySelector(".minerva-user-navigation").style.minWidth = "none"; | ||
+ | document.querySelector(".minerva-user-navigation").style.minHeight = "none"; | ||
+ | document.querySelector(".minerva-user-navigation").style.width = "auto"; | ||
+ | document.querySelector(".minerva-user-navigation").style.alignItems = "center"; | ||
+ | document.querySelector(".minerva-user-navigation").style.justifyContent = "flex-end"; | ||
+ | document.querySelector(".minerva-user-navigation").style.paddingBottom = "0px"; | ||
+ | document.querySelector(".minerva-user-navigation .minerva-notifications ul").style.flexDirection = "row"; | ||
+ | document.querySelector(".client-js #searchIcon").style.margin = "0px 55px 0px 0px"; | ||
+ | } | ||
+ | } else { | ||
+ | if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { | ||
+ | document.querySelector(".branding-box img").style.width = "0px"; | ||
+ | document.querySelector(".branding-box img").style.opacity = "0"; | ||
+ | document.querySelector(".header-container").style.width = "189px"; | ||
+ | document.querySelector(".header-container").style.height = "55px"; | ||
+ | document.querySelector(".header-container").style.margin = "0px 0px 0px 0px"; | ||
+ | document.querySelector(".header-container").style.borderRadius = "0px"; | ||
+ | document.querySelector(".header-container").style.borderBottomLeftRadius = "20px"; | ||
+ | document.querySelector(".header-container").style.paddingTop = "0px"; | ||
+ | document.querySelector(".header-container").style.paddingBottom = "0px"; | ||
+ | document.querySelector(".header-container").style.right = "0"; | ||
+ | } else { | ||
+ | document.querySelector(".branding-box img").style.width = "119px"; | ||
+ | document.querySelector(".branding-box img").style.opacity = "1"; | ||
+ | document.querySelector(".header-container").style.width = "100%"; | ||
+ | document.querySelector(".header-container").style.height = "55px"; | ||
+ | document.querySelector(".header-container").style.margin = "0px"; | ||
+ | document.querySelector(".header-container").style.borderRadius = "0px"; | ||
+ | document.querySelector(".header-container").style.borderBottomLeftRadius = "0px"; | ||
+ | document.querySelector(".header-container").style.paddingTop = "0px"; | ||
+ | document.querySelector(".header-container").style.paddingBottom = "0px"; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | window.onscroll = function () { scrollFunction () }; | ||
+ | |||
+ | /* Theme Colour */ | ||
+ | const link = document.querySelector("meta[name=theme-color]"); | ||
+ | function lightthemecolor() { | ||
+ | link.setAttribute('name', 'theme-color'); | ||
+ | link.content = '#ebecf0'; | ||
+ | document.getElementsByTagName('head')[0].appendChild(link); | ||
+ | } | ||
+ | function darkthemecolor() { | ||
+ | link.setAttribute('name', 'theme-color'); | ||
+ | link.content = '#3d3d3d'; | ||
+ | document.getElementsByTagName('head')[0].appendChild(link); | ||
+ | } | ||
+ | if (window.matchMedia && | ||
+ | window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
+ | darkthemecolor(); | ||
+ | } else { | ||
+ | lightthemecolor(); | ||
+ | } | ||
+ | function test() { | ||
+ | var elements = document.getElementsByClassName('infobox'); | ||
+ | var requiredElement = elements[0]; | ||
+ | requiredElement.classList.add("primaryinfo"); | ||
+ | } | ||
+ | test(); |
Revision as of 11:48, 31 July 2024
/* All JavaScript here will be loaded for users of the mobile site */
function show_only_version(ver, delay) {
var versions = ["v5", "v4", "touch"];
for (i in versions) {
var v = versions[i]
$(".show_only_" + v).hide(delay);
$("#button_show_only_" + v).css("font-weight","normal");
//console.log("Hiding version " + v + "!!")
}
$(".show_only_" + ver).show(delay);
$("#button_show_only_" + ver).css("font-weight","bold");
console.log("Showing version " + ver)
}
function show_only_branch(branch, delay) {
var branches = ["stable", "testing"];
for (i in branches) {
var b = branches[i]
$(".show_only_" + b).hide(delay);
$("#button_show_only_" + b).css("font-weight","normal");
console.log("Hiding branch " + b + "!!")
}
$(".show_only_" + branch).show(delay);
$("#button_show_only_" + branch).css("font-weight","bold");
console.log("Showing branch " + branch)
}
$(document).ready(function() {
console.log("READY!! Running custom JS ...")
$("#button_show_only_v5").click(function(){
show_only_version("v5", 300)
});
$("#button_show_only_v4").click(function(){
show_only_version("v4", 300)
});
$("#button_show_only_touch").click(function(){
show_only_version("touch", 300)
});
$("#button_show_only_stable").click(function(){
show_only_branch("stable", 300)
});
$("#button_show_only_testing").click(function(){
show_only_branch("testing", 300)
});
show_only_version("v5", 0);
show_only_branch("stable", 0);
});
/* Matomo */
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
_paq.push(["setCookieDomain", "*.zynthian.org"]);
_paq.push(["setDomains", ["*.zynthian.org","*.blog.zynthian.org","*.discourse.zynthian.org","*.shop.zynthian.org","*.wiki.zynthian.org"]]);
_paq.push(["enableCrossDomainLinking"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.evolus.net/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
/* End Matomo Code */
/* Minerva 2 */
function scrollFunction() {
if (window.innerWidth > 768) {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.querySelector(".minerva-header .branding-box").style.width = "0px";
document.querySelector(".minerva-header .branding-box").style.height = "0px";
document.querySelector(".overlay-header, .minerva-header").style.display = "table";
document.querySelector(".branding-box img").style.opacity = "0";
document.querySelector(".minerva-header .branding-box").style.position = "absolute";
document.querySelector(".header-container").style.width = "auto";
document.querySelector(".header-container").style.height = "auto";
document.querySelector(".header-container").style.margin = "10px 0px 0px 0px";
document.querySelector(".header-container").style.borderRadius = "0px";
document.querySelector(".header-container").style.borderBottomLeftRadius = "20px";
document.querySelector(".header-container").style.borderTopLeftRadius = "20px";
document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.display = "table-row";
document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.textAlign = "right";
document.querySelector(".header-container").style.paddingTop = "5px";
document.querySelector(".header-container").style.paddingRight = "3px";
document.querySelector(".header-container").style.paddingBottom = "8px";
document.querySelector(".header-container").style.paddingLeft = "7px";
document.querySelector(".minerva-user-navigation").style.display = "table-row";
document.querySelector(".minerva-user-navigation").style.minWidth = "none";
document.querySelector(".minerva-user-navigation").style.minHeight = "none";
document.querySelector(".minerva-user-navigation").style.width = "40px";
document.querySelector(".minerva-user-navigation").style.alignItems = "center";
document.querySelector(".minerva-user-navigation").style.justifyContent = "flex-end";
document.querySelector(".minerva-user-navigation").style.paddingBottom = "10px";
document.querySelector(".minerva-user-navigation .minerva-notifications ul").style.flexDirection = "column";
document.querySelector(".client-js #searchIcon").style.margin = "initial";
} else {
document.querySelector(".minerva-header .branding-box").style.width = "128px";
document.querySelector(".minerva-header .branding-box").style.height = "auto";
document.querySelector(".overlay-header, .minerva-header").style.display = "flex";
document.querySelector(".branding-box img").style.opacity = "1";
document.querySelector(".minerva-header .branding-box").style.position = "static";
document.querySelector(".header-container").style.width = "410px";
document.querySelector(".header-container").style.height = "65px";
document.querySelector(".header-container").style.margin = "30px 30px 0 0";
document.querySelector(".header-container").style.borderRadius = "20px";
document.querySelector(".header-container").style.borderBottomLeftRadius = "20px";
document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.display = "table-cell";
document.querySelector(".overlay-header > div, .minerva-header > div, .overlay-header > .navigation-drawer, .minerva-header > .navigation-drawer").style.textAlign = "center";
document.querySelector(".header-container").style.paddingTop = "5px";
document.querySelector(".header-container").style.paddingRight = "16px";
document.querySelector(".header-container").style.paddingBottom = "5px";
document.querySelector(".header-container").style.paddingLeft = "16px";
document.querySelector(".minerva-user-navigation").style.display = "flex";
document.querySelector(".minerva-user-navigation").style.minWidth = "none";
document.querySelector(".minerva-user-navigation").style.minHeight = "none";
document.querySelector(".minerva-user-navigation").style.width = "auto";
document.querySelector(".minerva-user-navigation").style.alignItems = "center";
document.querySelector(".minerva-user-navigation").style.justifyContent = "flex-end";
document.querySelector(".minerva-user-navigation").style.paddingBottom = "0px";
document.querySelector(".minerva-user-navigation .minerva-notifications ul").style.flexDirection = "row";
document.querySelector(".client-js #searchIcon").style.margin = "0px 55px 0px 0px";
}
} else {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.querySelector(".branding-box img").style.width = "0px";
document.querySelector(".branding-box img").style.opacity = "0";
document.querySelector(".header-container").style.width = "189px";
document.querySelector(".header-container").style.height = "55px";
document.querySelector(".header-container").style.margin = "0px 0px 0px 0px";
document.querySelector(".header-container").style.borderRadius = "0px";
document.querySelector(".header-container").style.borderBottomLeftRadius = "20px";
document.querySelector(".header-container").style.paddingTop = "0px";
document.querySelector(".header-container").style.paddingBottom = "0px";
document.querySelector(".header-container").style.right = "0";
} else {
document.querySelector(".branding-box img").style.width = "119px";
document.querySelector(".branding-box img").style.opacity = "1";
document.querySelector(".header-container").style.width = "100%";
document.querySelector(".header-container").style.height = "55px";
document.querySelector(".header-container").style.margin = "0px";
document.querySelector(".header-container").style.borderRadius = "0px";
document.querySelector(".header-container").style.borderBottomLeftRadius = "0px";
document.querySelector(".header-container").style.paddingTop = "0px";
document.querySelector(".header-container").style.paddingBottom = "0px";
}
}
}
window.onscroll = function () { scrollFunction () };
/* Theme Colour */
const link = document.querySelector("meta[name=theme-color]");
function lightthemecolor() {
link.setAttribute('name', 'theme-color');
link.content = '#ebecf0';
document.getElementsByTagName('head')[0].appendChild(link);
}
function darkthemecolor() {
link.setAttribute('name', 'theme-color');
link.content = '#3d3d3d';
document.getElementsByTagName('head')[0].appendChild(link);
}
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
darkthemecolor();
} else {
lightthemecolor();
}
function test() {
var elements = document.getElementsByClassName('infobox');
var requiredElement = elements[0];
requiredElement.classList.add("primaryinfo");
}
test();