MediaWiki:Common.js: Difference between revisions

From ClimateKG
Jump to navigation Jump to search
No edit summary
Tag: Reverted
Undo revision 1025 by Design (talk)
Tag: Undo
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
// Display current page in breadcrumbs
 
$(document).ready(function() {
 
  var breadcrumbs = $('#mw-content-subtitle');
$(function () {
 
    var $bc = $('#mw-content-subtitle');
  if (breadcrumbs.length) {
    if ($bc.length && $bc.text().trim() !== '') {
    // Get the current page title and extract the last segment
        $bc.prepend('<a href="/wiki/Main_Page">Climate Knowledge Graph</a> › ');
     var currentTitle = mw.config.get('wgPageName');
     }
     var currentPageDisplay = currentTitle.split('/').pop(); // Gets "Chapter-1"
});
      
 
     // Replace < and | with >
 
     var subpages = breadcrumbs.find('.subpages');
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js');
     subpages.html(subpages.html().replace(/&lt;\s*/, '').replace(/\s*\|\s*/g, ' > '));
 
   
$(function () {
    // Create a breadcrumb item for the current page
     if ($('#ar6-gender-chart').length === 0) return;
    var currentItem = $('<span class="breadcrumb-current"></span>')
 
      .text(currentPageDisplay);
    /* Faked Wikibase SPARQL result */
   
     var genderData = {
    // Add separator and current page
        labels: ['Male', 'Female', 'Unknown'],
    breadcrumbs.append('<span class="breadcrumb-separator"> > </span>').append(currentItem);
        values: [357, 224, 12],
  }
        colors: ['#364497', '#01adef', '#b0b7c3']
     };
 
     var countryData = [
        { name: 'United States', count: 89 },
        { name: 'United Kingdom', count: 67 },
        { name: 'Germany', count: 45 },
        { name: 'France', count: 38 },
        { name: 'China', count: 34 },
        { name: 'Australia', count: 28 },
        { name: 'India', count: 24 },
        { name: 'Canada', count: 22 },
        { name: 'Japan', count: 18 },
        { name: 'Brazil', count: 15 },
        { name: 'South Africa', count: 12 },
        { name: 'Netherlands', count: 11 },
        { name: 'Switzerland', count: 10 },
        { name: 'Mexico', count: 9 },
        { name: 'Kenya', count: 8 }
    ];
 
     /* Wait for Chart.js to load */
    setTimeout(function () {
 
        /* Pie chart */
        var ctx = document.getElementById('ar6-gender-chart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: genderData.labels,
                datasets: [{
                    data: genderData.values,
                    backgroundColor: genderData.colors,
                    borderWidth: 1,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: false,
                plugins: {
                    legend: { display: false }
                }
            }
        });
 
        /* Legend */
        var legend = document.getElementById('ar6-gender-legend');
        var total = genderData.values.reduce(function (a, b) { return a + b; }, 0);
        genderData.labels.forEach(function (label, i) {
            var pct = Math.round(genderData.values[i] / total * 100);
            legend.innerHTML += '<div class="ar6-legend-item">' +
                '<span class="ar6-legend-dot" style="background:' + genderData.colors[i] + '"></span>' +
                '<span class="ar6-legend-label">' + label + '</span>' +
                '<span class="ar6-legend-value">' + genderData.values[i] + ' (' + pct + '%)</span>' +
                '</div>';
        });
 
        /* Country bar chart */
        var mapEl = document.getElementById('ar6-map');
        var max = Math.max.apply(null, countryData.map(function (c) { return c.count; }));
        var html = '<div class="ar6-country-list">';
        countryData.forEach(function (c) {
            var pct = Math.round(c.count / max * 100);
            html += '<div class="ar6-country-row">' +
                '<span class="ar6-country-name">' + c.name + '</span>' +
                '<div class="ar6-country-bar-wrap">' +
                '<div class="ar6-country-bar" style="width:' + pct + '%"></div>' +
                '</div>' +
                '<span class="ar6-country-count">' + c.count + '</span>' +
                '</div>';
        });
        html += '</div>';
        mapEl.innerHTML = html;
 
    }, 1200);
 
});
});

Latest revision as of 06:49, 17 April 2026

// Display current page in breadcrumbs
$(document).ready(function() {
  var breadcrumbs = $('#mw-content-subtitle');
  
  if (breadcrumbs.length) {
    // Get the current page title and extract the last segment
    var currentTitle = mw.config.get('wgPageName');
    var currentPageDisplay = currentTitle.split('/').pop(); // Gets "Chapter-1"
    
    // Replace < and | with >
    var subpages = breadcrumbs.find('.subpages');
    subpages.html(subpages.html().replace(/&lt;\s*/, '').replace(/\s*\|\s*/g, ' > '));
    
    // Create a breadcrumb item for the current page
    var currentItem = $('<span class="breadcrumb-current"></span>')
      .text(currentPageDisplay);
    
    // Add separator and current page
    breadcrumbs.append('<span class="breadcrumb-separator"> > </span>').append(currentItem);
  }
});