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*/
/**
* Clickable building names for Maps GeoJSON markers
*
* Example:
* <span class="map-building-link" data-building="dilc">
* Interactive Learning Center
* </span>
*/
mw.hook('wikipage.content').add(function ($content) {
$content.find('.map-building-link')
.off('click.mapBuilding')
.on('click.mapBuilding', function (e) {
e.preventDefault();
var $link = $(this);
var buildingId = $link.attr('data-building');
var mapCategory = $link.attr('data-map');
if (!buildingId) {
console.warn(
'Map building link is missing data-building.'
);
return;
}
if (!mapCategory) {
console.warn(
'Map building link is missing data-map.'
);
return;
}
/*
* Find the map container belonging to this category.
*
* Example:
*
* data-map="offices"
*
* matches:
*
* data-map-category="offices"
*/
var $mapWrapper = $content.find(
'.up-diliman-map[data-map-category="' +
CSS.escape(mapCategory) +
'"]'
).first();
if (!$mapWrapper.length) {
console.warn(
'No map found for category:',
mapCategory
);
return;
}
/*
* Find the actual Leaflet map inside the wrapper.
*/
var mapElement = $mapWrapper.find(
'.maps-leaflet'
).first()[0];
if (!mapElement) {
console.warn(
'No Leaflet map found in category:',
mapCategory
);
return;
}
/*
* Find the corresponding Maps Leaflet object.
*/
var mapsObject = null;
if (typeof mapsLeafletList !== 'undefined') {
$.each(mapsLeafletList, function (index, object) {
if (
object &&
object.map &&
object.map.getContainer &&
object.map.getContainer() === mapElement
) {
mapsObject = object;
return false;
}
});
}
if (!mapsObject || !mapsObject.map) {
console.warn(
'Could not find Leaflet map object for:',
mapCategory
);
return;
}
var map = mapsObject.map;
/*
* Find the GeoJSON marker.
*/
var foundLayer = null;
var foundLatLng = null;
map.eachLayer(function (layer) {
if (foundLayer) {
return;
}
if (
layer.feature &&
layer.feature.properties &&
layer.feature.properties.id === buildingId
) {
foundLayer = layer;
/*
* Point marker
*/
if (
typeof layer.getLatLng === 'function'
) {
foundLatLng = layer.getLatLng();
/*
* GeoJSON feature with bounds
*/
} else if (
typeof layer.getBounds === 'function'
) {
foundLatLng =
layer.getBounds().getCenter();
}
}
});
if (!foundLayer || !foundLatLng) {
console.warn(
'No marker found for building:',
buildingId,
'in map:',
mapCategory
);
return;
}
/*
* ----------------------------------------------------
* Expand map if it is inside a collapsed container
* ----------------------------------------------------
*/
var $collapsed = $mapWrapper.closest(
'.mw-collapsed'
);
if ($collapsed.length) {
$collapsed
.find('.mw-collapsible-toggle')
.first()
.trigger('click');
}
/*
* ----------------------------------------------------
* Scroll to the selected map
* ----------------------------------------------------
*/
var mapTop = $mapWrapper.offset().top;
$('html, body').animate({
scrollTop: mapTop - 80
}, 500);
/*
* ----------------------------------------------------
* Wait for map to become visible and recalculate
* its dimensions.
* ----------------------------------------------------
*/
setTimeout(function () {
map.invalidateSize();
/*
* Center the map on the selected building.
*/
map.setView(
foundLatLng,
Math.max(map.getZoom(), 17),
{
animate: true
}
);
/*
* Open the marker popup.
*/
if (
typeof foundLayer.openPopup === 'function'
) {
foundLayer.openPopup();
}
}, 600);
});
});
/*end of map link*/