MediaWiki:Common.js: Difference between revisions

Latest revision as of 13:00, 7 November 2023

/* Any JavaScript here will be loaded for all users on every page load. */

// function to load embedded iframe content (panoramas) only after tabs are clicked
// to use:
//  - change the iframe src to data-src so it doesn't load right away
//  - iframes must be given ids that match the ids of the tab _inputs_ (not tabs) that get clicked
//  - tab inputs are automatically named "tabs-input-x-y" where 
//    x is the tabs set number (starting at 1) and y is the tab number within the set (starting at 1)
// TO IMPROVE THIS -- Calculate which tab should be activated by index rather than ID

$('.tabs-input').on('click', function () {              // When a tab input is clicked
	var tab_id = $(this).attr('id');                    // Get the tab id
	var ifr_id = "ifr-" + tab_id.substr(new String("tabs-input-").length);             // Calc the iframe id from the tab id
	//console.log(ifr_id);
	$('#' + ifr_id).attr('src', $('#' + ifr_id).attr('data-src')); // Set the iframe src to the data-src to load it

    
	
    //var pan_id = "panorama-" + tab_id[tab_id.length-1]; // Calc the iframe id from the tab id
	//$('#' + pan_id).attr('src', $('#' + pan_id).attr('data-src')); // Set the iframe src to the data-src to load it
    //  - assign each tab an id of "tab-SOME_UNIQUE_ID" and the iframe within it an id of "ifr-SOME_UNIQUE_ID"
    //	var ifr_id = "ifr-" + tab_id.substr(5);             // Calc the iframe id from the tab id
});

/* Was enabled when vrView was working

window.addEventListener('load', onVrViewLoad);

function onVrViewLoad() {
  // Selector '#vrview' finds element with id 'vrview'.
  var vrView = new VRView.Player('#vrview', {
    image: 'https://i.ibb.co/Qb5N8b6/IMG-20230801-165141-00-merged.jpg',
    is_stereo: false,
    width: 400,
    height: 300
  });
}



$('.tabs-input').on('click', function () {   var tab_id = $(this).attr('id');  var pan_id = "panorama-" + tab_id[tab_id.length-1];   $('#' + pan_id).attr('src', $('#' + pan_id).attr('data-src')); });


var panoContainer = document.getElementById('panorama');
var panoImage = document.getElementById('panoImage');

// Duplicate the panoImage to allow for continuous scrolling.
// The actual implementation might need adjustment depending on your HTML and CSS.
panoImage.innerHTML += panoImage.innerHTML;

var isPanning = false;
var startX = 0;
var scrollLeft = 0;

panoContainer.addEventListener('mousedown', function(e) {
  isPanning = true;
  startX = e.pageX - panoContainer.offsetLeft;
  scrollLeft = panoContainer.scrollLeft;
  panoContainer.style.cursor = 'grabbing';
});

panoContainer.addEventListener('mouseleave', function() {
  isPanning = false;
  panoContainer.style.cursor = 'grab';
});

panoContainer.addEventListener('mouseup', function() {
  isPanning = false;
  panoContainer.style.cursor = 'grab';
});

panoContainer.addEventListener('mousemove', function(e) {
  if (!isPanning) return;
  e.preventDefault();
  var x = e.pageX - panoContainer.offsetLeft;
  var walk = (x - startX) * 2; // Increase the scroll speed
  var newScrollLeft = scrollLeft - walk;

  // Adjust the scroll position when reaching the end/start of the content
  if (newScrollLeft <= 0) {
    newScrollLeft += panoImage.offsetWidth / 2;
  } else if (newScrollLeft >= panoImage.offsetWidth / 2) {
    newScrollLeft -= panoImage.offsetWidth / 2;
  }

  panoContainer.scrollLeft = newScrollLeft;
});

*/