MediaWiki:Common.js
From Psalms: Layer by Layer
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */ function toggleVisibility(containerId, className) { console.log("Toggling visibility for " + className + " in " + containerId); var container = document.getElementById(containerId); if (container) { var elements = container.querySelectorAll("g." + className); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if (element.style.display === "none") { element.style.display = ""; // Show element } else { element.style.display = "none"; // Hide element } } } else { console.warn("Container with ID \"" + containerId + "\" not found."); } } function attachToggleListeners() { // Attach event listeners to all toggle links var toggleLinks = document.querySelectorAll("[data-container-id][data-class]"); // console.log("Found " + toggleLinks.length + " links."); for (var i = 0; i < toggleLinks.length; i++) { (function (toggleLink) { toggleLink.addEventListener("click", function (event) { event.preventDefault(); // Prevent default link behavior var containerId = toggleLink.getAttribute("data-container-id"); var className = toggleLink.getAttribute("data-class"); toggleVisibility(containerId, className); }); })(toggleLinks[i]); } } (function () { if (document.readyState === "complete" || document.readyState === "interactive") { // console.log("ReadyState is complete."); // if the document has already been loaded attachToggleListeners(); document.querySelectorAll(".highlight-phrase").forEach(function (element) { element.style.display = "none"; // Hide elements initially }); } else { console.log("ReadyState is " + document.readyState); document.addEventListener("DOMContentLoaded", function () { // if the document has already been loaded attachToggleListeners(); }); } })(); // console.log("Common.js is loaded."); // --------------------------------------------------------------------- $(document).ready(function() { // Wait for 5 seconds for Mermaid to render all svgs on the page setTimeout(function() { // Iterate through each <div> containing the button and SVG $('div[id^="verse-"]').each(function() { var parentDiv = $(this); // The parent div that contains the button and <pre class="mermaid"> var svg = parentDiv.find('svg'); var panZoomInstance; if (svg.length > 0) { var preElement = parentDiv.find('pre.mermaid'); // The <pre> element containing the SVG var preWidth = preElement.width(); var preHeight = preElement.height(); var viewBox = svg[0].getAttribute('viewBox'); if (viewBox) { var viewBoxValues = viewBox.split(' '); var viewBoxWidth = parseFloat(viewBoxValues[2]); var viewBoxHeight = parseFloat(viewBoxValues[3]); var scaleX = preWidth / viewBoxWidth; var scaleY = preHeight / viewBoxHeight; var scale = Math.min(scaleX, scaleY); svg.css({ 'width': (preWidth) + 'px', 'max-width': (preWidth) + 'px', 'height': (viewBoxHeight * scale) + 'px', 'position': 'relative' // Ensure the SVG has a positioning context }); // Initialize svg-pan-zoom instance panZoomInstance = svgPanZoom(svg[0], { panEnabled: true, controlIconsEnabled: false, zoomEnabled: true, dblClickZoomEnabled: true, contain: true, fit: true, center: false }); // For resizing the SVG on window resize var resizeHandler = function() { var newWidth = preElement.width(); var newHeight = preElement.height(); console.log('pre.mermaid container resized to: ', newWidth, newHeight); var newScaleX = newWidth / viewBoxWidth; var newScaleY = newHeight / viewBoxHeight; var newScale = Math.min(newScaleX, newScaleY); svg.css({ 'width': (newWidth) + 'px', 'max-width': (newWidth) + 'px' //'height': (viewBoxHeight * newScale) + 'px' }); if (panZoomInstance) { panZoomInstance.resize(); } }; // Listen for resize events $(window).on('resize', resizeHandler); } } }); // Bind the lightbox button to open the corresponding SVG in full-screen $('.lightbox-button').on('click', function() { // Get the target <div> ID from the button's data-target attribute var targetDivId = $(this).data('target'); // e.g., '#verse-1' var parentDiv = $(targetDivId); // Find the corresponding <div> by ID var associatedSvg = parentDiv.find('svg'); // Find the SVG inside the <pre> if (associatedSvg.length > 0) { openLightbox(associatedSvg[0]); // Trigger the lightbox for the corresponding SVG } }); // Function to open the lightbox and display the full-screen SVG function openLightbox(svgElement) { // Create lightbox container if it doesn't exist var lightbox = $('<div id="lightbox-overlay" class="lightbox-overlay">') .appendTo('body') .css({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(128, 128, 128, 0.8)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999, }); // Create the SVG container in the lightbox var lightboxSvgContainer = $('<div class="lightbox-svg-container">') .appendTo(lightbox) .css({ width: '95%', height: '95%', overflow: 'hidden', backgroundColor: 'rgba(255, 255, 255, 1.0)', }); var lightboxSvg = $(svgElement).clone().appendTo(lightboxSvgContainer); // Clone the SVG // resize the svg to the available space lightboxSvg.css({ 'width': '100%', 'max-width': '100%', 'height': '100%' }); // Apply svg-pan-zoom to the cloned SVG in the lightbox var panZoomInstanceLightbox = svgPanZoom(lightboxSvg[0], { panEnabled: true, controlIconsEnabled: false, zoomEnabled: true, dblClickZoomEnabled: true, contain: true, fit: true, center: true }); // Create a close button for the lightbox var closeButton = $('<button class="lightbox-close-button">Close</button>') .appendTo(lightbox) .css({ position: 'absolute', top: '10px', right: '10px', backgroundColor: '#fff', color: '#000', border: '1px solid #bbb', borderRadius: '1rem', padding: '10px 20px', cursor: 'pointer', zIndex: 10000 }) .on('click', function() { // Close the lightbox when the close button is clicked lightbox.remove(); }); // Close the lightbox when clicking outside the SVG lightbox.on('click', function(event) { if ($(event.target).is(lightbox)) { lightbox.remove(); } }); // Close the lightbox when the Escape key is pressed $(document).on('keydown', function(event) { if (event.key === "Escape" || event.keyCode === 27) { // Check for Escape key lightbox.remove(); $(document).off('keydown'); // Remove the keydown listener to prevent multiple bindings } }); } }, 5000); // 5000 milliseconds = 5 seconds });