MediaWiki:Common.js
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* For Main Page Announcement area //this code pulls from the https://ilc.upd.edu.ph/all-posts-and-announcements/ PAGE */
console.log("JS WORKING");
(function () {
console.log("RUNNING IMMEDIATELY");
const container =
document.getElementById("ilc-announcements");
console.log("Container:", container);
if (!container) return;
container.innerHTML = "Loading script...";
fetch("https://ilc.upd.edu.ph/wp-json/wp/v2/posts?per_page=5")
.then(res => res.json())
.then(posts => {
let html = "";
posts.forEach(post => {
html += `
<p>
<a href="${post.link}" target="_blank">
${post.title.rendered}
</a>
</p>
`;
});
container.innerHTML = html;
})
.catch(err => {
console.error("FETCH ERROR:", err);
container.innerHTML = "<p>Failed to load announcements</p>";
});
})();
/*end of new code */
/* Any JavaScript here will be loaded for all users on every page load. */
$(window).on('load', function(){
$('#site-tools ul').append("<li><a href='https://iskwiki.upd.edu.ph' target='_blank'>Flipbook</li>");
});
/* Helpdesk bubble */
$(function () {
var bubble = $('<div id="ost-bubble">' +
'<img src="https://helpdesk.ilc.upd.edu.ph/images/ilc-images/Helpdesk-logo-bubble.png" alt="💬">' +
'</div>');
var panel = $(
'<div id="ost-panel">' +
'<div id="ost-panel-header">' +
'<img src="https://helpdesk.ilc.upd.edu.ph/logo.php" alt="Helpdesk" style="height:80px;"> ' +
'<span id="ost-panel-close">×</span>' +
'</div>' +
'<div id="ost-panel-body">' +
'<iframe src="https://helpdesk.ilc.upd.edu.ph/o.php"></iframe>' +
'</div>' +
'<div id="ost-panel-footer">' +
'' +
'</div>' +
'</div>'
);
$('body').append(bubble).append(panel);
bubble.on('click', function () {
panel.toggleClass('ost-open');
});
panel.find('#ost-panel-close').on('click', function () {
panel.removeClass('ost-open');
});
});
/*Pop-up*/
$(function () {
// Change this whenever you update the popup
const popupVersion = "welcome-v1";
// Only show once on initial visit
if (localStorage.getItem(popupVersion)) {
return;
}
//shows after browse time elapse
let elapsed = 0;
const interval = 100; // 1 msecond
const timer = setInterval(function () {
if (!document.hidden) {
elapsed += interval;
}
if (elapsed >= 6000) {
clearInterval(timer);
showPopup();
}
}, interval);
function showPopup() {
const overlay = $(`
<div id="welcome-overlay">
<div id="welcome-popup">
<button id="welcome-close">×</button>
<a href="https://upsystemdiliman.qualtrics.com/jfe/form/SV_3r4gfKrUHQxo6c6" target="_blank">
<img src="/images/Survey-link.png"
alt="Survey Link" id="welcome-image">
</a>
</div>
</div>
`);
$("body").append(overlay);
function closePopup() {
localStorage.setItem(popupVersion, "shown");
overlay.fadeOut(300, function () {
overlay.remove();
});
}
$("#welcome-close").on("click", closePopup);
}
});
/* Maps */
/* UP Diliman Main Map */
(function () {
'use strict';
function restrictMap() {
if (typeof window.mapsLeafletList === 'undefined') {
return false;
}
for (var i = 0; i < mapsLeafletList.length; i++) {
var mapWrapper = mapsLeafletList[i];
if (!mapWrapper || !mapWrapper.map) {
continue;
}
var map = mapWrapper.map;
var container = map.getContainer();
if (!container.closest('#up-diliman-main-map')) {
continue;
}
map.setMaxBounds([
[14.645, 121.060],
[14.665, 121.07514208501618]
]);
map.options.maxBoundsViscosity = 1.0;
return true;
}
return false;
}
var attempts = 0;
var timer = setInterval(function () {
attempts++;
if (restrictMap() || attempts >= 50) {
clearInterval(timer);
}
}, 100);
}());
/* End of UP Diliman Main Map */
/* UP Diliman Campus */
(function () {
'use strict';
function restrictMap() {
if (typeof window.mapsLeafletList === 'undefined') {
return false;
}
for (var i = 0; i < mapsLeafletList.length; i++) {
var mapWrapper = mapsLeafletList[i];
if (!mapWrapper || !mapWrapper.map) {
continue;
}
var map = mapWrapper.map;
var container = map.getContainer();
if (!container.closest('#up-diliman-campus')) {
continue;
}
map.setMaxBounds([
[14.640, 121.055],
[14.665, 121.085]
]);
map.options.maxBoundsViscosity = 1.0;
return true;
}
return false;
}
var attempts = 0;
var timer = setInterval(function () {
attempts++;
if (restrictMap() || attempts >= 50) {
clearInterval(timer);
}
}, 100);
}());
/* End of UP Diliman Campus */
/*map recalculation for phones*/
(function () {
'use strict';
function resizeMaps() {
if (typeof window.mapsLeafletList === 'undefined') {
return;
}
for (var i = 0; i < mapsLeafletList.length; i++) {
var mapWrapper = mapsLeafletList[i];
if (mapWrapper && mapWrapper.map) {
mapWrapper.map.invalidateSize();
}
}
}
window.addEventListener('resize', resizeMaps);
setTimeout(resizeMaps, 300);
setTimeout(resizeMaps, 1000);
}());
/*map collapse*/
$(function () {
$('.mw-collapsible').on('afterExpand.mw-collapsible', function () {
var collapsible = this;
setTimeout(function () {
$(collapsible).find('.maps-leaflet').each(function () {
var mapElement = this;
/*
* Find the corresponding Maps extension
* map object.
*/
mapsLeafletList.forEach(function (mapObject) {
if (mapObject[0] === mapElement) {
/*
* mapObject itself is the jQuery object
* containing the Leaflet map.
*/
if (typeof mapObject.invalidateSize === 'function') {
mapObject.invalidateSize();
}
}
});
});
}, 300);
});
});
/*linking clickable building markers in GeoJson*/
mw.hook('wikipage.content').add(function ($content) {
$content.find('.map-building-link').off('click.mapBuilding').on('click.mapBuilding', function (e) {
e.preventDefault();
var buildingId = $(this).data('building');
if (!buildingId) {
return;
}
/*
* Look through all Maps Leaflet maps currently
* initialized on the page.
*/
if (typeof mapsLeafletList === 'undefined') {
console.warn('mapsLeafletList is not available.');
return;
}
var found = false;
$.each(mapsLeafletList, function (index, mapsObject) {
if (!mapsObject || !mapsObject.map) {
return;
}
var map = mapsObject.map;
/*
* Look through the layers on this Leaflet map.
*/
map.eachLayer(function (layer) {
if (found) {
return;
}
/*
* Maps GeoJSON markers generally expose
* their original feature information through
* feature.properties.
*/
if (
layer.feature &&
layer.feature.properties &&
layer.feature.properties.id === buildingId
) {
found = true;
/*
* Get the marker position.
*/
var latLng;
if (typeof layer.getLatLng === 'function') {
latLng = layer.getLatLng();
} else if (layer.getBounds) {
latLng = layer.getBounds().getCenter();
}
if (!latLng) {
return;
}
/*
* If the map is inside a collapsed
* mw-collapsible element, make sure the
* map gets a chance to recalculate its size.
*/
var $mapContainer = $(map.getContainer());
var $collapsed = $mapContainer.closest('.mw-collapsed');
if ($collapsed.length) {
$collapsed.find('.mw-collapsible-toggle').first().trigger('click');
}
/*
* Wait until the map is visible before
* moving it.
*/
setTimeout(function () {
map.invalidateSize();
map.setView(
latLng,
Math.max(map.getZoom(), 17),
{
animate: true
}
);
/*
* Open the marker popup.
*/
if (typeof layer.openPopup === 'function') {
layer.openPopup();
}
}, 300);
}
});
/*
* Stop searching once the marker has been found.
*/
if (found) {
return false;
}
});
if (!found) {
console.warn(
'No map marker found for building ID:',
buildingId
);
}
});
});
/*end of map link*/