MediaWiki:Common.js: Difference between revisions
From Luminys WIKI
Techsupport (talk | contribs) No edit summary Tag: Reverted |
Techsupport (talk | contribs) No edit summary Tag: Reverted |
||
Line 58: | Line 58: | ||
document.addEventListener('DOMContentLoaded', function () { | |||
// Create the modal HTML structure dynamically | |||
var modal = document.createElement('div'); | |||
modal.id = 'image-modal'; | |||
modal.style.display = 'none'; | |||
modal.style.position = 'fixed'; | |||
modal.style.zIndex = '1000'; | |||
modal.style.left = '0'; | |||
modal.style.top = '0'; | |||
modal.style.width = '100%'; | |||
modal.style.height = '100%'; | |||
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; | |||
modal.innerHTML = '<img id="modal-image" style="display: block; margin: auto; max-width: 90%; max-height: 90%; border-radius: 8px;">'; | |||
document.body.appendChild(modal); | |||
// Close modal on clicking outside the image | |||
modal.addEventListener('click', function () { | |||
modal.style.display = 'none'; | |||
}); | |||
// Add click event to all images with the class `enlargeable-image` | |||
document.querySelectorAll('.enlargeable-image').forEach(function (img) { | |||
img.addEventListener('click', function () { | |||
var modalImage = document.getElementById('modal-image'); | |||
modalImage.src = this.src; | |||
modal.style.display = 'block'; | |||
}); | }); | ||
}); | }); | ||
}); | }); |
Revision as of 15:59, 22 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(); }); document.addEventListener('DOMContentLoaded', function () { // Create the modal HTML structure dynamically var modal = document.createElement('div'); modal.id = 'image-modal'; modal.style.display = 'none'; modal.style.position = 'fixed'; modal.style.zIndex = '1000'; modal.style.left = '0'; modal.style.top = '0'; modal.style.width = '100%'; modal.style.height = '100%'; modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; modal.innerHTML = '<img id="modal-image" style="display: block; margin: auto; max-width: 90%; max-height: 90%; border-radius: 8px;">'; document.body.appendChild(modal); // Close modal on clicking outside the image modal.addEventListener('click', function () { modal.style.display = 'none'; }); // Add click event to all images with the class `enlargeable-image` document.querySelectorAll('.enlargeable-image').forEach(function (img) { img.addEventListener('click', function () { var modalImage = document.getElementById('modal-image'); modalImage.src = this.src; modal.style.display = 'block'; }); }); });