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('Missing data-building');
return;
}
if (typeof mapsLeafletList === 'undefined') {
console.warn('mapsLeafletList is not available');
return;
}
var foundLayer = null;
var foundMap = null;
var foundWrapper = null;
var foundLatLng = null;
/*
* Search through every Leaflet map.
*/
$.each(mapsLeafletList, function (index, mapsObject) {
if (!mapsObject || !mapsObject.map) {
return;
}
var map = mapsObject.map;
var mapContainer = map.getContainer();
/*
* If a map category was specified,
* make sure this map belongs to that category.
*/
var $wrapper = $(mapContainer).closest(
'.up-diliman-map'
);
if (
mapCategory &&
$wrapper.attr('data-map-category') !== mapCategory
) {
return;
}
/*
* Search the layers for the building ID.
*/
map.eachLayer(function (layer) {
if (foundLayer) {
return;
}
if (
layer.feature &&
layer.feature.properties &&
layer.feature.properties.id === buildingId
) {
foundLayer = layer;
foundMap = map;
foundWrapper = $wrapper;
if (typeof layer.getLatLng === 'function') {
foundLatLng = layer.getLatLng();
} else if (
typeof layer.getBounds === 'function'
) {
foundLatLng =
layer.getBounds().getCenter();
}
}
});
if (foundLayer) {
return false;
}
});
/*
* Marker wasn't found.
*/
if (!foundLayer || !foundMap || !foundLatLng) {
console.warn(
'Building marker not found:',
buildingId,
'Map:',
mapCategory
);
return;
}
/*
* Expand a collapsed map if necessary.
*/
var $collapsed = $(foundMap.getContainer())
.closest('.mw-collapsed');
if ($collapsed.length) {
$collapsed
.find('.mw-collapsible-toggle')
.first()
.trigger('click');
}
/*
* Scroll to the map.
*/
var $scrollTarget = foundWrapper.length
? foundWrapper
: $(foundMap.getContainer());
$('html, body').animate({
scrollTop: $scrollTarget.offset().top - 80
}, 500);
/*
* Give the map time to expand and become visible.
*/
setTimeout(function () {
foundMap.invalidateSize();
foundMap.setView(
foundLatLng,
Math.max(foundMap.getZoom(), 17),
{
animate: true
}
);
/*
* Open the popup.
*/
if (typeof foundLayer.openPopup === 'function') {
foundLayer.openPopup();
}
}, 600);
});
});
/*end of map link*/
/*map marker colors*/
(function () {
var markerIcons = {
offices: 'Bluepin.png',
colleges: 'Redpin.png',
institutes: 'Greenpin.png'
};
function applyCategoryIcons() {
if (typeof mapsLeafletList === 'undefined') {
return;
}
mapsLeafletList.forEach(function (mapContainer) {
if (!mapContainer || !mapContainer.map) {
return;
}
var map = mapContainer.map;
map.eachLayer(function (layer) {
if (typeof layer.eachLayer !== 'function') {
return;
}
layer.eachLayer(function (marker) {
if (!marker.feature || !marker.feature.properties) {
return;
}
var category = marker.feature.properties.category;
if (!category || !markerIcons[category]) {
return;
}
var iconUrl =
mw.config.get('wgScriptPath') +
'/index.php/Special:Redirect/file/' +
encodeURIComponent(markerIcons[category]);
var icon = L.icon({
iconUrl: iconUrl,
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
if (typeof marker.setIcon === 'function') {
marker.setIcon(icon);
}
});
});
});
}
mw.hook('wikipage.content').add(function () {
setTimeout(applyCategoryIcons, 500);
});
})();
/*end of map pin color code*/