MediaWiki:Common.js: Difference between revisions
From Luminys WIKI
No edit summary |
Techsupport (talk | contribs) No edit summary Tag: Reverted |
||
Line 56: | Line 56: | ||
$(function () { | $(function () { | ||
Run(); | Run(); | ||
}); | |||
/* Modal Functionality */ | |||
document.addEventListener("DOMContentLoaded", function () { | |||
// Create a modal and append it to the body | |||
const modal = document.createElement("div"); | |||
modal.id = "imageModal"; | |||
modal.className = "image-modal"; | |||
modal.innerHTML = ` | |||
<span class="image-modal-close">×</span> | |||
<img class="image-modal-content" id="modalImage"> | |||
`; | |||
document.body.appendChild(modal); | |||
// Modal elements | |||
const modalImage = document.getElementById("modalImage"); | |||
const modalClose = document.querySelector(".image-modal-close"); | |||
// Add click event to all images | |||
document.querySelectorAll("img").forEach(function (img) { | |||
img.addEventListener("click", function () { | |||
modal.style.display = "block"; | |||
modalImage.src = img.src; // Use the same source as the clicked image | |||
}); | |||
}); | |||
// Close the modal | |||
modalClose.addEventListener("click", function () { | |||
modal.style.display = "none"; | |||
}); | |||
// Close the modal when clicking outside the image | |||
modal.addEventListener("click", function (event) { | |||
if (event.target === modal) { | |||
modal.style.display = "none"; | |||
} | |||
}); | |||
}); | }); |
Revision as of 10:36, 20 November 2024
// http://mediawiki.i.donnie.fun:8085/MediaWiki:Common.js /* Any JavaScript here will be loaded for all users on every page load. */ let getCookie = function(name) { let cookie = {}; document.cookie.split(';').forEach(function(el) { let split = el.split('='); cookie[split[0].trim()] = split.slice(1).join("="); }) return cookie[name]; } let Run = function(){ let title = $("#firstHeading").text() if(title == "Main Page") title = "Luminys Knowledge Base (Wiki)" if(title.indexOf('/') >= 0) title = title.replace("/", "<br/>") $("#mw-header-container").prepend("<div id='mw-header-lm-title'><div>"+title+"</div></div>") $("#mw-header-container").prepend(` <div style="background:white;position: absolute;top: 0;width: 100%;"> <div style="display:flex; flex-direction:row; align-content: center; align-items:baseline;align-self: center; margin: 0 auto; width: 1280px"> <!--<div style="width:14em;"></div>--> <a href="/" style="height:66px;margin-right:10px"><img src="https://blog.luminyscorp.com/content/images/2024/07/luminys-logo-1.png" style="height:26px;margin:20px 20px 20px 0;" alt="Luminys Logo"> </a> <div class=""> <div class="hidden md:block ml-6 font-medium w-full lg:flex lg:w-auto "> <ul id="lm-header"> <li><a href='/Main_Page'>Home</a></li> <li><a href="/Main_Page#How-to_Instructions">Instructions</a></li> <li><a href="/Main_Page#Data_Sheets_&_Downloads">Product Support</a></li> <li><a href="/Main_Page#How-to_Videos">Videos</a></li> </ul> </div> </div> </div> </div> `); if(window.mediaWiki && window.mediaWiki.user && window.mediaWiki.user.getName){ //let logined = getCookie('my_wikiUserID'); let logined = !!window.mediaWiki.user.getName() if(logined){ $("#mw-page-header-links ").show(); $("#mw-site-navigation ").show(); $("#mw-related-navigation").show(); } } if($(".lm-banner img").length > 0){ $("#mw-header-container").css("background", "url("+ $(".lm-banner img").attr('src') +")"). css("background-size", "cover").css('background-repeat', 'no-repeat'). css('background-position','top 66px right 0') } } $(function () { Run(); }); /* Modal Functionality */ document.addEventListener("DOMContentLoaded", function () { // Create a modal and append it to the body const modal = document.createElement("div"); modal.id = "imageModal"; modal.className = "image-modal"; modal.innerHTML = ` <span class="image-modal-close">×</span> <img class="image-modal-content" id="modalImage"> `; document.body.appendChild(modal); // Modal elements const modalImage = document.getElementById("modalImage"); const modalClose = document.querySelector(".image-modal-close"); // Add click event to all images document.querySelectorAll("img").forEach(function (img) { img.addEventListener("click", function () { modal.style.display = "block"; modalImage.src = img.src; // Use the same source as the clicked image }); }); // Close the modal modalClose.addEventListener("click", function () { modal.style.display = "none"; }); // Close the modal when clicking outside the image modal.addEventListener("click", function (event) { if (event.target === modal) { modal.style.display = "none"; } }); });