MediaWiki:Common.js: Difference between revisions

/* 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">&times;</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">&times;</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();
                } */
/*
 * Center the map on the selected marker.
 */
/*
 * Recalculate the map size after opening/expanding it.
 * This prevents Leaflet from using an incorrect
 * container size when centering the marker.
 */
foundMap.invalidateSize(true);

/*
 * Center the map directly on the selected marker.
 */
foundMap.setView(
    foundLatLng,
    18,
    {
        animate: false
    }
);

/*
 * Recalculate once more after the map has rendered,
 * then center the marker again.
 */
setTimeout(function () {

    foundMap.invalidateSize(true);

    foundMap.setView(
        foundLatLng,
        18,
        {
            animate: false
        }
    );

}, 300);
/*
 * Open the marker popup.
 */
if (
    typeof foundLayer.openPopup === 'function'
) {
    foundLayer.openPopup();
}

            }, 600);

        });

});
/*end of map link*/

/*map marker colors*/
/* Map marker colors/icons */

(function () {

    var markerIcons = {
        offices: 'Bluepin.png',
        colleges: 'Redpin.png',
        institutes: 'Greenpin.png'
    };

    function applyMarkerIcon(layer) {

        /* Check if this is an actual GeoJSON marker */
        if (layer.feature && layer.feature.properties) {

            var category = layer.feature.properties.category;

            console.log(
                'Map marker:',
                layer.feature.properties.name,
                'Category:',
                category
            );

            if (category && markerIcons[category]) {

                var iconUrl = mw.util.getUrl(
                    'Special:Redirect/file/' +
                    markerIcons[category]
                );

                console.log(
                    'Applying icon:',
                    markerIcons[category],
                    iconUrl
                );

                var icon = L.icon({
                    iconUrl: iconUrl,

                    iconSize: [32, 32],
                    iconAnchor: [16, 32],
                    popupAnchor: [0, -32]
                });

                if (typeof layer.setIcon === 'function') {
                    layer.setIcon(icon);

                    console.log(
                        'ICON APPLIED:',
                        markerIcons[category]
                    );
                }
            }
        }

        /*
         * Some Maps/Leaflet layers contain additional layers.
         * Search recursively until we reach the actual marker.
         */
        if (typeof layer.eachLayer === 'function') {

            layer.eachLayer(function (childLayer) {
                applyMarkerIcon(childLayer);
            });

        }
    }


    function applyCategoryIcons() {

        if (typeof mapsLeafletList === 'undefined') {
            console.log('mapsLeafletList not found');
            return;
        }

        mapsLeafletList.forEach(function (mapContainer) {

            if (!mapContainer || !mapContainer.map) {
                return;
            }

            console.log('Applying map marker icons...');

            var map = mapContainer.map;

            map.eachLayer(function (layer) {
                applyMarkerIcon(layer);
            });

        });
    }


    /*
     * Wait for Maps/Leaflet to finish creating the map.
     */
    mw.hook('wikipage.content').add(function () {

        setTimeout(function () {
            applyCategoryIcons();
        }, 1000);

    });

})();
/*end of map pin color code*/