MediaWiki: Common.js: Difference between revisions
From Psalms: Layer by Layer
mNo edit summary |
mNo edit summary |
||
| Line 228: | Line 228: | ||
} | } | ||
}, | }, 3000); // 3000 milliseconds = 3 seconds | ||
}); | }); | ||
Revision as of 12:12, 17 January 2025
/* 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
}
});
}
}, 3000); // 3000 milliseconds = 3 seconds
});