MediaWiki:Common.js: Difference between revisions

From Luminys WIKI
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 58: Line 58:




mw.loader.using(['jquery.ui.dialog'], function () {
document.addEventListener('DOMContentLoaded', function () {
     $(document).on('click', '.popup-image a', function (event) {
     // Create the modal HTML structure dynamically
        event.preventDefault(); // Prevent the link from navigating to the file page
    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);


        var imgSrc = $(this).find('img').attr('src'); // Get the image source from the <img> inside the <a>
    // Close modal on clicking outside the image
        if ($('#image-popup').length === 0) {
    modal.addEventListener('click', function () {
            $('body').append('<div id="image-popup"><img id="popup-image" src="" alt="" style="max-width:100%;"></div>');
        modal.style.display = 'none';
        }
    });


        $('#popup-image').attr('src', imgSrc);
    // Add click event to all images with the class `enlargeable-image`
         $('#image-popup').dialog({
    document.querySelectorAll('.enlargeable-image').forEach(function (img) {
            modal: true,
         img.addEventListener('click', function () {
            width: 'auto',
            var modalImage = document.getElementById('modal-image');
            title: 'Image Preview',
            modalImage.src = this.src;
            close: function () {
             modal.style.display = 'block';
                $('#image-popup').dialog('destroy').remove();
             }
         });
         });
     });
     });
});
});

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';
        });
    });
});