MediaWiki:Mobile.js

/* Mobile Menu */
var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         //console.log("mobile menu exists");
         clearInterval(timer);
         $.get('/customizations/mobilemenu.htm', function(data){
    		$('.menu ul:first').after(data);
		 });

          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){ 
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms

// Creates action=raw links for JS or CSS gadgets
// Useful for mw.loader.load, which doesn't accept page titles
function rawPageLink( pageName ) {
  return mw.config.get( 'wgServer' ) + mw.config.get( 'wgScript' ) + '?title=' + mw.util.wikiUrlencode(pageName) + '&action=raw&ctype=text/javascript';
}

// Overwriting deprecated functions that don't have an exact followup but can be easily mapped:
window.importScript = function ( page ) {
  if ( typeof page === 'string' && page.length ) {
    mw.loader.load( rawPageLink( page ) );
  }
};

/* Palette Hex Codes */
$(document).ready(function() {
    $('.palette2').click(function() {
        var color = $(this).data('color');
        var tempInput = document.createElement("input");
        tempInput.style = "position: absolute; left: -1000px; top: -1000px";
        tempInput.value = color;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand("copy");
        document.body.removeChild(tempInput);
        
        // Remove any existing notifications
        $('.color-notification').remove();
        
        // Create notification
        var notification = $('<div class="color-notification">Copied color code: ' + color + '</div>');
        notification.css({
            'position': 'absolute',
            'background-color': 'var(--jjbe3)',
            'color': 'white',
            'padding': '10px',
            'border-radius': '5px',
            'z-index': '1000'
        });
        
        // Position notification near the clicked color box
        var position = $(this).position();
        position.top -= $(this).height();
        notification.css(position);
        
        $(this).parent().append(notification);
        
        // Fade out and remove notification after 3 seconds
        setTimeout(function() {
            notification.fadeOut('slow', function() {
                notification.remove();
            });
        }, 3000);
    });
});

$(document).ready(function() {
  // Get the anchor hash from the URL
  var anchorHash = window.location.hash.substring(1);
  
  // Find the matching collapsible element
  var collapsibleElement = document.getElementById(anchorHash);

  if (collapsibleElement) {
    // Remove the "mw-collapsed" class
    collapsibleElement.classList.remove("mw-collapsed");
    
    // Change the class of the nested span to "mw-collapsible-toggle-expanded"
    var nestedSpan = collapsibleElement.querySelector(".mw-collapsible-toggle");
    if (nestedSpan) {
      nestedSpan.classList.remove("mw-collapsible-toggle-collapsed");
      nestedSpan.classList.add("mw-collapsible-toggle-expanded");
      nestedSpan.querySelector("a.mw-collapsible-text").textContent = "Collapse";
      nestedSpan.setAttribute("aria-expanded", "true");
    }
    
    // Display the collapsible content
    var collapsibleContent = collapsibleElement.querySelector(".note-bottom");
    if (collapsibleContent) {
      collapsibleContent.style.display = "block";
    }
  }
});

$(document).ready(function() {
    $('#eu-consent').on('click', function() {
        window.ramp.showCmpModal();
    });
});

/* Add file page link on hover to Plyr videos */
$(document).ready(function() {
    // Find all elements with the 'vidInfo' class
    $('.vidInfo').each(function() {
        var video = $(this);
        var videoElement = video.find('video');

        // Create the magnify overlay element
        var magnifyDiv = $('<div class="magnify-overlay"><div class="magnify"><a href="' + (videoElement.find('source').data('src') || videoElement.find('source').attr('src')) + '" target="_blank">Enlarge</a></div></div>');
        
        // Apply CSS directly to position and style the magnify icon
        video.css({
        	position: 'relative'
        });
        
        magnifyDiv.css({
            position: 'absolute',
            right: '0',
            bottom: '5px',
            width: '25px',
            height: '25px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0,0,0,0.6)',
            visibility: 'hidden'
        });

        // Append the overlay to the video element
        video.append(magnifyDiv);

        // Event listener for mouseover
        video.on('mouseenter', function() {
            magnifyDiv.css('visibility', 'visible');
        });

        // Event listener for mouseout
        video.on('mouseleave', function() {
            magnifyDiv.css('visibility', 'hidden');
        });

        // Listen for resize events and adjust the overlay dimensions if necessary
        $(window).on('resize', function() {
            // Adjust any dynamic positions or sizes here if needed
        });
    });
});